opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Ui: Use regular select all checkbox for multi-select2 fields

Browse Source
This commit is contained in:
guerler
2015-03-14 03:07:00 -04:00
parent cd3c47f017
commit 0194f99fc3
14 changed files with 196 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/mvc/form/form-parameters.js
-4
View File
@@ -133,10 +133,6 @@ define(['utils/utils',
case 'radio':
SelectClass = Ui.Radio;
break;
default:
if (input_def.multiple) {
input_def.help = 'You may press Ctrl+A/Ctrl+X to select/unselect all options. ' + input_def.help;
}
}
// select field
client/galaxy/scripts/mvc/ui/ui-button-check.js
+39 -10
View File
@@ -7,39 +7,68 @@ return Backbone.View.extend({
// default options
optionsDefault: {
icons : ['fa fa-square-o', 'fa fa-minus-square-o', 'fa fa-check-square-o'],
value : 0
value : 0,
title : 'Select/Unselect all'
},
// initialize
initialize : function(options) {
initialize: function(options) {
// configure options
this.options = Utils.merge(options, this.optionsDefault);
// create new element
this.setElement($('<div/>'));
this.setElement(this._template());
this.$title = this.$('.title');
this.$icon = this.$('.icon');
// set initial value
this.value(this.options.value);
// set title
this.$title.html(this.options.title);
// add event handler
var self = this;
this.$el.on('click', function() {
self.current = (!self.current && 2) || 0;
self.current = (self.current === 0 && 2) || 0;
self.value(self.current);
self.options.onclick && self.options.onclick();
});
},
// value
value : function (new_val) {
/* Sets a new value and/or returns the current value.
* @param{Integer} new_val - Set a new value 0=unchecked, 1=partial and 2=checked.
* OR:
* @param{Integer} new_val - Number of selected options.
* @param{Integer} total - Total number of available options.
*/
value: function (new_val, total) {
if (new_val !== undefined) {
this.current = new_val;
this.$el.removeClass()
.addClass('ui-button-check')
.addClass(this.options.icons[new_val]);
if (total) {
if (new_val !== 0) {
if (new_val !== total) {
new_val = 1;
} else {
new_val = 2;
}
}
}
this.$icon.removeClass()
.addClass('icon')
.addClass(this.options.icons[new_val]);
this.options.onchange && this.options.onchange(new_val);
this.current = new_val;
}
return this.current;
},
/** Template containing the check button and the title
*/
_template: function() {
return '<div class="ui-button-check" >' +
'<span class="icon"/>' +
'<span class="title"/>' +
'</div>';
}
});
});
client/galaxy/scripts/mvc/ui/ui-options.js
+14 -17
View File
@@ -5,6 +5,9 @@ define(['utils/utils', 'mvc/ui/ui-button-check'], function(Utils, ButtonCheck) {
var Base = Backbone.View.extend({
// initialize
initialize: function(options) {
// link this
var self = this;
// options
this.optionsDefault = {
visible : true,
@@ -33,15 +36,13 @@ var Base = Backbone.View.extend({
// add select/unselect all button
if (this.options.multiple) {
this.select_button = new ButtonCheck({
this.all_button = new ButtonCheck({
onclick: function() {
self.$('input').prop('checked', self.select_button.value() !== 0);
self.$('input').prop('checked', self.all_button.value() !== 0);
self._change();
}
});
this.$menu.addClass('ui-margin-bottom');
this.$menu.append(this.select_button.$el);
this.$menu.append('Select/Unselect all');
this.$menu.append(this.all_button.$el);
}
// hide input field
@@ -58,7 +59,6 @@ var Base = Backbone.View.extend({
}
// add change event. fires on trigger
var self = this;
this.on('change', function() {
self._change();
});
@@ -182,7 +182,8 @@ var Base = Backbone.View.extend({
*/
_refresh: function() {
// show/hide messages
if (this._size() == 0) {
var total = this._size();
if (total == 0) {
this._messageShow(this.options.error_text, 'danger');
this.$options.hide();
this.$menu.hide();
@@ -192,18 +193,14 @@ var Base = Backbone.View.extend({
this.$menu.show();
}
// refresh select/unselect button
if (this.select_button) {
var total = this._size();
if (this.all_button) {
var value = this._getValue();
if (!(value instanceof Array)) {
this.select_button.value(0);
value = 0;
} else {
if (value.length !== total) {
this.select_button.value(1);
} else {
this.select_button.value(2);
}
value = value.length;
}
this.all_button.value(value, total);
}
},
@@ -215,12 +212,12 @@ var Base = Backbone.View.extend({
this.$(':checked').each(function() {
selected.push($(this).val());
});
// get selected elements
if (!Utils.validate(selected)) {
return null;
}
// return multiple or single value
if (this.options.multiple) {
return selected;
client/galaxy/scripts/mvc/ui/ui-select-default.js
+40 -24
View File
@@ -1,5 +1,5 @@
// dependencies
define(['utils/utils'], function(Utils) {
define(['utils/utils', 'mvc/ui/ui-button-check'], function(Utils, ButtonCheck) {
/**
* This class creates/wraps a default html select field as backbone class.
@@ -20,6 +20,9 @@ var View = Backbone.View.extend({
// initialize
initialize : function(options) {
// link this
var self = this;
// configure options
this.options = Utils.merge(options, this.optionsDefault);
@@ -31,8 +34,23 @@ var View = Backbone.View.extend({
this.$icon = this.$el.find('.icon');
this.$button = this.$el.find('.button');
// configure multiple
// multiple select fields have an additional button and other custom properties
if (this.options.multiple) {
// create select all button
if (this.options.searchable) {
this.all_button = new ButtonCheck({
onclick: function() {
var new_value = [];
if (self.all_button.value() !== 0) {
new_value = self._availableOptions();
}
self.value(new_value);
self._change();
}
});
this.$el.prepend(this.all_button.$el);
}
// customize style and content
this.$el.addClass('ui-select-multiple');
this.$select.prop('multiple', true);
this.$button.remove();
@@ -59,7 +77,6 @@ var View = Backbone.View.extend({
}
// add change event. fires only on user activity
var self = this;
this.$select.on('change', function() {
self._change();
});
@@ -86,6 +103,9 @@ var View = Backbone.View.extend({
}
}
// refresh
this._refresh();
// validate and return value
return this._getValue();
},
@@ -193,29 +213,10 @@ var View = Backbone.View.extend({
this.$select.append(this._templateOption(options[key]));
}
// refresh
this._refresh();
// update to searchable field (in this case select2)
if (this.options.searchable) {
this.$select.select2('destroy');
this.$select.select2();
this.$('.select2-input').off('keydown.selectall').on('keydown.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 == 65){
var selected = [];
element.find('option').each(function(i, e){
selected[selected.length] = $(e).attr('value');
});
element.select2('val', selected);
} else if (event.which == 88){
element.select2('val', '');
}
$('.select2-drop-mask').click();
}
});
}
// set previous value
@@ -260,8 +261,8 @@ var View = Backbone.View.extend({
*/
_refresh: function() {
// count remaining entries
var remaining = this.$select.find('option').length;
if (remaining == 0) {
var total = this.$select.find('option').length;
if (total == 0) {
// disable select field
this.disable();
@@ -272,6 +273,21 @@ var View = Backbone.View.extend({
// enable select field
this.enable();
}
// refresh select/unselect button
if (this.all_button) {
var value = this._getValue();
this.all_button.value($.isArray(value) && value.length || 0, total);
}
},
/** Returns all currently available options
*/
_availableOptions: function() {
var available = [];
this.$select.find('option').each(function(i, e){
available.push($(e).attr('value'));
});
return available;
},
/** Template for select options
static/scripts/mvc/form/form-parameters.js
-4
View File
@@ -133,10 +133,6 @@ define(['utils/utils',
case 'radio':
SelectClass = Ui.Radio;
break;
default:
if (input_def.multiple) {
input_def.help = 'You may press Ctrl+A/Ctrl+X to select/unselect all options. ' + input_def.help;
}
}
// select field
static/scripts/mvc/ui/ui-button-check.js
+39 -10
View File
@@ -7,39 +7,68 @@ return Backbone.View.extend({
// default options
optionsDefault: {
icons : ['fa fa-square-o', 'fa fa-minus-square-o', 'fa fa-check-square-o'],
value : 0
value : 0,
title : 'Select/Unselect all'
},
// initialize
initialize : function(options) {
initialize: function(options) {
// configure options
this.options = Utils.merge(options, this.optionsDefault);
// create new element
this.setElement($('<div/>'));
this.setElement(this._template());
this.$title = this.$('.title');
this.$icon = this.$('.icon');
// set initial value
this.value(this.options.value);
// set title
this.$title.html(this.options.title);
// add event handler
var self = this;
this.$el.on('click', function() {
self.current = (!self.current && 2) || 0;
self.current = (self.current === 0 && 2) || 0;
self.value(self.current);
self.options.onclick && self.options.onclick();
});
},
// value
value : function (new_val) {
/* Sets a new value and/or returns the current value.
* @param{Integer} new_val - Set a new value 0=unchecked, 1=partial and 2=checked.
* OR:
* @param{Integer} new_val - Number of selected options.
* @param{Integer} total - Total number of available options.
*/
value: function (new_val, total) {
if (new_val !== undefined) {
this.current = new_val;
this.$el.removeClass()
.addClass('ui-button-check')
.addClass(this.options.icons[new_val]);
if (total) {
if (new_val !== 0) {
if (new_val !== total) {
new_val = 1;
} else {
new_val = 2;
}
}
}
this.$icon.removeClass()
.addClass('icon')
.addClass(this.options.icons[new_val]);
this.options.onchange && this.options.onchange(new_val);
this.current = new_val;
}
return this.current;
},
/** Template containing the check button and the title
*/
_template: function() {
return '<div class="ui-button-check" >' +
'<span class="icon"/>' +
'<span class="title"/>' +
'</div>';
}
});
});
static/scripts/mvc/ui/ui-options.js
+14 -17
View File
@@ -5,6 +5,9 @@ define(['utils/utils', 'mvc/ui/ui-button-check'], function(Utils, ButtonCheck) {
var Base = Backbone.View.extend({
// initialize
initialize: function(options) {
// link this
var self = this;
// options
this.optionsDefault = {
visible : true,
@@ -33,15 +36,13 @@ var Base = Backbone.View.extend({
// add select/unselect all button
if (this.options.multiple) {
this.select_button = new ButtonCheck({
this.all_button = new ButtonCheck({
onclick: function() {
self.$('input').prop('checked', self.select_button.value() !== 0);
self.$('input').prop('checked', self.all_button.value() !== 0);
self._change();
}
});
this.$menu.addClass('ui-margin-bottom');
this.$menu.append(this.select_button.$el);
this.$menu.append('Select/Unselect all');
this.$menu.append(this.all_button.$el);
}
// hide input field
@@ -58,7 +59,6 @@ var Base = Backbone.View.extend({
}
// add change event. fires on trigger
var self = this;
this.on('change', function() {
self._change();
});
@@ -182,7 +182,8 @@ var Base = Backbone.View.extend({
*/
_refresh: function() {
// show/hide messages
if (this._size() == 0) {
var total = this._size();
if (total == 0) {
this._messageShow(this.options.error_text, 'danger');
this.$options.hide();
this.$menu.hide();
@@ -192,18 +193,14 @@ var Base = Backbone.View.extend({
this.$menu.show();
}
// refresh select/unselect button
if (this.select_button) {
var total = this._size();
if (this.all_button) {
var value = this._getValue();
if (!(value instanceof Array)) {
this.select_button.value(0);
value = 0;
} else {
if (value.length !== total) {
this.select_button.value(1);
} else {
this.select_button.value(2);
}
value = value.length;
}
this.all_button.value(value, total);
}
},
@@ -215,12 +212,12 @@ var Base = Backbone.View.extend({
this.$(':checked').each(function() {
selected.push($(this).val());
});
// get selected elements
if (!Utils.validate(selected)) {
return null;
}
// return multiple or single value
if (this.options.multiple) {
return selected;
static/scripts/mvc/ui/ui-select-default.js
+40 -24
View File
@@ -1,5 +1,5 @@
// dependencies
define(['utils/utils'], function(Utils) {
define(['utils/utils', 'mvc/ui/ui-button-check'], function(Utils, ButtonCheck) {
/**
* This class creates/wraps a default html select field as backbone class.
@@ -20,6 +20,9 @@ var View = Backbone.View.extend({
// initialize
initialize : function(options) {
// link this
var self = this;
// configure options
this.options = Utils.merge(options, this.optionsDefault);
@@ -31,8 +34,23 @@ var View = Backbone.View.extend({
this.$icon = this.$el.find('.icon');
this.$button = this.$el.find('.button');
// configure multiple
// multiple select fields have an additional button and other custom properties
if (this.options.multiple) {
// create select all button
if (this.options.searchable) {
this.all_button = new ButtonCheck({
onclick: function() {
var new_value = [];
if (self.all_button.value() !== 0) {
new_value = self._availableOptions();
}
self.value(new_value);
self._change();
}
});
this.$el.prepend(this.all_button.$el);
}
// customize style and content
this.$el.addClass('ui-select-multiple');
this.$select.prop('multiple', true);
this.$button.remove();
@@ -59,7 +77,6 @@ var View = Backbone.View.extend({
}
// add change event. fires only on user activity
var self = this;
this.$select.on('change', function() {
self._change();
});
@@ -86,6 +103,9 @@ var View = Backbone.View.extend({
}
}
// refresh
this._refresh();
// validate and return value
return this._getValue();
},
@@ -193,29 +213,10 @@ var View = Backbone.View.extend({
this.$select.append(this._templateOption(options[key]));
}
// refresh
this._refresh();
// update to searchable field (in this case select2)
if (this.options.searchable) {
this.$select.select2('destroy');
this.$select.select2();
this.$('.select2-input').off('keydown.selectall').on('keydown.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 == 65){
var selected = [];
element.find('option').each(function(i, e){
selected[selected.length] = $(e).attr('value');
});
element.select2('val', selected);
} else if (event.which == 88){
element.select2('val', '');
}
$('.select2-drop-mask').click();
}
});
}
// set previous value
@@ -260,8 +261,8 @@ var View = Backbone.View.extend({
*/
_refresh: function() {
// count remaining entries
var remaining = this.$select.find('option').length;
if (remaining == 0) {
var total = this.$select.find('option').length;
if (total == 0) {
// disable select field
this.disable();
@@ -272,6 +273,21 @@ var View = Backbone.View.extend({
// enable select field
this.enable();
}
// refresh select/unselect button
if (this.all_button) {
var value = this._getValue();
this.all_button.value($.isArray(value) && value.length || 0, total);
}
},
/** Returns all currently available options
*/
_availableOptions: function() {
var available = [];
this.$select.find('option').each(function(i, e){
available.push($(e).attr('value'));
});
return available;
},
/** Template for select options
static/scripts/packed/mvc/form/form-parameters.js
+1 -1
View File
@@ -1 +1 @@
define(["utils/utils","mvc/ui/ui-misc","mvc/form/form-select-content","mvc/ui/ui-color-picker"],function(c,d,a,b){return Backbone.Model.extend({types:{text:"_fieldText",select:"_fieldSelect",data_column:"_fieldSelect",genomebuild:"_fieldSelect",data:"_fieldData",data_collection:"_fieldData",integer:"_fieldSlider","float":"_fieldSlider","boolean":"_fieldBoolean",drill_down:"_fieldDrilldown",color:"_fieldColor",hidden:"_fieldHidden",hidden_data:"_fieldHidden",baseurl:"_fieldHidden"},initialize:function(f,e){this.app=f},create:function(e){if(e.value===undefined){e.value=null}if(e.default_value===undefined){e.default_value=e.value}var g=null;var f=this.types[e.type];if(f&&typeof(this[f])==="function"){g=this[f].call(this,e)}if(!g){this.app.incompatible=true;if(e.options){g=this._fieldSelect(e)}else{g=this._fieldText(e)}console.debug("tools-form::_addRow() : Auto matched field type ("+e.type+").")}if(e.value!==undefined){g.value(e.value)}return g},_fieldData:function(e){if(!this.app.options.is_dynamic){e.info="Data input '"+e.name+"' ("+c.textify(e.extensions.toString())+")";e.value=null;return this._fieldHidden(e)}var f=this;return new a.View(this.app,{id:"field-"+e.id,extensions:e.extensions,optional:e.optional,multiple:e.multiple,type:e.type,data:e.options,onchange:function(){f.app.trigger("change")}})},_fieldSelect:function(e){if(!this.app.options.is_dynamic&&e.is_dynamic){return this._fieldText(e)}if(e.type=="data_column"){e.error_text="Missing columns in referenced dataset."}var g=[];for(var h in e.options){var j=e.options[h];g.push({label:j[0],value:j[1]})}var k=d.Select;switch(e.display){case"checkboxes":k=d.Checkbox;break;case"radio":k=d.Radio;break;default:if(e.multiple){e.help="You may press Ctrl+A/Ctrl+X to select/unselect all options. "+e.help}}var f=this;return new k.View({id:"field-"+e.id,data:g,error_text:e.error_text||"No options available",multiple:e.multiple,searchable:e.searchable,onchange:function(){f.app.trigger("change")}})},_fieldDrilldown:function(e){if(!this.app.options.is_dynamic&&e.is_dynamic){return this._fieldText(e)}var f=this;return new d.Drilldown.View({id:"field-"+e.id,data:e.options,display:e.display,onchange:function(){f.app.trigger("change")}})},_fieldText:function(e){if(e.options){e.area=e.multiple;if(!c.validate(e.value)){e.value=""}else{if(e.value instanceof Array){e.value=value.toString()}else{e.value=String(e.value).replace(/[\[\]'"\s]/g,"");if(e.multiple){e.value=e.value.replace(/,/g,"\n")}}}}var f=this;return new d.Input({id:"field-"+e.id,area:e.area,onchange:function(){f.app.trigger("change")}})},_fieldSlider:function(e){var f=this;return new d.Slider.View({id:"field-"+e.id,precise:e.type=="float",min:e.min,max:e.max,onchange:function(){f.app.trigger("change")}})},_fieldHidden:function(e){return new d.Hidden({id:"field-"+e.id,info:e.info})},_fieldBoolean:function(e){var f=this;return new d.RadioButton.View({id:"field-"+e.id,data:[{label:"Yes",value:"true"},{label:"No",value:"false"}],onchange:function(){f.app.trigger("change")}})},_fieldColor:function(e){var f=this;return new b({id:"field-"+e.id,onchange:function(){f.app.trigger("change")}})}});return{View:View}});
define(["utils/utils","mvc/ui/ui-misc","mvc/form/form-select-content","mvc/ui/ui-color-picker"],function(c,d,a,b){return Backbone.Model.extend({types:{text:"_fieldText",select:"_fieldSelect",data_column:"_fieldSelect",genomebuild:"_fieldSelect",data:"_fieldData",data_collection:"_fieldData",integer:"_fieldSlider","float":"_fieldSlider","boolean":"_fieldBoolean",drill_down:"_fieldDrilldown",color:"_fieldColor",hidden:"_fieldHidden",hidden_data:"_fieldHidden",baseurl:"_fieldHidden"},initialize:function(f,e){this.app=f},create:function(e){if(e.value===undefined){e.value=null}if(e.default_value===undefined){e.default_value=e.value}var g=null;var f=this.types[e.type];if(f&&typeof(this[f])==="function"){g=this[f].call(this,e)}if(!g){this.app.incompatible=true;if(e.options){g=this._fieldSelect(e)}else{g=this._fieldText(e)}console.debug("tools-form::_addRow() : Auto matched field type ("+e.type+").")}if(e.value!==undefined){g.value(e.value)}return g},_fieldData:function(e){if(!this.app.options.is_dynamic){e.info="Data input '"+e.name+"' ("+c.textify(e.extensions.toString())+")";e.value=null;return this._fieldHidden(e)}var f=this;return new a.View(this.app,{id:"field-"+e.id,extensions:e.extensions,optional:e.optional,multiple:e.multiple,type:e.type,data:e.options,onchange:function(){f.app.trigger("change")}})},_fieldSelect:function(e){if(!this.app.options.is_dynamic&&e.is_dynamic){return this._fieldText(e)}if(e.type=="data_column"){e.error_text="Missing columns in referenced dataset."}var g=[];for(var h in e.options){var j=e.options[h];g.push({label:j[0],value:j[1]})}var k=d.Select;switch(e.display){case"checkboxes":k=d.Checkbox;break;case"radio":k=d.Radio;break}var f=this;return new k.View({id:"field-"+e.id,data:g,error_text:e.error_text||"No options available",multiple:e.multiple,searchable:e.searchable,onchange:function(){f.app.trigger("change")}})},_fieldDrilldown:function(e){if(!this.app.options.is_dynamic&&e.is_dynamic){return this._fieldText(e)}var f=this;return new d.Drilldown.View({id:"field-"+e.id,data:e.options,display:e.display,onchange:function(){f.app.trigger("change")}})},_fieldText:function(e){if(e.options){e.area=e.multiple;if(!c.validate(e.value)){e.value=""}else{if(e.value instanceof Array){e.value=value.toString()}else{e.value=String(e.value).replace(/[\[\]'"\s]/g,"");if(e.multiple){e.value=e.value.replace(/,/g,"\n")}}}}var f=this;return new d.Input({id:"field-"+e.id,area:e.area,onchange:function(){f.app.trigger("change")}})},_fieldSlider:function(e){var f=this;return new d.Slider.View({id:"field-"+e.id,precise:e.type=="float",min:e.min,max:e.max,onchange:function(){f.app.trigger("change")}})},_fieldHidden:function(e){return new d.Hidden({id:"field-"+e.id,info:e.info})},_fieldBoolean:function(e){var f=this;return new d.RadioButton.View({id:"field-"+e.id,data:[{label:"Yes",value:"true"},{label:"No",value:"false"}],onchange:function(){f.app.trigger("change")}})},_fieldColor:function(e){var f=this;return new b({id:"field-"+e.id,onchange:function(){f.app.trigger("change")}})}});return{View:View}});
static/scripts/packed/mvc/ui/ui-button-check.js
+1 -1
View File
@@ -1 +1 @@
define(["utils/utils"],function(a){return Backbone.View.extend({optionsDefault:{icons:["fa fa-square-o","fa fa-minus-square-o","fa fa-check-square-o"],value:0},initialize:function(c){this.options=a.merge(c,this.optionsDefault);this.setElement($("<div/>"));this.value(this.options.value);var b=this;this.$el.on("click",function(){b.current=(!b.current&&2)||0;b.value(b.current);b.options.onclick&&b.options.onclick()})},value:function(b){if(b!==undefined){this.current=b;this.$el.removeClass().addClass("ui-button-check").addClass(this.options.icons[b]);this.options.onchange&&this.options.onchange(b)}return this.current}})});
define(["utils/utils"],function(a){return Backbone.View.extend({optionsDefault:{icons:["fa fa-square-o","fa fa-minus-square-o","fa fa-check-square-o"],value:0,title:"Select/Unselect all"},initialize:function(c){this.options=a.merge(c,this.optionsDefault);this.setElement(this._template());this.$title=this.$(".title");this.$icon=this.$(".icon");this.value(this.options.value);this.$title.html(this.options.title);var b=this;this.$el.on("click",function(){b.current=(b.current===0&&2)||0;b.value(b.current);b.options.onclick&&b.options.onclick()})},value:function(b,c){if(b!==undefined){if(c){if(b!==0){if(b!==c){b=1}else{b=2}}}this.$icon.removeClass().addClass("icon").addClass(this.options.icons[b]);this.options.onchange&&this.options.onchange(b);this.current=b}return this.current},_template:function(){return'<div class="ui-button-check" ><span class="icon"/><span class="title"/></div>'}})});
static/scripts/packed/mvc/ui/ui-options.js
+1 -1
View File
@@ -1 +1 @@
define(["utils/utils","mvc/ui/ui-button-check"],function(c,e){var b=Backbone.View.extend({initialize:function(i){this.optionsDefault={visible:true,data:[],id:c.uid(),error_text:"No data available.",wait_text:"Please wait...",multiple:false};this.options=c.merge(i,this.optionsDefault);this.setElement('<div class="ui-options"/>');this.$message=$("<div/>");this.$options=$(this._template(i));this.$menu=$('<div class="ui-options-menu"/>');this.$el.append(this.$message);this.$el.append(this.$menu);this.$el.append(this.$options);if(this.options.multiple){this.select_button=new e({onclick:function(){h.$("input").prop("checked",h.select_button.value()!==0);h._change()}});this.$menu.addClass("ui-margin-bottom");this.$menu.append(this.select_button.$el);this.$menu.append("Select/Unselect all")}if(!this.options.visible){this.$el.hide()}this.update(this.options.data);if(this.options.value!==undefined){this.value(this.options.value)}var h=this;this.on("change",function(){h._change()})},update:function(i){var l=this._getValue();this.$options.empty();if(this._templateOptions){this.$options.append(this._templateOptions(i))}else{for(var j in i){var k=$(this._templateOption(i[j]));k.addClass("ui-option");k.tooltip({title:i[j].tooltip,placement:"bottom"});this.$options.append(k)}}var h=this;this.$("input").on("change",function(){h.value(h._getValue());h._change()});this.value(l)},value:function(j){if(j!==undefined){this.$("input").prop("checked",false);if(j!==null){if(!(j instanceof Array)){j=[j]}for(var h in j){this.$('input[value="'+j[h]+'"]').first().prop("checked",true)}}}this._refresh();return this._getValue()},exists:function(j){if(j!==undefined){if(!(j instanceof Array)){j=[j]}for(var h in j){if(this.$('input[value="'+j[h]+'"]').length>0){return true}}}return false},first:function(){var h=this.$("input").first();if(h.length>0){return h.val()}else{return null}},wait:function(){if(this._size()==0){this._messageShow(this.options.wait_text,"info");this.$options.hide();this.$menu.hide()}},unwait:function(){this._refresh()},_change:function(){if(this.options.onchange){this.options.onchange(this._getValue())}},_refresh:function(){if(this._size()==0){this._messageShow(this.options.error_text,"danger");this.$options.hide();this.$menu.hide()}else{this._messageHide();this.$options.css("display","inline-block");this.$menu.show()}if(this.select_button){var h=this._size();var i=this._getValue();if(!(i instanceof Array)){this.select_button.value(0)}else{if(i.length!==h){this.select_button.value(1)}else{this.select_button.value(2)}}}},_getValue:function(){var h=[];this.$(":checked").each(function(){h.push($(this).val())});if(!c.validate(h)){return null}if(this.options.multiple){return h}else{return h[0]}},_size:function(){return this.$(".ui-option").length},_messageShow:function(i,h){this.$message.show();this.$message.removeClass();this.$message.addClass("ui-message alert alert-"+h);this.$message.html(i)},_messageHide:function(){this.$message.hide()},_template:function(){return'<div class="ui-options-list"/>'}});var a=b.extend({_templateOption:function(h){var i=c.uid();return'<div class="ui-option"><input id="'+i+'" type="'+this.options.type+'" name="'+this.options.id+'" value="'+h.value+'"/><label class="ui-options-label" for="'+i+'">'+h.label+"</label></div>"}});var f={};f.View=a.extend({initialize:function(h){h.type="radio";a.prototype.initialize.call(this,h)}});var d={};d.View=a.extend({initialize:function(h){h.multiple=true;h.type="checkbox";a.prototype.initialize.call(this,h)}});var g={};g.View=b.extend({initialize:function(h){b.prototype.initialize.call(this,h)},value:function(h){if(h!==undefined){this.$("input").prop("checked",false);this.$("label").removeClass("active");this.$('[value="'+h+'"]').prop("checked",true).closest("label").addClass("active")}return this._getValue()},_templateOption:function(j){var h="fa "+j.icon;if(!j.label){h+=" no-padding"}var i='<label class="btn btn-default">';if(j.icon){i+='<i class="'+h+'"/>'}i+='<input type="radio" name="'+this.options.id+'" value="'+j.value+'"/>';if(j.label){i+=j.label}i+="</label>";return i},_template:function(){return'<div class="btn-group ui-radiobutton" data-toggle="buttons"/>'}});return{Base:b,BaseIcons:a,Radio:f,RadioButton:g,Checkbox:d}});
define(["utils/utils","mvc/ui/ui-button-check"],function(c,e){var b=Backbone.View.extend({initialize:function(i){var h=this;this.optionsDefault={visible:true,data:[],id:c.uid(),error_text:"No data available.",wait_text:"Please wait...",multiple:false};this.options=c.merge(i,this.optionsDefault);this.setElement('<div class="ui-options"/>');this.$message=$("<div/>");this.$options=$(this._template(i));this.$menu=$('<div class="ui-options-menu"/>');this.$el.append(this.$message);this.$el.append(this.$menu);this.$el.append(this.$options);if(this.options.multiple){this.all_button=new e({onclick:function(){h.$("input").prop("checked",h.all_button.value()!==0);h._change()}});this.$menu.append(this.all_button.$el)}if(!this.options.visible){this.$el.hide()}this.update(this.options.data);if(this.options.value!==undefined){this.value(this.options.value)}this.on("change",function(){h._change()})},update:function(i){var l=this._getValue();this.$options.empty();if(this._templateOptions){this.$options.append(this._templateOptions(i))}else{for(var j in i){var k=$(this._templateOption(i[j]));k.addClass("ui-option");k.tooltip({title:i[j].tooltip,placement:"bottom"});this.$options.append(k)}}var h=this;this.$("input").on("change",function(){h.value(h._getValue());h._change()});this.value(l)},value:function(j){if(j!==undefined){this.$("input").prop("checked",false);if(j!==null){if(!(j instanceof Array)){j=[j]}for(var h in j){this.$('input[value="'+j[h]+'"]').first().prop("checked",true)}}}this._refresh();return this._getValue()},exists:function(j){if(j!==undefined){if(!(j instanceof Array)){j=[j]}for(var h in j){if(this.$('input[value="'+j[h]+'"]').length>0){return true}}}return false},first:function(){var h=this.$("input").first();if(h.length>0){return h.val()}else{return null}},wait:function(){if(this._size()==0){this._messageShow(this.options.wait_text,"info");this.$options.hide();this.$menu.hide()}},unwait:function(){this._refresh()},_change:function(){if(this.options.onchange){this.options.onchange(this._getValue())}},_refresh:function(){var h=this._size();if(h==0){this._messageShow(this.options.error_text,"danger");this.$options.hide();this.$menu.hide()}else{this._messageHide();this.$options.css("display","inline-block");this.$menu.show()}if(this.all_button){var i=this._getValue();if(!(i instanceof Array)){i=0}else{i=i.length}this.all_button.value(i,h)}},_getValue:function(){var h=[];this.$(":checked").each(function(){h.push($(this).val())});if(!c.validate(h)){return null}if(this.options.multiple){return h}else{return h[0]}},_size:function(){return this.$(".ui-option").length},_messageShow:function(i,h){this.$message.show();this.$message.removeClass();this.$message.addClass("ui-message alert alert-"+h);this.$message.html(i)},_messageHide:function(){this.$message.hide()},_template:function(){return'<div class="ui-options-list"/>'}});var a=b.extend({_templateOption:function(h){var i=c.uid();return'<div class="ui-option"><input id="'+i+'" type="'+this.options.type+'" name="'+this.options.id+'" value="'+h.value+'"/><label class="ui-options-label" for="'+i+'">'+h.label+"</label></div>"}});var f={};f.View=a.extend({initialize:function(h){h.type="radio";a.prototype.initialize.call(this,h)}});var d={};d.View=a.extend({initialize:function(h){h.multiple=true;h.type="checkbox";a.prototype.initialize.call(this,h)}});var g={};g.View=b.extend({initialize:function(h){b.prototype.initialize.call(this,h)},value:function(h){if(h!==undefined){this.$("input").prop("checked",false);this.$("label").removeClass("active");this.$('[value="'+h+'"]').prop("checked",true).closest("label").addClass("active")}return this._getValue()},_templateOption:function(j){var h="fa "+j.icon;if(!j.label){h+=" no-padding"}var i='<label class="btn btn-default">';if(j.icon){i+='<i class="'+h+'"/>'}i+='<input type="radio" name="'+this.options.id+'" value="'+j.value+'"/>';if(j.label){i+=j.label}i+="</label>";return i},_template:function(){return'<div class="btn-group ui-radiobutton" data-toggle="buttons"/>'}});return{Base:b,BaseIcons:a,Radio:f,RadioButton:g,Checkbox:d}});
static/scripts/packed/mvc/ui/ui-select-default.js
+1 -1
View File
@@ -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.$(".select2-input").off("keydown.selectall").on("keydown.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==65){var g=[];f.find("option").each(function(j,k){g[g.length]=$(k).attr("value")});f.select2("val",g)}else{if(h.which==88){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}});
define(["utils/utils","mvc/ui/ui-button-check"],function(a,b){var c=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(e){var d=this;this.options=a.merge(e,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){if(this.options.searchable){this.all_button=new b({onclick:function(){var f=[];if(d.all_button.value()!==0){f=d._availableOptions()}d.value(f);d._change()}});this.$el.prepend(this.all_button.$el)}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()}this.$select.on("change",function(){d._change()});this.on("change",function(){d._change()})},value:function(d){if(d!==undefined){if(d===null){d="__null__"}if(this.exists(d)||this.options.multiple){this.$select.val(d);if(this.$select.select2){this.$select.select2("val",d)}}}this._refresh();return this._getValue()},first:function(){var d=this.$select.find("option").first();if(d.length>0){return d.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(d){this.$select.append(this._templateOption(d));this._refresh()},del:function(d){this.$select.find("option[value="+d+"]").remove();this.$select.trigger("change");this._refresh()},update:function(d){var f=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 e in d){this.$select.append(this._templateOption(d[e]))}if(this.options.searchable){this.$select.select2("destroy");this.$select.select2()}this.value(f);if(this._getValue()===null){this.value(this.first())}},setOnChange:function(d){this.options.onchange=d},exists:function(d){return this.$select.find('option[value="'+d+'"]').length>0},_change:function(){if(this.options.onchange){this.options.onchange(this._getValue())}},_getValue:function(){var d=this.$select.val();if(!a.validate(d)){return null}return d},_refresh:function(){var d=this.$select.find("option").length;if(d==0){this.disable();this.$select.empty();this.$select.append(this._templateOption({value:"__null__",label:this.options.error_text}))}else{this.enable()}if(this.all_button){var e=this._getValue();this.all_button.value($.isArray(e)&&e.length||0,d)}},_availableOptions:function(){var d=[];this.$select.find("option").each(function(f,g){d.push($(g).attr("value"))});return d},_templateOption:function(d){return'<option value="'+d.value+'">'+d.label+"</option>"},_template:function(d){return'<div id="'+d.id+'" class="'+d.cls+'"><select id="'+d.id+'_select" class="select"/><div class="button"><i class="icon"/></div></div>'}});return{View:c}});
static/style/blue/base.css
+1 -1
View File
@@ -1464,7 +1464,7 @@ html[dir="rtl"] .select2-container-multi .select2-search-choice-close{left:auto;
.ui-form-slider .ui-form-slider-element{width:calc(100% - 110px);float:left;top:8px;left:10px}
.ui-radiobutton{width:100%}.ui-radiobutton label{height:23px;line-height:1em}
.ui-radiobutton i{padding-right:5px}
.ui-button-check{font-size:1.2em;width:1.2em;cursor:pointer}
.ui-button-check{cursor:pointer;margin-bottom:5px}.ui-button-check .icon{font-size:1.2em;width:1.2em}
.ui-color-picker .ui-color-picker-header{cursor:pointer}
.ui-color-picker .ui-color-picker-value{float:left;border-radius:3px;border:solid 1px #000000;width:12px;height:12px;margin-right:5px}
.ui-color-picker .ui-color-picker-label{float:left;line-height:1.2em}
static/style/src/less/ui.less
+5 -2
View File
@@ -441,9 +441,12 @@
}
.ui-button-check {
font-size: 1.2em;
width: 1.2em;
.icon {
font-size: 1.2em;
width: 1.2em;
}
cursor: pointer;
margin-bottom: @ui-margin-vertical;
}
.ui-color-picker {