maint(pat modal): Document how pat-modal works.

thet · thet · commit 2015e897de7c · 2022-07-15T16:46:35.000+02:00
diff --git a/src/pat/modal/documentation.md b/src/pat/modal/documentation.md
@@ -5,12 +5,34 @@ A modal panel is a panel that requires users to interact with it before they can
 
 ## Documentation
 
-A basic modal example:
+Case 1: Any ``<div class="pat-modal">`` will be displayed as modal immediately:
+
+    <div class="pat-modal">
+        <h2>Modal title</h2>
+        <div>Modal content</div>
+    </div>
+
+
+Case 2a: Anchors, forms and subforms would use pat-inject to retrieve remote (or local) contents and display that as modal.
+The remote content should return a ``div`` but not contain the ``pat-modal`` class - this is set automatically.
 
     <a href="/status/server1#content" class="pat-modal">Show server status</a>
 
 This will load the page at `/status/server1`, extract the element with id `content` and display its content in a panel.
 
+Case 2b: Loading a modal form a local ``<template>`` which is within the current page:
+
+    <a href="#modal-source" class="pat-modal">Open modal</a>
+
+    <template id="modal-source">
+      <h1>Example modal</h1>
+      <p>Hello.</p>
+    </template>
+
+
+For more examples, see the [demo page](./index.html).
+
+
 ### Options reference
 
 You can customise the behaviour of modals through options in the `data-pat-modal` attribute.
diff --git a/src/pat/modal/index-modal.html b/src/pat/modal/index-modal.html
@@ -11,7 +11,7 @@
         ></script>
     </head>
     <body>
-        <div id="pat-modal" class="pat-modal">
+        <div id="pat-modal">
             <h1>Example modal</h1>
             <div class="container">
                 <p>
diff --git a/src/pat/modal/modal.js b/src/pat/modal/modal.js
@@ -42,6 +42,10 @@ export default Base.extend({
     },
 
     _init_inject1() {
+        // This will get remote content via pat-inject, add the pat-modal class
+        // to the result and pat-inject's pattern scanning will then call
+        // ``_init_div1``.
+
         const opts = {
             ...(this.options.source && { source: this.options.source }),
             target: this.options.target,
@@ -54,6 +58,7 @@ export default Base.extend({
         if (this.options.trigger) {
             opts.trigger = this.options.trigger;
         }
+
         // if $el is already inside a modal, do not detach #pat-modal,
         // because this would unnecessarily close the modal itself
         if (!this.$el.closest("#pat-modal")) {
@@ -67,6 +72,8 @@ export default Base.extend({
     },
 
     _init_div1() {
+        // This is always called and will inject the modal in the page.
+
         const header = document.createElement("div");
         header.setAttribute("class", "header");
 
