feat(Controller): PersistedDismissableController

Sub-Xaero · Sep 8, 2022 · e622660 · e622660
1 parent 3ab5b7c
commit e622660
Show file tree

Hide file tree

Showing 7 changed files with 238 additions and 11 deletions.
diff --git a/docs/docs/controllers/general/persisted_dismissable_controller.mdx b/docs/docs/controllers/general/persisted_dismissable_controller.mdx
@@ -0,0 +1,61 @@
+---
+id: PersistedDismissableController
+title: Persisted Dismissable/Remove Controller
+---
+
+
+import NoTargets from "../../_partials/no-targets.md";
+import NoClasses from "../../_partials/no-classes.md";
+import NoValues from "../../_partials/no-values.md";
+import NoEvents from "../../_partials/no-events.md";
+import NoSideEffects from "../../_partials/no-side-effects.md";
+
+## Purpose
+
+Add the ability to dismiss/remove an element from the DOM. i.e. Notifications, Flash messages and alerts, and store
+a key in LocalStorage that means once dismissed, the alert stays dismissed.
+
+
+## [Actions](https://stimulus.hotwire.dev/reference/actions)
+
+| Action  | Purpose                          |
+|---------|----------------------------------|
+| dismiss | Removes the element from the DOM |
+
+## [Targets](https://stimulus.hotwire.dev/reference/targets)
+<NoTargets/>
+
+## [Classes](https://stimulus.hotwire.dev/reference/classes)
+<NoClasses/>
+
+## [Values](https://stimulus.hotwire.dev/reference/values)
+| Value | Type   | Description                                                                                                             | Default |
+|-------|--------|-------------------------------------------------------------------------------------------------------------------------|---------|
+| `key` | String | The uniquely identifying string key to use in LocalStorage to store whether or not this alert has been dismissed or not | -       |
+
+## Events
+<NoEvents/>
+
+## Side Effects
+<NoSideEffects/>
+
+
+
+## How to Use
+
+A good example is a notification or call to action message, if you don't want to build out server state to decide
+whether or not a user sees a message, you can just always show the message and once a user has interacted with the message
+it stays gone forever (or until they clean their browser storage).
+
+
+<iframe
+  src="https:///stimulus-library.netlify.app/controllers/persisted_dismissable_controller.html"
+  style={{ width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden" }}
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
+
+# Browser support / Necessary polyfills
+
+Please reference https://caniuse.com/childnode-remove, you may need to polyfill `ChildNode.remove()` using https://www.npmjs.com/package/element-remove-polyfill
+if you need to support IE11 or below. 
diff --git a/examples/controllers/persisted_dismissable_controller.html b/examples/controllers/persisted_dismissable_controller.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Persisted Dismissable Controller</title>
+  </head>
+  <body>
+    <div class="container my-4">
+      <p>
+        The below flash message, once dismissed for the first time, creates a key in LocalStorage
+        that will be checked every time the element comes into the page.
+
+        If the key still exists, the message will automatically get dismissed.
+      </p>
+      <div
+        class="alert alert-danger notice"
+        data-controller="persisted-dismissable"
+        data-persisted-dismissable-key="dismissable-123"
+        role="notice"
+      >
+        <div class="text-center">
+          Something went wrong, batten down the hatches
+        </div>
+        <div class="text-center mt-3">
+          <a
+            class="btn btn-danger btn-sm tiny mr-2"
+            data-action="persisted-dismissable#dismiss"
+          >Dismiss</a
+          >
+        </div>
+      </div>
+
+      <p>
+        If you use the below button to clear LocalStorage and refresh the page,
+        the message shows again.
+      </p>
+      <div>
+        <a href="#" data-controller="clear-localstorage" data-action="clear-localstorage#clear" class="btn btn-primary"> Clear localstorage </a>
+      </div>
+    </div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/examples/main.js b/examples/main.js
@@ -50,6 +50,7 @@ import {
   NestedFormController,
   PasswordConfirmController,
   PasswordPeekController,
+  PersistedDismissableController,
   PollBlockController,
   PrefetchController,
   PresenceController,
@@ -86,13 +87,15 @@ import {
   ValueWarnController,
   WordCountController,
 } from "../src";
+import { ClearLocalstorageController } from "./src/helper_controllers/clear_localstorage_controller";
 
 const app = Application.start();
 
 app.debug = true;
 
 // Helper controllers
 app.register("demo", DemoController);
+app.register("clear-localstorage", ClearLocalstorageController);
 app.register("geolocation", GeolocationController);
 app.register("update-date", UpdateDateController);
 
@@ -139,6 +142,7 @@ app.register("navigate-form-errors", NavigateFormErrorsController);
 app.register("nested-form", NestedFormController);
 app.register("password-confirm", PasswordConfirmController);
 app.register("password-peek", PasswordPeekController);
+app.register("persisted-dismissable", PersistedDismissableController);
 app.register("poll-block", PollBlockController);
 app.register("prefetch", PrefetchController);
 app.register("presence", PresenceController);