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

@@ -28,8 +28,6 @@ jQuery.fn.extend({
       duration: 50,
       durationIsPerItem: false,
       numItems: 1,
-      takeItemsFrom: 'start',
-      reverseOrder: 0,
       itemsPerPage: 1,
       speed: 2,
       previewWidth: 0,

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) ?

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[

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);
 }

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="' +