/* global window, document, $, hljs, elasticlunr, base_url, is_top_frame */ /* exported getParam, onIframeLoad */ "use strict"; // The full page consists of a main window with navigation and table of contents, and an inner // iframe containing the current article. Which article is shown is determined by the main // window's #hash portion of the URL. In fact, we use the simple rule: main window's URL of // "rootUrl#relPath" corresponds to iframe's URL of "rootUrl/relPath". // // The main frame and the contents of the index page actually live in a single generated html // file: the outer frame hides one half, and the inner hides the other. TODO: this should be // possible to greatly simplify after mkdocs-1.0 release. var mainWindow = is_top_frame ? window : (window.parent !== window ? window.parent : null); var iframeWindow = null; var rootUrl = qualifyUrl(base_url); var searchIndex = null; var showPageToc = true; var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var Keys = { ENTER: 13, ESCAPE: 27, UP: 38, DOWN: 40, }; function startsWith(str, prefix) { return str.lastIndexOf(prefix, 0) === 0; } function endsWith(str, suffix) { return str.indexOf(suffix, str.length - suffix.length) !== -1; } /** * Returns whether to use small-screen mode. Note that the same size is used in css @media block. */ function isSmallScreen() { return window.matchMedia("(max-width: 600px)").matches; } /** * Given a relative URL, returns the absolute one, relying on the browser to convert it. */ function qualifyUrl(url) { var a = document.createElement('a'); a.href = url; return a.href; } /** * Turns an absolute path to relative, stripping out rootUrl + separator. */ function getRelPath(separator, absUrl) { var prefix = rootUrl + (endsWith(rootUrl, separator) ? '' : separator); return startsWith(absUrl, prefix) ? absUrl.slice(prefix.length) : null; } /** * Turns a relative path to absolute, adding a prefix of rootUrl + separator. */ function getAbsUrl(separator, relPath) { var sep = endsWith(rootUrl, separator) ? '' : separator; return relPath === null ? null : rootUrl + sep + relPath; } /** * Redirects the iframe to reflect the path represented by the main window's current URL. * (In our design, nothing should change iframe's src except via updateIframe(), or back/forward * history is likely to get messed up.) */ function updateIframe(enableForwardNav) { // Grey out the "forward" button if we don't expect 'forward' to work. $('#hist-fwd').toggleClass('greybtn', !enableForwardNav); var targetRelPath = getRelPath('#', mainWindow.location.href) || ''; var targetIframeUrl = getAbsUrl('/', targetRelPath); var loc = iframeWindow.location; var currentIframeUrl = _safeGetLocationHref(loc); console.log("updateIframe: %s -> %s (%s)", currentIframeUrl, targetIframeUrl, currentIframeUrl === targetIframeUrl ? "same" : "replacing"); if (currentIframeUrl !== targetIframeUrl) { loc.replace(targetIframeUrl); onIframeBeforeLoad(targetIframeUrl); } document.body.scrollTop = 0; } /** * Returns location.href, catching exception that's triggered if the iframe is on a different domain. */ function _safeGetLocationHref(location) { try { return location.href; } catch (e) { return null; } } /** * Returns the value of the given parameter in the URL's query portion. */ function getParam(key) { var params = window.location.search.substring(1).split('&'); for (var i = 0; i < params.length; i++) { var param = params[i].split('='); if (param[0] === key) { return decodeURIComponent(param[1].replace(/\+/g, '%20')); } } } /** * Update the state of the button toggling table-of-contents. TOC has different behavior * depending on screen size, so the button's behavior depends on that too. */ function updateTocButtonState() { var shown; if (isSmallScreen()) { shown = $('.wm-toc-pane').hasClass('wm-toc-dropdown'); } else { shown = !$('#main-content').hasClass('wm-toc-hidden'); } $('#wm-toc-button').toggleClass('active', shown); } /** * Update the height of the iframe container. On small screens, we adjust it to fit the iframe * contents, so that the page scrolls as a whole rather than inside the iframe. */ function updateContentHeight() { if (isSmallScreen()) { $('.wm-content-pane').height(iframeWindow.document.body.offsetHeight + 20); $('.wm-article').attr('scrolling', 'no'); } else { $('.wm-content-pane').height(''); $('.wm-article').attr('scrolling', 'auto'); } } /** * When TOC is a dropdown (on small screens), close it. */ function closeTempItems() { $('.wm-toc-dropdown').removeClass('wm-toc-dropdown'); $('#mkdocs-search-query').closest('.wm-top-tool').removeClass('wm-top-tool-expanded'); updateTocButtonState(); } /** * Visit the given URL. This changes the hash of the top page to reflect the new URL's relative * path, and points the iframe to the new URL. */ function visitUrl(url, event) { var relPath = getRelPath('/', url); if (relPath !== null) { event.preventDefault(); var newUrl = getAbsUrl('#', relPath); if (newUrl !== mainWindow.location.href) { mainWindow.history.pushState(null, '', newUrl); updateIframe(false); } closeTempItems(); iframeWindow.focus(); } } /** * Adjusts link to point to a top page, converting URL from "base/path" to "base#path". It also * sets a data-adjusted attribute on the link, to skip adjustments on future clicks. */ function adjustLink(linkEl) { if (!linkEl.hasAttribute('data-wm-adjusted')) { linkEl.setAttribute('data-wm-adjusted', 'done'); var relPath = getRelPath('/', linkEl.href); if (relPath !== null) { var newUrl = getAbsUrl('#', relPath); linkEl.href = newUrl; } } } /** * Given a URL, strips query and fragment, returning just the path. */ function cleanUrlPath(relUrl) { return relUrl.replace(/[#?].*/, ''); } /** * Initialize the main window. */ function initMainWindow() { // wm-toc-button either opens the table of contents in the side-pane, or (on smaller screens) // shows the side-pane as a drop-down. $('#wm-toc-button').on('click', function(e) { if (isSmallScreen()) { $('.wm-toc-pane').toggleClass('wm-toc-dropdown'); $('#wm-main-content').removeClass('wm-toc-hidden'); } else { $('#main-content').toggleClass('wm-toc-hidden'); closeTempItems(); } updateTocButtonState(); }); // Update the state of the wm-toc-button updateTocButtonState(); $(window).on('resize', function() { updateTocButtonState(); updateContentHeight(); }); // Connect up the Back and Forward buttons (if present). $('#hist-back').on('click', function(e) { window.history.back(); }); $('#hist-fwd').on('click', function(e) { window.history.forward(); }); // When the side-pane is a dropdown, hide it on click-away. $(window).on('blur', closeTempItems); // When we click on an opener in the table of contents, open it. $('.wm-toc-pane').on('click', '.wm-toc-opener', function(e) { $(this).toggleClass('wm-toc-open'); $(this).next('.wm-toc-li-nested').collapse('toggle'); }); $('.wm-toc-pane').on('click', '.wm-page-toc-opener', function(e) { // Ignore clicks while transitioning. if ($(this).next('.wm-page-toc').hasClass('collapsing')) { return; } showPageToc = !showPageToc; $(this).toggleClass('wm-page-toc-open', showPageToc); $(this).next('.wm-page-toc').collapse(showPageToc ? 'show' : 'hide'); }); // Once the article loads in the side-pane, close the dropdown. $('.wm-article').on('load', function() { document.title = iframeWindow.document.title; updateContentHeight(); // We want to update content height whenever the height of the iframe's content changes. // Using MutationObserver seems to be the best way to do that. var observer = new MutationObserver(updateContentHeight); observer.observe(iframeWindow.document.body, { attributes: true, childList: true, characterData: true, subtree: true }); iframeWindow.focus(); }); // Initialize search functionality. initSearch(); // Load the iframe now, and whenever we navigate the top frame. setTimeout(function() { updateIframe(false); }, 0); // For our usage, 'popstate' or 'hashchange' would work, but only 'hashchange' work on IE. $(window).on('hashchange', function() { updateIframe(true); }); } function onIframeBeforeLoad(url) { $('.wm-current').removeClass('wm-current'); closeTempItems(); var tocLi = getTocLi(url); tocLi.addClass('wm-current'); tocLi.parents('.wm-toc-li-nested') // It's better to open parent items immediately without a transition. .removeClass('collapsing').addClass('collapse in').height('') .prev('.wm-toc-opener').addClass('wm-toc-open'); } function getTocLi(url) { var relPath = getAbsUrl('#', getRelPath('/', cleanUrlPath(url))); var selector = '.wm-article-link[href="' + relPath + '"]'; return $(selector).closest('.wm-toc-li'); } var _deferIframeLoad = false; // Sometimes iframe is loaded before main window's ready callback. In this case, we defer // onIframeLoad call until the main window has initialized. function ensureIframeLoaded() { if (_deferIframeLoad) { onIframeLoad(); } } function onIframeLoad() { if (!iframeWindow) { _deferIframeLoad = true; return; } var url = iframeWindow.location.href; onIframeBeforeLoad(url); if (iframeWindow.pageToc) { var relPath = getAbsUrl('#', getRelPath('/', cleanUrlPath(url))); renderPageToc(getTocLi(url), relPath, iframeWindow.pageToc); } iframeWindow.focus(); } /** * Hides a bootstrap collapsible element, and removes it from DOM once hidden. */ function collapseAndRemove(collapsibleElem) { if (!collapsibleElem.hasClass('in')) { // If the element is already hidden, just remove it immediately. collapsibleElem.remove(); } else { collapsibleElem.on('hidden.bs.collapse', function() { collapsibleElem.remove(); }) .collapse('hide'); } } function renderPageToc(parentElem, pageUrl, pageToc) { var ul = $('