CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Creating and showing Jason's Dialog in Javascript  (Read 378 times)

AndrewTraub

  • Junior Member
  • *
  • Posts: 49
  • Karma: +0/-0
Creating and showing Jason's Dialog in Javascript
« on: 6 Mar 2022, 01:10:49 pm »
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

  • Junior Member
  • *
  • Posts: 49
  • Karma: +0/-0
Re: Creating and showing Jason's Dialog in Javascript
« Reply #1 on: 8 Mar 2022, 08:30:54 am »
Well I fixed the issue with the closeModal only appearing once by using .cloneNode(true), now just need to show the modal.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 844
  • Karma: +159/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Creating and showing Jason's Dialog in Javascript
« Reply #2 on: 8 Mar 2022, 03:06:20 pm »
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.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 844
  • Karma: +159/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Creating and showing Jason's Dialog in Javascript
« Reply #3 on: 8 Mar 2022, 03:13:40 pm »
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
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 844
  • Karma: +159/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Creating and showing Jason's Dialog in Javascript
« Reply #4 on: 8 Mar 2022, 03:16:50 pm »
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
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

AndrewTraub

  • Junior Member
  • *
  • Posts: 49
  • Karma: +0/-0
Re: Creating and showing Jason's Dialog in Javascript
« Reply #5 on: 21 Mar 2022, 04:58:48 pm »
Thanks Jason!

AndrewTraub

  • Junior Member
  • *
  • Posts: 49
  • Karma: +0/-0
Re: Creating and showing Jason's Dialog in Javascript
« Reply #6 on: 22 Jun 2022, 11:39:05 am »
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)?

 

SMF spam blocked by CleanTalk

Advertisement