Added a new basic section for styleguide

This commit is contained in:
xavijam 2016-01-18 17:48:11 +01:00
parent 1780e1d550
commit 3e10541168

View File

@ -9,48 +9,49 @@
<script>
var j = jQuery.noConflict(true);
j(function() {
// Show current section
var hash = window.location.hash.replace(/#/g, '');
if (hash) {
setTimeout(function() {
showSection(hash.split('-')[0]);
}, 0);
// 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');
}
showSection(j(this).data('section'));
});
// 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'));
});
// Show/Hide sections
function showSection(section) {
j('#styleguide .section').hide();
var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
jqCurSections.show();
}
// 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();
// 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');
}
showSection(j(this).data('section'));
});
// 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'));
});
// 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>
<li>
<a class="submenulink" href="#Basics" data-section="Basics">Basics</a>
</li>
{{#each menu}}
<li>
{{#if headings.0.name}}
@ -70,6 +71,21 @@
</div>
<div id="styleguide">
<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>
{{#each sections}}
<div class="section" id="{{id}}" data-section="{{section}}" data-heading="{{heading}}">