diff --git a/grunt.js b/grunt.js
index c850a18..dd4f8ac 100644
--- a/grunt.js
+++ b/grunt.js
@@ -164,6 +164,7 @@ module.exports = function(grunt) {
'src/inputs/date/*.js',
'src/inputs/dateui/*.js',
'src/inputs/combodate/*.js',
+ 'src/inputs/select2/*.js',
'src/inputs-ext/address/*.js',
'src/inputs-ext/wysihtml5/*.js'
diff --git a/src/containers/editable-container.js b/src/containers/editable-container.js
index 322d2d7..6c88750 100644
--- a/src/containers/editable-container.js
+++ b/src/containers/editable-container.js
@@ -116,6 +116,7 @@ Applied as jQuery method.
cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on calcel button
show: $.proxy(this.setPosition, this), //re-position container every time form is shown (occurs each time after loading state)
rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown
+ resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed
rendered: $.proxy(function(){
/**
Fired when container is shown and form is rendered (for select will wait for loading dropdown options)
diff --git a/src/editable-form/editable-form-utils.js b/src/editable-form/editable-form-utils.js
index 4eb6aee..2fc0044 100644
--- a/src/editable-form/editable-form-utils.js
+++ b/src/editable-form/editable-form-utils.js
@@ -132,10 +132,12 @@
/*
returns array items from sourceData having value property equal or inArray of 'value'
*/
- itemsByValue: function(value, sourceData) {
+ itemsByValue: function(value, sourceData, valueProp) {
if(!sourceData || value === null) {
return [];
}
+
+ valueProp = valueProp || 'value';
var isValArray = $.isArray(value),
result = [],
@@ -147,11 +149,11 @@
} else {
/*jslint eqeq: true*/
if(isValArray) {
- if($.grep(value, function(v){ return v == o.value; }).length) {
+ if($.grep(value, function(v){ return v == (o && typeof o === 'object' ? o[valueProp] : o); }).length) {
result.push(o);
}
} else {
- if(value == o.value) {
+ if(value == (o && typeof o === 'object' ? o[valueProp] : o)) {
result.push(o);
}
}
diff --git a/src/editable-form/editable-form.js b/src/editable-form/editable-form.js
index 3bff76d..64f8946 100644
--- a/src/editable-form/editable-form.js
+++ b/src/editable-form/editable-form.js
@@ -25,6 +25,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
this.input = this.options.input;
//set initial value
+ //todo: may be add check: typeof str === 'string' ?
this.value = this.input.str2value(this.options.value);
},
initTemplate: function() {
diff --git a/src/inputs/select2/select2.js b/src/inputs/select2/select2.js
index 260d06d..b9d5479 100644
--- a/src/inputs/select2/select2.js
+++ b/src/inputs/select2/select2.js
@@ -26,22 +26,30 @@ $(function(){
var Constructor = function (options) {
this.init('select2', options, Constructor.defaults);
+ var mixin = {
+ placeholder: options.placeholder
+ };
+
+ if(options.select2 && options.select2.tags) {
+
+ }
+ /*
+ if(!(options.select2 && options.select2.tags)) {
+ mixin.data = options.source;
+ mixin.initSelection = function (element, callback) {
+ //see https://github.com/ivaynberg/select2/issues/710
+ var data = [];
+ $.each(this.data, function(k, v) {
+ if(v.id == element.val()) {
+ data.push(v);
+ }
+ });
+ callback(data);
+ };
+ }
+ */
//overriding objects in config (as by default jQuery extend() is not recursive)
- this.options.select2 = $.extend({}, Constructor.defaults.select2, {
- data: options.source,
- placeholder: options.placeholder,
- initSelection : function (element, callback) {
- //see https://github.com/ivaynberg/select2/issues/710
- var data;
- $.each(this.data, function(k, v) {
- if(v.id == element.val()) {
- data = v;
- return false;
- }
- });
- callback(data);
- }
- }, options.select2);
+ this.options.select2 = $.extend({}, Constructor.defaults.select2, mixin, options.select2);
};
$.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput);
@@ -51,16 +59,43 @@ $(function(){
this.setClass();
//apply select2
this.$input.select2(this.options.select2);
+
+ if(this.options.select2.tags) {
+ this.$input.on('change', function() {
+ //trigger resize of editableform to re-position container
+ $(this).closest('form').parent().triggerHandler('resize');
+ });
+ }
+
},
value2html: function(value, element) {
+ var text = '', data;
if(this.$input) { //when submitting form
- $(element).text(this.$input.select2('data').text);
+ data = this.$input.select2('data');
} else { //on init (autotext)
- //todo: here select2 instance not created yet and data may be even not loaded.
- //but we can check data property of select and if it exist find text
- $(element).text('');
+ //here select2 instance not created yet and data may be even not loaded.
+ //but we can check data/tags property of select and if it exist lookup text
+ if(this.options.select2.tags) {
+ data = value;
+ } else if(this.options.select2.data) {
+ data = $.fn.editableutils.itemsByValue(value, this.options.select2.data, 'id');
+ }
}
+
+ if($.isArray(data)) {
+ //collect selected data and show with separator
+ text = [];
+ $.each(data, function(k, v){
+ text.push(v && typeof v === 'object' ? v.text : v);
+ });
+ } else if(data) {
+ text = data.text;
+ }
+
+ text = $.isArray(text) ? text.join(this.options.viewseparator) : text;
+
+ $(element).text(text);
},
html2value: function(html) {
@@ -68,14 +103,30 @@ $(function(){
},
value2input: function(value) {
- this.$input.select2('val', value);
-// this.$input.val(value);
+// this.$input.val(value).select2('val', value);
+ this.$input.val(value).trigger('change');
},
input2value: function() {
return this.$input.select2('val');
// return this.$input.val();
- }
+ },
+
+ str2value: function(str) {
+ if(typeof str !== 'string') {
+ return str;
+ }
+ var val, i, l,
+ separator = this.options.select2.separator || $.fn.select2.defaults.separator;
+ if (str === null || str.length < 1) {
+ return null;
+ }
+ val = str.split(separator);
+ for (i = 0, l = val.length; i < l; i = i + 1) {
+ val[i] = $.trim(val[i]);
+ }
+ return val;
+ }
});
@@ -105,7 +156,15 @@ $(function(){
Source data for select. It will be assigned to select2 `data` property and kept just for convenience.
Please note, that format is different from simple `select` input.
**/
- source: null
+ source: null,
+ /**
+ Separator used to display tags.
+
+ @property viewseparator
+ @type string
+ @default ', '
+ **/
+ viewseparator: ', '
});
$.fn.editabletypes.select2 = Constructor;