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: Rebased Created Dec. 12, 2017, 10:02 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-m essage");
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.querySelector("[data-value='" + supportedBrowser + "']")
291 .setAttribute("hidden", "true");
292 }
293 }
294 };
295
277 BrowserSelect.prototype.detectBrowser = function() 296 BrowserSelect.prototype.detectBrowser = function()
278 { 297 {
279 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++) 298 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
280 { 299 {
281 var supportedBrowser = this.SUPPORTED_BROWSERS[i]; 300 var supportedBrowser = this.SUPPORTED_BROWSERS[i];
282 if (bowser[supportedBrowser]) 301 if (bowser[supportedBrowser])
283 { 302 {
284 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true"); 303 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true");
285 return this.selectOption(supportedBrowser); 304 return this.selectOption(supportedBrowser);
286 } 305 }
(...skipping 29 matching lines...) Expand all
316 { 335 {
317 var autodetected = document 336 var autodetected = document
318 .getElementById("browser-select-autodetected") 337 .getElementById("browser-select-autodetected")
319 .innerHTML; 338 .innerHTML;
320 selectedOption += "<span class='muted'>(" + autodetected + ")</span>"; 339 selectedOption += "<span class='muted'>(" + autodetected + ")</span>";
321 } 340 }
322 341
323 this.select 342 this.select
324 .querySelector(".custom-select-selected") 343 .querySelector(".custom-select-selected")
325 .innerHTML = selectedOption; 344 .innerHTML = selectedOption;
326 345
327 if (!document.querySelector(".platform-" + browser)) 346 if (document.querySelector(".platform-" + browser))
328 { 347 {
329 this.handleNoContentForBrowser(browser); 348 this.noContentMessage.setAttribute("hidden", "true");
349 }
350 else
351 {
352 this.noContentMessage.removeAttribute("hidden");
330 } 353 }
331 }; 354 };
332 355
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) 356 BrowserSelect.prototype._onClickOrKeyDown = function(event)
347 { 357 {
348 var option = event.target.closest(".custom-select-option"); 358 var option = event.target.closest(".custom-select-option");
349 if (!option) return; 359 if (!option) return;
350 360
351 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13; 361 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13;
352 if (event.keyCode && !IS_ENTER_KEY) return; 362 if (event.keyCode && !IS_ENTER_KEY) return;
353 363
354 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY); 364 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
355 365
356 // Uncheck previously checked option 366 // Uncheck previously checked option
357 this.select 367 this.select
358 .querySelector("[aria-checked='true']") 368 .querySelector("[aria-checked='true']")
359 .setAttribute("aria-checked", "false"); 369 .setAttribute("aria-checked", "false");
360 370
361 this.selectOption(option.getAttribute("data-value")); 371 this.selectOption(option.getAttribute("data-value"));
362 372
363 this.close(); 373 this.close();
364 }; 374 };
365 375
376 BrowserSelect.prototype._onClickNoContentMessage = function(event)
377 {
378 if (event.target.tagName != "BUTTON") return;
379
380 var browser = event.target.parentElement.getAttribute("data-value");
381 this.selectOption(browser);
382 };
383
366 var browserSelect = document.getElementById("browser-select"); 384 var browserSelect = document.getElementById("browser-select");
367 if (browserSelect) 385 if (browserSelect)
368 { 386 {
369 new BrowserSelect(browserSelect); 387 new BrowserSelect(browserSelect);
370 } 388 }
371 389
372 }, false); 390 }, false);
373 }()); 391 }());
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