2016-01-14 19:14:43 +08:00
|
|
|
<head>
|
2016-01-15 05:19:06 +08:00
|
|
|
<link href='../cartostyles.css' type='text/css' rel='stylesheet'>
|
2016-01-14 19:14:43 +08:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
{{> theme}}
|
|
|
|
|
{{> highlight}}
|
|
|
|
|
{{> jquery}}
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var j = jQuery.noConflict(true);
|
|
|
|
|
j(function() {
|
2016-01-19 00:48:11 +08:00
|
|
|
// Click on link with subheadings
|
|
|
|
|
j('#styleguide-menu .submenulink').click(function(event) {
|
|
|
|
|
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');
|
2016-01-18 23:31:15 +08:00
|
|
|
}
|
2016-01-19 00:48:11 +08:00
|
|
|
showSection(j(this).data('section'));
|
|
|
|
|
});
|
2016-01-18 23:31:15 +08:00
|
|
|
|
2016-01-19 00:48:11 +08:00
|
|
|
// Click on link without subheadings
|
|
|
|
|
j('#styleguide-menu .sectionlink').click(function(event) {
|
|
|
|
|
j('#styleguide-menu .on').removeClass('on');
|
|
|
|
|
j(this).addClass('on');
|
|
|
|
|
showSection(j(this).data('section'));
|
|
|
|
|
});
|
2016-01-14 19:14:43 +08:00
|
|
|
|
2016-01-19 00:48:11 +08:00
|
|
|
// Show/Hide sections
|
|
|
|
|
function showSection(section) {
|
|
|
|
|
j('#styleguide .section').hide();
|
|
|
|
|
var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
|
|
|
|
|
jqCurSections.show();
|
|
|
|
|
}
|
2016-01-14 19:14:43 +08:00
|
|
|
|
2016-01-19 00:48:11 +08:00
|
|
|
// Show current section
|
|
|
|
|
var currentElement = window.location.hash.replace(/#/g, '');
|
|
|
|
|
if (currentElement) {
|
|
|
|
|
var section = currentElement.split('-')[0];
|
|
|
|
|
j('.submenulink[data-section="' + section + '"]').click();
|
|
|
|
|
} else {
|
|
|
|
|
// Show section in Styleguide
|
|
|
|
|
j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
|
|
|
|
|
}
|
2016-01-14 19:14:43 +08:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div id="styleguide-menu">
|
|
|
|
|
<ul>
|
2016-01-19 00:48:11 +08:00
|
|
|
<li>
|
|
|
|
|
<a class="submenulink" href="#Basics" data-section="Basics">Basics</a>
|
|
|
|
|
</li>
|
2016-01-14 19:14:43 +08:00
|
|
|
{{#each menu}}
|
|
|
|
|
<li>
|
|
|
|
|
{{#if headings.0.name}}
|
2016-01-18 23:31:15 +08:00
|
|
|
<a class="submenulink" href="#{{name}}" data-section="{{name}}">{{name}}</a>
|
2016-01-14 19:14:43 +08:00
|
|
|
<ul class="submenu" data-submenu="{{../name}}">
|
|
|
|
|
{{#each headings}}
|
|
|
|
|
<li><a href="#{{id}}">{{name}}</a></li>
|
|
|
|
|
{{/each}}
|
|
|
|
|
</ul>
|
|
|
|
|
{{/if}}
|
|
|
|
|
{{#unless headings.0.name}}
|
2016-01-18 23:31:15 +08:00
|
|
|
<a class="sectionlink" href="#{{name}}" data-section="{{name}}">{{name}}</a>
|
2016-01-14 19:14:43 +08:00
|
|
|
{{/unless}}
|
|
|
|
|
</li>
|
|
|
|
|
{{/each}}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="styleguide">
|
2016-01-19 00:48:11 +08:00
|
|
|
<div class="section" id="Basics" data-section="Basics" data-heading="Basics">
|
|
|
|
|
<div class="comment">
|
|
|
|
|
<h1>Basics</h1>
|
|
|
|
|
<p>Important notes about this styleguide</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="result">
|
|
|
|
|
<ul>
|
|
|
|
|
<li>All new elements added in this repository should have included a 'CDB-' namespace.</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="markup">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2016-01-14 19:14:43 +08:00
|
|
|
{{#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>
|
