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

Unified Diff: static/js/main.js

Issue 29564555: Issue 5824 - Refactor CustomSelect on help.eyeo.com (Closed) Base URL: https://hg.adblockplus.org/help.eyeo.com
Patch Set: Created Oct. 4, 2017, 8:05 a.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
« no previous file with comments | « includes/layout/footer.tmpl ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: static/js/main.js
===================================================================
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,16 +1,27 @@
(function(){
document.addEventListener("DOMContentLoaded", function()
{
+ /* ******************************************
ire 2017/10/04 08:07:40 The document was starting to get really long so I
juliandoucette 2017/10/09 23:14:15 Acknowledged. We should be consistent about how w
ire 2017/10/10 11:54:18 I think I actually prefer your way so updating tha
+ *
+ * General
+ *
+ * ****************************************** */
+
// Change html class name from "no-js" to "js"
document.documentElement.className = "js";
- // Toggle Navbar Collapse
+ /* ******************************************
+ *
+ * Navbar
+ *
+ * ****************************************** */
+
function toggleNavbarCollapse()
{
var navbarCollapseEls = this.parentElement.getElementsByClassName("navbar-collapse");
for (var i = 0; i < navbarCollapseEls.length; i++)
{
navbarCollapseEls[i]
.classList.toggle("open")
}
@@ -18,36 +29,63 @@
var toggleNavbarCollapseEls = document.getElementsByClassName("toggle-navbar-collapse");
for (var i = 0; i < toggleNavbarCollapseEls.length; i++)
{
toggleNavbarCollapseEls[i]
.addEventListener("click", toggleNavbarCollapse, false);
}
- // Custom Select
- function onClickCustomSelect()
+ /* ******************************************
+ *
+ * CustomSelect
+ *
+ * ****************************************** */
+
+ function CustomSelect(select)
{
- var options = this.nextElementSibling;
- if (options.getAttribute("aria-hidden") == "true")
+ this.select = select;
+ this.close();
+ select.addEventListener("click", this._onClick.bind(this), false);
+ }
+
+ CustomSelect.prototype._onClick = function(event)
+ {
+ if (event.target.classList.contains("custom-select-selected"))
{
- options.removeAttribute("aria-hidden");
- this.setAttribute("aria-expanded", "true");
- }
- else
- {
- options.setAttribute("aria-hidden", "true");
- this.setAttribute("aria-expanded", "false");
+ var options = this.select.querySelector(".custom-select-options");
+ if (options.getAttribute("aria-hidden") == "true")
+ {
+ this.open();
+ }
+ else
+ {
+ this.close();
+ }
}
}
- var customSelectEls = document.getElementsByClassName('custom-select-selected');
- for (var i = 0; i < customSelectEls.length; i++)
+ CustomSelect.prototype.open = function()
{
- customSelectEls[i]
- .addEventListener("click", onClickCustomSelect, false);
- customSelectEls[i]
- .nextElementSibling
+ 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"));
}, false);
}());
« no previous file with comments | « includes/layout/footer.tmpl ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld