Single-Line popup control using Custom Elements

Repetion is quite a common phenomenon in UI, server calls. These are handled by designing the UI then created function to work with user interactions. Custom elements help simplify these functions. This is done by extending the inbuilt HTMLElement class.

A simple structure can be defined as follows

Extend the class
Define the element as a custom element
Create the custom control

//1.
class PopupModal extends HTMLElement{
  constructor(){
    console.log("constructor");
    super();
  }
  connectedCallback(){ 
    console.log("connected")  
  }
}
//2.
customElements.define("web-popup",PopupModal)

	<!--added to our webpage-->
  <web-popup></web-popup>

Thats Good. Well but for a popup we need to show some msg and button. So we need to modify out Element sowhere along the lines of…

<!--added to our webpage-->
	<web-popup popupid="continue" msg="Would you like to continue ?"></web-popup>

Now let’s identify the dynamic and the static part. The dynamic will be the message, this wee will pass through the attribute. The static is the modal html which can be created within the Element class.

class PopupModal extends HTMLElement{
	...
  connectedCallback(){ 
    const $ele = this;
    const popupid = this.getAttribute("popupid");
    const msg = this.getAttribute("msg");

    this.innerHTML = `<div class='fixed w-screen h-screen bg-gray-700 bg-opacity-50'><div class='flex justify-center align-center'><div class='w-1/4 h-20 bg-white z-10 text-center'>
    <p class='w-'>${msg}</p>
    <div class='btngroup'>
      <button class='btnyes px-5 m-5 border bg-blue-200 text-blue-900 bold'>Yes</button>
      <button class='btnno px-5 m-5 border bg-blue-200 text-blue-900 bold'>No</button>
    </div>
    </div></div></div>`;
    
    this.style.display = "none";
    this.querySelector(".btnno").addEventListener("click", function(e){
      $ele.style.display = "none";
    });

    this.querySelector(".btnyes").addEventListener("click", function(e){
      $ele.style.display = "none";
    });

    document.querySelectorAll("[plink=" + popupid + "]").forEach( n => n.addEventListener("click", function(e){       
        $ele.style.display = "";
   }));
  }
}

<!--added to our webpage-->  
<web-popup popupid="continue" msg="Would you like to continue ?"></web-popup>
<web-popup popupid="sure" msg="Are you sure ?"></web-popup>
<web-popup popupid="reallysure" msg="Are you REALLY sure ?"></web-popup>

<div class="flex flex-col">
	<button plink="continue" class='border' >Continue ? </button>
	<button plink="continue" class='border' >Continue ??</button>
	<button plink="sure" class='border' >sure ??</button>
	<button plink="reallysure" class='border' >really sure ??</button>
</div>

It could be further fine-tuned using the template tag and some external css styles.

class PopupModal extends HTMLElement{
	...
  connectedCallback(){ 
  	...
	const $inner = document.querySelector("#tplpopup").clonetNode(true);
	document.querySelector('.msg").innerText = msg;
	...
  }
}

<template id='tplpopup'>
<div class='fixed w-screen h-screen bg-gray-700 bg-opacity-50'><div class='flex justify-center align-center'><div class='w-1/4 h-20 bg-white z-10 text-center'>
    <p class='msg'>${msg}</p>
    <div class='btngroup'>
      <button class='btnyes px-5 m-5 border bg-blue-200 text-blue-900 bold'>Yes</button>
      <button class='btnno px-5 m-5 border bg-blue-200 text-blue-900 bold'>No</button>
    </div>
    </div></div></div>
</template>

In this we repeatable code can be systematically organized into components.