@xibosignage/xibo-layout-renderer 1.0.2 → 1.0.3

package/dist/xibo-layout-renderer.js

@@ -1,6 +1,24 @@
 var XiboLayoutRenderer = (function (exports) {
   'use strict';
 
+  function _callSuper(t, o, e) {
+    return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+  }
+  function _construct(t, e, r) {
+    if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
+    var o = [null];
+    o.push.apply(o, e);
+    var p = new (t.bind.apply(t, o))();
+    return r && _setPrototypeOf(p, r.prototype), p;
+  }
+  function _isNativeReflectConstruct() {
+    try {
+      var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (t) {}
+    return (_isNativeReflectConstruct = function () {
+      return !!t;
+    })();
+  }
   function ownKeys(e, r) {
     var t = Object.keys(e);
     if (Object.getOwnPropertySymbols) {
@@ -367,6 +385,27 @@ var XiboLayoutRenderer = (function (exports) {
       });
     };
   }
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+    }
+  }
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
   function _defineProperty(obj, key, value) {
     key = _toPropertyKey(key);
     if (key in obj) {
@@ -381,6 +420,82 @@ var XiboLayoutRenderer = (function (exports) {
     }
     return obj;
   }
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    });
+    Object.defineProperty(subClass, "prototype", {
+      writable: false
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+  }
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+    return _setPrototypeOf(o, p);
+  }
+  function _isNativeFunction(fn) {
+    try {
+      return Function.toString.call(fn).indexOf("[native code]") !== -1;
+    } catch (e) {
+      return typeof fn === "function";
+    }
+  }
+  function _wrapNativeSuper(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
+    _wrapNativeSuper = function _wrapNativeSuper(Class) {
+      if (Class === null || !_isNativeFunction(Class)) return Class;
+      if (typeof Class !== "function") {
+        throw new TypeError("Super expression must either be null or a function");
+      }
+      if (typeof _cache !== "undefined") {
+        if (_cache.has(Class)) return _cache.get(Class);
+        _cache.set(Class, Wrapper);
+      }
+      function Wrapper() {
+        return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+      }
+      Wrapper.prototype = Object.create(Class.prototype, {
+        constructor: {
+          value: Wrapper,
+          enumerable: false,
+          writable: true,
+          configurable: true
+        }
+      });
+      return _setPrototypeOf(Wrapper, Class);
+    };
+    return _wrapNativeSuper(Class);
+  }
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+  }
+  function _possibleConstructorReturn(self, call) {
+    if (call && (typeof call === "object" || typeof call === "function")) {
+      return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
+    }
+    return _assertThisInitialized(self);
+  }
   function _toConsumableArray(arr) {
     return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
@@ -523,7 +638,7 @@ var XiboLayoutRenderer = (function (exports) {
     regionMaxZIndex: 0,
     ready: false,
     regionObjects: [],
-    drawer: [],
+    drawer: null,
     allExpired: false,
     regions: [],
     actions: [],
@@ -547,7 +662,8 @@ var XiboLayoutRenderer = (function (exports) {
       return Promise.resolve();
     },
     emitter: {},
-    index: -1
+    index: -1,
+    actionController: undefined
   };
 
   function nextId(options) {
@@ -743,11 +859,22 @@ var XiboLayoutRenderer = (function (exports) {
       index: 0
     };
   }
+  function getAllAttributes(elem) {
+    if (!elem || elem === null) {
+      return {};
+    }
+    return elem.getAttributeNames().reduce(function (obj, name) {
+      return _objectSpread2(_objectSpread2({}, obj), {}, _defineProperty({}, name, {
+        value: elem.getAttribute(name)
+      }));
+    }, {});
+  }
 
   var initialRegion = {
     layout: initialLayout,
     id: '',
     regionId: '',
+    uniqueId: '',
     xml: null,
     mediaObjects: [],
     mediaObjectsActions: [],
@@ -772,6 +899,7 @@ var XiboLayoutRenderer = (function (exports) {
     index: -1,
     prepareRegion: function prepareRegion() {},
     playNextMedia: function playNextMedia() {},
+    playPreviousMedia: function playPreviousMedia() {},
     transitionNodes: function transitionNodes() {},
     finished: function finished() {},
     run: function run() {},
@@ -1605,7 +1733,7 @@ var XiboLayoutRenderer = (function (exports) {
     var emitter = createNanoEvents();
     var regionObject = _objectSpread2(_objectSpread2({}, initialRegion), props);
     regionObject.prepareRegion = function () {
-      var _self$xml, _self$xml2, _self$xml3, _self$xml4, _self$xml5, _self$xml6;
+      var _self$xml, _self$xml2, _self$xml3, _self$xml4, _self$xml5, _self$xml6, _self$layout$actionCo;
       var self = regionObject;
       var layout = self.layout,
         options = self.options;
@@ -1613,8 +1741,9 @@ var XiboLayoutRenderer = (function (exports) {
       self.ending = false;
       self.ended = false;
       self.id = props.regionId;
+      self.uniqueId = "".concat(nextId(self.options));
       self.options = _objectSpread2(_objectSpread2({}, platform), props.options);
-      self.containerName = "R-".concat(self.id, "-").concat(nextId(self.options));
+      self.containerName = "R-".concat(self.id, "-").concat(self.uniqueId);
       self.xml = props.xml;
       self.mediaObjects = [];
       self.sWidth = self.xml && Number((_self$xml = self.xml) === null || _self$xml === void 0 ? void 0 : _self$xml.getAttribute('width')) * layout.scaleFactor;
@@ -1653,6 +1782,20 @@ var XiboLayoutRenderer = (function (exports) {
         mediaObj.index = indx;
         self.mediaObjects.push(mediaObj);
       });
+      // Add media to region for targetted actions
+      (_self$layout$actionCo = self.layout.actionController) === null || _self$layout$actionCo === void 0 || _self$layout$actionCo.actions.forEach(function (action) {
+        var attributes = getAllAttributes(action.xml);
+        if (attributes.target.value === 'region' && attributes.actionType.value === 'navWidget' && attributes.targetId.value == self.id) {
+          var _self$layout$drawer;
+          var drawerMediaItems = Array.from(((_self$layout$drawer = self.layout.drawer) === null || _self$layout$drawer === void 0 ? void 0 : _self$layout$drawer.getElementsByTagName('media')) || []);
+          drawerMediaItems.forEach(function (drawerMedia) {
+            if (drawerMedia.id === attributes.widgetId.value) {
+              // Add drawer media to the region
+              self.mediaObjectsActions.push(Media(self, (drawerMedia === null || drawerMedia === void 0 ? void 0 : drawerMedia.getAttribute('id')) || '', drawerMedia, options, xlr));
+            }
+          });
+        }
+      });
       self.prepareMediaObjects();
     };
     regionObject.finished = function () {
@@ -1810,6 +1953,18 @@ var XiboLayoutRenderer = (function (exports) {
       console.debug('region::playNextMedia', self);
       self.transitionNodes(self.oldMedia, self.curMedia);
     };
+    regionObject.playPreviousMedia = function () {
+      var self = regionObject;
+      self.currentMediaIndex = self.currentMediaIndex - 1;
+      if (self.currentMediaIndex < 0 || self.ended) {
+        self.currentMediaIndex = 0;
+        return;
+      }
+      self.prepareMediaObjects();
+      console.debug('region::playPreviousMedia', self);
+      /* Do the transition */
+      self.transitionNodes(self.oldMedia, self.curMedia);
+    };
     regionObject.end = function () {
       var self = regionObject;
       self.ending = true;
@@ -1850,6 +2005,251 @@ var XiboLayoutRenderer = (function (exports) {
     return regionObject;
   }
 
+  var Action = /*#__PURE__*/_createClass(function Action(id, xml) {
+    _classCallCheck(this, Action);
+    _defineProperty(this, "id", void 0);
+    _defineProperty(this, "xml", void 0);
+    this.id = id;
+    this.xml = xml;
+  });
+  var ActionsWrapper = /*#__PURE__*/function (_HTMLDivElement) {
+    function ActionsWrapper() {
+      var _this;
+      _classCallCheck(this, ActionsWrapper);
+      _this = _callSuper(this, ActionsWrapper);
+      _this.classList.add('action-controller', 'noselect');
+      return _this;
+    }
+    _inherits(ActionsWrapper, _HTMLDivElement);
+    return _createClass(ActionsWrapper);
+  }( /*#__PURE__*/_wrapNativeSuper(HTMLDivElement));
+  customElements.define('action-controller', ActionsWrapper, {
+    "extends": 'div'
+  });
+  var ActionController = /*#__PURE__*/function () {
+    function ActionController(parent, actions, options) {
+      _classCallCheck(this, ActionController);
+      _defineProperty(this, "parent", void 0);
+      _defineProperty(this, "actions", void 0);
+      _defineProperty(this, "options", void 0);
+      _defineProperty(this, "$actionController", void 0);
+      _defineProperty(this, "$actionListContainer", void 0);
+      _defineProperty(this, "translations", {});
+      this.parent = parent;
+      this.actions = actions;
+      this.options = options;
+      this.$actionController = document.createElement('div', {
+        is: 'action-controller'
+      });
+      this.$actionListContainer = null;
+      this.init();
+    }
+    return _createClass(ActionController, [{
+      key: "init",
+      value: function init() {
+        var self = this;
+        var previewTranslations = {};
+        // get preview translations
+        if ('previewTranslations' in window) {
+          previewTranslations = window['previewTranslations'];
+          self.translations = previewTranslations;
+        }
+        var $container = document.getElementById(this.parent.containerName);
+        var $actionTitle = document.createElement('div');
+        var $actionsContainer = document.createElement('div');
+        $actionTitle.classList.add('action-controller-title');
+        $actionTitle.innerHTML = "\n            <button class=\"toggle\"></button>\n            <span class=\"title\">".concat(previewTranslations.actionControllerTitle, "</span>\n        ");
+        $actionsContainer.classList.add('actions-container');
+        if ($container) {
+          $container.insertBefore(this.$actionController, $container.firstElementChild);
+          this.$actionController.appendChild($actionTitle);
+          this.$actionController.appendChild($actionsContainer);
+          // Loop through actions
+          Array.from(this.actions).forEach(function (newAction) {
+            // Create new action object
+            var $newAction = document.createElement('div');
+            // Copy element attributes
+            var attributes = getAllAttributes(newAction.xml);
+            Array.from(Object.keys(attributes)).forEach(function (attribKey) {
+              $newAction.setAttribute("data-".concat(attribKey), attributes[attribKey].value);
+              $newAction.setAttribute(attribKey, attributes[attribKey].value);
+            });
+            // Build html for the new action
+            var html = '';
+            // Add action type
+            html += '<span class="action-row-title">' + previewTranslations[$newAction.getAttribute('actiontype') || ''];
+            if ($newAction.getAttribute('actiontype') == 'navWidget') {
+              html += ' <span title="' + previewTranslations.widgetId + '">[' + $newAction.getAttribute('widgetid') + ']</span>';
+            } else if ($newAction.getAttribute('actiontype') == 'navLayout') {
+              html += ' <span title="' + previewTranslations.layoutCode + '">[' + $newAction.getAttribute('layoutcode') + ']</span>';
+            }
+            html += '</span>';
+            // Add target
+            html += '<span class="action-row-target" title="' + previewTranslations.target + '">' + $newAction.getAttribute('target');
+            if ($newAction.getAttribute('targetid') != '') {
+              html += '(' + $newAction.getAttribute('targetid') + $newAction.getAttribute('layoutcode') + ')';
+            }
+            html += '</span>';
+            // Add HTML string to the action
+            $newAction.innerHTML = html;
+            // Append new action to the controller
+            $newAction.classList.add('action');
+            $newAction.setAttribute('originalid', newAction.id);
+            $newAction.setAttribute('id', 'A-' + newAction.id + '-' + nextId(self.options));
+            $actionsContainer.insertBefore($newAction, $actionsContainer.lastElementChild);
+          });
+          // 
+          // Enable dragging
+          // const $draggableContainer = new Moveable($container, {
+          //     target: this.$actionController,
+          //     draggable: true,
+          // });
+          // Toggle actions visibility
+          var $actionsToggler = this.$actionController.querySelector('.toggle');
+          if ($actionsToggler) {
+            $actionsToggler.onclick = function () {
+              self.$actionController.classList.toggle('d-none');
+            };
+          }
+          var $webhookActions = this.$actionController.querySelectorAll('.action[triggertype="webhook"]');
+          // Display according to the number of clickable actions
+          this.$actionController.style.setProperty('display', $webhookActions.length === 0 ? 'none' : 'flex');
+          // Handle webhook action trigger click
+          if ($webhookActions.length > 0) {
+            $webhookActions.forEach(function ($webhookAction) {
+              $webhookAction.onclick = function (event) {
+                event.stopPropagation();
+                self.runAction($webhookAction.dataset, self.options);
+              };
+              $webhookAction.classList.add('clickable');
+            });
+          }
+        }
+      }
+    }, {
+      key: "openLayoutInNewTab",
+      value: function openLayoutInNewTab(layoutCode, options) {
+        if (confirm(this.translations.navigateToLayout.replace('[layoutTag]', layoutCode))) {
+          var url = options.layoutPreviewUrl.replace('[layoutCode]', layoutCode) + '?findByCode=1';
+          window.open(url, '_blank');
+        }
+      }
+      /** Change media in region (next/previous) */
+    }, {
+      key: "nextMediaInRegion",
+      value: function nextMediaInRegion(regionId, actionType) {
+        // Find target region
+        this.parent.regions.forEach(function (regionObj) {
+          if (regionObj.id === regionId) {
+            if (actionType === 'next') {
+              regionObj.playNextMedia();
+            } else {
+              regionObj.playPreviousMedia();
+            }
+          }
+        });
+      }
+    }, {
+      key: "loadMediaInRegion",
+      value: function loadMediaInRegion(regionId, widgetId) {
+        var _targetRegion, _targetRegion2, _targetRegion3;
+        var self = this;
+        // Find target region
+        var targetRegion;
+        self.parent.regions.forEach(function (regionObj) {
+          if (regionObj.id === regionId) {
+            targetRegion = regionObj;
+          }
+        });
+        // Find media in actions
+        var targetMedia;
+        if (targetRegion) {
+          targetRegion.mediaObjectsActions.forEach(function (media) {
+            if (media.id === widgetId) {
+              targetMedia = media;
+            }
+          });
+        }
+        // Mark media as temporary (removed after region stop playing or loops)
+        if (targetMedia) {
+          targetMedia.singlePlay = true;
+        }
+        // If region is empty, remove the background color and empty message
+        if (((_targetRegion = targetRegion) === null || _targetRegion === void 0 ? void 0 : _targetRegion.mediaObjects.length) === 0) {
+          targetRegion.complete = false;
+        }
+        // Create media in region and play it next
+        (_targetRegion2 = targetRegion) === null || _targetRegion2 === void 0 || _targetRegion2.mediaObjects.splice(targetRegion.currentMediaIndex + 1, 0, targetMedia);
+        (_targetRegion3 = targetRegion) === null || _targetRegion3 === void 0 || _targetRegion3.playNextMedia();
+      }
+      /** Run action based on action data */
+    }, {
+      key: "runAction",
+      value: function runAction(actionData, options) {
+        if (actionData.actiontype == 'navLayout') {
+          // Open layout preview in a new tab
+          this.openLayoutInNewTab(actionData.layoutcode, options);
+        } else if ((actionData.actiontype == 'previous' || actionData.actiontype == 'next') && actionData.target == 'region') {
+          this.nextMediaInRegion(actionData.targetid, actionData.actiontype);
+        } else if (actionData.actiontype == 'navWidget' && actionData.target == 'region') {
+          this.loadMediaInRegion(actionData.targetid, actionData.widgetid);
+        } else {
+          // TODO Handle other action types ( later? )
+          console.log(actionData.actiontype + ' > ' + actionData.target + '[' + actionData.targetid + ']');
+        }
+      }
+    }, {
+      key: "initTouchActions",
+      value: function initTouchActions() {
+        var self = this;
+        this.$actionController.querySelectorAll('.action[triggerType="touch"]').forEach(function ($el) {
+          var dataset = $el.dataset;
+          // Find source object
+          var $sourceObj;
+          if (dataset.source === 'layout') {
+            $sourceObj = document.getElementById(self.parent.containerName);
+          } else {
+            var regionObjects = Array.from(self.parent.regions);
+            // Loop through layout regions
+            for (var _i = 0, _regionObjects = regionObjects; _i < _regionObjects.length; _i++) {
+              var regionObj = _regionObjects[_i];
+              if (dataset.source === 'region') {
+                // Try to find the region
+                if (regionObj.id === dataset.sourceid) {
+                  $sourceObj = document.getElementById(regionObj.containerName);
+                  break;
+                }
+              } else if (dataset.source === 'widget') {
+                // Try to find widget/media
+                var mediaObjects = Array.from(regionObj.mediaObjects);
+                for (var _i2 = 0, _mediaObjects = mediaObjects; _i2 < _mediaObjects.length; _i2++) {
+                  var mediaObject = _mediaObjects[_i2];
+                  if (mediaObject.id === dataset.sourceid) {
+                    $sourceObj = document.getElementById(mediaObject.containerName);
+                    break;
+                  }
+                }
+              }
+              // Break loop if we already have a $sourceObj
+              if ($sourceObj != undefined) {
+                break;
+              }
+            }
+          }
+          // Handle source click
+          // FIXME: We need to handle the case where a drawer widget has an action and it has been loaded to the preview
+          if ($sourceObj != undefined) {
+            $sourceObj.onclick = function (ev) {
+              ev.stopPropagation();
+              self.runAction(dataset, self.options);
+            };
+            $sourceObj.classList.add('clickable');
+          }
+        });
+      }
+    }]);
+  }();
+
   var playAgainClickHandle = function playAgainClickHandle(ev) {
     ev.preventDefault();
     history.go(0);
@@ -2061,7 +2461,7 @@ var XiboLayoutRenderer = (function (exports) {
       layoutObject.parseXlf();
     };
     layoutObject.parseXlf = function () {
-      var _layout$layoutNode, _layout$layoutNode2, _layout$layoutNode3, _layout$layoutNode4, _layout$layoutNode5, _layout$layoutNode6;
+      var _layout$layoutNode, _layout$layoutNode2, _layout$layoutNode3, _layout$layoutNode4, _layout$layoutNode5, _layout$layoutNode6, _layout$layoutNode7, _layout$layoutNode8;
       var layout = this;
       var options = layout.options;
       layout.done = false;
@@ -2131,13 +2531,26 @@ var XiboLayoutRenderer = (function (exports) {
       if ($layout && xlr.currentLayoutId !== undefined && xlr.currentLayoutId !== layout.id) {
         $layout.style.display = 'none';
       }
+      // Create actions
+      var layoutActions = Array.from((layout === null || layout === void 0 || (_layout$layoutNode6 = layout.layoutNode) === null || _layout$layoutNode6 === void 0 ? void 0 : _layout$layoutNode6.getElementsByTagName('action')) || []);
+      Array.from(layoutActions).forEach(function (actionXml, indx) {
+        layout.actions.push(new Action((actionXml === null || actionXml === void 0 ? void 0 : actionXml.getAttribute('id')) || '', actionXml));
+      });
+      // Create interactive actions
+      layout.actionController = new ActionController(layout, layout.actions, options);
+      // Create drawer
+      var layoutDrawers = Array.from((layout === null || layout === void 0 || (_layout$layoutNode7 = layout.layoutNode) === null || _layout$layoutNode7 === void 0 ? void 0 : _layout$layoutNode7.getElementsByTagName('drawer')) || []);
+      Array.from(layoutDrawers).forEach(function (layoutDrawerXml) {
+        layout.drawer = layoutDrawerXml;
+      });
       // Create regions
-      var layoutRegions = Array.from((layout === null || layout === void 0 || (_layout$layoutNode6 = layout.layoutNode) === null || _layout$layoutNode6 === void 0 ? void 0 : _layout$layoutNode6.getElementsByTagName('region')) || []);
+      var layoutRegions = Array.from((layout === null || layout === void 0 || (_layout$layoutNode8 = layout.layoutNode) === null || _layout$layoutNode8 === void 0 ? void 0 : _layout$layoutNode8.getElementsByTagName('region')) || []);
       Array.from(layoutRegions).forEach(function (regionXml, indx) {
         var regionObj = Region(layout, regionXml, (regionXml === null || regionXml === void 0 ? void 0 : regionXml.getAttribute('id')) || '', options, xlr);
         regionObj.index = indx;
         layout.regions.push(regionObj);
       });
+      layout.actionController.initTouchActions();
     };
     layoutObject.regionExpired = function () {
       var self = layoutObject;