mirror of
https://github.com/suk-ws/ph-Bookshelf.git
synced 2024-12-05 09:26:52 +08:00
添加标题permalink链接和指向闪烁功能,添加滚动网页标题插件
- 添加插件 rolling-title 可以使网页标题有滚动向左的效果 - 默认关闭,使用 enhanced.web.web-title.rolling-title = true 打开 - PHP Markdown 添加 Heading_Permalink 插件 - 支持了自动为标题生成同名定位标 - 添加了一个 ⁕ 悬浮的 permalink 按钮 - 添加了插件 heading-permalink-highlights 使标题被定位时 permalink 按钮会产生闪烁效果
This commit is contained in:
parent
bc1f108f02
commit
4b5a33278f
35
assets/bread-card-markdown-heading-permalink-highlight.js
Normal file
35
assets/bread-card-markdown-heading-permalink-highlight.js
Normal file
@ -0,0 +1,35 @@
|
||||
/******************************************************************************
|
||||
##############################################################################
|
||||
##### #####
|
||||
##### JavaScript of ph-Bookshelf of ui design BreadCard #####
|
||||
##### enhanced extension #####
|
||||
##### for ! Permalink Highlight ! #####
|
||||
##### for ¶[Heading Permalink](#heading-permalink) #####
|
||||
##### #####
|
||||
##### @author: Sukazyo Workshop #####
|
||||
##### @version: 1.0 #####
|
||||
##### #####
|
||||
##############################################################################
|
||||
******************************************************************************/
|
||||
|
||||
const headingPermalink_animaTimeoutMs = 150;
|
||||
|
||||
function headingPermalink_onScrollFocused (event) {
|
||||
const node = event.target;
|
||||
node.classList.add("highlighting");
|
||||
sleep(headingPermalink_animaTimeoutMs).then(() => {
|
||||
node.classList.remove("highlighting");
|
||||
sleep(headingPermalink_animaTimeoutMs).then(() => {
|
||||
node.classList.add("highlighting");
|
||||
sleep(headingPermalink_animaTimeoutMs).then(() => {
|
||||
node.classList.remove("highlighting");
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
for (const node of document.getElementsByClassName("heading-permalink")) {
|
||||
node.addEventListener("focus", headingPermalink_onScrollFocused);
|
||||
}
|
||||
|
||||
// document.getElementById("main").addEventListener("scrollend", onHeadingPermalinkScrollFocused);
|
56
assets/bread-card-markdown-heading-permalink.css
Normal file
56
assets/bread-card-markdown-heading-permalink.css
Normal file
@ -0,0 +1,56 @@
|
||||
/******************************************************************************
|
||||
##############################################################################
|
||||
##### #####
|
||||
##### Markdown StyleSheet of ui design BreadCard #####
|
||||
##### extended support #####
|
||||
##### for ¶[Heading Permalink](#heading-permalink) #####
|
||||
##### #####
|
||||
##### @author: Sukazyo Workshop #####
|
||||
##### @version: 1.0 #####
|
||||
##### #####
|
||||
##############################################################################
|
||||
******************************************************************************/
|
||||
|
||||
:root {
|
||||
|
||||
--bcm-permalink-color: #d3d9e0;
|
||||
/*--bcm-permalink-visited-color: #edf0f3;*/
|
||||
--bcm-permalink-activited-color: #99bbe1;
|
||||
|
||||
--bcm-permalink-highlighting-color: #293048;
|
||||
|
||||
--bcm-element-permalink-anima-speed: 0.15s;
|
||||
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) > .heading-permalink {
|
||||
position: absolute;
|
||||
/*z-index: -1;*/
|
||||
top: 0;
|
||||
left: -0.4em;
|
||||
color: var(--bcm-permalink-color);
|
||||
line-height: 0;
|
||||
font-size: 2.6em;
|
||||
font-weight: bolder;
|
||||
opacity: 0.3;
|
||||
transition-duration: var(--bcm-element-permalink-anima-speed);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) > .heading-permalink:visited {
|
||||
color: var(--bcm-permalink-color);
|
||||
/*color: var(--bcm-permalink-visited-color);*/
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) > a.heading-permalink:hover {
|
||||
color: var(--bcm-permalink-activited-color);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) > a.heading-permalink.highlighting {
|
||||
color: var(--bcm-permalink-highlighting-color);
|
||||
opacity: 0.8;
|
||||
}
|
28
assets/enhanced-rolling-title.js
Normal file
28
assets/enhanced-rolling-title.js
Normal file
@ -0,0 +1,28 @@
|
||||
/******************************************************************************
|
||||
##############################################################################
|
||||
##### #####
|
||||
##### Web JavaScripts of ph-Bookshelf #####
|
||||
##### enhanced extension #####
|
||||
##### for [ling-title rol] #####
|
||||
##### #####
|
||||
##### @author: Sukazyo Workshop #####
|
||||
##### @version: 1.0 #####
|
||||
##### #####
|
||||
##############################################################################
|
||||
******************************************************************************/
|
||||
|
||||
const rollingTitle_rollingSpeed = 450;
|
||||
|
||||
function rollingTitle_titleRollChar () {
|
||||
|
||||
let title = document.title;
|
||||
const start = title[0];
|
||||
title = title.substring(1);
|
||||
title += start;
|
||||
document.title = title;
|
||||
|
||||
setTimeout(rollingTitle_titleRollChar, rollingTitle_rollingSpeed);
|
||||
|
||||
}
|
||||
|
||||
rollingTitle_titleRollChar();
|
4
composer.lock
generated
4
composer.lock
generated
@ -4,7 +4,7 @@
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "b17c1b13eef5e26750d8c72ff545c616",
|
||||
"content-hash": "ffafb389bb041261bde7ae336b613721",
|
||||
"packages": [
|
||||
{
|
||||
"name": "dflydev/dot-access-data",
|
||||
@ -809,7 +809,7 @@
|
||||
"prefer-stable": false,
|
||||
"prefer-lowest": false,
|
||||
"platform": {
|
||||
"php": ">=8.0",
|
||||
"php": ">=8.1",
|
||||
"ext-xml": "*",
|
||||
"ext-dom": "*",
|
||||
"ext-mbstring": "*",
|
||||
|
@ -2,6 +2,6 @@
|
||||
|
||||
const APP_NAME = "ph-Bookshelf";
|
||||
|
||||
const VERSION = "0.3.3.1";
|
||||
const VERSION = "0.3.4";
|
||||
const CHANNEL = "suk-ws";
|
||||
const BRANCH = "master";
|
||||
|
@ -44,8 +44,9 @@ class SiteMeta {
|
||||
(PageMeta::getConfigurationLevelPage("customization.article.regex.highlight")=="false")?
|
||||
null:"//cdn.jsdelivr.net/gh/suk-ws/regex-colorizer@master/regex-colorizer-default.min.css",
|
||||
"/assets/bread-card-markdown.css?ver=1",
|
||||
"/assets/bread-card-markdown-footnote.css",
|
||||
"/assets/bread-card-markdown-task-list.css",
|
||||
"/assets/bread-card-markdown-footnote.css?ver=1",
|
||||
"/assets/bread-card-markdown-task-list.css?ver=1",
|
||||
"/assets/bread-card-markdown-heading-permalink.css?ver=1",
|
||||
(PageMeta::getConfigurationLevelPage("customization.article.listing.rainbow.marker")=="true"?
|
||||
"/assets/bread-card-markdown-enhanced-listing-rainbow.css?ver=1":null),
|
||||
"/assets/bread-card-markdown-compat-highlight-js.css?ver=1",
|
||||
@ -63,6 +64,10 @@ class SiteMeta {
|
||||
null:"//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"),
|
||||
(PageMeta::getConfigurationLevelPage("customization.article.regex.highlight")=="false"?
|
||||
null:"//cdn.jsdelivr.net/gh/suk-ws/regex-colorizer@master/regex-colorizer.min.js"),
|
||||
(PageMeta::getConfigurationLevelPage("enhanced.web.web-title.rolling-title")=="true"?
|
||||
"/assets/enhanced-rolling-title.js?ver=1":null),
|
||||
(PageMeta::getConfigurationLevelPage("customization.article.title.permalink.highlight-on-focus")=="true"?
|
||||
"/assets/bread-card-markdown-heading-permalink-highlight.js?ver=1":null),
|
||||
"/assets/utils-touchscreen-event.js?ver=1",
|
||||
"/assets/main.js?ver=1",
|
||||
);
|
||||
|
@ -9,6 +9,7 @@ use League\CommonMark\Extension\Autolink\AutolinkExtension;
|
||||
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
|
||||
use League\CommonMark\Extension\DescriptionList\DescriptionListExtension;
|
||||
use League\CommonMark\Extension\Footnote\FootnoteExtension;
|
||||
use League\CommonMark\Extension\HeadingPermalink\HeadingPermalinkExtension;
|
||||
use League\CommonMark\Extension\Strikethrough\StrikethroughExtension;
|
||||
use League\CommonMark\Extension\Table\TableExtension;
|
||||
use League\CommonMark\Extension\TaskList\TaskListExtension;
|
||||
@ -29,11 +30,24 @@ class Markdown implements PageContentType {
|
||||
|
||||
public static function getDefaultParser (): ConverterInterface {
|
||||
|
||||
$parserConfig = [
|
||||
'heading_permalink' => [
|
||||
'symbol' => "⁕",
|
||||
'insert' => 'after',
|
||||
'id_prefix' => "",
|
||||
'fragment_prefix' => "",
|
||||
'title' => ""
|
||||
]
|
||||
];
|
||||
|
||||
// MarkDown Parser:
|
||||
// CommonMark
|
||||
$parserEnv = new Environment();
|
||||
$parserEnv = new Environment($parserConfig);
|
||||
$parserEnv->addExtension(new CommonMarkCoreExtension());
|
||||
|
||||
// + heading(title) permalink # [title](#title)
|
||||
$parserEnv->addExtension(new HeadingPermalinkExtension());
|
||||
|
||||
// from GitHub Flavor Markdown
|
||||
// + autolink [https://link.to]
|
||||
// + strikethrough ~~removed~~
|
||||
|
Loading…
Reference in New Issue
Block a user