From d8035cda7306c993113bd0600713c742c3538e90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauro=20Ferr=C3=A3o?= <maurofmferrao@gmail.com>
Date: Fri, 27 Oct 2023 09:54:49 +0100
Subject: [PATCH] Widget effects: Make consistent with v3 (#2185)

relates to xibosignageltd/xibo-private#167

 - Article content changed to summary like in v3
 - Number of items cap fixed
 - Groups in effect selector
---
 modules/src/xibo-elements-render.js  |  2 --
 modules/src/xibo-text-render.js      |  9 ++++++---
 modules/templates/article-static.xml |  4 ++--
 modules/templates/event-static.xml   |  8 +++++++-
 ui/src/core/forms.js                 | 21 ++++++++++++++++++++-
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/modules/src/xibo-elements-render.js b/modules/src/xibo-elements-render.js
index 6eda8ba067..423415a5d3 100644
--- a/modules/src/xibo-elements-render.js
+++ b/modules/src/xibo-elements-render.js
@@ -28,8 +28,6 @@ jQuery.fn.extend({
       duration: 50,
       durationIsPerItem: false,
       numItems: 1,
-      takeItemsFrom: 'start',
-      reverseOrder: 0,
       itemsPerPage: 1,
       speed: 2,
       previewWidth: 0,
diff --git a/modules/src/xibo-text-render.js b/modules/src/xibo-text-render.js
index 24bb4753ef..5417427757 100644
--- a/modules/src/xibo-text-render.js
+++ b/modules/src/xibo-text-render.js
@@ -26,9 +26,7 @@ jQuery.fn.extend({
       pauseEffectOnStart: true,
       duration: '50',
       durationIsPerItem: false,
-      numItems: 0,
-      takeItemsFrom: 'start',
-      reverseOrder: 0,
+      numItems: 1,
       itemsPerPage: 0,
       speed: '2',
       previewWidth: 0,
@@ -75,6 +73,9 @@ jQuery.fn.extend({
       }
     };
 
+    // If number of items is not defined, get it from the item count
+    options.numItems = options.numItems ? options.numItems : items.length;
+
     // Calculate the dimensions of this item
     // based on the preview/original dimensions
     let width = height = 0;
@@ -247,6 +248,8 @@ jQuery.fn.extend({
 
           // Change the number of items
           numberOfItems = $(slides).length;
+        } else if (options.type === 'text') {
+          numberOfItems = $(slides).length;
         }
 
         const numberOfSlides = (options.itemsPerPage > 1) ?
diff --git a/modules/templates/article-static.xml b/modules/templates/article-static.xml
index 7fd9a35087..1de3ef5a37 100644
--- a/modules/templates/article-static.xml
+++ b/modules/templates/article-static.xml
@@ -325,7 +325,7 @@ $(target).xiboTextRender(properties, $(target).find('#content > .image, #content
   {{#if image}}<img src="{{image}}"/>{{/if}}
   <div class="cycle-overlay background">
     <div class="title">{{title}}</div>
-    <div class="description">{{{content}}}</div>
+    <div class="description">{{{summary}}}</div>
   </div>
 </div>
             ]]></hbs>
@@ -696,7 +696,7 @@ $(target).xiboTextRender(properties, $(target).find('#content > .image, #content
 <div class="article">
     <div><div class="name">{{author}}</div></div>
     <div><div class="title"><strong>{{title}}</strong></div></div>
-    <div><div class="description">{{{content}}}</div></div>
+    <div><div class="description">{{{summary}}}</div></div>
 </div>
             ]]></hbs>
             <twig><![CDATA[
diff --git a/modules/templates/event-static.xml b/modules/templates/event-static.xml
index 0d77e3ab2d..20120c6c20 100644
--- a/modules/templates/event-static.xml
+++ b/modules/templates/event-static.xml
@@ -114,7 +114,13 @@ if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !=
 $(target).find('#content').empty();
 
 // Add items to container
-for (var index = 0; index < items.length; index++) {
+// If we have numItems, send only that number
+let numItems =
+  properties.numItems && properties.numItems < items.length ?
+  properties.numItems :
+  items.length;
+
+for (var index = 0; index < numItems; index++) {
   var $newItem = $('<div>').addClass('event').html(items[index]).appendTo('body');
   $(target).find('#content').append($newItem);
 }
diff --git a/ui/src/core/forms.js b/ui/src/core/forms.js
index 168428a6a2..69db87089b 100644
--- a/ui/src/core/forms.js
+++ b/ui/src/core/forms.js
@@ -1864,6 +1864,9 @@ window.forms = {
       const $el = $(el).find('select');
       const effectsType = $el.data('effects-type').split(' ');
 
+      // Show option groups if we show all
+      const showOptionGroups = (effectsType.indexOf('all') != -1);
+
       // Effects
       const effects = [
         {effect: 'none', group: 'showAll'},
@@ -1902,7 +1905,23 @@ window.forms = {
           return;
         }
 
-        $el.append(
+        // Show option group if it doesn't exist
+        let $optionGroup = $el.find(`optgroup[data-type=${element.group}]`);
+        if (
+          showOptionGroups && $optionGroup.length == 0
+        ) {
+          $optionGroup =
+            $(`<optgroup
+              label="${effectsTranslations[element.group]}"
+              data-type="${element.group}">
+            </optgroup>`);
+          $el.append($optionGroup);
+        }
+
+        // Check if we add to option group or main select
+        const $appendTo = showOptionGroups ? $optionGroup : $el;
+
+        $appendTo.append(
           $('<option value="' +
             element.effect +
             '" data-optgroup="' +