Convert site to Hugo (#8316)
This commit converts content and layout to use Hugo.
This commit is contained in:
Bjørn Erik Pedersen
committed by
k8s-ci-robot
k8s-ci-robot
parent
7745f0e0c5
commit
7f3b633aa0
Vendored
+7
File diff suppressed because one or more lines are too long
@@ -0,0 +1,15 @@
|
||||
$( document ).ready(function() {
|
||||
// Shows permalink when term name is hovered over
|
||||
$(".glossary-injector").each(function() {
|
||||
var placeholder = $("#" + $(this).data("placeholder-id"));
|
||||
var originalContent = placeholder.html();
|
||||
|
||||
var glossaryDef = $($(this).find(".injector-def")[0]).html();
|
||||
|
||||
$(this).mouseenter(function() {
|
||||
placeholder.html(glossaryDef);
|
||||
}).mouseleave(function(){
|
||||
placeholder.html(originalContent);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,181 @@
|
||||
// TODO (long-term): Would be easier to manage all this state with React
|
||||
|
||||
$( document ).ready(function() {
|
||||
var expandText = "[+]";
|
||||
var closeText = "[-]";
|
||||
var selectAllKey = "all";
|
||||
var deselectAllKey = "none";
|
||||
|
||||
var defaultActiveTag = "fundamental";
|
||||
var activeTags = {};
|
||||
|
||||
var paramSize = function(paramHash) {
|
||||
return Object.keys(paramHash).length;
|
||||
}
|
||||
|
||||
// "Lib" for acquiring parameters from the URL
|
||||
var urlParamLib = function() {
|
||||
function initParams() {
|
||||
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
|
||||
sURLVariables = sPageURL.split('&'),
|
||||
sParameterName,
|
||||
i;
|
||||
|
||||
var paramHash = {};
|
||||
for (i = 0; i < sURLVariables.length; i++) {
|
||||
sParameterName = sURLVariables[i].split('=');
|
||||
if (sParameterName[0] != "")
|
||||
paramHash[sParameterName[0]] = sParameterName[1];
|
||||
}
|
||||
|
||||
if (paramSize(paramHash) == 0) {
|
||||
paramHash[defaultActiveTag] = true;
|
||||
}
|
||||
|
||||
return paramHash;
|
||||
}
|
||||
|
||||
function updateParams(paramHash) {
|
||||
var urlWithoutQuery = window.location.href.split('?')[0];
|
||||
var urlHash = window.location.hash;
|
||||
window.history.pushState(null,null, urlWithoutQuery + "?" + $.param(paramHash) + window.location.hash);
|
||||
}
|
||||
|
||||
return {
|
||||
initParams: initParams,
|
||||
updateParams: updateParams,
|
||||
};
|
||||
}();
|
||||
|
||||
var initClickFunctions = function() {
|
||||
|
||||
var deactivateTagTerms = function(elt) {
|
||||
var targetTag = elt.data("target");
|
||||
var targetClass = "." + targetTag;
|
||||
var tagName = targetTag.split('tag-')[1];
|
||||
|
||||
elt.removeClass("active-tag");
|
||||
$(targetClass).each(function(){
|
||||
var showCount = $(this).data("show-count");
|
||||
var newShowCount = showCount - 1;
|
||||
$(this).data("show-count", newShowCount);
|
||||
if (newShowCount < 1) {
|
||||
$(this).addClass("hide");
|
||||
}
|
||||
});
|
||||
delete activeTags[tagName];
|
||||
};
|
||||
|
||||
var activateTagTerms = function(elt) {
|
||||
var targetTag = elt.data("target");
|
||||
var targetClass = "." + targetTag;
|
||||
var tagName = targetTag.split('tag-')[1];
|
||||
|
||||
elt.addClass("active-tag");
|
||||
$(targetClass).each(function(){
|
||||
var showCount = $(this).data("show-count");
|
||||
var newShowCount = showCount + 1;
|
||||
$(this).data("show-count", newShowCount);
|
||||
if (newShowCount > 0) {
|
||||
$(this).removeClass("hide");
|
||||
}
|
||||
});
|
||||
activeTags[tagName] = true;
|
||||
if (activeTags[deselectAllKey]) {
|
||||
delete activeTags[deselectAllKey];
|
||||
}
|
||||
};
|
||||
|
||||
// Shows/hides glossary terms when their relevant tags are clicked
|
||||
$(".canonical-tag").each(function(){
|
||||
var placeholder = $("#placeholder");
|
||||
var targetTag = $(this).data("target");
|
||||
$(this).mouseenter(function(){
|
||||
var tagDescription = $("#" + targetTag + "-description").html();
|
||||
placeholder.html(tagDescription);
|
||||
placeholder.removeClass('invisible');
|
||||
}).mouseleave(function(){
|
||||
placeholder.addClass('invisible');
|
||||
});
|
||||
|
||||
$(this).click(function(){
|
||||
var shouldHide = $(this).hasClass("active-tag");
|
||||
if (shouldHide) {
|
||||
deactivateTagTerms($(this));
|
||||
} else {
|
||||
activateTagTerms($(this));
|
||||
}
|
||||
urlParamLib.updateParams(activeTags);
|
||||
});
|
||||
});
|
||||
|
||||
// Adds functionality to "select all tags" link
|
||||
$("#select-all-tags").click(function(){
|
||||
$(".canonical-tag").each(function(){
|
||||
var shouldActivate = !$(this).hasClass("active-tag");
|
||||
if (shouldActivate) {
|
||||
activateTagTerms($(this));
|
||||
}
|
||||
});
|
||||
queryParams = {}
|
||||
queryParams[selectAllKey] = true;
|
||||
urlParamLib.updateParams(queryParams);
|
||||
});
|
||||
|
||||
// Adds functionality to "deselect all tags" link
|
||||
$("#deselect-all-tags").click(function(){
|
||||
$(".canonical-tag").each(function(){
|
||||
var shouldHide = $(this).hasClass("active-tag");
|
||||
if (shouldHide) {
|
||||
deactivateTagTerms($(this));
|
||||
}
|
||||
});
|
||||
queryParams = {}
|
||||
queryParams[deselectAllKey] = true;
|
||||
urlParamLib.updateParams(queryParams);
|
||||
});
|
||||
|
||||
// Expands/hides glossary term definitions when [+] button is clicked
|
||||
$(".click-controller").each(function(){
|
||||
$(this).click(function() {
|
||||
var targetId = $(this).data("target");
|
||||
var shouldExpand = $(this).html() == expandText;
|
||||
|
||||
if (shouldExpand) {
|
||||
$("#" + targetId).removeClass('hide');
|
||||
$(this).html(closeText);
|
||||
} else {
|
||||
$("#" + targetId).addClass('hide');
|
||||
$(this).html(expandText);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Shows permalink when term name is hovered over
|
||||
$(".term-name").each(function() {
|
||||
var permalink = $($(this).parent().find(".permalink")[0]);
|
||||
$(this).mouseenter(function(){
|
||||
permalink.removeClass("hide");
|
||||
}).mouseleave(function(){
|
||||
permalink.addClass("hide");
|
||||
});;
|
||||
});
|
||||
};
|
||||
|
||||
function initActiveTags() {
|
||||
if (activeTags[selectAllKey]) {
|
||||
$("#select-all-tags").click();
|
||||
} else if (activeTags[deselectAllKey]) {
|
||||
$("#deselect-all-tags").click();
|
||||
} else {
|
||||
for (var tagId in activeTags) {
|
||||
$("#tag-" + tagId).find("a")[0].click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initClickFunctions();
|
||||
activeTags = urlParamLib.initParams();
|
||||
initActiveTags();
|
||||
|
||||
});
|
||||
Vendored
+4
File diff suppressed because one or more lines are too long
+13
File diff suppressed because one or more lines are too long
@@ -0,0 +1,46 @@
|
||||
$( document ).ready(function() {
|
||||
var doRedirect = false;
|
||||
var notHere = false;
|
||||
var forwardingURL = window.location.href;
|
||||
|
||||
var oldURLs = ["/README.md","/README.html","/index.md",".html",".md"];
|
||||
|
||||
/* var: forwardingRules
|
||||
* type: array of objects
|
||||
* example rule object:
|
||||
* {
|
||||
* "from": "/path/from/old/location", //search in incoming forwardingURL for this string
|
||||
* "pattern": "#([0-9a-zA-Z\-\_]+)", //[optional] regex to parse out a token of digits, letters, hyphen, or underscore
|
||||
* "to": "/path/to/new/location", //base URL to forward to
|
||||
* "postfix": "/#<token>" //[optional] append this to base URL w/ <token> found by "pattern"
|
||||
* }
|
||||
*/
|
||||
var forwardingRules = [];
|
||||
|
||||
forwardingRules.forEach(function(rule) {
|
||||
if (forwardingURL.indexOf(rule.from) > -1) {
|
||||
var newURL = rule.to;
|
||||
var re = new RegExp(rule.pattern, 'g');
|
||||
var matchary = re.exec(forwardingURL);
|
||||
if (matchary !== null && rule.postfix) {
|
||||
newURL += rule.postfix.replace("<token>", matchary[1]);
|
||||
}
|
||||
notHere = true;
|
||||
window.location.replace(newURL);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (!notHere) {
|
||||
for (var i = 0; i < oldURLs.length; i++) {
|
||||
if (forwardingURL.indexOf(oldURLs[i]) > -1 &&
|
||||
forwardingURL.indexOf("404.html") < 0){
|
||||
doRedirect = true;
|
||||
forwardingURL = forwardingURL.replace(oldURLs[i],"/");
|
||||
}
|
||||
}
|
||||
if (doRedirect){
|
||||
window.location.replace(forwardingURL);
|
||||
};
|
||||
}
|
||||
});
|
||||
Executable
+524
@@ -0,0 +1,524 @@
|
||||
//modal close button
|
||||
(function(){
|
||||
//π.modalCloseButton = function(closingFunction){
|
||||
// return π.button('pi-modal-close-button', null, null, closingFunction);
|
||||
//};
|
||||
})();
|
||||
|
||||
// globals
|
||||
var body;
|
||||
|
||||
//helper functions
|
||||
function copyCode(elem){
|
||||
if (document.getElementById(elem)) {
|
||||
// create hidden text element, if it doesn't already exist
|
||||
var targetId = "_hiddenCopyText_";
|
||||
// must use a temporary form element for the selection and copy
|
||||
target = document.getElementById(targetId);
|
||||
if (!target) {
|
||||
var target = document.createElement("textarea");
|
||||
target.style.position = "absolute";
|
||||
target.style.left = "-9999px";
|
||||
target.style.top = "0";
|
||||
target.id = targetId;
|
||||
document.body.appendChild(target);
|
||||
}
|
||||
target.value = document.getElementById(elem).innerText;
|
||||
// select the content
|
||||
target.select();
|
||||
|
||||
// copy the selection
|
||||
var succeed;
|
||||
try {
|
||||
succeed = document.execCommand("copy");
|
||||
} catch(e) {
|
||||
sweetAlert("Oh, no...","Sorry, your browser doesn't support document.execCommand('copy'), so we can't copy this code to your clipboard.");
|
||||
succeed = false;
|
||||
}
|
||||
if (succeed) sweetAlert("Copied to clipboard: ",elem);
|
||||
return succeed;
|
||||
} else {
|
||||
sweetAlert("Oops!",elem + " not found when trying to copy code");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function booleanAttributeValue(element, attribute, defaultValue){
|
||||
// returns true if an attribute is present with no value
|
||||
// e.g. booleanAttributeValue(element, 'data-modal', false);
|
||||
if (element.hasAttribute(attribute)) {
|
||||
var value = element.getAttribute(attribute);
|
||||
if (value === '' || value === 'true') {
|
||||
return true;
|
||||
} else if (value === 'false') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
function classOnCondition(element, className, condition) {
|
||||
if (condition)
|
||||
$(element).addClass(className);
|
||||
else
|
||||
$(element).removeClass(className);
|
||||
}
|
||||
|
||||
function highestZ() {
|
||||
var Z = 1000;
|
||||
|
||||
$("*").each(function(){
|
||||
var thisZ = $(this).css('z-index');
|
||||
|
||||
if (thisZ != "auto" && thisZ > Z) Z = ++thisZ;
|
||||
});
|
||||
|
||||
return Z;
|
||||
}
|
||||
|
||||
function newDOMElement(tag, className, id){
|
||||
var el = document.createElement(tag);
|
||||
|
||||
if (className) el.className = className;
|
||||
if (id) el.id = id;
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
function px(n){
|
||||
return n + 'px';
|
||||
}
|
||||
|
||||
var kub = (function () {
|
||||
var HEADER_HEIGHT;
|
||||
var html, header, mainNav, quickstartButton, hero, encyclopedia, footer, headlineWrapper;
|
||||
|
||||
$(document).ready(function () {
|
||||
html = $('html');
|
||||
body = $('body');
|
||||
header = $('header');
|
||||
mainNav = $('#mainNav');
|
||||
quickstartButton = $('#quickstartButton');
|
||||
hero = $('#hero');
|
||||
encyclopedia = $('#encyclopedia');
|
||||
footer = $('footer');
|
||||
headlineWrapper = $('#headlineWrapper');
|
||||
HEADER_HEIGHT = header.outerHeight();
|
||||
|
||||
resetTheView();
|
||||
|
||||
window.addEventListener('resize', resetTheView);
|
||||
window.addEventListener('scroll', resetTheView);
|
||||
window.addEventListener('keydown', handleKeystrokes);
|
||||
|
||||
document.onunload = function(){
|
||||
window.removeEventListener('resize', resetTheView);
|
||||
window.removeEventListener('scroll', resetTheView);
|
||||
window.removeEventListener('keydown', handleKeystrokes);
|
||||
};
|
||||
|
||||
setInterval(setFooterType, 10);
|
||||
});
|
||||
|
||||
function setFooterType() {
|
||||
var windowHeight = window.innerHeight;
|
||||
var bodyHeight;
|
||||
|
||||
switch (html[0].id) {
|
||||
case 'docs': {
|
||||
bodyHeight = hero.outerHeight() + encyclopedia.outerHeight();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'home':
|
||||
// case 'caseStudies':
|
||||
bodyHeight = windowHeight;
|
||||
break;
|
||||
case 'blog':
|
||||
bodyHeight = windowHeight;
|
||||
case 'caseStudies':
|
||||
case 'partners':
|
||||
bodyHeight = windowHeight * 2;
|
||||
break;
|
||||
|
||||
default: {
|
||||
bodyHeight = hero.outerHeight() + $('#mainContent').outerHeight();
|
||||
}
|
||||
}
|
||||
|
||||
var footerHeight = footer.outerHeight();
|
||||
classOnCondition(body, 'fixed', windowHeight - footerHeight > bodyHeight);
|
||||
}
|
||||
|
||||
function resetTheView() {
|
||||
if (html.hasClass('open-nav')) {
|
||||
toggleMenu();
|
||||
} else {
|
||||
HEADER_HEIGHT = header.outerHeight();
|
||||
}
|
||||
|
||||
if (html.hasClass('open-toc')) {
|
||||
toggleToc();
|
||||
}
|
||||
|
||||
classOnCondition(html, 'flip-nav', window.pageYOffset > 0);
|
||||
|
||||
if (html[0].id == 'home') {
|
||||
setHomeHeaderStyles();
|
||||
}
|
||||
}
|
||||
|
||||
function setHomeHeaderStyles() {
|
||||
var Y = window.pageYOffset;
|
||||
var quickstartBottom = quickstartButton[0].getBoundingClientRect().bottom;
|
||||
|
||||
classOnCondition(html[0], 'y-enough', Y > quickstartBottom);
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
if (window.innerWidth < 800) {
|
||||
pushmenu.show('primary');
|
||||
}
|
||||
|
||||
else {
|
||||
var newHeight = HEADER_HEIGHT;
|
||||
|
||||
if (!html.hasClass('open-nav')) {
|
||||
newHeight = mainNav.outerHeight();
|
||||
}
|
||||
|
||||
header.css({height: px(newHeight)});
|
||||
html.toggleClass('open-nav');
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeystrokes(e) {
|
||||
switch (e.which) {
|
||||
case 27: {
|
||||
if (html.hasClass('open-nav')) {
|
||||
toggleMenu();
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showVideo() {
|
||||
$('body').css({overflow: 'hidden'});
|
||||
|
||||
var videoPlayer = $("#videoPlayer");
|
||||
var videoIframe = videoPlayer.find("iframe")[0];
|
||||
videoIframe.src = videoIframe.getAttribute("data-url");
|
||||
videoPlayer.css({zIndex: highestZ()});
|
||||
videoPlayer.fadeIn(300);
|
||||
videoPlayer.click(function(){
|
||||
$('body').css({overflow: 'auto'});
|
||||
|
||||
videoPlayer.fadeOut(300, function(){
|
||||
videoIframe.src = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function tocWasClicked(e) {
|
||||
var target = $(e.target);
|
||||
var docsToc = $("#docsToc");
|
||||
return (target[0] === docsToc[0] || target.parents("#docsToc").length > 0);
|
||||
}
|
||||
|
||||
function listenForTocClick(e) {
|
||||
if (!tocWasClicked(e)) toggleToc();
|
||||
}
|
||||
|
||||
function toggleToc() {
|
||||
html.toggleClass('open-toc');
|
||||
|
||||
setTimeout(function () {
|
||||
if (html.hasClass('open-toc')) {
|
||||
window.addEventListener('click', listenForTocClick);
|
||||
} else {
|
||||
window.removeEventListener('click', listenForTocClick);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
return {
|
||||
toggleToc: toggleToc,
|
||||
toggleMenu: toggleMenu,
|
||||
showVideo: showVideo
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
// accordion
|
||||
(function(){
|
||||
var yah = true;
|
||||
var moving = false;
|
||||
var CSS_BROWSER_HACK_DELAY = 25;
|
||||
|
||||
$(document).ready(function(){
|
||||
// Safari chokes on the animation here, so...
|
||||
if (navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Safari') != -1){
|
||||
var hackStyle = newDOMElement('style');
|
||||
hackStyle.innerHTML = '.pi-accordion .wrapper{transition: none}';
|
||||
body.append(hackStyle);
|
||||
}
|
||||
// Gross.
|
||||
|
||||
$('.pi-accordion').each(function () {
|
||||
var accordion = this;
|
||||
var content = this.innerHTML;
|
||||
var container = newDOMElement('div', 'container');
|
||||
container.innerHTML = content;
|
||||
$(accordion).empty();
|
||||
accordion.appendChild(container);
|
||||
CollapseBox($(container));
|
||||
});
|
||||
|
||||
setYAH();
|
||||
|
||||
setTimeout(function () {
|
||||
yah = false;
|
||||
}, 500);
|
||||
});
|
||||
|
||||
function CollapseBox(container){
|
||||
container.children('.item').each(function(){
|
||||
// build the TOC DOM
|
||||
// the animated open/close is enabled by having each item's content exist in the flow, at its natural height,
|
||||
// enclosed in a wrapper with height = 0 when closed, and height = contentHeight when open.
|
||||
var item = this;
|
||||
|
||||
// only add content wrappers to containers, not to links
|
||||
var isContainer = item.tagName === 'DIV';
|
||||
|
||||
var titleText = item.getAttribute('data-title');
|
||||
var title = newDOMElement('div', 'title');
|
||||
title.innerHTML = titleText;
|
||||
|
||||
var wrapper, content;
|
||||
|
||||
if (isContainer) {
|
||||
wrapper = newDOMElement('div', 'wrapper');
|
||||
content = newDOMElement('div', 'content');
|
||||
content.innerHTML = item.innerHTML;
|
||||
wrapper.appendChild(content);
|
||||
}
|
||||
|
||||
item.innerHTML = '';
|
||||
item.appendChild(title);
|
||||
|
||||
if (wrapper) {
|
||||
item.appendChild(wrapper);
|
||||
$(wrapper).css({height: 0});
|
||||
}
|
||||
|
||||
|
||||
$(title).click(function(){
|
||||
if (!yah) {
|
||||
if (moving) return;
|
||||
moving = true;
|
||||
}
|
||||
|
||||
if (container[0].getAttribute('data-single')) {
|
||||
var openSiblings = item.siblings().filter(function(sib){return sib.hasClass('on');});
|
||||
openSiblings.forEach(function(sibling){
|
||||
toggleItem(sibling);
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(function(){
|
||||
if (!isContainer) {
|
||||
moving = false;
|
||||
return;
|
||||
}
|
||||
toggleItem(item);
|
||||
}, CSS_BROWSER_HACK_DELAY);
|
||||
});
|
||||
|
||||
function toggleItem(thisItem){
|
||||
var thisWrapper = $(thisItem).find('.wrapper').eq(0);
|
||||
|
||||
if (!thisWrapper) return;
|
||||
|
||||
var contentHeight = thisWrapper.find('.content').eq(0).innerHeight() + 'px';
|
||||
|
||||
if ($(thisItem).hasClass('on')) {
|
||||
thisWrapper.css({height: contentHeight});
|
||||
$(thisItem).removeClass('on');
|
||||
|
||||
setTimeout(function(){
|
||||
thisWrapper.css({height: 0});
|
||||
moving = false;
|
||||
}, CSS_BROWSER_HACK_DELAY);
|
||||
} else {
|
||||
$(item).addClass('on');
|
||||
thisWrapper.css({height: contentHeight});
|
||||
|
||||
var duration = parseFloat(getComputedStyle(thisWrapper[0]).transitionDuration) * 1000;
|
||||
|
||||
setTimeout(function(){
|
||||
thisWrapper.css({height: ''});
|
||||
moving = false;
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
|
||||
if (content) {
|
||||
var innerContainers = $(content).children('.container');
|
||||
if (innerContainers.length > 0) {
|
||||
innerContainers.each(function(){
|
||||
CollapseBox($(this));
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setYAH() {
|
||||
var pathname = location.href.split('#')[0]; // on page load, make sure the page is YAH even if there's a hash
|
||||
var currentLinks = [];
|
||||
|
||||
$('.pi-accordion a').each(function () {
|
||||
if (pathname === this.href) currentLinks.push(this);
|
||||
});
|
||||
|
||||
currentLinks.forEach(function (yahLink) {
|
||||
$(yahLink).parents('.item').each(function(){
|
||||
$(this).addClass('on');
|
||||
$(this).find('.wrapper').eq(0).css({height: 'auto'});
|
||||
$(this).find('.content').eq(0).css({opacity: 1});
|
||||
});
|
||||
|
||||
$(yahLink).addClass('yah');
|
||||
yahLink.onclick = function(e){e.preventDefault();};
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
var pushmenu = (function(){
|
||||
var allPushMenus = {};
|
||||
|
||||
$(document).ready(function(){
|
||||
$('[data-auto-burger]').each(function(){
|
||||
var container = this;
|
||||
var id = container.getAttribute('data-auto-burger');
|
||||
|
||||
var autoBurger = document.getElementById(id) || newDOMElement('div', 'pi-pushmenu', id);
|
||||
var ul = autoBurger.querySelector('ul') || newDOMElement('ul');
|
||||
|
||||
$(container).find('a[href], button').each(function () {
|
||||
if (!booleanAttributeValue(this, 'data-auto-burger-exclude', false)) {
|
||||
var clone = this.cloneNode(true);
|
||||
clone.id = '';
|
||||
|
||||
if (clone.tagName == "BUTTON") {
|
||||
var aTag = newDOMElement('a');
|
||||
aTag.href = '';
|
||||
aTag.innerHTML = clone.innerHTML;
|
||||
aTag.onclick = clone.onclick;
|
||||
clone = aTag;
|
||||
}
|
||||
var li = newDOMElement('li');
|
||||
li.appendChild(clone);
|
||||
ul.appendChild(li);
|
||||
}
|
||||
});
|
||||
|
||||
autoBurger.appendChild(ul);
|
||||
body.append(autoBurger);
|
||||
});
|
||||
|
||||
$(".pi-pushmenu").each(function(){
|
||||
allPushMenus[this.id] = PushMenu(this);
|
||||
});
|
||||
});
|
||||
|
||||
function show(objId) {
|
||||
allPushMenus[objId].expose();
|
||||
}
|
||||
|
||||
function PushMenu(el) {
|
||||
var html = document.querySelector('html');
|
||||
|
||||
var overlay = newDOMElement('div', 'overlay');
|
||||
var content = newDOMElement('div', 'content');
|
||||
content.appendChild(el.querySelector('*'));
|
||||
|
||||
var side = el.getAttribute("data-side") || "right";
|
||||
|
||||
var sled = newDOMElement('div', 'sled');
|
||||
$(sled).css(side, 0);
|
||||
|
||||
sled.appendChild(content);
|
||||
|
||||
var closeButton = newDOMElement('button', 'push-menu-close-button');
|
||||
closeButton.onclick = closeMe;
|
||||
|
||||
sled.appendChild(closeButton);
|
||||
|
||||
overlay.appendChild(sled);
|
||||
el.innerHTML = '';
|
||||
el.appendChild(overlay);
|
||||
|
||||
sled.onclick = function(e){
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
overlay.onclick = closeMe;
|
||||
|
||||
window.addEventListener('resize', closeMe);
|
||||
|
||||
function closeMe(e) {
|
||||
if (e.target == sled) return;
|
||||
|
||||
$(el).removeClass('on');
|
||||
setTimeout(function(){
|
||||
$(el).css({display: 'none'});
|
||||
|
||||
$(body).removeClass('overlay-on');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function exposeMe(){
|
||||
$(body).addClass('overlay-on'); // in the default config, kills body scrolling
|
||||
|
||||
$(el).css({
|
||||
display: 'block',
|
||||
zIndex: highestZ()
|
||||
});
|
||||
|
||||
setTimeout(function(){
|
||||
$(el).addClass('on');
|
||||
}, 10);
|
||||
}
|
||||
|
||||
return {
|
||||
expose: exposeMe
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
show: show
|
||||
};
|
||||
})();
|
||||
|
||||
$(function() {
|
||||
|
||||
// Make global nav be active based on pathname
|
||||
if ((location.pathname.split("/")[1]) !== ""){
|
||||
$('.global-nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
|
||||
}
|
||||
|
||||
// If vendor strip doesn't exist add className
|
||||
if ( !$('#vendorStrip').length > 0 ) {
|
||||
$('#hero').addClass('bot-bar');
|
||||
}
|
||||
|
||||
// If is not homepage add class to hero section
|
||||
if (!$('#home').length > 0 ) {
|
||||
$('#hero').addClass('no-sub');
|
||||
}
|
||||
});
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,324 @@
|
||||
$( document ).ready(function() {
|
||||
// UI defaults, used if page is loaded without other params
|
||||
var defaults = {
|
||||
path: 'users',
|
||||
persona: 'app-developer',
|
||||
level: 'foundational'
|
||||
};
|
||||
// Top-level path types
|
||||
var pathTypes = [
|
||||
'users',
|
||||
'contributors',
|
||||
'migrators',
|
||||
'browse',
|
||||
'about'
|
||||
];
|
||||
// Paths that do not adhere to the actual user journey UI
|
||||
var specialJourneyPaths = [
|
||||
'browse',
|
||||
'about',
|
||||
];
|
||||
// Load persona JSON data structure
|
||||
var info = JSON.parse($('#user-persona-data').html());
|
||||
|
||||
var containerDivs = [
|
||||
'.applicationDeveloperContainer',
|
||||
'.infobarWrapper',
|
||||
'#cardWrapper',
|
||||
'#browsedocsWrapper',
|
||||
'#aboutWrapper'
|
||||
];
|
||||
|
||||
// Stateful wrapper for a regular hash. Stores parameters AND keeps them in
|
||||
// sync with the URL state.
|
||||
var urlParamHash = function() {
|
||||
var paramHash = {};
|
||||
|
||||
// Initialize internal params based on URL state
|
||||
function init() {
|
||||
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
|
||||
sURLVariables = sPageURL.split('&'),
|
||||
sParameterName,
|
||||
i;
|
||||
|
||||
paramHash = {};
|
||||
for (i = 0; i < sURLVariables.length; i++) {
|
||||
sParameterName = sURLVariables[i].split('=');
|
||||
if (sParameterName[0] != "" && sParameterName[1] != "")
|
||||
paramHash[sParameterName[0]] = sParameterName[1];
|
||||
}
|
||||
return paramHash; // for visibility
|
||||
}
|
||||
|
||||
// Update both internal params and URL state
|
||||
function set(key, value) {
|
||||
if (value == null) {
|
||||
delete paramHash[key];
|
||||
} else {
|
||||
paramHash[key] = value;
|
||||
}
|
||||
|
||||
var urlWithoutQuery = window.location.href.split('?')[0];
|
||||
var urlHash = window.location.hash;
|
||||
window.history.pushState(null,null, urlWithoutQuery + "?" + $.param(paramHash) + window.location.hash);
|
||||
return paramHash; // for visibility
|
||||
}
|
||||
|
||||
// Get value from hash based on key
|
||||
function get(key) {
|
||||
return paramHash[key];
|
||||
}
|
||||
|
||||
// Return number of elements in hash
|
||||
function numElts() {
|
||||
return Object.keys(paramHash).length;
|
||||
}
|
||||
|
||||
return {
|
||||
init: init,
|
||||
set: set,
|
||||
get: get,
|
||||
numElts: numElts,
|
||||
};
|
||||
}();
|
||||
|
||||
// Create persona buttons in "I am..." section, e.g. Application Developer
|
||||
function buildCards() {
|
||||
for (var c in info) {
|
||||
var card = document.createElement('div');
|
||||
card.className += "card_" + c;
|
||||
|
||||
for (var i in info[c]) {
|
||||
var button = document.createElement('div');
|
||||
button.className += 'buttons';
|
||||
button.setAttribute('data-button', i);
|
||||
button.innerText = info[c][i]["name"];
|
||||
card.appendChild(button);
|
||||
}
|
||||
$('.cards').append(card);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate HTML for info links
|
||||
function getInfoLinkHtml(
|
||||
i = 1 //enumeration index for link id
|
||||
, linkLabel = "Missing link label." //info link text
|
||||
, linkUrl = "/docs/home/" //link to content
|
||||
, linkIcon = "fa-ellipsis-h" //icon preceding info link text
|
||||
) {
|
||||
var html = '';
|
||||
|
||||
/*
|
||||
html template:
|
||||
<a id="infolink1" href="docs.html"><div class="whitebar" >
|
||||
<div class="infoicon">
|
||||
<i class="fa fa-ellipsis-h" aria-hidden="true" style="padding:%;float:left;color:#3399ff"></i>
|
||||
</div>
|
||||
<div id="info1" class='data'>Missing link label.</div>
|
||||
</div></a>
|
||||
|
||||
defaults:
|
||||
label: "Missing link label."
|
||||
icon: "fa-ellipsis-h"
|
||||
url: "docs.html"
|
||||
*/
|
||||
|
||||
html = '<a id="infolink'+i+'" href="'+linkUrl+'"><div class="whitebar">' +
|
||||
'<div class="infoicon">' +
|
||||
'<i class="fa '+linkIcon+'" aria-hidden="true" style="padding:%;float:left;color:#3399ff"></i>' +
|
||||
'</div>' +
|
||||
'<div id="info'+i+'" class="data">'+linkLabel+'</div>' +
|
||||
'</div></a>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// Set links in the "I want to..." section, e.g. Setup a development environment
|
||||
function setInfoData() {
|
||||
var path = urlParamHash.get("path");
|
||||
var persona = urlParamHash.get("persona");
|
||||
var level = urlParamHash.get("level");
|
||||
|
||||
// info links specific to type/button/level
|
||||
var contentArray = (typeof info[path][persona] !== 'undefined')
|
||||
? info[path][persona][level]
|
||||
: [{
|
||||
label: 'Please select a role or persona in the "I AM..." section above.',
|
||||
url: '#cardWrapper',
|
||||
icon: 'fa-exclamation'
|
||||
}];
|
||||
|
||||
//clear contents of #infobarLinks div
|
||||
$('#infobarLinks').empty();
|
||||
//process and add each info link
|
||||
for(i = 1; i <= contentArray.length; i++) {
|
||||
var content = contentArray[i-1];
|
||||
|
||||
//append link to the end of the div
|
||||
$('#infobarLinks').append(getInfoLinkHtml(i,content.label,content.url,content.icon));
|
||||
}
|
||||
$('.infobarWrapper').css('visibility', 'visible');
|
||||
}
|
||||
|
||||
// Hide persona wizard section if Browse Docs button is clicked
|
||||
function toggleSections(path){
|
||||
for (i in containerDivs) {
|
||||
if (!isSpecialJourney(path)) {
|
||||
$(containerDivs[i]).show();
|
||||
} else {
|
||||
$(containerDivs[i]).hide();
|
||||
}
|
||||
}
|
||||
|
||||
if (!isSpecialJourney(path)) {
|
||||
$('.card_' + path).show();
|
||||
// TBD: Add code to set button to default to first in path list?
|
||||
} else if (path == "browse") {
|
||||
$('#browsedocsWrapper').show();
|
||||
} else if (path == "about") {
|
||||
$('#aboutWrapper').show();
|
||||
}
|
||||
}
|
||||
|
||||
function isSpecialJourney(path) {
|
||||
return (specialJourneyPaths.indexOf(path) != -1);
|
||||
}
|
||||
|
||||
// Click handler for high-level user journey paths ("Users", "Contributors", etc)
|
||||
function handlePathClick(targetElt, fromPageload) {
|
||||
// (1) Update stored state if necessary
|
||||
var type = urlParamHash.get("path");
|
||||
if (!fromPageload) {
|
||||
for (var i in pathTypes) {
|
||||
var pathType = pathTypes[i];
|
||||
if (RegExp(pathType).test(targetElt.className)) {
|
||||
type = pathType;
|
||||
}
|
||||
}
|
||||
urlParamHash.set("path", type);
|
||||
urlParamHash.set("persona", null);
|
||||
urlParamHash.set("level", null);
|
||||
|
||||
// record Google Analytics event
|
||||
ga('send', 'event', 'user-journeys', 'click', 'path', type);
|
||||
|
||||
}
|
||||
|
||||
// (2) HTML behavior
|
||||
$('.navButton').removeClass("keepShow");
|
||||
$(targetElt).addClass("keepShow");
|
||||
$('.cards > div').hide();
|
||||
// Hide or show user journeys if "Browse Docs is selected"
|
||||
toggleSections(type);
|
||||
}
|
||||
|
||||
// Click handler + scroll for persona buttons in "I am..." section
|
||||
// NOTE: ALL persona clicks also set a level.
|
||||
function handlePersonaClick(targetElt, fromPageload, noScroll) {
|
||||
// (1) Update stored state if necessary
|
||||
if (!fromPageload) {
|
||||
var persona = targetElt.getAttribute('data-button');
|
||||
urlParamHash.set('persona', persona);
|
||||
|
||||
// record Google Analytics event
|
||||
ga('send', 'event', 'user-journeys', 'click', 'persona', persona);
|
||||
|
||||
}
|
||||
// Use default level if not specified, in order to display the proper
|
||||
// path-persona-level content
|
||||
if (urlParamHash.get('level') == null) {
|
||||
urlParamHash.set('level', defaults.level);
|
||||
}
|
||||
|
||||
// (2) HTML behavior
|
||||
$('.buttons').removeClass('selected');
|
||||
$(targetElt).addClass('selected');
|
||||
// Update header to display new persona and level
|
||||
var cardText = targetElt.innerText;
|
||||
$('#subTitle').text(cardText);
|
||||
handleLevelClick($('.level[data-name="' + urlParamHash.get('level') + '"]')[0], fromPageload);
|
||||
// Scroll to user journey content
|
||||
if (!noScroll) {
|
||||
$('html,body').animate({ scrollTop: $("#subTitle").offset().top },'slow');
|
||||
}
|
||||
}
|
||||
|
||||
function handleLevelClick(targetElt, fromPageload) {
|
||||
// (1) Update stored state if necessary
|
||||
var level = targetElt.getAttribute('data-name');
|
||||
if (!fromPageload) {
|
||||
urlParamHash.set('level', level);
|
||||
|
||||
// record Google Analytics event
|
||||
ga('send', 'event', 'user-journeys', 'click', 'level', level);
|
||||
|
||||
}
|
||||
|
||||
// (2) HTML behavior
|
||||
$('.level').removeClass('selected');
|
||||
$(targetElt).addClass('selected');
|
||||
// Data loading to display the right content
|
||||
setInfoData();
|
||||
}
|
||||
|
||||
function showPersonaDefinition(targetElt) {
|
||||
var persona = targetElt.getAttribute('data-button');
|
||||
|
||||
console.log($('.persona-def-data[data-name="' + persona + '"]')[0].innerHTML);
|
||||
$("#persona-definition").html($('.persona-def-data[data-name="' + persona + '"]')[0].innerHTML);
|
||||
$("#persona-definition").css("visibility", "visible");
|
||||
}
|
||||
|
||||
function attachCardEvents() {
|
||||
// Set up click handling for all paths ("Users", "Contributors", etc)
|
||||
$('.paths .navButton').on('click', function(e) {
|
||||
handlePathClick(e.currentTarget);
|
||||
});
|
||||
// Set up click handling for personas ("Application Developer", etc)
|
||||
$('.cards .buttons').on('click', function(e) {
|
||||
handlePersonaClick(e.currentTarget);
|
||||
});
|
||||
// Show persona definitions when hovering over card
|
||||
$('.cards .buttons').hover( function(e) {
|
||||
showPersonaDefinition(e.currentTarget);
|
||||
}, function(e) {
|
||||
$("#persona-definition").css("visibility", "hidden");
|
||||
$("#persona-definition").html(".");
|
||||
});
|
||||
// Set up click handling for levels ("Foundational", "Intermediate", etc)
|
||||
$('.level').on('click', function(e) {
|
||||
handleLevelClick(e.currentTarget);
|
||||
});
|
||||
}
|
||||
|
||||
// Set up state based on URL query parameters or defaults
|
||||
function setupCardState() {
|
||||
// Initialize stored state
|
||||
urlParamHash.init();
|
||||
var noScroll = urlParamHash.numElts() == 0;
|
||||
for (key in defaults) {
|
||||
if (!isSpecialJourney(urlParamHash.get('path')) && urlParamHash.get(key) == undefined) {
|
||||
urlParamHash.set(key, defaults[key]);
|
||||
}
|
||||
}
|
||||
// Update UI
|
||||
handlePathClick($('.paths .' + urlParamHash.get('path'))[0], true);
|
||||
if (!isSpecialJourney(urlParamHash.get('path'))) {
|
||||
setTimeout(function() {
|
||||
var elt = $('div[data-button="' + urlParamHash.get('persona') + '"]')[0];
|
||||
handlePersonaClick(elt, true, noScroll);
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
function main() {
|
||||
// Set up UI
|
||||
buildCards();
|
||||
attachCardEvents();
|
||||
// Set up and display user journey state
|
||||
setupCardState();
|
||||
}
|
||||
|
||||
// What actually executes on page load
|
||||
main();
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
$( document ).ready(function() {
|
||||
function scrollToHash(hash) {
|
||||
if (hash.length > 0) {
|
||||
$('html, body').animate({
|
||||
scrollTop: $(`#${hash}`).offset().top
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
$('#content h2').each(function(index) {
|
||||
var title = $(this).text();
|
||||
var id = $(this).attr("id");
|
||||
|
||||
// inject headers into user journeys table-of-contents (buttons)
|
||||
$("#user-journeys-toc").append(`<a href="#section-${index + 1}"><div class="docButton">${index + 1}. ${title}</div></a>`)
|
||||
|
||||
// replace content headers with styled banners
|
||||
$(this).replaceWith(`<div class="anchor" id="section-${index + 1}"></div><div class="docssectionheaders" id="${id}"><span class="numberCircle"><span><br><br>${index + 1}</span></span> ${title}</div>`)
|
||||
});
|
||||
|
||||
$('div#user-journeys-toc a').each(function() {
|
||||
$(this).click(function() {
|
||||
var target = $(this).attr("href").replace("#", "");
|
||||
scrollToHash(target);
|
||||
});
|
||||
});
|
||||
|
||||
// jump to section in URL now that anchors are created
|
||||
scrollToHash(window.location.hash.substr(1));
|
||||
});
|
||||
Reference in New Issue
Block a user