diff --git a/modules/backend/formwidgets/Repeater.php b/modules/backend/formwidgets/Repeater.php index f9fa3a6fb..95ac67c90 100644 --- a/modules/backend/formwidgets/Repeater.php +++ b/modules/backend/formwidgets/Repeater.php @@ -43,6 +43,15 @@ class Repeater extends FormWidgetBase */ public $maxItems; + /** + * @var string The style of the repeater. Can be one of three values: + * - "default": Shows all repeater items expanded on load. + * - "collapsed": Shows all repeater items collapsed on load. + * - "accordion": Shows only the first repeater item expanded on load. When another item is clicked, all other open + * items are collapsed. + */ + public $style; + // // Object properties // @@ -101,6 +110,7 @@ class Repeater extends FormWidgetBase $this->fillFromConfig([ 'form', + 'style', 'prompt', 'sortable', 'titleFrom', @@ -156,6 +166,7 @@ class Repeater extends FormWidgetBase $this->vars['titleFrom'] = $this->titleFrom; $this->vars['minItems'] = $this->minItems; $this->vars['maxItems'] = $this->maxItems; + $this->vars['style'] = $this->style; $this->vars['useGroups'] = $this->useGroups; $this->vars['groupDefinitions'] = $this->groupDefinitions; diff --git a/modules/backend/formwidgets/repeater/assets/js/repeater.js b/modules/backend/formwidgets/repeater/assets/js/repeater.js index 867befc97..615c8cfb8 100644 --- a/modules/backend/formwidgets/repeater/assets/js/repeater.js +++ b/modules/backend/formwidgets/repeater/assets/js/repeater.js @@ -35,7 +35,8 @@ sortableContainer: 'ul.field-repeater-items', titleFrom: null, minItems: null, - maxItems: null + maxItems: null, + style: 'default', } Repeater.prototype.init = function() { @@ -49,6 +50,7 @@ this.$el.one('dispose-control', this.proxy(this.dispose)) this.togglePrompt() + this.applyStyle() } Repeater.prototype.dispose = function() { @@ -157,6 +159,13 @@ ev.preventDefault() + if (this.getStyle() === 'accordion') { + if (isCollapsed) { + this.expand($item) + } + return + } + if (ev.ctrlKey || ev.metaKey) { isCollapsed ? this.expandAll() : this.collapseAll() } @@ -167,7 +176,7 @@ Repeater.prototype.collapseAll = function() { var self = this, - items = $('.field-repeater-item', this.$el) + items = $(this.$el).children('.field-repeater-items').children('.field-repeater-item') $.each(items, function(key, item){ self.collapse($(item)) @@ -176,7 +185,7 @@ Repeater.prototype.expandAll = function() { var self = this, - items = $('.field-repeater-item', this.$el) + items = $(this.$el).children('.field-repeater-items').children('.field-repeater-item') $.each(items, function(key, item){ self.expand($(item)) @@ -189,6 +198,9 @@ } Repeater.prototype.expand = function($item) { + if (this.getStyle() === 'accordion') { + this.collapseAll() + } $item.removeClass('collapsed') } @@ -229,6 +241,36 @@ return defaultText } + Repeater.prototype.getStyle = function() { + var style = 'default'; + + // Validate style + if (this.options.style && ['collapsed', 'accordion'].indexOf(this.options.style) !== -1) { + style = this.options.style + } + + return style; + } + + Repeater.prototype.applyStyle = function() { + var style = this.getStyle(), + self = this, + items = $(this.$el).children('.field-repeater-items').children('.field-repeater-item') + + $.each(items, function(key, item) { + switch (style) { + case 'collapsed': + self.collapse($(item)) + break + case 'accordion': + if (key !== 0) { + self.collapse($(item)) + } + break + } + }) + } + // FIELD REPEATER PLUGIN DEFINITION // ============================ diff --git a/modules/backend/formwidgets/repeater/partials/_repeater.htm b/modules/backend/formwidgets/repeater/partials/_repeater.htm index d5198b6de..a0756f815 100644 --- a/modules/backend/formwidgets/repeater/partials/_repeater.htm +++ b/modules/backend/formwidgets/repeater/partials/_repeater.htm @@ -3,6 +3,7 @@ + data-sortable-container="#getId('items') ?>" data-sortable-handle=".getId('items') ?>-handle">