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 <[email protected]> Authored: Mon Jan 12 23:30:44 2015 +0000 Committer: Alex Heneveld <[email protected]> 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
