hexo-theme-shokax 0.2.8 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gitattribute +1 -0
- package/README.md +4 -4
- package/README_en.MD +4 -4
- package/_config.yml +5 -5
- package/_images.yml +1 -1
- package/layout/_mixin/comment.pug +2 -1
- package/layout/_partials/footer.pug +1 -1
- package/layout/_partials/layout.pug +9 -8
- package/layout/_partials/post/nav.pug +1 -1
- package/layout/_partials/third-party/google-analytics.pug +10 -0
- package/layout/post.pug +2 -1
- package/package.json +10 -12
- package/scripts/helpers/asset.js +1 -1
- package/scripts/plugin/lib/injects.js +4 -0
- package/source/css/_common/components/tags/tabs.styl +0 -1
- package/source/css/_common/scaffolding/base.styl +4 -3
- package/source/css/comment.styl +0 -2
- package/source/js/_app/components.js +26 -27
- package/source/js/_app/fireworks.js +28 -42
- package/source/js/_app/global.js +23 -23
- package/source/js/_app/library.js +38 -43
- package/source/js/_app/page.js +76 -77
- package/source/js/_app/player.js +87 -91
- package/source/js/_app/vue.js +6 -6
package/.gitattribute
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
* text=auto eol=lf
|
package/README.md
CHANGED
@@ -7,11 +7,11 @@
|
|
7
7
|

|
8
8
|

|
9
9
|
|
10
|
-
语言(language): 简体中文 | [English](./README_en.
|
10
|
+
语言(language): 简体中文 | [English](./README_en.MD) \
|
11
11
|
此项目是shoka的一个二次开发版(算精神续作),致力于提高性能和优化魔改体验 \
|
12
|
-
诞生原因是目前shoka已经两年没有更新了,积压了大量BUG
|
12
|
+
诞生原因是目前shoka已经两年没有更新了,积压了大量BUG和功能请求。
|
13
13
|
|
14
|
-
shokaX的社区资源导航和插件仓库为[awesome-shokaX](https://github.com/
|
14
|
+
shokaX的社区资源导航和插件仓库为[awesome-shokaX](https://github.com/theme-shoka-x/awesome-shokaX)
|
15
15
|
|
16
16
|
## 💬 和shoka的区别
|
17
17
|
原先shoka使用了javascript+Native+nunjucks的技术 \
|
@@ -75,7 +75,7 @@ GPL许可证主要目的是限制修改后的分发行为,避免未经许可
|
|
75
75
|
| hexo-theme-shoka | amehime | 本项目的父主题 |
|
76
76
|
|
77
77
|
## 开发者们
|
78
|
-
[](https://github.com/theme-shoka-x/hexo-theme-shokaX/graphs/contributors)
|
79
79
|
|
80
80
|
## 特别鸣谢
|
81
81
|
[<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" width="25%">](https://jb.gg/OpenSourceSupport)
|
package/README_en.MD
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
If the repository address you are visiting is zkz098/hexo-theme-shokaX
|
1
|
+
If the repository address you are visiting is **zkz098/hexo-theme-shokaX**, please switch to the latest address: [theme-shoka-x/hexo-theme-shokaX](https://github.com/theme-shoka-x/hexo-theme-shokaX)
|
2
2
|
|
3
3
|
# hexo-theme-shokaX
|
4
4
|
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fzkz098%2Fhexo-theme-shokaX?ref=badge_shield)
|
@@ -11,7 +11,7 @@ Language: [简体中文](./README.md) | English \
|
|
11
11
|
This project is a secondary development version of shoka (spiritual sequel), dedicated to improving performance and optimizing modding experience.
|
12
12
|
The reason for its birth is that shoka has not been updated for two years, with a large backlog of bugs and feature requests.
|
13
13
|
|
14
|
-
The community resource navigation and plugin repository for shokaX is awesome-shokaX.
|
14
|
+
The community resource navigation and plugin repository for shokaX is [awesome-shokaX](https://github.com/theme-shoka-x/awesome-shokaX)
|
15
15
|
|
16
16
|
## 💬 Differences with shoka
|
17
17
|
The original shoka used javascript+Native+nunjucks technology, while shokaX uses typescript+Vue 3+Pug technology and has changed a lot of hard-to-access CDN links.
|
@@ -30,7 +30,7 @@ Remarks:
|
|
30
30
|
- *: Requires implementation using Injection API.
|
31
31
|
|
32
32
|
## 🔧 How to Install?
|
33
|
-
It is recommended to use [ShokaX-CLI](https://github.com/
|
33
|
+
It is recommended to use [ShokaX-CLI](https://github.com/theme-shoka-x/shokaX-CLI) and execute the following command:
|
34
34
|
```bash
|
35
35
|
npm i shokax-cli --location=global
|
36
36
|
# hexo init initializes the environment
|
@@ -50,7 +50,7 @@ license: GPL 3 or later
|
|
50
50
|
|
51
51
|
## Contributors
|
52
52
|
|
53
|
-
[](https://github.com/theme-shoka-x/hexo-theme-shokaX/graphs/contributors)
|
54
54
|
|
55
55
|
## Special thanks
|
56
56
|
[<img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" width="25%">](https://jb.gg/OpenSourceSupport)
|
package/_config.yml
CHANGED
@@ -61,14 +61,15 @@ seo:
|
|
61
61
|
visitor:
|
62
62
|
clarity: false
|
63
63
|
baiduAnalytics: false
|
64
|
+
googleAnalytics: false
|
64
65
|
|
65
|
-
darkmode:
|
66
|
+
darkmode: true
|
66
67
|
auto_dark: # 自动亮/暗模式
|
67
68
|
enable: true #是否开启
|
68
69
|
start: 20 #开始时间
|
69
70
|
end: 7 #结束时间
|
70
71
|
|
71
|
-
auto_scroll:
|
72
|
+
auto_scroll: false
|
72
73
|
|
73
74
|
loader:
|
74
75
|
start: true # 进入页面时显示加载动画
|
@@ -252,7 +253,7 @@ widgets:
|
|
252
253
|
recent_comments: true
|
253
254
|
|
254
255
|
footer:
|
255
|
-
# Specify the date when the site was
|
256
|
+
# Specify the date when the site was set up. If not defined, current year will be used.
|
256
257
|
since: 2022
|
257
258
|
icon:
|
258
259
|
name: sakura rotate
|
@@ -277,7 +278,7 @@ post:
|
|
277
278
|
|
278
279
|
# 文章是否失效
|
279
280
|
outime:
|
280
|
-
enable:
|
281
|
+
enable: false
|
281
282
|
days: 90 # 超过 90 天文章失效
|
282
283
|
|
283
284
|
reward:
|
@@ -391,7 +392,6 @@ vendorsList:
|
|
391
392
|
js:
|
392
393
|
- pace
|
393
394
|
- pjax
|
394
|
-
# - fetch # polyfill已暂时禁用
|
395
395
|
- anime
|
396
396
|
- algolia
|
397
397
|
- instantsearch
|
package/_images.yml
CHANGED
@@ -34,7 +34,7 @@ div(class="status")
|
|
34
34
|
if beianN && RC
|
35
35
|
br
|
36
36
|
a(target="_blank" href=`https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${RC}`)
|
37
|
-
img(src=theme.statics + theme.assets + '/' + theme.footer.icp.icon style="max-width: 2em;display:inline;")
|
37
|
+
img(src=theme.statics + theme.assets + '/' + theme.footer.icp.icon style="max-width: 2em;display:inline;" width="20" height="20")
|
38
38
|
!= beianN
|
39
39
|
!= shokax_inject('status')
|
40
40
|
|
@@ -83,15 +83,15 @@ html(lang=page.language?page.language:config.language, style=theme.grayMode ? 'f
|
|
83
83
|
empty: "!{__('search.empty')}",
|
84
84
|
stats: "!{__('search.stats')}"
|
85
85
|
},
|
86
|
-
valine:
|
87
|
-
chart:
|
88
|
-
copy_tex:
|
89
|
-
katex:
|
90
|
-
mermaid:
|
86
|
+
valine: #{page.valine ? _safedump(page.valine) : true},
|
87
|
+
chart: #{!!page.chart},
|
88
|
+
copy_tex: #{!!page.math},
|
89
|
+
katex: #{!!page.math},
|
90
|
+
mermaid: #{!!page.mermaid},
|
91
91
|
audio: `#{_safedump(page.audio)}`,
|
92
|
-
fancybox:
|
93
|
-
nocopy:
|
94
|
-
outime:
|
92
|
+
fancybox: #{page.fancybox !== false},
|
93
|
+
nocopy: #{!!page.nocopy},
|
94
|
+
outime: #{page.outime !== false},
|
95
95
|
template: `#{__('outime.template')}`,
|
96
96
|
quiz: {
|
97
97
|
choice: `#{__('quiz.choice')}`,
|
@@ -119,6 +119,7 @@ html(lang=page.language?page.language:config.language, style=theme.grayMode ? 'f
|
|
119
119
|
!= _js('app.js')
|
120
120
|
!= partial('_partials/third-party/baidu-analytics.pug', {}, {cache: true})
|
121
121
|
!= partial('_partials/third-party/clarity.pug', {}, {cache: true})
|
122
|
+
!= partial('_partials/third-party/google-analytics.pug', {}, {cache: true})
|
122
123
|
if theme.twikoo.enable
|
123
124
|
!= _new_comments('twikoo')
|
124
125
|
else if theme.waline.enable
|
@@ -1,7 +1,7 @@
|
|
1
1
|
mixin navpost(item, type)
|
2
2
|
- var postText = item.title || item.link || __('post.untitled')
|
3
3
|
- var lastcat = item.categories.last()
|
4
|
-
- var itemlink
|
4
|
+
- var itemlink = `<span class="type">${__('post.' + type)}</span>${lastcat && lastcat.name ? `<span class="category"><i class="ic i-flag"></i>${lastcat.name}</span>` : ''}<h3>${postText}</h3>`
|
5
5
|
!= _url(item.path, itemlink, {itemprop: 'url', rel: type, 'data-background-image': _cover(item), title: postText})
|
6
6
|
|
7
7
|
div(class="post-nav")
|
@@ -0,0 +1,10 @@
|
|
1
|
+
- var googleId = theme.visitor.googleAnalytics
|
2
|
+
if googleId
|
3
|
+
script(async, src=`https://www.googletagmanager.com/gtag/js?id=${ googleId }`)
|
4
|
+
script(data-pjax=true).
|
5
|
+
window.dataLayer = window.dataLayer || [];
|
6
|
+
function gtag() {
|
7
|
+
dataLayer.push(arguments);
|
8
|
+
}
|
9
|
+
gtag('js', new Date());
|
10
|
+
gtag('config', '#{googleId}');
|
package/layout/post.pug
CHANGED
@@ -11,7 +11,8 @@ block title
|
|
11
11
|
each cat in page.categories.toArray()
|
12
12
|
- var cat_list = cat.name + comma + cat_list
|
13
13
|
- var comma = ' - '
|
14
|
-
|
14
|
+
if cat_list.length !== 0
|
15
|
+
- var page_title = page.title + ' - ' + cat_list
|
15
16
|
!= `${page_title}`
|
16
17
|
|
17
18
|
block header
|
package/package.json
CHANGED
@@ -1,35 +1,33 @@
|
|
1
1
|
{
|
2
2
|
"name": "hexo-theme-shokax",
|
3
|
-
"version": "0.2.
|
3
|
+
"version": "0.2.10",
|
4
4
|
"description": "a hexo theme based on shoka",
|
5
5
|
"main": "index.js",
|
6
6
|
"repository": "https://github.com/theme-shoka-x/hexo-theme-shokaX",
|
7
|
-
"author": "
|
7
|
+
"author": "zkz098",
|
8
8
|
"license": "GPL-3.0-or-later",
|
9
9
|
"scripts": {
|
10
10
|
"test": "tsc",
|
11
11
|
"build": "pnpm install && tsc"
|
12
12
|
},
|
13
13
|
"devDependencies": {
|
14
|
-
|
15
14
|
"@types/fancybox": "^3.5.3",
|
16
15
|
"@types/hexo": "^3.8.8",
|
17
16
|
"@types/jquery": "^3.5.16",
|
18
17
|
"@types/js-yaml": "^4.0.5",
|
19
18
|
"@types/lozad": "^1.16.1",
|
20
|
-
"@types/node": "^20.
|
21
|
-
"@typescript-eslint/eslint-plugin": "^5.59.
|
22
|
-
"@typescript-eslint/parser": "^5.59.
|
23
|
-
|
24
|
-
"eslint": "
|
25
|
-
"eslint-config-standard": "^17.0.0",
|
19
|
+
"@types/node": "^20.2.3",
|
20
|
+
"@typescript-eslint/eslint-plugin": "^5.59.7",
|
21
|
+
"@typescript-eslint/parser": "^5.59.7",
|
22
|
+
"eslint": "^8.41.0",
|
23
|
+
"eslint-config-standard": "*",
|
26
24
|
"eslint-plugin-import": "^2.27.5",
|
27
|
-
"eslint-plugin-n": "^
|
25
|
+
"eslint-plugin-n": "^16.0.0",
|
28
26
|
"eslint-plugin-promise": "^6.1.1",
|
29
|
-
"eslint-plugin-vue": "^9.
|
27
|
+
"eslint-plugin-vue": "^9.14.0",
|
30
28
|
"hexo-fs": "^4.1.1",
|
31
29
|
"hexo-util": "^3.0.1",
|
32
|
-
"instantsearch.js": "^4.
|
30
|
+
"instantsearch.js": "^4.56.0",
|
33
31
|
"theme-shokax-anime": "^0.0.4",
|
34
32
|
"theme-shokax-pjax": "^0.0.2",
|
35
33
|
"typescript": "^5.0.4",
|
package/scripts/helpers/asset.js
CHANGED
@@ -91,7 +91,7 @@ hexo.extend.helper.register('_vendor_font', () => {
|
|
91
91
|
const fontDisplay = '&display=swap';
|
92
92
|
const fontSubset = '&subset=latin,latin-ext';
|
93
93
|
const fontStyles = ':300,300italic,400,400italic,700,700italic';
|
94
|
-
const fontHost = '
|
94
|
+
const fontHost = 'https://fonts.googleapis.com';
|
95
95
|
let fontFamilies = ['global', 'logo', 'title', 'headings', 'posts', 'codes'].map(item => {
|
96
96
|
if (config[item] && config[item].family && config[item].external) {
|
97
97
|
return config[item].family + fontStyles;
|
@@ -8,6 +8,8 @@ const node_path_1 = __importDefault(require("node:path"));
|
|
8
8
|
const injects_point_1 = __importDefault(require("./injects-point"));
|
9
9
|
const defaultExtname = '.pug';
|
10
10
|
class StylusInject {
|
11
|
+
files;
|
12
|
+
base_dir;
|
11
13
|
constructor(base_dir) {
|
12
14
|
this.base_dir = base_dir;
|
13
15
|
this.files = [];
|
@@ -17,6 +19,8 @@ class StylusInject {
|
|
17
19
|
}
|
18
20
|
}
|
19
21
|
class ViewInject {
|
22
|
+
base_dir;
|
23
|
+
raws;
|
20
24
|
constructor(base_dir) {
|
21
25
|
this.base_dir = base_dir;
|
22
26
|
this.raws = [];
|
@@ -148,6 +148,7 @@ input, textarea {
|
|
148
148
|
}
|
149
149
|
@font-face {
|
150
150
|
font-family: 'ic';
|
151
|
+
font-display: swap;
|
151
152
|
src: url('//at.alicdn.com/t/font_' + $iconfont + '.eot');
|
152
153
|
src: url('//at.alicdn.com/t/font_' + $iconfont + '.eot?#iefix') format('embedded-opentype'),
|
153
154
|
url('//at.alicdn.com/t/font_' + $iconfont + '.woff2') format('woff2'),
|
@@ -157,9 +158,9 @@ input, textarea {
|
|
157
158
|
}
|
158
159
|
|
159
160
|
@font-face {
|
160
|
-
|
161
|
-
|
162
|
-
|
161
|
+
font-family: 'jetbrains-mono';
|
162
|
+
font-display: swap;
|
163
|
+
src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@2.242/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
|
163
164
|
}
|
164
165
|
|
165
166
|
.ic {
|
package/source/css/comment.styl
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
const sideBarToggleHandle =
|
1
|
+
const sideBarToggleHandle = (event, force) => {
|
2
2
|
if (sideBar.hasClass('on')) {
|
3
3
|
sideBar.removeClass('on');
|
4
4
|
menuToggle.removeClass('close');
|
@@ -14,25 +14,24 @@ const sideBarToggleHandle = function (event, force) {
|
|
14
14
|
sideBar.style = '';
|
15
15
|
}
|
16
16
|
else {
|
17
|
-
transition(sideBar, 'slideRightIn',
|
17
|
+
transition(sideBar, 'slideRightIn', () => {
|
18
18
|
sideBar.addClass('on');
|
19
19
|
menuToggle.addClass('close');
|
20
20
|
});
|
21
21
|
}
|
22
22
|
}
|
23
23
|
};
|
24
|
-
const sideBarTab =
|
24
|
+
const sideBarTab = () => {
|
25
25
|
const sideBarInner = sideBar.child('.inner');
|
26
|
-
const panels = sideBar.find('.panel');
|
27
26
|
if (sideBar.child('.tab')) {
|
28
27
|
sideBarInner.removeChild(sideBar.child('.tab'));
|
29
28
|
}
|
30
29
|
const list = document.createElement('ul');
|
31
30
|
let active = 'active';
|
32
31
|
list.className = 'tab';
|
33
|
-
['contents', 'related', 'overview'].forEach(
|
32
|
+
['contents', 'related', 'overview'].forEach((item) => {
|
34
33
|
const element = sideBar.child('.panel.' + item);
|
35
|
-
if (element.innerHTML.
|
34
|
+
if (element.innerHTML.trim().length < 1) {
|
36
35
|
if (item === 'contents') {
|
37
36
|
showContents.display('none');
|
38
37
|
}
|
@@ -54,14 +53,14 @@ const sideBarTab = function () {
|
|
54
53
|
else {
|
55
54
|
element.removeClass('active');
|
56
55
|
}
|
57
|
-
tab.addEventListener('click',
|
56
|
+
tab.addEventListener('click', (event) => {
|
58
57
|
const target = event.currentTarget;
|
59
58
|
if (target.hasClass('active'))
|
60
59
|
return;
|
61
|
-
sideBar.find('.tab .item').forEach(
|
60
|
+
sideBar.find('.tab .item').forEach((element) => {
|
62
61
|
element.removeClass('active');
|
63
62
|
});
|
64
|
-
sideBar.find('.panel').forEach(
|
63
|
+
sideBar.find('.panel').forEach((element) => {
|
65
64
|
element.removeClass('active');
|
66
65
|
});
|
67
66
|
sideBar.child('.panel.' + target.className.replace(' item', '')).addClass('active');
|
@@ -78,18 +77,18 @@ const sideBarTab = function () {
|
|
78
77
|
sideBar.child('.panels').style.paddingTop = '.625rem';
|
79
78
|
}
|
80
79
|
};
|
81
|
-
const sidebarTOC =
|
82
|
-
const activateNavByIndex =
|
80
|
+
const sidebarTOC = () => {
|
81
|
+
const activateNavByIndex = (index) => {
|
83
82
|
const target = navItems[index];
|
84
83
|
if (!target)
|
85
84
|
return;
|
86
85
|
if (target.hasClass('current')) {
|
87
86
|
return;
|
88
87
|
}
|
89
|
-
$dom.each('.toc .active',
|
88
|
+
$dom.each('.toc .active', (element) => {
|
90
89
|
element && element.removeClass('active current');
|
91
90
|
});
|
92
|
-
sections.forEach(
|
91
|
+
sections.forEach((element) => {
|
93
92
|
element && element.removeClass('active');
|
94
93
|
});
|
95
94
|
target.addClass('active current');
|
@@ -113,32 +112,32 @@ const sidebarTOC = function () {
|
|
113
112
|
if (navItems.length < 1) {
|
114
113
|
return;
|
115
114
|
}
|
116
|
-
let sections =
|
115
|
+
let sections = [...navItems];
|
117
116
|
let activeLock = null;
|
118
|
-
sections = sections.map(
|
117
|
+
sections = sections.map((element, index) => {
|
119
118
|
const link = element.child('a.toc-link');
|
120
119
|
const anchor = $dom(decodeURI(link.attr('href')));
|
121
120
|
if (!anchor)
|
122
121
|
return null;
|
123
122
|
const alink = anchor.child('a.anchor');
|
124
|
-
const anchorScroll =
|
123
|
+
const anchorScroll = (event) => {
|
125
124
|
event.preventDefault();
|
126
125
|
const target = $dom(decodeURI(event.currentTarget.attr('href')));
|
127
126
|
activeLock = index;
|
128
|
-
pageScroll(target, null,
|
127
|
+
pageScroll(target, null, () => {
|
129
128
|
activateNavByIndex(index);
|
130
129
|
activeLock = null;
|
131
130
|
});
|
132
131
|
};
|
133
132
|
link.addEventListener('click', anchorScroll);
|
134
|
-
alink && alink.addEventListener('click',
|
133
|
+
alink && alink.addEventListener('click', (event) => {
|
135
134
|
anchorScroll(event);
|
136
135
|
clipBoard(CONFIG.hostname + '/' + LOCAL.path + event.currentTarget.attr('href'));
|
137
136
|
});
|
138
137
|
return anchor;
|
139
138
|
});
|
140
139
|
const tocElement = sideBar.child('.contents.panel');
|
141
|
-
const findIndex =
|
140
|
+
const findIndex = (entries) => {
|
142
141
|
let index = 0;
|
143
142
|
let entry = entries[index];
|
144
143
|
if (entry.boundingClientRect.top > 0) {
|
@@ -155,8 +154,8 @@ const sidebarTOC = function () {
|
|
155
154
|
}
|
156
155
|
return sections.indexOf(entry.target);
|
157
156
|
};
|
158
|
-
const createIntersectionObserver =
|
159
|
-
const observer = new IntersectionObserver(
|
157
|
+
const createIntersectionObserver = () => {
|
158
|
+
const observer = new IntersectionObserver((entries) => {
|
160
159
|
const index = findIndex(entries) + (diffY < 0 ? 1 : 0);
|
161
160
|
if (activeLock === null) {
|
162
161
|
activateNavByIndex(index);
|
@@ -164,23 +163,23 @@ const sidebarTOC = function () {
|
|
164
163
|
}, {
|
165
164
|
rootMargin: '0px 0px -100% 0px', threshold: 0
|
166
165
|
});
|
167
|
-
sections.forEach(
|
166
|
+
sections.forEach((element) => {
|
168
167
|
element && observer.observe(element);
|
169
168
|
});
|
170
169
|
};
|
171
170
|
createIntersectionObserver();
|
172
171
|
};
|
173
|
-
const backToTopHandle =
|
172
|
+
const backToTopHandle = () => {
|
174
173
|
pageScroll(0);
|
175
174
|
};
|
176
|
-
const goToBottomHandle =
|
175
|
+
const goToBottomHandle = () => {
|
177
176
|
pageScroll(parseInt(String(Container.changeOrGetHeight())));
|
178
177
|
};
|
179
|
-
const goToCommentHandle =
|
178
|
+
const goToCommentHandle = () => {
|
180
179
|
pageScroll($dom('#comments'));
|
181
180
|
};
|
182
|
-
const menuActive =
|
183
|
-
$dom.each('.menu .item:not(.title)',
|
181
|
+
const menuActive = () => {
|
182
|
+
$dom.each('.menu .item:not(.title)', (element) => {
|
184
183
|
const target = element.child('a[href]');
|
185
184
|
const parentItem = element.parentNode.parentNode;
|
186
185
|
if (!target)
|
@@ -29,51 +29,41 @@ function setParticuleDirection(p) {
|
|
29
29
|
}
|
30
30
|
function createParticule(x, y) {
|
31
31
|
const p = {
|
32
|
-
x
|
33
|
-
y
|
32
|
+
x,
|
33
|
+
y,
|
34
34
|
color: undefined,
|
35
35
|
radius: undefined,
|
36
36
|
endPos: undefined,
|
37
|
-
draw
|
37
|
+
draw() {
|
38
|
+
ctx.beginPath();
|
39
|
+
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
|
40
|
+
ctx.fillStyle = p.color;
|
41
|
+
ctx.fill();
|
42
|
+
}
|
38
43
|
};
|
39
|
-
p.x = x;
|
40
|
-
p.y = y;
|
41
44
|
p.color = colors[anime.random(0, colors.length - 1)];
|
42
45
|
p.radius = anime.random(16, 32);
|
43
46
|
p.endPos = setParticuleDirection(p);
|
44
|
-
p.draw = function () {
|
45
|
-
ctx.beginPath();
|
46
|
-
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
|
47
|
-
ctx.fillStyle = p.color;
|
48
|
-
ctx.fill();
|
49
|
-
};
|
50
47
|
return p;
|
51
48
|
}
|
52
49
|
function createCircle(x, y) {
|
53
50
|
const p = {
|
54
|
-
x
|
55
|
-
y
|
56
|
-
color:
|
57
|
-
radius:
|
51
|
+
x,
|
52
|
+
y,
|
53
|
+
color: '#FFF',
|
54
|
+
radius: 0.1,
|
58
55
|
endPos: undefined,
|
59
|
-
alpha:
|
60
|
-
lineWidth:
|
61
|
-
draw
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
ctx.globalAlpha = p.alpha;
|
71
|
-
ctx.beginPath();
|
72
|
-
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
|
73
|
-
ctx.lineWidth = p.lineWidth;
|
74
|
-
ctx.strokeStyle = p.color;
|
75
|
-
ctx.stroke();
|
76
|
-
ctx.globalAlpha = 1;
|
56
|
+
alpha: 0.5,
|
57
|
+
lineWidth: 6,
|
58
|
+
draw() {
|
59
|
+
ctx.globalAlpha = p.alpha;
|
60
|
+
ctx.beginPath();
|
61
|
+
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
|
62
|
+
ctx.lineWidth = p.lineWidth;
|
63
|
+
ctx.strokeStyle = p.color;
|
64
|
+
ctx.stroke();
|
65
|
+
ctx.globalAlpha = 1;
|
66
|
+
}
|
77
67
|
};
|
78
68
|
return p;
|
79
69
|
}
|
@@ -93,12 +83,8 @@ function animateParticules(x, y) {
|
|
93
83
|
duration: anime.random(1200, 1800),
|
94
84
|
easing: 'easeOutExpo',
|
95
85
|
update: renderParticule,
|
96
|
-
x:
|
97
|
-
|
98
|
-
},
|
99
|
-
y: function (p) {
|
100
|
-
return p.endPos.y;
|
101
|
-
},
|
86
|
+
x: p => p.endPos.x,
|
87
|
+
y: p => p.endPos.y,
|
102
88
|
radius: 0.1
|
103
89
|
}).add({
|
104
90
|
targets: circle,
|
@@ -116,11 +102,11 @@ function animateParticules(x, y) {
|
|
116
102
|
}
|
117
103
|
const render = anime({
|
118
104
|
duration: Infinity,
|
119
|
-
update
|
105
|
+
update() {
|
120
106
|
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
|
121
107
|
}
|
122
108
|
});
|
123
|
-
const hasAncestor =
|
109
|
+
const hasAncestor = (node, name) => {
|
124
110
|
name = name.toUpperCase();
|
125
111
|
do {
|
126
112
|
if (node === null || node === undefined)
|
@@ -130,7 +116,7 @@ const hasAncestor = function (node, name) {
|
|
130
116
|
} while ((node = node.parentNode) !== null);
|
131
117
|
return false;
|
132
118
|
};
|
133
|
-
document.addEventListener(tap,
|
119
|
+
document.addEventListener(tap, (e) => {
|
134
120
|
if (hasAncestor(e.target, 'a')) {
|
135
121
|
return;
|
136
122
|
}
|