User:Polymeric/global.js

window.syntaxHighlighterConfig = { timeout: 150, };

importArticles({   type: 'script',    articles: [        'u:dev:MediaWiki:LastEdited/code.js',        "u:dev:MediaWiki:NewImages.js",        'u:dev:MediaWiki:CategoryQuickRemove.js',        'u:dev:MediaWiki:ContribsLink/code.js',        'u:dev:MediaWiki:AnalyticsShortcut.js',        'u:dev:MediaWiki:SyntaxHighlight.js'    ] });

/* * * @module       ReadProgressBar.js * @description   Adds a progress bar below the Global Navigation Bar that shows how much the user has progressed through a blog post. * @author       Polymeric * @license      CC-BY-SA 3.0 * */

(function { if (window.progressBarLoaded) {    return;  }  window.progressBarLoaded = true;

// To avoid using 3D CSS or DOM manipulation to get the progress bar behind the // navbar, we create a pseudo-element for .fandom-sticky-header that will be in // front (with z-index) of the progress bar. It will use the same background // color as the navbar in order to visually hide it. var progressBarCss = document.createElement('style'); var progressBarCssContent = ':root {\n --progress-bar-color: var(--theme-accent-color--hover, #997600);\n  --progress-bar-height: 4px;\n}\n\n.fandom-sticky-header::after {\n  background-color: var(--theme-sticky-nav-background-color);\n  bottom: 0;\n  content: "";\n  display: block;\n  height: var(--progress-bar-width, 4px);\n  left: 0;\n  max-height: 8px;\n  pointer-events: none;\n  position: absolute;\n  width: 100%;\n  z-index: 1;\n}\n\n.article-progress-bar__indicator {\n  background-color: var(--progress-bar-color);\n  bottom: 0;\n  height: var(--progress-bar-height, 4px);\n  left: 0;\n  max-height: 8px;\n  position: absolute;\n  transform: translateY(var(--progress-bar-height, 4px));\n  transition: transform 250ms cubic-bezier(0.0, 0.0, 0.2, 1);\n  width: 0%;\n  z-index: 1;\n}\n\n.article-progress-bar__indicator.hide {\n  transform: translateY(0);\n  transition: transform 200ms cubic-bezier(0.4, 0.0, 1, 1);\n}'; var navBar = document.querySelector('.fandom-sticky-header'); var articleWrapper = document.querySelector('.page-content'); var progressBar = document.createElement('div');

progressBarCss.classList.add('progress-bar-css'); progressBarCss.textContent = progressBarCssContent; document.head.appendChild(progressBarCss); progressBar.classList.add('article-progress-bar__indicator'); progessBar = document.querySelector('.article-progress-bar__indicator'); navBar.appendChild(progressBar);

function articleHeight { return articleWrapper.clientHeight; }

function scrolledProgressBar(e) { var percentage = window.pageYOffset / articleHeight * 100; progressBar.style.width = percentage + '%', percentage >= 100 ? hideProgressBar : showProgressBar; }

function hideProgressBar { progressBar.classList.add('hide'); }

function showProgressBar { progressBar.classList.remove('hide'); }

['scroll', 'resize'].forEach(function(event) {   window.addEventListener(event, function { scrolledProgressBar }, false); }); });