+ page +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/bookmark.js b/js/bookmark.js
new file mode 100644
index 0000000..8e3ae6a
--- /dev/null
+++ b/js/bookmark.js
@@ -0,0 +1,56 @@
+/* global CONFIG */
+
+document.addEventListener('DOMContentLoaded', () => {
+ 'use strict';
+
+ const doSaveScroll = () => {
+ localStorage.setItem('bookmark' + location.pathname, window.scrollY);
+ };
+
+ const scrollToMark = () => {
+ let top = localStorage.getItem('bookmark' + location.pathname);
+ top = parseInt(top, 10);
+ // If the page opens with a specific hash, just jump out
+ if (!isNaN(top) && location.hash === '') {
+ // Auto scroll to the position
+ window.anime({
+ targets : document.scrollingElement,
+ duration : 200,
+ easing : 'linear',
+ scrollTop: top
+ });
+ }
+ };
+ // Register everything
+ const init = function(trigger) {
+ // Create a link element
+ const link = document.querySelector('.book-mark-link');
+ // Scroll event
+ window.addEventListener('scroll', () => link.classList.toggle('book-mark-link-fixed', window.scrollY === 0), { passive: true });
+ // Register beforeunload event when the trigger is auto
+ if (trigger === 'auto') {
+ // Register beforeunload event
+ window.addEventListener('beforeunload', doSaveScroll);
+ document.addEventListener('pjax:send', doSaveScroll);
+ }
+ // Save the position by clicking the icon
+ link.addEventListener('click', () => {
+ doSaveScroll();
+ window.anime({
+ targets : link,
+ duration: 200,
+ easing : 'linear',
+ top : -30,
+ complete: () => {
+ setTimeout(() => {
+ link.style.top = '';
+ }, 400);
+ }
+ });
+ });
+ scrollToMark();
+ document.addEventListener('pjax:success', scrollToMark);
+ };
+
+ init(CONFIG.bookmark.save);
+});
diff --git a/js/comments-buttons.js b/js/comments-buttons.js
new file mode 100644
index 0000000..505c21b
--- /dev/null
+++ b/js/comments-buttons.js
@@ -0,0 +1,25 @@
+/* global CONFIG */
+
+(function() {
+ const commentButton = document.querySelectorAll('.comment-button');
+ commentButton.forEach(element => {
+ const commentClass = element.classList[2];
+ element.addEventListener('click', () => {
+ commentButton.forEach(active => active.classList.toggle('active', active === element));
+ document.querySelectorAll('.comment-position').forEach(active => active.classList.toggle('active', active.classList.contains(commentClass)));
+ if (CONFIG.comments.storage) {
+ localStorage.setItem('comments_active', commentClass);
+ }
+ });
+ });
+ let { activeClass } = CONFIG.comments;
+ if (CONFIG.comments.storage) {
+ activeClass = localStorage.getItem('comments_active') || activeClass;
+ }
+ if (activeClass) {
+ const activeButton = document.querySelector(`.comment-button.${activeClass}`);
+ if (activeButton) {
+ activeButton.click();
+ }
+ }
+})();
diff --git a/js/comments.js b/js/comments.js
new file mode 100644
index 0000000..4045e8c
--- /dev/null
+++ b/js/comments.js
@@ -0,0 +1,21 @@
+/* global CONFIG */
+
+window.addEventListener('tabs:register', () => {
+ let { activeClass } = CONFIG.comments;
+ if (CONFIG.comments.storage) {
+ activeClass = localStorage.getItem('comments_active') || activeClass;
+ }
+ if (activeClass) {
+ const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
+ if (activeTab) {
+ activeTab.click();
+ }
+ }
+});
+if (CONFIG.comments.storage) {
+ window.addEventListener('tabs:click', event => {
+ if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
+ const commentClass = event.target.classList[1];
+ localStorage.setItem('comments_active', commentClass);
+ });
+}
diff --git a/js/config.js b/js/config.js
new file mode 100644
index 0000000..caa0075
--- /dev/null
+++ b/js/config.js
@@ -0,0 +1,66 @@
+if (!window.NexT) window.NexT = {};
+
+(function() {
+ const className = 'next-config';
+
+ const staticConfig = {};
+ let variableConfig = {};
+
+ const parse = text => JSON.parse(text || '{}');
+
+ const update = name => {
+ const targetEle = document.querySelector(`.${className}[data-name="${name}"]`);
+ if (!targetEle) return;
+ const parsedConfig = parse(targetEle.text);
+ if (name === 'main') {
+ Object.assign(staticConfig, parsedConfig);
+ } else {
+ variableConfig[name] = parsedConfig;
+ }
+ };
+
+ update('main');
+
+ window.CONFIG = new Proxy({}, {
+ get(overrideConfig, name) {
+ let existing;
+ if (name in staticConfig) {
+ existing = staticConfig[name];
+ } else {
+ if (!(name in variableConfig)) update(name);
+ existing = variableConfig[name];
+ }
+
+ // For unset override and mixable existing
+ if (!(name in overrideConfig) && typeof existing === 'object') {
+ // Get ready to mix.
+ overrideConfig[name] = {};
+ }
+
+ if (name in overrideConfig) {
+ const override = overrideConfig[name];
+
+ // When mixable
+ if (typeof override === 'object' && typeof existing === 'object') {
+ // Mix, proxy changes to the override.
+ return new Proxy({ ...existing, ...override }, {
+ set(target, prop, value) {
+ target[prop] = value;
+ override[prop] = value;
+ return true;
+ }
+ });
+ }
+
+ return override;
+ }
+
+ // Only when not mixable and override hasn't been set.
+ return existing;
+ }
+ });
+
+ document.addEventListener('pjax:success', () => {
+ variableConfig = {};
+ });
+})();
diff --git a/js/motion.js b/js/motion.js
new file mode 100644
index 0000000..aad22db
--- /dev/null
+++ b/js/motion.js
@@ -0,0 +1,140 @@
+/* global NexT, CONFIG */
+
+NexT.motion = {};
+
+NexT.motion.integrator = {
+ queue: [],
+ init : function() {
+ this.queue = [];
+ return this;
+ },
+ add: function(fn) {
+ const sequence = fn();
+ if (CONFIG.motion.async) this.queue.push(sequence);
+ else this.queue = this.queue.concat(sequence);
+ return this;
+ },
+ bootstrap: function() {
+ if (!CONFIG.motion.async) this.queue = [this.queue];
+ this.queue.forEach(sequence => {
+ const timeline = window.anime.timeline({
+ duration: 200,
+ easing : 'linear'
+ });
+ sequence.forEach(item => {
+ if (item.deltaT) timeline.add(item, item.deltaT);
+ else timeline.add(item);
+ });
+ });
+ }
+};
+
+NexT.motion.middleWares = {
+ header: function() {
+ const sequence = [];
+
+ function getMistLineSettings(targets) {
+ sequence.push({
+ targets,
+ scaleX : [0, 1],
+ duration: 500,
+ deltaT : '-=200'
+ });
+ }
+
+ function pushToSequence(targets, sequenceQueue = false) {
+ sequence.push({
+ targets,
+ opacity: 1,
+ top : 0,
+ deltaT : sequenceQueue ? '-=200' : '-=0'
+ });
+ }
+
+ pushToSequence('.column');
+ CONFIG.scheme === 'Mist' && getMistLineSettings('.logo-line');
+ CONFIG.scheme === 'Muse' && pushToSequence('.custom-logo-image');
+ pushToSequence('.site-title');
+ pushToSequence('.site-brand-container .toggle', true);
+ pushToSequence('.site-subtitle');
+ (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && pushToSequence('.custom-logo-image');
+
+ const menuItemTransition = CONFIG.motion.transition.menu_item;
+ if (menuItemTransition) {
+ document.querySelectorAll('.menu-item').forEach(targets => {
+ sequence.push({
+ targets,
+ complete: () => targets.classList.add('animated', menuItemTransition),
+ deltaT : '-=200'
+ });
+ });
+ }
+
+ return sequence;
+ },
+
+ subMenu: function() {
+ const subMenuItem = document.querySelectorAll('.sub-menu .menu-item');
+ if (subMenuItem.length > 0) {
+ subMenuItem.forEach(element => {
+ element.classList.add('animated');
+ });
+ }
+ return [];
+ },
+
+ postList: function() {
+ const sequence = [];
+ const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
+
+ function animate(animation, elements) {
+ if (!animation) return;
+ elements.forEach(targets => {
+ sequence.push({
+ targets,
+ complete: () => targets.classList.add('animated', animation),
+ deltaT : '-=100'
+ });
+ });
+ }
+
+ document.querySelectorAll('.post-block').forEach(targets => {
+ sequence.push({
+ targets,
+ complete: () => targets.classList.add('animated', post_block),
+ deltaT : '-=100'
+ });
+ animate(coll_header, targets.querySelectorAll('.collection-header'));
+ animate(post_header, targets.querySelectorAll('.post-header'));
+ animate(post_body, targets.querySelectorAll('.post-body'));
+ });
+
+ animate(post_block, document.querySelectorAll('.pagination, .comments'));
+
+ return sequence;
+ },
+
+ sidebar: function() {
+ const sequence = [];
+ const sidebar = document.querySelectorAll('.sidebar-inner');
+ const sidebarTransition = CONFIG.motion.transition.sidebar;
+ // Only for Pisces | Gemini.
+ if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
+ sidebar.forEach(targets => {
+ sequence.push({
+ targets,
+ complete: () => targets.classList.add('animated', sidebarTransition),
+ deltaT : '-=100'
+ });
+ });
+ }
+ return sequence;
+ },
+
+ footer: function() {
+ return [{
+ targets: document.querySelector('.footer'),
+ opacity: 1
+ }];
+ }
+};
diff --git a/js/next-boot.js b/js/next-boot.js
new file mode 100644
index 0000000..fceb80b
--- /dev/null
+++ b/js/next-boot.js
@@ -0,0 +1,79 @@
+/* global NexT, CONFIG */
+
+NexT.boot = {};
+
+NexT.boot.registerEvents = function() {
+
+ NexT.utils.registerScrollPercent();
+ NexT.utils.registerCanIUseTag();
+
+ // Mobile top menu bar.
+ document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {
+ event.currentTarget.classList.toggle('toggle-close');
+ const siteNav = document.querySelector('.site-nav');
+ if (!siteNav) return;
+ siteNav.style.setProperty('--scroll-height', siteNav.scrollHeight + 'px');
+ document.body.classList.toggle('site-nav-on');
+ });
+
+ document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
+ element.addEventListener('click', () => {
+ NexT.utils.activateSidebarPanel(index);
+ });
+ });
+
+ window.addEventListener('hashchange', () => {
+ const tHash = location.hash;
+ if (tHash !== '' && !tHash.match(/%\S{2}/)) {
+ const target = document.querySelector(`.tabs ul.nav-tabs li a[href="${tHash}"]`);
+ target && target.click();
+ }
+ });
+
+ window.addEventListener('tabs:click', e => {
+ NexT.utils.registerCodeblock(e.target);
+ });
+};
+
+NexT.boot.refresh = function() {
+
+ /**
+ * Register JS handlers by condition option.
+ * Need to add config option in Front-End at 'scripts/helpers/next-config.js' file.
+ */
+ CONFIG.prism && window.Prism.highlightAll();
+ CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img', {
+ background: 'var(--content-bg-color)'
+ });
+ CONFIG.lazyload && window.lozad('.post-body img').observe();
+ CONFIG.pangu && window.pangu.spacingPage();
+
+ CONFIG.exturl && NexT.utils.registerExtURL();
+ NexT.utils.wrapTableWithBox();
+ NexT.utils.registerCodeblock();
+ NexT.utils.registerTabsTag();
+ NexT.utils.registerActiveMenuItem();
+ NexT.utils.registerLangSelect();
+ NexT.utils.registerSidebarTOC();
+ NexT.utils.registerPostReward();
+ NexT.utils.registerVideoIframe();
+};
+
+NexT.boot.motion = function() {
+ // Define Motion Sequence & Bootstrap Motion.
+ if (CONFIG.motion.enable) {
+ NexT.motion.integrator
+ .add(NexT.motion.middleWares.header)
+ .add(NexT.motion.middleWares.postList)
+ .add(NexT.motion.middleWares.sidebar)
+ .add(NexT.motion.middleWares.footer)
+ .bootstrap();
+ }
+ NexT.utils.updateSidebarPosition();
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+ NexT.boot.registerEvents();
+ NexT.boot.refresh();
+ NexT.boot.motion();
+});
diff --git a/js/pjax.js b/js/pjax.js
new file mode 100644
index 0000000..f81a6a0
--- /dev/null
+++ b/js/pjax.js
@@ -0,0 +1,50 @@
+/* global NexT, CONFIG, Pjax */
+
+const pjax = new Pjax({
+ selectors: [
+ 'head title',
+ 'script[type="application/json"]',
+ // Precede .main-inner to prevent placeholder TOC changes asap
+ '.post-toc-wrap',
+ '.main-inner',
+ '.languages',
+ '.pjax'
+ ],
+ switches: {
+ '.post-toc-wrap': function(oldWrap, newWrap) {
+ if (newWrap.querySelector('.post-toc')) {
+ Pjax.switches.outerHTML.call(this, oldWrap, newWrap);
+ } else {
+ const curTOC = oldWrap.querySelector('.post-toc');
+ if (curTOC) {
+ curTOC.classList.add('placeholder-toc');
+ }
+ this.onSwitch();
+ }
+ }
+ },
+ analytics: false,
+ cacheBust: false,
+ scrollTo : !CONFIG.bookmark.enable
+});
+
+document.addEventListener('pjax:success', () => {
+ pjax.executeScripts(document.querySelectorAll('script[data-pjax]'));
+ NexT.boot.refresh();
+ // Define Motion Sequence & Bootstrap Motion.
+ if (CONFIG.motion.enable) {
+ NexT.motion.integrator
+ .init()
+ .add(NexT.motion.middleWares.subMenu)
+ .add(NexT.motion.middleWares.postList)
+ // Add sidebar-post-related transition.
+ .add(NexT.motion.middleWares.sidebar)
+ .bootstrap();
+ }
+ if (CONFIG.sidebar.display !== 'remove') {
+ const hasTOC = document.querySelector('.post-toc:not(.placeholder-toc)');
+ document.querySelector('.sidebar-inner').classList.toggle('sidebar-nav-active', hasTOC);
+ NexT.utils.activateSidebarPanel(hasTOC ? 0 : 1);
+ NexT.utils.updateSidebarPosition();
+ }
+});
diff --git a/js/schedule.js b/js/schedule.js
new file mode 100644
index 0000000..8f0c26c
--- /dev/null
+++ b/js/schedule.js
@@ -0,0 +1,138 @@
+/* global CONFIG */
+
+// https://developers.google.com/calendar/api/v3/reference/events/list
+(function() {
+ // Initialization
+ const calendar = {
+ orderBy : 'startTime',
+ showLocation: false,
+ offsetMax : 72,
+ offsetMin : 4,
+ showDeleted : false,
+ singleEvents: true,
+ maxResults : 250
+ };
+
+ // Read config form theme config file
+ Object.assign(calendar, CONFIG.calendar);
+
+ const now = new Date();
+ const timeMax = new Date();
+ const timeMin = new Date();
+
+ timeMax.setHours(now.getHours() + calendar.offsetMax);
+ timeMin.setHours(now.getHours() - calendar.offsetMin);
+
+ // Build URL
+ const params = {
+ key : calendar.api_key,
+ orderBy : calendar.orderBy,
+ timeMax : timeMax.toISOString(),
+ timeMin : timeMin.toISOString(),
+ showDeleted : calendar.showDeleted,
+ singleEvents: calendar.singleEvents,
+ maxResults : calendar.maxResults
+ };
+
+ const request_url = new URL(`https://www.googleapis.com/calendar/v3/calendars/${calendar.calendar_id}/events`);
+ Object.entries(params).forEach(param => request_url.searchParams.append(...param));
+
+ function getRelativeTime(current, previous) {
+ const msPerMinute = 60 * 1000;
+ const msPerHour = msPerMinute * 60;
+ const msPerDay = msPerHour * 24;
+ const msPerMonth = msPerDay * 30;
+ const msPerYear = msPerDay * 365;
+
+ let elapsed = current - previous;
+ const tense = elapsed > 0 ? ' ago' : ' later';
+
+ elapsed = Math.abs(elapsed);
+
+ if (elapsed < msPerHour) {
+ return Math.round(elapsed / msPerMinute) + ' minutes' + tense;
+ } else if (elapsed < msPerDay) {
+ return Math.round(elapsed / msPerHour) + ' hours' + tense;
+ } else if (elapsed < msPerMonth) {
+ return 'about ' + Math.round(elapsed / msPerDay) + ' days' + tense;
+ } else if (elapsed < msPerYear) {
+ return 'about ' + Math.round(elapsed / msPerMonth) + ' months' + tense;
+ }
+
+ return 'about ' + Math.round(elapsed / msPerYear) + ' years' + tense;
+ }
+
+ function buildEventDOM(tense, event, start, end) {
+ const durationFormat = {
+ weekday: 'short',
+ hour : '2-digit',
+ minute : '2-digit'
+ };
+ const relativeTime = tense === 'now' ? 'NOW' : getRelativeTime(now, start);
+ const duration = start.toLocaleTimeString([], durationFormat) + ' - ' + end.toLocaleTimeString([], durationFormat);
+
+ let location = '';
+ if (calendar.showLocation && event.location) {
+ location = `${event.location}`;
+ }
+ let description = '';
+ if (event.description) {
+ description = `${event.description}`;
+ }
+
+ const eventContent = `+ ${event.summary} + ${relativeTime} +
+ ${location} + ${duration} + ${description} +'; + return; + } + // Clean the event list + eventList.innerHTML = ''; + let prevEnd = 0; // used to decide where to insert an
+ const utc = new Date().getTimezoneOffset() * 60000; + + data.items.forEach(event => { + // Parse data + const start = new Date(event.start.dateTime || (new Date(event.start.date).getTime() + utc)); + const end = new Date(event.end.dateTime || (new Date(event.end.date).getTime() + utc)); + + let tense = 'now'; + if (end < now) { + tense = 'past'; + } else if (start > now) { + tense = 'future'; + } + + if (tense === 'future' && prevEnd < now) { + eventList.insertAdjacentHTML('beforeend', '
'); + } + + eventList.insertAdjacentHTML('beforeend', buildEventDOM(tense, event, start, end)); + prevEnd = end; + }); + }); + } + + fetchData(); + const fetchDataTimer = setInterval(fetchData, 60000); + document.addEventListener('pjax:send', () => { + clearInterval(fetchDataTimer); + }); +})(); diff --git a/js/schemes/muse.js b/js/schemes/muse.js new file mode 100644 index 0000000..ba60b51 --- /dev/null +++ b/js/schemes/muse.js @@ -0,0 +1,60 @@ +/* global CONFIG */ + +document.addEventListener('DOMContentLoaded', () => { + + const isRight = CONFIG.sidebar.position === 'right'; + + const sidebarToggleMotion = { + mouse: {}, + init : function() { + window.addEventListener('mousedown', this.mousedownHandler.bind(this)); + window.addEventListener('mouseup', this.mouseupHandler.bind(this)); + document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); + document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this)); + window.addEventListener('sidebar:show', this.showSidebar); + window.addEventListener('sidebar:hide', this.hideSidebar); + }, + mousedownHandler: function(event) { + this.mouse.X = event.pageX; + this.mouse.Y = event.pageY; + }, + mouseupHandler: function(event) { + const deltaX = event.pageX - this.mouse.X; + const deltaY = event.pageY - this.mouse.Y; + const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main'); + // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image. + if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) { + this.hideSidebar(); + } + }, + clickHandler: function() { + document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar(); + }, + showSidebar: function() { + document.body.classList.add('sidebar-active'); + const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft'; + document.querySelectorAll('.sidebar .animated').forEach((element, index) => { + element.style.animationDelay = (100 * index) + 'ms'; + element.classList.remove(animateAction); + setTimeout(() => { + // Trigger a DOM reflow + element.classList.add(animateAction); + }); + }); + }, + hideSidebar: function() { + document.body.classList.remove('sidebar-active'); + } + }; + if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init(); + + function updateFooterPosition() { + const footer = document.querySelector('.footer'); + const containerHeight = document.querySelector('.main').offsetHeight + footer.offsetHeight; + footer.classList.toggle('footer-fixed', containerHeight <= window.innerHeight); + } + + updateFooterPosition(); + window.addEventListener('resize', updateFooterPosition); + window.addEventListener('scroll', updateFooterPosition, { passive: true }); +}); diff --git a/js/third-party/addtoany.js b/js/third-party/addtoany.js new file mode 100644 index 0000000..f9009f8 --- /dev/null +++ b/js/third-party/addtoany.js @@ -0,0 +1,8 @@ +/* global NexT */ + +document.addEventListener('page:loaded', () => { + NexT.utils.getScript('https://static.addtoany.com/menu/page.js', { condition: window.a2a }) + .then(() => { + window.a2a.init(); + }); +}); diff --git a/js/third-party/analytics/baidu-analytics.js b/js/third-party/analytics/baidu-analytics.js new file mode 100644 index 0000000..c10e7d0 --- /dev/null +++ b/js/third-party/analytics/baidu-analytics.js @@ -0,0 +1,7 @@ +/* global _hmt */ + +if (!window._hmt) window._hmt = []; + +document.addEventListener('pjax:success', () => { + _hmt.push(['_trackPageview', location.pathname]); +}); diff --git a/js/third-party/analytics/google-analytics.js b/js/third-party/analytics/google-analytics.js new file mode 100644 index 0000000..2cd128f --- /dev/null +++ b/js/third-party/analytics/google-analytics.js @@ -0,0 +1,35 @@ +/* global CONFIG, dataLayer, gtag */ + +if (!CONFIG.google_analytics.only_pageview) { + if (CONFIG.hostname === location.hostname) { + window.dataLayer = window.dataLayer || []; + window.gtag = function() { + dataLayer.push(arguments); + }; + gtag('js', new Date()); + gtag('config', CONFIG.google_analytics.tracking_id); + + document.addEventListener('pjax:success', () => { + gtag('event', 'page_view', { + page_location: location.href, + page_path : location.pathname, + page_title : document.title + }); + }); + } +} else { + const sendPageView = () => { + if (CONFIG.hostname !== location.hostname) return; + const uid = localStorage.getItem('uid') || (Math.random() + '.' + Math.random()); + localStorage.setItem('uid', uid); + navigator.sendBeacon('https://www.google-analytics.com/collect', new URLSearchParams({ + v : 1, + tid: CONFIG.google_analytics.tracking_id, + cid: uid, + t : 'pageview', + dp : encodeURIComponent(location.pathname) + })); + }; + document.addEventListener('pjax:complete', sendPageView); + sendPageView(); +} diff --git a/js/third-party/analytics/growingio.js b/js/third-party/analytics/growingio.js new file mode 100644 index 0000000..0460833 --- /dev/null +++ b/js/third-party/analytics/growingio.js @@ -0,0 +1,10 @@ +/* global CONFIG, gio */ + +if (!window.gio) { + window.gio = function() { + (window.gio.q = window.gio.q || []).push(arguments); + }; +} + +gio('init', `${CONFIG.growingio_analytics}`, {}); +gio('send'); diff --git a/js/third-party/analytics/matomo.js b/js/third-party/analytics/matomo.js new file mode 100644 index 0000000..290a3e0 --- /dev/null +++ b/js/third-party/analytics/matomo.js @@ -0,0 +1,19 @@ +/* global CONFIG */ + +if (CONFIG.matomo.enable) { + window._paq = window._paq || []; + const _paq = window._paq; + + /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ + _paq.push(['trackPageView']); + _paq.push(['enableLinkTracking']); + const u = CONFIG.matomo.server_url; + _paq.push(['setTrackerUrl', u + 'matomo.php']); + _paq.push(['setSiteId', CONFIG.matomo.site_id]); + const d = document; + const g = d.createElement('script'); + const s = d.getElementsByTagName('script')[0]; + g.async = true; + g.src = u + 'matomo.js'; + s.parentNode.insertBefore(g, s); +} diff --git a/js/third-party/chat/chatra.js b/js/third-party/chat/chatra.js new file mode 100644 index 0000000..e495b8e --- /dev/null +++ b/js/third-party/chat/chatra.js @@ -0,0 +1,19 @@ +/* global CONFIG, Chatra */ + +(function() { + if (CONFIG.chatra.embed) { + window.ChatraSetup = { + mode : 'frame', + injectTo: CONFIG.chatra.embed + }; + } + + window.ChatraID = CONFIG.chatra.id; + + const chatButton = document.querySelector('.sidebar-button button'); + if (chatButton) { + chatButton.addEventListener('click', () => { + Chatra('openChat', true); + }); + } +})(); diff --git a/js/third-party/chat/tidio.js b/js/third-party/chat/tidio.js new file mode 100644 index 0000000..bffb918 --- /dev/null +++ b/js/third-party/chat/tidio.js @@ -0,0 +1,10 @@ +/* global tidioChatApi */ + +(function() { + const chatButton = document.querySelector('.sidebar-button button'); + if (chatButton) { + chatButton.addEventListener('click', () => { + tidioChatApi.open(); + }); + } +})(); diff --git a/js/third-party/comments/changyan.js b/js/third-party/comments/changyan.js new file mode 100644 index 0000000..18a1be4 --- /dev/null +++ b/js/third-party/comments/changyan.js @@ -0,0 +1,39 @@ +/* global NexT, CONFIG */ + +document.addEventListener('page:loaded', () => { + const { appid, appkey } = CONFIG.changyan; + const mainJs = 'https://cy-cdn.kuaizhan.com/upload/changyan.js'; + const countJs = `https://cy-cdn.kuaizhan.com/upload/plugins/plugins.list.count.js?clientId=${appid}`; + + // Get the number of comments + setTimeout(() => { + return NexT.utils.getScript(countJs, { + attributes: { + async: true, + id : 'cy_cmt_num' + } + }); + }, 0); + + // When scroll to comment section + if (CONFIG.page.comments && !CONFIG.page.isHome) { + NexT.utils.loadComments('#SOHUCS') + .then(() => { + return NexT.utils.getScript(mainJs, { + attributes: { + async: true + } + }); + }) + .then(() => { + window.changyan.api.config({ + appid, + conf: appkey + }); + }) + .catch(error => { + // eslint-disable-next-line no-console + console.error('Failed to load Changyan', error); + }); + } +}); diff --git a/js/third-party/comments/disqus.js b/js/third-party/comments/disqus.js new file mode 100644 index 0000000..4d1ca9e --- /dev/null +++ b/js/third-party/comments/disqus.js @@ -0,0 +1,41 @@ +/* global NexT, CONFIG, DISQUS */ + +document.addEventListener('page:loaded', () => { + + if (CONFIG.disqus.count) { + if (window.DISQUSWIDGETS) { + window.DISQUSWIDGETS.getCount({ reset: true }); + } else { + // Defer loading until the whole page loading is completed + NexT.utils.getScript(`https://${CONFIG.disqus.shortname}.disqus.com/count.js`, { + attributes: { id: 'dsq-count-scr', defer: true } + }); + } + } + + if (CONFIG.page.comments) { + // `disqus_config` should be a global variable + // See https://help.disqus.com/en/articles/1717084-javascript-configuration-variables + window.disqus_config = function() { + this.page.url = CONFIG.page.permalink; + this.page.identifier = CONFIG.page.path; + this.page.title = CONFIG.page.title; + if (CONFIG.disqus.i18n.disqus !== 'disqus') { + this.language = CONFIG.disqus.i18n.disqus; + } + }; + NexT.utils.loadComments('#disqus_thread').then(() => { + if (window.DISQUS) { + DISQUS.reset({ + reload: true, + config: window.disqus_config + }); + } else { + NexT.utils.getScript(`https://${CONFIG.disqus.shortname}.disqus.com/embed.js`, { + attributes: { dataset: { timestamp: '' + +new Date() } } + }); + } + }); + } + +}); diff --git a/js/third-party/comments/disqusjs.js b/js/third-party/comments/disqusjs.js new file mode 100644 index 0000000..d8401ee --- /dev/null +++ b/js/third-party/comments/disqusjs.js @@ -0,0 +1,23 @@ +/* global NexT, CONFIG, DisqusJS */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('#disqus_thread') + .then(() => NexT.utils.getScript(CONFIG.disqusjs.js, { condition: window.DisqusJS })) + .then(() => { + window.dsqjs = new DisqusJS({ + api : CONFIG.disqusjs.api || 'https://disqus.com/api/', + apikey : CONFIG.disqusjs.apikey, + shortname : CONFIG.disqusjs.shortname, + url : CONFIG.page.permalink, + identifier: CONFIG.page.path, + title : CONFIG.page.title + }); + window.dsqjs.render(document.querySelector('.disqusjs-container')); + }); +}); + +document.addEventListener('pjax:send', () => { + if (window.dsqjs) window.dsqjs.destroy(); +}); diff --git a/js/third-party/comments/gitalk.js b/js/third-party/comments/gitalk.js new file mode 100644 index 0000000..08d07f4 --- /dev/null +++ b/js/third-party/comments/gitalk.js @@ -0,0 +1,24 @@ +/* global NexT, CONFIG, Gitalk */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('.gitalk-container') + .then(() => NexT.utils.getScript(CONFIG.gitalk.js, { + condition: window.Gitalk + })) + .then(() => { + const gitalk = new Gitalk({ + clientID : CONFIG.gitalk.client_id, + clientSecret : CONFIG.gitalk.client_secret, + repo : CONFIG.gitalk.repo, + owner : CONFIG.gitalk.github_id, + admin : [CONFIG.gitalk.admin_user], + id : CONFIG.gitalk.path_md5, + proxy : CONFIG.gitalk.proxy, + language : CONFIG.gitalk.language || window.navigator.language, + distractionFreeMode: CONFIG.gitalk.distraction_free_mode + }); + gitalk.render(document.querySelector('.gitalk-container')); + }); +}); diff --git a/js/third-party/comments/isso.js b/js/third-party/comments/isso.js new file mode 100644 index 0000000..2c70601 --- /dev/null +++ b/js/third-party/comments/isso.js @@ -0,0 +1,15 @@ +/* global NexT, CONFIG */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('#isso-thread') + .then(() => NexT.utils.getScript(`${CONFIG.isso}js/embed.min.js`, { + attributes: { + dataset: { + isso: `${CONFIG.isso}` + } + }, + parentNode: document.querySelector('#isso-thread') + })); +}); diff --git a/js/third-party/comments/livere.js b/js/third-party/comments/livere.js new file mode 100644 index 0000000..c4bcd2e --- /dev/null +++ b/js/third-party/comments/livere.js @@ -0,0 +1,19 @@ +/* global NexT, CONFIG, LivereTower */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('#lv-container').then(() => { + window.livereOptions = { + refer: CONFIG.page.path.replace(/index\.html$/, '') + }; + + if (typeof LivereTower === 'function') return; + + NexT.utils.getScript('https://cdn-city.livere.com/js/embed.dist.js', { + attributes: { + async: true + } + }); + }); +}); diff --git a/js/third-party/comments/utterances.js b/js/third-party/comments/utterances.js new file mode 100644 index 0000000..332ee05 --- /dev/null +++ b/js/third-party/comments/utterances.js @@ -0,0 +1,17 @@ +/* global NexT, CONFIG */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.page.comments) return; + + NexT.utils.loadComments('.utterances-container') + .then(() => NexT.utils.getScript('https://utteranc.es/client.js', { + attributes: { + async : true, + crossOrigin : 'anonymous', + 'repo' : CONFIG.utterances.repo, + 'issue-term': CONFIG.utterances.issue_term, + 'theme' : CONFIG.utterances.theme + }, + parentNode: document.querySelector('.utterances-container') + })); +}); diff --git a/js/third-party/fancybox.js b/js/third-party/fancybox.js new file mode 100644 index 0000000..178db4b --- /dev/null +++ b/js/third-party/fancybox.js @@ -0,0 +1,35 @@ +/* global Fancybox */ + +document.addEventListener('page:loaded', () => { + + /** + * Wrap images with fancybox. + */ + document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(image => { + const imageLink = image.dataset.src || image.src; + const imageWrapLink = document.createElement('a'); + imageWrapLink.classList.add('fancybox'); + imageWrapLink.href = imageLink; + imageWrapLink.setAttribute('itemscope', ''); + imageWrapLink.setAttribute('itemtype', 'http://schema.org/ImageObject'); + imageWrapLink.setAttribute('itemprop', 'url'); + + let dataFancybox = 'default'; + if (image.closest('.post-gallery') !== null) { + dataFancybox = 'gallery'; + } else if (image.closest('.group-picture') !== null) { + dataFancybox = 'group'; + } + imageWrapLink.dataset.fancybox = dataFancybox; + + const imageTitle = image.title || image.alt; + if (imageTitle) { + imageWrapLink.title = imageTitle; + // Make sure img captions will show correctly in fancybox + imageWrapLink.dataset.caption = imageTitle; + } + image.wrap(imageWrapLink); + }); + + Fancybox.bind('[data-fancybox]'); +}); diff --git a/js/third-party/math/katex.js b/js/third-party/math/katex.js new file mode 100644 index 0000000..ad745b1 --- /dev/null +++ b/js/third-party/math/katex.js @@ -0,0 +1,7 @@ +/* global NexT, CONFIG */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.enableMath) return; + + NexT.utils.getScript(CONFIG.katex.copy_tex_js).catch(() => {}); +}); diff --git a/js/third-party/math/mathjax.js b/js/third-party/math/mathjax.js new file mode 100644 index 0000000..fe4d448 --- /dev/null +++ b/js/third-party/math/mathjax.js @@ -0,0 +1,36 @@ +/* global NexT, CONFIG, MathJax */ + +document.addEventListener('page:loaded', () => { + if (!CONFIG.enableMath) return; + + if (typeof MathJax === 'undefined') { + window.MathJax = { + tex: { + inlineMath: { '[+]': [['$', '$']] }, + tags : CONFIG.mathjax.tags + }, + options: { + renderActions: { + insertedScript: [200, () => { + document.querySelectorAll('mjx-container').forEach(node => { + const target = node.parentNode; + if (target.nodeName.toLowerCase() === 'li') { + target.parentNode.classList.add('has-jax'); + } + }); + }, '', false] + } + } + }; + NexT.utils.getScript(CONFIG.mathjax.js, { + attributes: { + defer: true + } + }); + } else { + MathJax.startup.document.state(0); + MathJax.typesetClear(); + MathJax.texReset(); + MathJax.typesetPromise(); + } +}); diff --git a/js/third-party/pace.js b/js/third-party/pace.js new file mode 100644 index 0000000..c22d59f --- /dev/null +++ b/js/third-party/pace.js @@ -0,0 +1,7 @@ +/* global Pace */ + +Pace.options.restartOnPushState = false; + +document.addEventListener('pjax:send', () => { + Pace.restart(); +}); diff --git a/js/third-party/quicklink.js b/js/third-party/quicklink.js new file mode 100644 index 0000000..2543ad1 --- /dev/null +++ b/js/third-party/quicklink.js @@ -0,0 +1,37 @@ +/* global CONFIG, quicklink */ + +(function() { + if (typeof CONFIG.quicklink.ignores === 'string') { + const ignoresStr = `[${CONFIG.quicklink.ignores}]`; + CONFIG.quicklink.ignores = JSON.parse(ignoresStr); + } + + let resetFn = null; + + const onRefresh = () => { + if (resetFn) resetFn(); + if (!CONFIG.quicklink.enable) return; + + let ignoresArr = CONFIG.quicklink.ignores || []; + if (!Array.isArray(ignoresArr)) { + ignoresArr = [ignoresArr]; + } + + resetFn = quicklink.listen({ + timeout : CONFIG.quicklink.timeout, + priority: CONFIG.quicklink.priority, + ignores : [ + uri => uri.includes('#'), + uri => uri === CONFIG.quicklink.url, + ...ignoresArr + ] + }); + }; + + if (CONFIG.quicklink.delay) { + window.addEventListener('load', onRefresh); + document.addEventListener('pjax:success', onRefresh); + } else { + document.addEventListener('page:loaded', onRefresh); + } +})(); diff --git a/js/third-party/search/algolia-search.js b/js/third-party/search/algolia-search.js new file mode 100644 index 0000000..12a554c --- /dev/null +++ b/js/third-party/search/algolia-search.js @@ -0,0 +1,130 @@ +/* global instantsearch, algoliasearch, CONFIG, pjax */ + +document.addEventListener('DOMContentLoaded', () => { + const { indexName, appID, apiKey, hits } = CONFIG.algolia; + + const search = instantsearch({ + indexName, + searchClient : algoliasearch(appID, apiKey), + searchFunction: helper => { + if (document.querySelector('.search-input').value) { + helper.search(); + } + } + }); + + if (typeof pjax === 'object') { + search.on('render', () => { + pjax.refresh(document.querySelector('.algolia-hits')); + }); + } + + // Registering Widgets + search.addWidgets([ + instantsearch.widgets.configure({ + hitsPerPage: hits.per_page || 10 + }), + + instantsearch.widgets.searchBox({ + container : '.search-input-container', + placeholder : CONFIG.i18n.placeholder, + // Hide default icons of algolia search + showReset : false, + showSubmit : false, + showLoadingIndicator: false, + cssClasses : { + input: 'search-input' + } + }), + + instantsearch.widgets.stats({ + container: '.algolia-stats', + templates: { + text: data => { + const stats = CONFIG.i18n.hits_time + .replace('${hits}', data.nbHits) + .replace('${time}', data.processingTimeMS); + return `${stats} +
`;
+ }
+ },
+ cssClasses: {
+ text: 'search-stats'
+ }
+ }),
+
+ instantsearch.widgets.hits({
+ container : '.algolia-hits',
+ escapeHTML: false,
+ templates : {
+ item: data => {
+ const { title, excerpt, excerptStrip, contentStripTruncate } = data._highlightResult;
+ let result = `${title.value}`;
+ const content = excerpt || excerptStrip || contentStripTruncate;
+ if (content && content.value) {
+ const div = document.createElement('div');
+ div.innerHTML = content.value;
+ result += `${div.textContent.substring(0, 100)}...
`; + } + return result; + }, + empty: data => { + return `
+ ${CONFIG.i18n.empty.replace('${query}', data.query)}
+
`;
+ }
+ },
+ cssClasses: {
+ list: 'search-result-list'
+ }
+ }),
+
+ instantsearch.widgets.pagination({
+ container: '.algolia-pagination',
+ scrollTo : false,
+ showFirst: false,
+ showLast : false,
+ templates: {
+ first : '',
+ last : '',
+ previous: '',
+ next : ''
+ },
+ cssClasses: {
+ list : ['pagination', 'algolia-pagination'],
+ item : 'pagination-item',
+ link : 'page-number',
+ selectedItem: 'current',
+ disabledItem: 'disabled-item'
+ }
+ })
+ ]);
+
+ search.start();
+
+ // Handle and trigger popup window
+ document.querySelectorAll('.popup-trigger').forEach(element => {
+ element.addEventListener('click', () => {
+ document.body.classList.add('search-active');
+ setTimeout(() => document.querySelector('.search-input').focus(), 500);
+ });
+ });
+
+ // Monitor main search box
+ const onPopupClose = () => {
+ document.body.classList.remove('search-active');
+ };
+
+ document.querySelector('.search-pop-overlay').addEventListener('click', event => {
+ if (event.target === document.querySelector('.search-pop-overlay')) {
+ onPopupClose();
+ }
+ });
+ document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose);
+ document.addEventListener('pjax:success', onPopupClose);
+ window.addEventListener('keyup', event => {
+ if (event.key === 'Escape') {
+ onPopupClose();
+ }
+ });
+});
diff --git a/js/third-party/search/local-search.js b/js/third-party/search/local-search.js
new file mode 100644
index 0000000..92a264d
--- /dev/null
+++ b/js/third-party/search/local-search.js
@@ -0,0 +1,99 @@
+/* global CONFIG, pjax, LocalSearch */
+
+document.addEventListener('DOMContentLoaded', () => {
+ if (!CONFIG.path) {
+ // Search DB path
+ console.warn('`hexo-generator-searchdb` plugin is not installed!');
+ return;
+ }
+ const localSearch = new LocalSearch({
+ path : CONFIG.path,
+ top_n_per_article: CONFIG.localsearch.top_n_per_article,
+ unescape : CONFIG.localsearch.unescape
+ });
+
+ const input = document.querySelector('.search-input');
+
+ const inputEventFunction = () => {
+ if (!localSearch.isfetched) return;
+ const searchText = input.value.trim().toLowerCase();
+ const keywords = searchText.split(/[-\s]+/);
+ const container = document.querySelector('.search-result-container');
+ let resultItems = [];
+ if (searchText.length > 0) {
+ // Perform local searching
+ resultItems = localSearch.getResultItems(keywords);
+ }
+ if (keywords.length === 1 && keywords[0] === '') {
+ container.classList.add('no-result');
+ container.innerHTML = '';
+ } else if (resultItems.length === 0) {
+ container.classList.add('no-result');
+ container.innerHTML = '';
+ } else {
+ resultItems.sort((left, right) => {
+ if (left.includedCount !== right.includedCount) {
+ return right.includedCount - left.includedCount;
+ } else if (left.hitCount !== right.hitCount) {
+ return right.hitCount - left.hitCount;
+ }
+ return right.id - left.id;
+ });
+ const stats = CONFIG.i18n.hits.replace('${hits}', resultItems.length);
+
+ container.classList.remove('no-result');
+ container.innerHTML = `${stats}
+ +
- ${resultItems.map(result => result.item).join('')}
');
+ const button = target.querySelector('.copy-btn');
+ button.addEventListener('click', () => {
+ const lines = element.querySelector('.code') || element.querySelector('code');
+ const code = lines.innerText;
+ if (navigator.clipboard) {
+ // https://caniuse.com/mdn-api_clipboard_writetext
+ navigator.clipboard.writeText(code).then(() => {
+ button.querySelector('i').className = 'fa fa-check-circle fa-fw';
+ }, () => {
+ button.querySelector('i').className = 'fa fa-times-circle fa-fw';
+ });
+ } else {
+ const ta = document.createElement('textarea');
+ ta.style.top = window.scrollY + 'px'; // Prevent page scrolling
+ ta.style.position = 'absolute';
+ ta.style.opacity = '0';
+ ta.readOnly = true;
+ ta.value = code;
+ document.body.append(ta);
+ ta.select();
+ ta.setSelectionRange(0, code.length);
+ ta.readOnly = false;
+ const result = document.execCommand('copy');
+ button.querySelector('i').className = result ? 'fa fa-check-circle fa-fw' : 'fa fa-times-circle fa-fw';
+ ta.blur(); // For iOS
+ button.blur();
+ document.body.removeChild(ta);
+ }
+ });
+ element.addEventListener('mouseleave', () => {
+ setTimeout(() => {
+ button.querySelector('i').className = 'fa fa-copy fa-fw';
+ }, 300);
+ });
+ });
+ },
+
+ wrapTableWithBox: function() {
+ document.querySelectorAll('table').forEach(element => {
+ const box = document.createElement('div');
+ box.className = 'table-container';
+ element.wrap(box);
+ });
+ },
+
+ registerVideoIframe: function() {
+ document.querySelectorAll('iframe').forEach(element => {
+ const supported = [
+ 'www.youtube.com',
+ 'player.vimeo.com',
+ 'player.youku.com',
+ 'player.bilibili.com',
+ 'www.tudou.com'
+ ].some(host => element.src.includes(host));
+ if (supported && !element.parentNode.matches('.video-container')) {
+ const box = document.createElement('div');
+ box.className = 'video-container';
+ element.wrap(box);
+ const width = Number(element.width);
+ const height = Number(element.height);
+ if (width && height) {
+ box.style.paddingTop = (height / width * 100) + '%';
+ }
+ }
+ });
+ },
+
+ updateActiveNav: function() {
+ if (!Array.isArray(NexT.utils.sections)) return;
+ let index = NexT.utils.sections.findIndex(element => {
+ return element && element.getBoundingClientRect().top > 10;
+ });
+ if (index === -1) {
+ index = NexT.utils.sections.length - 1;
+ } else if (index > 0) {
+ index--;
+ }
+ this.activateNavByIndex(index);
+ },
+
+ registerScrollPercent: function() {
+ const backToTop = document.querySelector('.back-to-top');
+ const readingProgressBar = document.querySelector('.reading-progress-bar');
+ // For init back to top in sidebar if page was scrolled after page refresh.
+ window.addEventListener('scroll', () => {
+ if (backToTop || readingProgressBar) {
+ const contentHeight = document.body.scrollHeight - window.innerHeight;
+ const scrollPercent = contentHeight > 0 ? Math.min(100 * window.scrollY / contentHeight, 100) : 0;
+ if (backToTop) {
+ backToTop.classList.toggle('back-to-top-on', Math.round(scrollPercent) >= 5);
+ backToTop.querySelector('span').innerText = Math.round(scrollPercent) + '%';
+ }
+ if (readingProgressBar) {
+ readingProgressBar.style.setProperty('--progress', scrollPercent.toFixed(2) + '%');
+ }
+ }
+ this.updateActiveNav();
+ }, { passive: true });
+
+ backToTop && backToTop.addEventListener('click', () => {
+ window.anime({
+ targets : document.scrollingElement,
+ duration : 500,
+ easing : 'linear',
+ scrollTop: 0
+ });
+ });
+ },
+
+ /**
+ * Tabs tag listener (without twitter bootstrap).
+ */
+ registerTabsTag: function() {
+ // Binding `nav-tabs` & `tab-content` by real time permalink changing.
+ document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
+ element.addEventListener('click', event => {
+ event.preventDefault();
+ // Prevent selected tab to select again.
+ if (element.classList.contains('active')) return;
+ const nav = element.parentNode;
+ // Get the height of `tab-pane` which is activated before, and set it as the height of `tab-content` with extra margin / paddings.
+ const tabContent = nav.nextElementSibling;
+ tabContent.style.overflow = 'hidden';
+ tabContent.style.transition = 'height 1s';
+ // Comment system selection tab does not contain .active class.
+ const activeTab = tabContent.querySelector('.active') || tabContent.firstElementChild;
+ // Hight might be `auto`.
+ const prevHeight = parseInt(window.getComputedStyle(activeTab).height.replace('px', ''), 10) || 0;
+ const paddingTop = parseInt(window.getComputedStyle(activeTab).paddingTop.replace('px', ''), 10);
+ const marginBottom = parseInt(window.getComputedStyle(activeTab.firstElementChild).marginBottom.replace('px', ''), 10);
+ tabContent.style.height = prevHeight + paddingTop + marginBottom + 'px';
+ // Add & Remove active class on `nav-tabs` & `tab-content`.
+ [...nav.children].forEach(target => {
+ target.classList.toggle('active', target === element);
+ });
+ // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
+ const tActive = document.getElementById(element.querySelector('a').getAttribute('href').replace('#', ''));
+ [...tActive.parentNode.children].forEach(target => {
+ target.classList.toggle('active', target === tActive);
+ });
+ // Trigger event
+ tActive.dispatchEvent(new Event('tabs:click', {
+ bubbles: true
+ }));
+ // Get the height of `tab-pane` which is activated now.
+ const hasScrollBar = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
+ const currHeight = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).height.replace('px', ''), 10);
+ // Reset the height of `tab-content` and see the animation.
+ tabContent.style.height = currHeight + paddingTop + marginBottom + 'px';
+ // Change the height of `tab-content` may cause scrollbar show / disappear, which may result in the change of the `tab-pane`'s height
+ setTimeout(() => {
+ if ((document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) !== hasScrollBar) {
+ tabContent.style.transition = 'height 0.3s linear';
+ // After the animation, we need reset the height of `tab-content` again.
+ const currHeightAfterScrollBarChange = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).height.replace('px', ''), 10);
+ tabContent.style.height = currHeightAfterScrollBarChange + paddingTop + marginBottom + 'px';
+ }
+ // Remove all the inline styles, and let the height be adaptive again.
+ setTimeout(() => {
+ tabContent.style.transition = '';
+ tabContent.style.height = '';
+ }, 250);
+ }, 1000);
+ if (!CONFIG.stickytabs) return;
+ const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
+ window.anime({
+ targets : document.scrollingElement,
+ duration : 500,
+ easing : 'linear',
+ scrollTop: offset
+ });
+ });
+ });
+
+ window.dispatchEvent(new Event('tabs:register'));
+ },
+
+ registerCanIUseTag: function() {
+ // Get responsive height passed from iframe.
+ window.addEventListener('message', ({ data }) => {
+ if (typeof data === 'string' && data.includes('ciu_embed')) {
+ const featureID = data.split(':')[1];
+ const height = data.split(':')[2];
+ document.querySelector(`iframe[data-feature=${featureID}]`).style.height = parseInt(height, 10) + 5 + 'px';
+ }
+ }, false);
+ },
+
+ registerActiveMenuItem: function() {
+ document.querySelectorAll('.menu-item a[href]').forEach(target => {
+ const isSamePath = target.pathname === location.pathname || target.pathname === location.pathname.replace('index.html', '');
+ const isSubPath = !CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname);
+ target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
+ });
+ },
+
+ registerLangSelect: function() {
+ const selects = document.querySelectorAll('.lang-select');
+ selects.forEach(sel => {
+ sel.value = CONFIG.page.lang;
+ sel.addEventListener('change', () => {
+ const target = sel.options[sel.selectedIndex];
+ document.querySelectorAll('.lang-select-label span').forEach(span => {
+ span.innerText = target.text;
+ });
+ // Disable Pjax to force refresh translation of menu item
+ window.location.href = target.dataset.href;
+ });
+ });
+ },
+
+ registerSidebarTOC: function() {
+ this.sections = [...document.querySelectorAll('.post-toc:not(.placeholder-toc) li a.nav-link')].map(element => {
+ const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
+ // TOC item animation navigate.
+ element.addEventListener('click', event => {
+ event.preventDefault();
+ const offset = target.getBoundingClientRect().top + window.scrollY;
+ window.anime({
+ targets : document.scrollingElement,
+ duration : 500,
+ easing : 'linear',
+ scrollTop: offset,
+ complete : () => {
+ history.pushState(null, document.title, element.href);
+ }
+ });
+ });
+ return target;
+ });
+ this.updateActiveNav();
+ },
+
+ registerPostReward: function() {
+ const button = document.querySelector('.reward-container button');
+ if (!button) return;
+ button.addEventListener('click', () => {
+ document.querySelector('.post-reward').classList.toggle('active');
+ });
+ },
+
+ activateNavByIndex: function(index) {
+ const nav = document.querySelector('.post-toc:not(.placeholder-toc) .nav');
+ if (!nav) return;
+
+ const navItemList = nav.querySelectorAll('.nav-item');
+ const target = navItemList[index];
+ if (!target || target.classList.contains('active-current')) return;
+
+ const singleHeight = navItemList[navItemList.length - 1].offsetHeight;
+
+ nav.querySelectorAll('.active').forEach(navItem => {
+ navItem.classList.remove('active', 'active-current');
+ });
+ target.classList.add('active', 'active-current');
+
+ let activateEle = target.querySelector('.nav-child') || target.parentElement;
+ let navChildHeight = 0;
+
+ while (nav.contains(activateEle)) {
+ if (activateEle.classList.contains('nav-item')) {
+ activateEle.classList.add('active');
+ } else { // .nav-child or .nav
+ // scrollHeight isn't reliable for transitioning child items.
+ // The last nav-item in a list has a margin-bottom of 5px.
+ navChildHeight += (singleHeight * activateEle.childElementCount) + 5;
+ activateEle.style.setProperty('--height', `${navChildHeight}px`);
+ }
+ activateEle = activateEle.parentElement;
+ }
+
+ // Scrolling to center active TOC element if TOC content is taller then viewport.
+ const tocElement = document.querySelector(CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini' ? '.sidebar-panel-container' : '.sidebar');
+ if (!document.querySelector('.sidebar-toc-active')) return;
+ window.anime({
+ targets : tocElement,
+ duration : 200,
+ easing : 'linear',
+ scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
+ });
+ },
+
+ updateSidebarPosition: function() {
+ if (window.innerWidth < 1200 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
+ // Expand sidebar on post detail page by default, when post has a toc.
+ const hasTOC = document.querySelector('.post-toc:not(.placeholder-toc)');
+ let display = CONFIG.page.sidebar;
+ if (typeof display !== 'boolean') {
+ // There's no definition sidebar in the page front-matter.
+ display = CONFIG.sidebar.display === 'always' || (CONFIG.sidebar.display === 'post' && hasTOC);
+ }
+ if (display) {
+ window.dispatchEvent(new Event('sidebar:show'));
+ }
+ },
+
+ activateSidebarPanel: function(index) {
+ const sidebar = document.querySelector('.sidebar-inner');
+ const activeClassNames = ['sidebar-toc-active', 'sidebar-overview-active'];
+ if (sidebar.classList.contains(activeClassNames[index])) return;
+
+ const panelContainer = sidebar.querySelector('.sidebar-panel-container');
+ const tocPanel = panelContainer.firstElementChild;
+ const overviewPanel = panelContainer.lastElementChild;
+
+ let postTOCHeight = tocPanel.scrollHeight;
+ // For TOC activation, try to use the animated TOC height
+ if (index === 0) {
+ const nav = tocPanel.querySelector('.nav');
+ if (nav) {
+ postTOCHeight = parseInt(nav.style.getPropertyValue('--height'), 10);
+ }
+ }
+ const panelHeights = [
+ postTOCHeight,
+ overviewPanel.scrollHeight
+ ];
+ panelContainer.style.setProperty('--inactive-panel-height', `${panelHeights[1 - index]}px`);
+ panelContainer.style.setProperty('--active-panel-height', `${panelHeights[index]}px`);
+
+ sidebar.classList.replace(activeClassNames[1 - index], activeClassNames[index]);
+ },
+
+ getScript: function(src, options = {}, legacyCondition) {
+ if (typeof options === 'function') {
+ return this.getScript(src, {
+ condition: legacyCondition
+ }).then(options);
+ }
+ const {
+ condition = false,
+ attributes: {
+ id = '',
+ async = false,
+ defer = false,
+ crossOrigin = '',
+ dataset = {},
+ ...otherAttributes
+ } = {},
+ parentNode = null
+ } = options;
+ return new Promise((resolve, reject) => {
+ if (condition) {
+ resolve();
+ } else {
+ const script = document.createElement('script');
+
+ if (id) script.id = id;
+ if (crossOrigin) script.crossOrigin = crossOrigin;
+ script.async = async;
+ script.defer = defer;
+ Object.assign(script.dataset, dataset);
+ Object.entries(otherAttributes).forEach(([name, value]) => {
+ script.setAttribute(name, String(value));
+ });
+
+ script.onload = resolve;
+ script.onerror = reject;
+
+ if (typeof src === 'object') {
+ const { url, integrity } = src;
+ script.src = url;
+ if (integrity) {
+ script.integrity = integrity;
+ script.crossOrigin = 'anonymous';
+ }
+ } else {
+ script.src = src;
+ }
+ (parentNode || document.head).appendChild(script);
+ }
+ });
+ },
+
+ loadComments: function(selector, legacyCallback) {
+ if (legacyCallback) {
+ return this.loadComments(selector).then(legacyCallback);
+ }
+ return new Promise(resolve => {
+ const element = document.querySelector(selector);
+ if (!CONFIG.comments.lazyload || !element) {
+ resolve();
+ return;
+ }
+ const intersectionObserver = new IntersectionObserver((entries, observer) => {
+ const entry = entries[0];
+ if (!entry.isIntersecting) return;
+
+ resolve();
+ observer.disconnect();
+ });
+ intersectionObserver.observe(element);
+ });
+ }
+};
diff --git a/placeholder b/placeholder
deleted file mode 100644
index e69de29..0000000