Preview: Fix element group rendering with respect to layer (#2778)

relates to xibosignage/xibo#3485
xibosignage · Oct 18, 2024 · ae60d5e · ae60d5e
1 parent e4dd568
commit ae60d5e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/modules/src/xibo-player.js b/modules/src/xibo-player.js
@@ -1370,12 +1370,28 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
       if (isGroup) {
         // Grouped elements
         if (elemObj.items.length > 0) {
+          // Check if group element exists
+          // If not, then create
+          let $groupContent;
+          if ($content.find(`.${itemKey}`).length === 0) {
+            $groupContent = $(`<div class="${itemKey}"></div>`);
+
+            $groupContent.css({
+              width: elemObj.width,
+              height: elemObj.height,
+              position: 'absolute',
+              top: elemObj.top,
+              left: elemObj.left,
+              zIndex: elemObj.layer,
+            });
+          }
+
           // Loop through group items
           elemObj.items.forEach(function(groupItem) {
             // Load element functions
             self.loadElementFunctions(groupItem, {});
 
-            (groupItem.hbs) && $content.append(
+            (groupItem.hbs) ($groupContent) && $groupContent.append(
               PlayerHelper.renderElement(
                 groupItem.hbs,
                 groupItem.templateData,
@@ -1398,6 +1414,12 @@ XiboPlayer.prototype.renderGlobalElements = function(currentWidget) {
               meta,
             );
           });
+
+          // If there's a group content element
+          // Append it to the page
+          if ($groupContent) {
+            $content.append($groupContent);
+          }
         }
       } else {
         // Single elements

diff --git a/ui/src/helpers/player-helper.js b/ui/src/helpers/player-helper.js
@@ -133,7 +133,10 @@ const PlayerHelper = function() {
     const hbsTemplate = hbs(Object.assign(props, globalOptions));
     let topPos = props.top;
     let leftPos = props.left;
+    const hasGroup = Boolean(props.groupId);
+    const hasGroupProps = Boolean(props.groupProperties);
 
+    // @NOTE: I think this is deprecated but needs more checking
     if (props.group) {
       if (props.group.isMarquee) {
         topPos = (props.top - props.group.top);
@@ -165,6 +168,14 @@ const PlayerHelper = function() {
         left: props.left,
         zIndex: props.layer,
       };
+
+      if (hasGroup && hasGroupProps) {
+        cssStyles.top = (props.top >= props.groupProperties.top) ?
+          (props.top - props.groupProperties.top) : 0;
+        cssStyles.left = (props.left >= props.groupProperties.left) ?
+          (props.left - props.groupProperties.left) : 0;
+        cssStyles.zIndex = 'none';
+      }
     }
 
     if (!props.isGroup && props.dataOverride === 'text' &&