Merge pull request #1315 from simon-leech/type-key-button

entry type:key to return layer display toggle

lib/ui/locations/entries/_entries.mjs

@@ -67,6 +67,10 @@ import time from './time.mjs'
 
 import vector_layer from './vector_layer.mjs'
 
+import key from './key.mjs'
+
+import title from './title.mjs'
+
 import query_button from './query_button.mjs'
 
 export default {
@@ -97,27 +101,3 @@ export default {
   vector_layer,
   query_button
 }
-
-function key(entry) {
-
-  const node = mapp.utils.html.node`
-  <div class="layer-key">
-    <span>
-      ${entry.location.layer.name}`
-
-  return node
-}
-
-function title(entry) {
-
-  const tooltipSpan = entry.tooltip && mapp.utils.html`
-    <span
-      class="tooltip mask-icon question-mark">${entry.tooltip}`
-
-  return mapp.utils.html.node`
-    <div
-      class="label"
-      style=${entry.css_title}
-      title=${entry.tooltip}>${entry.title}
-      ${tooltipSpan}`;
-}

lib/ui/locations/entries/key.mjs

@@ -0,0 +1,45 @@
+/**
+@function key
+
+@description
+mapp.ui.locations.entries.key(entry)
+
+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"
+}
+``` 
+
+@param {Object} entry
+@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 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;
+}

lib/ui/locations/entries/title.mjs

@@ -0,0 +1,36 @@
+/**
+mapp.ui.locations.entries.title(entry)
+
+The method returns just the title of the entry.
+You can provide a tooltip (shown when hovering over the title).
+You can provide a css style for the title (to style the title in a specific way).
+@example
+```json
+{
+  "title": "This is a title",
+  "type":"title",
+  "tooltip": "This is a tooltip",
+  "css_title": "font-weight: 800"
+}
+``` 
+@function title
+@param {Object} entry
+@param {string} entry.title The title of the entry.
+@param {string} entry.tooltip The tooltip of the entry.
+@param {string} entry.css_title The css of the title.
+@return {HTMLElement} The title element.
+*/
+
+export default function title(entry) {
+
+    const tooltipSpan = entry.tooltip && mapp.utils.html`
+      <span
+        class="tooltip mask-icon question-mark">${entry.tooltip}`
+
+    return mapp.utils.html.node`
+      <div
+        class="label"
+        style=${entry.css_title}
+        title=${entry.tooltip}>${entry.title}
+        ${tooltipSpan}`;
+  }

public/css/_locationview.css

@@ -64,17 +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 {
-      float: right;
-      padding: 3px;
-      cursor: help;
-      border-radius: 2px;
-      font-weight: bold;
-      font-size: 0.8em;
-      color: black;
-      background-color: var(--color-mid);
+    &.active {
+      background-color: var(--color-on);
     }
   }
 

public/css/ui.css

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