From e5e2fec73539f040d58611d9182129eab7d5cadd Mon Sep 17 00:00:00 2001 From: Anton Andrushenko Date: Fri, 14 Apr 2017 18:22:33 +0300 Subject: [PATCH 1/2] modify options for select, multi-select and checkbox fields --- assets/jcforms-multifield.css | 87 +++++++++++ assets/jcforms-multifield.js | 147 ++++++++++++++++++ components/checkbox/JustField_Checkbox.php | 90 ++++++----- components/select/JustField_Select.php | 88 ++++++----- .../JustField_SelectMultiple.php | 80 ++++++---- controllers/AdminController.php | 8 + core/JustField.php | 28 ++++ 7 files changed, 420 insertions(+), 108 deletions(-) create mode 100644 assets/jcforms-multifield.css create mode 100644 assets/jcforms-multifield.js diff --git a/assets/jcforms-multifield.css b/assets/jcforms-multifield.css new file mode 100644 index 0000000..fa7f74a --- /dev/null +++ b/assets/jcforms-multifield.css @@ -0,0 +1,87 @@ +.jcmf-multi-field { + font-size: 16px; + padding: 0 0 50px 0; + position: relative; + box-sizing: border-box; +} +.jcmf-form-item { + padding: 5px 20px; + position: relative; + overflow: hidden; +} +.jcmf-form-item.has-error { + border-bottom: 2px solid #d00; + background: #ffdada; +} +.jcmf-remove-input { + position: absolute; + right: 10px; + top: 10px; + cursor: pointer; + color: #444; +} +.jcmf-add-input-btn { + background-color: #f5f5f5; + position: absolute; + bottom: 10px; +} +.jcmf-btn { + display: inline-block; + padding: 6px 12px; + font-size: 14px; + line-height: 1.5; + text-align: center; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 4px; +} +.cols .jcmf-input { + float: left; + margin-right: 1%; +} +.col-2 .jcmf-input { width: 48.9%; } +.col-3 .jcmf-input { width: 31.9%; } +.col-4 .jcmf-input { width: 23.9%; } +.col-5 .jcmf-input { width: 18.9%; } +.col-6 .jcmf-input { width: 14.9%; } +.col-7 .jcmf-input { width: 12.9%; } +.col-8 .jcmf-input { width: 11.5%; margin-right: 0.5%; } +.col-9 .jcmf-input { width: 10.5%; margin-right: 0.5%; } +.col-10 .jcmf-input { width: 9%; margin-right: 0.5%; } + +.jcmf-input { + display: block; +} +input.jcmf-input { + border:1px solid #ddd; + border-bottom: 2px solid #558; + padding: 3px 10px; + color:#333; +} +select.jcmf-input { + color:#333; + border:1px solid #ddd; + border-bottom: 2px solid #556; + height: 29px; +} +textarea.jcmf-input { + color:#333; + height:auto; + min-height: 30px; +} +.jcmf-multi-field .handle { + position: absolute; + left: 0; + top: 25px; + transform: translateY(-50%); + width: 18px; + height: 32px; + background-color: #f3f3f3; + display: block; +} +.jcmf-multi-field .handle.sortable { + background-color: #b3b3b3; + cursor: move; +} diff --git a/assets/jcforms-multifield.js b/assets/jcforms-multifield.js new file mode 100644 index 0000000..9c15ff0 --- /dev/null +++ b/assets/jcforms-multifield.js @@ -0,0 +1,147 @@ +jQuery(function($) { + + /** + * Justcoded Form elements editor plugin + * @return {Object} - DOM element + */ + $.fn.jcMultiField = function(options) { + var counter = 0; + + var settings = $.extend({ + addButton: { class: 'jcmf-btn' }, + removeButton: { class: 'jcmf-btn-remove' }, + dragHandler: { class: 'jcmf-handle' } + }, options); + + var $el = this, + $addInputBtn = $(''), + $row = $('
'); + + /** + * Add inputs and add button elements to page and add events + */ + var init = function() { + $el.addClass('jcmf-multi-field'); + + if ( ( 'object' != typeof(settings.data) ) || settings.data.length == 0 ) { + settings.data = []; + settings.data.push( {} ); + } + + addRows(); + + $el.append($addInputBtn); + + //EVENTS + $el.on("click", 'button.jcmf-add-input-btn', function(e) { + e.preventDefault(); + addRow(); + }); + + $el.on("click", '.jcmf-remove-input', function(e) { + e.preventDefault(); + removeItem($(e.currentTarget).closest('.jcmf-form-item')); + }); + //check sortable row + $el.on("keyup", '.jcmf-input', function(e) { + e.preventDefault(); + checkSortableOrder($(e.currentTarget).closest('.jcmf-form-item')); + }); + } + + /** + * Append rows to module + */ + var addRows = function() { + var index = 0; + $.each(settings.data, function(i, d) { + addRow(index); + index++; + }); + } + + /** + * Create row, add inputs to row and append it to the module + * @param {[type]} index [description] + */ + var addRow = function(index) { + var row = $row.clone().addClass('cols col-' + settings.structure.length); + $el.append(row); + + $.each(settings.structure, function(i, d) { + var value = settings.data[index]? settings.data[index][d.name] : null; + var title = d.placeholder ? d.placeholder : ''; + + switch (d.type) { + case 'select': + var control = $(" -
label1|id1
label2|id2
label3', \JustCustomFields::TEXTDOMAIN); ?> + +
+ 'label', + 'placeholder' => 'Label', + 'type' => 'text', + ), + array( + 'name' => 'id', + 'placeholder' => 'ID', + 'type' => 'text', + ), + ); + ?> + +

@@ -107,36 +142,11 @@ public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); - $instance['settings'] = strip_tags($new_instance['settings']); + $instance['settings'] = $this->orderOptions($new_instance['settings']); $instance['description'] = strip_tags($new_instance['description']); return $instance; } - /** - * prepare list of options - * - * @param array $instance current instance - * @return array - */ - protected function parsedSelectOptions( $instance ) - { - $values = array(); - $v = explode("\n", $instance['settings']); - - foreach ( $v as $val ) { - $val = trim($val); - - if ( strpos($val, '|') !== FALSE ) { - $a = explode('|', $val); - $values[$a[0]] = $a[1]; - } - elseif ( !empty($val) ) { - $values[$val] = $val; - } - } - return $values; - } - /** * print fields values from shortcode */ diff --git a/components/select/JustField_Select.php b/components/select/JustField_Select.php index 39a7387..920839f 100644 --- a/components/select/JustField_Select.php +++ b/components/select/JustField_Select.php @@ -12,7 +12,6 @@ */ class JustField_Select extends core\JustField { - public function __construct() { $field_ops = array( 'classname' => 'field_select' ); @@ -25,7 +24,6 @@ public function __construct() */ public function field() { - $values = $this->parsedSelectOptions($this->instance); ?>

fieldOptions['before_widget']; ?> @@ -35,8 +33,8 @@ public function field() instance['empty_option'])) : ?> - $val ) : ?> - + instance['options'] as $val ) : ?> +
@@ -54,16 +52,59 @@ public function field() public function form() { //Defaults - $instance = wp_parse_args((array) $this->instance, array( 'title' => '', 'description' => '', 'options' => '', 'empty_option' => '' )); + $instance = + wp_parse_args( + (array) $this->instance, + array( 'title' => '', 'description' => '', 'options' => array(), 'empty_option' => '' ) + ); $title = esc_attr($instance['title']); - $options = esc_attr($instance['options']); + $options = $instance['options']; $description = esc_html($instance['description']); $empty_option = esc_attr($instance['empty_option']); ?>

-

- -
label1|id1
label2|id2
label3', \JustCustomFields::TEXTDOMAIN); ?>

+

+

+ 'label', + 'placeholder' => 'Label', + 'type' => 'text', + ), + array( + 'name' => 'id', + 'placeholder' => 'ID', + 'type' => 'text', + ), + ); + ?> + + +


@@ -75,6 +116,7 @@ public function form() */ public function save( $values ) { + $values = $values['val']; return $values; @@ -87,38 +129,12 @@ public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); - $instance['options'] = strip_tags($new_instance['options']); + $instance['options'] = $this->orderOptions($new_instance['options']); $instance['description'] = strip_tags($new_instance['description']); $instance['empty_option'] = strip_tags($new_instance['empty_option']); return $instance; } - /** - * prepare list of options - * - * @param array $instance current instance - * @return array - */ - public function parsedSelectOptions( $instance ) - { - $values = array(); - $settings = $instance['options']; - - $v = explode("\n", $settings); - foreach ( $v as $val ) { - $val = trim($val); - if ( empty($val) ) continue; - if ( strpos($val, '|') !== FALSE ) { - $a = explode('|', $val); - $values[$a[0]] = $a[1]; - } - elseif ( !empty($val) ) { - $values[$val] = $val; - } - } - - return $values; - } /** * print field values inside the shortcode diff --git a/components/selectmultiple/JustField_SelectMultiple.php b/components/selectmultiple/JustField_SelectMultiple.php index 17212f3..f5e9b4e 100644 --- a/components/selectmultiple/JustField_SelectMultiple.php +++ b/components/selectmultiple/JustField_SelectMultiple.php @@ -28,15 +28,14 @@ public function field() if ( !is_array($this->entry) ) $this->entry = array(); // prepare options array - $values = $this->parsedSelectOptions($this->instance); ?>
fieldOptions['before_widget']; ?> fieldOptions['before_title'] . esc_html($this->instance['title']) . $this->fieldOptions['after_title']; ?>
@@ -54,17 +53,58 @@ public function field() public function form() { //Defaults - $instance = wp_parse_args((array) $this->instance, array( 'title' => '', 'description' => '', 'settings' => '' )); + $instance = wp_parse_args((array) $this->instance, array( 'title' => '', 'description' => '', 'settings' => array() )); $title = esc_attr($instance['title']); - $options = esc_attr($instance['options']); + $options = $instance['options']; $description = esc_html($instance['description']); ?>

- -
label1|id1
label2|id2
label3', \JustCustomFields::TEXTDOMAIN); ?>

+
+ 'label', + 'placeholder' => 'Label', + 'type' => 'text', + ), + array( + 'name' => 'id', + 'placeholder' => 'ID', + 'type' => 'text', + ), + ); + ?> + + + + +

orderOptions($new_instance['options']); $instance['description'] = strip_tags($new_instance['description']); return $instance; } - /** - * prepare list of options - * - * @param array $instance current instance - */ - protected function parsedSelectOptions( $instance ) - { - $values = array(); - - $v = explode("\n", $instance['options']); - foreach ( $v as $val ) { - $val = trim($val); - if ( strpos($val, '|') !== FALSE ) { - $a = explode('|', $val); - $values[$a[0]] = $a[1]; - } - elseif ( !empty($val) ) { - $values[$val] = $val; - } - } - - return $values; - } - /** * print fields values from shortcode */ diff --git a/controllers/AdminController.php b/controllers/AdminController.php index 7fd65e8..93fe92a 100644 --- a/controllers/AdminController.php +++ b/controllers/AdminController.php @@ -65,7 +65,13 @@ public function addScripts() jcf_plugin_url('assets/just_custom_fields.js'), array( 'jquery', 'json2', 'jquery-form', 'jquery-ui-sortable' ) ); + wp_register_script( + 'jcforms-multifield', + jcf_plugin_url('assets/jcforms-multifield.js'), + array( 'jquery', 'json2', 'jquery-form', 'jquery-ui-sortable' ) + ); wp_enqueue_script($slug); + wp_enqueue_script('jcforms-multifield'); wp_enqueue_script('jquery-ui-autocomplete'); } @@ -88,7 +94,9 @@ public function addStyles() { $slug = \JustCustomFields::$pluginName; wp_register_style($slug, jcf_plugin_url('assets/styles.css'), array( 'media-views' )); + wp_register_style('jcforms-multifield', jcf_plugin_url('assets/jcforms-multifield.css'), array( 'media-views' )); wp_enqueue_style($slug); + wp_enqueue_style('jcforms-multifield'); } } diff --git a/core/JustField.php b/core/JustField.php index 3149b0f..2de70ca 100644 --- a/core/JustField.php +++ b/core/JustField.php @@ -616,4 +616,32 @@ public function shortcodeValue( $args ) { return $args['before_value'] . esc_html($this->entry) . $args['after_value']; } + + /** + * Correct order options after drup&drop + * + * @param $options + * + * @return array + */ + + public function orderOptions($options) + { + + $new_options = array(); + $i = 0; + foreach ($options as $val){ + $option = []; + foreach($val as $key => $opt){ + $option[$key] = strip_tags($opt); + } + if ( ! empty( $option['id'] && $option['label'] ) ){ + $new_options[$i] = $option; + } + $i++; + } + + return $new_options; + } + } From 77b4284ec7ac992094359b8e3b87231072a6f9a0 Mon Sep 17 00:00:00 2001 From: evkos Date: Fri, 14 Apr 2017 18:54:58 +0300 Subject: [PATCH 2/2] modify options for select, multi-select and checkbox fields --- components/select/JustField_Select.php | 1 + 1 file changed, 1 insertion(+) diff --git a/components/select/JustField_Select.php b/components/select/JustField_Select.php index 920839f..5391b9a 100644 --- a/components/select/JustField_Select.php +++ b/components/select/JustField_Select.php @@ -128,6 +128,7 @@ public function save( $values ) public function update( $new_instance, $old_instance ) { $instance = $old_instance; + $instance['title'] = strip_tags($new_instance['title']); $instance['options'] = $this->orderOptions($new_instance['options']); $instance['description'] = strip_tags($new_instance['description']);