92 lines
2.6 KiB
HTML
92 lines
2.6 KiB
HTML
|
<head>
|
||
|
|
<link href='../dist/cartostyles.css' type='text/css' rel='stylesheet'>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
{{> theme}}
|
||
|
|
{{> highlight}}
|
||
|
|
{{> jquery}}
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var j = jQuery.noConflict(true);
|
||
|
|
j(function() {
|
||
|
|
|
||
|
|
// Show section in Styleguide
|
||
|
|
j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
|
||
|
|
|
||
|
|
// Click on link with subheadings
|
||
|
|
j('#styleguide-menu .submenulink').click(function(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
var jqCurSubmenu = j('[data-submenu="' + j(this).data('section') + '"]');
|
||
|
|
var isCurSubmenuOn = jqCurSubmenu.hasClass('on');
|
||
|
|
j('#styleguide-menu .on').removeClass('on');
|
||
|
|
if (!isCurSubmenuOn) {
|
||
|
|
jqCurSubmenu.addClass('on');
|
||
|
|
j(this).addClass('on');
|
||
|
|
}
|
||
|
|
showSection(j(this).data('section'));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Click on link without subheadings
|
||
|
|
j('#styleguide-menu .sectionlink').click(function(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
j('#styleguide-menu .on').removeClass('on');
|
||
|
|
j(this).addClass('on');
|
||
|
|
showSection(j(this).data('section'));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Show/Hide sections
|
||
|
|
function showSection(section) {
|
||
|
|
j('#styleguide .section').hide();
|
||
|
|
var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
|
||
|
|
jqCurSections.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div id="styleguide-menu">
|
||
|
|
<ul>
|
||
|
|
{{#each menu}}
|
||
|
|
<li>
|
||
|
|
{{#if headings.0.name}}
|
||
|
|
<a class="submenulink" href="#" data-section="{{name}}">{{name}}</a>
|
||
|
|
<ul class="submenu" data-submenu="{{../name}}">
|
||
|
|
{{#each headings}}
|
||
|
|
<li><a href="#{{id}}">{{name}}</a></li>
|
||
|
|
{{/each}}
|
||
|
|
</ul>
|
||
|
|
{{/if}}
|
||
|
|
{{#unless headings.0.name}}
|
||
|
|
<a class="sectionlink" href="#" data-section="{{name}}">{{name}}</a>
|
||
|
|
{{/unless}}
|
||
|
|
</li>
|
||
|
|
{{/each}}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="styleguide">
|
||
|
|
{{#each sections}}
|
||
|
|
<div class="section" id="{{id}}" data-section="{{section}}" data-heading="{{heading}}">
|
||
|
|
|
||
|
|
<div class="comment">
|
||
|
|
<h1>{{section}}{{#if heading}}/{{heading}}{{/if}}</h1>
|
||
|
|
{{{comment}}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{#if code}}
|
||
|
|
<div class="result">
|
||
|
|
{{{code}}}
|
||
|
|
</div>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
{{#if markup}}
|
||
|
|
<div class="markup hljs">
|
||
|
|
<pre>
|
||
|
|
{{{markup}}}
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
{{/if}}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
{{/each}}
|
||
|
|
</div>
|