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: Minor cleanup Created Oct. 3, 2017, 8:22 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 | « static/img/png/arrow-down-icon-secondary.png ('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 // Change html class name from "no-js" to "js" 5 // Change html class name from "no-js" to "js"
6 document.documentElement.className = "js"; 6 document.documentElement.className = "js";
7 7
8 // Toggle Navbar Collapse 8 // Toggle Navbar Collapse
9 function toggleNavbarCollapse() 9 function toggleNavbarCollapse()
10 { 10 {
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
42 var customSelectEls = document.getElementsByClassName('custom-select-selecte d'); 42 var customSelectEls = document.getElementsByClassName('custom-select-selecte d');
43 for (var i = 0; i < customSelectEls.length; i++) 43 for (var i = 0; i < customSelectEls.length; i++)
44 { 44 {
45 customSelectEls[i] 45 customSelectEls[i]
46 .addEventListener("click", onClickCustomSelect, false); 46 .addEventListener("click", onClickCustomSelect, false);
47 customSelectEls[i] 47 customSelectEls[i]
48 .nextElementSibling 48 .nextElementSibling
49 .setAttribute("aria-hidden", "true"); 49 .setAttribute("aria-hidden", "true");
50 } 50 }
51 51
52 // Browser Select
53 function BrowserSelect(select)
54 {
55 this.browserSelect = select;
56
57 this.DEFAULT_BROWSER = "chrome";
58 this.BROWSER_STORAGE_KEY = "BROWSER";
59 this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED";
60
61 this.browserSelect
62 .addEventListener("click", this._onClickOrKeyDown.bind(this), false);
63
64 this.browserSelect
65 .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false);
66
67 var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY);
68 if (storedBrowser)
69 {
70 this.selectOption(storedBrowser);
71 }
72 else
73 {
74 this.detectBrowser();
75 }
76 }
77
78 BrowserSelect.prototype.detectBrowser = function()
79 {
80 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true");
81
82 var browser;
83 if (bowser.chrome) browser = "chrome";
84 else if (bowser.opera) browser = "opera";
85 else if (bowser.coast) browser = "opera";
86 else if (bowser.samsungBrowser) browser = "samsung";
87 else if (bowser.yandexbrowser) browser = "yandex";
88 else if (bowser.maxthon) browser = "maxthon";
89 else if (bowser.msie) browser = "ie";
90 else if (bowser.msedge) browser = "edge";
91 else if (bowser.firefox) browser = "firefox";
92 else if (bowser.ios) browser = "ios";
93 else if (bowser.safari) browser = "safari";
94 else
95 {
96 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
97 browser = this.DEFAULT_BROWSER;
98 }
99
100 this.selectOption(browser);
101 }
102
103 BrowserSelect.prototype.selectOption = function(browser)
104 {
105 // Save value to Local Storage
106 localStorage.setItem(this.BROWSER_STORAGE_KEY, browser);
107
108 // Change body class
109 document.body.className = "ua-"+browser;
110
111 // Set selected option
112 var selectedOption = document.createElement("li");
113 selectedOption.innerHTML = this
114 .browserSelect
115 .querySelector("[data-value='"+browser+"']")
116 .innerHTML;
117
118 if (localStorage.getItem(this.BROWSER_AUTODETECTED_STORAGE_KEY))
119 {
120 selectedOption.innerHTML += "<span class='muted'>(autodetected)</span>";
121 }
122
123 this.browserSelect
124 .querySelector(".custom-select-selected")
125 .innerHTML = selectedOption.innerHTML;
126 }
127
128 BrowserSelect.prototype._onClickOrKeyDown = function(event)
129 {
130 if (!event.target.classList.contains("custom-select-option")) return;
131
132 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13;
133 if (event.keyCode && !IS_ENTER_KEY) return;
134
135 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
136
137 this.selectOption(event.target.getAttribute("data-value"));
138
139 // Close Select
140 document
141 .querySelector("#browser-select .custom-select-selected")
142 .setAttribute("aria-expanded", "false");
143
144 document
145 .querySelector("#browser-select .custom-select-options")
146 .setAttribute("aria-hidden", "true");
147 }
148
149 var browserSelect = document.getElementById("browser-select");
150 if (browserSelect)
151 {
152 new BrowserSelect(document.getElementById("browser-select"));
153 }
154
52 }, false); 155 }, false);
53 }()); 156 }());
OLDNEW
« no previous file with comments | « static/img/png/arrow-down-icon-secondary.png ('k') | static/js/vendor/bowser.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld