Permalink
Browse files

Improving flexibility, also allowing for #8 top-level examples

* Add 'whenDepth' helper for more control in section loops
* Modify 'eachSection' helper to include parent in the loop, when supplied a number
* Small CSS change for top-level examples
* Reorder default template to reflect these changes

These only alter the behaviour of the CLI tool, not the module API itself
  • Loading branch information...
1 parent cdad5a5 commit 4c112506e70ee4ff2e09218f7d24cdf65c45d857 @hughsk hughsk committed Mar 27, 2012
Showing with 29 additions and 15 deletions.
  1. +13 −1 bin/kss-node
  2. +12 −14 lib/template/index.html
  3. +4 −0 lib/template/public/kss.less
View
@@ -317,7 +317,7 @@ handlebars.registerHelper('eachSection', function(query) {
i, l, buffer = "";
if (!query.match(/x|\*/g)) {
- query = query + ".x.*";
+ query = new RegExp(query + ".*");
}
sections = styleguide.section(query);
if (!sections) return '';
@@ -348,6 +348,18 @@ handlebars.registerHelper('eachRoot', function() {
return buffer;
});
+handlebars.registerHelper('whenDepth', function(depth, context) {
+ if (!(context && this.refDepth)) {
+ return '';
+ }
+ if (depth == this.refDepth) {
+ return context(this);
+ }
+ if (context.inverse) {
+ return context.inverse(this);
+ }
+});
+
/**
* Similar to the {#eachSection} helper, however will loop over each modifier
* @param {Object} section Supply a section object to loop over it's modifiers. Defaults to the current section.
View
@@ -37,24 +37,23 @@
{{#if overview}}
{{html overview}}
{{else}}
- {{! Top Page Heading }}
-
- {{#section rootNumber}}
- <h1 class="kss-title" id="kss-title-main"><span class="kss-ref">{{ reference }}.0</span>{{#if header}} - {{ header }}{{/if}}</h1>
- {{#if description}}
- {{html description}}
- {{/if}}
- {{/section}}
{{!
Find each section, in order.
If there's no markup or modifiers supplied, use a Markdown-only
layout instead.
+
+ The "root" element comes first in this loop, and can be detected using
+ the "#whenDepth 1" block as seen below.
}}
{{#eachSection rootNumber}}
+ {{#whenDepth 1}}
+ <h1 class="kss-title"><span class="kss-ref">{{ reference }}.0</span> - {{ header }}</h1>
+ {{else}}
+ <section class="kss-depth-{{ refDepth }}">
+ <h1 class="kss-title"><span class="kss-ref">{{ reference }}</span> - {{ header }}</h1>
+ {{/whenDepth}}
{{#ifAny markup modifiers}}
- <section class="kss-depth-{{ refDepth }}">
- <h1><span class="kss-ref">{{ reference }}</span> - {{ header }}</h1>
<div class="kss-box">{{html description}}</div>
<table class="kss-mod-list">
<tr class="kss-mod-desc-group">
@@ -77,15 +76,14 @@ <h1><span class="kss-ref">{{ reference }}</span> - {{ header }}</h1>
<div class="kss-markup">
<pre class="prettyprint lang-html">{{markup}}</pre>
</div>
- </section>
{{else}}
- <section class="kss-depth-{{ refDepth }}">
- <h1 class="kss-title"><span class="kss-ref">{{ reference }}</span> - {{ header }}</h1>
{{#if description}}
{{html description}}
{{/if}}
- </section>
{{/ifAny}}
+ {{#whenDepth 1}} {{else}}
+ </section>
+ {{/whenDepth}}
{{/eachSection}}
{{/if}}
</article>
@@ -33,6 +33,10 @@
left:20%;
}
+.kss-mod-list {
+ width:100%;
+}
+
.kss-mod-name {
text-align:right;
width:20%;

0 comments on commit 4c11250

Please sign in to comment.