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
field-settings.js
136 lines
| 1 | import Backbone from 'backbone'; |
| 2 | import wp from 'wp'; |
| 3 | import $ from 'jquery'; |
| 4 | |
| 5 | export default Backbone.View.extend({ |
| 6 | |
| 7 | className: 'pp-form-buider-settings-popup-container', |
| 8 | |
| 9 | iconPickerTemplate: wp.template('pp-form-builder-material-icon'), |
| 10 | |
| 11 | events: { |
| 12 | //"click": "cancel_settings_outside", |
| 13 | "click .pp-form-cancel-btn": "cancel_settings", |
| 14 | "click .pp-form-buider-settings-popup-tab-menu": "switch_tab", |
| 15 | "click .pp-form-save-btn": "save_changes", |
| 16 | "click .pp-form-control-icon-picker": "icon_picker", |
| 17 | "keyup input[name=label].pp-form-control": "make_label_placeholder", |
| 18 | }, |
| 19 | |
| 20 | initialize(options) { |
| 21 | if (typeof options.fieldType === 'undefined') throw new Error('Field Type required'); |
| 22 | this.options = options; |
| 23 | _.bindAll(this, 'switch_tab'); |
| 24 | _.bindAll(this, 'save_changes'); |
| 25 | _.bindAll(this, 'icon_picker'); |
| 26 | }, |
| 27 | |
| 28 | icon_picker(e) { |
| 29 | e.preventDefault(); |
| 30 | |
| 31 | const _this = this; |
| 32 | const origin_button = $(e.target); |
| 33 | |
| 34 | const instance = _this.jboxInstance = new jBox('Modal', { |
| 35 | title: $('#pp-form-material-icon-picker-tmpl-title').html(), |
| 36 | maxWidth: 600, |
| 37 | zIndex: 999999999, |
| 38 | addClass: 'pp-icon-picker-jbox-wrap', |
| 39 | overlayClass: 'pp-icon-picker-jbox-overlay', |
| 40 | animation: 'zoomIn', |
| 41 | content: $('#pp-form-material-icon-picker-tmpl'), |
| 42 | onOpen: function () { |
| 43 | let hidden_input = $('input.pp-form-control', origin_button.parent()); |
| 44 | let hidden_input_val = hidden_input.val(); |
| 45 | |
| 46 | const cache = $('#pp-form-material-icon-picker-tmpl'); |
| 47 | cache.find('.pp-form-material-icon-wrap').removeClass('pp-active'); |
| 48 | |
| 49 | if (hidden_input_val !== "") { |
| 50 | cache.find('.pp-form-material-icon-wrap[data-material-icon="' + hidden_input_val + '"]').addClass('pp-active'); |
| 51 | } |
| 52 | |
| 53 | $('.pp-form-material-icon-wrap').on('click', function () { |
| 54 | let icon = $(this).data('material-icon'); |
| 55 | origin_button.html(_this.iconPickerTemplate({icon})); |
| 56 | hidden_input.val(icon); |
| 57 | _this.jboxInstance.close(); |
| 58 | }); |
| 59 | } |
| 60 | }); |
| 61 | |
| 62 | instance.open(); |
| 63 | }, |
| 64 | |
| 65 | save_changes(e) { |
| 66 | e.preventDefault(); |
| 67 | let _this = this; |
| 68 | |
| 69 | $('.pp-form-control').each(function () { |
| 70 | let key = $(this).attr('name'), |
| 71 | value = $(this).val(); |
| 72 | if ($(this).attr('type') === 'checkbox') { |
| 73 | value = this.checked; |
| 74 | } |
| 75 | |
| 76 | if (typeof key === 'undefined') return; |
| 77 | |
| 78 | _this.options.model.set(key, value); |
| 79 | }); |
| 80 | |
| 81 | if ($('#label', this.$el).length > 0) { |
| 82 | _this.options.model.set('fieldBarTitle', $('#label', this.$el).val()); |
| 83 | } else { |
| 84 | _this.options.model.set('fieldBarTitle', $('#placeholder', this.$el).val()); |
| 85 | } |
| 86 | |
| 87 | _this.remove(); |
| 88 | }, |
| 89 | |
| 90 | switch_tab(e) { |
| 91 | e.preventDefault(); |
| 92 | $('.pp-form-buider-settings-popup-tab-menu', this.$el).removeClass('active'); |
| 93 | $(e.target).addClass('active'); |
| 94 | |
| 95 | $('.pp-form-buider-settings-popup-tab-content', this.$el).hide(); |
| 96 | $($(e.target).attr('href')).show(); |
| 97 | }, |
| 98 | |
| 99 | make_label_placeholder(e) { |
| 100 | e.preventDefault(); |
| 101 | var cache = $('input[name=placeholder]', this.$el); |
| 102 | if (this.$el.data('make_label_placeholder_flag') !== true) { |
| 103 | this.$el.data('make_label_placeholder_flag', cache.val() === ''); |
| 104 | } |
| 105 | |
| 106 | if (this.$el.data('make_label_placeholder_flag') === true) { |
| 107 | cache.val($(e.target).val()); |
| 108 | } |
| 109 | }, |
| 110 | |
| 111 | cancel_settings_outside(e) { |
| 112 | if (e.target == this.el) { |
| 113 | this.remove(); |
| 114 | } |
| 115 | }, |
| 116 | |
| 117 | cancel_settings(e) { |
| 118 | e.preventDefault(); |
| 119 | this.remove(); |
| 120 | }, |
| 121 | |
| 122 | render() { |
| 123 | let fieldType = this.options.fieldType.indexOf('reg-cpf') !== -1 ? 'reg-cpf' : this.options.fieldType; |
| 124 | fieldType = fieldType.indexOf('edit-profile-cpf') !== -1 ? 'edit-profile-cpf' : fieldType; |
| 125 | let definedFieldType = this.options.model.get('definedFieldType'); |
| 126 | |
| 127 | if (typeof definedFieldType !== 'undefined') { |
| 128 | fieldType = fieldType + '-' + definedFieldType; |
| 129 | } |
| 130 | |
| 131 | const tmpl = wp.template('pp-form-builder-popup-settings-' + fieldType); |
| 132 | this.$el.html(tmpl(this.options.model.toJSON())); |
| 133 | $('.pp-form-buider-settings-popup-tab-menu', this.$el).eq(0).addClass('active'); |
| 134 | $('.pp-form-buider-settings-popup-tab-content', this.$el).hide().eq(0).show(); |
| 135 | } |
| 136 | }); |