Skip to content

Commit 942d637

Browse files
matrozovmatrozov
committed
Add placeholder/required parameter
1 parent dd6cd30 commit 942d637

16 files changed

+253
-40
lines changed

‎dist/css/selectopus.css

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
height: auto;
44
overflow: hidden;
55
}
6+
.selectopus-placeholder {
7+
cursor: pointer;
8+
}
69
.selectopus-items {
710
margin: -4px;
811
}

‎dist/css/selectopus.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/i18n/en.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
(function($) {
22
$.fn.selectopus.languages.en = {
3+
placeholder: 'Click here to select items...',
34
popupEmpty: 'Empty list!',
45
popupSearchPlaceholder: 'Start type for search items...',
56
popupSearchNotFound: 'No results found!'

‎dist/js/i18n/ru.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
(function($) {
22
$.fn.selectopus.languages.ru = {
3+
placeholder: 'Нажмите, что бы выбрать элементы...',
34
popupEmpty: 'Список пуст!',
45
popupSearchPlaceholder: 'Начните писать, что бы найти элементы...',
56
popupSearchNotFound: 'Совпадений не найдено!'

‎dist/js/selectopus.full.js

+77-11
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
$element: false,
1313

1414
$root: false,
15+
$placeholder: false,
1516
$items: false,
1617
$popup: false,
1718
$popupInput: false,
@@ -45,6 +46,10 @@
4546
self.$root.addClass('selectopus-multiple');
4647
}
4748

49+
self.$placeholder = $('<div>')
50+
.addClass('selectopus-placeholder text-muted')
51+
.appendTo(self.$root);
52+
4853
self.$items = $('<div>')
4954
.addClass('selectopus-items clearfix')
5055
.appendTo(self.$root);
@@ -82,8 +87,7 @@
8287
optionsPredefined: function() {
8388
var result = {
8489
items: {},
85-
value: [],
86-
multiple: self.$element.is('[multiple]')
90+
value: []
8791
};
8892

8993
self.$element.find('option').each(function() {
@@ -116,7 +120,27 @@
116120
}
117121
}
118122

119-
var data_str = ['language', 'url'];
123+
var attr_str = ['placeholder'];
124+
125+
$.each(attr_str, function(idx, key) {
126+
var value = $element.attr(key);
127+
128+
if ((typeof(value) !== 'undefined') && (value.trim().length > 0)) {
129+
result[key] = value;
130+
}
131+
});
132+
133+
var attr_bool = ['required', 'multiple'];
134+
135+
$.each(attr_bool, function(idx, key) {
136+
var value = $element.attr(key);
137+
138+
if (typeof(value) !== 'undefined') {
139+
result[key] = true;
140+
}
141+
});
142+
143+
var data_str = ['language', 'placeholder', 'url'];
120144

121145
$.each(data_str, function(idx, key) {
122146
var value = $element.data(key);
@@ -126,7 +150,7 @@
126150
}
127151
});
128152

129-
var data_bool = ['multiple', 'allowCreate', 'popupHideSelected', 'popupSearchBar', 'popupSearchHideItem', 'popupSearchMarkItem', 'popupCloseAfterSelect'];
153+
var data_bool = ['required', 'multiple', 'allowCreate', 'popupHideSelected', 'popupSearchBar', 'popupSearchHideItem', 'popupSearchMarkItem', 'popupCloseAfterSelect'];
130154

131155
$.each(data_bool, function(idx, key) {
132156
var value = $element.data(key);
@@ -160,6 +184,14 @@
160184

161185
reload: function() {
162186
self.$popupInput.attr('placeholder', self.language.translate('popupSearchPlaceholder'));
187+
188+
var placeholder = self._options.placeholder;
189+
190+
if (!placeholder) {
191+
placeholder = self.language.translate('placeholder');
192+
}
193+
194+
self.$placeholder.text(placeholder);
163195
}
164196
},
165197

@@ -264,10 +296,27 @@
264296
},
265297

266298
view: {
299+
placeholder: {
300+
hide: function() {
301+
self.$placeholder.hide();
302+
},
303+
304+
show: function() {
305+
self.$placeholder.show();
306+
}
307+
},
308+
267309
items: {
268310
createList: function() {
269311
self.view.items.clear();
270312

313+
if ($.isEmptyObject(self._value)) {
314+
self.view.placeholder.show();
315+
}
316+
else {
317+
self.view.placeholder.hide();
318+
}
319+
271320
$.each(self._value, function(value) {
272321
self.view.items.create(value);
273322
});
@@ -379,17 +428,28 @@
379428
self.items.add(value, self._options.onCreateItem(self.public, value));
380429
}
381430

382-
if (self._options.multiple && self.value.exists(value)) {
383-
self.value.remove(value);
384-
self.value.save();
431+
if (self._options.multiple) {
432+
if (self.value.exists(value)) {
433+
self.value.remove(value);
434+
self.value.save();
435+
}
436+
else {
437+
self.value.add(value);
438+
self.value.save();
439+
}
385440
}
386441
else {
387-
if (!self._options.multiple) {
442+
if (self.value.exists(value)) {
443+
if (!self._options.required) {
444+
self.value.remove(value);
445+
self.value.save();
446+
}
447+
}
448+
else {
388449
self.value.clear();
450+
self.value.add(value);
451+
self.value.save();
389452
}
390-
391-
self.value.add(value);
392-
self.value.save();
393453
}
394454

395455
if (self._options.popupCloseAfterSelect) {
@@ -637,6 +697,10 @@
637697
value: [], // List of values [value1, value2]
638698

639699
language: 'en',
700+
701+
placeholder: false, // Custom placeholer
702+
703+
required: false, // Allow empty value
640704
multiple: false, // Allow multiple select
641705
allowCreate: true, // Allow create new value
642706

@@ -709,13 +773,15 @@
709773
})(jQuery);
710774
(function($) {
711775
$.fn.selectopus.languages.en = {
776+
placeholder: 'Click here to select items...',
712777
popupEmpty: 'Empty list!',
713778
popupSearchPlaceholder: 'Start type for search items...',
714779
popupSearchNotFound: 'No results found!'
715780
};
716781
})(jQuery);
717782
(function($) {
718783
$.fn.selectopus.languages.ru = {
784+
placeholder: 'Нажмите, что бы выбрать элементы...',
719785
popupEmpty: 'Список пуст!',
720786
popupSearchPlaceholder: 'Начните писать, что бы найти элементы...',
721787
popupSearchNotFound: 'Совпадений не найдено!'

‎dist/js/selectopus.full.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/selectopus.js

+75-11
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
$element: false,
1313

1414
$root: false,
15+
$placeholder: false,
1516
$items: false,
1617
$popup: false,
1718
$popupInput: false,
@@ -45,6 +46,10 @@
4546
self.$root.addClass('selectopus-multiple');
4647
}
4748

49+
self.$placeholder = $('<div>')
50+
.addClass('selectopus-placeholder text-muted')
51+
.appendTo(self.$root);
52+
4853
self.$items = $('<div>')
4954
.addClass('selectopus-items clearfix')
5055
.appendTo(self.$root);
@@ -82,8 +87,7 @@
8287
optionsPredefined: function() {
8388
var result = {
8489
items: {},
85-
value: [],
86-
multiple: self.$element.is('[multiple]')
90+
value: []
8791
};
8892

8993
self.$element.find('option').each(function() {
@@ -116,7 +120,27 @@
116120
}
117121
}
118122

119-
var data_str = ['language', 'url'];
123+
var attr_str = ['placeholder'];
124+
125+
$.each(attr_str, function(idx, key) {
126+
var value = $element.attr(key);
127+
128+
if ((typeof(value) !== 'undefined') && (value.trim().length > 0)) {
129+
result[key] = value;
130+
}
131+
});
132+
133+
var attr_bool = ['required', 'multiple'];
134+
135+
$.each(attr_bool, function(idx, key) {
136+
var value = $element.attr(key);
137+
138+
if (typeof(value) !== 'undefined') {
139+
result[key] = true;
140+
}
141+
});
142+
143+
var data_str = ['language', 'placeholder', 'url'];
120144

121145
$.each(data_str, function(idx, key) {
122146
var value = $element.data(key);
@@ -126,7 +150,7 @@
126150
}
127151
});
128152

129-
var data_bool = ['multiple', 'allowCreate', 'popupHideSelected', 'popupSearchBar', 'popupSearchHideItem', 'popupSearchMarkItem', 'popupCloseAfterSelect'];
153+
var data_bool = ['required', 'multiple', 'allowCreate', 'popupHideSelected', 'popupSearchBar', 'popupSearchHideItem', 'popupSearchMarkItem', 'popupCloseAfterSelect'];
130154

131155
$.each(data_bool, function(idx, key) {
132156
var value = $element.data(key);
@@ -160,6 +184,14 @@
160184

161185
reload: function() {
162186
self.$popupInput.attr('placeholder', self.language.translate('popupSearchPlaceholder'));
187+
188+
var placeholder = self._options.placeholder;
189+
190+
if (!placeholder) {
191+
placeholder = self.language.translate('placeholder');
192+
}
193+
194+
self.$placeholder.text(placeholder);
163195
}
164196
},
165197

@@ -264,10 +296,27 @@
264296
},
265297

266298
view: {
299+
placeholder: {
300+
hide: function() {
301+
self.$placeholder.hide();
302+
},
303+
304+
show: function() {
305+
self.$placeholder.show();
306+
}
307+
},
308+
267309
items: {
268310
createList: function() {
269311
self.view.items.clear();
270312

313+
if ($.isEmptyObject(self._value)) {
314+
self.view.placeholder.show();
315+
}
316+
else {
317+
self.view.placeholder.hide();
318+
}
319+
271320
$.each(self._value, function(value) {
272321
self.view.items.create(value);
273322
});
@@ -379,17 +428,28 @@
379428
self.items.add(value, self._options.onCreateItem(self.public, value));
380429
}
381430

382-
if (self._options.multiple && self.value.exists(value)) {
383-
self.value.remove(value);
384-
self.value.save();
431+
if (self._options.multiple) {
432+
if (self.value.exists(value)) {
433+
self.value.remove(value);
434+
self.value.save();
435+
}
436+
else {
437+
self.value.add(value);
438+
self.value.save();
439+
}
385440
}
386441
else {
387-
if (!self._options.multiple) {
442+
if (self.value.exists(value)) {
443+
if (!self._options.required) {
444+
self.value.remove(value);
445+
self.value.save();
446+
}
447+
}
448+
else {
388449
self.value.clear();
450+
self.value.add(value);
451+
self.value.save();
389452
}
390-
391-
self.value.add(value);
392-
self.value.save();
393453
}
394454

395455
if (self._options.popupCloseAfterSelect) {
@@ -637,6 +697,10 @@
637697
value: [], // List of values [value1, value2]
638698

639699
language: 'en',
700+
701+
placeholder: false, // Custom placeholer
702+
703+
required: false, // Allow empty value
640704
multiple: false, // Allow multiple select
641705
allowCreate: true, // Allow create new value
642706

0 commit comments

Comments
 (0)