add key entry button toggle classlist

lib/ui/locations/entries/key.mjs

@@ -1,34 +1,45 @@
 /**
+@function key
+
+@description
 mapp.ui.locations.entries.key(entry)
 
-The method returns the name of the `entry.location.layer` of the entry.
-This returns a styled div element with the name of the layer.
-This can be clicked to toggle the visibility of the layer.
+The entry method returns a button HTML element which will toggle the location.layer display.
+
+The button classList reflects whether the layer is displayed or not.
 
 @example
 ```json
 {
   "type":"key"
 }
 ``` 
-@function key
+
 @param {Object} entry
-@param {string} entry.type The type of the entry.
-@return {HTMLElement} The button key element, with an onclick event to toggle the visibility of the layer.
+@param {Object} entry.location.layer The Mapp location layer object.
+
+@return {HTMLElement}
+The button key element, with an onclick event to toggle the visibility of the layer.
 */
 
 export default function key(entry) {
-  const node = mapp.utils.html.node`
-    <div class="layer-key">
-      <button title="${mapp.dictionary.layer_visibility}"
-        onclick="${() => {
-      // If the layer is visible, hide it, otherwise show it.
-      entry.location.layer.display === true ? entry.location.layer.hide() : entry.location.layer.show();
-    }}">
-        ${entry.location.layer.name}
-      </button>
-    </div>
-        `;
+
+  const classList = `layer-key ${entry.location.layer.display ? 'active' : ''}`
+
+  const node = mapp.utils.html.node`<div>
+    <button 
+      class=${classList}
+      title="${mapp.dictionary.layer_visibility}"
+      onclick="${e => {
+
+      if (e.target.classList.toggle('active')) {
+
+        entry.location.layer.show();
+      } else {
+
+        entry.location.layer.hide();
+      }
+    }}">${entry.location.layer.name}`;
 
   return node;
 }

public/css/_locationview.css

@@ -64,16 +64,15 @@
   }
 
   & .layer-key {
-    grid-column: 1 / 3;
+    float: right;
+    padding: 3px;
+    border-radius: 2px;
+    font-weight: bold;
+    font-size: 0.8em;
+    background-color: var(--color-mid);
 
-    &>span, & button {
-      float: right;
-      padding: 3px;
-      border-radius: 2px;
-      font-weight: bold;
-      font-size: 0.8em;
-      color: black;
-      background-color: var(--color-mid);
+    &.active {
+      background-color: var(--color-on);
     }
   }