This is an automated email from the ASF dual-hosted git repository. mergebot-role pushed a commit to branch mergebot in repository https://gitbox.apache.org/repos/asf/beam-site.git
commit d39cfc37bff2ea9106f00f010fcc720cbae6e517 Author: Karen Nino <[email protected]> AuthorDate: Fri Mar 23 17:48:04 2018 -0500 mark active item on navigation side bar --- src/_sass/_section-nav.sass | 5 ++ src/js/section-nav.js | 115 +++++++++++++++++++++++++++++++------------- 2 files changed, 86 insertions(+), 34 deletions(-) diff --git a/src/_sass/_section-nav.sass b/src/_sass/_section-nav.sass index 16e9456..d9131c4 100644 --- a/src/_sass/_section-nav.sass +++ b/src/_sass/_section-nav.sass @@ -28,6 +28,10 @@ background-color: $color-white max-height: 100vh + .active + text-decoration: underline + color: #0f3556 + &-back display: none padding: 15px @@ -39,6 +43,7 @@ display: block font-size: 12px position: relative + margin-bottom: 5px &--collapsible cursor: pointer diff --git a/src/js/section-nav.js b/src/js/section-nav.js index 5362bcc..f271421 100644 --- a/src/js/section-nav.js +++ b/src/js/section-nav.js @@ -1,18 +1,45 @@ -$(document).ready(function() { +$(document).ready(function () { function Navbar(conf) { var idCTA = conf["classNameCTA"], idContainer = conf["classNameContainer"], idNavMask = conf["classNameMask"], idBackCTA = conf["classNameBackCTA"], idSectionNav = conf["classNameSectionNav"], - idNavItemCollapsible = conf["classNameNavItemCollapsible"]; + idNavItemTitleCollapsible = conf["classNameNavItemTitleCollapsible"], + classNavItemCollapsible = conf["classNameNavItemCollapsible"], + classNavActiveItem = conf["classNameNavActiveItem"]; var CONST = { - OPEN_CLASS: "open", + ACTIVE_CLASS: "active", + EXPANDED_CLASS: "expanded", DESKTOP_BREAKPOINT: 1024, - EXPANDED_CLASS: "expanded" + OPEN_CLASS: "open" }; + var expandCollapseItem = function (item, effect) { + var sectionNav = item.parent('li'), + expanded = sectionNav.hasClass(CONST.EXPANDED_CLASS), + sectionNavList = item.next('ul'); + + if (expanded) { + if (effect) { + sectionNavList.slideUp().fadeOut(600); + } else { + sectionNavList.hide(); + } + sectionNav.removeClass(CONST.EXPANDED_CLASS); + } else { + if (effect) { + sectionNavList.slideDown().fadeIn(600); + } else { + sectionNavList.show(); + } + + sectionNav.addClass(CONST.EXPANDED_CLASS); + } + }; + + return { "idCTA": idCTA, "idContainer": idContainer, @@ -21,76 +48,94 @@ $(document).ready(function() { "idBackCTA": idBackCTA, "hasSectionNav": false, - "setCollapsibleBehaviourItems" : function () { - $("." + idNavItemCollapsible).click(function(e) { - var item = $(e.target), - sectionNav = item.parent('li'), - expanded = sectionNav.hasClass(CONST.EXPANDED_CLASS), - sectionNavList = item.next('ul'); - - if(expanded){ - sectionNavList.slideUp().fadeOut(600,function(){}); - sectionNav.removeClass(CONST.EXPANDED_CLASS); - }else{ - sectionNavList.slideDown().fadeIn(600,function(){ }); - sectionNav.addClass(CONST.EXPANDED_CLASS); - } - + "setCollapsibleBehaviourItems": function () { + $("." + idNavItemTitleCollapsible).click(function (e) { + var item = $(e.target); + expandCollapseItem(item, true); e.stopPropagation(); }); }, - "bindEvents": function() { + + "setActiveItemClassEvent": function () { + $("." + idSectionNav + " a").click(function (e) { + var currentItem = document.querySelector(classNavActiveItem); + if (currentItem) + currentItem.classList.remove(CONST.ACTIVE_CLASS); + e.target.classList.add(CONST.ACTIVE_CLASS); + }); + }, + + "displayActiveItem": function () { + const currentLocation = window.location.pathname + window.location.hash; + var activeItem = document.querySelectorAll("nav [href='" + currentLocation + "']"); + if (activeItem && activeItem.length > 0) { + activeItem = activeItem[0]; + activeItem.classList.add(CONST.ACTIVE_CLASS); + var collapsibleParents = $(activeItem).parents('li' + classNavItemCollapsible); + for (var i = 0; collapsibleParents.length > i; i++) { + var item = $(collapsibleParents[i]).find('span')[0]; + expandCollapseItem($(item), false); + } + } + }, + + "bindEvents": function () { var _self = this; var sectionNavEl = $("." + idSectionNav); var sectionNavHeight = $(sectionNavEl).height(); $(".container-main-content").css({"min-height": sectionNavHeight}); - $(window).resize(function() { - if($(window).width() > CONST.DESKTOP_BREAKPOINT) { + $(window).resize(function () { + if ($(window).width() > CONST.DESKTOP_BREAKPOINT) { var sectionNavHeight = $(sectionNavEl).height(); $(".container-main-content").css({"min-height": sectionNavHeight}); - }else { + } else { $(".container-main-content").css({"min-height": ''}); } }); - if(_self.hasSectionNav) { - $("." + _self.idCTA ).click(function(el) { + if (_self.hasSectionNav) { + $("." + _self.idCTA).click(function (el) { $("." + _self.idNavMask).addClass(CONST.OPEN_CLASS); $("." + _self.idSectionNav).addClass(CONST.OPEN_CLASS); }); - $("." + _self.idBackCTA).click(function(el) { + $("." + _self.idBackCTA).click(function (el) { $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); $("." + _self.idContainer).addClass(CONST.OPEN_CLASS); }); } else { - $("." + _self.idCTA ).click(function(el) { + $("." + _self.idCTA).click(function (el) { $("." + _self.idNavMask).addClass(CONST.OPEN_CLASS); $("." + _self.idContainer).addClass(CONST.OPEN_CLASS); }); } - $("." + _self.idNavMask ).click(function(el) { + $("." + _self.idNavMask).click(function (el) { $("." + _self.idNavMask).removeClass(CONST.OPEN_CLASS); $("." + _self.idContainer).removeClass(CONST.OPEN_CLASS); - if(_self.hasSectionNav) { + if (_self.hasSectionNav) { $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); } }); this.setCollapsibleBehaviourItems(); + this.setActiveItemClassEvent(); + setTimeout(function () { + this.displayActiveItem(); + }.bind(this), 0); + }, - "findSectionNav": function() { + "findSectionNav": function () { var sectionNavEl = $('body').find("[data-section-nav]"); - if(sectionNavEl.length) { + if (sectionNavEl.length) { this.hasSectionNav = true; } }, - "init": function() { + "init": function () { this.findSectionNav(); this.bindEvents(); } @@ -99,12 +144,14 @@ $(document).ready(function() { Navbar( { - "classNameContainer":"navbar-container", + "classNameContainer": "navbar-container", "classNameSectionNav": "section-nav", "classNameBackCTA": "section-nav-back", "classNameCTA": "navbar-toggle", "classNameMask": "navbar-mask", - "classNameNavItemCollapsible" : "section-nav-item--collapsible span" + "classNameNavItemTitleCollapsible": "section-nav-item--collapsible span", + "classNameNavItemCollapsible": ".section-nav-item--collapsible", + "classNameNavActiveItem": ".section-nav a.active" } ).init(); }); -- To stop receiving notification emails like this one, please contact [email protected].
