Creating and showing Jason's Dialog in Javascript

[AndrewTraub]

I have the no javascript version of a website near completion.
I'm not taking a break from some tasks to go back in and add javascript to enhance the experience for users who have it enabled. I'd like to take advantage of the css Jason has already shown us to create a dialog.

Currently, if the user wants to delete an item, they are taken to a new page which asks for a confirmation dialog. Accepting or cancelling eventually returns them to the original page.  I'd like to instead show a dialog box in javascript and then perform the deletion via a post call.

I've adapted some code as follows:

Code: [Select]

class ConfirmDialog {
    constructor({ questionText, trueButtonText, falseButtonText, parent }) {
        this.questionText = questionText || "Are you sure?";
        this.trueButtonText = trueButtonText || "Yes";
        this.falseButtonText = falseButtonText || "No";
        this.parent = parent || document.body;

        this.dialog = undefined;
        this.trueButton = undefined;
        this.falseButton = undefined;

        this._createDialog();
        this._appendDialog();
    }

    confirm() {
        return new Promise((resolve, reject) => {
            const somethingWentWrongUponCreation =
                !this.dialog || !this.trueButton || !this.falseButton;
            if (somethingWentWrongUponCreation) {
                reject('Something went wrong when creating the modal');
                return;
            }

            //todo: show
            this.trueButton.focus();

            this.trueButton.addEventListener("click", () => {
                resolve(true);
                this._destroy();
            });

            this.falseButton.addEventListener("click", () => {
                resolve(false);
                this._destroy();
            });
        });
    }

    _createDialog() {
        this.dialog = document.createElement("div");
        this.dialog.classList.add("modal");

        const modalClose = document.createElement("a");
        modalClose.classList.add('modalClose');

        this.dialog.appendChild(modalClose);

        const wrapper = document.createElement('div');
        this.dialog.appendChild(wrapper);

        const section = document.createElement('section');
        wrapper.appendChild(section);

        section.appendChild(modalClose);

        const title = document.createElement('h2');
        title.textContent = 'Are You Sure?';
        section.appendChild(title);

        const p = document.createElement('p');
        p.textContent = this.questionText;
        section.appendChild(p);

        const buttonGroup = document.createElement("div");
        buttonGroup.classList.add("confirm-dialog-button-group");
        section.appendChild(buttonGroup);

        this.falseButton = document.createElement("button");
        this.falseButton.classList.add("secondary");
        this.falseButton.type = "button";
        this.falseButton.textContent = this.falseButtonText;
        buttonGroup.appendChild(this.falseButton);

        this.trueButton = document.createElement("button");
        this.trueButton.classList.add("primary");
        this.trueButton.type = "button";
        this.trueButton.textContent = this.trueButtonText;
        buttonGroup.appendChild(this.trueButton);
    }

    _appendDialog() {
        this.parent.appendChild(this.dialog);
    }

    _destroy() {
        this.parent.removeChild(this.dialog);
        delete this;
    }
}

The code is called like this:

Code: [Select]

const confirmDelete = async () => {
        const dialog = new ConfirmDialog({
            trueButtonText: "Yes",
            falseButtonText: "No",
            questionText: "Are you sure you want to delete this contact?"
        });

        const shouldDelete = await dialog.confirm();
        if (shouldDelete) {
            console.log('delete confirmed');
        } else {
            console.log('cancelled');
        }
    }
Two issues:
The modalClose only appears in one area of the html generated, though it should appear as the first element in the outer modal div as well.

Second, is I'm not sure how to cause the modal to display.  Do I need to give it an ID and then target it or can I show it some other way?

Thanks,

Andrew

[AndrewTraub]

Well I fixed the issue with the closeModal only appearing once by using .cloneNode(true), now just need to show the modal.

[Jason Knight]

Code: [Select]

window.location.hash = "#id_of_your_modal"; // open

window.location.hash = "#"; // close
Done. Assuming you're using the hash target version. The button:focus version:

Code: [Select]

buttonElement.focus(); // open

buttonElement.blur(); // close
There's also the input:checkbox version

Code: [Select]

inputElement.checked = true; // open

inputElement.checked = false; // close
Don't overthink it.

[Jason Knight]

Oh, also did you know that most of the Object / Element methods -- in fact all of them except "append" -- returns the object/element you are manipulating?

Code: [Select]

this.falseButton = buttonGroup.appendChild(
Object.assign(document.createElement("button"), {
className : "secondary",
type : "button",
textContent : this.falseButtonText
}
)
);

I'd probably also assign their events there instead of separately in your startup. To access the outer container using Element.closest

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

[Jason Knight]

Oh and a lot of your if statements can be axed if you don't care about pre 2016 browsers, which as an industry we're increasingly telling to **** off.

https://caniuse.com/?search=default%20parameters

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

[AndrewTraub]

Thanks Jason!

[AndrewTraub]

Code: [Select]

window.location.hash = "#id_of_your_modal"; // open

window.location.hash = "#"; // close
Done. Assuming you're using the hash target version. The button:focus version:

Code: [Select]

buttonElement.focus(); // open

buttonElement.blur(); // close
There's also the input:checkbox version

Code: [Select]

inputElement.checked = true; // open

inputElement.checked = false; // close
Don't overthink it.

Thanks - can you give me the urls for each of these methods and when would you chose one implementation over the other (hash vs button vs input)?