fix(LIGHT): show color picker based on feature check (#488)

This is a behavior change since now even if the user doesn't define
sliders and light supports color change then picker will still show up
on long press.

.eslintrc.yaml

@@ -1,6 +1,6 @@
 env:
   browser: true
-  es2017: true
+  es2020: true
   node: true
 parserOptions:
   sourceType: module

README.md

@@ -356,12 +356,10 @@ Tile Object. [Click here for some real-life examples](TILE_EXAMPLES.md)
    /** type: LIGHT **/
    /* sliders: list of slider object. See slider documentation below */
    sliders: [{}],
-
-   /* colorpicker: whether or not the color picker should be used. 
-    * Only works with lights that have the rgb_color attribute 
-    * Valid options: true, false 
+   /* colorpicker: whether or not the color picker should be shown.
+    * Valid options: true, false, function. Default: auto-detected
     */
-   colorpicker: true,
+   colorpicker: false,
    /** type: POPUP_IFRAME **/
    url: String || Function,
    /* optional */

TILE_EXAMPLES.md

@@ -414,7 +414,6 @@ Light switch. You can optionally define sliders to control colour temperature or
          }
       }
    ],
-   colorpicker: true
 }
 ```
 

index.html.ejs

@@ -582,7 +582,7 @@
                </div>
             </div>
 
-            <div ng-if="item.colorpicker" class="item-entity-colorpicker">
+            <div ng-if="itemField('colorpicker', item, entity)" class="item-entity-colorpicker">
                <span>Color:</span>
                <input color-picker
                   color-picker-model="getRGBStringFromArray(entity.attributes.rgb_color)"

scripts/controllers/main-utilities.js

@@ -0,0 +1,44 @@
+import angular from 'angular';
+import { TILE_DEFAULTS, TYPES } from '../globals/constants';
+
+export function mergeConfigDefaults (pages) {
+   for (const page of pages) {
+      for (const group of page.groups) {
+         mergeTileListDefaults(group.items);
+      }
+   }
+   return pages;
+}
+
+function mergeTileListDefaults (tiles) {
+   if (!Array.isArray(tiles)) {
+      return;
+   }
+   for (const [index, tile] of tiles.entries()) {
+      tiles[index] = mergeTileDefaults(tile);
+      switch (tile.type) {
+         case TYPES.CAMERA:
+         case TYPES.CAMERA_STREAM:
+         case TYPES.CAMERA_THUMBNAIL:
+            tile.fullscreen = mergeTileDefaults(tile.fullscreen);
+            break;
+         case TYPES.DOOR_ENTRY:
+            if (tile.layout?.camera) {
+               tile.layout.camera = mergeTileDefaults(tile.layout.camera);
+            }
+            mergeTileListDefaults(tile.layout?.tiles);
+            break;
+         case TYPES.POPUP:
+            mergeTileListDefaults(tile.popup?.items);
+            break;
+      }
+   }
+   return tiles;
+}
+
+function mergeTileDefaults (tile) {
+   if (tile && tile.type in TILE_DEFAULTS) {
+      return angular.merge({}, TILE_DEFAULTS[tile.type], tile);
+   }
+   return tile;
+}

scripts/controllers/main.js

@@ -1,8 +1,9 @@
 import angular from 'angular';
 import Hammer from 'hammerjs';
+import { mergeConfigDefaults } 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 { debounce, leadZero, toAbsoluteServerURL } from '../globals/utils';
+import { debounce, leadZero, supportsFeature, toAbsoluteServerURL } from '../globals/utils';
 import Noty from '../models/noty';
 
 App.controller('Main', function ($scope, $timeout, $location, Api) {
@@ -12,7 +13,7 @@ App.controller('Main', function ($scope, $timeout, $location, Api) {
 
    const CONFIG = window.CONFIG;
 
-   $scope.pages = CONFIG.pages;
+   $scope.pages = mergeConfigDefaults(CONFIG.pages);
    $scope.pagesContainerStyles = {};
    $scope.TYPES = TYPES;
    $scope.FEATURES = FEATURES;
@@ -34,6 +35,8 @@ App.controller('Main', function ($scope, $timeout, $location, Api) {
    $scope.alarmCode = null;
    $scope.activeAlarm = null;
 
+   $scope.supportsFeature = supportsFeature;
+
    let showedPages = [];
 
    const latestAlarmActions = {};
@@ -892,7 +895,7 @@ App.controller('Main', function ($scope, $timeout, $location, Api) {
    };
 
    $scope.openLightSliders = function (item, entity) {
-      if ((!item.sliders || !item.sliders.length) && !item.colorpicker) {
+      if ((!item.sliders || !item.sliders.length) && !$scope.itemField('colorpicker', item, entity)) {
          return;
       }
 
@@ -930,58 +933,21 @@ App.controller('Main', function ($scope, $timeout, $location, Api) {
       return false;
    };
 
-   $scope.supportsFeature = function (feature, entity) {
-      if (!('supported_features' in entity.attributes)) {
-         return false;
-      }
-
-      const features = entity.attributes.supported_features;
-
-      return (features | feature) === features;
-   };
-
    $scope.shouldShowVolumeSlider = function (entity) {
-      return $scope.supportsFeature(FEATURES.MEDIA_PLAYER.VOLUME_SET, entity)
+      return supportsFeature(FEATURES.MEDIA_PLAYER.VOLUME_SET, entity)
           && ('volume_level' in entity.attributes)
           && entity.state !== 'off';
    };
 
    $scope.shouldShowVolumeButtons = function (entity) {
-      return (!$scope.supportsFeature(FEATURES.MEDIA_PLAYER.VOLUME_SET, entity)
+      return (!supportsFeature(FEATURES.MEDIA_PLAYER.VOLUME_SET, entity)
           || !('volume_level' in entity.attributes))
-          && $scope.supportsFeature(FEATURES.MEDIA_PLAYER.VOLUME_STEP, entity)
+          && supportsFeature(FEATURES.MEDIA_PLAYER.VOLUME_STEP, entity)
           && entity.state !== 'off';
    };
 
-   const GAUGE_DEFAULTS = {
-      backgroundColor: 'rgba(0, 0, 0, 0.1)',
-      foregroundColor: 'rgba(0, 150, 136, 1)',
-      size: function (item) {
-         return .8 * (CONFIG.tileSize * (item.height < item.width ? item.height : item.width));
-      },
-      duration: 1500,
-      thick: 6,
-      type: 'full',
-      min: 0,
-      max: 100,
-      cap: 'butt',
-      thresholds: {},
-   };
-
    $scope.getGaugeField = function (field, item, entity) {
-      if (!item) {
-         return null;
-      }
-
-      if (item.settings && field in item.settings) {
-         return parseFieldValue(item.settings[field], item, entity);
-      }
-
-      if (field in GAUGE_DEFAULTS) {
-         return parseFieldValue(GAUGE_DEFAULTS[field], item, entity);
-      }
-
-      return null;
+      return getItemFieldValue(`settings.${field}`, item, entity);
    };
 
    $scope.itemURL = function (item, entity) {

scripts/globals/constants.js

@@ -1,4 +1,4 @@
-import { timeAgo } from './utils';
+import { supportsFeature, timeAgo } from './utils';
 
 export const CLASS_BIG = '-big-entity';
 export const CLASS_SMALL = '-small-entity';
@@ -87,7 +87,14 @@ export const FEATURES = {
       ARM_CUSTOM_BYPASS: 16,
    },
    LIGHT: {
+      // https://github.com/home-assistant/core/blob/dev/homeassistant/components/light/__init__.py
       BRIGHTNESS: 1,
+      COLOR_TEMP: 2,
+      EFFECT: 4,
+      FLASH: 8,
+      COLOR: 16,
+      TRANSITION: 32,
+      WHITE_VALUE: 128,
    },
    MEDIA_PLAYER: {
       PAUSE: 1,
@@ -269,3 +276,25 @@ export const DEFAULT_VOLUME_SLIDER_OPTIONS = {
       field: 'volume_level',
    },
 };
+
+export const TILE_DEFAULTS = {
+   [TYPES.GAUGE]: {
+      settings: {
+         backgroundColor: 'rgba(0, 0, 0, 0.1)',
+         foregroundColor: 'rgba(0, 150, 136, 1)',
+         size (item) {
+            return .8 * (window.CONFIG.tileSize * (item.height < item.width ? item.height : item.width));
+         },
+         duration: 1500,
+         thick: 6,
+         type: 'full',
+         min: 0,
+         max: 100,
+         cap: 'butt',
+         thresholds: {},
+      },
+   },
+   [TYPES.LIGHT]: {
+      colorpicker: (item, entity) => supportsFeature(FEATURES.LIGHT.COLOR, entity),
+   },
+};

scripts/globals/utils.js

@@ -129,3 +129,8 @@ export const toAbsoluteServerURL = function (path) {
    // Replace extra forward slashes but not in protocol.
    return url.replace(/([^:])\/+/g, '$1/');
 };
+
+export function supportsFeature (feature, entity) {
+   return 'supported_features' in entity.attributes
+      && (entity.attributes.supported_features & feature) !== 0;
+}