From 981c57056f512128bcd711ebf3f089d035543206 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 4 Jan 2024 23:38:44 +0530 Subject: [PATCH] new: Modern notifications for less important messages --- index.html | 1 + js_modules/search.js | 11 +- js_modules/utils/notifyDialog.js | 184 ++++++++----------------------- style.css | 65 ++++++++++- 4 files changed, 115 insertions(+), 146 deletions(-) diff --git a/index.html b/index.html index f8cf0d0..27f2eb4 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,7 @@ +
diff --git a/js_modules/search.js b/js_modules/search.js index 4f579cd..61d2784 100644 --- a/js_modules/search.js +++ b/js_modules/search.js @@ -11,6 +11,7 @@ import { } from './cli.js'; import { isUrlValid } from './validators.js'; import { genericAlert } from './utils/alertDialog.js'; +import { Notify } from './utils/notifyDialog.js'; const MSG = 'You must enter a search query to continue.'; @@ -38,7 +39,7 @@ export function webSearch() { window.open(url, '_self'); } else cliParse(input); } else { - genericAlert('Error', MSG); + Notify.show(MSG); } } @@ -50,7 +51,7 @@ export function movies() { const url = EXT_SEARCH_DOMAIN + input + '/Movies/time/desc/1/'; window.open(url); } else { - genericAlert('Error', MSG); + Notify.show(MSG); } } @@ -61,7 +62,7 @@ export function tv() { const url = EXT_SEARCH_DOMAIN + input + '/TV/size/desc/1/'; window.open(url); } else { - genericAlert('Error', MSG); + Notify.show(MSG); } } @@ -72,7 +73,7 @@ export function games() { const url = EXT_SEARCH_DOMAIN + input + '/Games/time/desc/1/'; window.open(url); } else { - genericAlert('Error', MSG); + Notify.show(MSG); } } export function ebooks() { @@ -82,7 +83,7 @@ export function ebooks() { const url = EXT_SEARCH_DOMAIN + input + '/Other/seeders/desc/1/'; window.open(url); } else { - genericAlert('Error', MSG); + Notify.show(MSG); } }; diff --git a/js_modules/utils/notifyDialog.js b/js_modules/utils/notifyDialog.js index d162125..46b5856 100644 --- a/js_modules/utils/notifyDialog.js +++ b/js_modules/utils/notifyDialog.js @@ -1,152 +1,56 @@ -let modalContainer; -let modalSubmitButton; +const notifyModalContainer = document.getElementById('notifyContainer'); let modalCancelButton; -let tickBoxField; -let inputFields; +let notify; -const showInputDialog = ( - title = null, - description = null, - inputBoxes = ['Input A', 'Input B'], - submitButtonName = 'Submit', - cancelButtonName = 'Cancel', - tickBox = null, - listeners = [onInput = null, onChange = null], - onInit = null, +const showNotifyDialog = ( + description, + ms = '5000', + onClick = null, ) => { - modalContainer = document.getElementById('inputDialogContainer'); - if (modalContainer) modalContainer.remove(); - - document.activeElement.blur(); - - if (title) { - title = `

${title}

`; - } else (title = ''); - if (description) { - description = ` -

${description}

- `; - } else (description = ''); - - document.body - .insertAdjacentHTML('afterbegin', ` -
-
- ${title} - ${description} -
- - -
- + const id = Date.now(); + notify = document.getElementById(`notifyModal-${id}`); + if (notify) notify.parentNode.remove(); + + notifyModalContainer.insertAdjacentHTML('afterbegin', ` +
+
+

+ ${description} +

+
+
+
`); - inputBoxes.forEach((e) => { - let id = e.replaceAll(' ', '-').toLowerCase(); - id = `MODAL-INPUT-${id}`; - document.getElementById('inputDialogButtonsBar') - .insertAdjacentHTML('beforebegin', ` - - - `); - }); - if (tickBox) { - document.getElementById('inputDialogButtonsBar') - .insertAdjacentHTML('beforebegin', ` - - `); - tickBoxField = document.getElementById('tickBoxField'); - }; - - modalContainer = document.getElementById('inputDialogContainer'); - modalSubmitButton = document.getElementById('inputDialogSubmitButton'); - modalCancelButton = document.getElementById('inputDialogCancelButton'); - inputFields = document.getElementsByClassName('modalInputField'); - document.body.style.overflow = 'hidden'; - inputFields[0].focus(); - if (!cancelButtonName) modalCancelButton.style.display = 'none'; + const notifyLoader = document.getElementById(`notifyLoader-${id}`); - const promise = new Promise((resolve, reject) => { - modalContainer.style.paddingBlockStart = '4em'; - modalContainer.style.opacity = '1'; + notify = document.getElementById(`notifyModal-${id}`); + if (onClick) notify.addEventListner('click', onClick); - const rejectModal = () => { - modalCancelButton.removeEventListener('click', rejectModal); - modalContainer.remove(); - document.body.style.overflow = 'auto'; - reject(Error(null)); - }; - - const resolveModal = () => { - modalSubmitButton.removeEventListener('click', resolveModal); - if (tickBox) { - tickBoxField.removeEventListener('change', listeners[1]); - tickBoxField = tickBoxField.checked; - } - const inputValues = []; - for (const e of inputFields) { - inputValues.push(e.value); - if (listeners) e.removeEventListener('input', listeners); - } - const result = { - 'inputValues': inputValues, 'checkboxChecked': tickBoxField, - }; - modalContainer.remove(); - document.body.style.overflow = 'auto'; - - console.log(result); - resolve(result); - }; - - modalCancelButton.addEventListener('click', rejectModal); - modalSubmitButton.addEventListener('click', resolveModal); - if (listeners[0]) { - for (const e of inputFields) e.addEventListener('input', listeners[0]); - } - if (listeners[1] && tickBox) { - tickBoxField.addEventListener('change', listeners[1]); - } - }); + const closeNotification = (event) => { + if (onClick) notify.removeEventListner('click', onClick); + modalCancelButton.removeEventListener('click', closeNotification); + event.target.parentNode.remove(); + }; - if (onInit) onInit(); - return promise; + modalCancelButton = document.getElementById(`notifyDialogCancelButton-${id}`); + modalCancelButton.addEventListener('click', closeNotification); + + setTimeout(() => { + const close = modalCancelButton; + setTimeout(() => { + close.click(); + }, ms); + notifyLoader.style.transition = ms + 'ms'; + notify.style.opacity = '1'; + notify.style.marginTop = '2em'; + notifyLoader.style.width = '0%'; + }, 50); }; -export const InputDialog = { - show: showInputDialog, - getSubmitButton: () => { - return modalSubmitButton; - }, - getCancelButton: () => { - return modalCancelButton; - }, - getInputFields: () => { - return inputFields; - }, - getCheckboxField: (n) => { - return tickBoxField; - }, +export const Notify = { + show: showNotifyDialog, }; diff --git a/style.css b/style.css index da64aa0..a42bed0 100644 --- a/style.css +++ b/style.css @@ -1045,6 +1045,23 @@ input::-webkit-search-cancel-button:hover { transition: 200ms; } +.notifyContainer { + color: white; + font-family: 'Ubuntu'; + position: fixed; + top: 0; + width: 100%; + height: auto; + background-color: transparent; + z-index: 5; + display: flex; + align-items: center; + justify-content: center; + opacity: 1; + transition: 200ms; + flex-direction: column-reverse; +} + .modal { min-width: 10em; width: 90%; @@ -1058,6 +1075,27 @@ input::-webkit-search-cancel-button:hover { box-shadow: rgba(0, 0, 0, 0.2) 0 0 2em 0; } +.notifyModal { + min-width: 10em; + width: 90%; + max-width: 30em; + display: flex; + flex-direction: row; + background: #2b2b2b; + padding: 1.5em; + margin-top: 0em; + margin-bottom: -1em; + z-index: 5; + border-radius: 1em; + border: 1px solid #ffffff24; + box-shadow: rgba(0, 0, 0, 0.2) 0 0 2em 0; + align-items: center; + opacity: 0; + transition: 200ms; + gap: 1em; + justify-content: space-between; +} + .modalTitle { padding-bottom: 0.5em; } @@ -1068,6 +1106,17 @@ input::-webkit-search-cancel-button:hover { font-weight: 100; } +.notifyDescriptionContainer { + width: 90%; +} + +.notifyDescription { + overflow: hidden; + word-wrap: break-word; + font-size: 1em; + font-weight: 200; +} + .modalButtonsBar { vertical-align: middle; display: inline-flex; @@ -1126,6 +1175,21 @@ input::-webkit-search-cancel-button:hover { transition: 100ms; } +.tinyButton { + min-width: 1.75em; + min-height: 1.75em; + max-width: 1.75em; + max-height: 1.75em; + padding-bottom: 2px; +} + +.notifyLoader { + width: 100%; + margin-top: 1em; + margin-bottom: -1em; + opacity: 0.1; +} + .button:disabled { background-color: #fff; opacity: 0.75; @@ -1139,7 +1203,6 @@ input::-webkit-search-cancel-button:hover { opacity: 0.75; } - .mainButton { /* background-color: #8cffc9; */ /* border: 1px solid rgba(206, 206, 206, 0.5); */