forked from spencerwooo/onedrive-cf-index
-
Notifications
You must be signed in to change notification settings - Fork 0
/
htmlWrapper.js
107 lines (102 loc) 路 5.04 KB
/
htmlWrapper.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import { favicon } from './favicon'
const COMMIT_HASH = 'ad7b598'
const pagination = (pIdx, attrs) => {
const getAttrs = (c, h, isNext) =>
`class="${c}" ${h ? `href="pagination?page=${h}"` : ''} ${isNext === undefined ? '' : `id=${c.includes('pre') ? 'pagination-pre' : 'pagination-next'}`
}`
if (pIdx) {
switch (pIdx) {
case pIdx < 0 ? pIdx : null:
attrs = [getAttrs('pre', -pIdx - 1, 0), getAttrs('next off', null)]
break
case 1:
attrs = [getAttrs('pre off', null), getAttrs('next', pIdx + 1, 1)]
break
default:
attrs = [getAttrs('pre', pIdx - 1, 0), getAttrs('next', pIdx + 1, 1)]
}
return `${`<a ${attrs[0]}><i class="fas fa-angle-left" style="font-size: 8px;"></i> PREV</a>`}<span>Page ${pIdx}</span> ${`<a ${attrs[1]}>NEXT <i class="fas fa-angle-right" style="font-size: 8px;"></i></a>`}`
}
return ''
}
export function renderHTML(body, pLink, pIdx) {
pLink = pLink || ''
const p = 'window[pLinkId]'
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Spencer's OneDrive</title>
<link rel="shortcut icon" type="image/png" sizes="16x16" href="${favicon}" />
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.1/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/spencerwooo/onedrive-cf-index@${COMMIT_HASH}/themes/spencer.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@gh-pages/github-markdown.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/spencerwooo/onedrive-cf-index@${COMMIT_HASH}/themes/prism-github.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/prism.min.js" data-manual></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/turbolinks@5.2.0/dist/turbolinks.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/pipwerks/PDFObject/pdfobject.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js@1.5.0/dist/flv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
</head>
<body>
<nav id="navbar" data-turbolinks-permanent><div class="brand">馃搧 Spencer's OneDrive Index</div></nav>
${body}
<div class="paginate-container">${pagination(pIdx)}</div>
<div id="flex-container" data-turbolinks-permanent style="flex-grow: 1;"></div>
<footer id="footer" data-turbolinks-permanent><p>Powered by <a href="https://github.com/spencerwooo/onedrive-cf-index">onedrive-cf-index</a>, hosted on <a href="https://www.cloudflare.com/products/cloudflare-workers/">Cloudflare Workers</a>.</p></footer>
<script>
if (typeof ap !== "undefined" && ap.paused !== true) {
ap.destroy()
ap = undefined
}
if (typeof dp !== "undefined" && dp.paused !== true) {
dp.destroy()
dp = undefined
}
Prism.highlightAll()
mediumZoom('[data-zoomable]')
Turbolinks.Location.prototype.isHTML = () => {return true}
Turbolinks.start()
pagination()
function pagination() {
if ('${pLink ? 1 : ''}') {
if (location.pathname.endsWith('/')) {
pLinkId = history.state.turbolinks.restorationIdentifier
${p} = { link: ['${pLink}'], idx: 1 }
} else if (!window.pLinkId) {
history.pushState(history.state, '', location.pathname.replace('pagination', '/'))
return
}
if (${p}.link.length < ${p}.idx) (${p} = { link: [...${p}.link, '${pLink}'], idx: ${p}.idx })
}
listen = ({ isNext }) => {
isNext ? ${p}.idx++ : ${p}.idx--
addEventListener(
'turbolinks:request-start',
event => {
const xhr = event.data.xhr
xhr.setRequestHeader('pLink', ${p}.link[${p}.idx -2])
xhr.setRequestHeader('pIdx', ${p}.idx + '')
},
{ once: true }
)
}
preBtn = document.getElementById('pagination-pre')
nextBtn = document.getElementById('pagination-next')
if (nextBtn) {
nextBtn.addEventListener('click', () => listen({ isNext: true }), { once: true })
}
if (preBtn) {
preBtn.addEventListener('click', () => listen({ isNext: false }), { once: true })
}
}
</script>
</body>
</html>`
}