From 6a1b7b96758fee30372430dea51caac81090eb77 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 26 Jun 2019 18:41:11 +0200 Subject: [PATCH] #2843 --- .../Magic/Fields/BunchOfFieldsMultiple.php | 15 ++- src/app/Magic/Fields/Field.php | 1 + src/public/bunchmultiple/bunchmultiple.css | 43 +++++- .../bunchmultiple/bunchmultiple.css.map | 2 +- src/public/bunchmultiple/bunchmultiple.js | 127 +++++++++++++++++- src/public/bunchmultiple/bunchmultiple.less | 58 +++++++- .../views/fields/bunch_multiple.blade.php | 27 +++- .../views/fields/dropzone_media.blade.php | 2 +- 8 files changed, 259 insertions(+), 16 deletions(-) diff --git a/src/app/Magic/Fields/BunchOfFieldsMultiple.php b/src/app/Magic/Fields/BunchOfFieldsMultiple.php index fd0c188..c81fbe3 100644 --- a/src/app/Magic/Fields/BunchOfFieldsMultiple.php +++ b/src/app/Magic/Fields/BunchOfFieldsMultiple.php @@ -15,13 +15,20 @@ class BunchOfFieldsMultiple extends BunchOfFields public function getDefaultAttributes() { - return array_merge(parent::getDefaultAttributes(), ['bunch' => []]); + return array_merge(parent::getDefaultAttributes(), ['bunch' => [], "add_label" => 'Ajouter un élément']); } public function _postSetAttributes() { parent::_postSetAttributes(); $this->_setBunchOfFields(); + + foreach ($this->_fields as $field) { + $first = $field->getAttribute('name'); + break; + } + + $this->setAttribute('edit_label', 'Éditer « %' . $first . ' »'); } protected function _setBunchOfFields() @@ -46,12 +53,15 @@ class BunchOfFieldsMultiple extends BunchOfFields } } + $rand = 'bunchmultiple_' . rand(1, 10000000); + $this->setAttribute('rand', $rand); + $crudfields = []; foreach ($this->_fields as $field) { $name = $field->getAttribute('name'); $e = explode('[', $name); $main = array_shift($e); - $name = $this->getAttribute('name') . '___' . $main; + $name = $rand . '___' . $main; foreach ($e as $item) { $name .= '___' . $item; } @@ -60,4 +70,5 @@ class BunchOfFieldsMultiple extends BunchOfFields } $this->setAttribute('bunchfields', $crudfields); } + } diff --git a/src/app/Magic/Fields/Field.php b/src/app/Magic/Fields/Field.php index dde0ce4..40dfbc4 100644 --- a/src/app/Magic/Fields/Field.php +++ b/src/app/Magic/Fields/Field.php @@ -141,6 +141,7 @@ class Field implements \ArrayAccess return !!$this->getAttribute('column'); } + public function getColumnData() { $this->_postSetAttributes(); diff --git a/src/public/bunchmultiple/bunchmultiple.css b/src/public/bunchmultiple/bunchmultiple.css index e222651..9e26622 100644 --- a/src/public/bunchmultiple/bunchmultiple.css +++ b/src/public/bunchmultiple/bunchmultiple.css @@ -11,7 +11,48 @@ font-size: 1.2em; margin-bottom: 24px; } -.bunchmultiple .bunchmultiple__wrapper .sample { +.bunchmultiple .bunchmultiple__wrapper .item { + margin-bottom: 10px; +} +.bunchmultiple .bunchmultiple__wrapper .item.ghost .legend { + background-color: #333; + color: #fff; +} +.bunchmultiple .bunchmultiple__wrapper .item.ghost .legend a.action { + color: #fff; +} +.bunchmultiple .bunchmultiple__wrapper .item.ghost .subform { + color: #fff; + background-color: #333; +} +.bunchmultiple .bunchmultiple__wrapper .item .legend { + background-color: #eaeaea; + padding: 8px 18px; + font-weight: 700; + position: relative; +} +.bunchmultiple .bunchmultiple__wrapper .item .legend a.action { + color: #333; + font-size: 1.2em; +} +.bunchmultiple .bunchmultiple__wrapper .item .legend a.action.sort-handle { + padding: 0 20px 0 0; +} +.bunchmultiple .bunchmultiple__wrapper .item .legend a.action.remove { + position: absolute; + right: 20px; +} +.bunchmultiple .bunchmultiple__wrapper .item .subform { + overflow: hidden; + transition: height 250ms, padding-top 250ms, padding-bottom 250ms; + background-color: #f3f3f3; + padding: 10px 0; +} +.bunchmultiple .bunchmultiple__wrapper .item.sample { display: none; } +.bunchmultiple .bunchmultiple__wrapper .item.collapsed > .subform { + height: 0 !important; + padding: 0; +} /*# sourceMappingURL=bunchmultiple.css.map */ \ No newline at end of file diff --git a/src/public/bunchmultiple/bunchmultiple.css.map b/src/public/bunchmultiple/bunchmultiple.css.map index 32c5f7f..8eed2b1 100644 --- a/src/public/bunchmultiple/bunchmultiple.css.map +++ b/src/public/bunchmultiple/bunchmultiple.css.map @@ -1 +1 @@ -{"version":3,"sources":["bunchmultiple.less"],"names":[],"mappings":"AAAA,cACI;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;;AALR,cACI,wBAMI;EACI,UAAA;;AARZ,cACI,wBAMI,cAGI;EACI,gBAAA;EACA,mBAAA;;AAZhB,cACI,wBAeI;EACI,aAAA","file":"bunchmultiple.css"} \ No newline at end of file +{"version":3,"sources":["bunchmultiple.less"],"names":[],"mappings":"AAAA,cACI;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;;AALR,cACI,wBAMI;EACI,UAAA;;AARZ,cACI,wBAMI,cAGI;EACI,gBAAA;EACA,mBAAA;;AAZhB,cACI,wBAeI;EACI,mBAAA;;AAEA,cAlBR,wBAeI,MAGK,MACG;EACI,sBAAA;EACA,WAAA;;AAHR,cAlBR,wBAeI,MAGK,MACG,QAGI,EAAC;EACG,WAAA;;AALZ,cAlBR,wBAeI,MAGK,MASG;EACI,WAAA;EACA,sBAAA;;AA9BpB,cACI,wBAeI,MAkBI;EACI,yBAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;;AAtChB,cACI,wBAeI,MAkBI,QAMI,EAAC;EACG,WAAA;EACA,gBAAA;;AAEA,cA3ChB,wBAeI,MAkBI,QAMI,EAAC,OAII;EACG,mBAAA;;AAEJ,cA9ChB,wBAeI,MAkBI,QAMI,EAAC,OAOI;EACG,kBAAA;EACA,WAAA;;AAjDxB,cACI,wBAeI,MAsCI;EACI,gBAAA;EACA,iEAAA;EACA,yBAAA;EACA,eAAA;;AAGJ,cA5DR,wBAeI,MA6CK;EACG,aAAA;;AAGJ,cAhER,wBAeI,MAiDK,UACG;EACI,oBAAA;EACA,UAAA","file":"bunchmultiple.css"} \ No newline at end of file diff --git a/src/public/bunchmultiple/bunchmultiple.js b/src/public/bunchmultiple/bunchmultiple.js index d255e1a..311ebc2 100644 --- a/src/public/bunchmultiple/bunchmultiple.js +++ b/src/public/bunchmultiple/bunchmultiple.js @@ -7,18 +7,125 @@ JQbunchmultiple.prototype = { init: function () { var $this = this; - var initValues = this.data('values'); + + var initValues = this.element.data('values'); $.each(initValues, function (k, v) { $this.initItem(v); }); + if (initValues.length === 0) { - this.initItem({}); + this.initItem(); + } + + this.element.on('click', '.additem', function () { + $this.initItem(); + return false; + }); + + this.element.on('click', '.legend', function () { + var item = $(this).closest('.item'); + var subform = item.find('.subform'); + if (!item.hasClass('collapsed')) { + subform.css('height', subform.outerHeight()); + setTimeout(function () { + item.addClass('collapsed'); + }, 10); + } else { + item.removeClass('collapsed'); + } + return false; + }); + + this.initSort(); + + this.element.on('change', 'input,select,textarea', function () { + $this.update(); + return true; + }); + + this.element.on('keyup', 'input,select,textarea', function () { + $this.updateLegends(); + return true; + }); + }, + + update: function () { + this.serialize(); + this.updateLegends(); + }, + + serialize: function () { + var val = []; + var $this = this; + var id = this.element.attr('id'); + $.each(this.element.find('.item:not(.sample) .subform'), function () { + var data = $(this).find(':input').serializeArray(); + var filteredData = {}; + $.each(data, function (k, v) { + var name = v.name.replace(id + '___', ''); + filteredData[name] = v.value; + }); + + val.push(filteredData); + }); + + this.element.find('.hiddenfield').val(JSON.stringify(val)); + }, + + updateLegends: function () { + $('[data-legend]').each(function () { + var item = $(this).closest('.item'); + var form = item.find('.subform'); + var txt = $(this).data('legend').replace(/\%([a-zA-Z0-9_]+)/gm, function (match, varname) { + return form.find('[name="' + varname + '"]').val(); + }); + $(this).text(txt); + }); + }, + + onSort: function (e) { + this.update(); + }, + + initSort: function () { + var $this = this; + if (window.Sortable === undefined) { + $.cachedScript("https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.9.0/Sortable.js").done(function () { + $this.initSort(); + }); + return; } + + new Sortable(this.element.find('.bunchmultiple__items').get(0), { + handle: '.sort-handle', + ghostClass: 'ghost', + onSort: function (evt) { + $this.onSort(evt); + }, + }); }, initItem: function (values) { - var item = this.element.find('.sample').clone(); + var collapsed = true; + if (values === undefined) { + values = []; + collapsed = false; + } + var item = this.element.find('.sample').clone(true); + $(item).removeClass('sample'); + if (collapsed) { + $(item).addClass('collapsed'); + } $(".bunchmultiple__items").append($(item)); + this.setValues(item, values); + }, + + setValues(item, values) { + var id = this.element.attr('id'); + $.each(values, function (k, v) { + $(item).find('[name="' + id + '___' + k + '"]').val(v); + }); + this.updateLegends(); }, }; @@ -35,3 +142,17 @@ jQuery(document).ready(function ($) { $(".bunchmultiple").bunchmultiple(); }); + +jQuery.cachedScript = function (url, options) { + + // Allow user to set any option except for dataType, cache, and url + options = $.extend(options || {}, { + dataType: "script", + cache: true, + url: url + }); + + // Use $.ajax() since it is more flexible than $.getScript + // Return the jqXHR object so we can chain callbacks + return jQuery.ajax(options); +}; diff --git a/src/public/bunchmultiple/bunchmultiple.less b/src/public/bunchmultiple/bunchmultiple.less index 05fb41f..f67feec 100644 --- a/src/public/bunchmultiple/bunchmultiple.less +++ b/src/public/bunchmultiple/bunchmultiple.less @@ -14,9 +14,63 @@ } } - .sample { - display: none; + .item { + margin-bottom: 10px; + + &.ghost{ + .legend{ + background-color: #333; + color:#fff; + a.action{ + color:#fff; + } + } + + .subform{ + color:#fff; + background-color: #333; + } + } + + .legend { + background-color: #eaeaea; + padding: 8px 18px; + font-weight: 700; + position: relative; + + a.action { + color: #333; + font-size: 1.2em; + + &.sort-handle { + padding:0 20px 0 0; + } + &.remove{ + position: absolute; + right: 20px; + } + } + } + + .subform { + overflow: hidden; + transition: height 250ms,padding-top 250ms, padding-bottom 250ms; + background-color: #f3f3f3; + padding:10px 0; + } + + &.sample { + display: none; + } + + &.collapsed { + > .subform { + height: 0 !important; + padding: 0; + } + } } + } } diff --git a/src/resources/views/fields/bunch_multiple.blade.php b/src/resources/views/fields/bunch_multiple.blade.php index 58bbc60..d3033f3 100644 --- a/src/resources/views/fields/bunch_multiple.blade.php +++ b/src/resources/views/fields/bunch_multiple.blade.php @@ -11,10 +11,10 @@ if (!is_string($value)) { $value = json_encode($value); } -$unique = 'bunchmultiple_' . rand(1, 100000); ?> -
+
+
@@ -23,11 +23,24 @@ $unique = 'bunchmultiple_' . rand(1, 100000);
-
move Editer +-
- @include('cubist_back::inc.show_bunch_fields', array('bunchfields'=>$field['bunchfields'])) +
+ + + +
+
+ @include('cubist_back::inc.show_bunch_fields', array('bunchfields'=>$field['bunchfields'])) +
+
+ +
+
{{-- HINT --}} @@ -46,12 +59,14 @@ $unique = 'bunchmultiple_' . rand(1, 100000); {{-- FIELD CSS - will be loaded in the after_styles section --}} @push('crud_fields_styles') - + @endpush {{-- FIELD JS - will be loaded in the after_scripts section --}} @push('crud_fields_scripts') - + @endpush @endif diff --git a/src/resources/views/fields/dropzone_media.blade.php b/src/resources/views/fields/dropzone_media.blade.php index 64f0c42..a5bbfe1 100644 --- a/src/resources/views/fields/dropzone_media.blade.php +++ b/src/resources/views/fields/dropzone_media.blade.php @@ -74,7 +74,7 @@ + src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.9.0/Sortable.js"> @endpush @endif -- 2.39.5