Ui: Allow Ctrl-A and Ctrl-X in multi-select2 field

This commit is contained in:
guerler
2015-03-13 14:54:36 -04:00
parent 8991ea812b
commit e8564d7675
3 changed files with 33 additions and 1 deletions
@@ -200,6 +200,22 @@ var View = Backbone.View.extend({
if (this.options.searchable) {
this.$select.select2('destroy');
this.$select.select2();
this.$('.select2-input').off('keypress.selectall').on('keypress.selectall', function(event){
if (event.ctrlKey || event.metaKey) {
var id = $(this).parents('div[class*="select2-container"]').attr('id').replace('s2id_', '');
var element = $('#' + id);
if (event.which == 97){
var selected = [];
element.find('option').each(function(i, e){
selected[selected.length] = $(e).attr('value');
});
element.select2('val', selected);
} else if (event.which == 120){
element.select2('val', '');
}
$('.select2-drop-mask').click();
}
});
}
// set previous value
@@ -200,6 +200,22 @@ var View = Backbone.View.extend({
if (this.options.searchable) {
this.$select.select2('destroy');
this.$select.select2();
this.$('.select2-input').off('keypress.selectall').on('keypress.selectall', function(event){
if (event.ctrlKey || event.metaKey) {
var id = $(this).parents('div[class*="select2-container"]').attr('id').replace('s2id_', '');
var element = $('#' + id);
if (event.which == 97){
var selected = [];
element.find('option').each(function(i, e){
selected[selected.length] = $(e).attr('value');
});
element.select2('val', selected);
} else if (event.which == 120){
element.select2('val', '');
}
$('.select2-drop-mask').click();
}
});
}
// set previous value
@@ -1 +1 @@
define(["utils/utils"],function(a){var b=Backbone.View.extend({optionsDefault:{id:a.uid(),cls:"ui-select",error_text:"No data available",empty_text:"No selection",visible:true,wait:false,multiple:false,searchable:true,optional:false},initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.$select=this.$el.find(".select");this.$icon=this.$el.find(".icon");this.$button=this.$el.find(".button");if(this.options.multiple){this.$el.addClass("ui-select-multiple");this.$select.prop("multiple",true);this.$button.remove()}this.update(this.options.data);if(this.options.value!==undefined){this.value(this.options.value)}if(!this.options.visible){this.hide()}if(this.options.wait){this.wait()}else{this.show()}var c=this;this.$select.on("change",function(){c._change()});this.on("change",function(){c._change()})},value:function(c){if(c!==undefined){if(c===null){c="__null__"}if(this.exists(c)||this.options.multiple){this.$select.val(c);if(this.$select.select2){this.$select.select2("val",c)}}}return this._getValue()},first:function(){var c=this.$select.find("option").first();if(c.length>0){return c.val()}else{return null}},text:function(){return this.$select.find("option:selected").text()},show:function(){this.unwait();this.$select.show();this.$el.show()},hide:function(){this.$el.hide()},wait:function(){this.$icon.removeClass();this.$icon.addClass("fa fa-spinner fa-spin")},unwait:function(){this.$icon.removeClass();this.$icon.addClass("fa fa-caret-down")},disabled:function(){return this.$select.is(":disabled")},enable:function(){this.$select.prop("disabled",false)},disable:function(){this.$select.prop("disabled",true)},add:function(c){this.$select.append(this._templateOption(c));this._refresh()},del:function(c){this.$select.find("option[value="+c+"]").remove();this.$select.trigger("change");this._refresh()},update:function(c){var e=this._getValue();this.$select.find("option").remove();if(!this.options.multiple&&this.options.optional){this.$select.append(this._templateOption({value:"__null__",label:this.options.empty_text}))}for(var d in c){this.$select.append(this._templateOption(c[d]))}this._refresh();if(this.options.searchable){this.$select.select2("destroy");this.$select.select2()}this.value(e);if(this._getValue()===null){this.value(this.first())}},setOnChange:function(c){this.options.onchange=c},exists:function(c){return this.$select.find('option[value="'+c+'"]').length>0},_change:function(){if(this.options.onchange){this.options.onchange(this._getValue())}},_getValue:function(){var c=this.$select.val();if(!a.validate(c)){return null}return c},_refresh:function(){var c=this.$select.find("option").length;if(c==0){this.disable();this.$select.empty();this.$select.append(this._templateOption({value:"__null__",label:this.options.error_text}))}else{this.enable()}},_templateOption:function(c){return'<option value="'+c.value+'">'+c.label+"</option>"},_template:function(c){return'<div id="'+c.id+'" class="'+c.cls+'"><select id="'+c.id+'_select" class="select"/><div class="button"><i class="icon"/></div></div>'}});return{View:b}});
define(["utils/utils"],function(a){var b=Backbone.View.extend({optionsDefault:{id:a.uid(),cls:"ui-select",error_text:"No data available",empty_text:"No selection",visible:true,wait:false,multiple:false,searchable:true,optional:false},initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.$select=this.$el.find(".select");this.$icon=this.$el.find(".icon");this.$button=this.$el.find(".button");if(this.options.multiple){this.$el.addClass("ui-select-multiple");this.$select.prop("multiple",true);this.$button.remove()}this.update(this.options.data);if(this.options.value!==undefined){this.value(this.options.value)}if(!this.options.visible){this.hide()}if(this.options.wait){this.wait()}else{this.show()}var c=this;this.$select.on("change",function(){c._change()});this.on("change",function(){c._change()})},value:function(c){if(c!==undefined){if(c===null){c="__null__"}if(this.exists(c)||this.options.multiple){this.$select.val(c);if(this.$select.select2){this.$select.select2("val",c)}}}return this._getValue()},first:function(){var c=this.$select.find("option").first();if(c.length>0){return c.val()}else{return null}},text:function(){return this.$select.find("option:selected").text()},show:function(){this.unwait();this.$select.show();this.$el.show()},hide:function(){this.$el.hide()},wait:function(){this.$icon.removeClass();this.$icon.addClass("fa fa-spinner fa-spin")},unwait:function(){this.$icon.removeClass();this.$icon.addClass("fa fa-caret-down")},disabled:function(){return this.$select.is(":disabled")},enable:function(){this.$select.prop("disabled",false)},disable:function(){this.$select.prop("disabled",true)},add:function(c){this.$select.append(this._templateOption(c));this._refresh()},del:function(c){this.$select.find("option[value="+c+"]").remove();this.$select.trigger("change");this._refresh()},update:function(c){var e=this._getValue();this.$select.find("option").remove();if(!this.options.multiple&&this.options.optional){this.$select.append(this._templateOption({value:"__null__",label:this.options.empty_text}))}for(var d in c){this.$select.append(this._templateOption(c[d]))}this._refresh();if(this.options.searchable){this.$select.select2("destroy");this.$select.select2();this.$(".select2-input").off("keypress.selectall").on("keypress.selectall",function(h){if(h.ctrlKey||h.metaKey){var i=$(this).parents('div[class*="select2-container"]').attr("id").replace("s2id_","");var f=$("#"+i);if(h.which==97){var g=[];f.find("option").each(function(j,k){g[g.length]=$(k).attr("value")});f.select2("val",g)}else{if(h.which==120){f.select2("val","")}}$(".select2-drop-mask").click()}})}this.value(e);if(this._getValue()===null){this.value(this.first())}},setOnChange:function(c){this.options.onchange=c},exists:function(c){return this.$select.find('option[value="'+c+'"]').length>0},_change:function(){if(this.options.onchange){this.options.onchange(this._getValue())}},_getValue:function(){var c=this.$select.val();if(!a.validate(c)){return null}return c},_refresh:function(){var c=this.$select.find("option").length;if(c==0){this.disable();this.$select.empty();this.$select.append(this._templateOption({value:"__null__",label:this.options.error_text}))}else{this.enable()}},_templateOption:function(c){return'<option value="'+c.value+'">'+c.label+"</option>"},_template:function(c){return'<div id="'+c.id+'" class="'+c.cls+'"><select id="'+c.id+'_select" class="select"/><div class="button"><i class="icon"/></div></div>'}});return{View:b}});