openwhisk-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From pde...@apache.org
Subject [incubator-openwhisk-website] branch master updated: Add support for collapsible sections (#337)
Date Wed, 12 Sep 2018 00:52:26 GMT
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 <mrutkows@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


Mime
View raw message