tracer/x-editable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

select2 wip: tags ready

Browse Source
This commit is contained in:
vitalets 2013-01-16 00:53:02 +04:00
parent f81a56d15c
commit 27ef9579e2
5 changed files with 90 additions and 26 deletions

1
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'

1
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)

8
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);
}
}

1
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() {

105
src/inputs/select2/select2.js vendored

@ -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;