diff --git a/client/galaxy/scripts/mvc/form/form-parameters.js b/client/galaxy/scripts/mvc/form/form-parameters.js index 76bf4c5d312..77f0ebf2c10 100644 --- a/client/galaxy/scripts/mvc/form/form-parameters.js +++ b/client/galaxy/scripts/mvc/form/form-parameters.js @@ -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 diff --git a/client/galaxy/scripts/mvc/ui/ui-button-check.js b/client/galaxy/scripts/mvc/ui/ui-button-check.js index 3ddc72af16f..0b40ca6c3b1 100644 --- a/client/galaxy/scripts/mvc/ui/ui-button-check.js +++ b/client/galaxy/scripts/mvc/ui/ui-button-check.js @@ -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($('
')); + 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 '
' + + '' + + '' + + '
'; } }); }); \ No newline at end of file diff --git a/client/galaxy/scripts/mvc/ui/ui-options.js b/client/galaxy/scripts/mvc/ui/ui-options.js index 6f793dd80b7..1e82cea6a5e 100644 --- a/client/galaxy/scripts/mvc/ui/ui-options.js +++ b/client/galaxy/scripts/mvc/ui/ui-options.js @@ -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; diff --git a/client/galaxy/scripts/mvc/ui/ui-select-default.js b/client/galaxy/scripts/mvc/ui/ui-select-default.js index c6ae0435f84..e2f441b8890 100644 --- a/client/galaxy/scripts/mvc/ui/ui-select-default.js +++ b/client/galaxy/scripts/mvc/ui/ui-select-default.js @@ -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 diff --git a/static/scripts/mvc/form/form-parameters.js b/static/scripts/mvc/form/form-parameters.js index 76bf4c5d312..77f0ebf2c10 100644 --- a/static/scripts/mvc/form/form-parameters.js +++ b/static/scripts/mvc/form/form-parameters.js @@ -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 diff --git a/static/scripts/mvc/ui/ui-button-check.js b/static/scripts/mvc/ui/ui-button-check.js index 3ddc72af16f..0b40ca6c3b1 100644 --- a/static/scripts/mvc/ui/ui-button-check.js +++ b/static/scripts/mvc/ui/ui-button-check.js @@ -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($('
')); + 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 '
' + + '' + + '' + + '
'; } }); }); \ No newline at end of file diff --git a/static/scripts/mvc/ui/ui-options.js b/static/scripts/mvc/ui/ui-options.js index 6f793dd80b7..1e82cea6a5e 100644 --- a/static/scripts/mvc/ui/ui-options.js +++ b/static/scripts/mvc/ui/ui-options.js @@ -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; diff --git a/static/scripts/mvc/ui/ui-select-default.js b/static/scripts/mvc/ui/ui-select-default.js index c6ae0435f84..e2f441b8890 100644 --- a/static/scripts/mvc/ui/ui-select-default.js +++ b/static/scripts/mvc/ui/ui-select-default.js @@ -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 diff --git a/static/scripts/packed/mvc/form/form-parameters.js b/static/scripts/packed/mvc/form/form-parameters.js index cebf02ffd9e..cbee0d8cfa1 100644 --- a/static/scripts/packed/mvc/form/form-parameters.js +++ b/static/scripts/packed/mvc/form/form-parameters.js @@ -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}}); \ No newline at end of file +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}}); \ No newline at end of file diff --git a/static/scripts/packed/mvc/ui/ui-button-check.js b/static/scripts/packed/mvc/ui/ui-button-check.js index fde93504328..6c166939a05 100644 --- a/static/scripts/packed/mvc/ui/ui-button-check.js +++ b/static/scripts/packed/mvc/ui/ui-button-check.js @@ -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($("
"));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}})}); \ No newline at end of file +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'
'}})}); \ No newline at end of file diff --git a/static/scripts/packed/mvc/ui/ui-options.js b/static/scripts/packed/mvc/ui/ui-options.js index f48ebefd092..fb14f3dce83 100644 --- a/static/scripts/packed/mvc/ui/ui-options.js +++ b/static/scripts/packed/mvc/ui/ui-options.js @@ -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('
');this.$message=$("
");this.$options=$(this._template(i));this.$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'
'}});var a=b.extend({_templateOption:function(h){var i=c.uid();return'
"}});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='";return i},_template:function(){return'
'}});return{Base:b,BaseIcons:a,Radio:f,RadioButton:g,Checkbox:d}}); \ No newline at end of file +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('
');this.$message=$("
");this.$options=$(this._template(i));this.$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'
'}});var a=b.extend({_templateOption:function(h){var i=c.uid();return'
"}});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='";return i},_template:function(){return'
'}});return{Base:b,BaseIcons:a,Radio:f,RadioButton:g,Checkbox:d}}); \ No newline at end of file diff --git a/static/scripts/packed/mvc/ui/ui-select-default.js b/static/scripts/packed/mvc/ui/ui-select-default.js index 5e299f1a4c3..376b3bc9eed 100644 --- a/static/scripts/packed/mvc/ui/ui-select-default.js +++ b/static/scripts/packed/mvc/ui/ui-select-default.js @@ -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'"},_template:function(c){return'
'}});return{View:c}}); \ No newline at end of file diff --git a/static/style/blue/base.css b/static/style/blue/base.css index 74d08396b9c..6bc866344c5 100644 --- a/static/style/blue/base.css +++ b/static/style/blue/base.css @@ -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} diff --git a/static/style/src/less/ui.less b/static/style/src/less/ui.less index 826b5470413..ef8b2d0acb5 100644 --- a/static/style/src/less/ui.less +++ b/static/style/src/less/ui.less @@ -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 {