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:14 UTC
[beam-site] 01/03: expand and collpase navigation side bar new
feature
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 <kn...@google.com>
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
mergebot-role@apache.org.