Repeaters add Expand Collapse buttons see #2631

modules/backend/formwidgets/repeater/assets/css/repeater.css

@@ -1,6 +1,27 @@
 .field-repeater {
   padding-top: 5px;
 }
+.field-repeater .field-repeater-buttons {
+  text-align: right;
+  margin-bottom: 10px;
+  margin-top: -15px;
+  font-size: 12px;
+}
+.field-repeater .field-repeater-buttons * {
+  text-align: left;
+}
+.field-repeater .field-repeater-buttons .item {
+  color: #000000;
+  opacity: 0.5;
+  line-height: 20px;
+  margin: 0 10px;
+  display: inline-block;
+}
+.field-repeater .field-repeater-buttons .item:hover,
+.field-repeater .field-repeater-buttons .item:focus {
+  opacity: 0.7;
+  text-decoration: none;
+}
 .field-repeater ul.field-repeater-items,
 .field-repeater li.field-repeater-item {
   padding: 0;
@@ -45,6 +66,9 @@
   margin-left: 5px;
   padding-left: 15px;
   border-left: 1px solid #dbdee0;
+  min-height: 30px;
+  -webkit-transition: all 0.5s;
+  transition: all 0.5s;
 }
 .field-repeater li.field-repeater-item:before {
   color: #bdc3c7;
@@ -60,6 +84,45 @@
   left: -4px;
   top: -2px;
 }
+.field-repeater li.field-repeater-item.collapsed .field-repeater-form {
+  display: none;
+}
+.field-repeater li.field-repeater-item.collapsed .repeater-item-collapse .repeater-item-collapse-one {
+  -webkit-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+.field-repeater li.field-repeater-item.collapsed .repeater-item-collapsed-title {
+  display: block;
+}
+.field-repeater li.field-repeater-item .repeater-item-collapse {
+  position: absolute;
+  top: -10px;
+  right: 40px;
+  height: 20px;
+  z-index: 90;
+  font-size: 12px;
+}
+.field-repeater li.field-repeater-item .repeater-item-collapse a {
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  color: #000000;
+  opacity: 0.5;
+  line-height: 20px;
+  margin: 0 10px;
+  display: block;
+  float: left;
+}
+.field-repeater li.field-repeater-item .repeater-item-collapse a:hover,
+.field-repeater li.field-repeater-item .repeater-item-collapse a:focus {
+  opacity: 0.7;
+  text-decoration: none;
+}
+.field-repeater li.field-repeater-item .repeater-item-collapsed-title {
+  display: none;
+  top: -7px;
+  position: absolute;
+}
 .field-repeater li.field-repeater-item .field-repeater-form {
   position: relative;
   top: -7px;

modules/backend/formwidgets/repeater/assets/js/repeater.js

@@ -34,6 +34,11 @@
     Repeater.prototype.init = function() {
         // Init with no arguments
         this.bindSorting()
+
+        var self = this
+        this.$el.on('click', '.repeater-item-collapse-one', self.toggleCollapse)
+        this.$el.on('click', '.repeater-collapse-all', self.collapseAll)
+        this.$el.on('click', '.repeater-expand-all', self.expandAll)
     }
 
     Repeater.prototype.bindSorting = function() {
@@ -50,6 +55,46 @@
         this.$el.removeData('oc.repeater')
     }
 
+    Repeater.prototype.toggleCollapse = function() {
+        var $item = $(this).closest('.field-repeater-item')
+
+        if ($item.hasClass('collapsed')) {
+            Repeater.prototype.expand($item)
+        } else {
+            Repeater.prototype.collapse($item)
+        }
+    }
+
+    Repeater.prototype.collapseAll = function() {
+        var items = $(this).closest('.field-repeater').find('.field-repeater-item')
+
+        $.each(items, function(key, item){
+            Repeater.prototype.collapse($(item))
+        })
+    }
+
+    Repeater.prototype.expandAll = function() {
+        var items = $(this).closest('.field-repeater').find('.field-repeater-item')
+
+        $.each(items, function(key, item){
+            Repeater.prototype.expand($(item))
+        })
+    }
+
+    Repeater.prototype.collapse = function($item) {
+        $item.addClass('collapsed')
+
+        var $textInput = $item.find('input[type=text]').first()
+        if($textInput.length) {
+            $item.find('.repeater-item-collapsed-title').text($textInput.val());
+        }
+    }
+
+    Repeater.prototype.expand = function($item) {
+        $item.removeClass('collapsed')
+    }
+
+
     // FIELD REPEATER PLUGIN DEFINITION
     // ============================
 

modules/backend/formwidgets/repeater/assets/less/repeater.less

@@ -4,6 +4,30 @@
 
     padding-top: 5px;
 
+    .field-repeater-buttons {
+        text-align: right;
+        margin-bottom: 10px;
+        margin-top: -15px;
+        font-size: 12px;
+
+        * {
+            text-align: left;
+        }
+
+        a {
+            color: #000000;
+            opacity: 0.5;
+            line-height: 20px;
+            margin:0 10px;
+            display: inline-block;
+        }
+        a:hover,
+        a:focus {
+            opacity: 0.7;
+            text-decoration: none;
+        }
+    }
+
     ul.field-repeater-items,
     li.field-repeater-item {
         padding: 0;
@@ -48,6 +72,9 @@
         margin-left: 5px;
         padding-left: 15px;
         border-left: 1px solid #dbdee0;
+        min-height: 30px;
+        -webkit-transition: all 0.5s;
+        transition: all 0.5s;
 
         &:before {
             color: #bdc3c7;
@@ -58,6 +85,55 @@
             top: -2px;
         }
 
+        &.collapsed {
+            .field-repeater-form {
+                display:none;
+            }
+
+            .repeater-item-collapse {
+                .repeater-item-collapse-one {
+                    .transform(scale(1,-1));
+                }
+            }
+
+            .repeater-item-collapsed-title{
+                display: block;
+            }
+        }
+
+        .repeater-item-collapse {
+            position: absolute;
+            top: -10px;
+            right: 40px;
+            height: 20px;
+            z-index: 90;
+            font-size: 12px;
+
+            a,
+            button {
+                -webkit-transition: all 0.3s;
+                transition: all 0.3s;
+                color: #000000;
+                opacity: 0.5;
+                line-height: 20px;
+                margin:0 10px;
+                display: block;
+                float: left;
+
+                &:hover,
+                &:focus {
+                    opacity: 0.7;
+                    text-decoration: none;
+                }
+            }
+        }
+
+        .repeater-item-collapsed-title{
+            display: none;
+            top: -7px;
+            position: absolute;
+        }
+
         .field-repeater-form {
             position: relative;
             top: -7px;

modules/backend/formwidgets/repeater/partials/_repeater.htm

@@ -3,6 +3,16 @@
      data-sortable-container="#<?= $this->getId('items') ?>"
      data-sortable-handle=".<?= $this->getId('items') ?>-handle">
 
+    <div class="field-repeater-buttons">
+        <a href="javascript:;" class="item repeater-collapse-all">
+            <?= e(trans('backend::lang.dashboard.collapse_all')) ?>
+        </a>
+
+        <a href="javascript:;" class="item repeater-expand-all">
+            <?= e(trans('backend::lang.dashboard.expand_all')) ?>
+        </a>
+    </div>
+
     <ul id="<?= $this->getId('items') ?>" class="field-repeater-items">
         <?php foreach ($this->formWidgets as $index => $widget): ?>
             <?= $this->makePartial('repeater_item', [

modules/backend/formwidgets/repeater/partials/_repeater_item.htm

@@ -17,6 +17,14 @@
         </button>
     </div>
 
+    <div class="repeater-item-collapse">
+        <a href="javascript:;" class="repeater-item-collapse-one">
+            <i class="icon-chevron-up"></i>
+        </a>
+    </div>
+
+    <div class="repeater-item-collapsed-title"></div>
+
     <div class="field-repeater-form"
          data-control="formwidget"
          data-refresh-handler="<?= $this->getEventHandler('onRefresh') ?>"

modules/backend/lang/en/lang.php

@@ -78,6 +78,8 @@ return [
         'make_default' => 'Make default',
         'make_default_confirm' => 'Set the current layout as the default?',
         'make_default_success' => 'Current layout is now the default',
+        'collapse_all' => 'Collapse all',
+        'expand_all' => 'Expand all',
         'status' => [
             'widget_title_default' => 'System status',
             'update_available' => '{0} updates available!|{1} update available!|[2,Inf] updates available!',