remove jquery all together
This commit is contained in:
Aaron Qian
parent
b0f5b0b059
commit
8580a1f463
61 changed files with 4113 additions and 684 deletions
|
|
@ -1,30 +1,30 @@
|
|||
import { enable, disable, auto, setFetchMethod } from 'darkreader';
|
||||
import * as params from "@params";
|
||||
import { enable, disable, auto, setFetchMethod } from 'darkreader'
|
||||
import * as params from '@params'
|
||||
|
||||
const darkreader = params?.darkmode?.darkreader || {};
|
||||
const defaultColorScheme = darkreader.defaultColorScheme || 'system';
|
||||
const darkreader = params?.darkmode?.darkreader || {}
|
||||
const defaultColorScheme = darkreader.defaultColorScheme || 'system'
|
||||
const theme = {
|
||||
brightness: 100,
|
||||
contrast: 100,
|
||||
sepia: 0,
|
||||
...(darkreader.theme || {}),
|
||||
};
|
||||
...(darkreader.theme || {})
|
||||
}
|
||||
const fixes = {
|
||||
invert: ['img[src$=".svg"]'],
|
||||
...(darkreader.fixes || {}),
|
||||
};
|
||||
setFetchMethod(window.fetch);
|
||||
...(darkreader.fixes || {})
|
||||
}
|
||||
setFetchMethod(window.fetch)
|
||||
|
||||
export function setSchemeDark() {
|
||||
enable(theme, fixes);
|
||||
export function setSchemeDark () {
|
||||
enable(theme, fixes)
|
||||
}
|
||||
|
||||
export function setSchemeLight() {
|
||||
disable();
|
||||
export function setSchemeLight () {
|
||||
disable()
|
||||
}
|
||||
|
||||
export function setSchemeSystem() {
|
||||
auto(theme, fixes);
|
||||
export function setSchemeSystem () {
|
||||
auto(theme, fixes)
|
||||
}
|
||||
|
||||
export { defaultColorScheme };
|
||||
export { defaultColorScheme }
|
||||
|
|
|
|||
|
|
@ -1,60 +1,60 @@
|
|||
const PERSISTENCE_KEY = 'darkmode:color-scheme';
|
||||
const PERSISTENCE_KEY = 'darkmode:color-scheme'
|
||||
|
||||
async function getService() {
|
||||
if(process.env.FEATURE_DARKMODE_DARKREADER === '1') {
|
||||
return await import('./darkreader');
|
||||
async function getService () {
|
||||
if (process.env.FEATURE_DARKMODE_DARKREADER === '1') {
|
||||
return await import('./darkreader')
|
||||
}
|
||||
|
||||
throw Error(' No service defined for feature markMode.');
|
||||
throw Error(' No service defined for feature darkMode.')
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', async () => {
|
||||
const $menu = document.getElementById('themeMenu');
|
||||
const $icon = document.getElementById('navbar-theme-icon-svg');
|
||||
if ($menu == null || $icon == null) return;
|
||||
const menu = document.getElementById('themeMenu')
|
||||
const $icon = document.getElementById('navbar-theme-icon-svg')
|
||||
if (menu == null || $icon == null) return
|
||||
|
||||
const $btns = $menu.getElementsByTagName('a');
|
||||
const iconMap = Array.from($btns).reduce((map, $btn) => {
|
||||
$img = $btn.getElementsByTagName('img')[0];
|
||||
map[$btn.dataset.scheme] = $img.src;
|
||||
return map;
|
||||
}, {});
|
||||
const btns = menu.getElementsByTagName('a')
|
||||
const iconMap = Array.from(btns).reduce((map, btn) => {
|
||||
const $img = btn.getElementsByTagName('img')[0]
|
||||
map[btn.dataset.scheme] = $img.src
|
||||
return map
|
||||
}, {})
|
||||
|
||||
const {
|
||||
setSchemeDark,
|
||||
setSchemeLight,
|
||||
setSchemeSystem,
|
||||
defaultColorScheme,
|
||||
} = await getService();
|
||||
defaultColorScheme
|
||||
} = await getService()
|
||||
|
||||
function loadScheme() {
|
||||
return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme;
|
||||
function loadScheme () {
|
||||
return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme
|
||||
}
|
||||
|
||||
function saveScheme(scheme) {
|
||||
localStorage.setItem(PERSISTENCE_KEY, scheme);
|
||||
|
||||
function saveScheme (scheme) {
|
||||
localStorage.setItem(PERSISTENCE_KEY, scheme)
|
||||
}
|
||||
|
||||
function setScheme(newScheme) {
|
||||
$icon.src = iconMap[newScheme];
|
||||
|
||||
function setScheme (newScheme) {
|
||||
$icon.src = iconMap[newScheme]
|
||||
|
||||
if (newScheme === 'dark') {
|
||||
setSchemeDark();
|
||||
setSchemeDark()
|
||||
} else if (newScheme === 'system') {
|
||||
setSchemeSystem();
|
||||
setSchemeSystem()
|
||||
} else {
|
||||
setSchemeLight();
|
||||
setSchemeLight()
|
||||
}
|
||||
|
||||
saveScheme(newScheme);
|
||||
|
||||
saveScheme(newScheme)
|
||||
}
|
||||
|
||||
setScheme(loadScheme());
|
||||
setScheme(loadScheme())
|
||||
|
||||
Array.from($menu.getElementsByTagName('a')).forEach(($btn) => {
|
||||
$btn.addEventListener('click', () => {
|
||||
const { scheme } = $btn.dataset;
|
||||
setScheme(scheme);
|
||||
});
|
||||
});
|
||||
});
|
||||
Array.from(menu.getElementsByTagName('a')).forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const { scheme } = btn.dataset
|
||||
setScheme(scheme)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,171 +1,165 @@
|
|||
import { insertScript } from '../../core';
|
||||
import { insertScript } from '../../core'
|
||||
|
||||
const PDFJS_BUNDLE = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.0.279/build/pdf.min.js";
|
||||
const WORKER_BUNDLE = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.0.279/build/pdf.worker.min.js";
|
||||
const PDFJS_BUNDLE = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.0.279/build/pdf.min.js'
|
||||
const WORKER_BUNDLE = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.0.279/build/pdf.worker.min.js'
|
||||
|
||||
class PDFViewer {
|
||||
constructor(el) {
|
||||
constructor (el) {
|
||||
const {
|
||||
url,
|
||||
hidePaginator,
|
||||
hideLoader,
|
||||
scale,
|
||||
pageNum
|
||||
} = el.dataset;
|
||||
} = el.dataset
|
||||
|
||||
if(url == null) {
|
||||
throw new Error('Cannot load PDF! Attribute `data-url` is not set.');
|
||||
if (url == null) {
|
||||
throw new Error('Cannot load PDF! Attribute `data-url` is not set.')
|
||||
}
|
||||
|
||||
// props
|
||||
this.url = url;
|
||||
this.hidePaginator = hidePaginator !== 'false';
|
||||
this.hideLoader = hideLoader !== 'false';
|
||||
this.scale = scale || 3;
|
||||
this.url = url
|
||||
this.hidePaginator = hidePaginator !== 'false'
|
||||
this.hideLoader = hideLoader !== 'false'
|
||||
this.scale = scale || 3
|
||||
|
||||
// initial state
|
||||
this.pageNum = parseInt(pageNum ,10) || 1;
|
||||
this.loaded = false;
|
||||
this.pageRendering = false;
|
||||
this.pageNumPending = null;
|
||||
this.pageNum = parseInt(pageNum, 10) || 1
|
||||
this.loaded = false
|
||||
this.pageRendering = false
|
||||
this.pageNumPending = null
|
||||
|
||||
// DOM elements
|
||||
this.$canvas = el.getElementsByClassName('pdf-canvas')[0];
|
||||
if(this.$canvas == null) {
|
||||
throw new Error('canvas element not found!');
|
||||
this.canvas = el.getElementsByClassName('pdf-canvas')[0]
|
||||
if (this.canvas == null) {
|
||||
throw new Error('canvas element not found!')
|
||||
};
|
||||
this.$paginator = el.getElementsByClassName("paginator")[0];
|
||||
this.$loadingWrapper = el.getElementsByClassName('loading-wrapper')[0];
|
||||
this.$next = el.getElementsByClassName('next')[0];
|
||||
this.$prev = el.getElementsByClassName('prev')[0];
|
||||
this.$pageNum = el.getElementsByClassName('page-num')[0];
|
||||
this.$pageCount = el.getElementsByClassName('page-count')[0];
|
||||
this.paginator = el.getElementsByClassName('paginator')[0]
|
||||
this.loadingWrapper = el.getElementsByClassName('loading-wrapper')[0]
|
||||
this.next = el.getElementsByClassName('next')[0]
|
||||
this.prev = el.getElementsByClassName('prev')[0]
|
||||
this.pageNum = el.getElementsByClassName('page-num')[0]
|
||||
this.pageCount = el.getElementsByClassName('page-count')[0]
|
||||
|
||||
// context
|
||||
this.ctx = this.$canvas.getContext('2d');
|
||||
this.ctx = this.canvas.getContext('2d')
|
||||
|
||||
// events
|
||||
this.$next.addEventListener('click', this.handleNextPage.bind(this));
|
||||
this.$prev.addEventListener('click', this.handlePrevPage.bind(this));
|
||||
this.next.addEventListener('click', this.handleNextPage.bind(this))
|
||||
this.prev.addEventListener('click', this.handlePrevPage.bind(this))
|
||||
|
||||
this.showPaginator();
|
||||
this.showLoader();
|
||||
this.loadPDF();
|
||||
this.showPaginator()
|
||||
this.showLoader()
|
||||
this.loadPDF()
|
||||
}
|
||||
|
||||
/**
|
||||
* If we haven't disabled the loader, show loader and hide canvas
|
||||
*/
|
||||
showLoader() {
|
||||
if(this.hideLoader) return;
|
||||
this.$loadingWrapper.style.display = 'flex';
|
||||
this.$canvas.style.display = 'none';
|
||||
showLoader () {
|
||||
if (this.hideLoader) return
|
||||
this.loadingWrapper.style.display = 'flex'
|
||||
this.canvas.style.display = 'none'
|
||||
}
|
||||
|
||||
/**
|
||||
* If we haven't disabled the paginator, show paginator
|
||||
*/
|
||||
showPaginator() {
|
||||
if(this.hidePaginator) return;
|
||||
this.$paginator.style.display = 'block';
|
||||
showPaginator () {
|
||||
if (this.hidePaginator) return
|
||||
this.paginator.style.display = 'block'
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides loader and shows canvas
|
||||
*/
|
||||
showContent() {
|
||||
this.$loadingWrapper.style.display = 'none';
|
||||
this.$canvas.style.display = 'block';
|
||||
showContent () {
|
||||
this.loadingWrapper.style.display = 'none'
|
||||
this.canvas.style.display = 'block'
|
||||
}
|
||||
|
||||
/**
|
||||
* Asynchronously downloads PDF.
|
||||
*/
|
||||
async loadPDF() {
|
||||
this.pdfDoc = await window.pdfjsLib.getDocument(this.url).promise;
|
||||
async loadPDF () {
|
||||
this.pdfDoc = await window.pdfjsLib.getDocument(this.url).promise
|
||||
|
||||
this.$pageCount.textContent = this.pdfDoc.numPages;
|
||||
this.pageCount.textContent = this.pdfDoc.numPages
|
||||
|
||||
// If the user passed in a number that is out of range, render the last page.
|
||||
if(this.pageNum > this.pdfDoc.numPages) {
|
||||
if (this.pageNum > this.pdfDoc.numPages) {
|
||||
this.pageNum = this.pdfDoc.numPages
|
||||
}
|
||||
|
||||
this.renderPage(this.pageNum);
|
||||
this.renderPage(this.pageNum)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get page info from document, resize canvas accordingly, and render page.
|
||||
* @param num Page number.
|
||||
*/
|
||||
async renderPage(num) {
|
||||
this.pageRendering = true;
|
||||
async renderPage (num) {
|
||||
this.pageRendering = true
|
||||
|
||||
const page = await this.pdfDoc.getPage(num)
|
||||
const viewport = page.getViewport({ scale: this.scale })
|
||||
this.canvas.height = viewport.height
|
||||
this.canvas.width = viewport.width
|
||||
|
||||
const page = await this.pdfDoc.getPage(num);
|
||||
const viewport = page.getViewport({ scale: this.scale });
|
||||
this.$canvas.height = viewport.height;
|
||||
this.$canvas.width = viewport.width;
|
||||
|
||||
// Wait for rendering to finish
|
||||
await page.render({
|
||||
canvasContext: this.ctx,
|
||||
viewport,
|
||||
}).promise;
|
||||
viewport
|
||||
}).promise
|
||||
|
||||
this.pageRendering = false;
|
||||
this.showContent();
|
||||
this.pageRendering = false
|
||||
this.showContent()
|
||||
|
||||
if (this.pageNumPending !== null) {
|
||||
// New page rendering is pending
|
||||
this.renderPage(this.pageNumPending);
|
||||
this.pageNumPending = null;
|
||||
this.renderPage(this.pageNumPending)
|
||||
this.pageNumPending = null
|
||||
}
|
||||
// Update page counters
|
||||
this.$pageNum.textContent = num;
|
||||
this.pageNum.textContent = num
|
||||
}
|
||||
|
||||
/**
|
||||
* If another page rendering in progress, waits until the rendering is
|
||||
* finished. Otherwise, executes rendering immediately.
|
||||
*/
|
||||
queueRenderPage(num) {
|
||||
queueRenderPage (num) {
|
||||
if (this.pageRendering) {
|
||||
this.pageNumPending = num;
|
||||
this.pageNumPending = num
|
||||
} else {
|
||||
this.renderPage(num);
|
||||
this.renderPage(num)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays previous page.
|
||||
*/
|
||||
handlePrevPage() {
|
||||
handlePrevPage () {
|
||||
if (this.pageNum <= 1) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
this.pageNum--;
|
||||
this.queueRenderPage(this.pageNum);
|
||||
this.pageNum--
|
||||
this.queueRenderPage(this.pageNum)
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays next page.
|
||||
*/
|
||||
handleNextPage() {
|
||||
handleNextPage () {
|
||||
if (this.pageNum >= this.pdfDoc.numPages) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
this.pageNum++;
|
||||
this.queueRenderPage(this.pageNum);
|
||||
this.pageNum++
|
||||
this.queueRenderPage(this.pageNum)
|
||||
}
|
||||
}
|
||||
|
||||
insertScript('pdfjs', PDFJS_BUNDLE, () => {
|
||||
window.pdfjsLib.GlobalWorkerOptions.workerSrc = WORKER_BUNDLE;
|
||||
|
||||
Array.from(document.getElementsByClassName('pdf-viewer')).forEach(el => {
|
||||
console.log(el);
|
||||
new PDFViewer(el);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
window.pdfjsLib.GlobalWorkerOptions.workerSrc = WORKER_BUNDLE
|
||||
Array.from(document.getElementsByClassName('pdf-viewer')).forEach(el => new PDFViewer(el))
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
if (process.env.FEATURE_FLOWCHART_MERMAID === '1') {
|
||||
import('./mermaid');
|
||||
if (process.env.FEATURE_FLOWCHART_MERMAID === '1') {
|
||||
import('./mermaid')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import mermaid from 'mermaid';
|
||||
import * as params from '@params';
|
||||
import mermaid from 'mermaid'
|
||||
import * as params from '@params'
|
||||
|
||||
const mermaidOptions = params.flowchart?.mermaid || {};
|
||||
const options = Object.assign({}, mermaidOptions, { startOnLoad: true });
|
||||
const mermaidOptions = params.flowchart?.mermaid || {}
|
||||
const options = Object.assign({}, mermaidOptions, { startOnLoad: true })
|
||||
|
||||
mermaid.initialize(options);
|
||||
mermaid.initialize(options)
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
if (process.env.FEATURE_VIDEOPLAYER === '1') {
|
||||
import('./videoplayer');
|
||||
import('./videoplayer')
|
||||
}
|
||||
|
||||
if (process.env.FEATURE_TOC === '1') {
|
||||
import('./toc');
|
||||
import('./toc')
|
||||
}
|
||||
|
||||
if (process.env.FEATURE_DARKMODE === '1') {
|
||||
import('./darkmode');
|
||||
import('./darkmode')
|
||||
}
|
||||
|
||||
if (process.env.FEATURE_FLOWCHART === '1') {
|
||||
import('./flowchart');
|
||||
import('./flowchart')
|
||||
}
|
||||
|
||||
if (process.env.FEATURE_SYNTAXHIGHLIGHT === '1') {
|
||||
import('./syntaxhighlight');
|
||||
import('./syntaxhighlight')
|
||||
}
|
||||
|
||||
if (process.env.FEATURE_MATH === '1') {
|
||||
import('./math');
|
||||
import('./math')
|
||||
}
|
||||
|
||||
if (process.env.FEATURE_EMBEDPDF === '1') {
|
||||
import('./embedpdf');
|
||||
import('./embedpdf')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
if (process.env.FEATURE_MATH_KATEX === '1') {
|
||||
import('./katex');
|
||||
import('./katex')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import renderMathInElement from 'katex/contrib/auto-render';
|
||||
import * as params from '@params';
|
||||
import renderMathInElement from 'katex/contrib/auto-render'
|
||||
import * as params from '@params'
|
||||
|
||||
const defaultOptions = {
|
||||
delimiters: [
|
||||
{left: "$$", right: "$$", display: true},
|
||||
{left: "\\[", right: "\\]", display: true},
|
||||
{left: "$", right: "$", display: false},
|
||||
{left: "\\(", right: "\\)", display: false}
|
||||
{ left: '$$', right: '$$', display: true },
|
||||
{ left: '\\[', right: '\\]', display: true },
|
||||
{ left: '$', right: '$', display: false },
|
||||
{ left: '\\(', right: '\\)', display: false }
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
document.body,
|
||||
{
|
||||
...defaultOptions,
|
||||
...(params.math?.katex || {}),
|
||||
...(params.math?.katex || {})
|
||||
}
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import hljs from 'highlight.js';
|
||||
import * as params from '@params';
|
||||
import hljs from 'highlight.js'
|
||||
import * as params from '@params'
|
||||
|
||||
hljs.highlightAll(params.syntaxhighlight?.hljs);
|
||||
hljs.highlightAll(params.syntaxhighlight?.hljs)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
if (process.env.FEATURE_SYNTAXHIGHLIGHT_HLJS === '1') {
|
||||
import('./hljs');
|
||||
import('./hljs')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,48 @@
|
|||
import { getDeviceState } from '../../core';
|
||||
import { getDeviceState } from '../../core'
|
||||
|
||||
// Toggle Table of Contents on click. Here, class "hide" open the toc
|
||||
function toggleTOC() {
|
||||
let toc = document.getElementById("toc-section");
|
||||
function toggleTOC () {
|
||||
const toc = document.getElementById('toc-section')
|
||||
if (toc == null) {
|
||||
return
|
||||
}
|
||||
|
||||
if (toc.classList.contains("hide")) {
|
||||
toc.classList.remove("hide");
|
||||
if (toc.classList.contains('hide')) {
|
||||
toc.classList.remove('hide')
|
||||
} else {
|
||||
// if sidebar-section is open, then close it first
|
||||
let sidebar = document.getElementById("sidebar-section");
|
||||
if (sidebar != null && sidebar.classList.contains("hide")) {
|
||||
sidebar.classList.remove("hide");
|
||||
const sidebar = document.getElementById('sidebar-section')
|
||||
if (sidebar != null && sidebar.classList.contains('hide')) {
|
||||
sidebar.classList.remove('hide')
|
||||
}
|
||||
// add "hide" class
|
||||
toc.classList.add("hide");
|
||||
toc.classList.add('hide')
|
||||
// if it is mobile device. then scroll to top.
|
||||
const { isMobile } = getDeviceState();
|
||||
if (isMobile && toc.classList.contains("hide")) {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
const { isMobile } = getDeviceState()
|
||||
if (isMobile && toc.classList.contains('hide')) {
|
||||
document.body.scrollTop = 0
|
||||
document.documentElement.scrollTop = 0
|
||||
}
|
||||
}
|
||||
if (document.getElementById("hero-area") != null) {
|
||||
document.getElementById("hero-area").classList.toggle("hide");
|
||||
if (document.getElementById('hero-area') != null) {
|
||||
document.getElementById('hero-area').classList.toggle('hide')
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
// bind click event to #toc-toggle in navbar-2.html
|
||||
const $toggle = document.getElementById('toc-toggler');
|
||||
if ($toggle) $toggle.addEventListener('click', toggleTOC);
|
||||
const toggle = document.getElementById('toc-toggler')
|
||||
if (toggle) toggle.addEventListener('click', toggleTOC)
|
||||
|
||||
// hide TOC when user clicks on a TOC link.
|
||||
// hide TOC when user clicks on a TOC link.
|
||||
// Only applies if it's mobile.
|
||||
const $toc = document.getElementById("TableOfContents");
|
||||
if ($toc) {
|
||||
$toc.addEventListener('click', (event) => {
|
||||
const { isMobile } = getDeviceState();
|
||||
const toc = document.getElementById('TableOfContents')
|
||||
if (toc) {
|
||||
toc.addEventListener('click', (event) => {
|
||||
const { isMobile } = getDeviceState()
|
||||
if (isMobile && event.target.nodeName === 'A') {
|
||||
toggleTOC();
|
||||
toggleTOC()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
if (process.env.FEATURE_VIDEOPLAYER_PLYR === '1') {
|
||||
import('./plyr');
|
||||
import('./plyr')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import Plyr from 'plyr';
|
||||
import * as params from '@params';
|
||||
import Plyr from 'plyr'
|
||||
import * as params from '@params'
|
||||
|
||||
const options = params.videoplayer?.plyr;
|
||||
window.addEventListener('DOMContentLoaded', () => Plyr.setup('.video-player', options));
|
||||
const options = params.videoplayer?.plyr
|
||||
window.addEventListener('DOMContentLoaded', () => Plyr.setup('.video-player', options))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue