Layer dataviews target

lib/ui/layers/panels/dataviews.mjs

@@ -24,62 +24,56 @@ The dataviews method returns a drawer with checkbox elements for each dataview o
 The dataviews will be decorated with the `mapp.ui.Dataview()` method.
 
 @param {layer} layer The decorated mapp layer object.
-@property {Object} dataviews The layer dataviews.
+@property {Object} layer.dataviews The layer dataviews.
 
 @return {HTMLElement}
 */
-
 export default function dataviews(layer) {
+  const content = [];
 
-  // Return if on mobile as dataviews are not supported.
-  if (mapp.utils.mobile()) return;
-
-  // Create chkbox controls for each dataview entry.
-  const dataviewChkboxes = Object.entries(layer.dataviews).map(entry => {
+  for (const [key, dataview] of Object.entries(layer.dataviews)) {
+    // The dataview entry may be a flag.
+    if (typeof dataview === 'string' || dataview === true) continue;
 
-    // The layer.dataviews{} object may include a hide flag.
-    if (typeof entry[1] !== 'object') return;
-
-    // Assign key, host, and layer to dataview object.
-    const dataview = Object.assign(entry[1],
-      {
-        key: entry[0],
-        host: layer.mapview.host,
-        layer,
-      })
+    Object.assign(dataview, {
+      key,
+      layer,
+      host: layer.mapview.host,
+    });
 
     // Prevent altering the dataview target in JSON
-    dataview._target ??= dataview.target
+    //dataview._target ??= dataview.target
 
     // Find tabview element from data-id attribute.
-    dataview.tabview = document.querySelector(`[data-id=${dataview._target}]`)
+    dataview.tabview = document.querySelector(`[data-id=${dataview.target}]`);
 
     // Return if the named tabview is not found in document.
-    if (!dataview.tabview) return;
+    if (dataview.tabview) {
+      // Return if on mobile as dataviews are not supported.
+      if (mapp.utils.mobile()) return;
+
+      dataview.show ??= () => {
+        // Create tab after dataview creation is complete.
+        dataview.tabview.dispatchEvent(
+          new CustomEvent('addTab', { detail: dataview }),
+        );
+
+        // Show the dataview tab.
+        dataview.show();
+      };
+
+      dataview.hide ??= () => {
+        dataview.display = false;
+        dataview.remove();
+      };
+    }
 
     // Assign target html element for dataview.
-    dataview.target = mapp.utils.html.node`<div class="dataview-target">`
+    dataview.target = mapp.utils.html.node`
+      <div class="dataview-target">`;
 
     // Assign label for dataview.chkbox
-    dataview.label ??= dataview.title || dataview.key
-
-    dataview.show ??= () => {
-
-      // Create tab after dataview creation is complete.
-      dataview.tabview.dispatchEvent(new CustomEvent('addTab', {
-        detail: dataview
-      }))
-
-      // Show the dataview tab.
-      dataview.show()
-    }
-
-    dataview.hide ??= () => {
-
-      dataview.display = false
-
-      dataview.remove()
-    }
+    dataview.label ??= dataview.title || dataview.key;
 
     // Create checkbox control for dataview.
     dataview.chkbox = mapp.ui.elements.chkbox({
@@ -88,28 +82,27 @@ export default function dataviews(layer) {
       checked: !!dataview.display,
       disabled: dataview.disabled,
       onchange: (checked) => {
+        dataview.display = checked;
 
-        dataview.display = checked
-
-        dataview.display
-          ? dataview.show()
-          : dataview.hide()
-      }
-    })
+        dataview.display ? dataview.show() : dataview.hide();
+      },
+    });
 
     if (mapp.ui.Dataview(dataview) instanceof Error) return;
 
     // Display dataview if layer and dv have display flag.
-    layer.display
-      && dataview.display
-      && dataview.show()
+    layer.display && dataview.display && dataview.show();
 
     layer.showCallbacks.push(() => {
-      dataview.display && dataview.show()
-    })
+      dataview.display && dataview.show();
+    });
+
+    content.push(dataview.chkbox);
 
-    return dataview.chkbox
-  })
+    if (!dataview.tabview) {
+      content.push(dataview.target);
+    }
+  }
 
   // The dataviews are created but no panel is returned.
   if (layer.dataviews.hide) return;
@@ -121,8 +114,8 @@ export default function dataviews(layer) {
     header: mapp.utils.html`
       <h3>${mapp.dictionary.layer_dataview_header}</h3>
       <div class="mask-icon expander"></div>`,
-    content: mapp.utils.html`${dataviewChkboxes.filter(dv => !!dv)}`
-  })
+    content,
+  });
 
-  return drawer
+  return drawer;
 }

lib/ui/locations/entries/dataview.mjs

@@ -49,35 +49,29 @@ The dataview checkbox and locationViewTarget elements will be returned if availa
 @property {boolean} [entry.display] The dataview display flag.
 @property {Function} [entry.show] The dataview show method.
 @property {Function} [entry.hide] The dataview hide method.
-@property {HTMLElement} [entry.locationViewTarget] Dataview target for display in location.view.
 
 @return {HTMLElement} Location view dataview and checkbox.
 */
 
 export default function dataview(entry) {
-
   if (entry.value !== undefined) {
-    entry.data = entry.value
+    entry.data = entry.value;
 
     if (entry.data?.length === 0) {
-
-      entry.data = null
+      entry.data = null;
     }
-  } 
+  }
 
   if (entry.data === null) {
-
     // The entry must be disabled if the query has run with querycheck:true and the data is null.
     // This is to prevent the query running over and over again getting the same result.
     entry._display ??= entry.display;
     delete entry.display;
-
   } else {
     entry.display ??= entry._display;
   }
 
   if (entry.label) {
-
     // Create checkbox if a label is provided.
     entry.chkbox = mapp.ui.elements.chkbox({
       data_id: entry.key,
@@ -100,7 +94,6 @@ export default function dataview(entry) {
     typeof entry.target === 'string' &&
     document.getElementById(entry.target)
   ) {
-
     // Assign element by ID as target.
     entry.target = document.getElementById(entry.target);
 
@@ -113,7 +106,6 @@ export default function dataview(entry) {
 
   // Dataview has already been created. e.g. after the location (view) is updated, and it is not dynamic.
   if (entry.update && !entry.dynamic) {
-
     if (entry.display) entry.show?.();
 
     // Return elements to location view.
@@ -145,10 +137,9 @@ export default function dataview(entry) {
     entry.tabview.dispatchEvent(
       new CustomEvent('addTab', {
         detail: entry,
-      })
+      }),
     );
   } else if (!entry.tabview) {
-
     // Dataview will be rendered into location view.
     const location_class = `location ${entry.key || entry.query}`;
 

public/css/_drawer.css

@@ -21,7 +21,7 @@
   }
 
   &.expandable:not(.expanded)>*:not(.header) {
-    display: none;
+    display: none !important;
   }
 
   &.expanded>.header>.mask-icon.expander {

public/css/ui.css

@@ -179,7 +179,7 @@ button {
     mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="m 1.41,4.5784035 4.59,4.58 4.59,-4.58 1.41,1.41 L 6,11.988404 0,5.9884035 Z"/>%0A</svg>');
   }
   &.expandable:not(.expanded) > *:not(.header) {
-    display: none;
+    display: none !important;
   }
   &.expanded > .header > .mask-icon.expander {
     -webkit-mask-image: url('data:image/svg+xml,<svg%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="12"%0A  height="16"%0A  viewBox="0 0 12 16">%0A  <path d="M 1.41,11.536062 6,6.9560619 10.59,11.536062 12,10.126062 6,4.1260619 0,10.126062 Z"/>%0A</svg>');