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

Unified Diff: src/js/main.js

Issue 29624561: Issue 6104 - Minified code in help center repository (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Patch Set: Created Nov. 29, 2017, 2:25 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« gulpfile.js ('K') | « package.json ('k') | src/js/vendor/bowser.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: src/js/main.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,378 @@
+/*!
+ * This file is part of help.eyeo.com.
+ * Copyright (C) 2017-present eyeo GmbH
+ *
+ * help.eyeo.com is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * help.eyeo.com is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with help.eyeo.com. If not, see <http://www.gnu.org/licenses/>.
+ */
+(function()
+{
+ document.addEventListener("DOMContentLoaded", function()
+ {
+
+ /**************************************************************************
+ * General
+ **************************************************************************/
+
+ // Change html class name from "no-js" to "js"
+ document.documentElement.className = "js";
+
+ /**************************************************************************
+ * Navbar
+ **************************************************************************/
+
+ function toggleNavbarCollapse()
+ {
+ var navbarCollapseEls = this.parentElement.getElementsByClassName("navbar-collapse");
+ for (var i = 0; i < navbarCollapseEls.length; i++)
+ {
+ navbarCollapseEls[i]
+ .classList.toggle("open")
+ }
+ }
+
+ var toggleNavbarCollapseEls = document.getElementsByClassName("toggle-navbar-collapse");
+ for (var i = 0; i < toggleNavbarCollapseEls.length; i++)
+ {
+ toggleNavbarCollapseEls[i]
+ .addEventListener("click", toggleNavbarCollapse, false);
+ }
+
+ /**************************************************************************
+ * CustomSelect
+ **************************************************************************/
+
+ function CustomSelect(select)
+ {
+ this.select = select;
+ this.close();
+ this.select
+ .addEventListener("click", this._onClick.bind(this), false);
+ this.select
+ .addEventListener("focusout", this._onFocusOut.bind(this), false);
+ }
+
+ CustomSelect.prototype._onFocusOut = function()
+ {
+ // setTimeout to allow document.activeElement
+ // to move to newly focused element
+ setTimeout(function()
+ {
+ var newFocus = document.activeElement;
+
+ if (newFocus
+ .classList.contains("custom-select-selected") ||
+ newFocus
+ .classList.contains("custom-select-option") ||
+ newFocus
+ .parentElement
+ .classList.contains("custom-select-option"))
+ {
+ return;
+ }
+
+ this.close();
+
+ }.bind(this), 1);
+ }
+
+ CustomSelect.prototype._onClick = function(event)
+ {
+ if (event.target.classList.contains("custom-select-selected"))
+ {
+ var options = this.select.querySelector(".custom-select-options");
+ if (options.getAttribute("aria-hidden") == "true")
+ {
+ this.open();
+ }
+ else
+ {
+ this.close();
+ }
+ }
+ }
+
+ CustomSelect.prototype.open = function()
+ {
+ this.select
+ .querySelector(".custom-select-selected")
+ .setAttribute("aria-expanded", "true");
+
+ this.select
+ .querySelector(".custom-select-options")
+ .removeAttribute("aria-hidden");
+ }
+
+ CustomSelect.prototype.close = function()
+ {
+ this.select
+ .querySelector(".custom-select-selected")
+ .setAttribute("aria-expanded", "false");
+
+ this.select
+ .querySelector(".custom-select-options")
+ .setAttribute("aria-hidden", "true");
+ }
+
+ new CustomSelect(document.getElementById("language-select"));
+
+ /**************************************************************************
+ * Accordion
+ **************************************************************************/
+
+ function Accordion(accordion)
+ {
+ this.accordion = accordion;
+
+ var accordionButtons = this.accordion.getElementsByClassName('accordion-toggle-button');
+ for (var i = 0; i < accordionButtons.length; i++)
+ {
+ // Close all sections except the first
+ if (i !== 0)
+ {
+ accordionButtons[i].setAttribute("aria-expanded", "false");
+ document
+ .getElementById( accordionButtons[i].getAttribute("aria-controls") )
+ .setAttribute("hidden", "true");
+ }
+ }
+
+ this.accordion
+ .addEventListener("click", this._onClick.bind(this), false);
+ this.accordion
+ .addEventListener("keydown", this._onKeyDown.bind(this), false);
+ }
+
+ Accordion.prototype.toggleSection = function(clickedButton)
+ {
+ // Hide currently expanded section
+ var expandedButton = this.accordion.querySelector("button[aria-expanded='true']");
+ if (expandedButton)
+ {
+ expandedButton.setAttribute("aria-expanded", "false");
+ document
+ .getElementById( expandedButton.getAttribute("aria-controls") )
+ .setAttribute("hidden", "true");
+ }
+
+ // If currently expanded section is clicked
+ if (expandedButton === clickedButton) return;
+
+ // Expand new section
+ clickedButton.setAttribute("aria-expanded", "true");
+ document
+ .getElementById( clickedButton.getAttribute("aria-controls") )
+ .removeAttribute("hidden");
+ }
+
+ Accordion.prototype.focusNextSection = function()
+ {
+ var currentFocus = document.activeElement;
+ var nextheading = currentFocus.parentElement.nextElementSibling.nextElementSibling;
+
+ if (nextheading)
+ {
+ nextheading // .accordion-heading
+ .firstElementChild // .accordion-toggle-button
+ .focus();
+ }
+ else
+ {
+ this.accordion
+ .firstElementChild // .accordion-heading
+ .firstElementChild // .accordion-toggle-button
+ .focus();
+ }
+ }
+
+ Accordion.prototype.focusPrevSection = function()
+ {
+ var currentFocus = document.activeElement;
+ var prevAccordionBody = currentFocus.parentElement.previousElementSibling;
+
+ if (prevAccordionBody)
+ {
+ prevAccordionBody // .accordion-body
+ .previousElementSibling // .accordion-heading
+ .firstElementChild // .accordion-toggle-button
+ .focus();
+ }
+ else
+ {
+ this.accordion
+ .lastElementChild // .accordion-body
+ .previousElementSibling // .accordion-heading
+ .firstElementChild // .accordion-toggle-button
+ .focus();
+ }
+ }
+
+ Accordion.prototype._onKeyDown = function(event)
+ {
+ if (!event.target.classList.contains("accordion-toggle-button")) return;
+
+ if (event.key == "ArrowUp" || event.keyCode == 38)
+ {
+ this.focusPrevSection();
+ }
+ else if (event.key == "ArrowDown" || event.keyCode == 40)
+ {
+ this.focusNextSection();
+ }
+ }
+
+ Accordion.prototype._onClick = function(event)
+ {
+ if (!event.target.classList.contains("accordion-toggle-button")) return;
+
+ this.toggleSection(event.target);
+ }
+
+ var productTopicsAccordion = document.getElementById('product-topics-accordion');
+ if (productTopicsAccordion)
+ {
+ new Accordion(productTopicsAccordion);
+ }
+
+ /**************************************************************************
+ * BrowserSelect
+ **************************************************************************/
+
+ function BrowserSelect(select)
+ {
+ this.select = select;
+ CustomSelect.apply(this, [this.select]);
+
+ this.BROWSER_STORAGE_KEY = "BROWSER";
+ this.BROWSER_AUTODETECTED_STORAGE_KEY = "BROWSER_AUTODETECTED";
+ this.SUPPORTED_BROWSERS = ["chrome", "opera", "samsungBrowser",
+ "yandexbrowser", "maxthon", "msie",
+ "msedge", "firefox", "ios", "safari"];
+ this.DEFAULT_BROWSER = "chrome";
+
+ this.select
+ .addEventListener("click", this._onClickOrKeyDown.bind(this), false);
+
+ this.select
+ .addEventListener("keydown", this._onClickOrKeyDown.bind(this), false);
+
+ var storedBrowser = localStorage.getItem(this.BROWSER_STORAGE_KEY);
+ if (storedBrowser) this.selectOption(storedBrowser);
+ else this.detectBrowser();
+ }
+
+ BrowserSelect.prototype = Object.create(CustomSelect.prototype);
+ BrowserSelect.prototype.constructor = BrowserSelect;
+
+ BrowserSelect.prototype.detectBrowser = function()
+ {
+ for (var i = 0; i < this.SUPPORTED_BROWSERS.length; i++)
+ {
+ var supportedBrowser = this.SUPPORTED_BROWSERS[i];
+ if (bowser[supportedBrowser])
+ {
+ localStorage.setItem(this.BROWSER_AUTODETECTED_STORAGE_KEY, "true");
+ return this.selectOption(supportedBrowser);
+ }
+ }
+
+ this.selectOption(this.DEFAULT_BROWSER);
+ };
+
+ BrowserSelect.prototype.selectOption = function(browser)
+ {
+ localStorage.setItem(this.BROWSER_STORAGE_KEY, browser);
+
+ // Change body class
+ var bodyClassList = Array.prototype.slice.call(document.body.classList);
+ for (var i = 0; i < bodyClassList.length; i++)
+ {
+ if (bodyClassList[i].indexOf("ua-") > -1)
+ {
+ document.body.classList.remove(bodyClassList[i]);
+ }
+ }
+ document.body.classList.add("ua-" + browser);
+
+ // Check selected option
+ var selectedItem = this.select
+ .querySelector("[data-value='" + browser + "']");
+ selectedItem.setAttribute("aria-checked", "true");
+
+ // Set selected option
+ var selectedOption = selectedItem.innerHTML;
+
+ if (localStorage.getItem(this.BROWSER_AUTODETECTED_STORAGE_KEY))
+ {
+ var autodetected = document
+ .getElementById("browser-select-autodetected")
+ .innerHTML;
+ selectedOption += "<span class='muted'>(" + autodetected + ")</span>";
+ }
+
+ this.select
+ .querySelector(".custom-select-selected")
+ .innerHTML = selectedOption;
+
+ if (!document.querySelector(".platform-" + browser))
+ {
+ this.handleNoContentForBrowser(browser);
+ }
+ };
+
+ BrowserSelect.prototype.handleNoContentForBrowser = function(browser)
+ {
+ var section = document.createElement("section");
+ section.classList.add("platform-" + browser);
+ section.innerHTML = document
+ .getElementById("no-content-for-platform-message")
+ .innerHTML;
+
+ document
+ .querySelector(".article-body")
+ .insertAdjacentElement("afterbegin", section);
+ }
+
+ BrowserSelect.prototype._onClickOrKeyDown = function(event)
+ {
+ var option = event.target.closest(".custom-select-option");
+ if (!option) return;
+
+ var IS_ENTER_KEY = event.key == "Enter" || event.keyCode == 13;
+ if (event.keyCode && !IS_ENTER_KEY) return;
+
+ localStorage.removeItem(this.BROWSER_AUTODETECTED_STORAGE_KEY);
+
+ // Uncheck previously checked option
+ this.select
+ .querySelector("[aria-checked='true']")
+ .setAttribute("aria-checked", "false");
+
+ this.selectOption(option.getAttribute("data-value"));
+
+ this.close();
+ };
+
+ var browserSelect = document.getElementById("browser-select");
+ if (browserSelect)
+ {
+ new BrowserSelect(browserSelect);
+ }
+
+ }, false);
+}());
+//# sourceMappingURL=main.js.map
+
+//# sourceMappingURL=main-debug.js.map
+
+//# sourceMappingURL=main.js.map
« gulpfile.js ('K') | « package.json ('k') | src/js/vendor/bowser.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld