diff options
| -rw-r--r-- | app.js | 29 | ||||
| -rw-r--r-- | assets/js/blogitem.js | 128 | ||||
| -rw-r--r-- | assets/js/main.js | 174 | ||||
| -rw-r--r-- | source/readfile.js | 5 |
4 files changed, 134 insertions, 202 deletions
@@ -25,7 +25,7 @@ const mime = { mp4: 'video/mp4', webm: 'video/webm' } -const assets = [ +const assetDir = [ 'js', 'css', 'img', @@ -59,7 +59,7 @@ class App { string: req.path } - if (assets.includes(this.path.split[1])) { + if (assetDir.includes(this.path.split[1])) { const data = this.readfile.GetFile(req.path) data.mime.then(output => this.#FileOpen({data: data, mime: output, res: res})) } else { @@ -99,25 +99,30 @@ class App { if (output.has(this.path.string)) { try { output.get(this.path.string).then(output => { - const object = this.readfile.Create(output.html) - const window = new JSDOM('').window - const DOMPurify = createDOMPurify(window) - object.then(output => { + const object = { + js: output.assets.js, + css: output.assets.css + } + + this.readfile.Create(output.html).then(output => { + const DOMPurify = createDOMPurify(new JSDOM('').window) const clean = DOMPurify.sanitize(output.layouts.header + output.layouts.data + output.layouts.footer, { ADD_TAGS: ["iframe"], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] }) - res.send(clean) + res.send(JSON.stringify({html: clean, css: object.css, js: object.js})) }) }) } catch { - const object = this.readfile.Create(output.get(this.path.string).html) - const window = new JSDOM('').window - const DOMPurify = createDOMPurify(window) - object.then(output => { + const object = { + js: output.assets.js, + css: output.assets.css + } + this.readfile.Create(output.html).then(output => { + const DOMPurify = createDOMPurify(new JSDOM('').window) const clean = DOMPurify.sanitize(output.layouts.header + output.layouts.data + output.layouts.footer, { ADD_TAGS: ['iframe'], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] }) - res.send(clean) + res.send(JSON.stringify({html: clean, css: object.css, js: object.js})) }) } } else { diff --git a/assets/js/blogitem.js b/assets/js/blogitem.js index a827970..b79b9e5 100644 --- a/assets/js/blogitem.js +++ b/assets/js/blogitem.js @@ -1,58 +1,84 @@ -const body = { - content: document.getElementsByClassName('fullscreenImg')[0], - images: document.querySelectorAll('img:not([class])'), - buttons: `<div class='closeFullscreenImage'>✕</div><div class='navleft'>«</div><div class='navright'>»</div>` -} +// ! I am struggling to get this to run properly -const blogImage = () => { - body.content.style.opacity = 0 - body.images.forEach((img, index) => { - img.addEventListener('click', () => { - body.content.innerHTML = `${body.buttons}<img src='${img.src}'/>` - body.content.style.opacity = 1 - listener(index) - }) - }) -} - -const drawImage = (src) => { - try { - body.content.innerHTML = `${body.buttons}<img src='${src}'>` - } catch (err) { - //console.log(src) +class BlogItem { + constructor() { + this.body = { + content: document.getElementsByClassName('fullscreenImg')[0], + images: document.querySelectorAll('img:not([class])'), + buttons: `<div class='closeFullscreenImage'>✕</div><div class='navleft'>«</div><div class='navright'>»</div>` + } } -} -const listener = (index) => { - const buttons = { - close: document.getElementsByClassName('closeFullscreenImage')[0], - left: document.getElementsByClassName('navleft')[0], - right: document.getElementsByClassName('navright')[0] + Init() { + this.#BlogItem() + this.#Prism() + new Menu().Init() } - buttons.close.addEventListener('click', () => { - body.content.style.opacity = 0 - setTimeout(() => { - body.content.innerHTML = '' - }, '1000') - }) - buttons.left.addEventListener('click', () => { - if (index > 0) { - console.log(index) - drawImage(body.images[index - 1].src) - listener(index - 1) - } else { - drawImage(body.images[body.images.length - 1].src) - listener(body.images.length) + + #EventListener(index) { + const buttons = { + close: document.getElementsByClassName('closeFullscreenImage')[0], + left: document.getElementsByClassName('navleft')[0], + right: document.getElementsByClassName('navright')[0] } - }) - buttons.right.addEventListener('click', () => { - if (index < body.images.length - 1) { - drawImage(body.images[index + 1].src) - listener(index + 1) - } else { - drawImage(body.images[0].src) - listener(0) + + buttons.close.addEventListener('click', () => { + this.body.content.style.opacity = 0 + setTimeout(() => { + this.body.content.innerHTML = '' + }, '1000') + }) + buttons.left.addEventListener('click', () => { + if (index > 0) { + this.#DrawImage(this.body.images[index - 1].src) + this.#EventListener(index - 1) + } else { + this.#DrawImage(this.body.images[this.body.images.length - 1].src) + this.#EventListener(this.body.images.length - 1) + } + }) + buttons.right.addEventListener('click', () => { + if (index < this.body.images.length - 1) { + this.#DrawImage(this.body.images[index + 1].src) + this.#EventListener(index + 1) + } else { + this.#DrawImage(this.body.images[0].src) + this.#EventListener(0) + } + }) + } + #DrawImage(src) { + try { + this.body.content.innerHTML = `${this.body.buttons}<img src='${src}'/>` + } catch (err) { + console.error(err) } - }) + } + #BlogItem() { + this.body.content.style.opacity = 0 + this.body.images.forEach((img, index) => { + img.addEventListener('click', () => { + this.body.content.innerHTML = `${this.body.buttons}<img src='${img.src}'/>` + this.body.content.style.opacity = 1 + this.#EventListener(index) + }) + }) + } + #Prism() { + const head = document.getElementsByTagName('head')[0] + const body = document.getElementsByTagName('body')[0] + const link = document.createElement('link') + const script = document.createElement('script') + + link.rel = 'stylesheet' + link.type = 'text/css' + link.href = `${window.location.origin}/css/prism.css` + head.appendChild(link) + + script.src = `${window.location.origin}/js/prism.js` + body.appendChild(script) + } } -blogImage() + +new BlogItem().Init() + diff --git a/assets/js/main.js b/assets/js/main.js index f0910eb..bcd6af6 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,145 +1,49 @@ -const main = { - body: document.getElementById('main'), - url: window.location.href -} -const test = () => { - const links = document.getElementsByClassName('footer-links') - - for (let i = 0; i < links.length; i++) { - links[i].addEventListener('click', () => { - copy(links[i].textContent) - }) - } -} -const copy = (x) => { - navigator.clipboard.writeText(x).then(() => { - console.log('copied') - }).catch((err) => { - console.error(err) - }) -} +class Main { + constructor() {} -const getPage = async () => { - const object = { - session: document.cookie, - url: window.location.href + async Init() { + await this.Get() } - await fetch('/', { - method: 'post', - body: JSON.stringify(object), - headers: new Headers({ - 'Content-Type': 'application/json' - }) - }) - .then(response => response.text()) - .then(text => { - main.body.innerHTML = DOMPurify.sanitize(text) - test() - }) -} - -// ! Loading screen -const loading = () => {} -// ! Add event listener and loading screen -const init = () => { - loading() - getPage().then(output => { - eventListener() - }) -} -init() + #Loading() {} + async Get(x) { + this.object = { + session: document.cookie, + url: window.location.href + } + this.fetch = '/' + if (x) this.fetch = x -// ! Menu -const openMenu = (menuList, menuIcon, closeButton, list) => { - menuIcon.style.opacity = 0 - setTimeout(() => { - menuList.style.display = 'flex' - menuList.style.zindex = 999 - setTimeout(() => { - menuList.style.opacity = 0.9 - }, '250') - }, '250') -} -const closeMenu = (menuList, menuIcon, closeButton, list) => { - //closeButton.style.fontSize = '15rem' - menuList.style.opacity = 0 - setTimeout(() => { - menuList.style.display = 'none' - menuList.style.zIndex = -9999 - setTimeout(() => { - menuIcon.style.opacity = 1 - }, '250') - }, '500') -} + await fetch(this.fetch, { + method: 'post', + body: JSON.stringify(this.object), + headers: new Headers({ + 'Content-Type': 'application/json' + }) + }) + .then(res => res.json()) + .then(output => { + const head = document.getElementsByTagName('head')[0] + const body = document.getElementsByTagName('body')[0] + const section = document.getElementById('main') -// Blog -const blogButtonList = document.getElementsByClassName('bloglistbutton') + for (let i = 0; i < output.css.length; i++) { + const link = document.createElement('link') + link.rel = 'stylesheet' + link.type = 'text/css' + link.href = `${window.location.origin}/css/${output.css[i]}` + head.appendChild(link) + } + for (let i = 0; i < output.js.length; i++) { + const script = document.createElement('script') + script.src = `${window.location.origin}/js/${output.js[i]}` + body.appendChild(script) + } -const getUrl = () => { - if (window.location.href.endsWith('/')) { - return `${window.location.href}item` - } else { - return `${window.location.href}/item` + section.innerHTML = DOMPurify.sanitize(output.html) + }) } } -const getBlog = async (x) => { - const object = { - session: document.cookie, - url: getUrl(), - value: x - } - await fetch('/blog/item', { - method: 'post', - body: JSON.stringify(object), - headers: new Headers({ - 'Content-Type': 'application/json' - }) - }) - .then(response => response.text()) - .then(text => { - const prism = new Promise((res, rej) => { - const script = document.createElement('script') - script.src = `${window.location.origin}/js/prism.js` - document.head.appendChild(script) - res('success') - }) - prism.then(output => { - const script = document.createElement('script') - main.body.innerHTML = DOMPurify.sanitize(text, { ADD_TAGS: ["iframe"], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] }) - script.src = `${window.location.origin}/js/blogitem.js` - document.head.appendChild(script) - eventListener() - window.scrollTo(0, 0) - }) - }) -} - -// Event listeners -const eventListener = () => { - const menuList = document.getElementById('menu-list') - const menuIcon = document.getElementById('menu-icon') - const closeButton = document.getElementsByClassName('close') - const list = document.getElementsByClassName('list') - const readblogs = document.getElementsByClassName('index-readblogs') - const about = document.getElementById('index-about') - const websites = { - helpinghands: document.getElementById('helpinghands'), - goodhandhauling: document.getElementById('goodhandhauling') - } - console.log(readblogs) - - menuIcon.addEventListener('click', () => openMenu(menuList, menuIcon, closeButton, list)) - closeButton[0].addEventListener('click', () => closeMenu(menuList, menuIcon, closeButton, list)) - try{ - for (let i = 0; i < readblogs.length; i++) readblogs[i].addEventListener('click', () => window.location.href = '/blog') - about.addEventListener('click', () => window.location.href = '/about') - websites.helpinghands.addEventListener('click', () => window.location.href = 'https://helpinghandsadultcare.org/') - websites.goodhandhauling.addEventListener('click', () => window.location.href = 'https://goodhandhauling.com/') - - } catch (err) {} - for (let i = 0; i < list.length; i++) list[i].addEventListener('click', () => closeMenu(menuList, menuIcon, closeButton, list)) - for (let i = 0; i < blogButtonList.length; i++) blogButtonList[i].addEventListener('click', () => getBlog(blogButtonList[i].value)) -} +new Main().Init() diff --git a/source/readfile.js b/source/readfile.js index 744d871..7bb16a5 100644 --- a/source/readfile.js +++ b/source/readfile.js @@ -65,8 +65,6 @@ class ReadFile { <html lang='en'> <head> <title>Welcome to my website!</title> - <link rel='stylesheet' href='/css/prism.css'/> - <link rel='stylesheet' href='/css/main.css'/> <meta name='description' content='${x.description}'> <meta name='keywords' content='${x.keywords}'> <meta name='viewport' content='width=device-width, initial-scale=1'> @@ -86,10 +84,9 @@ class ReadFile { <html> <head> <title>Welcome to my website!</title> - <link rel='stylesheet' href='/css/main.css'/> - <link rel='stylesheet' href='/css/prism.css'/> <meta name='description' content=''> <meta name='keywords' content=''> + <meta name='viewport' content='width=device-width, initial-scale=1'> </head> <body> <section id='main'> |