|
| 1 | +(function () { |
| 2 | + // Functions |
| 3 | + // ========================================================================= |
| 4 | + /** |
| 5 | + * Adds event listeners to change active stylesheet and restore previously |
| 6 | + * activated stylesheet on reload. |
| 7 | + * |
| 8 | + * @example |
| 9 | + * |
| 10 | + * This link: |
| 11 | + * <a href="#" data-link-title="Foo">Foo</a> |
| 12 | + * Will active this existing link: |
| 13 | + * <link rel="stylesheet alternate" title="Foo" href="..." > |
| 14 | + * |
| 15 | + * @example |
| 16 | + * |
| 17 | + * This link: |
| 18 | + * <a href="#" data-link-href="path/to/file.css">Bar</a> |
| 19 | + * Will activate this existing link: |
| 20 | + * <link rel="stylesheet alternate" title="[someID]" href="path/to/file.css" > |
| 21 | + * Or generate this active link: |
| 22 | + * <link rel="stylesheet" title="Bar" href="path/to/file.css" > |
| 23 | + */ |
| 24 | + |
| 25 | + function imgAdd2() { |
| 26 | + var imgs = document.querySelectorAll('.content img'); |
| 27 | + // var imgs = document.getElementsByTagName('medium-zoom-image'); |
| 28 | + for (let j = 0; j < imgs.length; j++) { |
| 29 | + // console.log('zheshi') |
| 30 | + let img = imgs[j]; |
| 31 | + // console.log(img); |
| 32 | + if (img.src) { |
| 33 | + console.log(img.src); |
| 34 | + if (!img.getAttribute('hadassets')) { |
| 35 | + let hasharr = window.location.hash.split('/'); |
| 36 | + // console.log(hasharr); |
| 37 | + let origin = window.location.origin; |
| 38 | + img.setAttribute('hadassets', 1); |
| 39 | + var hasharrPath = ""; |
| 40 | + for(var i = 1; i < hasharr.length - 1 ; i++){ |
| 41 | + hasharrPath += hasharr[i] + "/"; |
| 42 | + } |
| 43 | + img.src = origin + '/' + hasharrPath + img.src.substring(origin.length + 1); |
| 44 | + // img.src = origin + '/' + hasharrPath + img.src; |
| 45 | + } |
| 46 | + } |
| 47 | + } |
| 48 | + } |
| 49 | + |
| 50 | + function imgAdd() { |
| 51 | + var imgs = document.querySelectorAll('.markdown-section img'); |
| 52 | + // var imgs = document.getElementsByTagName('medium-zoom-image'); |
| 53 | + |
| 54 | + for (let j = 0; j < imgs.length; j++) { |
| 55 | + // console.log('zheshi') |
| 56 | + let img = imgs[j]; |
| 57 | + // console.log(img); |
| 58 | + if (img.src) { |
| 59 | + console.log(img.src); |
| 60 | + if (!img.getAttribute('hadassets')) { |
| 61 | + let hasharr = window.location.hash.split('/'); |
| 62 | + // console.log(hasharr); |
| 63 | + let origin = window.location.origin; |
| 64 | + img.setAttribute('hadassets', 1); |
| 65 | + var hasharrPath = ""; |
| 66 | + for(var i = 1; i < hasharr.length - 1 ; i++){ |
| 67 | + hasharrPath += hasharr[i] + "/"; |
| 68 | + } |
| 69 | + |
| 70 | + // img.src = origin + '/' + hasharrPath + img.src.substring(origin.length + 1); |
| 71 | + var imgSrc = img.getAttribute("src"); |
| 72 | + if(!imgSrc.includes(hasharrPath)){ |
| 73 | + img.setAttribute("src", hasharrPath + imgSrc); |
| 74 | + } |
| 75 | + // img.src = origin + '/' + hasharrPath + img.getAttribute("src"); |
| 76 | + } |
| 77 | + } |
| 78 | + } |
| 79 | + } |
| 80 | + function initStyleSwitcher() { |
| 81 | + var isInitialzed = false; |
| 82 | + var sessionStorageKey = 'activeStylesheetHref'; |
| 83 | + |
| 84 | + function handleSwitch(activeHref, activeTitle) { |
| 85 | + var activeElm = document.querySelector('link[href*="' + activeHref + '"],link[title="' + activeTitle + '"]'); |
| 86 | + |
| 87 | + if (!activeElm && activeHref) { |
| 88 | + activeElm = document.createElement('link'); |
| 89 | + activeElm.setAttribute('href', activeHref); |
| 90 | + activeElm.setAttribute('rel', 'stylesheet'); |
| 91 | + activeElm.setAttribute('title', activeTitle); |
| 92 | + |
| 93 | + document.head.appendChild(activeElm); |
| 94 | + |
| 95 | + activeElm.addEventListener('load', function linkOnLoad() { |
| 96 | + activeElm.removeEventListener('load', linkOnLoad); |
| 97 | + setActiveLink(activeElm); |
| 98 | + }); |
| 99 | + } |
| 100 | + else if (activeElm) { |
| 101 | + setActiveLink(activeElm); |
| 102 | + } |
| 103 | + } |
| 104 | + |
| 105 | + function setActiveLink(activeElm) { |
| 106 | + var activeHref = activeElm.getAttribute('href'); |
| 107 | + var activeTitle = activeElm.getAttribute('title'); |
| 108 | + var inactiveElms = document.querySelectorAll('link[title]:not([href*="' + activeHref + '"]):not([title="' + activeTitle + '"])'); |
| 109 | + |
| 110 | + // Remove "alternate" keyword |
| 111 | + activeElm.setAttribute('rel', (activeElm.rel || '').replace(/\s*alternate/g, '').trim()); |
| 112 | + |
| 113 | + // Force enable stylesheet (required for some browsers) |
| 114 | + activeElm.disabled = true; |
| 115 | + activeElm.disabled = false; |
| 116 | + |
| 117 | + // Store active style sheet |
| 118 | + sessionStorage.setItem(sessionStorageKey, activeHref); |
| 119 | + |
| 120 | + // Disable other elms |
| 121 | + for (var i = 0; i < inactiveElms.length; i++) { |
| 122 | + var elm = inactiveElms[i]; |
| 123 | + |
| 124 | + elm.disabled = true; |
| 125 | + |
| 126 | + // Fix for browsersync and alternate stylesheet updates. Will |
| 127 | + // cause FOUC when switching stylesheets during development, but |
| 128 | + // required to properly apply style updates when alternate |
| 129 | + // stylesheets are enabled. |
| 130 | + if (window.browsersyncObserver) { |
| 131 | + var linkRel = elm.getAttribute('rel') || ''; |
| 132 | + var linkRelAlt = linkRel.indexOf('alternate') > -1 ? linkRel : (linkRel + ' alternate').trim(); |
| 133 | + |
| 134 | + elm.setAttribute('rel', linkRelAlt); |
| 135 | + } |
| 136 | + } |
| 137 | + |
| 138 | + // CSS custom property ponyfil |
| 139 | + if ((window.$docsify || {}).themeable) { |
| 140 | + window.$docsify.themeable.util.cssVars(); |
| 141 | + } |
| 142 | + } |
| 143 | + |
| 144 | + // Event listeners |
| 145 | + if (!isInitialzed) { |
| 146 | + isInitialzed = true; |
| 147 | + // Restore active stylesheet |
| 148 | + document.addEventListener('DOMContentLoaded', function () { |
| 149 | + setTimeout(function () { |
| 150 | + imgAdd(); |
| 151 | + }, 300) |
| 152 | + var activeHref = sessionStorage.getItem(sessionStorageKey); |
| 153 | + |
| 154 | + if (activeHref) { |
| 155 | + handleSwitch(activeHref); |
| 156 | + } |
| 157 | + |
| 158 | + |
| 159 | + // document.querySelector(".markdown-section").click(); |
| 160 | + |
| 161 | + |
| 162 | + }); |
| 163 | + |
| 164 | + // Update active stylesheet |
| 165 | + document.addEventListener('click', function (evt) { |
| 166 | + var dataHref = evt.target.getAttribute('data-link-href'); |
| 167 | + var dataTitle = evt.target.getAttribute('data-link-title') |
| 168 | + |
| 169 | + if (dataHref || dataTitle) { |
| 170 | + dataTitle = dataTitle |
| 171 | + || evt.target.textContent |
| 172 | + || '_' + Math.random().toString(36).substr(2, 9); // UID |
| 173 | + |
| 174 | + handleSwitch(dataHref, dataTitle); |
| 175 | + evt.preventDefault(); |
| 176 | + } |
| 177 | + setTimeout(function () { |
| 178 | + imgAdd(); |
| 179 | + }, 300) |
| 180 | + }); |
| 181 | + } |
| 182 | + } |
| 183 | + |
| 184 | + // Main |
| 185 | + // ========================================================================= |
| 186 | + initStyleSwitcher(); |
| 187 | +})(); |
0 commit comments