@xibosignage/xibo-layout-renderer 1.0.1 → 1.0.3

package/dist/xibo-layout-renderer.d.ts

@@ -77,9 +77,10 @@ interface IRegion {
     layout: ILayout;
     id: string;
     regionId: string;
+    uniqueId: string;
     xml: null | Element;
     mediaObjects: IMedia[];
-    mediaObjectsActions: String[];
+    mediaObjectsActions: IMedia[];
     currentMedia: number;
     complete: boolean;
     containerName: string;
@@ -104,6 +105,7 @@ interface IRegion {
     emitter?: Emitter<DefaultEvents>;
     prepareRegion(): void;
     playNextMedia(): void;
+    playPreviousMedia(): void;
     transitionNodes(oldMedia: IMedia | undefined, newMedia: IMedia | undefined): void;
     finished(): void;
     run(): void;
@@ -121,6 +123,37 @@ interface ILayoutEvents {
     end: (layout: ILayout) => void;
 }
 
+declare class Action {
+    readonly id: string;
+    readonly xml: Element;
+    constructor(id: string, xml: Element);
+}
+declare class ActionsWrapper extends HTMLDivElement {
+    constructor();
+}
+type InactOptions = {
+    [k: string]: any;
+} & OptionsType['previewTranslations'];
+declare class ActionController {
+    readonly parent: ILayout;
+    readonly actions: Action[];
+    readonly options: InactOptions;
+    readonly $actionController: ActionsWrapper;
+    readonly $actionListContainer: Element | null;
+    translations: any;
+    constructor(parent: ILayout, actions: Action[], options: InactOptions);
+    init(): void;
+    openLayoutInNewTab(layoutCode: string, options: InactOptions): void;
+    /** Change media in region (next/previous) */
+    nextMediaInRegion(regionId: string, actionType: string): void;
+    loadMediaInRegion(regionId: string, widgetId: string): void;
+    /** Run action based on action data */
+    runAction(actionData: {
+        [k: string]: any;
+    }, options: InactOptions): void;
+    initTouchActions(): void;
+}
+
 type InputLayoutType = {
     layoutId: number | null;
     path?: string;
@@ -142,6 +175,9 @@ type OptionsType = {
         cmsKey: string | null;
         hardwareKey: string | null;
     };
+    previewTranslations?: {
+        [k: string]: any;
+    };
 };
 interface ILayout {
     id: number | null;
@@ -164,10 +200,10 @@ interface ILayout {
     regionMaxZIndex: number;
     ready: boolean;
     regionObjects: IRegion[];
-    drawer: String[];
+    drawer: Element | null;
     allExpired: boolean;
     regions: IRegion[];
-    actions: String[];
+    actions: Action[];
     options: OptionsType;
     done: boolean;
     allEnded: boolean;
@@ -183,6 +219,7 @@ interface ILayout {
     stopAllMedia(): Promise<void>;
     resetLayout(): Promise<void>;
     index: number;
+    actionController: ActionController | undefined;
 }
 declare const initialLayout: ILayout;
 type GetLayoutParamType = {

package/dist/xibo-layout-renderer.esm.js

@@ -1,3 +1,21 @@
+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) {
@@ -364,6 +382,27 @@ function _asyncToGenerator(fn) {
     });
   };
 }
+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) {
@@ -378,6 +417,82 @@ function _defineProperty(obj, key, value) {
   }
   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();
 }
@@ -520,7 +635,7 @@ var initialLayout = {
   regionMaxZIndex: 0,
   ready: false,
   regionObjects: [],
-  drawer: [],
+  drawer: null,
   allExpired: false,
   regions: [],
   actions: [],
@@ -544,7 +659,8 @@ var initialLayout = {
     return Promise.resolve();
   },
   emitter: {},
-  index: -1
+  index: -1,
+  actionController: undefined
 };
 
 function nextId(options) {
@@ -712,6 +828,9 @@ function composeResourceUrl(options, params) {
   var serverKey = options && ((_options$config3 = options.config) === null || _options$config3 === void 0 ? void 0 : _options$config3.cmsKey);
   return '/pwa/getResource' + '?v=' + schemaVersion + '&serverKey=' + serverKey + '&hardwareKey=' + hardwareKey + '&layoutId=' + params.layoutId + '&regionId=' + params.regionId + '&mediaId=' + params.mediaId;
 }
+function composeVideoUrl(params) {
+  return '/xmds.php?file=' + params.uri;
+}
 function composeBgUrlByPlatform(platform, params) {
   var bgImageUrl = params.layoutBackgroundDownloadUrl.replace(":id", params.layout.id) + '?preview=1&width=' + params.layout.sWidth + '&height=' + params.layout.sHeight + '&dynamic&proportional=0';
   if (platform === 'chromeOS') {
@@ -737,11 +856,22 @@ function getIndexByLayoutId(layoutsInput, layoutId) {
     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: [],
@@ -766,6 +896,7 @@ var initialRegion = {
   index: -1,
   prepareRegion: function prepareRegion() {},
   playNextMedia: function playNextMedia() {},
+  playPreviousMedia: function playPreviousMedia() {},
   transitionNodes: function transitionNodes() {},
   finished: function finished() {},
   run: function run() {},
@@ -1285,6 +1416,9 @@ function Media(region, mediaId, xml, options, xlr) {
       tmpUrl = composeResourceUrlByPlatform(xlr.config, resourceUrlParams);
     } else if (xlr.config.platform === 'chromeOS') {
       tmpUrl = composeResourceUrl(xlr.config, resourceUrlParams);
+      if (self.mediaType === 'video') {
+        tmpUrl = composeVideoUrl(resourceUrlParams);
+      }
     }
     self.url = tmpUrl;
     // Loop if media has loop, or if region has loop and a single media
@@ -1596,7 +1730,7 @@ function Region(layout, xml, regionId, options, xlr) {
   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;
@@ -1604,8 +1738,9 @@ function Region(layout, xml, regionId, options, xlr) {
     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;
@@ -1644,6 +1779,20 @@ function Region(layout, xml, regionId, options, xlr) {
       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 () {
@@ -1801,6 +1950,18 @@ function Region(layout, xml, regionId, options, xlr) {
     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;
@@ -1841,6 +2002,251 @@ function Region(layout, xml, regionId, options, xlr) {
   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);
@@ -2052,7 +2458,7 @@ function Layout(data, options, xlr, layout) {
     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;
@@ -2070,7 +2476,9 @@ function Layout(data, options, xlr, layout) {
     $screen && $screen.appendChild($layout);
     if ($layout) {
       $layout.style.display = 'none';
-      $layout.style.outline = 'red solid thin';
+      if (xlr.config.platform === 'CMS') {
+        $layout.style.outline = 'red solid thin';
+      }
     }
     layout.layoutNode = props.data;
     /* Calculate the screen size */
@@ -2120,13 +2528,26 @@ function Layout(data, options, xlr, layout) {
     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;