feat: allow item.classes to be a function (#527)

README.md

@@ -414,12 +414,15 @@ Tile Object. [Click here for some real-life examples](TILE_EXAMPLES.md)
    },
 
    /* classes: A list of classes to be appended to the tile element
-    * Useful for custom CSS styles. 
+    * Useful for custom CSS styles.
+    * This can be a string of space-separated classes, an object like {myclass: true/false}, or an array of such strings and objects.
+    * Can also be generated by an anonymous function or a template.
     * Use CLASS_BIG, CLASS_SMALL or CLASS_MICRO to change the size of a tile.
     * The TYPES.WEATHER tile supports '-compact' class for a compact (1x1) tile
     * (optional)
     */
    classes: ['-compact'],
+   classes: {'-compact': true},
 
    /* customStyles: Additional styles. Enables tile customisation based on state.
     * Can be used both as a object `{ 'background-color': '#FF0000' }` or, 

index.html.ejs

@@ -409,7 +409,7 @@
         hm-press="entityLongPress($event, page, item, entity)"
         hm-recognizer-options="{time: 600}"
         ng-if="(entity = getItemEntity(item)) && !isHidden(item, entity)"
-        ng-class="itemClasses(item)">
+        ng-class="itemClasses(item, entity)">
 
       <div class="item-clickable"></div>
 

scripts/controllers/main.js

@@ -452,9 +452,7 @@ App.controller('Main', function ($scope, $timeout, $location, Api) {
       };
    };
 
-   $scope.itemClasses = function (item) {
-      const entity = $scope.getItemEntity(item);
-
+   $scope.itemClasses = function (item, entity) {
       if (!item._classes) {
          item._classes = [];
       }
@@ -470,10 +468,12 @@ App.controller('Main', function ($scope, $timeout, $location, Api) {
          item._classes.push('-th-' + item.type);
       }
 
-      if (item.classes) {
-         item.classes.forEach(function (c) {
-            item._classes.push(c);
-         });
+      let itemClasses = getItemFieldValue('classes', item, entity);
+      if (itemClasses) {
+         if (!Array.isArray(itemClasses)) {
+            itemClasses = [itemClasses];
+         }
+         item._classes.push(...itemClasses);
       }
 
       if (item.loading) {