Update to use :defined

zachleat · Nov 17, 2023 · b766b27 · b766b27
1 parent 69aedcb
commit b766b27
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 22 deletions.
diff --git a/demo.html b/demo.html
@@ -19,7 +19,7 @@
 		.demo-banner {
 			display: flex;
 			justify-content: space-between;
-			background: linear-gradient(-72deg, #444, #222);
+			background: #222 linear-gradient(-72deg, #555, #222);
 			font-size: 0.875em; /* 14px /16 */
 			/* Please don’t use position: absolute or sticky */
 		}
@@ -33,7 +33,7 @@
 			color: #fff;
 		}
 		.demo-banner-close {
-			background-color: rgba(0,0,0,.3);
+			background-color: transparent;
 			border: none;
 			color: inherit;
 			font-size: inherit;
@@ -47,21 +47,23 @@
 		</style>
 		<script>
 		// the current banner CTA URL, we inject this from a JSON data file
-		let currentKey = "https://www.netlify.com/sustainability/";
-		let storageKey = localStorage.getItem("banner--cta-url");
+		let currentKey = "https://www.zachleat.com/";
+		// sessionStorage with save-type="session"
+		// localStorage with no save-type
+		let storageKey = sessionStorage.getItem("banner--cta-url");
 
 		if(storageKey === currentKey) {
 			document.documentElement.classList.add("banner--hide");
 		}
 		</script>
+		<script type="module" src="herald.js"></script>
 	</head>
 	<body>
-		<announcement-banner class="demo-banner">
-			<a href="https://www.netlify.com/sustainability/">Read about our Sustainability. Read about our Sustainability. Read about our Sustainability. Read about our Sustainability. Read about our Sustainability.</a>
-			<button type="button" data-banner-close class="demo-banner-close">Close</button>
+		<announcement-banner class="demo-banner" save-type="session">
+			<a href="https://www.zachleat.com/">Read about our Sustainability. Read about our Sustainability. Read about our Sustainability. Read about our Sustainability. Read about our Sustainability.</a>
+			<button type="button" data-banner-close class="demo-banner-close">❌ Close</button>
 		</announcement-banner>
 
 		<p>This is some other content.</p>
-		<script type="module" src="herald.js"></script>
 	</body>
 </html>
diff --git a/herald.css b/herald.css
@@ -2,11 +2,14 @@
 announcement-banner[hidden] {
   display: none;
 }
-[data-banner-close] {
+announcement-banner [data-banner-close] {
   opacity: 0;
   pointer-events: none;
 }
-.banner--show-close [data-banner-close] {
+/* The close button will not be visible until the component is defined,
+ * preventing ghost clicks on the button before the event listener is added.
+ */
+announcement-banner:defined [data-banner-close] {
   opacity: 1;
   pointer-events: auto;
 }
diff --git a/herald.js b/herald.js
@@ -1,11 +1,6 @@
 class Banner extends HTMLElement {
   connectedCallback() {
-    // No matter when this runs, the close button will not be visible
-    // until after this class is added—prevents ghost clicks on the button
-    // before the event listener is added.
-    this.classList.add("banner--show-close");
-
-    let button = this.getButton();
+    let button = this.querySelector("[data-banner-close]");
     if(button) {
       button.addEventListener("click", () => {
         this.savePreference();
@@ -14,10 +9,6 @@ class Banner extends HTMLElement {
     }
   }
 
-  getButton() {
-    return this.querySelector("[data-banner-close]");
-  }
-
   savePreference() {
     let storageKey = this.getAttribute("data-banner-key");
     if(!storageKey) {
@@ -27,8 +18,16 @@ class Banner extends HTMLElement {
       }
     }
 
+    let saveType = this.getAttribute("save-type");
     if(storageKey) {
-      localStorage.setItem("banner--cta-url", storageKey);
+      let store;
+      if(saveType === "session") {
+        store = sessionStorage;
+      } else {
+        store = localStorage;
+      }
+
+      store.setItem("banner--cta-url", storageKey);
     }
   }
 

diff --git a/package.json b/package.json
@@ -2,7 +2,9 @@
   "name": "herald-of-the-dog",
   "version": "1.0.3",
   "description": "A reusable announcement bar banner component.",
-  "scripts": {},
+  "scripts": {
+    "start": "npx http-server ."
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zachleat/herald-of-the-dog.git"