fix: improve handling of merging defaults for popup tiles (#519)

* move popup defaults to constants.js * use -item-transparent explicitly for camera, fix cursor/actions * use new feature `action: false` * fix classes option to always only ADD classes when merging configurations
resoai · Nov 21, 2020 · 250ac64 · 250ac64
1 parent d2b3717
commit 250ac64
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "angularjs-gauge": "^2.2.0",
     "chart.js": "^2.9.4",
     "hls.js": "^0.14.16",
+    "lodash.mergewith": "^4.6.2",
     "node-sass": "^5.0.0"
   },
   "resolutions": {

diff --git a/scripts/controllers/main-utilities.js b/scripts/controllers/main-utilities.js
@@ -1,4 +1,4 @@
-import angular from 'angular';
+import mergeWith from 'lodash.mergewith';
 import { TILE_DEFAULTS, TYPES } from '../globals/constants';
 
 export function mergeConfigDefaults (pages) {
@@ -38,7 +38,21 @@ function mergeTileListDefaults (tiles) {
 
 function mergeTileDefaults (tile) {
    if (tile && tile.type in TILE_DEFAULTS) {
-      return angular.merge({}, TILE_DEFAULTS[tile.type], tile);
+      return mergeTileConfigs({}, TILE_DEFAULTS[tile.type], tile);
    }
    return tile;
 }
+
+export function mergeTileConfigs (object, ...sources) {
+   return mergeWith(object, ...sources, mergeTileCustomizer);
+}
+
+function mergeTileCustomizer (objValue, srcValue, key) {
+   if (key === 'classes') {
+      return function (item, entity) {
+         const objValueParsed = this.parseFieldValue(objValue, item, entity) || [];
+         const srcValueParsed = this.parseFieldValue(srcValue, item, entity) || [];
+         return (Array.isArray(objValueParsed) ? objValueParsed : [objValueParsed]).concat(Array.isArray(srcValueParsed) ? srcValueParsed : [srcValueParsed]);
+      };
+   }
+}
diff --git a/scripts/controllers/main.js b/scripts/controllers/main.js
@@ -1,8 +1,8 @@
 import angular from 'angular';
 import Hammer from 'hammerjs';
-import { mergeConfigDefaults } from './main-utilities';
+import { mergeConfigDefaults, mergeTileConfigs } from './main-utilities';
 import { App } from '../app';
-import { TYPES, FEATURES, HEADER_ITEMS, MENU_POSITIONS, GROUP_ALIGNS, TRANSITIONS, MAPBOX_MAP, YANDEX_MAP, DEFAULT_SLIDER_OPTIONS, DEFAULT_LIGHT_SLIDER_OPTIONS, DEFAULT_VOLUME_SLIDER_OPTIONS } from '../globals/constants';
+import { TYPES, FEATURES, HEADER_ITEMS, MENU_POSITIONS, GROUP_ALIGNS, TRANSITIONS, MAPBOX_MAP, YANDEX_MAP, DEFAULT_SLIDER_OPTIONS, DEFAULT_LIGHT_SLIDER_OPTIONS, DEFAULT_VOLUME_SLIDER_OPTIONS, DEFAULT_POPUP_HISTORY, DEFAULT_POPUP_IFRAME, DEFAULT_POPUP_DOOR_ENTRY } from '../globals/constants';
 import { debounce, leadZero, supportsFeature, toAbsoluteServerURL } from '../globals/utils';
 import Noty from '../models/noty';
 
@@ -1601,70 +1601,30 @@ App.controller('Main', function ($scope, $timeout, $location, Api) {
    };
 
    $scope.openPopupHistory = function (item, entity) {
-      const layout = cacheInItem(item, '_popupHistory', () => ({
-         classes: ['-popup-landscape', ...(getItemFieldValue('history.classes', item, entity) || [])],
-         styles: {},
-         items: [angular.merge({
-            type: TYPES.HISTORY,
-            id: item.id,
-            title: false,
-            position: [0, 0],
-            classes: ['-item-fullsize'],
-            customStyles: {
-               width: null,
-               height: null,
-               top: null,
-               left: null,
-            },
-         }, getItemFieldValue('history', item, entity))],
+      const layout = cacheInItem(item, '_popupHistory', () => mergeTileConfigs({}, DEFAULT_POPUP_HISTORY(item, entity), {
+         classes: getItemFieldValue('history.classes', item, entity) || [],
+         items: [getItemFieldValue('history', item, entity) || {}],
       }));
       $scope.openPopup(item, entity, layout);
    };
 
    $scope.openPopupIframe = function (item, entity) {
-      const layout = cacheInItem(item, '_popupIframe', () => ({
-         classes: ['-popup-fullsize', ...(getItemFieldValue('iframeClasses', item, entity) || [])],
-         styles: {},
+      const layout = cacheInItem(item, '_popupIframe', () => mergeTileConfigs({}, DEFAULT_POPUP_IFRAME(item, entity), {
+         classes: getItemFieldValue('iframeClasses', item, entity) || [],
          items: [{
-            type: TYPES.IFRAME,
-            url: item.url,
-            id: {},
-            state: false,
-            title: false,
-            position: [0, 0],
-            classes: ['-item-fullsize'],
-            customStyles: angular.merge({
-               width: null,
-               height: null,
-               top: null,
-               left: null,
-            }, getItemFieldValue('iframeStyles', item, entity)),
+            customStyles: getItemFieldValue('iframeStyles', item, entity) || {},
          }],
       }));
       $scope.openPopup(item, entity, layout);
    };
 
    $scope.openDoorEntry = function (item, entity) {
-      const layout = cacheInItem(item, '_popupDoorEntry', () => (
-         angular.merge({
-            classes: ['-popup-fullsize'],
-            styles: {},
-            items: [angular.merge({
-               state: false,
-               title: false,
-               position: [0, 0],
-               action: function (item, entity) {},
-               classes: ['-item-fullsize', '-item-non-clickable'],
-               customStyles: {
-                  width: null,
-                  height: null,
-                  top: null,
-                  left: null,
-               },
-            }, getItemFieldValue('layout.camera', item, entity)),
-            ...(getItemFieldValue('layout.tiles', item, entity) || [])],
-         }, getItemFieldValue('layout.page', item, entity))
-      ));
+      const layout = cacheInItem(item, '_popupDoorEntry', () => mergeTileConfigs({}, DEFAULT_POPUP_DOOR_ENTRY(item, entity), {
+         items: [
+            getItemFieldValue('layout.camera', item, entity) || {},
+            ...(getItemFieldValue('layout.tiles', item, entity) || []),
+         ],
+      }, getItemFieldValue('layout.page', item, entity) || {}));
 
       $scope.openPopup(item, entity, layout);
 

diff --git a/scripts/globals/constants.js b/scripts/globals/constants.js
@@ -277,6 +277,65 @@ export const DEFAULT_VOLUME_SLIDER_OPTIONS = {
    },
 };
 
+export const DEFAULT_POPUP_HISTORY = (item, entitiy) => ({
+   classes: ['-popup-landscape'],
+   styles: {},
+   items: [{
+      type: TYPES.HISTORY,
+      id: item.id,
+      title: false,
+      position: [0, 0],
+      action: false,
+      secondaryAction: false,
+      classes: ['-item-fullsize'],
+      customStyles: {
+         width: null,
+         height: null,
+         top: null,
+         left: null,
+      },
+   }],
+});
+
+export const DEFAULT_POPUP_IFRAME = (item, entity) => ({
+   classes: ['-popup-fullsize'],
+   styles: {},
+   items: [{
+      type: TYPES.IFRAME,
+      url: item.url,
+      id: {},
+      state: false,
+      title: false,
+      position: [0, 0],
+      classes: ['-item-fullsize'],
+      customStyles: {
+         width: null,
+         height: null,
+         top: null,
+         left: null,
+      },
+   }],
+});
+
+export const DEFAULT_POPUP_DOOR_ENTRY = (item, entity) => ({
+   classes: ['-popup-fullsize'],
+   styles: {},
+   items: [{
+      state: false,
+      title: false,
+      position: [0, 0],
+      action: false,
+      secondaryAction: false,
+      classes: ['-item-fullsize', '-item-non-clickable', '-item-transparent'],
+      customStyles: {
+         width: null,
+         height: null,
+         top: null,
+         left: null,
+      },
+   }],
+});
+
 export const TILE_DEFAULTS = {
    [TYPES.ALARM]: {
       action (item, entity) {

diff --git a/styles/main.less b/styles/main.less
@@ -1332,13 +1332,10 @@ camera_stream {
          bottom: -@popupPadding;
          right: -@popupPadding;
          z-index: 0;
-
-         &.-th-camera, &.-th-camera_thumbnail, &.-th-camera_stream {
-            background-color: transparent;
-         }
       }
       .-item-non-clickable {
          /* use classes: ['-item-non-clickable'] to display as non-interactive tile */
+         cursor: auto;
          &:active {
             margin: 0;
             border: none;
@@ -1347,6 +1344,10 @@ camera_stream {
             display: none;
          }
       }
+      .-item-transparent {
+         /* use classes: ['-item-transparent'] to remove background color */
+         background-color: transparent;
+      }
    }
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -3853,6 +3853,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.mergewith@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
 lodash.template@^4.0.2:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"