This is an automated email from the ASF dual-hosted git repository. pdesai pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-openwhisk-website.git
The following commit(s) were added to refs/heads/master by this push: new ba44815 Add support for collapsible sections (#337) ba44815 is described below commit ba448156176bf24757116c0dbdae84d3580d224b Author: Matt Rutkowski <mrutk...@us.ibm.com> AuthorDate: Tue Sep 11 19:52:24 2018 -0500 Add support for collapsible sections (#337) * Add support for collapsible sections * Add support for collapsible sections * Add support for collapsible sections --- _includes/index/index.js | 108 +++++++++++++++++++++-------- _layouts/community.html | 4 +- _layouts/documentation.html | 48 ++++++------- _layouts/downloads.html | 15 ++-- _scss/_base.scss | 74 ++++++++++++++++++-- _scss/_variables.scss | 2 +- images/elements/circle-minus.png | Bin 0 -> 19863 bytes images/elements/circle-plus.png | Bin 0 -> 19937 bytes images/elements/expand-collapse-circle.psd | Bin 0 -> 26136 bytes 9 files changed, 182 insertions(+), 69 deletions(-) diff --git a/_includes/index/index.js b/_includes/index/index.js index 50f8535..41fdae7 100644 --- a/_includes/index/index.js +++ b/_includes/index/index.js @@ -1,42 +1,90 @@ function applyCollapsible() { + addListenersToIndex(); + addListenersToSections(); +} + +function addListenersToIndex() +{ + var coll = document.getElementsByClassName("index-menu-toggle"); + var i; - var coll = document.getElementsByClassName("collapsible-toggle"); - var i; + // Apply exapandable (arrows) to all menuitems with a sibling + for (i = 0; i < coll.length; i++) { + var sibling = coll[i].nextElementSibling; - // Apply exapandable (arrows) to all menuitems with a sibling - for (i = 0; i < coll.length; i++) { - var sibling = coll[i].nextElementSibling; + if(sibling!==null){ + coll[i].style.listStyleImage = "url('../images/elements/arrow-right-12px.png')"; + // (top right bottom left) + // make room on left for image/icon + sibling.style.padding = "0px 0px 0px 20px"; + } + // Set "click" event listener on all menuitems + coll[i].addEventListener("click", function() { + var sibling = this.nextElementSibling; + // toggle menu open/close states if(sibling!==null){ - coll[i].style.listStyleImage = "url('../images/elements/arrow-right-12px.png')"; - // (top right bottom left) - sibling.style.padding = "0px 0px 0px 20px"; + if (sibling.style.display === "block") { + this.style.listStyleImage = "url('../images/elements/arrow-right-12px.png')"; + sibling.style.display = "none"; + } else { + this.style.listStyleImage = "url('../images/elements/arrow-down-12px.png')"; + sibling.style.display = "block"; + } } - // Set "click" event listener on all menuitems - coll[i].addEventListener("click", function() { - var sibling = this.nextElementSibling; - // toggle menu open/close states - if(sibling!==null){ - if (sibling.style.display === "block") { - this.style.listStyleImage = "url('../images/elements/arrow-right-12px.png')"; - sibling.style.display = "none"; - } else { - this.style.listStyleImage = "url('../images/elements/arrow-down-12px.png')"; - sibling.style.display = "block"; - } - } + }); + } +} + +function addListenersToSections() +{ + var coll = document.getElementsByClassName("section-toggle"); + var i; + + // Apply exapandable (arrows) to all menuitems with a sibling + for (i = 0; i < coll.length; i++) { + var sibling = coll[i].nextElementSibling; - }); + if(sibling!==null){ + sibling.setAttribute('data-display', sibling.style.display); + if(coll[i].classList.contains("section-toggle-start-open")){ + coll[i].style.backgroundImage = "url('../images/elements/circle-minus.png')"; + } else { + coll[i].style.backgroundImage = "url('../images/elements/circle-plus.png')"; + } } -} -function openIndex() { - console.log("openIndex") - document.getElementById("index").style.display = "block"; -} -function closeIndex() { - console.log("closeIndex") - document.getElementById("index").style.display = "none"; + // Set "click" event listener on all menuitems + coll[i].addEventListener("click", function() { + var sibling = this.nextElementSibling; + // toggle menu open/close states + if(sibling!==null){ + console.log("sibling.style.display: ["+sibling.style.display+"]"); + if (sibling.style.display !== "none") { + console.log("collapsing"); + sibling.style.display = "none"; + this.style.backgroundImage = "url('../images/elements/circle-plus.png')"; + } else { + console.log("expanding"); + sibling.style.display = "block"; + this.style.backgroundImage = "url('../images/elements/circle-minus.png')"; + } + } + + }); + } } + +/* + * Debug + */ +// function dumpCSSText(element){ +// var s = ''; +// var o = getComputedStyle(element); +// for(var i = 0; i < o.length; i++){ +// s+= ">> " + o[i] + ':' + o.getPropertyValue(o[i])+';\n'; +// } +// return s; +// } diff --git a/_layouts/community.html b/_layouts/community.html index a6fb6ed..290c680 100644 --- a/_layouts/community.html +++ b/_layouts/community.html @@ -14,8 +14,8 @@ layout: default <li><a href="#community">Community</a></li> <!-- Social Media --> - <li class="collapsible-toggle"><a href="#social">Media</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#social">Media</a></li> + <ul class="index-menuitems"> <li><a href="#github">GitHub</a></li> <li><a href="#slack">Slack</a></li> <li><a href="#twitter">Twitter</a></li> diff --git a/_layouts/documentation.html b/_layouts/documentation.html index 236a084..f31ff68 100644 --- a/_layouts/documentation.html +++ b/_layouts/documentation.html @@ -14,11 +14,11 @@ layout: default <li><a href="#project-structure">Project Structure</a></li> <!-- Operators --> - <li class="collapsible-toggle"><a href="#operators">Operators</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#operators">Operators</a></li> + <ul class="index-menuitems"> <li><a href="#openwhisk_architecture">OpenWhisk Architecture</a></li> - <li class="collapsible-toggle"><a href="#openwhisk_deployment">OpenWhisk Deployment</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#openwhisk_deployment">OpenWhisk Deployment</a></li> + <ul class="index-menuitems"> <li><a href="#deploy_docker_compose">Docker Compose</a></li> <li><a href="#deploy_kubernetes">Kubernetes</a></li> <li><a href="#deploy_mesos">Mesos</a></li> @@ -31,13 +31,13 @@ layout: default </ul> <!-- Developers --> - <li class="collapsible-toggle"><a href="#developers">Developers</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#developers">Developers</a></li> + <ul class="index-menuitems"> <li><a href="#pre-requisites">Pre-requisites</a></li> - <li class="collapsible-toggle"><a href="#using-openwhisk">Using OpenWhisk</a></li> - <ul class="collapse-content"> - <li class="collapsible-toggle"><a href="#wsk-cli">OpenWhisk CLI (wsk)</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#using-openwhisk">Using OpenWhisk</a></li> + <ul class="index-menuitems"> + <li class="index-menu-toggle"><a href="#wsk-cli">OpenWhisk CLI (wsk)</a></li> + <ul class="index-menuitems"> <li><a href="#wsk-cli-install">Installing</a></li> <li><a href="#wsk-cli-configure">Configuring</a></li> </ul> @@ -45,16 +45,16 @@ layout: default <li><a href="#rest-api">OpenWhisk REST API</a></li> <li><a href="#openwhisk-clients">OpenWhisk Clients</a></li> </ul> - <li class="collapsible-toggle"><a href="#actions">Actions</a></li> - <ul class="collapse-content"> - <li class="collapsible-toggle"><a href="#nodejs">NodeJS</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#actions">Actions</a></li> + <ul class="index-menuitems"> + <li class="index-menu-toggle"><a href="#nodejs">NodeJS</a></li> + <ul class="index-menuitems"> <li><a href="#nodejs-actions">Creating and Invoking Sample Action</a></li> <li><a href="#nodejs-runtime">NodeJS Runtime</a></li> <li><a href="#nodejs-additional-resources">Additional Resources</a></li> </ul> - <li class="collapsible-toggle"><a href="#python">Python</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#python">Python</a></li> + <ul class="index-menuitems"> <li><a href="#python-actions">Creating and Invoking Sample Action</a></li> <li><a href="#python-runtime">Python Runtime</a></li> <li><a href="#python-additional-resources">Additional Resources</a></li> @@ -65,26 +65,26 @@ layout: default <li>SDK (Writing Your Own Runtime)</li> <li>Other Resources</li> </ul--> - <li class="collapsible-toggle"><a href="#go">Go</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#go">Go</a></li> + <ul class="index-menuitems"> <li><a href="#go-actions">Creating and Invoking Action</a></li> <li><a href="#go-runtime">Go Runtime</a></li> <li><a href="#go-additional-resources">Additional Resources</a></li> </ul> - <li class="collapsible-toggle"><a href="#java">Java</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#java">Java</a></li> + <ul class="index-menuitems"> <li><a href="#java-actions">Creating and Invoking Action</a></li> <li><a href="#java-runtime">Java Runtime</a></li> <li><a href="#java-additional-resources">Additional Resources</a></li> </ul> - <li class="collapsible-toggle"><a href="#php">PHP</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#php">PHP</a></li> + <ul class="index-menuitems"> <li><a href="#php-actions">Creating and Invoking Action</a></li> <li><a href="#php-runtime">PHP Runtime</a></li> <li><a href="#php-additional-resources">Additional Resources</a></li> </ul> - <!--li class="collapsible-toggle"><a href="#swift">Swift</a></li> - <ul class="collapse-content"> + <!--li class="index-menu-toggle"><a href="#swift">Swift</a></li> + <ul class="index-menuitems"> <li><a href="#swift-actions">Creating and Invoking Action</a></li> <li><a href="#swift-runtime">Swift Runtime</a></li> <li><a href="#swift-additional-resources">Additional Resources</a></li> diff --git a/_layouts/downloads.html b/_layouts/downloads.html index 795199b..2f957b2 100644 --- a/_layouts/downloads.html +++ b/_layouts/downloads.html @@ -16,8 +16,8 @@ layout: default <li><a href="#versioning">Versioning</a></li> <!-- Downloads --> - <li class="collapsible-toggle"><a href="#releases">Releases</a></li> - <ul class="collapse-content"> + <li class="index-menu-toggle"><a href="#releases">Releases</a></li> + <ul class="index-menuitems"> <li><a href="#verifying">Verifying</a></li> <li><a href="#keys">Keys</a></li> <li><a href="#versions">Versions</a></li> @@ -54,6 +54,8 @@ layout: default <div class="content"> <a class="indexable" id="releases"></a> <h3>Releases</h3> + <p>The Apache OpenWhisk project provides releases of source code, by component groupings, as TAR compressed archives files denoted by the <em>.tar.gz</em> extension.) + </p> <a class="indexable" id="verifying"></a> <h4>Verifying</h4> <p>As an Apache project, all downloaded files are signed by a project Release Manager and can be verified following these instructions:</p> @@ -67,9 +69,11 @@ layout: default <a class="indexable" id="versions"></a> <h4>Versions</h4> - <p>The following release versions are available:</p> - <h5>0.9.x-incubating (2018-07-17)</h5> - <div class="content"> + <p>The following release versions are available.</p> + <p>Please click on the version name to see its downloadable components:</p> + <h5 class="section-toggle section-toggle-start-open ">0.9.x-incubating (2018-07-17)</h5> + <div class="section-start-open"> + <div class="content"> <div class="flow-columns"> <div class="project-structure-repo theme-deeper-sea-green"> <h4>OpenWhisk</h4> @@ -164,6 +168,7 @@ layout: default </div> </div> </div> + </div> </div> </main> diff --git a/_scss/_base.scss b/_scss/_base.scss index 3718759..8abd4e2 100644 --- a/_scss/_base.scss +++ b/_scss/_base.scss @@ -100,7 +100,7 @@ footer { display: flex-direction; } - li:not(.collapsible-toggle) { + li:not(.index-menu-toggle) { a { display: inline-flex; width: 100%; @@ -109,7 +109,7 @@ footer { } } - li.collapsible-toggle { + li.index-menu-toggle { // TODO: try to render our own bullet/images so we can control layout /** the image will be vertically aligned in the center **/ @@ -299,21 +299,21 @@ footer { } /* - * Expandable/Collapsible + * Index (collapsible menus) */ -.collapsible-toggle { +.index-menu-toggle { color: $color-menu-collapsible-fg; background-color: $color-menu-collapsible-bg; border: 1px solid $color-menuitem-collapsible-border; cursor: pointer; // finger shown to let ppl know you can click it } -.collapsible-toggle:hover { +.index-menu-toggle:hover { background-color: $color-menu-collapsible-hover-bg; } -.collapse-content { +.index-menuitems { padding: 0 18px; display: none; overflow: hidden; @@ -321,7 +321,67 @@ footer { } /* - * Index + * Index (collapsible) + */ + +.index-menu-toggle { + color: $color-menu-collapsible-fg; + background-color: $color-menu-collapsible-bg; + border: 1px solid $color-menuitem-collapsible-border; + cursor: pointer; // finger shown to let ppl know you can click it +} + +.index-menu-toggle:hover { + background-color: $color-menu-collapsible-hover-bg; +} + +.index-menuitems { + padding: 0 18px; + display: none; + overflow: hidden; + background-color: white; +} + +/* + * Section (collapsible) + */ + +.section-header, .section-toggle{ + padding-left: 8px; + color: $color-menu-collapsible-fg; + background-color: $color-menu-collapsible-bg; + border: 1px solid $color-menuitem-collapsible-border; +} + +.section-toggle { + padding-left: 30px; + background-size: 12px 12px; + background-position: 8px 50%; + background-repeat: no-repeat; + cursor: pointer; // finger shown to let ppl know you can click it +} + +.section-toggle-start-open { + // empty class +} + +.section-start-open { + display: block; +} + +.section-toggle:hover { + background-color: $color-menu-collapsible-hover-bg; +} + +.section-content { + // vertical | horizontal + padding: 0 18px; + display: none; + background-color: white; +} + +/* + * Indexable Content Anchors */ // Need to create custom anchors that are aware of our fixed header diff --git a/_scss/_variables.scss b/_scss/_variables.scss index 597740b..28d3d80 100644 --- a/_scss/_variables.scss +++ b/_scss/_variables.scss @@ -231,7 +231,7 @@ $index-border: 0px solid $color-index-list-border; $index-item-border: 2px solid $color-index-item-border; /* - * Expandable/Collapsible (WIP) + * Index (collapsible menus) */ $color-menu-collapsible-fg: white; diff --git a/images/elements/circle-minus.png b/images/elements/circle-minus.png new file mode 100644 index 0000000..50ad590 Binary files /dev/null and b/images/elements/circle-minus.png differ diff --git a/images/elements/circle-plus.png b/images/elements/circle-plus.png new file mode 100644 index 0000000..e1e83dd Binary files /dev/null and b/images/elements/circle-plus.png differ diff --git a/images/elements/expand-collapse-circle.psd b/images/elements/expand-collapse-circle.psd new file mode 100644 index 0000000..7fd7667 Binary files /dev/null and b/images/elements/expand-collapse-circle.psd differ