Skip to content

Commit

Permalink
perf: replace jQuery with Vanilla JS (cotes2020#1681)
Browse files Browse the repository at this point in the history
Also replaced `magnific-popup` with `GLightbox`
  • Loading branch information
cotes2020 authored and mill413 committed Apr 21, 2024
1 parent 00acdf1 commit 7681017
Show file tree
Hide file tree
Showing 22 changed files with 273 additions and 304 deletions.
9 changes: 3 additions & 6 deletions _data/origin/basic.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ webfonts: /assets/lib/fonts/main.css

# Libraries

jquery:
js: /assets/lib/jquery/jquery.min.js

bootstrap:
css: /assets/lib/bootstrap/bootstrap.min.css
js: /assets/lib/bootstrap/bootstrap.bundle.min.js
Expand All @@ -31,9 +28,9 @@ dayjs:
relativeTime: /assets/lib/dayjs/plugin/relativeTime.min.js
localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.min.js

magnific-popup:
css: /assets/lib/magnific-popup/magnific-popup.css
js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js
glightbox:
css: /assets/lib/glightbox/glightbox.min.css
js: /assets/lib/glightbox/glightbox.min.js

lazy-polyfill:
css: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.min.css
Expand Down
9 changes: 3 additions & 6 deletions _data/origin/cors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour

# Libraries

jquery:
js: https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js

bootstrap:
css: https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
js: https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
Expand All @@ -44,9 +41,9 @@ dayjs:
relativeTime: https://cdn.jsdelivr.net/npm/[email protected]/plugin/relativeTime.min.js
localizedFormat: https://cdn.jsdelivr.net/npm/[email protected]/plugin/localizedFormat.min.js

magnific-popup:
css: https://cdn.jsdelivr.net/npm/[email protected].0/dist/magnific-popup.min.css
js: https://cdn.jsdelivr.net/npm/[email protected].0/dist/jquery.magnific-popup.min.js
glightbox:
css: https://cdn.jsdelivr.net/npm/[email protected].0/dist/css/glightbox.min.css
js: https://cdn.jsdelivr.net/npm/[email protected].0/dist/js/glightbox.min.js

lazy-polyfill:
css: https://cdn.jsdelivr.net/npm/[email protected]/dist/loading-attribute-polyfill.min.css
Expand Down
4 changes: 2 additions & 2 deletions _includes/comments/disqus.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
{ threshold: [0] }
);

disqus_observer.observe(document.querySelector('#disqus_thread'));
disqus_observer.observe(document.getElementById('disqus_thread'));

/* Auto switch theme */
function reloadDisqus() {
Expand All @@ -44,7 +44,7 @@
}
}

if (document.querySelector('.mode-toggle')) {
if (document.getElementById('mode-toggle')) {
window.addEventListener('message', reloadDisqus);
}
</script>
3 changes: 1 addition & 2 deletions _includes/comments/giscus.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<script type="text/javascript">
(function () {
const origin = 'https://giscus.app';
const iframe = 'iframe.giscus-frame';
const lightTheme = 'light';
const darkTheme = 'dark_dimmed';

Expand Down Expand Up @@ -58,7 +57,7 @@
}
};

const giscus = document.querySelector(iframe).contentWindow;
const giscus = document.getElementsByClassName('giscus-frame')[0].contentWindow;
giscus.postMessage({ giscus: message }, origin);
}
});
Expand Down
3 changes: 1 addition & 2 deletions _includes/comments/utterances.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
<script type="text/javascript">
(function () {
const origin = 'https://utteranc.es';
const iframe = 'iframe.utterances-frame';
const lightTheme = 'github-light';
const darkTheme = 'github-dark';
let initTheme = lightTheme;
Expand Down Expand Up @@ -43,7 +42,7 @@
theme: theme
};

const utterances = document.querySelector(iframe).contentWindow;
const utterances = document.getElementsByClassName('utterances-frame')[0].contentWindow;
utterances.postMessage(message, origin);
});
})();
Expand Down
4 changes: 2 additions & 2 deletions _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@
{% endif %}

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

<!-- JavaScript -->
Expand Down
11 changes: 4 additions & 7 deletions _includes/js-selector.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,9 @@

<!-- commons -->

{% assign urls = site.data.origin[type].jquery.js
| append: ','
| append: site.data.origin[type].bootstrap.js
| append: ','
| append: site.data.origin[type].search.js
%}
{%- capture urls -%}
{{ site.data.origin[type].bootstrap.js }},{{ site.data.origin[type].search.js }}
{%- endcapture -%}

<!-- layout specified -->

Expand All @@ -20,7 +17,7 @@
<!-- image lazy-loading & popup & clipboard -->
{% assign urls = urls
| append: ','
| append: site.data.origin[type]['magnific-popup'].js
| append: site.data.origin[type].glightbox.js
| append: ','
| append: site.data.origin[type].clipboard.js
%}
Expand Down
50 changes: 26 additions & 24 deletions _includes/mermaid.html
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
<!-- mermaid-js loader -->
<script type="text/javascript">
(function () {
function updateMermaid(event) {
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
const mode = event.data.message;

if (typeof mermaid === 'undefined') {
return;
}

let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
let config = { theme: expectedTheme };

/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
$('.mermaid').each(function () {
let svgCode = $(this).prev().children().html();
$(this).removeAttr('data-processed');
$(this).html(svgCode);
});

mermaid.initialize(config);
mermaid.init(undefined, '.mermaid');
function updateMermaid(event) {
if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
const mode = event.data.message;

if (typeof mermaid === 'undefined') {
return;
}

let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
let config = { theme: expectedTheme };

/* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
const mermaidList = document.getElementsByClassName('mermaid');

[...mermaidList].forEach((elem) => {
const svgCode = elem.previousSibling.children.item(0).innerHTML;
elem.innerHTML = svgCode;
elem.removeAttribute('data-processed');
});

mermaid.initialize(config);
mermaid.init(undefined, '.mermaid');
}
}

(function () {
let initTheme = 'default';
const html = document.documentElement;

Expand All @@ -35,11 +37,12 @@
}

let mermaidConf = {
theme: initTheme /* <default|dark|forest|neutral> */
theme: initTheme /* <default | dark | forest | neutral> */
};

/* Create mermaid tag */
document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
const basicList = document.getElementsByClassName('language-mermaid');
[...basicList].forEach((elem) => {
const svgCode = elem.textContent;
const backup = elem.parentElement;
backup.classList.add('unloaded');
Expand All @@ -52,7 +55,6 @@
});

mermaid.initialize(mermaidConf);

window.addEventListener('message', updateMermaid);
})();
</script>
2 changes: 1 addition & 1 deletion _includes/sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ <h1 class="site-title">

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

Expand Down
2 changes: 1 addition & 1 deletion _includes/topbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
<i class="fas fa-search fa-fw"></i>
</button>

<search class="align-items-center ms-3 ms-lg-0">
<search id="search" class="align-items-center ms-3 ms-lg-0">
<i class="fas fa-search fa-fw"></i>
<input
class="form-control"
Expand Down
15 changes: 7 additions & 8 deletions _javascript/modules/components/back-to-top.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,17 @@
*/

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

$window.on('scroll', () => {
if ($window.scrollTop() > 50) {
$btn.fadeIn();
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
btn.classList.add('show');
} else {
$btn.fadeOut();
btn.classList.remove('show');
}
});

$btn.on('click', () => {
$window.scrollTop(0);
btn.addEventListener('click', () => {
window.scrollTo({ top: 0 });
});
}
49 changes: 23 additions & 26 deletions _javascript/modules/components/category-collapse.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,31 @@
*/
const childPrefix = 'l_';
const parentPrefix = 'h_';
const collapse = $('.collapse');
const children = document.getElementsByClassName('collapse');

export function categoryCollapse() {
/* close up top-category */
collapse.on('hide.bs.collapse', function () {
/* Bootstrap collapse events. */ const parentId =
parentPrefix + $(this).attr('id').substring(childPrefix.length);
if (parentId) {
$(`#${parentId} .far.fa-folder-open`).attr(
'class',
'far fa-folder fa-fw'
);
$(`#${parentId} i.fas`).addClass('rotate');
$(`#${parentId}`).removeClass('hide-border-bottom');
}
});
[...children].forEach((elem) => {
const id = parentPrefix + elem.id.substring(childPrefix.length);
const parent = document.getElementById(id);

// collapse sub-categories
elem.addEventListener('hide.bs.collapse', () => {
if (parent) {
parent.querySelector('.far.fa-folder-open').className =
'far fa-folder fa-fw';
parent.querySelector('.fas.fa-angle-down').classList.add('rotate');
parent.classList.remove('hide-border-bottom');
}
});

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

0 comments on commit 7681017

Please sign in to comment.