`}+ Balance: Ð ${this.api.value?.balance} +
+ `} + ${this.api.value?.acceptedToS && html` ++ Earned: Ð ${this.api.value?.earned} +
+ `} +Some instructions
+ ` + + this.markup.content = () => html` + ${this.markup.header} + + + + ${this.markup.footer} + ` + + this.markup = { + ...this.markup, + ...config.markup, + } + + this.events = { + input: event => { + // let { + // // @ts-ignore + // name: fieldName, form, + // } = event?.target + + // console.log('handle input', { + // fieldName, + // form, + // }) + + if ( + event?.target?.validity?.patternMismatch && + event?.target?.type !== 'checkbox' + ) { + event.preventDefault() + let label = event.target?.previousElementSibling?.textContent?.trim() + if (label) { + event.target.setCustomValidity(`Invalid ${label}`) + } + } else { + event.target.setCustomValidity('') + } + event.target.reportValidity() + }, + change: event => { + // let { + // // @ts-ignore + // name: fieldName, form, + // } = event?.target + + // console.log('handle change', { + // fieldName, + // form, + // }) + + if ( + event?.target?.validity?.patternMismatch && + event?.target?.type !== 'checkbox' + ) { + event.preventDefault() + let label = event.target?.previousElementSibling?.textContent?.trim() + if (label) { + event.target.setCustomValidity(`Invalid ${label}`) + } + } else { + event.target.setCustomValidity('') + } + event.target.reportValidity() + }, + blur: event => { + // event.preventDefault() + // console.log( + // 'handle blur', + // event, + // ) + }, + focusout: event => { + // event.preventDefault() + // console.log( + // 'handle focus out', + // event, + // ) + }, + focusin: event => { + // event.preventDefault() + // console.log( + // 'handle focus in', + // event, + // ) + }, + drop: event => { + event.preventDefault() + }, + dragover: event => { + event.preventDefault() + }, + dragend: event => { + event.preventDefault() + }, + dragleave: event => { + event.preventDefault() + }, + render: ( + state, + ) => { + // console.log( + // 'handle dialog render', + // state, + // ) + }, + show: ( + state, + ) => { + // console.log( + // 'handle dialog show', + // state, + // ) + + // focus first input + this.elements.form.querySelector( + 'input' + )?.focus() + }, + close: ( + resolve = res=>{}, + reject = res=>{}, + ) => async event => { + event.preventDefault() + removeAllListeners.bind(this) + + // console.log( + // 'handle dialog close', + // event, + // event.target === this.elements.dialog, + // this.elements.dialog.returnValue + // ) + this.state.value.status = DIALOG_STATUS.NOT_LOADING + this.elements.dialog?.querySelector('progress')?.remove() + + if (this.elements.dialog.returnValue !== 'cancel') { + resolve(this.elements.dialog.returnValue) + } else { + resolve('cancel') + } + // console.log( + // 'DIALOG handleClose', + // modal.rendered[this.slugs.dialog], + // ) + + setTimeout(t => { + // modal.rendered[this.slugs.dialog] = null + this.state.value.rendered = null + event?.target?.remove() + // console.log( + // 'DIALOG handleClose setTimeout', + // this.state.value.delay, + // // modal.rendered[this.slugs.dialog], + // modal.rendered, + // ) + }, this.state.value.delay) + }, + submit: event => { + event.preventDefault() + + let fde = formDataEntries(event) + + this.elements.dialog.returnValue = String(fde.intent) + + // console.log( + // 'handleSubmit', + // [event], + // ) + + this.elements.dialog.close(String(fde.intent)) + }, + reset: event => { + event.preventDefault() + this.elements.form?.removeEventListener( + 'close', + this.events.reset + ) + // console.log( + // 'handleReset', + // [event.target], + // ) + this.elements.dialog.close('cancel') + }, + click: event => { + if (event.target === this.elements.dialog) { + // console.log( + // 'handle dialog backdrop click', + // event, + // event.target === this.elements.dialog + // ) + this.elements.dialog.close('cancel') + } + }, + } + + const dialogElement = document.createElement('dialog') + const formElement = document.createElement('form') + const progressElement = document.createElement('progress') + + this.elements.dialog = dialogElement + this.elements.form = formElement + this.elements.progress = progressElement + + + this.element = this.elements.dialog + + progressElement.classList.add('pending') + + dialogElement.innerHTML = `` + dialogElement.id = this.slugs.dialog + if (this.state.value.responsive) { + dialogElement.classList.add('responsive') + } + dialogElement.classList.add(...(this.state.value.placement.split(' '))) + + formElement.name = `${this.slugs.form}` + formElement.method = 'dialog' + // formElement.innerHTML = this.markup.content + formElement.innerHTML = this.markup.content() + + dialogElement.insertAdjacentElement( + 'afterbegin', + formElement + ) + + /** + * Show the dialog + * @function + */ + this.show = (callback, el = this.appElement) => new Promise((resolve, reject) => { + removeAllListeners.call(this) + addListeners.call(this, resolve, reject) + console.log('modal.js dialog show', this.elements.dialog) + // if ( + // !this.state.value.rendered && + // !el.contains(this.elements.dialog) + // ) { + this.render({ + el, + // cfg: config, + position: 'afterend' + }) + // } + this.elements.dialog.show() + this.events.show?.(this) + callback?.() + }) + + /** + * Show the Modal form of the dialog + * @function + */ + this.showModal = (callback, el = this.appElement) => new Promise((resolve, reject) => { + removeAllListeners.call(this) + addListeners.call(this, resolve, reject) + console.log('modal.js dialog showModal', this, this.elements.dialog) + // if ( + // !this.state.value.rendered && + // !el.contains(this.elements.dialog) + // ) { + this.render({ + el, + // cfg: config, + position: 'afterend' + }) + // } + this.elements.dialog.showModal() + this.events.show?.(this) + callback?.() + }) + + /** + * Close the dialog + * @function + */ + this.close = returnVal => this.elements.dialog.close(returnVal) + + /** + * Update the config of the dialog + * @function + */ + this.updateConfig = (config = {}) => { + console.log('Dialog updateConfig TOP', config) + + for (let param in config) { + // if (param === 'markup') { + // this[param].value = { + // ...this[param].value, + // ...(config[param] || {}), + // } + // } else { + if ('value' in this[param]) { + this[param].value = { + ...this[param].value, + ...(config[param] || {}), + } + } else { + this[param] = { + ...this[param], + ...(config[param] || {}), + } + } + // } + } + + console.log('Dialog updateConfig BOT', this) + } + + /** + * Trigger the rendering of the dialog + * @function + */ + this.render = ({ + cfg = {}, + position = 'afterend', + el = this.appElement, + }) => { + console.log('dialog render', this, dl) + + // this.elements.form?.removeEventListener?.( + // 'submit', + // this.events.submit, + // ) + + if (el !== this.appElement) { + this.appElement = el + } + + this.updateConfig(cfg) + + console.log('DIALOG elements', this, this.elements) + + this.elements.dialog.id = this.slugs.dialog + this.elements.form.name = this.slugs.form + // this.elements.form.innerHTML = this.markup.content + this.elements.form.innerHTML = this.markup.content() + + // this.elements.form.addEventListener( + // 'submit', + // this.events.submit, + // ) + + console.log('DIALOG RENDER STATE', this.state.value, cfg) + + console.log('DIALOG RENDER', position, this.slugs.dialog) + + if ( + this.state.value.status === DIALOG_STATUS.LOADING + ) { + this.elements.form.insertAdjacentElement( + 'beforebegin', + this.elements.progress, + ) + + // document.body.insertAdjacentHTML( + // 'afterbegin', + // ``, + // ) + } + + if ( + this.state.value.status === DIALOG_STATUS.SUCCESS || + this.state.value.status === DIALOG_STATUS.ERROR + ) { + // document.getElementById('pageLoader')?.remove() + this.elements.dialog.querySelector('progress')?.remove() + } + + if (!this.state.value.rendered) { + console.log('!this.state.rendered el', el, this.appElement, this.elements.dialog) + // @ts-ignore + el?.insertAdjacentElement(position, this.elements.dialog) + this.state.value.rendered = this.elements.dialog + + this.elements.dialog.addEventListener( + 'close', + this.events.close + ) + } + + // console.log('DIALOG RENDER', state, position, state.slugs.dialog, modal.rendered) + + this.events.render(this.state) + + return this + } + + // const updateSelf = (cfg, methods = []) => { + // for (let mthd of methods) { + // this[mthd] = { + // ...this[mthd], + // ...(cfg[mthd] || {}), + // } + // } + // } + // updateSelf(cfg, [ + // 'state', 'slugs', 'events', 'elements', 'templates' + // ]) + + // state.render = render + } + + return dl +})(); + +// export function Modal(config) { +// let dialog = new DialogContructor(config) + +// console.log('Modal.js Dialog', dialog) + +// return dialog +// } + +export default DialogContructor diff --git a/src/components/svg-sprite.js b/src/components/svg-sprite.js index 3fa2055..0c7184a 100644 --- a/src/components/svg-sprite.js +++ b/src/components/svg-sprite.js @@ -7,6 +7,10 @@ const initialState = {`}
- 
-