refactor: Improve performance
This commit is contained in:
roffy3051
parent
14c5e0c86c
commit
41bf6caeb8
138
assets/script.js
Normal file
138
assets/script.js
Normal file
@ -0,0 +1,138 @@
|
||||
(function () {
|
||||
const btn = document.getElementById('get');
|
||||
const img = document.getElementById('result');
|
||||
const code = document.getElementById('code');
|
||||
|
||||
btn.addEventListener('click', throttle(() => {
|
||||
const $name = document.getElementById('name'),
|
||||
$theme = document.getElementById('theme'),
|
||||
$padding = document.getElementById('padding'),
|
||||
$offset = document.getElementById('offset'),
|
||||
$scale = document.getElementById('scale'),
|
||||
$pixelated = document.getElementById('pixelated'),
|
||||
$darkmode = document.getElementById('darkmode')
|
||||
|
||||
const name = $name.value.trim();
|
||||
if (!name) {
|
||||
alert('Please input counter name.');
|
||||
return;
|
||||
}
|
||||
|
||||
party.confetti(btn, { count: party.variation.range(20, 40) });
|
||||
|
||||
const params = {
|
||||
name,
|
||||
theme: $theme.value || 'moebooru',
|
||||
padding: $padding.value || '7',
|
||||
offset: $offset.value || '0',
|
||||
scale: $scale.value || '1',
|
||||
pixelated: $pixelated.checked ? '1' : '0',
|
||||
darkmode: $darkmode.value || 'auto',
|
||||
}
|
||||
|
||||
const query = new URLSearchParams(params).toString();
|
||||
img.src = `${__global_data.site}/@${name}?${query}`;
|
||||
code.textContent = img.src;
|
||||
code.style.visibility = 'visible';
|
||||
|
||||
img.onload = () => img.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
||||
}, 500));
|
||||
|
||||
code.addEventListener('click', (e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
const target = e.target;
|
||||
if (document.body.createTextRange) {
|
||||
const range = document.body.createTextRange();
|
||||
range.moveToElementText(target);
|
||||
range.select();
|
||||
} else if (window.getSelection) {
|
||||
const selection = window.getSelection();
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(target);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
}
|
||||
})
|
||||
|
||||
const mainTitle = document.querySelector('#main_title i');
|
||||
const themes = document.querySelector('#themes');
|
||||
const moreTheme = document.querySelector('#more_theme');
|
||||
|
||||
mainTitle.addEventListener('click', throttle(() => {
|
||||
party.sparkles(document.documentElement, { count: party.variation.range(40, 100) });
|
||||
}, 1000));
|
||||
|
||||
moreTheme.addEventListener('click', () => {
|
||||
if (!themes.hasAttribute('open')) {
|
||||
party.sparkles(moreTheme.querySelector('h3'), { count: party.variation.range(20, 40) });
|
||||
themes.scrollIntoView({ block: 'start', behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
|
||||
function throttle(fn, threshold = 250) {
|
||||
let last;
|
||||
let deferTimer;
|
||||
return function (...args) {
|
||||
const context = this;
|
||||
const now = Date.now();
|
||||
if (last && now < last + threshold) {
|
||||
clearTimeout(deferTimer);
|
||||
deferTimer = setTimeout(() => {
|
||||
last = now;
|
||||
fn.apply(context, args);
|
||||
}, threshold);
|
||||
} else {
|
||||
last = now;
|
||||
fn.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
(() => {
|
||||
let isShow = false;
|
||||
let lock = false;
|
||||
const btn = document.querySelector('.back-to-top');
|
||||
|
||||
const handleScroll = () => {
|
||||
if (lock) return;
|
||||
|
||||
if (document.body.scrollTop >= 1000) {
|
||||
if (!isShow) {
|
||||
btn.classList.add('load');
|
||||
isShow = true;
|
||||
}
|
||||
} else {
|
||||
if (isShow) {
|
||||
btn.classList.remove('load');
|
||||
isShow = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
lock = true;
|
||||
btn.classList.add('ani-leave');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
|
||||
setTimeout(() => {
|
||||
btn.classList.remove('ani-leave');
|
||||
btn.classList.add('leaved');
|
||||
}, 390);
|
||||
|
||||
setTimeout(() => btn.classList.add('ending'), 120);
|
||||
setTimeout(() => btn.classList.remove('load'), 1500);
|
||||
|
||||
setTimeout(() => {
|
||||
lock = false;
|
||||
isShow = false;
|
||||
btn.classList.remove('leaved', 'ending');
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
btn.addEventListener('click', handleClick);
|
||||
})();
|
||||
161
views/index.pug
161
views/index.pug
@ -21,7 +21,11 @@ html
|
||||
'event_label' : label
|
||||
});
|
||||
}
|
||||
script(async, src='https://unpkg.com/party-js@2/bundle/party.min.js')
|
||||
|
||||
script.
|
||||
var __global_data = {
|
||||
site: "#{site}"
|
||||
};
|
||||
|
||||
style.
|
||||
html {
|
||||
@ -47,15 +51,16 @@ html
|
||||
code 
|
||||
|
||||
h5 e.g.
|
||||
<img src="#{site}/@index" alt="Moe Counter!" />
|
||||
img(src=`${site}/@index` alt="Moe Counter!")
|
||||
|
||||
details#themes(style='margin-top: 2em;')
|
||||
summary#more_theme(onclick='_evt_push("click", "normal", "more_theme")')
|
||||
h3(style='display: inline-block; margin: 0; cursor: pointer;') More theme✨
|
||||
p(style='margin: 0;') Just use the query parameters <code>theme</code>, like this: <code>#{site}/@:name?theme=moebooru</code>
|
||||
each theme in Object.keys(themeList)
|
||||
div.item(data-theme=theme)
|
||||
h5 #{theme}
|
||||
<img src="#{site}/@demo?theme=#{theme}" alt="#{theme}" />
|
||||
img(src=`${site}/@demo?theme=${theme}` alt=theme)
|
||||
|
||||
h3 Credits
|
||||
ul
|
||||
@ -97,7 +102,7 @@ html
|
||||
select#theme
|
||||
option(value="random", selected) * random
|
||||
each theme in Object.keys(themeList)
|
||||
<option value="#{theme}">#{theme}</option>
|
||||
option(value=theme) #{theme}
|
||||
tr
|
||||
td
|
||||
code padding
|
||||
@ -148,149 +153,5 @@ html
|
||||
|
||||
div.back-to-top
|
||||
|
||||
script.
|
||||
(function () {
|
||||
var btn = document.getElementById('get'),
|
||||
img = document.getElementById('result'),
|
||||
code = document.getElementById('code')
|
||||
|
||||
btn.addEventListener('click', throttle(function() {
|
||||
var $name = document.getElementById('name'),
|
||||
$theme = document.getElementById('theme'),
|
||||
$padding = document.getElementById('padding'),
|
||||
$offset = document.getElementById('offset'),
|
||||
$scale = document.getElementById('scale'),
|
||||
$pixelated = document.getElementById('pixelated'),
|
||||
$darkmode = document.getElementById('darkmode')
|
||||
|
||||
var name = $name.value ? $name.value.trim() : ''
|
||||
|
||||
if(!name) {
|
||||
alert('Please input counter name.')
|
||||
return
|
||||
}
|
||||
|
||||
party.confetti(this, { count: party.variation.range(20, 40) });
|
||||
|
||||
var params = {
|
||||
name: $name.value ? $name.value.trim() : '',
|
||||
theme: $theme.value || 'moebooru',
|
||||
padding: $padding.value || '7',
|
||||
offset: $offset.value || '0',
|
||||
scale: $scale.value || '1',
|
||||
pixelated: $pixelated.checked ? '1' : '0',
|
||||
darkmode: $darkmode.value || 'auto',
|
||||
}
|
||||
|
||||
var query = new URLSearchParams(params).toString()
|
||||
|
||||
img.src = `#{site}/@${name}?${query}`
|
||||
code.textContent = img.src
|
||||
code.style.visibility = 'visible'
|
||||
|
||||
img.onload = function() {
|
||||
img.scrollIntoView({block:'start', behavior: 'smooth'})
|
||||
}
|
||||
}, 500))
|
||||
|
||||
code.addEventListener('click', function(e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
var target = e.target
|
||||
var range, selection
|
||||
|
||||
if (document.body.createTextRange) {
|
||||
range = document.body.createTextRange()
|
||||
range.moveToElementText(target)
|
||||
range.select()
|
||||
} else if (window.getSelection) {
|
||||
selection = window.getSelection()
|
||||
range = document.createRange()
|
||||
range.selectNodeContents(target)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
}
|
||||
})
|
||||
|
||||
var $main_title = document.querySelector('#main_title i'),
|
||||
$themes = document.querySelector('#themes'),
|
||||
$more_theme = document.querySelector('#more_theme')
|
||||
$main_title.addEventListener('click', throttle(function() {
|
||||
party.sparkles(document.documentElement, { count: party.variation.range(40, 100) });
|
||||
}, 1000))
|
||||
$more_theme.addEventListener('click', function() {
|
||||
if (!$themes.hasAttribute('open')) {
|
||||
party.sparkles($more_theme.querySelector('h3'), { count: party.variation.range(20, 40) });
|
||||
$themes.scrollIntoView({block:'start', behavior: 'smooth'})
|
||||
}
|
||||
})
|
||||
|
||||
function throttle(fn, threshhold, scope) {
|
||||
threshhold || (threshhold = 250)
|
||||
var last
|
||||
var deferTimer
|
||||
return function () {
|
||||
var context = scope || this
|
||||
var now = +new Date
|
||||
var args = arguments
|
||||
if (last && now < last + threshhold) {
|
||||
// hold on to it
|
||||
clearTimeout(deferTimer)
|
||||
deferTimer = setTimeout(function () {
|
||||
last = now
|
||||
fn.apply(context, args)
|
||||
}, threshhold)
|
||||
} else {
|
||||
last = now
|
||||
fn.apply(context, args)
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
script.
|
||||
(function () {
|
||||
var isShow = false, lock = false;
|
||||
var btn = document.querySelector('.back-to-top');
|
||||
|
||||
window.addEventListener('scroll', function () {
|
||||
if (lock) return;
|
||||
|
||||
if (document.body.scrollTop >= 1000) {
|
||||
if (!isShow) btn.classList.add('load');
|
||||
isShow = true;
|
||||
} else {
|
||||
if (isShow) {
|
||||
btn.classList.remove('load');
|
||||
isShow = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
lock = true;
|
||||
btn.classList.add('ani-leave');
|
||||
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
|
||||
setTimeout(function () {
|
||||
btn.classList.remove('ani-leave');
|
||||
btn.classList.add('leaved');
|
||||
}, 390);
|
||||
|
||||
setTimeout(function () {
|
||||
btn.classList.add('ending');
|
||||
}, 120);
|
||||
|
||||
setTimeout(function () {
|
||||
btn.classList.remove('load');
|
||||
}, 1500);
|
||||
|
||||
setTimeout(function () {
|
||||
lock = false;
|
||||
isShow = false;
|
||||
btn.classList.remove('leaved', 'ending');
|
||||
}, 2000);
|
||||
});
|
||||
})();
|
||||
script(async, src='https://unpkg.com/party-js@2/bundle/party.min.js')
|
||||
script(async, src='script.js')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user