diff --git a/modules/backend/formwidgets/repeater/assets/css/repeater.css b/modules/backend/formwidgets/repeater/assets/css/repeater.css index 83d80d0fc..0c58d3497 100644 --- a/modules/backend/formwidgets/repeater/assets/css/repeater.css +++ b/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; diff --git a/modules/backend/formwidgets/repeater/assets/js/repeater.js b/modules/backend/formwidgets/repeater/assets/js/repeater.js index 005b5e8ee..5d98fc86d 100644 --- a/modules/backend/formwidgets/repeater/assets/js/repeater.js +++ b/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 // ============================ diff --git a/modules/backend/formwidgets/repeater/assets/less/repeater.less b/modules/backend/formwidgets/repeater/assets/less/repeater.less index 5be2689d9..8262bc0c0 100644 --- a/modules/backend/formwidgets/repeater/assets/less/repeater.less +++ b/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; diff --git a/modules/backend/formwidgets/repeater/partials/_repeater.htm b/modules/backend/formwidgets/repeater/partials/_repeater.htm index 59cba2994..e95856dba 100644 --- a/modules/backend/formwidgets/repeater/partials/_repeater.htm +++ b/modules/backend/formwidgets/repeater/partials/_repeater.htm @@ -3,6 +3,16 @@ data-sortable-container="#= $this->getId('items') ?>" data-sortable-handle=".= $this->getId('items') ?>-handle"> +
+