You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openwhisk.apache.org by pd...@apache.org on 2018/09/12 00:52:26 UTC
[incubator-openwhisk-website] branch master updated: Add support
for collapsible sections (#337)
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 <mr...@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