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 b3a1f570424daa743f0b89ed53e724950eccd884 Author: Karen Nino <[email protected]> AuthorDate: Fri Mar 23 10:35:38 2018 -0500 expand and collpase navigation side bar new feature --- src/_includes/section-menu/documentation.html | 16 +-- src/_sass/_section-nav.sass | 44 +++++-- src/js/section-nav.js | 167 +++++++++++++++----------- 3 files changed, 137 insertions(+), 90 deletions(-) diff --git a/src/_includes/section-menu/documentation.html b/src/_includes/section-menu/documentation.html index 49cbf01..128abe7 100644 --- a/src/_includes/section-menu/documentation.html +++ b/src/_includes/section-menu/documentation.html @@ -1,7 +1,7 @@ <li><span class="section-nav-list-main-title">Documentation</span></li> <li><a href="{{ site.baseurl }}/documentation">Using the Documentation</a></li> <li><a href="{{ site.baseurl }}/documentation/execution-model">Beam Execution Model</a></li> -<li> +<li class="section-nav-item--collapsible"> <span class="section-nav-list-title">Pipeline development lifecycle</span> <ul class="section-nav-list"> @@ -10,13 +10,13 @@ <li><a href="{{ site.baseurl }}/documentation/pipelines/test-your-pipeline/">Test Your Pipeline</a></li> </ul> </li> -<li> +<li class="section-nav-item--collapsible"> <span class="section-nav-list-title">Beam programming guide</span> <ul class="section-nav-list"> <li><a href="{{ site.baseurl }}/documentation/programming-guide/">Overview</a></li> <li><a href="{{ site.baseurl }}/documentation/programming-guide/#creating-a-pipeline">Pipelines</a></li> - <li> + <li class="section-nav-item--collapsible"> <span class="section-nav-list-title">PCollections</span> <ul class="section-nav-list"> @@ -24,7 +24,7 @@ <li><a href="{{ site.baseurl }}/documentation/programming-guide/#pcollection-characteristics">PCollection characteristics</a></li> </ul> </li> - <li> + <li class="section-nav-item--collapsible"> <span class="section-nav-list-title">Transforms</span> <ul class="section-nav-list"> @@ -48,7 +48,7 @@ <li><a href="{{ site.baseurl }}/documentation/programming-guide/#composite-transforms">Composite transforms</a></li> </ul> </li> - <li> + <li class="section-nav-item--collapsible"> <span class="section-nav-list-title">Pipeline I/O</span> <ul class="section-nav-list"> @@ -58,7 +58,7 @@ <li><a href="{{ site.baseurl }}/documentation/io/testing/">Testing I/O transforms</a></li> </ul> </li> - <li> + <li class="section-nav-item--collapsible"> <span class="section-nav-list-title">Data encoding and type safety</span> <ul class="section-nav-list"> @@ -67,7 +67,7 @@ <li><a href="{{ site.baseurl }}/documentation/programming-guide/#default-coders-and-the-coderregistry">Default coders and the CoderRegistry</a></li> </ul> </li> - <li> + <li class="section-nav-item--collapsible"> <span class="section-nav-list-title">Windowing</span> <ul class="section-nav-list"> @@ -78,7 +78,7 @@ <li><a href="{{ site.baseurl }}/documentation/programming-guide/#adding-timestamps-to-a-pcollections-elements">Adding timestamps to a PCollection’s elements</a></li> </ul> </li> - <li> + <li class="section-nav-item--collapsible"> <span class="section-nav-list-title">Triggers</span> <ul class="section-nav-list"> diff --git a/src/_sass/_section-nav.sass b/src/_sass/_section-nav.sass index 38cf5b1..16e9456 100644 --- a/src/_sass/_section-nav.sass +++ b/src/_sass/_section-nav.sass @@ -2,12 +2,12 @@ max-width: 250px position: fixed width: 100% + overflow-y: auto + background-color: #F7F7F7 nav - background-color: #F7F7F7 padding: 15px max-height: calc(100vh - 130px) - overflow-y: auto ul list-style: none @@ -18,15 +18,12 @@ &:last-child margin-bottom: 0 + .section-nav-list + padding-left: 16px + a font-size: 12px - > .section-nav-list - padding: 0 - - .section-nav-list - padding-left: 15px - @media (max-width: $ak-breakpoint-lg) background-color: $color-white max-height: 100vh @@ -41,8 +38,10 @@ &-list-title display: block font-size: 12px - margin-bottom: 5px - padding-top: 5px + position: relative + + &--collapsible + cursor: pointer &-list-main-title display: block @@ -51,6 +50,28 @@ margin-bottom: 15px text-transform: uppercase + &-item--collapsible + cursor: pointer + + .section-nav-list + display: none + + span:before + content: "" + position: absolute + top: 2px + left: -16px + border-style: solid + border-width: 5px 0 5px 8px + border-color: transparent transparent transparent #3371e3 + transform: rotate(0deg) + transition: 0.3s + + .expanded + > span:before + transform: rotate(90deg) + + @media (max-width: $ak-breakpoint-lg) background-color: $color-light-gray bottom: 0 @@ -71,3 +92,6 @@ &.open transform: translateX(0) + + + diff --git a/src/js/section-nav.js b/src/js/section-nav.js index 9676d74..5362bcc 100644 --- a/src/js/section-nav.js +++ b/src/js/section-nav.js @@ -1,87 +1,110 @@ $(document).ready(function() { - function Navbar(conf) { - var idCTA = conf["classNameCTA"], - idContainer = conf["classNameContainer"], - idNavMask = conf["classNameMask"], - idBackCTA = conf["classNameBackCTA"], - idSectionNav = conf["classNameSectionNav"]; + function Navbar(conf) { + var idCTA = conf["classNameCTA"], + idContainer = conf["classNameContainer"], + idNavMask = conf["classNameMask"], + idBackCTA = conf["classNameBackCTA"], + idSectionNav = conf["classNameSectionNav"], + idNavItemCollapsible = conf["classNameNavItemCollapsible"]; - var CONST = { - OPEN_CLASS: "open", - DESKTOP_BREAKPOINT: 1024 - }; + var CONST = { + OPEN_CLASS: "open", + DESKTOP_BREAKPOINT: 1024, + EXPANDED_CLASS: "expanded" + }; - return { - "idCTA": idCTA, - "idContainer": idContainer, - "idNavMask": idNavMask, - "idSectionNav": idSectionNav, - "idBackCTA": idBackCTA, - "hasSectionNav": false, + return { + "idCTA": idCTA, + "idContainer": idContainer, + "idNavMask": idNavMask, + "idSectionNav": idSectionNav, + "idBackCTA": idBackCTA, + "hasSectionNav": false, - "bindEvents": function() { - var _self = this; - var sectionNavEl = $("." + idSectionNav); - var sectionNavHeight = $(sectionNavEl).height(); + "setCollapsibleBehaviourItems" : function () { + $("." + idNavItemCollapsible).click(function(e) { + var item = $(e.target), + sectionNav = item.parent('li'), + expanded = sectionNav.hasClass(CONST.EXPANDED_CLASS), + sectionNavList = item.next('ul'); - $(".container-main-content").css({"min-height": sectionNavHeight}); + if(expanded){ + sectionNavList.slideUp().fadeOut(600,function(){}); + sectionNav.removeClass(CONST.EXPANDED_CLASS); + }else{ + sectionNavList.slideDown().fadeIn(600,function(){ }); + sectionNav.addClass(CONST.EXPANDED_CLASS); + } - $(window).resize(function() { - if($(window).width() > CONST.DESKTOP_BREAKPOINT) { - var sectionNavHeight = $(sectionNavEl).height(); - $(".container-main-content").css({"min-height": sectionNavHeight}); - }else { - $(".container-main-content").css({"min-height": ''}); - } - }); + e.stopPropagation(); + }); + }, + "bindEvents": function() { + var _self = this; + var sectionNavEl = $("." + idSectionNav); + var sectionNavHeight = $(sectionNavEl).height(); - if(_self.hasSectionNav) { - $("." + _self.idCTA ).click(function(el) { - $("." + _self.idNavMask).addClass(CONST.OPEN_CLASS); - $("." + _self.idSectionNav).addClass(CONST.OPEN_CLASS); - }); + $(".container-main-content").css({"min-height": sectionNavHeight}); - $("." + _self.idBackCTA).click(function(el) { - $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); - $("." + _self.idContainer).addClass(CONST.OPEN_CLASS); - }); - } else { - $("." + _self.idCTA ).click(function(el) { - $("." + _self.idNavMask).addClass(CONST.OPEN_CLASS); - $("." + _self.idContainer).addClass(CONST.OPEN_CLASS); - }); - } + $(window).resize(function() { + if($(window).width() > CONST.DESKTOP_BREAKPOINT) { + var sectionNavHeight = $(sectionNavEl).height(); + $(".container-main-content").css({"min-height": sectionNavHeight}); + }else { + $(".container-main-content").css({"min-height": ''}); + } + }); - $("." + _self.idNavMask ).click(function(el) { - $("." + _self.idNavMask).removeClass(CONST.OPEN_CLASS); - $("." + _self.idContainer).removeClass(CONST.OPEN_CLASS); + if(_self.hasSectionNav) { + $("." + _self.idCTA ).click(function(el) { + $("." + _self.idNavMask).addClass(CONST.OPEN_CLASS); + $("." + _self.idSectionNav).addClass(CONST.OPEN_CLASS); + }); - if(_self.hasSectionNav) { - $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); - } - }); - }, - "findSectionNav": function() { - var sectionNavEl = $('body').find("[data-section-nav]"); + $("." + _self.idBackCTA).click(function(el) { + $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); + $("." + _self.idContainer).addClass(CONST.OPEN_CLASS); + }); + } else { + $("." + _self.idCTA ).click(function(el) { + $("." + _self.idNavMask).addClass(CONST.OPEN_CLASS); + $("." + _self.idContainer).addClass(CONST.OPEN_CLASS); + }); + } + + $("." + _self.idNavMask ).click(function(el) { + $("." + _self.idNavMask).removeClass(CONST.OPEN_CLASS); + $("." + _self.idContainer).removeClass(CONST.OPEN_CLASS); + + if(_self.hasSectionNav) { + $("." + _self.idSectionNav).removeClass(CONST.OPEN_CLASS); + } + }); - if(sectionNavEl.length) { - this.hasSectionNav = true; + this.setCollapsibleBehaviourItems(); + }, + "findSectionNav": function() { + var sectionNavEl = $('body').find("[data-section-nav]"); + + if(sectionNavEl.length) { + this.hasSectionNav = true; + } + }, + "init": function() { + this.findSectionNav(); + this.bindEvents(); + } } - }, - "init": function() { - this.findSectionNav(); - this.bindEvents(); - } } - } - Navbar( - { - "classNameContainer":"navbar-container", - "classNameSectionNav": "section-nav", - "classNameBackCTA": "section-nav-back", - "classNameCTA": "navbar-toggle", - "classNameMask": "navbar-mask" - } - ).init(); + Navbar( + { + "classNameContainer":"navbar-container", + "classNameSectionNav": "section-nav", + "classNameBackCTA": "section-nav-back", + "classNameCTA": "navbar-toggle", + "classNameMask": "navbar-mask", + "classNameNavItemCollapsible" : "section-nav-item--collapsible span" + } + ).init(); }); -- To stop receiving notification emails like this one, please contact [email protected].
