Skip to content

Commit fe7afa3

Browse files
cotes2020cotes2020
authored
perf: replace jQuery with Vanilla JS (#1681)
Also replaced `magnific-popup` with `GLightbox`
1 parent c85e9e2 commit fe7afa3

22 files changed

+273
-304
lines changed

‎_data/origin/basic.yml

+3-6
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ webfonts: /assets/lib/fonts/main.css
44

55
# Libraries
66

7-
jquery:
8-
js: /assets/lib/jquery/jquery.min.js
9-
107
bootstrap:
118
css: /assets/lib/bootstrap/bootstrap.min.css
129
js: /assets/lib/bootstrap/bootstrap.bundle.min.js
@@ -31,9 +28,9 @@ dayjs:
3128
relativeTime: /assets/lib/dayjs/plugin/relativeTime.min.js
3229
localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.min.js
3330

34-
magnific-popup:
35-
css: /assets/lib/magnific-popup/magnific-popup.css
36-
js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js
31+
glightbox:
32+
css: /assets/lib/glightbox/glightbox.min.css
33+
js: /assets/lib/glightbox/glightbox.min.js
3734

3835
lazy-polyfill:
3936
css: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.min.css

‎_data/origin/cors.yml

+3-6
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
1717

1818
# Libraries
1919

20-
jquery:
21-
js: https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js
22-
2320
bootstrap:
2421
css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
2522
js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
@@ -44,9 +41,9 @@ dayjs:
4441
relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.min.js
4542
localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/localizedFormat.min.js
4643

47-
magnific-popup:
48-
css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
49-
js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js
44+
glightbox:
45+
css: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css
46+
js: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js
5047

5148
lazy-polyfill:
5249
css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css

‎_includes/comments/disqus.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
{ threshold: [0] }
2929
);
3030

31-
disqus_observer.observe(document.querySelector('#disqus_thread'));
31+
disqus_observer.observe(document.getElementById('disqus_thread'));
3232

3333
/* Auto switch theme */
3434
function reloadDisqus() {
@@ -44,7 +44,7 @@
4444
}
4545
}
4646

47-
if (document.querySelector('.mode-toggle')) {
47+
if (document.getElementById('mode-toggle')) {
4848
window.addEventListener('message', reloadDisqus);
4949
}
5050
</script>

‎_includes/comments/giscus.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<script type="text/javascript">
33
(function () {
44
const origin = 'https://giscus.app';
5-
const iframe = 'iframe.giscus-frame';
65
const lightTheme = 'light';
76
const darkTheme = 'dark_dimmed';
87

@@ -58,7 +57,7 @@
5857
}
5958
};
6059

61-
const giscus = document.querySelector(iframe).contentWindow;
60+
const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
6261
giscus.postMessage({ giscus: message }, origin);
6362
}
6463
});

‎_includes/comments/utterances.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
<script type="text/javascript">
1111
(function () {
1212
const origin = 'https://utteranc.es';
13-
const iframe = 'iframe.utterances-frame';
1413
const lightTheme = 'github-light';
1514
const darkTheme = 'github-dark';
1615
let initTheme = lightTheme;
@@ -43,7 +42,7 @@
4342
theme: theme
4443
};
4544

46-
const utterances = document.querySelector(iframe).contentWindow;
45+
const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
4746
utterances.postMessage(message, origin);
4847
});
4948
})();

‎_includes/head.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,8 @@
9797
{% endif %}
9898

9999
{% if page.layout == 'page' or page.layout == 'post' %}
100-
<!-- Manific Popup -->
101-
<link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
100+
<!-- Image Popup -->
101+
<link rel="stylesheet" href="{{ site.data.origin[type].glightbox.css | relative_url }}">
102102
{% endif %}
103103

104104
<!-- JavaScript -->

‎_includes/js-selector.html

+4-7
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22

33
<!-- commons -->
44

5-
{% assign urls = site.data.origin[type].jquery.js
6-
| append: ','
7-
| append: site.data.origin[type].bootstrap.js
8-
| append: ','
9-
| append: site.data.origin[type].search.js
10-
%}
5+
{%- capture urls -%}
6+
{{ site.data.origin[type].bootstrap.js }},{{ site.data.origin[type].search.js }}
7+
{%- endcapture -%}
118

129
<!-- layout specified -->
1310

@@ -20,7 +17,7 @@
2017
<!-- image lazy-loading & popup & clipboard -->
2118
{% assign urls = urls
2219
| append: ','
23-
| append: site.data.origin[type]['magnific-popup'].js
20+
| append: site.data.origin[type].glightbox.js
2421
| append: ','
2522
| append: site.data.origin[type].clipboard.js
2623
%}

‎_includes/mermaid.html

+26-24
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
11
<!-- mermaid-js loader -->
22
<script type="text/javascript">
3-
(function () {
4-
function updateMermaid(event) {
5-
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
6-
const mode = event.data.message;
7-
8-
if (typeof mermaid === 'undefined') {
9-
return;
10-
}
11-
12-
let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
13-
let config = { theme: expectedTheme };
14-
15-
/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
16-
$('.mermaid').each(function () {
17-
let svgCode = $(this).prev().children().html();
18-
$(this).removeAttr('data-processed');
19-
$(this).html(svgCode);
20-
});
21-
22-
mermaid.initialize(config);
23-
mermaid.init(undefined, '.mermaid');
3+
function updateMermaid(event) {
4+
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
5+
const mode = event.data.message;
6+
7+
if (typeof mermaid === 'undefined') {
8+
return;
249
}
10+
11+
let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
12+
let config = { theme: expectedTheme };
13+
14+
/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
15+
const mermaidList = document.getElementsByClassName('mermaid');
16+
17+
[...mermaidList].forEach((elem) => {
18+
const svgCode = elem.previousSibling.children.item(0).innerHTML;
19+
elem.innerHTML = svgCode;
20+
elem.removeAttribute('data-processed');
21+
});
22+
23+
mermaid.initialize(config);
24+
mermaid.init(undefined, '.mermaid');
2525
}
26+
}
2627

28+
(function () {
2729
let initTheme = 'default';
2830
const html = document.documentElement;
2931

@@ -35,11 +37,12 @@
3537
}
3638

3739
let mermaidConf = {
38-
theme: initTheme /* <default|dark|forest|neutral> */
40+
theme: initTheme /* <default | dark | forest | neutral> */
3941
};
4042

4143
/* Create mermaid tag */
42-
document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
44+
const basicList = document.getElementsByClassName('language-mermaid');
45+
[...basicList].forEach((elem) => {
4346
const svgCode = elem.textContent;
4447
const backup = elem.parentElement;
4548
backup.classList.add('unloaded');
@@ -52,7 +55,6 @@
5255
});
5356

5457
mermaid.initialize(mermaidConf);
55-
5658
window.addEventListener('message', updateMermaid);
5759
})();
5860
</script>

‎_includes/sidebar.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ <h1 class="site-title">
4444

4545
<div class="sidebar-bottom d-flex flex-wrap align-items-center w-100">
4646
{% unless site.theme_mode %}
47-
<button type="button" class="mode-toggle btn" aria-label="Switch Mode">
47+
<button type="button" class="btn" aria-label="Switch Mode" id="mode-toggle">
4848
<i class="fas fa-adjust"></i>
4949
</button>
5050

‎_includes/topbar.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
<i class="fas fa-search fa-fw"></i>
6060
</button>
6161

62-
<search class="align-items-center ms-3 ms-lg-0">
62+
<search id="search" class="align-items-center ms-3 ms-lg-0">
6363
<i class="fas fa-search fa-fw"></i>
6464
<input
6565
class="form-control"

‎_javascript/modules/components/back-to-top.js

+7-8
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,17 @@
33
*/
44

55
export function back2top() {
6-
const $window = $(window);
7-
const $btn = $('#back-to-top');
6+
const btn = document.getElementById('back-to-top');
87

9-
$window.on('scroll', () => {
10-
if ($window.scrollTop() > 50) {
11-
$btn.fadeIn();
8+
window.addEventListener('scroll', () => {
9+
if (window.scrollY > 50) {
10+
btn.classList.add('show');
1211
} else {
13-
$btn.fadeOut();
12+
btn.classList.remove('show');
1413
}
1514
});
1615

17-
$btn.on('click', () => {
18-
$window.scrollTop(0);
16+
btn.addEventListener('click', () => {
17+
window.scrollTo({ top: 0 });
1918
});
2019
}

‎_javascript/modules/components/category-collapse.js

+23-26
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,31 @@
33
*/
44
const childPrefix = 'l_';
55
const parentPrefix = 'h_';
6-
const collapse = $('.collapse');
6+
const children = document.getElementsByClassName('collapse');
77

88
export function categoryCollapse() {
9-
/* close up top-category */
10-
collapse.on('hide.bs.collapse', function () {
11-
/* Bootstrap collapse events. */ const parentId =
12-
parentPrefix + $(this).attr('id').substring(childPrefix.length);
13-
if (parentId) {
14-
$(`#${parentId} .far.fa-folder-open`).attr(
15-
'class',
16-
'far fa-folder fa-fw'
17-
);
18-
$(`#${parentId} i.fas`).addClass('rotate');
19-
$(`#${parentId}`).removeClass('hide-border-bottom');
20-
}
21-
});
9+
[...children].forEach((elem) => {
10+
const id = parentPrefix + elem.id.substring(childPrefix.length);
11+
const parent = document.getElementById(id);
12+
13+
// collapse sub-categories
14+
elem.addEventListener('hide.bs.collapse', () => {
15+
if (parent) {
16+
parent.querySelector('.far.fa-folder-open').className =
17+
'far fa-folder fa-fw';
18+
parent.querySelector('.fas.fa-angle-down').classList.add('rotate');
19+
parent.classList.remove('hide-border-bottom');
20+
}
21+
});
2222

23-
/* expand the top category */
24-
collapse.on('show.bs.collapse', function () {
25-
const parentId =
26-
parentPrefix + $(this).attr('id').substring(childPrefix.length);
27-
if (parentId) {
28-
$(`#${parentId} .far.fa-folder`).attr(
29-
'class',
30-
'far fa-folder-open fa-fw'
31-
);
32-
$(`#${parentId} i.fas`).removeClass('rotate');
33-
$(`#${parentId}`).addClass('hide-border-bottom');
34-
}
23+
// expand sub-categories
24+
elem.addEventListener('show.bs.collapse', () => {
25+
if (parent) {
26+
parent.querySelector('.far.fa-folder').className =
27+
'far fa-folder-open fa-fw';
28+
parent.querySelector('.fas.fa-angle-down').classList.remove('rotate');
29+
parent.classList.add('hide-border-bottom');
30+
}
31+
});
3532
});
3633
}

0 commit comments

Comments
 (0)