Dialog Component Ideas

[taufik-nurrohman]

For a front-end designer, making dialog mechanism is easy. You just need to make a HTML box with absolute position, then hide it by default. Then, with a click of a button, you display the box. You can use JavaScript or CSS :target selector to toggle the dialog visibility. Easy. The challenge is how to make it controllable from the HTML markup level.

The Bootstrap Way

Bootstrap has been able to handle it well. By linking the dialog markup as the target on the trigger element via data-bs-target attribute. Then, the data-bs-toggle attribute can be used as a selector so that the JavaScript library can select all elements with that attribute and add a click event to them to display the dialog as referenced to the associated data-bs-target attribute.

I can illustrate it simply like this:

<button data-bs-toggle="modal" data-bs-target="#dialog-1">
  Show Dialog
</button>

<div class="modal" id="dialog-1">
  …
  <button data-bs-dismiss="modal">
    Hide Dialog
  </button>
</div>

const openers = document.querySelectorAll('[data-bs-toggle="modal"]');
const closers = document.querySelectorAll('[data-bs-dismiss="modal"]');

openers.forEach(opener => {
    opener.addEventListener('click', openDialog, false);
});

closers.forEach(closer => {
    closer.addEventListener('click', closeDialog, false);
});

function openDialog(e) {
    let target = document.querySelector(this.getAttribute('data-bs-target'));
    if (target) {
        target.classList.add('open');
    }
    e.preventDefault();
}

function closeDialog(e) {
    let target = this.closest('.modal');
    if (target) {
        target.classList.remove('open');
    }
    e.preventDefault();
}

Mecha’s Panel don’t want to achieve that kind of complexity. Especially about the need to manually add the dialog element for each trigger. I can’t imagine I have to have 100 dialog markup to accompany triggers that appear on 100 list item.

We could indeed simplify it by making just one dialog element where the content in it can be dynamically loaded based on the clicked trigger data, but that would require manual handling. We need to select those elements specifically and handle those events specifically as well. This is not concise, especially if something makes it unable to display the dialog.

Our Way

I’m more inclined to think of a dialog as a window for loading pages that are specially made to be displayed within that window. Think of it as a window manager on an operating system. The job of a window manager is just to manage windows, nothing more. About how the content in it will be displayed all depends on the maker of the application. You could display GTK or Qt application, or even load a web page.

Application in a Window

Window Manager	Application

URL Pattern as Solution

I think that URL pattern is one of the simplest solution to properly display a dialog with dynamic content. It doesn’t require any additional attributes, and you can make a single hidden dialog element to be used by all triggers.

The way it works is, we use a special hash name on an anchor so that it can be selected as a trigger, then the existing link can be loaded in the window body. If the link is local, we will use AJAX to load the page. If the link is external, we will use <iframe> to load the page:

<a href="/path/to/page-1#dialog" title="Dialog Title 1">
  Show Dialog 1
</a>

<a href="/path/to/page-2#dialog" title="Dialog Title 2">
  Show Dialog 2
</a>

<a href="/path/to/page-3#dialog" title="Dialog Title 3">
  Show Dialog 3
</a>

<div id="dialog">
  <h1></h1>
  <div></div>
</div>

const openers = document.querySelectorAll('a[href$="#dialog"]');
const dialog = document.querySelector('#dialog');

openers.forEach(opener => {
    opener.addEventListener('click', openDialog, false);
});

function openDialog(e) {
    let title = this.title,
        link = this.href;
    dialog.classList.add('open');
    dialog.querySelector('h1').innerHTML = title;
    if (isLocal(link)) {
        fetch(link).then(r => r.text()).then(text => {
            dialog.querySelector('div').innerHTML = text;
        });
    } else {
        dialog.querySelector('div').innerHTML = '<iframe src="' + link + '"></iframe>';
    }
    e.preventDefault();
}

function isLocal(link) { … }

Target Value as Solution

We can also use the target attribute with a specific value. For HTML, the value of this target attribute is commonly used to determine where the link will be opened. If the target is not found, then the link will usually open in a new tab. Which means that without the dialog feature, this HTML markup won’t introduce any significant side effects on the whole system. Makes it possible for us to make this dialog system as a separate extension.

const openers = document.querySelectorAll('a[target="dialog"]');

My main focus on this feature is how we can make the HTML markup specification as natural as possible to take advantage of the existing conditions to improve the features without disrupting the original functionality.

[taufik-nurrohman]

I am considering to use the name proxy instead of dialog as this is mainly used to load resources from another web page:

<a href="#element-id" target="proxy">

$_['proxy']['element-id'] = [ /* Local dialog element */ ];

https://en.m.wikipedia.org/wiki/Proxy_server

[taufik-nurrohman]

[taufik-nurrohman]

https://youtu.be/ZRCvgQseIhM