From 5210aec76788ea83365d8a8903a90c8ef81130fc Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 4 Jan 2024 01:10:04 +0530 Subject: [PATCH] new: Modern alert dialogs dev: WIP notify dialog --- index.html | 12 +-- index.js | 4 +- js_modules/cli.js | 10 +- js_modules/search.js | 14 ++- js_modules/utils/alertDialog.js | 146 +++++++++++++++++++++++++++++ js_modules/utils/notifyDialog.js | 152 +++++++++++++++++++++++++++++++ 6 files changed, 322 insertions(+), 16 deletions(-) create mode 100644 js_modules/utils/alertDialog.js create mode 100644 js_modules/utils/notifyDialog.js diff --git a/index.html b/index.html index 9e8700e..621413c 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,8 @@ }); } --> - - + + Search • Casa Mia @@ -29,10 +29,10 @@ rel="stylesheet" /> - - - + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css?v=1703602562286"> + + + diff --git a/index.js b/index.js index f52f09b..508359a 100644 --- a/index.js +++ b/index.js @@ -51,6 +51,7 @@ import { isItChristmas } from './js_modules/utils/letItSnow.js'; import { InputDialog } from './js_modules/utils/inputDialog.js'; import { isTouchDevice } from './js_modules/utils/isTouchDevice.js'; import { enableSubmitButton } from './js_modules/utils/enableSubmitButton.js'; +import { genericAlert } from './js_modules/utils/alertDialog.js'; const bottomFilmRollContainer = document.getElementById('wallpapers'); const wrap = document.getElementById('wrap'); @@ -372,7 +373,8 @@ document.addEventListener('DOMContentLoaded', () => { preOnboarding().then(() => { if (isTouchDevice()) { setTimeout(() => { - alert('Press and hold anywhere to open settings.'); + genericAlert('Information', + 'Press and hold on empty area to open settings.'); }, 5000); } postOnboarding(); diff --git a/js_modules/cli.js b/js_modules/cli.js index a5fa91c..d0f9b4b 100644 --- a/js_modules/cli.js +++ b/js_modules/cli.js @@ -4,6 +4,7 @@ import { import { resetAll, resetBookmarks } from './preferences.js'; import { cliUnexpectedCmdText } from './strings.js'; import { fetchBookmarks } from './utils.js'; +import { genericAlert } from './utils/alertDialog.js'; import { downloadFile } from './utils/downloadFile.js'; @@ -32,7 +33,8 @@ function searchViaCli(url, searchTerm) { // value = encodeURIComponent(value); const o = window.open(`${url}${value}`, '_blank'); if (o == null) { - alert(`Allow pop-ups for this feature to work properly`); + genericAlert('Information', + 'Allow pop-ups for this feature to work properly.'); return; }; }); @@ -50,14 +52,14 @@ export function cliParse(input) { case 'reset': if (input[1] == 'bookmarks') resetBookmarks(); else if (input[1] == 'all') resetAll(); - else alert(cliUnexpectedCmdText); + else genericAlert('Error', cliUnexpectedCmdText); break; case 'fetch default': fetchBookmarks(); break; case 'dl': if (input[1]) parseDL(input[1]); - else alert(cliUnexpectedCmdText); + else genericAlert('Error', cliUnexpectedCmdText); break; case 'g': searchViaCli(GOOGLE_SEARCH_DOMAIN, forBatchSearch); @@ -69,7 +71,7 @@ export function cliParse(input) { searchViaCli(DUCKDUCKGO_SEARCH_DOMAIN, forBatchSearch); break; default: - alert(cliUnexpectedCmdText); + genericAlert('Error', cliUnexpectedCmdText); }; } diff --git a/js_modules/search.js b/js_modules/search.js index 3b38d7a..4f579cd 100644 --- a/js_modules/search.js +++ b/js_modules/search.js @@ -10,6 +10,9 @@ import { cliParse, } from './cli.js'; import { isUrlValid } from './validators.js'; +import { genericAlert } from './utils/alertDialog.js'; + +const MSG = 'You must enter a search query to continue.'; function loadSearchDomain(input) { let domain = localStorage.getItem('default-search-url'); @@ -35,7 +38,7 @@ export function webSearch() { window.open(url, '_self'); } else cliParse(input); } else { - alert('You need to enter a search query.'); + genericAlert('Error', MSG); } } @@ -47,7 +50,7 @@ export function movies() { const url = EXT_SEARCH_DOMAIN + input + '/Movies/time/desc/1/'; window.open(url); } else { - alert('You need to enter a search query.'); + genericAlert('Error', MSG); } } @@ -58,7 +61,7 @@ export function tv() { const url = EXT_SEARCH_DOMAIN + input + '/TV/size/desc/1/'; window.open(url); } else { - alert('You need to enter a search query.'); + genericAlert('Error', MSG); } } @@ -69,7 +72,7 @@ export function games() { const url = EXT_SEARCH_DOMAIN + input + '/Games/time/desc/1/'; window.open(url); } else { - alert('You need to enter a search query.'); + genericAlert('Error', MSG); } } export function ebooks() { @@ -79,7 +82,7 @@ export function ebooks() { const url = EXT_SEARCH_DOMAIN + input + '/Other/seeders/desc/1/'; window.open(url); } else { - alert('You need to enter a search query.'); + genericAlert('Error', MSG); } }; @@ -91,6 +94,7 @@ export function switchToCLI(event) { } else { btnIcon.className = currentIcon; } + console.log(event.target.value); }; export function enterToSearch(event) { diff --git a/js_modules/utils/alertDialog.js b/js_modules/utils/alertDialog.js new file mode 100644 index 0000000..0b19cc6 --- /dev/null +++ b/js_modules/utils/alertDialog.js @@ -0,0 +1,146 @@ +let alertModalContainer; +let modalCancelButton; +let tickBoxField; +let submitButtons; + +const showAlertDialog = ( + title = null, + description = null, + submitButtonNames = ['Submit A', 'Submit B'], + cancelButtonName = 'Ok', + tickBox = [null, null], + listeners = [], + onInit = null, +) => { + alertModalContainer = document.getElementById('alertDialogContainer'); + if (alertModalContainer) alertModalContainer.remove(); + + if (title) { + title = `

${title}

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

${description}

+ `; + } else (description = ''); + + document.body + .insertAdjacentHTML('afterbegin', ` +
+
+ ${title} + ${description} +
+ +
+
+
+ `); + if (submitButtonNames) { + submitButtonNames.forEach((e) => { + let id = e.replaceAll(' ', '-').toLowerCase(); + id = `ALERT-BUTTON-${id}`; + document.getElementById('alertDialogButtonsBar') + .insertAdjacentHTML('afterbegin', ` + + `); + }); + } + if (tickBox[0]) { + document.getElementById('alertDialogButtonsBar') + .insertAdjacentHTML('beforebegin', ` + + `); + tickBoxField = document.getElementById('tickBoxField'); + }; + + alertModalContainer = document.getElementById('alertDialogContainer'); + modalCancelButton = document.getElementById('alertDialogCancelButton'); + submitButtons = document.getElementsByClassName('alertDialogSubmitButton'); + document.body.style.overflow = 'hidden'; + modalCancelButton.focus(); + + const promise = new Promise((resolve, reject) => { + alertModalContainer.style.alignItems = 'center'; + // alertModalContainer.style.paddingBlockStart = '0em'; + alertModalContainer.style.opacity = '1'; + + // const rejectModal = () => { + // // modalCancelButton.removeEventListener('click', rejectModal); + // // alertModalContainer.remove(); + // // document.body.style.overflow = 'auto'; + // reject(Error(null)); + // }; + + const resolveModal = () => { + modalCancelButton.removeEventListener('click', resolveModal); + if (tickBox[0]) { + tickBoxField.removeEventListener('change', tickBox[1]); + tickBoxField = tickBoxField.checked; + } + if (listeners) { + listeners.forEach((element, index) => { + submitButtons[index].removeEventListener('click', element); + }); + } + alertModalContainer.remove(); + document.body.style.overflow = 'auto'; + // console.log(result); + resolve(tickBoxField); + }; + + modalCancelButton.addEventListener('click', resolveModal); + if (listeners) { + listeners.forEach((element, index) => { + submitButtons[index].addEventListener('click', element); + }); + } + if (tickBox[0]) { + tickBoxField.addEventListener('change', tickBox[1]); + } + }); + + if (onInit) onInit(); + return promise; +}; + +export const AlertDialog = { + show: showAlertDialog, + getCancelButton: () => { + return modalCancelButton; + }, + getSubmitButtons: () => { + return submitButtons; + }, + getCheckboxField: () => { + return tickBoxField; + }, +}; + +export const genericAlert = (title, msg) => { + AlertDialog.show( + title, + msg, + null, + 'Ok', + [null, null], + null, + null, + ).then((res) => console.log(res)) + .catch((e) => console.error(e)); +}; diff --git a/js_modules/utils/notifyDialog.js b/js_modules/utils/notifyDialog.js new file mode 100644 index 0000000..d162125 --- /dev/null +++ b/js_modules/utils/notifyDialog.js @@ -0,0 +1,152 @@ +let modalContainer; +let modalSubmitButton; +let modalCancelButton; +let tickBoxField; +let inputFields; + +const showInputDialog = ( + title = null, + description = null, + inputBoxes = ['Input A', 'Input B'], + submitButtonName = 'Submit', + cancelButtonName = 'Cancel', + tickBox = null, + listeners = [onInput = null, onChange = null], + onInit = 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} +
+ + +
+ +
+ `); + 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 promise = new Promise((resolve, reject) => { + modalContainer.style.paddingBlockStart = '4em'; + modalContainer.style.opacity = '1'; + + 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]); + } + }); + + if (onInit) onInit(); + return promise; +}; + +export const InputDialog = { + show: showInputDialog, + getSubmitButton: () => { + return modalSubmitButton; + }, + getCancelButton: () => { + return modalCancelButton; + }, + getInputFields: () => { + return inputFields; + }, + getCheckboxField: (n) => { + return tickBoxField; + }, +};