Skip to content

Commit 6c611a9

Browse files
shazzadshazzad
committed
added checkboxes field scroll parameter
added checkboxes field search capability
1 parent cb98793 commit 6c611a9

File tree

4 files changed

+70
-24
lines changed

4 files changed

+70
-24
lines changed

‎dist/css/form.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,15 @@
130130
background-color: #ddd !important;
131131
}
132132

133+
.wf-scrollable {
134+
margin: 0;
135+
overflow-x: auto;
136+
}
137+
138+
input.wf-list-search-input {
139+
margin-bottom: 10px;
140+
}
141+
133142
/* Field Sortable List */
134143
.wf-sortable-list {
135144
margin: 0;

‎dist/js/form.js

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
$parent.find('.listen_on_trigger').each(function () {
1010
var $wrap = $(this);
1111
if (!$wrap.data('listen_on_trigger_init')) {
12-
$(document.body).on($wrap.data('listen_on_trigger_name'), function (e, value) {
12+
$(document).on($wrap.data('listen_on_trigger_name'), function (e, value) {
1313
var key = $wrap.data('listen_on_trigger_key') || 'field';
1414
var data = $wrap.data('listen_on_trigger_args') || '{}';
1515
if ('string' === typeof (data)) {
@@ -33,7 +33,7 @@
3333
register_ajax_forms($wrap);
3434
}
3535

36-
$(document.body).trigger(data.action, [r, data, $wrap]);
36+
$(document).trigger(data.action, [r, data, $wrap]);
3737
});
3838
}
3939
else if ('set_value' == $wrap.data('listen_on_trigger_action')) {
@@ -69,7 +69,7 @@
6969
var $wrap = $(this);
7070
if (!$wrap.data('trigger_on_change_init')) {
7171
$wrap.on('change', function () {
72-
$(document.body).trigger($wrap.data('on_change_trigger_name'), [$wrap.val()]);
72+
$(document).trigger($wrap.data('on_change_trigger_name'), [$wrap.val()]);
7373
});
7474
if ('radio' === $wrap.attr('type')) {
7575
if ($wrap.is(':checked')) {
@@ -99,18 +99,18 @@
9999
$form.find('.wf-field-wrap-type-submit').append('<div class="wf_notes"></div>');
100100
var $notes = $form.find('.wf_notes');
101101

102-
// $(document.body).trigger( 'wf/datepicker_init', [$form] );
102+
// $(document).trigger( 'wf/datepicker_init', [$form] );
103103

104104
$form.find('.wf-sortable-list,.wf-sortable').sortable();
105105

106106
if (action) {
107-
$(document.body).trigger(action + '/init', [$form]);
107+
$(document).trigger(action + '/init', [$form]);
108108
}
109109

110110
$button.on('click', function (e) {
111111

112112
if (action) {
113-
$(document.body).trigger(action + '/submit', [$form]);
113+
$(document).trigger(action + '/submit', [$form]);
114114
}
115115

116116
e.preventDefault();
@@ -148,7 +148,7 @@
148148
return prev;
149149
}, {});
150150

151-
$(document.body).trigger(action, [r, _data, $form]);
151+
$(document).trigger(action, [r, _data, $form]);
152152
}
153153

154154
if (typeof (r.urlReplace) !== 'undefined') {
@@ -168,7 +168,7 @@
168168
});
169169
});
170170

171-
$(document.body).trigger('wf/form_registered', [$parent]);
171+
$(document).trigger('wf/form_registered', [$parent]);
172172
}
173173

174174
function register_datepicker($parent) {
@@ -251,29 +251,29 @@
251251
register_datepicker($('body'));
252252
register_select2($('body'));
253253

254-
$(document.body).on('wf/listen_on_trigger', function (e, $wrap) {
254+
$(document).on('wf/listen_on_trigger', function (e, $wrap) {
255255
register_listen_on_trigger($wrap);
256256
});
257-
$(document.body).on('wf/trigger_on_change', function (e, $wrap) {
257+
$(document).on('wf/trigger_on_change', function (e, $wrap) {
258258
register_trigger_on_change($wrap);
259259
});
260-
$(document.body).on('wf/ajax_form', function (e, $wrap) {
260+
$(document).on('wf/ajax_form', function (e, $wrap) {
261261
register_ajax_forms($wrap);
262262
});
263-
$(document.body).on('wf/datepicker', function (e, $wrap) {
263+
$(document).on('wf/datepicker', function (e, $wrap) {
264264
register_datepicker($wrap);
265265
});
266-
$(document.body).on('wf/select2', function (e, $wrap) {
266+
$(document).on('wf/select2', function (e, $wrap) {
267267
register_select2($wrap);
268268
});
269269

270-
$(document.body).on('wf/row_cloned', function (e, $wrap) {
270+
$(document).on('wf/row_cloned', function (e, $wrap) {
271271
register_datepicker($wrap);
272272
register_select2($wrap);
273273
});
274274

275275
/* initialize datepicker & select2 on edit screen metabox visibility */
276-
$(document.body).on('click', '.postbox .ui-sortable-handle', function () {
276+
$(document).on('click', '.postbox .ui-sortable-handle', function () {
277277
var $wrap = $(this).closest('.postbox');
278278
setTimeout(function () {
279279
console.log('checking');
@@ -285,7 +285,7 @@
285285
});
286286

287287
/* button click action */
288-
$(document.body).on('click', '.wf_ajax_btn', function (e) {
288+
$(document).on('click', '.wf_ajax_btn', function (e) {
289289
e.preventDefault();
290290
var
291291
$that = $(this),
@@ -325,15 +325,15 @@
325325
}
326326
}
327327

328-
$(document.body).trigger(action, [r, data, $that]);
328+
$(document).trigger(action, [r, data, $that]);
329329
})
330330
.always(function () {
331331
$that.removeClass('ld').prop('disabled', false);
332332
});
333333
});
334334

335335
/* repeater field */
336-
$(document.body).on('click', '.wf_repeater_add', function (e) {
336+
$(document).on('click', '.wf_repeater_add', function (e) {
337337
e.preventDefault();
338338
var
339339
$button = $(this),
@@ -351,6 +351,7 @@
351351
$(document).trigger('wf/row_cloned');
352352
return false;
353353
});
354+
354355
$(document).on('click', '.wf_repeater_remove', function (e) {
355356
e.preventDefault();
356357
var $button = $(this), $item = $button.closest('.wf_row');
@@ -364,7 +365,7 @@
364365
});
365366

366367
/* repeater field */
367-
$(document.body).on('click', '.wf_repeater2_add', function (e) {
368+
$(document).on('click', '.wf_repeater2_add', function (e) {
368369
e.preventDefault();
369370
var
370371
$button = $(this),
@@ -383,6 +384,7 @@
383384
$(document).trigger('wf/row_cloned');
384385
return false;
385386
});
387+
386388
$(document).on('click', '.wf_repeater2_remove', function (e) {
387389
e.preventDefault();
388390
var $button = $(this), $item = $button.closest('.wf_row');
@@ -396,7 +398,7 @@
396398
});
397399

398400
/* image field */
399-
$(document.body).on('click', '.wf-field_image_btn', function (e) {
401+
$(document).on('click', '.wf-field_image_btn', function (e) {
400402
e.preventDefault();
401403

402404
var _that = $(this),
@@ -436,6 +438,12 @@
436438
$('#' + _that.attr('rel') + '_img').empty();
437439
});
438440

441+
$(document).on('keyup', '.wf-list-search-input', function () {
442+
var value = $(this).val().toLowerCase();
443+
$(this).next('ul').find('li').filter(function () {
444+
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
445+
});
446+
});
439447

440448
/* image field */
441449
$(document).on('click', '.wf-field_media_btn', function (e) {

‎src/Field/Checkboxes.php

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,34 @@ public function get_html( $form ) {
4545

4646
$html .= $input_before;
4747

48+
if ( isset( $searchable ) ) {
49+
$html .= '<input type="search" class="wf-list-search-input" placeholder="search in list">';
50+
}
51+
52+
$container_class = '';
4853
if ( isset( $sortable ) ) {
49-
$html .= "<ol class='wf-sortable'>";
54+
$container_class .= ' wf-sortable';
55+
}
56+
if ( isset( $searchable ) ) {
57+
$container_class .= ' wf-searchable';
58+
}
59+
if ( isset( $scrollable ) && $scrollable ) {
60+
$container_class .= ' wf-scrollable';
61+
}
62+
63+
if ( ! empty( $scroll_height ) ) {
64+
$html .= '<ul class="' . $container_class . '" style="max-height:' . $scroll_height . ';">';
65+
} else {
66+
$html .= '<ul class="' . $container_class . '">';
5067
}
5168

5269
foreach ( $choices as $key => $label ) {
5370
if ( empty( $label ) ) {
5471
continue;
5572
}
5673

74+
$html .= '<li>';
75+
5776
$child_input_attr = '';
5877
$child_input_class = '';
5978
$_label = $label;
@@ -79,6 +98,7 @@ public function get_html( $form ) {
7998
}
8099

81100
$checked = is_array( $value ) && in_array( $key, $value ) ? ' checked="checked"' : '';
101+
82102
$html .= sprintf(
83103
'<label class="%6$s">
84104
<input id="%1$s_%2$s" name="%3$s[]" value="%2$s" type="checkbox"%4$s%6$s /> %5$s
@@ -89,12 +109,12 @@ public function get_html( $form ) {
89109
if ( is_array( $_label ) && isset( $_label['child_input_after'] ) ) {
90110
$html .= $_label['child_input_after'];
91111
}
92-
}
93112

94-
if ( isset( $sortable ) ) {
95-
$html .= "</ol>";
113+
$html .= '</li>';
96114
}
97115

116+
$html .= '</ul>';
117+
98118
$html .= $input_after;
99119

100120
if ( isset( $desc ) ) {

‎src/scss/_fields.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,15 @@
105105
background-color: #ddd !important;
106106
}
107107

108+
.wf-scrollable {
109+
margin: 0;
110+
overflow-x: auto;
111+
}
112+
113+
input.wf-list-search-input {
114+
margin-bottom: 10px;
115+
}
116+
108117
/* Field Sortable List */
109118
.wf-sortable-list {
110119
margin: 0;

0 commit comments

Comments
 (0)