225 lines
8.3 KiB
JavaScript
225 lines
8.3 KiB
JavaScript
|
|
/*!
|
||
|
|
* Argon 主题辅助 JavaScript 文件
|
||
|
|
* 包含 jQuery 插件注册
|
||
|
|
* 版本: 3.3.3
|
||
|
|
*/
|
||
|
|
|
||
|
|
// 等待 jQuery 加载后注册插件
|
||
|
|
(function() {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
function initPlugins() {
|
||
|
|
if (typeof jQuery === 'undefined') {
|
||
|
|
setTimeout(initPlugins, 10);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var $ = jQuery;
|
||
|
|
|
||
|
|
// 注册 headIndex 插件(目录生成)
|
||
|
|
if (typeof $.fn.headIndex === 'undefined') {
|
||
|
|
$.fn.headIndex = function(options) {
|
||
|
|
var defaults = {
|
||
|
|
articleWrapSelector: '#post_content',
|
||
|
|
indexBoxSelector: '#leftbar_catalog',
|
||
|
|
subItemBoxClass: 'index-subItem-box',
|
||
|
|
scrollOffset: 80,
|
||
|
|
activeClass: 'active'
|
||
|
|
};
|
||
|
|
|
||
|
|
var settings = $.extend({}, defaults, options);
|
||
|
|
var $articleWrap = $(settings.articleWrapSelector);
|
||
|
|
var $indexBox = $(settings.indexBoxSelector);
|
||
|
|
|
||
|
|
if (!$articleWrap.length || !$indexBox.length) {
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
var $headings = $articleWrap.find('h1, h2, h3, h4, h5, h6');
|
||
|
|
|
||
|
|
if ($headings.length === 0) {
|
||
|
|
$indexBox.html('<div class="no-catalog">暂无目录</div>');
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 生成目录 HTML
|
||
|
|
var catalogHtml = '<ul class="catalog-list">';
|
||
|
|
var minLevel = 6;
|
||
|
|
|
||
|
|
$headings.each(function() {
|
||
|
|
var level = parseInt(this.tagName.substring(1));
|
||
|
|
if (level < minLevel) minLevel = level;
|
||
|
|
});
|
||
|
|
|
||
|
|
$headings.each(function(index) {
|
||
|
|
var $heading = $(this);
|
||
|
|
var level = parseInt(this.tagName.substring(1));
|
||
|
|
var text = $heading.text().trim();
|
||
|
|
var id = $heading.attr('id') || 'heading-' + index;
|
||
|
|
|
||
|
|
if (!$heading.attr('id')) {
|
||
|
|
$heading.attr('id', id);
|
||
|
|
}
|
||
|
|
|
||
|
|
var indent = (level - minLevel) * 15;
|
||
|
|
catalogHtml += '<li style="padding-left: ' + indent + 'px;">' +
|
||
|
|
'<a href="#' + id + '" class="catalog-link" data-target="' + id + '">' +
|
||
|
|
text + '</a></li>';
|
||
|
|
});
|
||
|
|
|
||
|
|
catalogHtml += '</ul>';
|
||
|
|
$indexBox.html(catalogHtml);
|
||
|
|
|
||
|
|
// 点击事件
|
||
|
|
$indexBox.off('click.headIndex').on('click.headIndex', '.catalog-link', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
var targetId = $(this).data('target');
|
||
|
|
var $target = $('#' + targetId);
|
||
|
|
|
||
|
|
if ($target.length) {
|
||
|
|
$('html, body').animate({
|
||
|
|
scrollTop: $target.offset().top - settings.scrollOffset
|
||
|
|
}, 500);
|
||
|
|
|
||
|
|
$indexBox.find('.catalog-link').removeClass(settings.activeClass);
|
||
|
|
$(this).addClass(settings.activeClass);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 滚动高亮
|
||
|
|
var throttleTimer = null;
|
||
|
|
$(window).off('scroll.headIndex').on('scroll.headIndex', function() {
|
||
|
|
if (throttleTimer) clearTimeout(throttleTimer);
|
||
|
|
|
||
|
|
throttleTimer = setTimeout(function() {
|
||
|
|
var scrollTop = $(window).scrollTop();
|
||
|
|
var currentHeading = null;
|
||
|
|
|
||
|
|
$headings.each(function() {
|
||
|
|
var headingTop = $(this).offset().top - settings.scrollOffset - 50;
|
||
|
|
if (scrollTop >= headingTop) {
|
||
|
|
currentHeading = $(this).attr('id');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (currentHeading) {
|
||
|
|
$indexBox.find('.catalog-link').removeClass(settings.activeClass);
|
||
|
|
$indexBox.find('.catalog-link[data-target="' + currentHeading + '"]')
|
||
|
|
.addClass(settings.activeClass);
|
||
|
|
}
|
||
|
|
}, 100);
|
||
|
|
});
|
||
|
|
|
||
|
|
return this;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// 注册简化版 tooltip 插件
|
||
|
|
if (typeof $.fn.tooltip === 'undefined') {
|
||
|
|
$.fn.tooltip = function(option) {
|
||
|
|
return this.each(function() {
|
||
|
|
var $el = $(this);
|
||
|
|
var title = $el.attr('title') || $el.attr('tooltip') || $el.data('original-title');
|
||
|
|
|
||
|
|
if (!title || $el.data('tooltip-bindings')) return;
|
||
|
|
|
||
|
|
$el.data('tooltip-bindings', true);
|
||
|
|
$el.attr('data-original-title', title).removeAttr('title');
|
||
|
|
|
||
|
|
$el.on('mouseenter.simpleTooltip', function() {
|
||
|
|
var $tip = $('<div class="simple-tooltip">' + title + '</div>');
|
||
|
|
$('body').append($tip);
|
||
|
|
|
||
|
|
var offset = $el.offset();
|
||
|
|
var tipWidth = $tip.outerWidth();
|
||
|
|
var tipHeight = $tip.outerHeight();
|
||
|
|
|
||
|
|
$tip.css({
|
||
|
|
position: 'absolute',
|
||
|
|
top: offset.top - tipHeight - 8,
|
||
|
|
left: offset.left + ($el.outerWidth() - tipWidth) / 2,
|
||
|
|
zIndex: 10000
|
||
|
|
});
|
||
|
|
|
||
|
|
$el.data('tooltip-el', $tip);
|
||
|
|
});
|
||
|
|
|
||
|
|
$el.on('mouseleave.simpleTooltip', function() {
|
||
|
|
var $tip = $el.data('tooltip-el');
|
||
|
|
if ($tip) $tip.remove();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
$.fn.tooltip.Constructor = function() {};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 立即执行
|
||
|
|
initPlugins();
|
||
|
|
})();
|
||
|
|
|
||
|
|
// 添加样式
|
||
|
|
(function() {
|
||
|
|
var styles = document.createElement('style');
|
||
|
|
styles.textContent = [
|
||
|
|
'.simple-tooltip {',
|
||
|
|
' background: rgba(0,0,0,0.85);',
|
||
|
|
' color: #fff;',
|
||
|
|
' padding: 5px 10px;',
|
||
|
|
' border-radius: 4px;',
|
||
|
|
' font-size: 12px;',
|
||
|
|
' white-space: nowrap;',
|
||
|
|
' box-shadow: 0 2px 8px rgba(0,0,0,0.15);',
|
||
|
|
' animation: tooltipFadeIn 0.2s ease;',
|
||
|
|
'}',
|
||
|
|
'@keyframes tooltipFadeIn {',
|
||
|
|
' from { opacity: 0; transform: translateY(5px); }',
|
||
|
|
' to { opacity: 1; transform: translateY(0); }',
|
||
|
|
'}',
|
||
|
|
'.catalog-list {',
|
||
|
|
' list-style: none;',
|
||
|
|
' padding: 0;',
|
||
|
|
' margin: 0;',
|
||
|
|
'}',
|
||
|
|
'.catalog-list li {',
|
||
|
|
' margin: 5px 0;',
|
||
|
|
'}',
|
||
|
|
'.catalog-link {',
|
||
|
|
' display: block;',
|
||
|
|
' padding: 5px 10px;',
|
||
|
|
' color: #666;',
|
||
|
|
' text-decoration: none;',
|
||
|
|
' border-radius: 4px;',
|
||
|
|
' transition: all 0.2s ease;',
|
||
|
|
' font-size: 14px;',
|
||
|
|
' line-height: 1.4;',
|
||
|
|
' overflow: hidden;',
|
||
|
|
' text-overflow: ellipsis;',
|
||
|
|
' white-space: nowrap;',
|
||
|
|
'}',
|
||
|
|
'.catalog-link:hover {',
|
||
|
|
' background: rgba(94,114,228,0.1);',
|
||
|
|
' color: #5e72e4;',
|
||
|
|
' text-decoration: none;',
|
||
|
|
'}',
|
||
|
|
'.catalog-link.active {',
|
||
|
|
' background: var(--themecolor, #5e72e4);',
|
||
|
|
' color: #fff;',
|
||
|
|
'}',
|
||
|
|
'.no-catalog {',
|
||
|
|
' padding: 20px;',
|
||
|
|
' text-align: center;',
|
||
|
|
' color: #999;',
|
||
|
|
' font-size: 14px;',
|
||
|
|
'}'
|
||
|
|
].join('\n');
|
||
|
|
|
||
|
|
if (document.head) {
|
||
|
|
document.head.appendChild(styles);
|
||
|
|
} else {
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
document.head.appendChild(styles);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})();
|