|
@ -4,103 +4,186 @@ if (hljs) { |
|
|
hljs.initHighlightingOnLoad(); |
|
|
hljs.initHighlightingOnLoad(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
//Initialize CodeBlock Visibility Settings
|
|
|
(function() { |
|
|
$(function () { |
|
|
var codeBlocks = document.querySelectorAll(".s-content pre"); |
|
|
var codeBlockView = $('.Columns__right'), |
|
|
var toggleCodeSection = document.querySelector(".CodeToggler"); |
|
|
codeBlocks = $('.s-content pre'), |
|
|
if (!toggleCodeSection) { |
|
|
toggleCodeSection = $('.CodeToggler'), |
|
|
return; |
|
|
toggleCodeBlockBtns = toggleCodeSection.find('.CodeToggler__button'), |
|
|
} else if (!codeBlocks.length) { |
|
|
toggleCodeBlockBtn = toggleCodeSection.find('.CodeToggler__button--main'), |
|
|
toggleCodeSection.classList.add("Hidden"); |
|
|
toggleCodeBlockBtnHide = toggleCodeSection.find('.CodeToggler__button--hide'), |
|
|
|
|
|
toggleCodeBlockBtnBelow = toggleCodeSection.find('.CodeToggler__button--below'), |
|
|
|
|
|
toggleCodeBlockBtnFloat = toggleCodeSection.find('.CodeToggler__button--float'); |
|
|
|
|
|
|
|
|
|
|
|
// If there is no code block we hide the link
|
|
|
|
|
|
if (!codeBlocks.size()) { |
|
|
|
|
|
toggleCodeSection.addClass('Hidden'); |
|
|
|
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var toggleCodeBlockBtnList = toggleCodeSection.querySelectorAll(".CodeToggler__button"); |
|
|
|
|
|
var toggleCodeBlockBtnSet = toggleCodeSection.querySelector(".CodeToggler__button--main"); // available when floating is disabled
|
|
|
|
|
|
var toggleCodeBlockBtnHide = toggleCodeSection.querySelector(".CodeToggler__button--hide"); |
|
|
|
|
|
var toggleCodeBlockBtnBelow = toggleCodeSection.querySelector(".CodeToggler__button--below"); |
|
|
|
|
|
var toggleCodeBlockBtnFloat = toggleCodeSection.querySelector(".CodeToggler__button--float"); |
|
|
|
|
|
var codeBlockView = document.querySelector(".Columns__right"); |
|
|
|
|
|
var floating = document.body.classList.contains("with-float"); |
|
|
|
|
|
|
|
|
function setCodeBlockStyle(codeBlockState) { |
|
|
function setCodeBlockStyle(codeBlockState) { |
|
|
try { |
|
|
for (var a = 0; a < toggleCodeBlockBtnList.length; a++) { |
|
|
localStorage.setItem("codeBlockState", codeBlockState); |
|
|
toggleCodeBlockBtnList[a].classList.remove("Button--active"); |
|
|
} catch (e) { |
|
|
|
|
|
// local storage operations can fail with the file:// protocol
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
toggleCodeBlockBtns.removeClass("Button--active"); |
|
|
|
|
|
|
|
|
|
|
|
switch (codeBlockState) { |
|
|
switch (codeBlockState) { |
|
|
case 2: // Show code blocks inline
|
|
|
case true: // Show code blocks below (flowed); checkbox
|
|
|
toggleCodeBlockBtnFloat.addClass("Button--active"); |
|
|
var hidden = false; |
|
|
codeBlockView.addClass('Columns__right--float'); |
|
|
break; |
|
|
codeBlockView.removeClass('Columns__right--full'); |
|
|
case false: // Hidden code blocks; checkbox
|
|
|
codeBlocks.removeClass('Hidden'); |
|
|
var hidden = true; |
|
|
break; |
|
|
break; |
|
|
case 1: // Show code blocks below
|
|
|
case 2: // Show code blocks inline (floated)
|
|
|
toggleCodeBlockBtnBelow.addClass("Button--active"); |
|
|
toggleCodeBlockBtnFloat.classList.add("Button--active"); |
|
|
toggleCodeBlockBtn.prop('checked', true); |
|
|
codeBlockView.classList.add("Columns__right--float"); |
|
|
codeBlockView.removeClass('Columns__right--float'); |
|
|
codeBlockView.classList.remove("Columns__right--full"); |
|
|
codeBlockView.addClass('Columns__right--full'); |
|
|
var hidden = false; |
|
|
codeBlocks.removeClass('Hidden'); |
|
|
break; |
|
|
|
|
|
case 1: // Show code blocks below (flowed)
|
|
|
|
|
|
case "checked": |
|
|
|
|
|
toggleCodeBlockBtnBelow.classList.add("Button--active"); |
|
|
|
|
|
codeBlockView.classList.remove("Columns__right--float"); |
|
|
|
|
|
codeBlockView.classList.add("Columns__right--full"); |
|
|
|
|
|
var hidden = false; |
|
|
break; |
|
|
break; |
|
|
case 0: // Hidden code blocks
|
|
|
case 0: // Hidden code blocks
|
|
|
default: |
|
|
default: |
|
|
toggleCodeBlockBtnHide.addClass("Button--active"); |
|
|
toggleCodeBlockBtnHide.classList.add("Button--active"); |
|
|
toggleCodeBlockBtn.prop('checked', false); |
|
|
codeBlockView.classList.remove("Columns__right--float"); |
|
|
codeBlockView.removeClass('Columns__right--float'); |
|
|
codeBlockView.classList.add("Columns__right--full"); |
|
|
codeBlockView.addClass('Columns__right--full'); |
|
|
var hidden = true; |
|
|
codeBlocks.addClass('Hidden'); |
|
|
|
|
|
break; |
|
|
break; |
|
|
} |
|
|
} |
|
|
|
|
|
for (var a = 0; a < codeBlocks.length; a++) { |
|
|
|
|
|
if (hidden) { |
|
|
|
|
|
codeBlocks[a].classList.add("Hidden"); |
|
|
|
|
|
} else { |
|
|
|
|
|
codeBlocks[a].classList.remove("Hidden"); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
try { |
|
|
|
|
|
localStorage.setItem("codeBlockState", +codeBlockState); |
|
|
|
|
|
} catch (e) { |
|
|
|
|
|
// local storage operations can fail with the file:// protocol
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
if (!floating) { |
|
|
|
|
|
toggleCodeBlockBtnSet.addEventListener("change", function(ev) {setCodeBlockStyle(ev.target.checked);}, false); |
|
|
|
|
|
} else { |
|
|
|
|
|
toggleCodeBlockBtnHide.addEventListener("click", function() {setCodeBlockStyle(0);}, false); |
|
|
|
|
|
toggleCodeBlockBtnBelow.addEventListener("click", function() {setCodeBlockStyle(1);}, false); |
|
|
|
|
|
toggleCodeBlockBtnFloat.addEventListener("click", function() {setCodeBlockStyle(2);}, false); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
toggleCodeBlockBtn.click(function() { |
|
|
|
|
|
setCodeBlockStyle(codeBlocks.hasClass('Hidden') ? 1 : 0); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
toggleCodeBlockBtnHide.click(function() { setCodeBlockStyle(0); }); |
|
|
|
|
|
toggleCodeBlockBtnBelow.click(function() { setCodeBlockStyle(1); }); |
|
|
|
|
|
toggleCodeBlockBtnFloat.click(function() { setCodeBlockStyle(2); }); |
|
|
|
|
|
|
|
|
|
|
|
var floating = $(document.body).hasClass("with-float"); |
|
|
|
|
|
try { |
|
|
try { |
|
|
var codeBlockState = localStorage.getItem("codeBlockState"); |
|
|
var codeBlockState = localStorage.getItem("codeBlockState"); |
|
|
} catch (e) { |
|
|
} catch (e) { |
|
|
// local storage operations can fail with the file:// protocol
|
|
|
// local storage operations can fail with the file:// protocol
|
|
|
var codeBlockState = false; |
|
|
var codeBlockState = null; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (!codeBlockState) { |
|
|
if (!codeBlockState) { |
|
|
codeBlockState = floating? 2 : 1; |
|
|
codeBlockState = floating ? 2 : 1; |
|
|
} else { |
|
|
} else { |
|
|
codeBlockState = parseInt(codeBlockState); |
|
|
codeBlockState = parseInt(codeBlockState); |
|
|
} |
|
|
} |
|
|
|
|
|
if (!floating) { |
|
|
if (!floating && codeBlockState == 2) { |
|
|
codeBlockState = !!codeBlockState; |
|
|
codeBlockState = 1; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setCodeBlockStyle(codeBlockState); |
|
|
setCodeBlockStyle(codeBlockState); |
|
|
}); |
|
|
})(); |
|
|
|
|
|
|
|
|
|
|
|
(function() { |
|
|
|
|
|
function debounce(func, wait) { |
|
|
|
|
|
var timeout; |
|
|
|
|
|
return function() { |
|
|
|
|
|
var context = this, args = arguments; |
|
|
|
|
|
var later = function() { |
|
|
|
|
|
timeout = null; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
clearTimeout(timeout); |
|
|
|
|
|
timeout = setTimeout(later, wait); |
|
|
|
|
|
}; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
var navItems = document.querySelectorAll('.Nav__item.has-children > a'); |
|
|
|
|
|
|
|
|
|
|
|
function _toggleSubMenu(ev) { |
|
|
|
|
|
if (ev.preventDefault !== undefined) { |
|
|
|
|
|
ev.preventDefault(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
var parent = ev.target.parentNode; |
|
|
|
|
|
var subNav = parent.querySelector('ul.Nav'); |
|
|
|
|
|
|
|
|
|
|
|
if (ev.preventDefault !== undefined && parent.classList.contains('Nav__item--open')) { |
|
|
|
|
|
subNav.style.height = 0; |
|
|
|
|
|
parent.classList.remove('Nav__item--open'); |
|
|
|
|
|
} else { |
|
|
|
|
|
if (ev.preventDefault !== undefined) { |
|
|
|
|
|
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms'; |
|
|
|
|
|
subNav.style.height = subNav.scrollHeight + 'px'; |
|
|
|
|
|
parent.classList.add('Nav__item--open'); |
|
|
|
|
|
} else { |
|
|
|
|
|
// When running at page load the transitions don't need to fire and
|
|
|
|
|
|
// the classList doesn't need to be altered.
|
|
|
|
|
|
subNav.style.transitionDuration = '0ms'; |
|
|
|
|
|
subNav.style.height = subNav.scrollHeight + 'px'; |
|
|
|
|
|
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms'; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
$(function () { |
|
|
// Because font sizes change the height of the menus can change so they must
|
|
|
// Tree navigation
|
|
|
// be recalculated if necessary when the viewport size changes.
|
|
|
$('.aj-nav').click(function (e) { |
|
|
function _resize() { |
|
|
e.preventDefault(); |
|
|
var subNav = document.querySelector('.Nav .Nav'), |
|
|
$(this).parent().siblings().find('ul').slideUp(); |
|
|
height, cur; |
|
|
$(this).next().slideToggle(); |
|
|
for (var i = 0; i < subNav.length; i++) { |
|
|
}); |
|
|
cur = subNav[i]; |
|
|
|
|
|
height = parseFloat(cur.style.height, 10); |
|
|
|
|
|
if (height > 0 && cur.scrollHeight !== height) { |
|
|
|
|
|
// Transitions don't need to fire when resizing the window.
|
|
|
|
|
|
cur.style.transitionDuration = '0ms'; |
|
|
|
|
|
cur.style.height = cur.scrollHeight + 'px'; |
|
|
|
|
|
cur.style.transitionDuration = Math.max(cur.scrollHeight, 150) + 'ms'; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// New Tree navigation
|
|
|
for (var i = 0, cur; i < navItems.length; i++) { |
|
|
$('ul.Nav > li.has-children > a > .Nav__arrow').click(function() { |
|
|
cur = navItems[i]; |
|
|
$(this).parent().parent().toggleClass('Nav__item--open'); |
|
|
cur.addEventListener('click', _toggleSubMenu); |
|
|
return false; |
|
|
|
|
|
}); |
|
|
if (cur.parentNode.classList.contains('Nav__item--open')) { |
|
|
|
|
|
_toggleSubMenu({ target: cur }); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', debounce(_resize, 150)); |
|
|
|
|
|
window.addEventListener('orientationchange', _resize); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})(); |
|
|
|
|
|
|
|
|
|
|
|
(function() { |
|
|
|
|
|
var trigger = document.querySelector('.Collapsible__trigger'); |
|
|
|
|
|
|
|
|
// Responsive navigation
|
|
|
if (!trigger) { |
|
|
$('.Collapsible__trigger').click(function () { |
|
|
return; |
|
|
$('.Collapsible__content').slideToggle(); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
content = document.querySelector('.Collapsible__content'); |
|
|
|
|
|
|
|
|
|
|
|
trigger.addEventListener('click', function(ev) { |
|
|
|
|
|
if (content.classList.contains('Collapsible__content--open')) { |
|
|
|
|
|
content.style.height = 0; |
|
|
|
|
|
content.classList.remove('Collapsible__content--open'); |
|
|
|
|
|
} else { |
|
|
|
|
|
content.style.transitionDuration = Math.max(content.scrollHeight, 150) + 'ms'; |
|
|
|
|
|
content.style.height = content.scrollHeight + 'px'; |
|
|
|
|
|
content.classList.add('Collapsible__content--open'); |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
})(); |
|
|