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()
}
}
+ $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;
}
}
$this->setAttribute('bunchfields', $crudfields);
}
+
}
return !!$this->getAttribute('column');
}
+
public function getColumnData()
{
$this->_postSetAttributes();
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
-{"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
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();
},
};
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);
+};
}
}
- .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;
+ }
+ }
}
+
}
}
$value = json_encode($value);
}
-$unique = 'bunchmultiple_' . rand(1, 100000);
?>
-<div class="bunchmultiple col-xs-12" id="{!! $unique !!}" data-values="{!! $value !!}">
+<div class="bunchmultiple col-xs-12" id="{!! $field['rand'] !!}" data-values="{{ $value }}">
+ <input type="hidden" class="hiddenfield" name="{{$field['name']}}" value=""/>
<div class="bunchmultiple__wrapper col-xs-12">
<div @include('crud::inc.field_wrapper_attributes') >
<label>{!! $field['label'] !!}</label>
<div class="bunchmultiple__items">
<div class="item sample">
- <div class="legend">move Editer +-</div>
- @include('cubist_back::inc.show_bunch_fields', array('bunchfields'=>$field['bunchfields']))
+ <div class="legend">
+ <a href="#" class="action sort-handle"><i class="fa fa-sort" role="presentation"
+ aria-hidden="true"></i></a>
+ <span data-legend="{{$field['edit_label']}}"></span>
+ <a href="#" class="action remove"><i class="fa fa-trash" role="presentation"
+ aria-hidden="true"></i></a>
+ </div>
+ <div class="subform">
+ @include('cubist_back::inc.show_bunch_fields', array('bunchfields'=>$field['bunchfields']))
+ </div>
</div>
</div>
+ <div class="btn-group m-t-10">
+ <button class="btn btn-sm btn-default additem" type="button"><i
+ class="fa fa-plus"></i> {{$field['add_label']}}</button>
+ </div>
+
<div class="clearfix"></div>
{{-- HINT --}}
{{-- FIELD CSS - will be loaded in the after_styles section --}}
@push('crud_fields_styles')
- <link rel="stylesheet" type="text/css" href="{{ vendor_asset('vendor/cubist/cms-back/bunchmultiple/bunchmultiple.css') }}">
+ <link rel="stylesheet" type="text/css"
+ href="{{ vendor_asset('vendor/cubist/cms-back/bunchmultiple/bunchmultiple.css') }}">
@endpush
{{-- FIELD JS - will be loaded in the after_scripts section --}}
@push('crud_fields_scripts')
- <script type="text/javascript" src="{{ vendor_asset('vendor/cubist/cms-back/bunchmultiple/bunchmultiple.js') }}"></script>
+ <script type="text/javascript"
+ src="{{ vendor_asset('vendor/cubist/cms-back/bunchmultiple/bunchmultiple.js') }}"></script>
@endpush
@endif
<script
src="{{ asset('vendor/gaspertrix/laravel-backpack-dropzone-field/dropzone/dropzone.min.js') }}"></script>
<script
- src="{{ asset('vendor/gaspertrix/laravel-backpack-dropzone-field/sortable/Sortable.min.js') }}"></script>
+ src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.9.0/Sortable.js"></script>
@endpush
@endif
projects / cubist_cms-back.git / commitdiff