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

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

Issue 29559620: Issue 5692 - Create Browser Selector with Browser Detection Component for help.eyeo.com (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Patch Set: Use Object.create() for inheritance, Remove console.log Created Nov. 1, 2017, 12:33 p.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 | « static/img/svg/arrow-icon-down-secondary.svg ('k') | static/js/vendor/bowser.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 (function(){ 1 (function(){
2 document.addEventListener("DOMContentLoaded", function() 2 document.addEventListener("DOMContentLoaded", function()
3 { 3 {
4 4
5 /************************************************************************** 5 /**************************************************************************
6 * General 6 * General
7 **************************************************************************/ 7 **************************************************************************/
8 8
9 // Change html class name from "no-js" to "js" 9 // Change html class name from "no-js" to "js"
10 document.documentElement.className = "js"; 10 document.documentElement.className = "js";
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
48 { 48 {
49 // setTimeout to allow document.activeElement 49 // setTimeout to allow document.activeElement
50 // to move to newly focused element 50 // to move to newly focused element
51 setTimeout(function() 51 setTimeout(function()
52 { 52 {
53 var newFocus = document.activeElement; 53 var newFocus = document.activeElement;
54 54
55 if (newFocus 55 if (newFocus
56 .classList.contains("custom-select-selected") || 56 .classList.contains("custom-select-selected") ||
57 newFocus 57 newFocus
58 .classList.contains("custom-select-option") ||
59 newFocus
58 .parentElement 60 .parentElement
59 .classList.contains("custom-select-option")) 61 .classList.contains("custom-select-option"))
60 { 62 {
61 return; 63 return;
62 } 64 }
63 65
64 this.close(); 66 this.close();
65 67
66 }.bind(this), 1); 68 }.bind(this), 1);
67 } 69 }
(...skipping 149 matching lines...) Expand 10 before | Expand all | Expand 10 after
217 219
218 this.toggleSection(event.target); 220 this.toggleSection(event.target);
219 } 221 }
220 222
221 var productTopicsAccordion = document.getElementById('product-topics-accordi on'); 223 var productTopicsAccordion = document.getElementById('product-topics-accordi on');
222 if (productTopicsAccordion) 224 if (productTopicsAccordion)
223 { 225 {
224 new Accordion(productTopicsAccordion); 226 new Accordion(productTopicsAccordion);
225 } 227 }
226 228
229 /**************************************************************************
230 * BrowserSelect
231 **************************************************************************/
232
233 function BrowserSelect(select)
234 {
235 this.select = select;
236 CustomSelect.apply(this, [this.select]);
237
238 this.DEFAULT_BROWSER = "chrome";
239 this.BROWSER_STORAGE_KEY = "BROWSER";
240 this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED";
241
242 this.select
243 .addEventListener("click", this._onClickOrKeyDown.bind(this), false);
244
245 this.select
246 .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false);
247
248 var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY);
249 if (storedBrowser) this.selectOption(storedBrowser);
250 else this.detectBrowser();
251 }
252
253 BrowserSelect.prototype = Object.create(CustomSelect.prototype);
254 BrowserSelect.prototype.constructor = BrowserSelect;
255
256 BrowserSelect.prototype.detectBrowser = function()
257 {
258 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true");
259
260 var browser;
261 if (bowser.chrome) browser = "chrome";
262 else if (bowser.opera) browser = "opera";
263 else if (bowser.coast) browser = "opera";
264 else if (bowser.samsungBrowser) browser = "samsung";
265 else if (bowser.yandexbrowser) browser = "yandex";
266 else if (bowser.maxthon) browser = "maxthon";
267 else if (bowser.msie) browser = "ie";
268 else if (bowser.msedge) browser = "edge";
269 else if (bowser.firefox) browser = "firefox";
270 else if (bowser.ios) browser = "ios";
271 else if (bowser.safari) browser = "safari";
272 else
273 {
274 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
275 browser = this.DEFAULT_BROWSER;
276 }
277
278 this.selectOption(browser);
279 };
280
281 BrowserSelect.prototype.selectOption = function(browser)
282 {
283 localStorage.setItem(this.BROWSER_STORAGE_KEY, browser);
284
285 // Change body class
286 var bodyClassList = Array.prototype.slice.call(document.body.classList);
287 for (var i = 0; i < bodyClassList.length; i++)
288 {
289 if (bodyClassList[i].indexOf('ua-') > -1)
290 {
291 document.body.classList.remove(bodyClassList[i]);
292 }
293 }
294 document.body.classList.add("ua-" + browser);
295
296 // Check selected option
297 var selectedItem = this.select.querySelector("[data-value='" + browser + " ']");
298 selectedItem.setAttribute("aria-checked", "true");
299
300 // Set selected option
301 var selectedOption = selectedItem.innerHTML;
302
303 if (localStorage.getItem(this.BROWSER_AUTODETECTED_STORAGE_KEY))
304 {
305 var autodetected = document
306 .getElementById('browser-select-autodetected')
307 .innerHTML;
308 selectedOption += "<span class='muted'>(" + autodetected + ")</span>";
309 }
310
311 this.select
312 .querySelector(".custom-select-selected")
313 .innerHTML = selectedOption;
314 };
315
316 BrowserSelect.prototype._onClickOrKeyDown = function(event)
317 {
318 if (!event.target.classList.contains("custom-select-option")) return;
319
320 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13;
321 if (event.keyCode && !IS_ENTER_KEY) return;
322
323 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
324
325 // Uncheck previously checked option
326 this.select
327 .querySelector("[aria-checked='true']")
328 .setAttribute("aria-checked", "false");
329
330 this.selectOption(event.target.getAttribute("data-value"));
331
332 this.close();
333 };
334
335 var browserSelect = document.getElementById("browser-select");
336 if (browserSelect)
337 {
338 new BrowserSelect(browserSelect);
339 }
340
227 }, false); 341 }, false);
228 }()); 342 }());
OLDNEW
« no previous file with comments | « static/img/svg/arrow-icon-down-secondary.svg ('k') | static/js/vendor/bowser.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld