improve documentation + some clean up.

RoleModel · Feb 2, 2023 · ad01699 · ad01699
1 parent d2e8697
commit ad01699
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Drop-in upgrade for rails `data-turbo-confirm` to support custom HTML dialogs and multiple content _slots_.
 
-## Installation
+### Installation
 
 ```Bash
 npm install @rolemodel/confirm
@@ -14,7 +14,7 @@ or
 yarn add @rolemodel/confirm
 ```
 
-## Usage
+### Usage
 
 In your applications JavaScript entrypoint file. (e.g.  _app/javascript/application.js_)
 
@@ -27,7 +27,7 @@ Turbo.setConfirmMethod(RoleModelConfirm.confirm)
 RoleModelConfirm.init()
 ```
 
-## Configuration
+### Configuration
 
 RoleModel confirm is entirely configurable.  Override default configuration by passing an object into `init()`.
 
@@ -55,7 +55,7 @@ const contentSlots = {
 RoleModelConfirm.init({contentSlots})
 ```
 
-### default configuration
+### Default Config
 
 ```JS
 {
@@ -75,4 +75,33 @@ RoleModelConfirm.init({contentSlots})
       }
     }
   }
+```
+
+### Example Template
+
+Based on default configuration, the following template is suitable.
+
+```HTML
+<html>
+  <head>
+    <title>RoleModel Turbo-Confirm</title>
+  </head>
+  <body>
+
+    <!-- Here is our dialog (not visible without a 'modal--active' class) -->
+    <div id="confirm" class="modal">
+      <div class="modal__backdrop confirm-cancel"></div>
+      <div class="modal__content">
+        <h3 id="confirm-title">Replaced by `data-turbo-confirm` text.</h3>
+        <div id="confirm-body">
+          <p>Replaced by `data-confirm-details` HTML.</p>
+        </div>
+        <div class="modal-actions">
+          <button class="confirm-cancel">Cancel</button>
+          <button id="confirm-accept">Yes, I'm Sure</button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
 ```
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@rolemodel/turbo-confirm",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Drop-in upgrade for Rails' data-turbo-confirm feature to support custom HTML dialogs.",
   "main": "src/index.js",
   "directories": {

diff --git a/src/lib/ConfirmationController.js b/src/lib/ConfirmationController.js
@@ -86,13 +86,12 @@ export default class ConfirmationController {
   }
 
   #clearSlots() {
-    const slots = []
-    for(const [slotName, _slotConfig] of Object.entries(this.#config.contentSlots)) {
-      slots.push(this.#slotTarget(slotName))
-    }
     // allow for hide animation to complete before removing content
     setTimeout(()=> {
-      slots.forEach(slot => slot.innerHTML = '')
+      for(const slotName of Object.keys(this.#config.contentSlots)) {
+        const slotTarget = this.#slotTarget(slotName)
+        if (slotTarget) slotTarget.innerHTML = ''
+      }
     }, this.#config.animationDuration)
   }