Feature/editor multi select (xibosignage#1951)

* Multi select and group items
relates to xibosignageltd/xibo-private#379

 - Confirmation modal removed
 - References to element not targetting a layout element renamed

cypress/e2e/layout_clock.cy.js

@@ -39,7 +39,7 @@ describe('Layout Designer', function() {
 
     cy.get('[data-sub-type="clock-analogue"] > .toolbar-card-thumb').click();
 
-    cy.get('.viewer-element.layout.ui-droppable-active').click();
+    cy.get('.viewer-object.layout.ui-droppable-active').click();
 
     // Check if the widget is in the viewer
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_clock-analogue"]').should('exist');
@@ -61,11 +61,11 @@ describe('Layout Designer', function() {
     cy.wait('@saveWidget');
 
     // Change the background of the layout
-    cy.get('.viewer-element').click({force: true});
+    cy.get('.viewer-object').click({force: true});
     cy.get('[name="backgroundColor"]').clear().type('#ffffff').trigger('change');
 
     // Validate background color changed wo white
-    cy.get('.viewer-element').should('have.css', 'background-color', 'rgb(255, 255, 255)');
+    cy.get('.viewer-object').should('have.css', 'background-color', 'rgb(255, 255, 255)');
 
     // Check if the name and duration values are the same entered
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_clock-analogue"]').parents('.designer-region').click();
@@ -76,7 +76,6 @@ describe('Layout Designer', function() {
     // Delete
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_clock-analogue"]').parents('.designer-region').rightclick();
     cy.get('[data-title="Delete"]').click();
-    cy.get('.btn-bb-confirm').click();
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_clock-analogue"]').should('not.exist');
   });
 });

cypress/e2e/layout_dataset.cy.js

@@ -38,7 +38,7 @@ describe('Layout Designer', function() {
 
     cy.get('[data-sub-type="dataset"]').click();
     cy.get('[data-template-id="dataset_table_1"]').click();
-    cy.get('.viewer-element.layout.ui-droppable-active').click();
+    cy.get('.viewer-object.layout.ui-droppable-active').click();
 
     // // Check if the widget is in the viewer
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').should('exist');
@@ -103,7 +103,6 @@ describe('Layout Designer', function() {
 
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').parents('.designer-region').rightclick();
     cy.get('[data-title="Delete"]').click();
-    cy.get('.btn-bb-confirm').click();
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_dataset"]').should('not.exist');
   });
 });

cypress/e2e/layout_designer_populated_unchanged.cy.js

@@ -163,13 +163,13 @@ describe('Layout Designer (Populated/Unchanged)', function() {
         cy.server();
         cy.route('**/region/preview/*').as('loadRegion');
         // Wait for the viewer and region to load
-        cy.get('#layout-viewer-container .viewer-element.layout-player').should('be.visible');
+        cy.get('#layout-viewer-container .viewer-object.layout-player').should('be.visible');
         cy.wait('@loadRegion');
 
         // Click play
         cy.get('.editor-bottom-bar #play-btn').click();
 
         // Check if the fullscreen iframe has loaded
-        cy.get('#layout-viewer-container #layout-viewer .viewer-element > iframe').should('be.visible');
+        cy.get('#layout-viewer-container #layout-viewer .viewer-object > iframe').should('be.visible');
     });
 });

cypress/e2e/layout_mastodon.cy.js

@@ -37,7 +37,7 @@ describe('Layout Designer', function() {
 
     cy.get('[data-template-id="social_media_static_1"] > .toolbar-card-thumb').click();
 
-    cy.get('.viewer-element.layout.ui-droppable-active').click();
+    cy.get('.viewer-object.layout.ui-droppable-active').click();
 
     // Check if the widget is in the viewer
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_mastodon"]').should('exist');
@@ -61,7 +61,6 @@ describe('Layout Designer', function() {
 
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_mastodon"]').parents('.designer-region').rightclick();
     cy.get('[data-title="Delete"]').click();
-    cy.get('.btn-bb-confirm').click();
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_mastodon"]').should('not.exist');
   });
 });

cypress/e2e/layout_rss_ticker.cy.js

@@ -37,7 +37,7 @@ describe('Layout Designer', function() {
 
     cy.get('[data-template-id="article_image_only"] > .toolbar-card-thumb').click();
 
-    cy.get('.viewer-element.layout.ui-droppable-active').click();
+    cy.get('.viewer-object.layout.ui-droppable-active').click();
 
     // Check if the widget is in the viewer
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_rss-ticker"]').should('exist');
@@ -70,7 +70,6 @@ describe('Layout Designer', function() {
 
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_rss-ticker"]').parents('.designer-region').rightclick();
     cy.get('[data-title="Delete"]').click();
-    cy.get('.btn-bb-confirm').click();
     cy.get('#layout-viewer .designer-region .widget-preview[data-type="widget_rss-ticker"]').should('not.exist');
   });
 });

ui/src/editor-core/bottombar.js

@@ -13,9 +13,9 @@ const Bottombar = function(parent, container) {
 
 /**
  * Render bottombar
- * @param {object} element - the element to render the bottombar to
+ * @param {object} object - the object to render the bottombar to
  */
-Bottombar.prototype.render = function(element) {
+Bottombar.prototype.render = function(object) {
   const app = this.parent;
   const readOnlyModeOn = (app?.readOnlyMode === true);
 
@@ -40,28 +40,28 @@ Bottombar.prototype.render = function(element) {
       ) :
       '';
 
-  if (element.type == 'widget') {
-    const parentRegion = lD.getElementByTypeAndId('region', element.regionId);
+  if (object.type == 'widget') {
+    const parentRegion = lD.getObjectByTypeAndId('region', object.regionId);
 
     // Render widget toolbar
     this.DOMObject.html(bottomBarViewerTemplate(
       {
         regionName: (parentRegion) ? parentRegion.name : '',
         trans: newBottomBarTrans,
         readOnlyModeOn: readOnlyModeOn,
-        element: element,
+        object: object,
         undoActive: checkHistory.undoActive,
         trashActive: trashBinActive,
       },
     ));
-  } else if (element.type == 'layout') {
+  } else if (object.type == 'layout') {
     // Render layout  toolbar
     this.DOMObject.html(bottomBarViewerTemplate(
       {
         trans: newBottomBarTrans,
         readOnlyModeOn: readOnlyModeOn,
         renderLayout: true,
-        element: element,
+        object: object,
         undoActive: checkHistory.undoActive,
         trashActive: trashBinActive,
       },
@@ -82,7 +82,7 @@ Bottombar.prototype.render = function(element) {
       } else {
         lD.viewer.playPreview(
           requestPath,
-          lD.viewer.containerElementDimensions,
+          lD.viewer.containerObjectDimensions,
         );
         this.DOMObject.find('#play-btn i')
           .removeClass('fa-play-circle')
@@ -91,27 +91,27 @@ Bottombar.prototype.render = function(element) {
         lD.viewer.previewPlaying = true;
       }
     }.bind(this));
-  } else if (element.type == 'region') {
+  } else if (object.type == 'region') {
     // Render region toolbar
     this.DOMObject.html(bottomBarViewerTemplate(
       {
         trans: newBottomBarTrans,
         readOnlyModeOn: readOnlyModeOn,
-        element: element,
+        object: object,
         undoActive: checkHistory.undoActive,
         trashActive: trashBinActive,
       },
     ));
   } else if (
-    element.type == 'element' ||
-    element.type == 'element-group'
+    object.type == 'element' ||
+    object.type == 'element-group'
   ) {
     // Render element and element group toolbar
     this.DOMObject.html(bottomBarViewerTemplate(
       {
         trans: newBottomBarTrans,
         readOnlyModeOn: readOnlyModeOn,
-        element: element,
+        object: object,
         trashActive: trashBinActive,
       },
     ));
@@ -135,7 +135,7 @@ Bottombar.prototype.render = function(element) {
 
   // Button handlers
   this.DOMObject.find('#delete-btn').click(function() {
-    if (element.isDeletable) {
+    if (object.isDeletable) {
       lD.deleteSelectedObject();
     }
   });
@@ -146,7 +146,7 @@ Bottombar.prototype.render = function(element) {
 
   this.DOMObject.find('.properties-btn').click(function(e) {
     const buttonData = $(e.currentTarget).data();
-    element.editPropertyForm(
+    object.editPropertyForm(
       buttonData['property'],
       buttonData['propertyType'],
     );

ui/src/editor-core/common.js

@@ -137,14 +137,14 @@ module.exports = {
   },
 
   /**
-     * Check if element has specific target in data
-     * @param {object} element - Element to check
+     * Check if object has specific target in data
+     * @param {object} object - object to check
      * @param {string[]} targetType - Target to check
      * @return {boolean}
       */
-  hasTarget: function(element, targetType) {
+  hasTarget: function(object, targetType) {
     // Get target data
-    let targetData = $(element).data('target');
+    let targetData = $(object).data('target');
 
     // If target data is not defined, return false
     if (targetData == undefined) {

ui/src/editor-core/element-group.js

@@ -150,7 +150,7 @@ ElementGroup.prototype.updateGroupDimensions = function(
 
   if (reload) {
     const widget =
-      lD.getElementByTypeAndId(
+      lD.getObjectByTypeAndId(
         'widget',
         'widget_' + self.regionId + '_' + self.widgetId,
         'canvas',

ui/src/editor-core/element.js

@@ -232,7 +232,7 @@ Element.prototype.transform = function(transform) {
  */
 Element.prototype.getData = function() {
   const self = this;
-  const parentWidget = lD.getElementByTypeAndId(
+  const parentWidget = lD.getObjectByTypeAndId(
     'widget',
     'widget_' + this.regionId + '_' + this.widgetId,
     'canvas',

ui/src/editor-core/history-manager.js

@@ -8,7 +8,7 @@ const Change = require('../editor-core/change.js');
 const managerTemplate = require('../templates/history-manager.hbs');
 
 // Map from a operation to its inverse, and
-// detail if the operation is done on the element or the layout
+// detail if the operation is done on the object or the layout
 const inverseChangeMap = {
   transform: {
     inverse: 'transform',
@@ -204,7 +204,7 @@ HistoryManager.prototype.uploadChange = function(
         change.uploaded = true;
         change.uploading = false;
 
-        // Update the Id of the change with the new element
+        // Update the Id of the change with the new object
         if (updateId) {
           if (change.type === 'create' || change.type === 'addWidget') {
             change.target.id = data.id;
@@ -278,8 +278,8 @@ HistoryManager.prototype.revertChange = function() {
       // Get data to apply
       let data = lastChange.oldState;
 
-      // Get element by type,from the main object
-      const element = app.getElementByTypeAndId(
+      // Get object by type,from the main object
+      const object = app.getObjectByTypeAndId(
         lastChange.target.type, // Type
         lastChange.target.type + '_' + lastChange.target.id, // Id
       );
@@ -289,8 +289,8 @@ HistoryManager.prototype.revertChange = function() {
         data = JSON.parse(data.regions)[0];
       }
 
-      // Apply inverse operation to the element
-      element[inverseOperation](data, false);
+      // Apply inverse operation to the object
+      object[inverseOperation](data, false);
 
       // Remove change from history
       self.changeHistory.pop();