Popup helper, aliases

build/media_source/system/joomla.asset.json

@@ -602,7 +602,8 @@
         "type": "module"
       },
       "dependencies": [
-        "wcpolyfill"
+        "wcpolyfill",
+        "core"
       ]
     },
     {

build/media_source/system/js/joomla-popup.w-c.es6.js

@@ -11,7 +11,8 @@ const popupTemplate = `<div class="joomla-popup-container">
 </div>`;
 
 /**
- * JoomlaPopup class implementation for <joomla-popup> element
+ * JoomlaPopup class for Joomla Dialog implementation.
+ * With use of <joomla-popup> custom element as dialog holder.
  */
 class JoomlaPopup extends HTMLElement {
   /**
@@ -326,6 +327,16 @@ class JoomlaPopup extends HTMLElement {
     return this;
   }
 
+  /**
+   * Return the popup header element.
+   * @returns {HTMLElement|boolean}
+   */
+  getHeader() {
+    this.renderLayout();
+
+    return this.popupTmplH || false;
+  }
+
   /**
    * Return the popup body element.
    * @returns {HTMLElement}
@@ -346,6 +357,16 @@ class JoomlaPopup extends HTMLElement {
     return this.popupContentElement || this.popupTmplB;
   }
 
+  /**
+   * Return the popup footer element.
+   * @returns {HTMLElement|boolean}
+   */
+  getFooter() {
+    this.renderLayout();
+
+    return this.popupTmplB || false;
+  }
+
   /**
    * Open the popup as modal window.
    * Will append the element to Document body if not appended before.
@@ -362,6 +383,14 @@ class JoomlaPopup extends HTMLElement {
     return this;
   }
 
+  /**
+   * Alias for show() method.
+   * @returns {JoomlaPopup}
+   */
+  open() {
+    return this.show();
+  }
+
   /**
    * Closes the popup
    *
@@ -376,6 +405,14 @@ class JoomlaPopup extends HTMLElement {
     return this;
   }
 
+  /**
+   * Alias for close() method.
+   * @returns {JoomlaPopup}
+   */
+  hide() {
+    return this.close();
+  }
+
   /**
    * Destroys the popup.
    */
@@ -460,7 +497,13 @@ class JoomlaPopup extends HTMLElement {
 window.JoomlaPopup = JoomlaPopup;
 customElements.define('joomla-popup', JoomlaPopup);
 
-// Auto create on click
+/**
+ * Auto create a popup dynamically on click, eg:
+ *
+ * <button type="button" data-joomla-popup='{"popupType": "iframe", "src": "content/url.html"}'>Click</button>
+ * <button type="button" data-joomla-popup='{"popupType": "inline", "popupContent": "#id-of-content-element"}'>Click</button>
+ * <a href="content/url.html" data-joomla-popup>Click</a>
+ */
 const delegateSelector = '[data-joomla-popup]';
 const configAttribute = 'joomlaPopup';