1
0
mirror of https://github.com/suk-ws/ph-Bookshelf.git synced 2024-12-05 01:16:53 +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:
A.C.Sukazyo Eyre 2023-01-27 19:10:05 +08:00
parent bc1f108f02
commit 4b5a33278f
Signed by: Eyre_S
GPG Key ID: C17CE40291207874
7 changed files with 144 additions and 6 deletions

View 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);

View 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;
}

View 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
View File

@ -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": "*",

View File

@ -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";

View File

@ -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",
);

View File

@ -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~~