Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: static/js/main.js

Issue 29607560: Issue 6003 - Better handling of no-content-for-platform-message on help.eyeo.com (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Patch Set: Update no content for platform message Created Dec. 5, 2017, 9:36 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
1 (function() 1 (function()
2 { 2 {
3 document.addEventListener("DOMContentLoaded", function() 3 document.addEventListener("DOMContentLoaded", function()
4 { 4 {
5 5
6 /************************************************************************** 6 /**************************************************************************
7 * General 7 * General
8 **************************************************************************/ 8 **************************************************************************/
9 9
10 // Change html class name from "no-js" to "js" 10 // Change html class name from "no-js" to "js"
(...skipping 217 matching lines...) Expand 10 before | Expand all | Expand 10 after
228 } 228 }
229 229
230 /************************************************************************** 230 /**************************************************************************
231 * BrowserSelect 231 * BrowserSelect
232 **************************************************************************/ 232 **************************************************************************/
233 233
234 function BrowserSelect(select) 234 function BrowserSelect(select)
235 { 235 {
236 this.select = select; 236 this.select = select;
237 CustomSelect.apply(this, [this.select]); 237 CustomSelect.apply(this, [this.select]);
238 this.noContentMessage = document.getElementById("no-content-for-platform-m essage");
238 239
239 this.BROWSER_STORAGE_KEY = "BROWSER"; 240 this.BROWSER_STORAGE_KEY = "BROWSER";
240 this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED"; 241 this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED";
241 this.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser", 242 this.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser",
242 "yandexbrowser", "maxthon", "msie", 243 "yandexbrowser", "maxthon", "msie",
243 "msedge", "firefox", "ios", "safari"]; 244 "msedge", "firefox", "ios", "safari"];
244 this.DEFAULT_BROWSER = "chrome"; 245 this.DEFAULT_BROWSER = "chrome";
245 246
247 this.setCurrentArticleSupportedBrowsers();
248
246 this.select 249 this.select
247 .addEventListener("click", this._onClickOrKeyDown.bind(this), false); 250 .addEventListener("click", this._onClickOrKeyDown.bind(this), false);
248 251
249 this.select 252 this.select
250 .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false); 253 .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false);
251 254
255 this.noContentMessage
256 .addEventListener("click", this._onClickNoContentMessage.bind(this), fal se);
257
252 var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY); 258 var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY);
253 if (storedBrowser) this.selectOption(storedBrowser); 259 if (storedBrowser) this.selectOption(storedBrowser);
254 else this.detectBrowser(); 260 else this.detectBrowser();
255 } 261 }
256 262
257 BrowserSelect.prototype = Object.create(CustomSelect.prototype); 263 BrowserSelect.prototype = Object.create(CustomSelect.prototype);
258 BrowserSelect.prototype.constructor = BrowserSelect; 264 BrowserSelect.prototype.constructor = BrowserSelect;
259 265
266 BrowserSelect.prototype.setCurrentArticleSupportedBrowsers = function()
267 {
268 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
269 {
270 var supportedBrowser = this.SUPPORTED_BROWSERS[i];
271 if (!document.querySelector(".platform-"+supportedBrowser))
272 {
273 this.noContentMessage.querySelector("."+supportedBrowser)
274 .setAttribute("hidden", "true");
275 }
276 }
277 };
278
260 BrowserSelect.prototype.detectBrowser = function() 279 BrowserSelect.prototype.detectBrowser = function()
261 { 280 {
262 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++) 281 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
263 { 282 {
264 var supportedBrowser = this.SUPPORTED_BROWSERS[i]; 283 var supportedBrowser = this.SUPPORTED_BROWSERS[i];
265 if (bowser[supportedBrowser]) 284 if (bowser[supportedBrowser])
266 { 285 {
267 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true"); 286 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true");
268 return this.selectOption(supportedBrowser); 287 return this.selectOption(supportedBrowser);
269 } 288 }
(...skipping 29 matching lines...) Expand all
299 { 318 {
300 var autodetected = document 319 var autodetected = document
301 .getElementById("browser-select-autodetected") 320 .getElementById("browser-select-autodetected")
302 .innerHTML; 321 .innerHTML;
303 selectedOption += "<span class='muted'>(" + autodetected + ")</span>"; 322 selectedOption += "<span class='muted'>(" + autodetected + ")</span>";
304 } 323 }
305 324
306 this.select 325 this.select
307 .querySelector(".custom-select-selected") 326 .querySelector(".custom-select-selected")
308 .innerHTML = selectedOption; 327 .innerHTML = selectedOption;
328
329 this.noContentMessage.setAttribute("hidden", "true");
juliandoucette 2017/12/05 16:38:52 Why are you setting and then conditionally removin
ire 2017/12/06 14:43:39 Done.
ire 2017/12/06 14:43:39 Since this is the default I wanted to always set i
juliandoucette 2017/12/11 15:15:27 Acknowledged.
309 330
310 if (!document.querySelector(".platform-" + browser)) 331 if (!document.querySelector(".platform-" + browser))
311 { 332 {
312 this.handleNoContentForBrowser(browser); 333 this.noContentMessage.removeAttribute("hidden");
313 } 334 }
314 }; 335 };
315 336
316 BrowserSelect.prototype.handleNoContentForBrowser = function(browser)
317 {
318 var section = document.createElement("section");
319 section.classList.add("platform-" + browser);
320 section.innerHTML = document
321 .getElementById("no-content-for-platform-message")
322 .innerHTML;
323
324 document
325 .querySelector(".article-body")
326 .insertAdjacentElement("afterbegin", section);
327 }
328
329 BrowserSelect.prototype._onClickOrKeyDown = function(event) 337 BrowserSelect.prototype._onClickOrKeyDown = function(event)
330 { 338 {
331 var option = event.target.closest(".custom-select-option"); 339 var option = event.target.closest(".custom-select-option");
332 if (!option) return; 340 if (!option) return;
333 341
334 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13; 342 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13;
335 if (event.keyCode && !IS_ENTER_KEY) return; 343 if (event.keyCode && !IS_ENTER_KEY) return;
336 344
337 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY); 345 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
338 346
339 // Uncheck previously checked option 347 // Uncheck previously checked option
340 this.select 348 this.select
341 .querySelector("[aria-checked='true']") 349 .querySelector("[aria-checked='true']")
342 .setAttribute("aria-checked", "false"); 350 .setAttribute("aria-checked", "false");
343 351
344 this.selectOption(option.getAttribute("data-value")); 352 this.selectOption(option.getAttribute("data-value"));
345 353
346 this.close(); 354 this.close();
347 }; 355 };
348 356
357 BrowserSelect.prototype._onClickNoContentMessage = function(event)
358 {
359 if (event.target.tagName != "BUTTON") return;
360
361 var browser = event.target.parentElement.className;
juliandoucette 2017/12/05 16:38:52 suggest: use a data value e.g. data-browser instea
ire 2017/12/06 14:43:39 I agree with you. Done. For some reason (which I
juliandoucette 2017/12/11 15:15:27 I think data-value makes sense in the dropdown bec
ire 2017/12/12 10:21:13 Acknowledged.
362 this.selectOption(browser);
363 };
364
349 var browserSelect = document.getElementById("browser-select"); 365 var browserSelect = document.getElementById("browser-select");
350 if (browserSelect) 366 if (browserSelect)
351 { 367 {
352 new BrowserSelect(browserSelect); 368 new BrowserSelect(browserSelect);
353 } 369 }
354 370
355 }, false); 371 }, false);
356 }()); 372 }());
OLDNEW
« no previous file with comments | « no previous file | static/scss/components/_article.scss » ('j') | static/scss/components/_article.scss » ('J')

Powered by Google App Engine
This is Rietveld