Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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
hughsk committed Nov 26, 2012
1 parent cdad5a5 commit 4c11250
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 15 deletions.
14 changes: 13 additions & 1 deletion bin/kss-node
Expand Up @@ -317,7 +317,7 @@ handlebars.registerHelper('eachSection', function(query) {
i, l, buffer = ""; i, l, buffer = "";


if (!query.match(/x|\*/g)) { if (!query.match(/x|\*/g)) {
query = query + ".x.*"; query = new RegExp(query + ".*");
} }
sections = styleguide.section(query); sections = styleguide.section(query);
if (!sections) return ''; if (!sections) return '';
Expand Down Expand Up @@ -348,6 +348,18 @@ handlebars.registerHelper('eachRoot', function() {
return buffer; 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 * 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. * @param {Object} section Supply a section object to loop over it's modifiers. Defaults to the current section.
Expand Down
26 changes: 12 additions & 14 deletions lib/template/index.html
Expand Up @@ -37,24 +37,23 @@
{{#if overview}} {{#if overview}}
{{html overview}} {{html overview}}
{{else}} {{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. Find each section, in order.
If there's no markup or modifiers supplied, use a Markdown-only If there's no markup or modifiers supplied, use a Markdown-only
layout instead. layout instead.

The "root" element comes first in this loop, and can be detected using
the "#whenDepth 1" block as seen below.
}} }}
{{#eachSection rootNumber}} {{#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}} {{#ifAny markup modifiers}}
<section class="kss-depth-{{ refDepth }}">
<h1><span class="kss-ref">{{ reference }}</span> - {{ header }}</h1>
<div class="kss-box">{{html description}}</div> <div class="kss-box">{{html description}}</div>
<table class="kss-mod-list"> <table class="kss-mod-list">
<tr class="kss-mod-desc-group"> <tr class="kss-mod-desc-group">
Expand All @@ -77,15 +76,14 @@ <h1><span class="kss-ref">{{ reference }}</span> - {{ header }}</h1>
<div class="kss-markup"> <div class="kss-markup">
<pre class="prettyprint lang-html">{{markup}}</pre> <pre class="prettyprint lang-html">{{markup}}</pre>
</div> </div>
</section>
{{else}} {{else}}
<section class="kss-depth-{{ refDepth }}">
<h1 class="kss-title"><span class="kss-ref">{{ reference }}</span> - {{ header }}</h1>
{{#if description}} {{#if description}}
{{html description}} {{html description}}
{{/if}} {{/if}}
</section>
{{/ifAny}} {{/ifAny}}
{{#whenDepth 1}} {{else}}
</section>
{{/whenDepth}}
{{/eachSection}} {{/eachSection}}
{{/if}} {{/if}}
</article> </article>
Expand Down
4 changes: 4 additions & 0 deletions lib/template/public/kss.less
Expand Up @@ -33,6 +33,10 @@
left:20%; left:20%;
} }


.kss-mod-list {
width:100%;
}

.kss-mod-name { .kss-mod-name {
text-align:right; text-align:right;
width:20%; width:20%;
Expand Down

0 comments on commit 4c11250

Please sign in to comment.