Javascript Custom Dialog

Javascript Custom Dialog

Javascript ile hazırlanmış custom dialog kütüphanesi

alert, confirm ve prompt metotları ile görsel olarak sade ve güzel bir kütüphanedir.

Kod ve örnek kullanım;

 class Dialog {
    constructor(settings = {}) {
        this.settings = Object.assign(
            {
                accept: 'OK',
                bodyClass: 'dialog-open',
                cancel: 'Cancel',
                dialogClass: '',
                message: '',
                template: ''
            },
            settings
        )
        this.init()
    }

    collectFormData(formData) {
        const object = {};
        formData.forEach((value, key) => {
            if (!Reflect.has(object, key)) {
                object[key] = value
                return
            }
            if (!Array.isArray(object[key])) {
                object[key] = [object[key]]
            }
            object[key].push(value)
        })
        return object
    }

    getFocusable() {
        return [...this.dialog.querySelectorAll('button,[href],select,textarea,input:not([type="hidden"]),[tabindex]:not([tabindex="-1"])')]
    }

    init() {
        if (!document.getElementById("dialog-style")) {
            this.style = document.createElement("style");
            this.style.id = 'dialog-style';
            this.style.innerHTML = `[data-component*="dialog"] * {box-sizing: border-box;outline-color: #3e83e4 }:where([data-component*="dialog"]) {--dlg-gap: 1em;background: var(--dlg-bg, #fff);border: var(--dlg-b, 0);border-radius: var(--dlg-bdrs, 0.25em);box-shadow: var(--dlg-bxsh, 0px 25px 50px -12px rgba(0, 0, 0, 0.25));font-family: var(--dlg-ff, ui-sansserif, system-ui, sans-serif);min-inline-size: var(--dlg-mis, auto);padding: var(--dlg-p, var(--dlg-gap));width: var(--dlg-w, fit-content);}:where([data-component="no-dialog"]:not([hidden])) {display: block;inset-block-start: var(--dlg-gap);inset-inline-start: 50%;position: fixed;transform: translateX(-50%);}:where([data-component*="dialog"] menu) {display: flex;gap: calc(var(--dlg-gap) / 2);justify-content: var(--dlg-menu-jc, flex-end);margin: 0;padding: 0;}:where([data-component*="dialog"] menu button) {background-color: var(--dlg-button-bgc);border: 0;border-radius: var(--dlg-bdrs, 0.25em);color: var(--dlg-button-c);font-size: var(--dlg-button-fz, 0.8em);padding: var(--dlg-button-p, 0.65em 1.5em);}:where([data-component*="dialog"] [data-ref="accept"]) {--dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%));--dlg-button-c: var(--dlg-accept-c, #fff);}:where([data-component*="dialog"] [data-ref="cancel"]) {--dlg-button-bgc: var(--dlg-cancel-bgc, transparent);--dlg-button-c: var(--dlg-cancel-c, inherit);}:where([data-component*="dialog"] [data-ref="fieldset"]) {border: 0;margin: unset;padding: unset;}:where([data-component*="dialog"] [data-ref="message"]) {font-size: var(--dlg-message-fz, 1.25em);margin-block-end: var(--dlg-gap);}:where([data-component*="dialog"] [data-ref="template"]:not(:empty)) {margin-block-end: var(--dlg-gap);width: 100%;}@-moz-document url-prefix() {[data-component="no-dialog"]:not([hidden]) {inset-inline-start: 0;transform: none;}}.dialog-open {background-color: rgba(0, 0, 0, .1);overflow: hidden;}[name="prompt"] {border: 1px solid silver;padding: .6em 1em;width: 100%;}.custom {--dlg-accept-bgc: hsl(215deg 75% 57%);--dlg-accept-c: #fff;--dlg-bg: #fff;--dlg-button-p: 0.75em 2em;--dlg-outline-c: #00D9F5;}.custom input {background-color: rgb(255 255 255);border-radius: 0.25em;border: 0;display: block;margin-block: 0.5em 1em;padding: 0.75em 1em;width: 100%;box-shadow: 0px 0px 0px 2px #4081e3;}.custom label {display: block;font-size: small;}dialog::backdrop {background: rgb(0 0 0 / 58%);}input[type="checkbox"] {width: auto !important;display: inline-block !important;vertical-align: sub;box-shadow: none !important;}`;
            document.head.append(this.style);
        }
        this.dialogSupported = typeof HTMLDialogElement === 'function'
        this.dialog = document.createElement('dialog')
        this.dialog.role = 'dialog'
        this.dialog.dataset.component = this.dialogSupported ? 'dialog' : 'no-dialog';
        this.dialog.innerHTML = `
      <form method="dialog" data-ref="form">
        <fieldset data-ref="fieldset" role="document">
          <legend data-ref="message" id="${(Math.round(Date.now())).toString(36)}"></legend>
          <div data-ref="template"></div>
        </fieldset>
        <menu>
          <button${this.dialogSupported ? '' : ` type="button"`} data-ref="cancel" value="cancel"></button>
          <button${this.dialogSupported ? '' : ` type="button"`} data-ref="accept" value="default"></button>
        </menu>
      </form>`
        document.body.appendChild(this.dialog)

        this.elements = {}
        this.focusable = []
        this.dialog.querySelectorAll('[data-ref]').forEach(el => this.elements[el.dataset.ref] = el)
        this.dialog.setAttribute('aria-labelledby', this.elements.message.id)
        this.elements.cancel.addEventListener('click', () => { this.dialog.dispatchEvent(new Event('cancel')) })
        this.dialog.addEventListener('keydown', e => {
            if (e.key === 'Enter') {
                if (!this.dialogSupported) e.preventDefault()
                this.elements.accept.dispatchEvent(new Event('click'))
            }
            if (e.key === 'Escape') this.dialog.dispatchEvent(new Event('cancel'))
            if (e.key === 'Tab') {
                e.preventDefault()
                const len = this.focusable.length - 1;
                let index = this.focusable.indexOf(e.target);
                index = e.shiftKey ? index - 1 : index + 1;
                if (index < 0) index = len;
                if (index > len) index = 0;
                this.focusable[index].focus();
            }
        })
        this.toggle()
    }

    open(settings = {}) {

        const dialog = Object.assign({}, this.settings, settings)
        this.dialog.className = dialog.dialogClass || ''
        this.elements.accept.innerText = dialog.accept
        this.elements.cancel.innerText = dialog.cancel
        this.elements.cancel.hidden = dialog.cancel === ''
        this.elements.message.innerText = dialog.message
        this.elements.target = dialog.target || ''
        this.elements.template.innerHTML = dialog.template || ''

        this.focusable = this.getFocusable()
        this.hasFormData = this.elements.fieldset.elements.length > 0


        this.toggle(true)

        if (this.hasFormData) {
            this.focusable[0].focus()
            this.focusable[0].select()
        }
        else {
            this.elements.accept.focus()
        }
    }

    toggle(open = false) {
        if (this.dialogSupported && open) this.dialog.showModal()
        if (!this.dialogSupported) {
            document.body.classList.toggle(this.settings.bodyClass, open)
            this.dialog.hidden = !open
            if (this.elements.target && !open) {
                this.elements.target.focus()
            }
        }
    }

    waitForUser() {
        return new Promise(resolve => {
            this.dialog.addEventListener('cancel', () => {
                this.toggle()
                resolve(false)
            }, { once: true })
            this.elements.accept.addEventListener('click', () => {
                let value = this.hasFormData ? this.collectFormData(new FormData(this.elements.form)) : true;
                this.toggle()
                resolve(value)
            }, { once: true })
        })
    }

    alert(message, config = { }) {
        const settings = Object.assign({}, config, { cancel: '', message, template: '' })
        this.open(settings)
        return this.waitForUser()
    }

    confirm(message, config = {  }) {
        const settings = Object.assign({}, config, { message, template: '' })
        this.open(settings)
        return this.waitForUser()
    }

    prompt(message, value, config = {  }) {
        const template = `<label aria-label="${message}"><input type="text" name="prompt" value="${value}"></label>`
        const settings = Object.assign({}, config, { message, template })
        this.open(settings)
        return this.waitForUser()
    }
}

Örnek Kullanım

var dialog = new Dialog();

//Dialog örneği
dialog.alert("İşlem başarıyla tamamlanmıştır");

//Confirm Örneği
var confirm = dialog.confirm("Silmek istediğinize emin misiniz");
confirm.then(a => {
    if (a === true) {
        console.log("Onaylandı")
    } else {
        console.log("Onaylanmadı")
    }
})

//Prompt Örneği
var confirm = dialog.prompt("Adınız", "name");
confirm.then(a => {
    console.log(a.prompt)
})

Comments


Yorum yazın







Tarih: