Files
website/static/js/script.js
T
Qiming Teng 162e5edb39 Clean up shared assets for API reference
This PR promotes the CSS, JS and FONTS files used by API reference to
the `static/css`, `static/js` and `static/fonts` directories
respectively. The intent is that for future releases, when generating
API reference docs, only the `index.html` and `navData.js` files need to
be copied from the generator tools.

Details of changes:

- `jquery-3.2.1.min.js` file is replaced by `jquery-3.3.1.min.js` to
  align with the version used by Docsy. We can investigate in the future
  whether this can be shared. Converging to the same version at least
  can reduce the risks of compatibility.
- `jquery.scrollTo.min.js` moved to `static/js` file and renamed to
  `jquery.scrollTo-2.1.2.min.js` so we know the version from file name.
- `scroll.js` moved to `static/js` and renamed to `scroll-apiref.js` to
  siginify that it is used by API reference.
- A `README.md` file is added to `static/js` directory for describing
  the purposes of the these files.
- `bootstrap.min.css` moved to `static/css` and renamed to
  `bootstrap-4.3.1.min.css` so that it can be shared and its version can
  be easily discovered.
- `font-awesome.min.css` moved to `static/css` and renamed to
  `fontawesome-4.7.0.min.css` for the same reason.
- `stylesheet.css` moved to `static/css` and renamed to
  `style_apiref.css` to siginify its purpose.
- A `README.md` file is added to `static/css` directory for describing
  the purposes of the these files.
- FontAwesome fonts files moved to `static/fonts` so that they can be
  shared across API reference versions.
- Current API reference (1.18) is modified to reference the relocated
  files. Upstream generator change on the way
  (kubernetes-sigs/reference-tools/#161).

Related: #22016, #22023, #22041, #22024, #22064
2020-07-05 13:43:03 +08:00

533 lines
15 KiB
JavaScript

function addAnchorTags() {
anchors.options = {
visible: 'touch'
}
anchors.add('#docsContent h2, #docsContent h3, #docsContent h4, #docsContent h5, #docsContent h6');
}
//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) {
swal("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) swal("Copied to clipboard: ",elem);
return succeed;
} else {
swal("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() {
if (!quickstartButton[0]) {
return;
}
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() {
addAnchorTags();
// If vendor strip doesn't exist add className
if ( !$('#vendorStrip').length > 0 ) {
$('.header-hero').addClass('bot-bar');
}
// If is not homepage add class to hero section
if (!$('.td-home').length > 0 ) {
$('.header-hero').addClass('no-sub');
}
});