From 7fa74bbfefd047ed8fd3698c659acd2aa1a0a4d9 Mon Sep 17 00:00:00 2001 From: flashwave Date: Wed, 24 Apr 2024 02:24:00 +0000 Subject: [PATCH] Massive assets cleanup. --- assets/2021.js/main.js | 276 ------------------ assets/ascii.js/main.js | 75 ----- assets/common.css/main.css | 21 -- .../main.css => makai.css/ascii.css} | 0 assets/{2021.css => makai.css}/clock.css | 0 assets/{2021.css => makai.css}/featured.css | 0 assets/{2021.css => makai.css}/header.css | 0 assets/{2021.css => makai.css}/home.css | 0 assets/{2021.css => makai.css}/index.css | 0 assets/{2021.css => makai.css}/main.css | 33 +++ assets/{2021.css => makai.css}/np.css | 0 assets/{2021.css => makai.css}/project.css | 0 assets/{2021.css => makai.css}/section.css | 0 assets/{2021.css => makai.css}/socials.css | 0 assets/{2021.css => makai.css}/sprite.css | 0 .../main.css => makai.css/whois.css} | 0 assets/makai.js/ascii.js | 76 +++++ assets/makai.js/dev-home.js | 59 ++++ assets/makai.js/dev-index.js | 139 +++++++++ assets/{common.js => makai.js}/elem.js | 9 +- assets/makai.js/main.js | 19 ++ .../main.js => makai.js/utility.js} | 4 - .../{whois.js/main.js => makai.js/whois.js} | 37 +-- assets/{common.js => makai.js}/xhr.js | 0 build.js | 10 +- public/fonts/electrolize/style.css | 8 - .../{electrolize => }/electrolize400.woff2 | Bin templates/ascii/index.twig | 5 - templates/dev/contact.twig | 2 - templates/dev/home.twig | 1 - templates/dev/index.twig | 3 - templates/dev/np.twig | 1 - templates/master-2021.twig | 17 +- templates/master.twig | 16 +- templates/whois/index.twig | 3 - 35 files changed, 364 insertions(+), 450 deletions(-) delete mode 100644 assets/2021.js/main.js delete mode 100644 assets/ascii.js/main.js delete mode 100644 assets/common.css/main.css rename assets/{ascii.css/main.css => makai.css/ascii.css} (100%) rename assets/{2021.css => makai.css}/clock.css (100%) rename assets/{2021.css => makai.css}/featured.css (100%) rename assets/{2021.css => makai.css}/header.css (100%) rename assets/{2021.css => makai.css}/home.css (100%) rename assets/{2021.css => makai.css}/index.css (100%) rename assets/{2021.css => makai.css}/main.css (85%) rename assets/{2021.css => makai.css}/np.css (100%) rename assets/{2021.css => makai.css}/project.css (100%) rename assets/{2021.css => makai.css}/section.css (100%) rename assets/{2021.css => makai.css}/socials.css (100%) rename assets/{2021.css => makai.css}/sprite.css (100%) rename assets/{whois.css/main.css => makai.css/whois.css} (100%) create mode 100644 assets/makai.js/ascii.js create mode 100644 assets/makai.js/dev-home.js create mode 100644 assets/makai.js/dev-index.js rename assets/{common.js => makai.js}/elem.js (94%) create mode 100644 assets/makai.js/main.js rename assets/{common.js/main.js => makai.js/utility.js} (94%) rename assets/{whois.js/main.js => makai.js/whois.js} (79%) rename assets/{common.js => makai.js}/xhr.js (100%) delete mode 100644 public/fonts/electrolize/style.css rename public/fonts/{electrolize => }/electrolize400.woff2 (100%) diff --git a/assets/2021.js/main.js b/assets/2021.js/main.js deleted file mode 100644 index 894f6a8..0000000 --- a/assets/2021.js/main.js +++ /dev/null @@ -1,276 +0,0 @@ -Date.prototype.getWeek = function() { - var date = new Date(this.getTime()); - date.setHours(0, 0, 0, 0); - date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7); - var week1 = new Date(date.getFullYear(), 0, 4); - return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7); -} -Date.prototype.getWeekYear = function() { - var date = new Date(this.getTime()); - date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7); - return date.getFullYear(); -} - -window.fm = (function() { - var fm = this; - this.container = document.querySelector('.container'); - this.headerBackground = null; - this.originalHeaderBackground = null; - this.defaultCoverImage = 'https://lastfm.freetls.fastly.net/i/u/174s/2a96cbd8b46e442fc41c2b86b821562f.png'; - this.indexIsPlaying = false; - this.indexPlayingDefaultCover = false; - this.indexPlayingContainer = null; - this.indexPlayingCover = null; - this.indexPlayingTitle = null; - this.indexPlayingArtist = null; - this.indexLastNp = null; - this.indexPlayingInterval = null; - this.homeInterval = null; - - this.callByName = function(name, args) { - var ref = window, - parent = null, - parts = name.split('.'); - for(var i = 0; i < parts.length; ++i) { - parent = ref; - if(typeof ref[parts[i]] !== 'undefined') - ref = ref[parts[i]]; - else return; - } - if(typeof ref !== 'function') - return; - return ref.apply(parent, args); - }; - - this.runFuncs = function(funcs) { - for(var i = 0; i < funcs.length; ++i) - fm.callByName(funcs[i][0], funcs[i].slice(1)); - }; - - if(this.onload && Array.isArray(this.onload)) - window.addEventListener('load', function() { fm.runFuncs(fm.onload); }); - - if(sessionStorage.getItem('header-bgs') === null - || sessionStorage.getItem('header-bgs-loaded') < Date.now() - 86400000) { - var hXhr = new XMLHttpRequest; - hXhr.onload = function() { - sessionStorage.setItem('header-bgs', hXhr.responseText); - sessionStorage.setItem('header-bgs-loaded', Date.now()); - }; - hXhr.open('GET', '/header-bgs.json'); - hXhr.send(); - } - - this.selectTextInElement = function(elem) { - // MSIE - if(document.body.createTextRange) { - var range = document.body.createTextRange(); - range.moveToElementText(elem); - range.select(); - return; - } - - // Mozilla - if(window.getSelection) { - var select = window.getSelection(), - range = document.createRange(); - range.selectNodeContents(elem); - select.removeAllRanges(); - select.addRange(range); - return; - } - - console.warn('Unable to select text.'); - }; - - this.copySelectedText = function() { - if(document.execCommand) { - document.execCommand('copy'); - return; - } - - console.warn('Unable to copy text.'); - }; - - this.getNowListening = function(callback) { - if(!callback) - return; - - const self = this; - - $x.get('https://now.flash.moe/get.php?u=flashwave_').then(output => { - if(output.status !== 200) - return; - - let info = output.json(); - if(info.length < 1) - return; - - info = info[0]; - - callback.call(self, { - name: info.name, - now_playing: !!info.nowplaying, - url: info.url, - cover: info.images?.large ?? '', - artist: { - name: info.artist?.name ?? '', - url: info.url.split('/_/')[0] - }, - }); - }); - }; - - this.updateIndexNowListening = function() { - window.fm.getNowListening(function(info) { - if(this.indexLastNp === null - || this.indexLastNp.url != info.url - || this.indexLastNp.now_playing != info.now_playing) { - if(this.indexLastNp !== null) - this.originalHeaderBackground = this.getRandomHeaderBackground(); - this.indexLastNp = info; - } else return; - - this.indexIsPlaying = info.now_playing; - this.indexPlayingDefaultCover = !info.cover || info.cover === this.defaultCoverImage; - this.indexPlayingContainer.classList[info.now_playing ? 'remove' : 'add']('header-now-playing-hidden'); - this.indexPlayingCover.alt = this.indexPlayingCover.src = (info.cover !== this.defaultCoverImage ? info.cover : '//now.flash.moe/resources/no-cover.png'); - this.indexPlayingTitle.textContent = this.indexPlayingTitle.title = info.name; - this.indexPlayingTitle.href = info.url; - this.indexPlayingArtist.textContent = this.indexPlayingArtist.title = (info.artist || {}).name || ''; - this.indexPlayingArtist.href = (info.artist || {}).url || ''; - this.switchHeaderBackground( - info.now_playing && !this.indexPlayingDefaultCover - ? this.indexPlayingCover.src - : this.originalHeaderBackground - ); - }); - }; - - this.getRandomHeaderBackground = function() { - var set = JSON.parse(sessionStorage.getItem('header-bgs')); - if(!set) - return '/images/404.jpg'; - return set[parseInt(Math.random() * set.length) - 1]; - }; - - this.setRandomHeaderBackground = function() { - this.switchHeaderBackground(this.getRandomHeaderBackground()); - }; - - this.setRandomHeaderBackgroundIfNotPlaying = function() { - if(!this.indexIsPlaying || this.indexPlayingDefaultCover) - this.setRandomHeaderBackground(); - }; - - this.getCurrentHeaderBackground = function() { - return this.headerBackground.querySelector('img').src; - }; - - this.headerBackgroundIsChanging = false; - this.switchHeaderBackground = function(url) { - if(this.headerBackgroundIsChanging || this.getCurrentHeaderBackground() === url) - return; - this.headerBackgroundIsChanging = true; - var newImg = document.createElement('img'), - oldImg = this.headerBackground.querySelector('img'); - newImg.alt = newImg.src = url; - newImg.style.opacity = '0'; - oldImg.style.zIndex = '-1'; - newImg.style.zIndex = '0'; - this.headerBackground.appendChild(newImg); - newImg.onload = function() { - setTimeout(function() { - newImg.style.opacity = null; - setTimeout(function() { - newImg.style.zIndex = null; - this.headerBackground.removeChild(oldImg); - this.headerBackgroundIsChanging = false; - }.bind(this), 500); - }.bind(this), 50); - }.bind(this); - newImg.onerror = function() { - this.headerBackgroundIsChanging = false; - this.switchHeaderBackground(this.originalHeaderBackground); - }.bind(this); - }; - - this.headerBackground = document.querySelector('.header-background'); - this.originalHeaderBackground = this.headerBackground.querySelector('img').src; - - this.initIndex = function(npInterval) { - if(!this.indexPlayingContainer) { - this.indexPlayingContainer = document.querySelector('.header-now-playing'); - this.indexPlayingCover = window.fm.indexPlayingContainer.querySelector('.header-now-playing-cover img'); - this.indexPlayingCover.onerror = function() { - this.indexPlayingCover.src = '//now.flash.moe/resources/no-cover.png'; - }.bind(this); - this.indexPlayingTitle = window.fm.indexPlayingContainer.querySelector('.header-now-playing-title a'); - this.indexPlayingArtist = window.fm.indexPlayingContainer.querySelector('.header-now-playing-artist a'); - } - - if(this.indexPlayingInterval) { - clearInterval(this.indexPlayingInterval); - this.indexPlayingInterval = null; - } - - this.updateIndexNowListening(); - this.indexPlayingInterval = setInterval(this.updateIndexNowListening, (npInterval || 30) * 1000); - }; - - this.initClock = function() { - if(this.homeInterval) - return; - - var digitalClock = document.querySelector('.php-time-digital'), - analogClock = document.querySelector('.php-time-analog'), - dateZone = document.querySelector('.php-time-date'), - digHours = digitalClock.querySelector('.php-time-digital-hours'), - digSeparator = digitalClock.querySelector('.php-time-digital-separator'), - digMinutes = digitalClock.querySelector('.php-time-digital-minutes'), - angHours = analogClock.querySelector('.clock-hand-hours'), - angMinutes = analogClock.querySelector('.clock-hand-minutes'), - angSeconds = analogClock.querySelector('.clock-hand-seconds') - dateWeek = dateZone.querySelector('.php-date-week'), - dateDay = dateZone.querySelector('.php-date-day'), - dateMonth = dateZone.querySelector('.php-date-month'), - dateYear = dateZone.querySelector('.php-date-year'); - - this.homeInterval = setInterval(function() { - if(!document.body.contains(digitalClock)) { - clearInterval(this.homeInterval); - this.homeInterval = null; - return; - } - - var time = new Date; - - var dHour = time.getHours(), - dMin = time.getMinutes(); - - if(dHour < 10) - dHour = '0' + dHour; - if(dMin < 10) - dMin = '0' + dMin; - - dateWeek.textContent = time.getWeek(); - dateDay.textContent = time.getDate(); - dateMonth.textContent = time.getMonth() + 1; - dateYear.textContent = time.getFullYear(); - - digHours.textContent = dHour; - digMinutes.textContent = dMin; - digSeparator.classList[time.getSeconds() % 2 ? 'add' : 'remove']('php-time-digital-separator-hidden'); - - var rSec = time.getSeconds() / 60, - rMin = (time.getMinutes() + Math.min(.99, rSec)) / 60, - rHour = (time.getHours() + Math.min(.99, rMin)) / 12; - - angHours.style.setProperty('--hand-rotation', (rHour * 360).toString() + 'deg'); - angMinutes.style.setProperty('--hand-rotation', (rMin * 360).toString() + 'deg'); - angSeconds.style.setProperty('--hand-rotation', (rSec * 360).toString() + 'deg'); - }.bind(this), 200); - }; - - return this; -}).call(window.fm || {}); diff --git a/assets/ascii.js/main.js b/assets/ascii.js/main.js deleted file mode 100644 index 9548c00..0000000 --- a/assets/ascii.js/main.js +++ /dev/null @@ -1,75 +0,0 @@ -(function() { - var chars = document.getElementsByClassName('ascii-char'), - search = document.getElementById('search'); - - function charsFilter(filter) { - if(!filter) { - for(var i = 0; i < chars.length; ++i) - chars[i].classList.remove('hidden'); - return; - } - - filter = filter.toLowerCase(); - - for(var i = 0; i < chars.length; ++i) { - var chr = chars[i], - code = (chr.dataset.keyCode || 0).toString().toLowerCase(), - print = (chr.dataset.keyPrint || "\0").toString().toLowerCase(), - desc = (chr.dataset.keyDesc || '').toString().toLowerCase(), - html = (chr.dataset.keyHtml || "\0").toString().toLowerCase(), - codeInt = parseInt(code), - isMatch = (filter === 'printable' && (codeInt > 31 && codeInt < 127)) - || (filter === 'control' && (codeInt < 32 || codeInt === 127)) - || code == filter || print == filter - || html == filter || desc.indexOf(filter) >= 0; - chr.classList[isMatch ? 'remove' : 'add']('hidden'); - } - }; - - window.addEventListener('scroll', function() { - var hidden = document.getElementsByClassName('js-hidden-on-scroll'), - invisible = document.getElementsByClassName('js-invisible-on-scroll'), - atTop = window.scrollY === 0; - - for(var i = 0; i < hidden.length; ++i) - hidden[i].classList[atTop ? 'remove' : 'add']('hidden'); - for(var i = 0; i < invisible.length; ++i) - invisible[i].classList[atTop ? 'remove' : 'add']('invisible'); - }); - search.addEventListener('keyup', function() { - location.hash = search.value.trim(); - }); - window.addEventListener('hashchange', function() { - charsFilter(decodeURIComponent((location.hash || '#').substring(1))); - }); - if(location.hash.length > 0) { - search.value = location.hash.substring(1).trim(); - charsFilter(search.value); - } - - for(var i = 0; i < chars.length; ++i) { - chars[i].addEventListener('click', function(ev) { - var target = ev.target; - - while(target !== null && typeof target.dataset.copy === 'undefined') { - target = target.parentNode || null; - - if(target.classList.contains('char')) - break; - } - - if(target === null || typeof target.dataset.copy === 'undefined') - return; - - var doCopy = function() { navigator.clipboard.writeText(target.dataset.copy); }; - - if(typeof window.mozInnerScreenX !== 'undefined') - doCopy(); - else - navigator.permissions.query({name: 'clipboard-write'}).then(function(res) { - if(res.state === 'granted' || res.state === 'prompt') - doCopy(); - }); - }); - } -})(); diff --git a/assets/common.css/main.css b/assets/common.css/main.css deleted file mode 100644 index 839cb4c..0000000 --- a/assets/common.css/main.css +++ /dev/null @@ -1,21 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - position: relative; - outline-style: none; -} - -html, body { - width: 100%; - height: 100%; -} - -.hidden { - display: none !important; - visibility: hidden !important; -} - -.invisible { - opacity: 0; -} diff --git a/assets/ascii.css/main.css b/assets/makai.css/ascii.css similarity index 100% rename from assets/ascii.css/main.css rename to assets/makai.css/ascii.css diff --git a/assets/2021.css/clock.css b/assets/makai.css/clock.css similarity index 100% rename from assets/2021.css/clock.css rename to assets/makai.css/clock.css diff --git a/assets/2021.css/featured.css b/assets/makai.css/featured.css similarity index 100% rename from assets/2021.css/featured.css rename to assets/makai.css/featured.css diff --git a/assets/2021.css/header.css b/assets/makai.css/header.css similarity index 100% rename from assets/2021.css/header.css rename to assets/makai.css/header.css diff --git a/assets/2021.css/home.css b/assets/makai.css/home.css similarity index 100% rename from assets/2021.css/home.css rename to assets/makai.css/home.css diff --git a/assets/2021.css/index.css b/assets/makai.css/index.css similarity index 100% rename from assets/2021.css/index.css rename to assets/makai.css/index.css diff --git a/assets/2021.css/main.css b/assets/makai.css/main.css similarity index 85% rename from assets/2021.css/main.css rename to assets/makai.css/main.css index 485bb41..0d61e9e 100644 --- a/assets/2021.css/main.css +++ b/assets/makai.css/main.css @@ -1,3 +1,33 @@ +@font-face { + font-family: 'Electrolize'; + font-style: normal; + font-weight: 400; + src: local('Electrolize'), local('Electrolize-Regular'), url('/fonts/electrolize400.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + position: relative; + outline-style: none; +} + +html, body { + width: 100%; + height: 100%; +} + +.hidden { + display: none !important; + visibility: hidden !important; +} + +.invisible { + opacity: 0; +} + html { scrollbar-color: #4a3650 #111; } @@ -206,3 +236,6 @@ body { @include home.css; @include clock.css; + +@include ascii.css; +@include whois.css; diff --git a/assets/2021.css/np.css b/assets/makai.css/np.css similarity index 100% rename from assets/2021.css/np.css rename to assets/makai.css/np.css diff --git a/assets/2021.css/project.css b/assets/makai.css/project.css similarity index 100% rename from assets/2021.css/project.css rename to assets/makai.css/project.css diff --git a/assets/2021.css/section.css b/assets/makai.css/section.css similarity index 100% rename from assets/2021.css/section.css rename to assets/makai.css/section.css diff --git a/assets/2021.css/socials.css b/assets/makai.css/socials.css similarity index 100% rename from assets/2021.css/socials.css rename to assets/makai.css/socials.css diff --git a/assets/2021.css/sprite.css b/assets/makai.css/sprite.css similarity index 100% rename from assets/2021.css/sprite.css rename to assets/makai.css/sprite.css diff --git a/assets/whois.css/main.css b/assets/makai.css/whois.css similarity index 100% rename from assets/whois.css/main.css rename to assets/makai.css/whois.css diff --git a/assets/makai.js/ascii.js b/assets/makai.js/ascii.js new file mode 100644 index 0000000..d3ee1c7 --- /dev/null +++ b/assets/makai.js/ascii.js @@ -0,0 +1,76 @@ +#include utility.js + +const MakaiASCII = () => { + const chars = $c('ascii-char'); + const search = $i('search'); + + const charsFilter = (filter) => { + if(!filter) { + for(const chr of chars) + chr.classList.remove('hidden'); + return; + } + + filter = filter.toLowerCase(); + + for(const chr of chars) { + const code = (chr.dataset.keyCode || 0).toString().toLowerCase(); + const print = (chr.dataset.keyPrint || "\0").toString().toLowerCase(); + const desc = (chr.dataset.keyDesc || '').toString().toLowerCase(); + const html = (chr.dataset.keyHtml || "\0").toString().toLowerCase(); + const codeInt = parseInt(code); + const isMatch = (filter === 'printable' && (codeInt > 31 && codeInt < 127)) + || (filter === 'control' && (codeInt < 32 || codeInt === 127)) + || code == filter || print == filter + || html == filter || desc.indexOf(filter) >= 0; + chr.classList.toggle('hidden', !isMatch); + } + }; + + window.addEventListener('scroll', () => { + const atTop = window.scrollY === 0; + + const hidden = $c('js-hidden-on-scroll'); + for(const elem of hidden) + elem.classList.toggle('hidden', !atTop); + + const invisible = $c('js-invisible-on-scroll'); + for(const elem of invisible) + elem.classList.toggle('invisible', !atTop); + }); + search.addEventListener('keyup', () => { + location.hash = search.value.trim(); + }); + window.addEventListener('hashchange', () => { + charsFilter(decodeURIComponent((location.hash || '#').substring(1))); + }); + if(location.hash.length > 0) { + search.value = location.hash.substring(1).trim(); + charsFilter(search.value); + } + + for(const chr of chars) { + chr.addEventListener('click', ev => { + let target = ev.target; + while(target !== null && typeof target.dataset.copy === 'undefined') { + target = target.parentNode || null; + + if(target.classList.contains('char')) + break; + } + + if(target === null || typeof target.dataset.copy === 'undefined') + return; + + const doCopy = () => { navigator.clipboard.writeText(target.dataset.copy); }; + + if(typeof window.mozInnerScreenX !== 'undefined') + doCopy(); + else + navigator.permissions.query({ name: 'clipboard-write' }).then(res => { + if(res.state === 'granted' || res.state === 'prompt') + doCopy(); + }); + }); + } +}; diff --git a/assets/makai.js/dev-home.js b/assets/makai.js/dev-home.js new file mode 100644 index 0000000..ba2c9d0 --- /dev/null +++ b/assets/makai.js/dev-home.js @@ -0,0 +1,59 @@ +#include utility.js + +const MakaiDevHome = () => { + const digitalClock = $q('.php-time-digital'); + const analogClock = $q('.php-time-analog'); + const dateZone = $q('.php-time-date'); + const digHours = digitalClock.querySelector('.php-time-digital-hours'); + const digSeparator = digitalClock.querySelector('.php-time-digital-separator'); + const digMinutes = digitalClock.querySelector('.php-time-digital-minutes'); + const angHours = analogClock.querySelector('.clock-hand-hours'); + const angMinutes = analogClock.querySelector('.clock-hand-minutes'); + const angSeconds = analogClock.querySelector('.clock-hand-seconds'); + const dateWeek = dateZone.querySelector('.php-date-week'); + const dateDay = dateZone.querySelector('.php-date-day'); + const dateMonth = dateZone.querySelector('.php-date-month'); + const dateYear = dateZone.querySelector('.php-date-year'); + + homeInterval = setInterval(() => { + if(!document.body.contains(digitalClock)) { + clearInterval(homeInterval); + homeInterval = undefined; + return; + } + + const time = new Date; + + let dHour = time.getHours(); + let dMin = time.getMinutes(); + + if(dHour < 10) + dHour = '0' + dHour; + if(dMin < 10) + dMin = '0' + dMin; + + dateWeek.textContent = (() => { + const wd = new Date(time.getTime()); + wd.setHours(0, 0, 0, 0); + wd.setDate(wd.getDate() + 3 - (wd.getDay() + 6) % 7); + const week1 = new Date(wd.getFullYear(), 0, 4); + return 1 + Math.round(((wd.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7); + })(); + + dateDay.textContent = time.getDate(); + dateMonth.textContent = time.getMonth() + 1; + dateYear.textContent = time.getFullYear(); + + digHours.textContent = dHour; + digMinutes.textContent = dMin; + digSeparator.classList[time.getSeconds() % 2 ? 'add' : 'remove']('php-time-digital-separator-hidden'); + + const rSec = time.getSeconds() / 60; + const rMin = (time.getMinutes() + Math.min(.99, rSec)) / 60; + const rHour = (time.getHours() + Math.min(.99, rMin)) / 12; + + angHours.style.setProperty('--hand-rotation', (rHour * 360).toString() + 'deg'); + angMinutes.style.setProperty('--hand-rotation', (rMin * 360).toString() + 'deg'); + angSeconds.style.setProperty('--hand-rotation', (rSec * 360).toString() + 'deg'); + }, 200); +}; diff --git a/assets/makai.js/dev-index.js b/assets/makai.js/dev-index.js new file mode 100644 index 0000000..067191d --- /dev/null +++ b/assets/makai.js/dev-index.js @@ -0,0 +1,139 @@ +#include utility.js +#include xhr.js + +const MakaiDevIndex = npInterval => { + let headerBackground; + let originalHeaderBackground; + const defaultCoverImage = 'https://lastfm.freetls.fastly.net/i/u/174s/2a96cbd8b46e442fc41c2b86b821562f.png'; + let indexIsPlaying = false; + let indexPlayingDefaultCover = false; + let indexPlayingContainer; + let indexPlayingCover; + let indexPlayingTitle; + let indexPlayingArtist; + let indexLastNp; + let indexPlayingInterval; + let homeInterval; + + if(!sessionStorage.getItem('header-bgs') || sessionStorage.getItem('header-bgs-loaded') < Date.now() - 86400000) + $x.get('/header-bgs.json').then(output => { + if(output.status !== 200) + return; + + sessionStorage.setItem('header-bgs', output.body()); + sessionStorage.setItem('header-bgs-loaded', Date.now()); + }); + + const getNowListening = callback => { + if(!callback) + return; + + $x.get('https://now.flash.moe/get.php?u=flashwave_').then(output => { + if(output.status !== 200) + return; + + let info = output.json(); + if(info.length < 1) + return; + + info = info[0]; + + callback({ + name: info.name, + now_playing: !!info.nowplaying, + url: info.url, + cover: info.images?.large ?? '', + artist: { + name: info.artist?.name ?? '', + url: info.url.split('/_/')[0] + }, + }); + }); + }; + + const updateIndexNowListening = () => { + getNowListening(info => { + if(!indexLastNp || indexLastNp.url != info.url || indexLastNp.now_playing != info.now_playing) { + if(!indexLastNp) + originalHeaderBackground = getRandomHeaderBackground(); + indexLastNp = info; + } else return; + + indexIsPlaying = info.now_playing; + indexPlayingDefaultCover = !info.cover || info.cover === defaultCoverImage; + indexPlayingContainer.classList[info.now_playing ? 'remove' : 'add']('header-now-playing-hidden'); + indexPlayingCover.alt = indexPlayingCover.src = (info.cover !== defaultCoverImage ? info.cover : '//now.flash.moe/resources/no-cover.png'); + indexPlayingTitle.textContent = indexPlayingTitle.title = info.name; + indexPlayingTitle.href = info.url; + indexPlayingArtist.textContent = indexPlayingArtist.title = (info.artist || {}).name || ''; + indexPlayingArtist.href = (info.artist || {}).url || ''; + switchHeaderBackground( + info.now_playing && !indexPlayingDefaultCover + ? indexPlayingCover.src + : originalHeaderBackground + ); + }); + }; + + const getRandomHeaderBackground = () => { + var set = JSON.parse(sessionStorage.getItem('header-bgs')); + if(!set) + return '/images/404.jpg'; + return set[parseInt(Math.random() * set.length) - 1]; + }; + + const setRandomHeaderBackground = () => { + switchHeaderBackground(getRandomHeaderBackground()); + }; + + const getCurrentHeaderBackground = function() { + return headerBackground.querySelector('img').src; + }; + + let headerBackgroundIsChanging = false; + const switchHeaderBackground = function(url) { + if(headerBackgroundIsChanging || getCurrentHeaderBackground() === url) + return; + headerBackgroundIsChanging = true; + var newImg = document.createElement('img'), + oldImg = headerBackground.querySelector('img'); + newImg.alt = newImg.src = url; + newImg.style.opacity = '0'; + oldImg.style.zIndex = '-1'; + newImg.style.zIndex = '0'; + headerBackground.appendChild(newImg); + newImg.onload = () => { + setTimeout(() => { + newImg.style.opacity = null; + setTimeout(() => { + newImg.style.zIndex = null; + headerBackground.removeChild(oldImg); + headerBackgroundIsChanging = false; + }, 500); + }, 50); + }; + newImg.onerror = () => { + headerBackgroundIsChanging = false; + switchHeaderBackground(originalHeaderBackground); + }; + }; + + headerBackground = $q('.header-background'); + originalHeaderBackground = headerBackground.querySelector('img').src; + + if(!indexPlayingContainer) { + indexPlayingContainer = document.querySelector('.header-now-playing'); + indexPlayingCover = indexPlayingContainer.querySelector('.header-now-playing-cover img'); + indexPlayingCover.onerror = () => { indexPlayingCover.src = '//now.flash.moe/resources/no-cover.png'; } + indexPlayingTitle = indexPlayingContainer.querySelector('.header-now-playing-title a'); + indexPlayingArtist = indexPlayingContainer.querySelector('.header-now-playing-artist a'); + } + + if(indexPlayingInterval) { + clearInterval(indexPlayingInterval); + indexPlayingInterval = undefined; + } + + updateIndexNowListening(); + indexPlayingInterval = setInterval(updateIndexNowListening, (npInterval || 30) * 1000); +}; diff --git a/assets/common.js/elem.js b/assets/makai.js/elem.js similarity index 94% rename from assets/common.js/elem.js rename to assets/makai.js/elem.js index cfedc79..9abac54 100644 --- a/assets/common.js/elem.js +++ b/assets/makai.js/elem.js @@ -1,3 +1,6 @@ +const $t = document.createTextNode.bind(document); +const $er = (type, props, ...children) => $e({ tag: type, attrs: props, child: children }); + const $e = function(info, attrs, child, created) { info = info || {}; @@ -55,6 +58,11 @@ const $e = function(info, attrs, child, created) { } break; + case 'boolean': + if(attr) + elem.setAttribute(key, ''); + break; + default: if(key === 'className') key = 'class'; @@ -101,4 +109,3 @@ const $e = function(info, attrs, child, created) { return elem; }; -const $er = (type, props, ...children) => $e({ tag: type, attrs: props, child: children }); diff --git a/assets/makai.js/main.js b/assets/makai.js/main.js new file mode 100644 index 0000000..8394071 --- /dev/null +++ b/assets/makai.js/main.js @@ -0,0 +1,19 @@ +#include ascii.js +#include dev-index.js +#include dev-home.js +#include whois.js + +(() => { + const runIfPathStartsWith = (prefix, func, ...args) => { + if(location.pathname === prefix || location.pathname.startsWith(`${prefix}/`)) + func(...args); + }; + + runIfPathStartsWith('/ascii', MakaiASCII); + runIfPathStartsWith('/whois', MakaiWHOIS); + runIfPathStartsWith('/home', MakaiDevHome); + + runIfPathStartsWith('/home', MakaiDevIndex, 10); + runIfPathStartsWith('/np', MakaiDevIndex, 10); + if(location.pathname === '/') MakaiDevIndex(); +})(); diff --git a/assets/common.js/main.js b/assets/makai.js/utility.js similarity index 94% rename from assets/common.js/main.js rename to assets/makai.js/utility.js index add1108..50357a3 100644 --- a/assets/common.js/main.js +++ b/assets/makai.js/utility.js @@ -2,7 +2,6 @@ const $i = document.getElementById.bind(document); const $c = document.getElementsByClassName.bind(document); const $q = document.querySelector.bind(document); const $qa = document.querySelectorAll.bind(document); -const $t = document.createTextNode.bind(document); const $r = function(element) { if(element && element.parentNode) @@ -59,6 +58,3 @@ const $csrfp = (function() { }, }; })(); - -#include elem.js -#include xhr.js diff --git a/assets/whois.js/main.js b/assets/makai.js/whois.js similarity index 79% rename from assets/whois.js/main.js rename to assets/makai.js/whois.js index 42082ed..9c38f34 100644 --- a/assets/whois.js/main.js +++ b/assets/makai.js/whois.js @@ -1,11 +1,14 @@ -(function() { - let locked = false; - const input = $i('lookup-input'), - submit = $i('lookup-submit'), - result = $i('lookup-result'), - tabs = $i('lookup-tabs'); +#include utility.js +#include xhr.js - const lock = function() { +const MakaiWHOIS = () => { + let locked = false; + const input = $i('lookup-input'); + const submit = $i('lookup-submit'); + const result = $i('lookup-result'); + const tabs = $i('lookup-tabs'); + + const lock = () => { if(locked) return false; @@ -15,7 +18,7 @@ return true; } - const unlock = function() { + const unlock = () => { if(!locked) return false; @@ -25,7 +28,7 @@ return true; } - const lookup = function(target) { + const lookup = target => { if(!lock()) return; @@ -43,15 +46,15 @@ tabs.innerHTML = ''; if(resp.result && resp.result.responses) for(const response of resp.result.responses) { - const tab = document.createElement('a'), - tabHeader = document.createElement('div'), - tabServer = document.createElement('div'); + const tab = document.createElement('a'); + const tabHeader = document.createElement('div'); + const tabServer = document.createElement('div'); tab.href = 'javascript:;'; tab.className = 'whois-result-tab'; if(count === 0) tab.className += ' whois-result-tab-active'; - tab.onclick = function() { + tab.onclick = () => { const active = $q('.whois-result-tab-active'); if(active) active.classList.remove('whois-result-tab-active'); tab.classList.add('whois-result-tab-active'); @@ -78,7 +81,7 @@ }); } - const readHash = function() { + const readHash = () => { if(location.hash.length < 2) { result.textContent = 'Enter a domain or IP address!'; return; @@ -90,14 +93,14 @@ lookup(target); }; - window.addEventListener('hashchange', function(ev) { + window.addEventListener('hashchange', ev => { readHash(); }, false); - submit.addEventListener('click', function(ev) { + submit.addEventListener('click', ev => { ev.preventDefault(); location.hash = encodeURIComponent(input.value); }); readHash(); -})(); +}; diff --git a/assets/common.js/xhr.js b/assets/makai.js/xhr.js similarity index 100% rename from assets/common.js/xhr.js rename to assets/makai.js/xhr.js diff --git a/build.js b/build.js index 25c84ca..1d99794 100644 --- a/build.js +++ b/build.js @@ -21,17 +21,11 @@ const isDebugBuild = fs.existsSync(path.join(rootDir, '.debug')); const buildTasks = { js: [ - { source: 'common.js', target: '/assets', name: 'common.{hash}.js', }, - { source: '2021.js', target: '/assets', name: '2021.{hash}.js', }, - { source: 'ascii.js', target: '/assets', name: 'ascii.{hash}.js', }, - { source: 'whois.js', target: '/assets', name: 'whois.{hash}.js', }, + { source: 'makai.js', target: '/assets', name: 'makai.{hash}.js', }, ], css: [ { source: 'errors.css', target: '/', name: 'errors.css', }, - { source: 'common.css', target: '/assets', name: 'common.{hash}.css', }, - { source: '2021.css', target: '/assets', name: '2021.{hash}.css', }, - { source: 'ascii.css', target: '/assets', name: 'ascii.{hash}.css', }, - { source: 'whois.css', target: '/assets', name: 'whois.{hash}.css', }, + { source: 'makai.css', target: '/assets', name: 'makai.{hash}.css', }, ], twig: [ { source: 'errors/401', target: '/', name: 'error-401.html', }, diff --git a/public/fonts/electrolize/style.css b/public/fonts/electrolize/style.css deleted file mode 100644 index af901a3..0000000 --- a/public/fonts/electrolize/style.css +++ /dev/null @@ -1,8 +0,0 @@ -/* latin */ -@font-face { - font-family: 'Electrolize'; - font-style: normal; - font-weight: 400; - src: local('Electrolize'), local('Electrolize-Regular'), url(electrolize400.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} diff --git a/public/fonts/electrolize/electrolize400.woff2 b/public/fonts/electrolize400.woff2 similarity index 100% rename from public/fonts/electrolize/electrolize400.woff2 rename to public/fonts/electrolize400.woff2 diff --git a/templates/ascii/index.twig b/templates/ascii/index.twig index 9e1cd24..99d1ebc 100644 --- a/templates/ascii/index.twig +++ b/templates/ascii/index.twig @@ -3,9 +3,6 @@ {% set header_title = 'ascii table' %} {% set header_minimal = true %} -{% set styles = styles|default([])|merge([ globals.assetsInfo.get('ascii.css') ]) %} -{% set scripts = scripts|default([])|merge([ globals.assetsInfo.get('ascii.js') ]) %} - {% set table = [ ['Null character', 'NUL'], ['Start of heading', 'SOH'], @@ -182,6 +179,4 @@ {% endfor %} - - {% endblock %} diff --git a/templates/dev/contact.twig b/templates/dev/contact.twig index 5e390d5..092a914 100644 --- a/templates/dev/contact.twig +++ b/templates/dev/contact.twig @@ -14,8 +14,6 @@
{% if contact.hasLink %} - {% else %} - {% endif %} diff --git a/templates/dev/home.twig b/templates/dev/home.twig index 4118a4a..460bb6a 100644 --- a/templates/dev/home.twig +++ b/templates/dev/home.twig @@ -2,7 +2,6 @@ {% set header_title = 'homepage' %} {% set header_full = true %} -{% set footer_onload = [['fm.initClock'], ['fm.initIndex', 10]] %} {% block container %}
diff --git a/templates/dev/index.twig b/templates/dev/index.twig index 28c0413..aeb011c 100644 --- a/templates/dev/index.twig +++ b/templates/dev/index.twig @@ -1,7 +1,6 @@ {% extends 'dev/master.twig' %} {% set header_is_index = true %} -{% set footer_onload = [['fm.initIndex']] %} {% block container %}
@@ -55,8 +54,6 @@