field-bar.js
2 months ago
field-settings.js
2 months ago
main-layout.js
2 months ago
metabox.js
2 months ago
sidebar-layout.js
2 months ago
main-layout.js
82 lines
| 1 | import Backbone from 'backbone'; |
| 2 | import FieldBarView from './field-bar'; |
| 3 | import $ from 'jquery'; |
| 4 | import Util from '../util'; |
| 5 | |
| 6 | export default Backbone.View.extend({ |
| 7 | |
| 8 | el: '#pp-form-builder', |
| 9 | |
| 10 | initialize() { |
| 11 | |
| 12 | _.bindAll(this, 'update_sort_index'); |
| 13 | _.bindAll(this, 'addFieldOnDrop'); |
| 14 | |
| 15 | this.listenTo(this.collection, 'add', this.render); |
| 16 | this.listenTo(this.collection, 'remove', this.render); |
| 17 | this.listenTo(this.collection, 'pp_fieldBarTitle_changed', this.render); |
| 18 | }, |
| 19 | |
| 20 | initSortable() { |
| 21 | this.$el.sortable({ |
| 22 | items: ".pp-builder-element", |
| 23 | cursor: "move", |
| 24 | placeholder: "pp-form-builder-drag-bg", |
| 25 | update: this.update_sort_index, |
| 26 | receive: this.addFieldOnDrop |
| 27 | }); |
| 28 | }, |
| 29 | |
| 30 | addFieldOnDrop(event, ui) { |
| 31 | |
| 32 | let position, previousFieldBarModelCID; |
| 33 | |
| 34 | if (ui.helper.prev().length === 0 || typeof ui.helper.prev().data('modelCID') === 'undefined') { |
| 35 | position = 0; |
| 36 | } |
| 37 | else { |
| 38 | previousFieldBarModelCID = ui.helper.prev().data('modelCID'); |
| 39 | position = this.collection.get(previousFieldBarModelCID).get('sortID'); |
| 40 | } |
| 41 | |
| 42 | let fieldType = ui.helper.find('a').data('field-type'); |
| 43 | let fieldCategory = ui.helper.find('a').data('field-category'); |
| 44 | |
| 45 | Util.addField(fieldType, fieldCategory, this.collection, position); |
| 46 | |
| 47 | this.update_sort_index(); |
| 48 | |
| 49 | // remove the redundant helper/clone representing the draggable. |
| 50 | ui.helper.remove(); |
| 51 | }, |
| 52 | |
| 53 | update_sort_index() { |
| 54 | let collection = this.collection; |
| 55 | $('.pp-builder-form-content .pp-builder-element').each(function (index) { |
| 56 | index++; |
| 57 | let cid = $(this).data('modelCID'); |
| 58 | collection.get(cid).set('sortID', index); |
| 59 | }); |
| 60 | |
| 61 | collection.sort(); |
| 62 | }, |
| 63 | |
| 64 | render() { |
| 65 | |
| 66 | let formSettings = this.collection; |
| 67 | |
| 68 | let output = []; |
| 69 | formSettings.each(function (formSetting) { |
| 70 | const field = new FieldBarView({ |
| 71 | model: formSetting, |
| 72 | collection: formSettings |
| 73 | }); |
| 74 | field.render(); |
| 75 | output.push(field.el); |
| 76 | }); |
| 77 | |
| 78 | this.$el.find('.pp-form-builder-body .pp-builder-form-content').html(output); |
| 79 | |
| 80 | this.initSortable(); |
| 81 | } |
| 82 | }); |