Adding show-when-local-storage attributes. Resolves #5.

README.md

@@ -151,8 +151,19 @@ You use the import-map-overrides UI via web components. This means you just need
 You have three options for the UI, depending on how much you want to customize the UI:
 
 ```html
-<!-- The full UI, including the omnipresent "trigger" button that pops up the UI -->
-<import-map-overrides-full></import-map-overrides-full>
+<!--
+  The full UI, including the omnipresent "trigger" button that pops up the UI.
+
+  If you omit the show-when-local-storage attribute, the yellow/orange rectangle always shows.
+  When you have the show-when-local-storage attribute, the yellow/orange rectangle will only show
+  when the user has set a local storage value of "true" for the key specified.
+
+  For example, in the below example you must run the follow command in order to see the overrides "trigger" rectangle.
+  localStorage.setItem('overrides-ui', true);
+ -->
+<import-map-overrides-full
+  show-when-local-storage="overrides-ui"
+></import-map-overrides-full>
 
 <!-- Alternatively, just the black popup itself -->
 <import-map-overrides-popup></import-map-overrides-popup>

src/ui/custom-elements.js

@@ -7,7 +7,7 @@ import List from "./list/list.component";
 if (window.customElements) {
   window.customElements.define(
     "import-map-overrides-full",
-    preactCustomElement(FullUI)
+    preactCustomElement(FullUI, ["show-when-local-storage"])
   );
   window.customElements.define(
     "import-map-overrides-popup",
@@ -19,13 +19,27 @@ if (window.customElements) {
   );
 }
 
-function preactCustomElement(Comp) {
+function preactCustomElement(Comp, observedAttributes = []) {
   return class PreactCustomElement extends HTMLElement {
     connectedCallback() {
-      render(h(Comp, this), this);
+      this.renderWithPreact();
     }
     disconnectedCallback() {
       render(null, this);
+      this.renderedEl = null;
+    }
+    static get observedAttributes() {
+      return observedAttributes;
+    }
+    attributeChangedCallback() {
+      this.renderWithPreact();
+    }
+    renderWithPreact() {
+      this.renderedEl = render(
+        h(Comp, { customElement: this }),
+        this,
+        this.renderedEl
+      );
     }
   };
 }

src/ui/full-ui.component.js

@@ -6,6 +6,16 @@ export default class FullUI extends Component {
     showingPopup: false
   };
   render(props, state) {
+    const shouldShow =
+      !props.customElement.hasAttribute("show-when-local-storage") ||
+      localStorage.getItem(
+        props.customElement.getAttribute("show-when-local-storage")
+      ) === "true";
+
+    if (!shouldShow) {
+      return null;
+    }
+
     const atLeastOneOverride =
       Object.keys(window.importMapOverrides.getOverrideMap().imports).length >
       0;