You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2015/01/14 11:32:10 UTC
[02/18] incubator-brooklyn git commit: add support for advancing menu
among "sections" as you scroll
add support for advancing menu among "sections" as you scroll
simply set "section: " in the child, and use `<a id="...">` in the body,
as shown in `learnmore/theory.md`
Project: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/commit/d70fc1f2
Tree: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/tree/d70fc1f2
Diff: http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/diff/d70fc1f2
Branch: refs/heads/master
Commit: d70fc1f23a633a48544bdbe4f7c35808073bc1bc
Parents: c0c5928
Author: Alex Heneveld <al...@cloudsoftcorp.com>
Authored: Mon Jan 12 23:30:44 2015 +0000
Committer: Alex Heneveld <al...@cloudsoftcorp.com>
Committed: Tue Jan 13 15:36:30 2015 +0000
----------------------------------------------------------------------
docs/_includes/sidebar.html | 77 ----------------------------
docs/_includes/topbar.html | 49 ------------------
docs/_layouts/base.html | 12 ++---
docs/_layouts/website-normal.html | 92 +++++++++++++++++++++++++++++++---
docs/_plugins/site_structure.rb | 42 +++++++++++++---
docs/style/css/base.scss | 23 +++++++++
docs/website/learnmore/theory.md | 13 +++--
7 files changed, 157 insertions(+), 151 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/d70fc1f2/docs/_includes/sidebar.html
----------------------------------------------------------------------
diff --git a/docs/_includes/sidebar.html b/docs/_includes/sidebar.html
deleted file mode 100644
index cea3ba4..0000000
--- a/docs/_includes/sidebar.html
+++ /dev/null
@@ -1,77 +0,0 @@
-
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-
-{% if page.toc %}
- {% assign p = page.toc %}
-{% else %}
- {% assign p = 'toc.json' %}
-{% endif %}
-{% capture toc_string %}{% readj p %}{% endcapture %}
-{% jsonball toc from var toc_string %}
-
-{% capture pagesiteurl %}{{ page.url }}{% endcapture %}
-
-<div id="sidebar_toc">
-{% for x in toc %}
- {% capture ifactive %}{% if pagesiteurl == x.file %}toc-active
- {% else %}{% if x.children %}{% for x2 in x.children %}
- {% if pagesiteurl == x2.file %}toc-active{% else %}{% if x2.children %}{% for x3 in x2.children %}
- {% if pagesiteurl == x3.file %}toc-active{% endif %}
- {% endfor %}{% endif %}
- {% endif %}
- {% endfor %}{% endif %}
- {% endif %}{% endcapture %}
- {% capture ifactive %}{{ ifactive | trim }}{% endcapture %}
-
- <div class="toc-1 {{ ifactive }}">
- {% if x.children %}
- <a href="{{ x.file }}"><div class="toc-1-item toc-1-header {% if pagesiteurl == x.file %}{% if x.exclude %}{% else %} toc-active{% endif %}{% endif %}">{{ x.title }}</div></a>
- <div class="toc-1-children">
- {% for x2 in x.children %}
- {% capture ifactive %}{% if pagesiteurl == x2.file %}toc-active{% else %}{% if x2.children %}{% for x3 in x2.children %}
- {% if pagesiteurl == x3.file %}toc-active{% endif %}
- {% endfor %}{% endif %}
- {% endif %}{% endcapture %}
- {% capture ifactive %}{{ ifactive | trim }}{% endcapture %}
- <div class="toc-2 {{ ifactive }}">
- {% if x2.children %}
- <a href="{{ x2.file }}"><div class="toc-2-item toc-2-header{% if pagesiteurl == x2.file %}{% if x2.exclude %}{% else %} toc-active{% endif %}{% endif %}">{{ x2.title }}</div></a>
- <div class="toc-2-children-popup"><div class="toc-2-children">
- {% for x3 in x2.children %}
- {% capture ifactive %}{% if pagesiteurl == x3.file %}toc-active{% endif %}{% endcapture %}
- <div class="toc-3 {{ ifactive }}">
- <a href="{{ x3.file }}"><div class="toc-3-item{% if pagesiteurl == x3.file %}{% if x3.exclude %}{% else %} toc-active{% endif %}{% endif %}">{{ x3.title }}</div></a>
- </div>
- {% endfor %}
- </div></div>
- {% else %}
- <a href="{{ x2.file }}"><div class="toc-2-item{% if pagesiteurl == x2.file %} toc-active{% endif %}">{{ x2.title }}</div></a>
- {% endif %}
- </div>
- {% endfor %}
- </div>
- {% else %}
- <a href="{{ x.file }}"><div class="toc-1-item{% if pagesiteurl == x.file %} toc-active{% endif %}">{{ x.title }}</div></a>
- {% endif %}
- </div>
-{% endfor %}
-</div>
-<br/>
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/d70fc1f2/docs/_includes/topbar.html
----------------------------------------------------------------------
diff --git a/docs/_includes/topbar.html b/docs/_includes/topbar.html
deleted file mode 100644
index 3c3cb7d..0000000
--- a/docs/_includes/topbar.html
+++ /dev/null
@@ -1,49 +0,0 @@
-
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-{% assign p = '/guide/toc-menu.json' %}
-{% capture tocm_string %}{% readj p %}{% endcapture %}
-{% jsonball tocm from var tocm_string %}
-
-{% capture pagesiteurl %}{{ page.url }}{% endcapture %}
-
-<ul id="mainmenu"><!-- INSERT LINKS -->
-
-{% for x in tocm %}
- {% capture ifactive %}
- {% if pagesiteurl == x.file %}toc-active
- {% else %}{% if x.children %}{% for x2 in x.children %}
- {% if pagesiteurl == x2.file %}toc-active
- {% else %}{% if x2.children %}{% for x3 in x2.children %}
- {% if pagesiteurl == x3.file %}toc-active
- {% else %}{% if x3.children %}{% for x4 in x3.children %}
- {% if pagesiteurl == x4.file %}toc-active{% endif %}
- {% endfor %}{% endif %}
- {% endif %}
- {% endfor %}{% endif %}
- {% endif %}
- {% endfor %}{% endif %}
- {% endif %}
- {% endcapture %}
- {% capture ifactive %}{{ ifactive | trim }}{% endcapture %}
- <li class="{{ifactive}}"><a href="{{ x.file }}">{{x.title}}</a></li>
-{% endfor %}
-
-</ul>
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/d70fc1f2/docs/_layouts/base.html
----------------------------------------------------------------------
diff --git a/docs/_layouts/base.html b/docs/_layouts/base.html
index c6713b2..1741ef0 100644
--- a/docs/_layouts/base.html
+++ b/docs/_layouts/base.html
@@ -25,18 +25,16 @@ under the License.
<script language="JavaScript" type="application/javascript">
- $(window).resize(function () {
+ fix_padding_function = function () {
$('body').css('padding-top', parseInt($('#header').css("height"))+10);
$('body').css('padding-bottom', parseInt($('#footer').css("height"))+10);
- });
+ };
+ $(window).resize(fix_padding_function);
+ $(window).load(fix_padding_function);
- $(window).load(function () {
- $('body').css('padding-top', parseInt($('#header').css("height"))+10);
- $('body').css('padding-bottom', parseInt($('#footer').css("height"))+10);
- });
$(function () {
$('[data-toggle="tooltip"]').tooltip()
- })
+ });
</script>
</body>
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/d70fc1f2/docs/_layouts/website-normal.html
----------------------------------------------------------------------
diff --git a/docs/_layouts/website-normal.html b/docs/_layouts/website-normal.html
index f924d33..91272b3 100644
--- a/docs/_layouts/website-normal.html
+++ b/docs/_layouts/website-normal.html
@@ -24,13 +24,13 @@ layout: website-base
---
<div class="container" id="main_container">
<div class="row">
- <div class="col-md-9">
+ <div class="col-md-9" id="content_container">
<h1>{{ page.title }}</h1>
{{ content }}
</div>
<div class="col-md-3">
-<script>
+<script language="JavaScript" type="application/javascript">
{% comment %}
the menu is css position:fixed so won't scroll;
but also it will not obey its parents width.
@@ -90,10 +90,11 @@ $(window).resize(sidemenu_y_nonfloater);
{% comment %} case 3b {% endcomment %}
<a href="{{item.url}}" class="list-group-item active with-sub-item">{{ item.title_in_menu }}</a>
<div class="sub-item">
- {% for item2 in page.menu %}
- <a href="{{item2.url}}" class="list-group-item sub-item">
- {{ item2.title_in_menu }}</a>
- {% endfor %}
+ {% for item2 in page.menu %}
+ {% capture item_section_classes %}{% if item2.section %} section{% endif %}{% endcapture %}
+ <a href="{{item2.url}}" class="list-group-item sub-item {{ item_section_classes }}" {% if item2.section %}section-target="#{{ item2.section }}"{% endif %}>
+ {{ item2.title_in_menu }}</a>
+ {% endfor %}
</div>
{% else %}
{% comment %} case 3a side menu item {% endcomment %}
@@ -113,4 +114,83 @@ $(window).resize(sidemenu_y_nonfloater);
</div>
</div>
+<script language="JavaScript" type="application/javascript">
+// Cache selectors
+var sideMenu = $("#side-menu"),
+ sideItems = sideMenu.find("a"),
+ // Anchors corresponding to menu items
+ scrollItems = sideItems.map(function(){
+ var item = $(this).attr("section-target");
+ if (item && item.length) { return item; }
+ });
+
+var highlight_section_last_top = -1;
+
+var highlight_section = function(data) {
+ // Get container scroll position
+ var highlight_section_new_top = $(this).scrollTop();
+ if (highlight_section_new_top == highlight_section_last_top) return;
+ var highlight_section_new_bottom = highlight_section_new_top + $(window).height();
+ var scroll_advancing = (highlight_section_new_top > highlight_section_last_top);
+
+ // if initial, look if there was a link supplied
+
+ // if scrolling advance, pick up a section when title is fully visible
+
+ // if scrolling back, pick up a section as soon as the title is visible,
+ // of if the next title is below the halfway point
+
+ // when scrolling up
+ // Get id of all scroll items above the current position
+ var last_item = null, active_item = $("#side-menu a.section#active");
+ var cur = scrollItems.map(function(itemI){
+ item = $(scrollItems[itemI]);
+ if (item && item.length) {
+ if (scroll_advancing) {
+ // if scrolling advance, pick up a section when title starts before 1/3 height
+ if (item.offset().top < highlight_section_new_top + $(window).height()/3)
+ return item;
+
+ // or if containing div is finished (usu the whole main content)
+ div_containing_item = item.closest("div");
+ if (div_containing_item.offset().top + div_containing_item.height() < highlight_section_new_bottom + 15)
+ return item;
+ // or when next title is visible
+ if (last_item && item.offset().top < highlight_section_new_bottom + 15)
+ return last_item;
+ } else {
+ // if scrolling back, pick up a section as soon as the title is visible,
+ if (item.offset().top < highlight_section_new_top)
+ return item;
+ // or if title is before the 2/3 point
+ // (not sure about this, probably want also to have
+ // "AND the id.top is <= current_active_it.top" so we don't jump FORWARD a section
+ // when scrolling BACK, with lots of tiny sections)
+ if ((item.offset().top < highlight_section_new_top + 2*$(window).height()/3)
+ && (!active_item || !active_item.offset() || active_item.offset().top >= item.offset().top))
+ return item;
+
+ }
+ last_item = item;
+ }
+ });
+ // Get the id of the current element
+ cur = cur[cur.length-1];
+ var id = cur && cur.length ? cur[0].id : "";
+ // Set/remove active class
+ new_active = $("#side-menu a.section").filter("[section-target='#"+id+"']");
+ if (new_active.hasClass("active")) {
+ // nothing needed
+ } else {
+ $("#side-menu a.section").removeClass("active");
+ $("#side-menu a.section").filter("[section-target='#"+id+"']").addClass("active");
+ }
+
+ highlight_section_last_top = highlight_section_new_top;
+};
+
+$(window).scroll(highlight_section);
+$(highlight_section);
+</script>
+
{% include footer.html %}
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/d70fc1f2/docs/_plugins/site_structure.rb
----------------------------------------------------------------------
diff --git a/docs/_plugins/site_structure.rb b/docs/_plugins/site_structure.rb
index 7d0303c..ff2ab82 100644
--- a/docs/_plugins/site_structure.rb
+++ b/docs/_plugins/site_structure.rb
@@ -19,19 +19,34 @@
# * (in addition the entry may *be* the actual page object when the item is a page whose menu is not overridden)
#
# To build, set `children` as a list of either strings (the relative or absolute path to the child .md file),
-# or as maps with a `path` or `link` (absolute URL) key, a `title` (optional for `path`, to override the title from the file),
-# and (for `path` only) an optional `menu` block (to override the menu inherited from the `children` records in file),
-# `menu_customization` to set arbitrary data available (e.g. for templates to use when styling),
-# `href_path` to specify that an actual click should send to a different page than was used to produce the menu.
+# or as maps indicating the target, one of:
+# * `path` to a markdownfile
+# * `link` as an URL
+# * `section` anchored in this file (annotated with `<a name="#section"></a>`)
+# And optionally:
+# * a `title` (required for `link`), to override the title from the file
+# * an optional `menu` block (for `path` only) to override the menu inherited from the `children` record noted at `path`
+# * `menu_customization` to set arbitrary data available (e.g. for templates to use when styling)
+# * `href_path` (for `path` only) to specify that a click should send to a different page than the path used to produce the menu
#
# For instance:
#
#children:
#- child.md
-#- { path: child.md } # identical to above
-#- { path: child.md, title: "Child with New Name" } # overriding name
-#- { path: child.md, menu: [ { path: subchild.md, title: "Sub-Child with New Name" } ], href_path: subchild.md } # custom sub-menu with custom title, and click on main sends to submenu
+#- { path: child.md }
+# # identical to above
+#- { path: subchild.md, title: "Sub Child" }
+# # different child, with custom title
+#- { path: subchild.md, href_path: subchild_alt.md }
+# # takes title and menu from subchild page, but links to subchild_alt
+#- { path: child.md, menu: [ { path: subchild.md, title: "Sub-Child with New Name" } ] }
+# # child, but with custom sub-menu and custom title in there
#- { path: child.md, menu: null } # suppress sub-menu (note `null` not `nil` because this is yaml)
+# # child again, but suppressing sub-menu (note `null` not `nil` because this is yaml)
+#- { section: foo }
+#- { section: bar }
+# # various sections in *this* doc (to make highlighting work for sections requires
+# # extra JS responding to scrolls; otherwise the parent page remains highlighted)
#
# The menu is automatically generated for all files referenced from the root menu.
# You can also set `breadcrumbs` as a list of paths in a page to force breadcrumbs, and
@@ -207,6 +222,17 @@ module SiteStructure
data['page'] = page
breadcrumb_pages << page
breadcrumb_paths << page.path
+
+ elsif (item['section'])
+ puts "setting up #{item} as section" if @@verbose
+ link = (parent ? parent.url : "") + "#"+item['section']
+ data = { 'link' => link, 'url' => link, 'section' => item['section'] }
+ data['title'] = item['title'] if item['title']
+ data['title'] = item['section'] unless data['title']
+ # nothing for breadcrumbs
+ data['data'] = data
+ result = data
+
elsif (item['link'])
puts "setting up #{item} as link" if @@verbose
link = render_liquid(site, parent, item['link'])
@@ -217,7 +243,7 @@ module SiteStructure
data['data'] = data
result = data
else
- raise "Link to #{item} in #{parent ? parent.path : nil} must have link or path"
+ raise "Link to #{item} in #{parent ? parent.path : nil} must have path or section or link"
end
data['menu_customization'] = {}.merge(data['menu_customization'] || {}).merge(item['menu_customization'] || {})
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/d70fc1f2/docs/style/css/base.scss
----------------------------------------------------------------------
diff --git a/docs/style/css/base.scss b/docs/style/css/base.scss
index d6f8b6a..6448e0f 100644
--- a/docs/style/css/base.scss
+++ b/docs/style/css/base.scss
@@ -211,6 +211,29 @@ a[id]:empty, a[name]:empty {
padding-top: 8px;
padding-bottom: 8px;
}
+ a.sub-item.list-group-item.active {
+// background-image: -webkit-linear-gradient(top, #5cb85c 0%, #48a648 100%);
+// background-image: linear-gradient(to bottom, #5cb85c 0%, #48a648 100%);
+
+// background-image: -webkit-linear-gradient(top, #ff0000 0%, #0000ff 100%);
+// background-image: linear-gradient(to bottom, #6ca06c 0%, #589058 100%);
+
+ background-color: #f5f5f5;
+ // the below is needed to achieve the above, since bg-image is already set
+ background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f5f5f5 100%);
+ background-image: linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 100%);
+
+ border-color: #ddd;
+ color: $text_color;
+ text-shadow: none;
+ // not sure why the bottom border is visible at all, and stays on hover, but vanishes on 'active';
+ // but this sorts it out (taking 1 away from padding)
+ margin-bottom: 0;
+ padding-bottom: 7px;
+ }
+ a.sub-item.list-group-item.active:hover {
+ color: $a_hover_color;
+ }
}
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/d70fc1f2/docs/website/learnmore/theory.md
----------------------------------------------------------------------
diff --git a/docs/website/learnmore/theory.md b/docs/website/learnmore/theory.md
index f1c3899..f32e056 100644
--- a/docs/website/learnmore/theory.md
+++ b/docs/website/learnmore/theory.md
@@ -1,6 +1,11 @@
---
layout: website-normal
title: The Theory behind Brooklyn
+children:
+- { section: why_brooklyn, title: "Why Brooklyn?" }
+- { section: blueprints, title: Blueprints }
+- { section: benefits, title: Benefits }
+- { section: standards, title: Standards }
---
<div class="jumobotron" markdown="1">
@@ -10,7 +15,7 @@ through autonomic blueprints.
</div>
-## Why Brooklyn?
+## <a id="why_brooklyn"></a> Why Brooklyn?
Building and deploying applications in the cloud computing era has changed many
things. Provision a bare server just-in-time, and use automated tools to install
@@ -61,7 +66,7 @@ tools to collect key health/performance metrics; responding to situations
such as a failing node; and adding or removing capacity to match demand.
-## Blueprints
+## <a id="blueprints"></a> Blueprints
A Brooklyn blueprint defines an application, using a declarative YAML syntax
supporting JVM plugins. A basic blueprint might comprise a single process,
@@ -117,7 +122,7 @@ managing complex software to be codified as part of the software development
process.
-### Agile and flexible
+### <a id="benefits"></a> Agile and flexible
Brooklyn is a product built from the ground up for application agility. This
includes portability across non-cloud, cloud, and PaaS targets; devops-style
@@ -164,7 +169,7 @@ Salt apply promise theory to files and processes on machines; Brooklyn can
leverage all of these tools, complementing it with an application-oriented
model.
-### Standards compliant
+### <a id="standards"></a> Standards compliant
Finally we note some emerging standards in this area. OASIS CAMP (Cloud
Application Management for Platforms) and TOSCA (Topology and Orchestration