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

Side by Side Diff: static/src/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: Addressed NITs Created Dec. 12, 2017, 10:20 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
« no previous file with comments | « no previous file | static/src/scss/components/_article.scss » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /*! 1 /*!
2 * This file is part of help.eyeo.com. 2 * This file is part of help.eyeo.com.
3 * Copyright (C) 2017-present eyeo GmbH 3 * Copyright (C) 2017-present eyeo GmbH
4 * 4 *
5 * help.eyeo.com is free software: you can redistribute it and/or modify 5 * help.eyeo.com is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License as published by 6 * it under the terms of the GNU General Public License as published by
7 * the Free Software Foundation, either version 3 of the License, or 7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version. 8 * (at your option) any later version.
9 * 9 *
10 * help.eyeo.com is distributed in the hope that it will be useful, 10 * help.eyeo.com is distributed in the hope that it will be useful,
(...skipping 234 matching lines...) Expand 10 before | Expand all | Expand 10 after
245 } 245 }
246 246
247 /************************************************************************** 247 /**************************************************************************
248 * BrowserSelect 248 * BrowserSelect
249 **************************************************************************/ 249 **************************************************************************/
250 250
251 function BrowserSelect(select) 251 function BrowserSelect(select)
252 { 252 {
253 this.select = select; 253 this.select = select;
254 CustomSelect.apply(this, [this.select]); 254 CustomSelect.apply(this, [this.select]);
255 this.noContentMessage = document.getElementById("no-content-for-platform-n otice");
255 256
256 this.BROWSER_STORAGE_KEY = "BROWSER"; 257 this.BROWSER_STORAGE_KEY = "BROWSER";
257 this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED"; 258 this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED";
258 this.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser", 259 this.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser",
259 "yandexbrowser", "maxthon", "msie", 260 "yandexbrowser", "maxthon", "msie",
260 "msedge", "firefox", "ios", "safari"]; 261 "msedge", "firefox", "ios", "safari"];
261 this.DEFAULT_BROWSER = "chrome"; 262 this.DEFAULT_BROWSER = "chrome";
262 263
264 this.setCurrentArticleSupportedBrowsers();
265
263 this.select 266 this.select
264 .addEventListener("click", this._onClickOrKeyDown.bind(this), false); 267 .addEventListener("click", this._onClickOrKeyDown.bind(this), false);
265 268
266 this.select 269 this.select
267 .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false); 270 .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false);
268 271
272 this.noContentMessage
273 .addEventListener("click", this._onClickNoContentMessage.bind(this), fal se);
274
269 var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY); 275 var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY);
270 if (storedBrowser) this.selectOption(storedBrowser); 276 if (storedBrowser) this.selectOption(storedBrowser);
271 else this.detectBrowser(); 277 else this.detectBrowser();
272 } 278 }
273 279
274 BrowserSelect.prototype = Object.create(CustomSelect.prototype); 280 BrowserSelect.prototype = Object.create(CustomSelect.prototype);
275 BrowserSelect.prototype.constructor = BrowserSelect; 281 BrowserSelect.prototype.constructor = BrowserSelect;
276 282
283 BrowserSelect.prototype.setCurrentArticleSupportedBrowsers = function()
284 {
285 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
286 {
287 var supportedBrowser = this.SUPPORTED_BROWSERS[i];
288 if (!document.querySelector(".platform-"+supportedBrowser))
289 {
290 this.noContentMessage
291 .querySelector("[data-value='" + supportedBrowser + "']")
292 .setAttribute("hidden", "true");
293 }
294 }
295 };
296
277 BrowserSelect.prototype.detectBrowser = function() 297 BrowserSelect.prototype.detectBrowser = function()
278 { 298 {
279 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++) 299 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
280 { 300 {
281 var supportedBrowser = this.SUPPORTED_BROWSERS[i]; 301 var supportedBrowser = this.SUPPORTED_BROWSERS[i];
282 if (bowser[supportedBrowser]) 302 if (bowser[supportedBrowser])
283 { 303 {
284 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true"); 304 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true");
285 return this.selectOption(supportedBrowser); 305 return this.selectOption(supportedBrowser);
286 } 306 }
(...skipping 29 matching lines...) Expand all
316 { 336 {
317 var autodetected = document 337 var autodetected = document
318 .getElementById("browser-select-autodetected") 338 .getElementById("browser-select-autodetected")
319 .innerHTML; 339 .innerHTML;
320 selectedOption += "<span class='muted'>(" + autodetected + ")</span>"; 340 selectedOption += "<span class='muted'>(" + autodetected + ")</span>";
321 } 341 }
322 342
323 this.select 343 this.select
324 .querySelector(".custom-select-selected") 344 .querySelector(".custom-select-selected")
325 .innerHTML = selectedOption; 345 .innerHTML = selectedOption;
326 346
327 if (!document.querySelector(".platform-" + browser)) 347 if (document.querySelector(".platform-" + browser))
328 { 348 {
329 this.handleNoContentForBrowser(browser); 349 this.noContentMessage.setAttribute("hidden", "true");
350 }
351 else
352 {
353 this.noContentMessage.removeAttribute("hidden");
330 } 354 }
331 }; 355 };
332 356
333 BrowserSelect.prototype.handleNoContentForBrowser = function(browser)
334 {
335 var section = document.createElement("section");
336 section.classList.add("platform-" + browser);
337 section.innerHTML = document
338 .getElementById("no-content-for-platform-message")
339 .innerHTML;
340
341 document
342 .querySelector(".article-body")
343 .insertAdjacentElement("afterbegin", section);
344 }
345
346 BrowserSelect.prototype._onClickOrKeyDown = function(event) 357 BrowserSelect.prototype._onClickOrKeyDown = function(event)
347 { 358 {
348 var option = event.target.closest(".custom-select-option"); 359 var option = event.target.closest(".custom-select-option");
349 if (!option) return; 360 if (!option) return;
350 361
351 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13; 362 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13;
352 if (event.keyCode && !IS_ENTER_KEY) return; 363 if (event.keyCode && !IS_ENTER_KEY) return;
353 364
354 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY); 365 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
355 366
356 // Uncheck previously checked option 367 // Uncheck previously checked option
357 this.select 368 this.select
358 .querySelector("[aria-checked='true']") 369 .querySelector("[aria-checked='true']")
359 .setAttribute("aria-checked", "false"); 370 .setAttribute("aria-checked", "false");
360 371
361 this.selectOption(option.getAttribute("data-value")); 372 this.selectOption(option.getAttribute("data-value"));
362 373
363 this.close(); 374 this.close();
364 }; 375 };
365 376
377 BrowserSelect.prototype._onClickNoContentMessage = function(event)
378 {
379 if (event.target.tagName != "BUTTON") return;
380 this.selectOption(event.target.parentElement.getAttribute("data-value"));
381 };
382
366 var browserSelect = document.getElementById("browser-select"); 383 var browserSelect = document.getElementById("browser-select");
367 if (browserSelect) 384 if (browserSelect)
368 { 385 {
369 new BrowserSelect(browserSelect); 386 new BrowserSelect(browserSelect);
370 } 387 }
371 388
372 }, false); 389 }, false);
373 }()); 390 }());
374 //# sourceMappingURL=main.js.map
375
376 //# sourceMappingURL=main-debug.js.map
377
378 //# sourceMappingURL=main.js.map
OLDNEW
« no previous file with comments | « no previous file | static/src/scss/components/_article.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld