| OLD | NEW |
| (Empty) |
| 1 (function() | |
| 2 { | |
| 3 document.addEventListener("DOMContentLoaded", function() | |
| 4 { | |
| 5 | |
| 6 /************************************************************************** | |
| 7 * General | |
| 8 **************************************************************************/ | |
| 9 | |
| 10 // Change html class name from "no-js" to "js" | |
| 11 document.documentElement.className = "js"; | |
| 12 | |
| 13 /************************************************************************** | |
| 14 * Navbar | |
| 15 **************************************************************************/ | |
| 16 | |
| 17 function toggleNavbarCollapse() | |
| 18 { | |
| 19 var navbarCollapseEls = this.parentElement.getElementsByClassName("navbar-
collapse"); | |
| 20 for (var i = 0; i < navbarCollapseEls.length; i++) | |
| 21 { | |
| 22 navbarCollapseEls[i] | |
| 23 .classList.toggle("open") | |
| 24 } | |
| 25 } | |
| 26 | |
| 27 var toggleNavbarCollapseEls = document.getElementsByClassName("toggle-navbar
-collapse"); | |
| 28 for (var i = 0; i < toggleNavbarCollapseEls.length; i++) | |
| 29 { | |
| 30 toggleNavbarCollapseEls[i] | |
| 31 .addEventListener("click", toggleNavbarCollapse, false); | |
| 32 } | |
| 33 | |
| 34 /************************************************************************** | |
| 35 * CustomSelect | |
| 36 **************************************************************************/ | |
| 37 | |
| 38 function CustomSelect(select) | |
| 39 { | |
| 40 this.select = select; | |
| 41 this.close(); | |
| 42 this.select | |
| 43 .addEventListener("click", this._onClick.bind(this), false); | |
| 44 this.select | |
| 45 .addEventListener("focusout", this._onFocusOut.bind(this), false); | |
| 46 } | |
| 47 | |
| 48 CustomSelect.prototype._onFocusOut = function() | |
| 49 { | |
| 50 // setTimeout to allow document.activeElement | |
| 51 // to move to newly focused element | |
| 52 setTimeout(function() | |
| 53 { | |
| 54 var newFocus = document.activeElement; | |
| 55 | |
| 56 if (newFocus | |
| 57 .classList.contains("custom-select-selected") || | |
| 58 newFocus | |
| 59 .classList.contains("custom-select-option") || | |
| 60 newFocus | |
| 61 .parentElement | |
| 62 .classList.contains("custom-select-option")) | |
| 63 { | |
| 64 return; | |
| 65 } | |
| 66 | |
| 67 this.close(); | |
| 68 | |
| 69 }.bind(this), 1); | |
| 70 } | |
| 71 | |
| 72 CustomSelect.prototype._onClick = function(event) | |
| 73 { | |
| 74 if (event.target.classList.contains("custom-select-selected")) | |
| 75 { | |
| 76 var options = this.select.querySelector(".custom-select-options"); | |
| 77 if (options.getAttribute("aria-hidden") == "true") | |
| 78 { | |
| 79 this.open(); | |
| 80 } | |
| 81 else | |
| 82 { | |
| 83 this.close(); | |
| 84 } | |
| 85 } | |
| 86 } | |
| 87 | |
| 88 CustomSelect.prototype.open = function() | |
| 89 { | |
| 90 this.select | |
| 91 .querySelector(".custom-select-selected") | |
| 92 .setAttribute("aria-expanded", "true"); | |
| 93 | |
| 94 this.select | |
| 95 .querySelector(".custom-select-options") | |
| 96 .removeAttribute("aria-hidden"); | |
| 97 } | |
| 98 | |
| 99 CustomSelect.prototype.close = function() | |
| 100 { | |
| 101 this.select | |
| 102 .querySelector(".custom-select-selected") | |
| 103 .setAttribute("aria-expanded", "false"); | |
| 104 | |
| 105 this.select | |
| 106 .querySelector(".custom-select-options") | |
| 107 .setAttribute("aria-hidden", "true"); | |
| 108 } | |
| 109 | |
| 110 new CustomSelect(document.getElementById("language-select")); | |
| 111 | |
| 112 /************************************************************************** | |
| 113 * Accordion | |
| 114 **************************************************************************/ | |
| 115 | |
| 116 function Accordion(accordion) | |
| 117 { | |
| 118 this.accordion = accordion; | |
| 119 | |
| 120 var accordionButtons = this.accordion.getElementsByClassName('accordion-to
ggle-button'); | |
| 121 for (var i = 0; i < accordionButtons.length; i++) | |
| 122 { | |
| 123 // Close all sections except the first | |
| 124 if (i !== 0) | |
| 125 { | |
| 126 accordionButtons[i].setAttribute("aria-expanded", "false"); | |
| 127 document | |
| 128 .getElementById( accordionButtons[i].getAttribute("aria-controls") ) | |
| 129 .setAttribute("hidden", "true"); | |
| 130 } | |
| 131 } | |
| 132 | |
| 133 this.accordion | |
| 134 .addEventListener("click", this._onClick.bind(this), false); | |
| 135 this.accordion | |
| 136 .addEventListener("keydown", this._onKeyDown.bind(this), false); | |
| 137 } | |
| 138 | |
| 139 Accordion.prototype.toggleSection = function(clickedButton) | |
| 140 { | |
| 141 // Hide currently expanded section | |
| 142 var expandedButton = this.accordion.querySelector("button[aria-expanded='t
rue']"); | |
| 143 if (expandedButton) | |
| 144 { | |
| 145 expandedButton.setAttribute("aria-expanded", "false"); | |
| 146 document | |
| 147 .getElementById( expandedButton.getAttribute("aria-controls") ) | |
| 148 .setAttribute("hidden", "true"); | |
| 149 } | |
| 150 | |
| 151 // If currently expanded section is clicked | |
| 152 if (expandedButton === clickedButton) return; | |
| 153 | |
| 154 // Expand new section | |
| 155 clickedButton.setAttribute("aria-expanded", "true"); | |
| 156 document | |
| 157 .getElementById( clickedButton.getAttribute("aria-controls") ) | |
| 158 .removeAttribute("hidden"); | |
| 159 } | |
| 160 | |
| 161 Accordion.prototype.focusNextSection = function() | |
| 162 { | |
| 163 var currentFocus = document.activeElement; | |
| 164 var nextheading = currentFocus.parentElement.nextElementSibling.nextElemen
tSibling; | |
| 165 | |
| 166 if (nextheading) | |
| 167 { | |
| 168 nextheading // .accordion-heading | |
| 169 .firstElementChild // .accordion-toggle-button | |
| 170 .focus(); | |
| 171 } | |
| 172 else | |
| 173 { | |
| 174 this.accordion | |
| 175 .firstElementChild // .accordion-heading | |
| 176 .firstElementChild // .accordion-toggle-button | |
| 177 .focus(); | |
| 178 } | |
| 179 } | |
| 180 | |
| 181 Accordion.prototype.focusPrevSection = function() | |
| 182 { | |
| 183 var currentFocus = document.activeElement; | |
| 184 var prevAccordionBody = currentFocus.parentElement.previousElementSibling; | |
| 185 | |
| 186 if (prevAccordionBody) | |
| 187 { | |
| 188 prevAccordionBody // .accordion-body | |
| 189 .previousElementSibling // .accordion-heading | |
| 190 .firstElementChild // .accordion-toggle-button | |
| 191 .focus(); | |
| 192 } | |
| 193 else | |
| 194 { | |
| 195 this.accordion | |
| 196 .lastElementChild // .accordion-body | |
| 197 .previousElementSibling // .accordion-heading | |
| 198 .firstElementChild // .accordion-toggle-button | |
| 199 .focus(); | |
| 200 } | |
| 201 } | |
| 202 | |
| 203 Accordion.prototype._onKeyDown = function(event) | |
| 204 { | |
| 205 if (!event.target.classList.contains("accordion-toggle-button")) return; | |
| 206 | |
| 207 if (event.key == "ArrowUp" || event.keyCode == 38) | |
| 208 { | |
| 209 this.focusPrevSection(); | |
| 210 } | |
| 211 else if (event.key == "ArrowDown" || event.keyCode == 40) | |
| 212 { | |
| 213 this.focusNextSection(); | |
| 214 } | |
| 215 } | |
| 216 | |
| 217 Accordion.prototype._onClick = function(event) | |
| 218 { | |
| 219 if (!event.target.classList.contains("accordion-toggle-button")) return; | |
| 220 | |
| 221 this.toggleSection(event.target); | |
| 222 } | |
| 223 | |
| 224 var productTopicsAccordion = document.getElementById('product-topics-accordi
on'); | |
| 225 if (productTopicsAccordion) | |
| 226 { | |
| 227 new Accordion(productTopicsAccordion); | |
| 228 } | |
| 229 | |
| 230 /************************************************************************** | |
| 231 * BrowserSelect | |
| 232 **************************************************************************/ | |
| 233 | |
| 234 function BrowserSelect(select) | |
| 235 { | |
| 236 this.select = select; | |
| 237 CustomSelect.apply(this, [this.select]); | |
| 238 | |
| 239 this.BROWSER_STORAGE_KEY = "BROWSER"; | |
| 240 this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED"; | |
| 241 this.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser", | |
| 242 "yandexbrowser", "maxthon", "msie", | |
| 243 "msedge", "firefox", "ios", "safari"]; | |
| 244 this.DEFAULT_BROWSER = "chrome"; | |
| 245 | |
| 246 this.select | |
| 247 .addEventListener("click", this._onClickOrKeyDown.bind(this), false); | |
| 248 | |
| 249 this.select | |
| 250 .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false); | |
| 251 | |
| 252 var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY); | |
| 253 if (storedBrowser) this.selectOption(storedBrowser); | |
| 254 else this.detectBrowser(); | |
| 255 } | |
| 256 | |
| 257 BrowserSelect.prototype = Object.create(CustomSelect.prototype); | |
| 258 BrowserSelect.prototype.constructor = BrowserSelect; | |
| 259 | |
| 260 BrowserSelect.prototype.detectBrowser = function() | |
| 261 { | |
| 262 for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++) | |
| 263 { | |
| 264 var supportedBrowser = this.SUPPORTED_BROWSERS[i]; | |
| 265 if (bowser[supportedBrowser]) | |
| 266 { | |
| 267 localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true"); | |
| 268 return this.selectOption(supportedBrowser); | |
| 269 } | |
| 270 } | |
| 271 | |
| 272 this.selectOption(this.DEFAULT_BROWSER); | |
| 273 }; | |
| 274 | |
| 275 BrowserSelect.prototype.selectOption = function(browser) | |
| 276 { | |
| 277 localStorage.setItem(this.BROWSER_STORAGE_KEY, browser); | |
| 278 | |
| 279 // Change body class | |
| 280 var bodyClassList = Array.prototype.slice.call(document.body.classList); | |
| 281 for (var i = 0; i < bodyClassList.length; i++) | |
| 282 { | |
| 283 if (bodyClassList[i].indexOf("ua-") > -1) | |
| 284 { | |
| 285 document.body.classList.remove(bodyClassList[i]); | |
| 286 } | |
| 287 } | |
| 288 document.body.classList.add("ua-" + browser); | |
| 289 | |
| 290 // Check selected option | |
| 291 var selectedItem = this.select | |
| 292 .querySelector("[data-value='" + browser + "']"); | |
| 293 selectedItem.setAttribute("aria-checked", "true"); | |
| 294 | |
| 295 // Set selected option | |
| 296 var selectedOption = selectedItem.innerHTML; | |
| 297 | |
| 298 if (localStorage.getItem(this.BROWSER_AUTODETECTED_STORAGE_KEY)) | |
| 299 { | |
| 300 var autodetected = document | |
| 301 .getElementById("browser-select-autodetected") | |
| 302 .innerHTML; | |
| 303 selectedOption += "<span class='muted'>(" + autodetected + ")</span>"; | |
| 304 } | |
| 305 | |
| 306 this.select | |
| 307 .querySelector(".custom-select-selected") | |
| 308 .innerHTML = selectedOption; | |
| 309 | |
| 310 if (!document.querySelector(".platform-" + browser)) | |
| 311 { | |
| 312 this.handleNoContentForBrowser(browser); | |
| 313 } | |
| 314 }; | |
| 315 | |
| 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) | |
| 330 { | |
| 331 var option = event.target.closest(".custom-select-option"); | |
| 332 if (!option) return; | |
| 333 | |
| 334 var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13; | |
| 335 if (event.keyCode && !IS_ENTER_KEY) return; | |
| 336 | |
| 337 localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY); | |
| 338 | |
| 339 // Uncheck previously checked option | |
| 340 this.select | |
| 341 .querySelector("[aria-checked='true']") | |
| 342 .setAttribute("aria-checked", "false"); | |
| 343 | |
| 344 this.selectOption(option.getAttribute("data-value")); | |
| 345 | |
| 346 this.close(); | |
| 347 }; | |
| 348 | |
| 349 var browserSelect = document.getElementById("browser-select"); | |
| 350 if (browserSelect) | |
| 351 { | |
| 352 new BrowserSelect(browserSelect); | |
| 353 } | |
| 354 | |
| 355 }, false); | |
| 356 }()); | |
| OLD | NEW |