Skip to content

Commit dd6cd30

Browse files
matrozovmatrozov
committed
Add createItem
1 parent 6088ea4 commit dd6cd30

15 files changed

+307
-91
lines changed

‎dist/css/selectopus.css

+13
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
max-height: 160px;
4848
}
4949
.selectopus-popup-item {
50+
position: relative;
5051
cursor: pointer;
5152
padding: 2px 5px;
5253
}
@@ -59,6 +60,18 @@
5960
.selectopus-popup-item.selectopus-popup-item-selected:hover {
6061
background: #cde;
6162
}
63+
.selectopus-popup-create {
64+
background: #fcf8e3;
65+
border-bottom: 1px solid #ddd;
66+
}
67+
.selectopus-popup-create:hover {
68+
background: #dcddc6;
69+
}
70+
.selectopus-popup-create:before {
71+
content: "\2b";
72+
margin-right: 2px;
73+
font-weight: bold;
74+
}
6275
.selectopus-popup-hint {
6376
display: none;
6477
color: #aaa;

‎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/selectopus.full.js

+67-20
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
$popup: false,
1717
$popupInput: false,
1818
$popupItems: false,
19+
$popupCreate: false,
1920
$popupHint: false,
2021

2122
init: function($element, options) {
@@ -65,6 +66,12 @@
6566
.addClass('selectopus-popup-items')
6667
.appendTo(self.$popup);
6768

69+
self.$popupCreate = $('<li>')
70+
.addClass('selectopus-popup-item selectopus-popup-create')
71+
.text('create new item')
72+
.click(self.view.popup.items.onClick)
73+
.appendTo(self.$popupItems);
74+
6875
self.$popupHint = $('<div>')
6976
.addClass('selectopus-popup-hint')
7077
.appendTo(self.$popup);
@@ -119,7 +126,7 @@
119126
}
120127
});
121128

122-
var data_bool = ['multiple', 'popupHideSelected', 'popupSearchBar', 'popupSearchHideItem', 'popupSearchMarkItem', 'popupCloseAfterSelect'];
129+
var data_bool = ['multiple', 'allowCreate', 'popupHideSelected', 'popupSearchBar', 'popupSearchHideItem', 'popupSearchMarkItem', 'popupCloseAfterSelect'];
123130

124131
$.each(data_bool, function(idx, key) {
125132
var value = $element.data(key);
@@ -165,6 +172,11 @@
165172
});
166173
},
167174

175+
add: function(value, data) {
176+
self._options.items[value] = data;
177+
self._items[value] = data;
178+
},
179+
168180
exists: function(value) {
169181
return typeof(self._items[value]) !== 'undefined';
170182
},
@@ -187,7 +199,7 @@
187199
keys: function() {
188200
var list = [];
189201

190-
$.each(self._value, function(value, title){
202+
$.each(self._value, function(value){
191203
list.push(value);
192204
});
193205

@@ -203,7 +215,7 @@
203215

204216
self.$element.attr('multiple', self._options.multiple);
205217

206-
$.each(self._value, function(value, title) {
218+
$.each(self._value, function(value) {
207219
$('<option>')
208220
.attr('selected', true)
209221
.text(value)
@@ -262,9 +274,11 @@
262274
},
263275

264276
create: function(value) {
277+
var data = self.value.get(value);
278+
265279
$('<span>')
266280
.addClass('selectopus-item')
267-
.html(self._options.onRenderItem(self.public, value, self.value.get(value)))
281+
.html(self._options.onRenderItem(self.public, value, self._options.onGetLabel(self.public, data), data))
268282
.data('value', value)
269283
.click(self.view.items.onClick)
270284
.appendTo(self.$items);
@@ -303,14 +317,14 @@
303317

304318
var items = {};
305319

306-
$.each(self._items, function(value, title){
320+
$.each(self._items, function(value, data){
307321
var selected = self.value.exists(value);
308322

309323
if (selected && (self._options.popupHideSelected)) {
310324
return;
311325
}
312326

313-
items[value] = title;
327+
items[value] = data;
314328
});
315329

316330
$.each(items, function(value) {
@@ -333,7 +347,14 @@
333347
},
334348

335349
create: function(value) {
336-
var content = self._options.onRenderPopupItem(self.public, value, self.items.get(value), self._search);
350+
var data = self.items.get(value);
351+
var label = self._options.onGetLabel(self.public, data);
352+
353+
if (self._options.popupSearchMarkItem) {
354+
label = self.public.utils.mark(label, self._search);
355+
}
356+
357+
var content = self._options.onRenderPopupItem(self.public, value, label, data);
337358

338359
var $item = $('<li>')
339360
.addClass('selectopus-popup-item')
@@ -348,12 +369,16 @@
348369
},
349370

350371
clear: function() {
351-
self.$popupItems.empty();
372+
self.$popupItems.find('.selectopus-popup-item:not(.selectopus-popup-create)').remove();
352373
},
353374

354375
onClick: function() {
355376
var value = $(this).data('value');
356377

378+
if ($(this).is('.selectopus-popup-create')) {
379+
self.items.add(value, self._options.onCreateItem(self.public, value));
380+
}
381+
357382
if (self._options.multiple && self.value.exists(value)) {
358383
self.value.remove(value);
359384
self.value.save();
@@ -409,6 +434,7 @@
409434

410435
self.$popupItems.scrollTop(0);
411436
self.$popupInput.val('').focus();
437+
self.$popupCreate.hide();
412438
});
413439

414440
},
@@ -470,6 +496,24 @@
470496
self.view.popup.items.createList();
471497
}
472498
});
499+
500+
if (self._options.allowCreate && (self._search.length > 0)) {
501+
var data = self._options.onCreateItem(self.public, self._search);
502+
var label = self._options.onGetLabel(self.public, data);
503+
504+
if (self._options.popupSearchMarkItem) {
505+
label = self.public.utils.mark(label, self._search);
506+
}
507+
508+
self.$popupCreate
509+
.data('value', self._search)
510+
.html(self._options.onRenderPopupItem(self.public, self._search, label, data));
511+
512+
self.$popupCreate.show();
513+
}
514+
else {
515+
self.$popupCreate.hide();
516+
}
473517
}
474518
}
475519
},
@@ -589,11 +633,12 @@
589633
};
590634

591635
$.fn.selectopus.default = {
592-
items: {}, // List of allowed items {value1: title1, value2: title2}
636+
items: {}, // List of allowed items {value1: data1, value2: data2}
593637
value: [], // List of values [value1, value2]
594638

595639
language: 'en',
596640
multiple: false, // Allow multiple select
641+
allowCreate: true, // Allow create new value
597642

598643
popupHideSelected: false, // Hide selected items (or only hightlite by default)
599644

@@ -632,25 +677,27 @@
632677

633678
var items = {};
634679

635-
$.each(selectopus.items, function(value, title) {
636-
if (!selectopus.utils.match(title, search)) {
680+
$.each(selectopus.items, function(value, data) {
681+
if (!selectopus.utils.match(selectopus.options.onGetLabel(selectopus, data), search)) {
637682
return;
638683
}
639684

640-
items[value] = title;
685+
items[value] = data;
641686
});
642687

643688
return items;
644689
},
645-
onRenderItem: function(selectopus, value, title) {
646-
return title;
690+
onGetLabel: function(selectopus, data) {
691+
return data;
647692
},
648-
onRenderPopupItem: function(selectopus, value, title, search) {
649-
if (selectopus.options.popupSearchMarkItem) {
650-
title = selectopus.utils.mark(title, search);
651-
}
652-
653-
return title;
693+
onRenderItem: function(selectopus, value, label, data) {
694+
return label;
695+
},
696+
onRenderPopupItem: function(selectopus, value, label, data) {
697+
return label;
698+
},
699+
onCreateItem: function(selectopus, label) {
700+
return label;
654701
}
655702
};
656703

‎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.

0 commit comments

Comments
 (0)