You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beam.apache.org by me...@apache.org on 2018/04/02 21:15:15 UTC
[beam-site] 02/03: mark active item on navigation side bar
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 <kn...@google.com>
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
mergebot-role@apache.org.