commit/galaxy-central: guerler: ToolForm: Add select/unselect fields, update styles
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/16593d9d24fe/ Changeset: 16593d9d24fe User: guerler Date: 2015-02-10 21:32:59+00:00 Summary: ToolForm: Add select/unselect fields, update styles Affected #: 14 files diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b client/galaxy/scripts/mvc/ui/ui-button-check.js --- /dev/null +++ b/client/galaxy/scripts/mvc/ui/ui-button-check.js @@ -0,0 +1,45 @@ +// dependencies +define(['utils/utils'], function(Utils) { + +// plugin +return Backbone.View.extend({ + + // default options + optionsDefault: { + icons : ['fa fa-square-o', 'fa fa-minus-square-o', 'fa fa-check-square-o'], + value : 0 + }, + + // initialize + initialize : function(options) { + // configure options + this.options = Utils.merge(options, this.optionsDefault); + + // create new element + this.setElement($('<div/>')); + + // set initial value + this.value(this.options.value); + + // add event handler + var self = this; + this.$el.on('click', function() { + self.current = (!self.current && 2) || 0; + self.value(self.current); + self.options.onclick && self.options.onclick(); + }); + }, + + // value + value : function (new_val) { + if (new_val !== undefined) { + this.current = new_val; + this.$el.removeClass() + .addClass('ui-checkbutton') + .addClass(this.options.icons[new_val]); + this.options.onchange && this.options.onchange(new_val); + } + return this.current; + } +}); +}); \ No newline at end of file diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b client/galaxy/scripts/mvc/ui/ui-drilldown.js --- a/client/galaxy/scripts/mvc/ui/ui-drilldown.js +++ b/client/galaxy/scripts/mvc/ui/ui-drilldown.js @@ -4,28 +4,19 @@ /** * This class creates/wraps a drill down element. */ -var View = Options.Base.extend({ +var View = Options.BaseIcons.extend({ // initialize initialize: function(options) { - this.display = options.display || 'checkbox'; - options.multiple = (this.display == 'checkbox'); - Options.Base.prototype.initialize.call(this, options); + options.type = options.display || 'checkbox'; + options.multiple = (options.display == 'checkbox'); + Options.BaseIcons.prototype.initialize.call(this, options); }, - - /** Template for input field - */ - _templateOption: function(name, value, selected) { - return '<div>' + - '<input name="' + this.options.id + '" class="ui-option" type="' + this.display + '" value="' + value + '">' + name + - '<div/>'; - }, - + /** Template to create options tree */ _templateOptions: function(options) { // link this var self = this; - // attach show/hide event function attachEvents($button, $subgroup) { function setVisibility (visible) { @@ -45,52 +36,58 @@ setVisibility(!$button.is_expanded); }); } - + // recursive function which iterates through options function iterate ($tmpl, options) { for (i in options) { // current option level in hierarchy var level = options[i]; - + // check for options var has_options = level.options.length > 0; - + // build template var $group = $('<div/>'); if (has_options) { // create button and add flag - var $button = $('<span class="ui-drilldown-button form-toggle icon-button toggle-expand" style="position: relative; top: 2px;"/>'); - + var $button = $('<span class="ui-drilldown-button form-toggle icon-button toggle-expand"/>'); + // add expand group var $buttongroup = $('<div/>'); $buttongroup.append($button); - $buttongroup.append(self._templateOption(level.name, level.value)); + $buttongroup.append(self._templateOption({ + label: level.name, + value: level.value + })); $group.append($buttongroup); - + // add sub group var $subgroup = $('<div style="display: none; margin-left: 25px;"/>'); iterate($subgroup, level.options); $group.append($subgroup); - + // attach click event to collapse/expand hierarchy attachEvents($button, $subgroup); } else { - $group.append(self._templateOption(level.name, level.value)); + $group.append(self._templateOption({ + label: level.name, + value: level.value + })); } $tmpl.append($group); } } - + // iterate through options and create dom var $tmpl = $('<div/>'); iterate($tmpl, options); return $tmpl; }, - + /** Template for drill down view */ _template: function(options) { - return '<div class="ui-options-input drilldown-container" id="' + options.id + '"/>'; + return '<div class="ui-options-list drilldown-container" id="' + options.id + '"/>'; } }); diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b client/galaxy/scripts/mvc/ui/ui-misc.js --- a/client/galaxy/scripts/mvc/ui/ui-misc.js +++ b/client/galaxy/scripts/mvc/ui/ui-misc.js @@ -1,6 +1,13 @@ // dependencies -define(['utils/utils', 'mvc/ui/ui-select-default', 'mvc/ui/ui-slider', 'mvc/ui/ui-options', 'mvc/ui/ui-drilldown', 'mvc/ui/ui-button-menu', 'mvc/ui/ui-modal'], - function(Utils, Select, Slider, Options, Drilldown, ButtonMenu, Modal) { +define(['utils/utils', + 'mvc/ui/ui-select-default', + 'mvc/ui/ui-slider', + 'mvc/ui/ui-options', + 'mvc/ui/ui-drilldown', + 'mvc/ui/ui-button-menu', + 'mvc/ui/ui-button-check', + 'mvc/ui/ui-modal'], + function(Utils, Select, Slider, Options, Drilldown, ButtonMenu, ButtonCheck, Modal) { /** * This class contains backbone wrappers for basic ui elements such as Images, Labels, Buttons, Input fields etc. @@ -448,59 +455,12 @@ } }); -// plugin -var CheckButton = Backbone.View.extend({ - - // default options - optionsDefault: { - class_add : 'fa fa-square-o', - class_remove : 'fa fa-check-square-o', - class_partial : 'fa fa-minus-square-o', - value : false - }, - - // initialize - initialize : function(options) { - // configure options - this.options = Utils.merge(options, this.optionsDefault); - - // create new element - this.setElement($('<div/>')); - - // set initial value - this.value(Boolean(this.options.value)); - - // add event handler - var self = this; - this.$el.on('click', function() { - self.value(!self.current); - }); - }, - - // value - value : function (new_val) { - if (new_val !== undefined) { - this.current = new_val; - if (new_val) { - this.$el.removeClass() - .addClass('ui-checkbutton') - .addClass(this.options.class_remove); - } else { - this.$el.removeClass() - .addClass('ui-checkbutton') - .addClass(this.options.class_add); - } - this.options.onchange && this.options.onchange(new_val); - } - return this.current; - } -}); - // return return { Anchor : Anchor, Button : Button, ButtonIcon : ButtonIcon, + ButtonCheck : ButtonCheck, ButtonMenu : ButtonMenu, Icon : Icon, Image : Image, @@ -511,7 +471,6 @@ RadioButton : Options.RadioButton, Checkbox : Options.Checkbox, Radio : Options.Radio, - CheckButton : CheckButton, Searchbox : Searchbox, Select : Select, Hidden : Hidden, diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b client/galaxy/scripts/mvc/ui/ui-options.js --- a/client/galaxy/scripts/mvc/ui/ui-options.js +++ b/client/galaxy/scripts/mvc/ui/ui-options.js @@ -1,5 +1,5 @@ // dependencies -define(['utils/utils'], function(Utils) { +define(['utils/utils', 'mvc/ui/ui-button-check'], function(Utils, ButtonCheck) { /** Base class for options based ui elements **/ var Base = Backbone.View.extend({ @@ -11,7 +11,8 @@ data : [], id : Utils.uuid(), error_text : 'No data available.', - wait_text : 'Please wait...' + wait_text : 'Please wait...', + multiple : false }; // configure options @@ -21,13 +22,28 @@ this.setElement('<div class="ui-options"/>'); // create elements - this.$message = $('<div/>'); - this.$options = $(this._template(options)); + this.$message = $('<div/>'); + this.$options = $(this._template(options)); + this.$menu = $('<div class="ui-options-menu"/>'); // append this.$el.append(this.$message); + this.$el.append(this.$menu); this.$el.append(this.$options); + // add select/unselect all button + if (this.options.multiple) { + this.select_button = new ButtonCheck({ + onclick: function() { + self.$('input').prop('checked', self.select_button.value() !== 0); + self._change(); + } + }); + this.$menu.addClass('ui-margin-bottom'); + this.$menu.append(this.select_button.$el); + this.$menu.append('Select/Unselect all'); + } + // hide input field if (!this.options.visible) { this.$el.hide(); @@ -73,7 +89,7 @@ // add change events var self = this; - this.$el.find('input').on('change', function() { + this.$('input').on('change', function() { self.value(self._getValue()); self._change(); }); @@ -96,11 +112,11 @@ } // reset selection - this.$el.find('input').prop('checked', false); + this.$('input').prop('checked', false); // update to new selection for (var i in new_value) { - this.$el.find('input[value="' + new_value[i] + '"]').first().prop('checked', true); + this.$('input[value="' + new_value[i] + '"]').first().prop('checked', true); }; } @@ -116,7 +132,7 @@ value = [value]; } for (var i in value) { - if (this.$el.find('input[value="' + value[i] + '"]').length > 0) { + if (this.$('input[value="' + value[i] + '"]').length > 0) { return true; } } @@ -127,7 +143,7 @@ /** Return first available option */ first: function() { - var options = this.$el.find('input'); + var options = this.$('input'); if (options.length > 0) { return options.val(); } else { @@ -160,8 +176,22 @@ /** Trigger custom onchange callback function */ _change: function() { + var current = this._getValue(); if (this.options.onchange) { - this.options.onchange(this._getValue()); + this.options.onchange(current); + } + if (this.select_button) { + var total = this._size(); + var value = this._getValue(); + if (!(value instanceof Array)) { + this.select_button.value(0); + } else { + if (value.length !== total) { + this.select_button.value(1); + } else { + this.select_button.value(2); + } + } } }, @@ -171,9 +201,11 @@ 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(); } }, @@ -181,7 +213,7 @@ */ _getValue: function() { // get selected values - var selected = this.$el.find(':checked'); + var selected = this.$(':checked'); if (selected.length == 0) { return '__null__'; } @@ -201,7 +233,7 @@ /** Returns the number of options */ _size: function() { - return this.$el.find('.ui-option').length; + return this.$('.ui-option').length; }, /** Show message instead if options @@ -222,42 +254,37 @@ /** Main template function */ _template: function() { - return '<div class="ui-options-input"/>'; + return '<div class="ui-options-list"/>'; + } +}); + +/** Iconized **/ +var BaseIcons = Base.extend({ + _templateOption: function(pair) { + var id = Utils.uuid(); + return '<div class="ui-option">' + + '<input id="' + id + '" type="' + this.options.type + '" name="' + this.options.id + '" value="' + pair.value + '"/>' + + '<label class="ui-options-label" for="' + id + '">' + pair.label + '</label>' + + '</div>'; } }); /** Radio button field **/ var Radio = {}; -Radio.View = Base.extend({ - // initialize +Radio.View = BaseIcons.extend({ initialize: function(options) { - Base.prototype.initialize.call(this, options); - }, - - /** Template for a single option - */ - _templateOption: function(pair) { - return '<div>' + - '<input type="radio" name="' + this.options.id + '" value="' + pair.value + '"/>' + pair.label + '<br>' + - '</div>'; + options.type = 'radio'; + BaseIcons.prototype.initialize.call(this, options); } }); /** Checkbox options field **/ var Checkbox = {}; -Checkbox.View = Base.extend({ - // initialize +Checkbox.View = BaseIcons.extend({ initialize: function(options) { options.multiple = true; - Base.prototype.initialize.call(this, options); - }, - - /** Template for a single option - */ - _templateOption: function(pair) { - return '<div>' + - '<input type="checkbox" name="' + this.options.id + '" value="' + pair.value + '"/>' + pair.label + '<br>' + - '</div>'; + options.type = 'checkbox'; + BaseIcons.prototype.initialize.call(this, options); } }); @@ -274,9 +301,9 @@ value: function (new_value) { // set new value if (new_value !== undefined) { - this.$el.find('input').prop('checked', false); - this.$el.find('label').removeClass('active'); - this.$el.find('[value="' + new_value + '"]').prop('checked', true).closest('label').addClass('active'); + this.$('input').prop('checked', false); + this.$('label').removeClass('active'); + this.$('[value="' + new_value + '"]').prop('checked', true).closest('label').addClass('active'); } // get and return value @@ -294,7 +321,7 @@ if (pair.icon) { tmpl += '<i class="' + cls + '"/>'; } - tmpl += '<input type="radio" name="' + this.options.id + '" value="' + pair.value + '">'; + tmpl += '<input type="radio" name="' + this.options.id + '" value="' + pair.value + '"/>'; if (pair.label) { tmpl += pair.label; } @@ -311,6 +338,7 @@ return { Base : Base, + BaseIcons : BaseIcons, Radio : Radio, RadioButton : RadioButton, Checkbox : Checkbox diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/scripts/mvc/ui/ui-button-check.js --- /dev/null +++ b/static/scripts/mvc/ui/ui-button-check.js @@ -0,0 +1,45 @@ +// dependencies +define(['utils/utils'], function(Utils) { + +// plugin +return Backbone.View.extend({ + + // default options + optionsDefault: { + icons : ['fa fa-square-o', 'fa fa-minus-square-o', 'fa fa-check-square-o'], + value : 0 + }, + + // initialize + initialize : function(options) { + // configure options + this.options = Utils.merge(options, this.optionsDefault); + + // create new element + this.setElement($('<div/>')); + + // set initial value + this.value(this.options.value); + + // add event handler + var self = this; + this.$el.on('click', function() { + self.current = (!self.current && 2) || 0; + self.value(self.current); + self.options.onclick && self.options.onclick(); + }); + }, + + // value + value : function (new_val) { + if (new_val !== undefined) { + this.current = new_val; + this.$el.removeClass() + .addClass('ui-checkbutton') + .addClass(this.options.icons[new_val]); + this.options.onchange && this.options.onchange(new_val); + } + return this.current; + } +}); +}); \ No newline at end of file diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/scripts/mvc/ui/ui-drilldown.js --- a/static/scripts/mvc/ui/ui-drilldown.js +++ b/static/scripts/mvc/ui/ui-drilldown.js @@ -4,28 +4,19 @@ /** * This class creates/wraps a drill down element. */ -var View = Options.Base.extend({ +var View = Options.BaseIcons.extend({ // initialize initialize: function(options) { - this.display = options.display || 'checkbox'; - options.multiple = (this.display == 'checkbox'); - Options.Base.prototype.initialize.call(this, options); + options.type = options.display || 'checkbox'; + options.multiple = (options.display == 'checkbox'); + Options.BaseIcons.prototype.initialize.call(this, options); }, - - /** Template for input field - */ - _templateOption: function(name, value, selected) { - return '<div>' + - '<input name="' + this.options.id + '" class="ui-option" type="' + this.display + '" value="' + value + '">' + name + - '<div/>'; - }, - + /** Template to create options tree */ _templateOptions: function(options) { // link this var self = this; - // attach show/hide event function attachEvents($button, $subgroup) { function setVisibility (visible) { @@ -45,52 +36,58 @@ setVisibility(!$button.is_expanded); }); } - + // recursive function which iterates through options function iterate ($tmpl, options) { for (i in options) { // current option level in hierarchy var level = options[i]; - + // check for options var has_options = level.options.length > 0; - + // build template var $group = $('<div/>'); if (has_options) { // create button and add flag - var $button = $('<span class="ui-drilldown-button form-toggle icon-button toggle-expand" style="position: relative; top: 2px;"/>'); - + var $button = $('<span class="ui-drilldown-button form-toggle icon-button toggle-expand"/>'); + // add expand group var $buttongroup = $('<div/>'); $buttongroup.append($button); - $buttongroup.append(self._templateOption(level.name, level.value)); + $buttongroup.append(self._templateOption({ + label: level.name, + value: level.value + })); $group.append($buttongroup); - + // add sub group var $subgroup = $('<div style="display: none; margin-left: 25px;"/>'); iterate($subgroup, level.options); $group.append($subgroup); - + // attach click event to collapse/expand hierarchy attachEvents($button, $subgroup); } else { - $group.append(self._templateOption(level.name, level.value)); + $group.append(self._templateOption({ + label: level.name, + value: level.value + })); } $tmpl.append($group); } } - + // iterate through options and create dom var $tmpl = $('<div/>'); iterate($tmpl, options); return $tmpl; }, - + /** Template for drill down view */ _template: function(options) { - return '<div class="ui-options-input drilldown-container" id="' + options.id + '"/>'; + return '<div class="ui-options-list drilldown-container" id="' + options.id + '"/>'; } }); diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/scripts/mvc/ui/ui-misc.js --- a/static/scripts/mvc/ui/ui-misc.js +++ b/static/scripts/mvc/ui/ui-misc.js @@ -1,6 +1,13 @@ // dependencies -define(['utils/utils', 'mvc/ui/ui-select-default', 'mvc/ui/ui-slider', 'mvc/ui/ui-options', 'mvc/ui/ui-drilldown', 'mvc/ui/ui-button-menu', 'mvc/ui/ui-modal'], - function(Utils, Select, Slider, Options, Drilldown, ButtonMenu, Modal) { +define(['utils/utils', + 'mvc/ui/ui-select-default', + 'mvc/ui/ui-slider', + 'mvc/ui/ui-options', + 'mvc/ui/ui-drilldown', + 'mvc/ui/ui-button-menu', + 'mvc/ui/ui-button-check', + 'mvc/ui/ui-modal'], + function(Utils, Select, Slider, Options, Drilldown, ButtonMenu, ButtonCheck, Modal) { /** * This class contains backbone wrappers for basic ui elements such as Images, Labels, Buttons, Input fields etc. @@ -448,59 +455,12 @@ } }); -// plugin -var CheckButton = Backbone.View.extend({ - - // default options - optionsDefault: { - class_add : 'fa fa-square-o', - class_remove : 'fa fa-check-square-o', - class_partial : 'fa fa-minus-square-o', - value : false - }, - - // initialize - initialize : function(options) { - // configure options - this.options = Utils.merge(options, this.optionsDefault); - - // create new element - this.setElement($('<div/>')); - - // set initial value - this.value(Boolean(this.options.value)); - - // add event handler - var self = this; - this.$el.on('click', function() { - self.value(!self.current); - }); - }, - - // value - value : function (new_val) { - if (new_val !== undefined) { - this.current = new_val; - if (new_val) { - this.$el.removeClass() - .addClass('ui-checkbutton') - .addClass(this.options.class_remove); - } else { - this.$el.removeClass() - .addClass('ui-checkbutton') - .addClass(this.options.class_add); - } - this.options.onchange && this.options.onchange(new_val); - } - return this.current; - } -}); - // return return { Anchor : Anchor, Button : Button, ButtonIcon : ButtonIcon, + ButtonCheck : ButtonCheck, ButtonMenu : ButtonMenu, Icon : Icon, Image : Image, @@ -511,7 +471,6 @@ RadioButton : Options.RadioButton, Checkbox : Options.Checkbox, Radio : Options.Radio, - CheckButton : CheckButton, Searchbox : Searchbox, Select : Select, Hidden : Hidden, diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/scripts/mvc/ui/ui-options.js --- a/static/scripts/mvc/ui/ui-options.js +++ b/static/scripts/mvc/ui/ui-options.js @@ -1,5 +1,5 @@ // dependencies -define(['utils/utils'], function(Utils) { +define(['utils/utils', 'mvc/ui/ui-button-check'], function(Utils, ButtonCheck) { /** Base class for options based ui elements **/ var Base = Backbone.View.extend({ @@ -11,7 +11,8 @@ data : [], id : Utils.uuid(), error_text : 'No data available.', - wait_text : 'Please wait...' + wait_text : 'Please wait...', + multiple : false }; // configure options @@ -21,13 +22,28 @@ this.setElement('<div class="ui-options"/>'); // create elements - this.$message = $('<div/>'); - this.$options = $(this._template(options)); + this.$message = $('<div/>'); + this.$options = $(this._template(options)); + this.$menu = $('<div class="ui-options-menu"/>'); // append this.$el.append(this.$message); + this.$el.append(this.$menu); this.$el.append(this.$options); + // add select/unselect all button + if (this.options.multiple) { + this.select_button = new ButtonCheck({ + onclick: function() { + self.$('input').prop('checked', self.select_button.value() !== 0); + self._change(); + } + }); + this.$menu.addClass('ui-margin-bottom'); + this.$menu.append(this.select_button.$el); + this.$menu.append('Select/Unselect all'); + } + // hide input field if (!this.options.visible) { this.$el.hide(); @@ -73,7 +89,7 @@ // add change events var self = this; - this.$el.find('input').on('change', function() { + this.$('input').on('change', function() { self.value(self._getValue()); self._change(); }); @@ -96,11 +112,11 @@ } // reset selection - this.$el.find('input').prop('checked', false); + this.$('input').prop('checked', false); // update to new selection for (var i in new_value) { - this.$el.find('input[value="' + new_value[i] + '"]').first().prop('checked', true); + this.$('input[value="' + new_value[i] + '"]').first().prop('checked', true); }; } @@ -116,7 +132,7 @@ value = [value]; } for (var i in value) { - if (this.$el.find('input[value="' + value[i] + '"]').length > 0) { + if (this.$('input[value="' + value[i] + '"]').length > 0) { return true; } } @@ -127,7 +143,7 @@ /** Return first available option */ first: function() { - var options = this.$el.find('input'); + var options = this.$('input'); if (options.length > 0) { return options.val(); } else { @@ -160,8 +176,22 @@ /** Trigger custom onchange callback function */ _change: function() { + var current = this._getValue(); if (this.options.onchange) { - this.options.onchange(this._getValue()); + this.options.onchange(current); + } + if (this.select_button) { + var total = this._size(); + var value = this._getValue(); + if (!(value instanceof Array)) { + this.select_button.value(0); + } else { + if (value.length !== total) { + this.select_button.value(1); + } else { + this.select_button.value(2); + } + } } }, @@ -171,9 +201,11 @@ 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(); } }, @@ -181,7 +213,7 @@ */ _getValue: function() { // get selected values - var selected = this.$el.find(':checked'); + var selected = this.$(':checked'); if (selected.length == 0) { return '__null__'; } @@ -201,7 +233,7 @@ /** Returns the number of options */ _size: function() { - return this.$el.find('.ui-option').length; + return this.$('.ui-option').length; }, /** Show message instead if options @@ -222,42 +254,37 @@ /** Main template function */ _template: function() { - return '<div class="ui-options-input"/>'; + return '<div class="ui-options-list"/>'; + } +}); + +/** Iconized **/ +var BaseIcons = Base.extend({ + _templateOption: function(pair) { + var id = Utils.uuid(); + return '<div class="ui-option">' + + '<input id="' + id + '" type="' + this.options.type + '" name="' + this.options.id + '" value="' + pair.value + '"/>' + + '<label class="ui-options-label" for="' + id + '">' + pair.label + '</label>' + + '</div>'; } }); /** Radio button field **/ var Radio = {}; -Radio.View = Base.extend({ - // initialize +Radio.View = BaseIcons.extend({ initialize: function(options) { - Base.prototype.initialize.call(this, options); - }, - - /** Template for a single option - */ - _templateOption: function(pair) { - return '<div>' + - '<input type="radio" name="' + this.options.id + '" value="' + pair.value + '"/>' + pair.label + '<br>' + - '</div>'; + options.type = 'radio'; + BaseIcons.prototype.initialize.call(this, options); } }); /** Checkbox options field **/ var Checkbox = {}; -Checkbox.View = Base.extend({ - // initialize +Checkbox.View = BaseIcons.extend({ initialize: function(options) { options.multiple = true; - Base.prototype.initialize.call(this, options); - }, - - /** Template for a single option - */ - _templateOption: function(pair) { - return '<div>' + - '<input type="checkbox" name="' + this.options.id + '" value="' + pair.value + '"/>' + pair.label + '<br>' + - '</div>'; + options.type = 'checkbox'; + BaseIcons.prototype.initialize.call(this, options); } }); @@ -274,9 +301,9 @@ value: function (new_value) { // set new value if (new_value !== undefined) { - this.$el.find('input').prop('checked', false); - this.$el.find('label').removeClass('active'); - this.$el.find('[value="' + new_value + '"]').prop('checked', true).closest('label').addClass('active'); + this.$('input').prop('checked', false); + this.$('label').removeClass('active'); + this.$('[value="' + new_value + '"]').prop('checked', true).closest('label').addClass('active'); } // get and return value @@ -294,7 +321,7 @@ if (pair.icon) { tmpl += '<i class="' + cls + '"/>'; } - tmpl += '<input type="radio" name="' + this.options.id + '" value="' + pair.value + '">'; + tmpl += '<input type="radio" name="' + this.options.id + '" value="' + pair.value + '"/>'; if (pair.label) { tmpl += pair.label; } @@ -311,6 +338,7 @@ return { Base : Base, + BaseIcons : BaseIcons, Radio : Radio, RadioButton : RadioButton, Checkbox : Checkbox diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/scripts/packed/mvc/ui/ui-button-check.js --- /dev/null +++ b/static/scripts/packed/mvc/ui/ui-button-check.js @@ -0,0 +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-checkbutton").addClass(this.options.icons[b]);this.options.onchange&&this.options.onchange(b)}return this.current}})}); \ No newline at end of file diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/scripts/packed/mvc/ui/ui-drilldown.js --- a/static/scripts/packed/mvc/ui/ui-drilldown.js +++ b/static/scripts/packed/mvc/ui/ui-drilldown.js @@ -1,1 +1,1 @@ -define(["utils/utils","mvc/ui/ui-options"],function(b,a){var c=a.Base.extend({initialize:function(d){this.display=d.display||"checkbox";d.multiple=(this.display=="checkbox");a.Base.prototype.initialize.call(this,d)},_templateOption:function(d,f,e){return'<div><input name="'+this.options.id+'" class="ui-option" type="'+this.display+'" value="'+f+'">'+d+"<div/>"},_templateOptions:function(f){var e=this;function g(k,l){function j(m){if(m){l.fadeIn("fast");k.removeClass("toggle-expand");k.addClass("toggle");k.is_expanded=true}else{l.hide();k.removeClass("toggle");k.addClass("toggle-expand");k.is_expanded=false}}k.on("click",function(){j(!k.is_expanded)})}function d(p,k){for(i in k){var q=k[i];var m=q.options.length>0;var l=$("<div/>");if(m){var n=$('<span class="ui-drilldown-button form-toggle icon-button toggle-expand" style="position: relative; top: 2px;"/>');var j=$("<div/>");j.append(n);j.append(e._templateOption(q.name,q.value));l.append(j);var o=$('<div style="display: none; margin-left: 25px;"/>');d(o,q.options);l.append(o);g(n,o)}else{l.append(e._templateOption(q.name,q.value))}p.append(l)}}var h=$("<div/>");d(h,f);return h},_template:function(d){return'<div class="ui-options-input drilldown-container" id="'+d.id+'"/>'}});return{View:c}}); \ No newline at end of file +define(["utils/utils","mvc/ui/ui-options"],function(b,a){var c=a.BaseIcons.extend({initialize:function(d){d.type=d.display||"checkbox";d.multiple=(d.display=="checkbox");a.BaseIcons.prototype.initialize.call(this,d)},_templateOptions:function(f){var e=this;function g(k,l){function j(m){if(m){l.fadeIn("fast");k.removeClass("toggle-expand");k.addClass("toggle");k.is_expanded=true}else{l.hide();k.removeClass("toggle");k.addClass("toggle-expand");k.is_expanded=false}}k.on("click",function(){j(!k.is_expanded)})}function d(p,k){for(i in k){var q=k[i];var m=q.options.length>0;var l=$("<div/>");if(m){var n=$('<span class="ui-drilldown-button form-toggle icon-button toggle-expand"/>');var j=$("<div/>");j.append(n);j.append(e._templateOption({label:q.name,value:q.value}));l.append(j);var o=$('<div style="display: none; margin-left: 25px;"/>');d(o,q.options);l.append(o);g(n,o)}else{l.append(e._templateOption({label:q.name,value:q.value}))}p.append(l)}}var h=$("<div/>");d(h,f);return h},_template:function(d){return'<div class="ui-options-list drilldown-container" id="'+d.id+'"/>'}});return{View:c}}); \ No newline at end of file diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/scripts/packed/mvc/ui/ui-misc.js --- a/static/scripts/packed/mvc/ui/ui-misc.js +++ b/static/scripts/packed/mvc/ui/ui-misc.js @@ -1,1 +1,1 @@ -define(["utils/utils","mvc/ui/ui-select-default","mvc/ui/ui-slider","mvc/ui/ui-options","mvc/ui/ui-drilldown","mvc/ui/ui-button-menu","mvc/ui/ui-modal"],function(d,g,h,l,k,r,b){var p=Backbone.View.extend({optionsDefault:{url:"",cls:""},initialize:function(s){this.options=d.merge(s,this.optionsDefault);this.setElement(this._template(this.options))},_template:function(s){return'<img class="ui-image '+s.cls+'" src="'+s.url+'"/>'}});var i=Backbone.View.extend({optionsDefault:{title:"",cls:""},initialize:function(s){this.options=d.merge(s,this.optionsDefault);this.setElement(this._template(this.options))},title:function(s){this.$el.html(s)},_template:function(s){return'<label class="ui-label '+s.cls+'">'+s.title+"</label>"},value:function(){return options.title}});var c=Backbone.View.extend({optionsDefault:{floating:"right",icon:"",tooltip:"",placement:"bottom",title:"",cls:""},initialize:function(s){this.options=d.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).tooltip({title:s.tooltip,placement:"bottom"})},_template:function(s){return'<div><span class="fa '+s.icon+'" class="ui-icon"/> '+s.title+"</div>"}});var f=Backbone.View.extend({optionsDefault:{id:null,title:"",floating:"right",cls:"ui-button btn btn-default",icon:""},initialize:function(s){this.options=d.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).on("click",function(){$(".tooltip").hide();if(s.onclick){s.onclick()}});$(this.el).tooltip({title:s.tooltip,placement:"bottom"})},_template:function(s){var t='<button id="'+s.id+'" type="submit" style="float: '+s.floating+';" type="button" class="'+s.cls+'">';if(s.icon){t+='<i class="icon fa '+s.icon+'"></i> '}t+=s.title+"</button>";return t}});var n=Backbone.View.extend({optionsDefault:{id:null,title:"",floating:"right",cls:"ui-button-icon",icon:"",tooltip:"",onclick:null},initialize:function(t){this.options=d.merge(t,this.optionsDefault);this.setElement(this._template(this.options));this.$button=this.$el.find(".button");var s=this;$(this.el).on("click",function(){$(".tooltip").hide();if(t.onclick&&!s.disabled){t.onclick()}});$(this.el).tooltip({title:t.tooltip,placement:"bottom"})},disable:function(){this.$button.addClass("disabled");this.disabled=true},enable:function(){this.$button.removeClass("disabled");this.disabled=false},setIcon:function(s){this.$("i").removeClass(this.options.icon).addClass(s);this.options.icon=s},_template:function(s){var t="";if(s.title){t="width: auto;"}var u='<div id="'+s.id+'" style="float: '+s.floating+"; "+t+'" class="'+s.cls+'">';if(s.title){u+='<div class="button"><i class="icon fa '+s.icon+'"/> <span class="title">'+s.title+"</span></div>"}else{u+='<i class="icon fa '+s.icon+'"/>'}u+="</div>";return u}});var o=Backbone.View.extend({optionsDefault:{title:"",cls:""},initialize:function(s){this.options=d.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).on("click",s.onclick)},_template:function(s){return'<div><a href="javascript:void(0)" class="ui-anchor '+s.cls+'">'+s.title+"</a></div>"}});var a=Backbone.View.extend({optionsDefault:{message:null,status:"info",persistent:false},initialize:function(s){this.options=d.merge(s,this.optionsDefault);this.setElement("<div></div>");if(this.options.message){this.update(this.options)}},update:function(t){this.options=d.merge(t,this.optionsDefault);if(t.message!=""){this.$el.html(this._template(this.options));this.$el.find(".alert").append(t.message);this.$el.fadeIn();if(this.timeout){window.clearTimeout(this.timeout)}if(!t.persistent){var s=this;this.timeout=window.setTimeout(function(){if(s.$el.is(":visible")){s.$el.fadeOut()}else{s.$el.hide()}},3000)}}else{this.$el.fadeOut()}},_template:function(s){return'<div class="ui-message alert alert-'+s.status+'"/>'}});var e=Backbone.View.extend({optionsDefault:{onclick:null,searchword:""},initialize:function(t){this.options=d.merge(t,this.optionsDefault);this.setElement(this._template(this.options));var s=this;if(this.options.onclick){this.$el.on("submit",function(v){var u=s.$el.find("#search");s.options.onclick(u.val())})}},_template:function(s){return'<div class="ui-search"><form onsubmit="return false;"><input id="search" class="form-control input-sm" type="text" name="search" placeholder="Search..." value="'+s.searchword+'"><button type="submit" class="btn search-btn"><i class="fa fa-search"></i></button></form></div>'}});var m=Backbone.View.extend({optionsDefault:{type:"text",placeholder:"",disabled:false,visible:true,cls:"",area:false},initialize:function(t){this.options=d.merge(t,this.optionsDefault);this.setElement(this._template(this.options));if(this.options.value!==undefined){this.value(this.options.value)}if(this.options.disabled){this.$el.prop("disabled",true)}if(!this.options.visible){this.$el.hide()}var s=this;this.$el.on("input",function(){if(s.options.onchange){s.options.onchange(s.$el.val())}})},value:function(s){if(s!==undefined){this.$el.val(s)}return this.$el.val()},_template:function(s){if(s.area){return'<textarea id="'+s.id+'" class="ui-textarea '+s.cls+'"></textarea>'}else{return'<input id="'+s.id+'" type="'+s.type+'" value="'+s.value+'" placeholder="'+s.placeholder+'" class="ui-input '+s.cls+'">'}}});var j=Backbone.View.extend({initialize:function(s){this.options=s;this.setElement(this._template(this.options));if(this.options.value!==undefined){this.value(this.options.value)}},value:function(s){if(s!==undefined){this.$("hidden").val(s)}return this.$("hidden").val()},_template:function(t){var s='<div id="'+t.id+'" >';if(t.info){s+="<label>"+t.info+"</label>"}s+='<hidden value="'+t.value+'"/></div>';return s}});var q=Backbone.View.extend({optionsDefault:{class_add:"fa fa-square-o",class_remove:"fa fa-check-square-o",class_partial:"fa fa-minus-square-o",value:false},initialize:function(t){this.options=d.merge(t,this.optionsDefault);this.setElement($("<div/>"));this.value(Boolean(this.options.value));var s=this;this.$el.on("click",function(){s.value(!s.current)})},value:function(s){if(s!==undefined){this.current=s;if(s){this.$el.removeClass().addClass("ui-checkbutton").addClass(this.options.class_remove)}else{this.$el.removeClass().addClass("ui-checkbutton").addClass(this.options.class_add)}this.options.onchange&&this.options.onchange(s)}return this.current}});return{Anchor:o,Button:f,ButtonIcon:n,ButtonMenu:r,Icon:c,Image:p,Input:m,Label:i,Message:a,Modal:b,RadioButton:l.RadioButton,Checkbox:l.Checkbox,Radio:l.Radio,CheckButton:q,Searchbox:e,Select:g,Hidden:j,Slider:h,Drilldown:k}}); \ No newline at end of file +define(["utils/utils","mvc/ui/ui-select-default","mvc/ui/ui-slider","mvc/ui/ui-options","mvc/ui/ui-drilldown","mvc/ui/ui-button-menu","mvc/ui/ui-button-check","mvc/ui/ui-modal"],function(e,h,i,m,l,r,d,b){var q=Backbone.View.extend({optionsDefault:{url:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options))},_template:function(s){return'<img class="ui-image '+s.cls+'" src="'+s.url+'"/>'}});var j=Backbone.View.extend({optionsDefault:{title:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options))},title:function(s){this.$el.html(s)},_template:function(s){return'<label class="ui-label '+s.cls+'">'+s.title+"</label>"},value:function(){return options.title}});var c=Backbone.View.extend({optionsDefault:{floating:"right",icon:"",tooltip:"",placement:"bottom",title:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).tooltip({title:s.tooltip,placement:"bottom"})},_template:function(s){return'<div><span class="fa '+s.icon+'" class="ui-icon"/> '+s.title+"</div>"}});var g=Backbone.View.extend({optionsDefault:{id:null,title:"",floating:"right",cls:"ui-button btn btn-default",icon:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).on("click",function(){$(".tooltip").hide();if(s.onclick){s.onclick()}});$(this.el).tooltip({title:s.tooltip,placement:"bottom"})},_template:function(s){var t='<button id="'+s.id+'" type="submit" style="float: '+s.floating+';" type="button" class="'+s.cls+'">';if(s.icon){t+='<i class="icon fa '+s.icon+'"></i> '}t+=s.title+"</button>";return t}});var o=Backbone.View.extend({optionsDefault:{id:null,title:"",floating:"right",cls:"ui-button-icon",icon:"",tooltip:"",onclick:null},initialize:function(t){this.options=e.merge(t,this.optionsDefault);this.setElement(this._template(this.options));this.$button=this.$el.find(".button");var s=this;$(this.el).on("click",function(){$(".tooltip").hide();if(t.onclick&&!s.disabled){t.onclick()}});$(this.el).tooltip({title:t.tooltip,placement:"bottom"})},disable:function(){this.$button.addClass("disabled");this.disabled=true},enable:function(){this.$button.removeClass("disabled");this.disabled=false},setIcon:function(s){this.$("i").removeClass(this.options.icon).addClass(s);this.options.icon=s},_template:function(s){var t="";if(s.title){t="width: auto;"}var u='<div id="'+s.id+'" style="float: '+s.floating+"; "+t+'" class="'+s.cls+'">';if(s.title){u+='<div class="button"><i class="icon fa '+s.icon+'"/> <span class="title">'+s.title+"</span></div>"}else{u+='<i class="icon fa '+s.icon+'"/>'}u+="</div>";return u}});var p=Backbone.View.extend({optionsDefault:{title:"",cls:""},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement(this._template(this.options));$(this.el).on("click",s.onclick)},_template:function(s){return'<div><a href="javascript:void(0)" class="ui-anchor '+s.cls+'">'+s.title+"</a></div>"}});var a=Backbone.View.extend({optionsDefault:{message:null,status:"info",persistent:false},initialize:function(s){this.options=e.merge(s,this.optionsDefault);this.setElement("<div></div>");if(this.options.message){this.update(this.options)}},update:function(t){this.options=e.merge(t,this.optionsDefault);if(t.message!=""){this.$el.html(this._template(this.options));this.$el.find(".alert").append(t.message);this.$el.fadeIn();if(this.timeout){window.clearTimeout(this.timeout)}if(!t.persistent){var s=this;this.timeout=window.setTimeout(function(){if(s.$el.is(":visible")){s.$el.fadeOut()}else{s.$el.hide()}},3000)}}else{this.$el.fadeOut()}},_template:function(s){return'<div class="ui-message alert alert-'+s.status+'"/>'}});var f=Backbone.View.extend({optionsDefault:{onclick:null,searchword:""},initialize:function(t){this.options=e.merge(t,this.optionsDefault);this.setElement(this._template(this.options));var s=this;if(this.options.onclick){this.$el.on("submit",function(v){var u=s.$el.find("#search");s.options.onclick(u.val())})}},_template:function(s){return'<div class="ui-search"><form onsubmit="return false;"><input id="search" class="form-control input-sm" type="text" name="search" placeholder="Search..." value="'+s.searchword+'"><button type="submit" class="btn search-btn"><i class="fa fa-search"></i></button></form></div>'}});var n=Backbone.View.extend({optionsDefault:{type:"text",placeholder:"",disabled:false,visible:true,cls:"",area:false},initialize:function(t){this.options=e.merge(t,this.optionsDefault);this.setElement(this._template(this.options));if(this.options.value!==undefined){this.value(this.options.value)}if(this.options.disabled){this.$el.prop("disabled",true)}if(!this.options.visible){this.$el.hide()}var s=this;this.$el.on("input",function(){if(s.options.onchange){s.options.onchange(s.$el.val())}})},value:function(s){if(s!==undefined){this.$el.val(s)}return this.$el.val()},_template:function(s){if(s.area){return'<textarea id="'+s.id+'" class="ui-textarea '+s.cls+'"></textarea>'}else{return'<input id="'+s.id+'" type="'+s.type+'" value="'+s.value+'" placeholder="'+s.placeholder+'" class="ui-input '+s.cls+'">'}}});var k=Backbone.View.extend({initialize:function(s){this.options=s;this.setElement(this._template(this.options));if(this.options.value!==undefined){this.value(this.options.value)}},value:function(s){if(s!==undefined){this.$("hidden").val(s)}return this.$("hidden").val()},_template:function(t){var s='<div id="'+t.id+'" >';if(t.info){s+="<label>"+t.info+"</label>"}s+='<hidden value="'+t.value+'"/></div>';return s}});return{Anchor:p,Button:g,ButtonIcon:o,ButtonCheck:d,ButtonMenu:r,Icon:c,Image:q,Input:n,Label:j,Message:a,Modal:b,RadioButton:m.RadioButton,Checkbox:m.Checkbox,Radio:m.Radio,Searchbox:f,Select:h,Hidden:k,Slider:i,Drilldown:l}}); \ No newline at end of file diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/scripts/packed/mvc/ui/ui-options.js --- a/static/scripts/packed/mvc/ui/ui-options.js +++ b/static/scripts/packed/mvc/ui/ui-options.js @@ -1,1 +1,1 @@ -define(["utils/utils"],function(b){var a=Backbone.View.extend({initialize:function(g){this.optionsDefault={visible:true,data:[],id:b.uuid(),error_text:"No data available.",wait_text:"Please wait..."};this.options=b.merge(g,this.optionsDefault);this.setElement('<div class="ui-options"/>');this.$message=$("<div/>");this.$options=$(this._template(g));this.$el.append(this.$message);this.$el.append(this.$options);if(!this.options.visible){this.$el.hide()}this.update(this.options.data);if(this.options.value!==undefined){this.value(this.options.value)}var f=this;this.on("change",function(){f._change()})},update:function(g){var j=this._getValue();this.$options.empty();if(this._templateOptions){this.$options.append(this._templateOptions(g))}else{for(var h in g){var i=$(this._templateOption(g[h]));i.addClass("ui-option");i.tooltip({title:g[h].tooltip,placement:"bottom"});this.$options.append(i)}}var f=this;this.$el.find("input").on("change",function(){f.value(f._getValue());f._change()});this._refresh();this.value(j)},value:function(g){if(g!==undefined){if(!(g instanceof Array)){g=[g]}this.$el.find("input").prop("checked",false);for(var f in g){this.$el.find('input[value="'+g[f]+'"]').first().prop("checked",true)}}return this._getValue()},exists:function(g){if(g!==undefined){if(!(g instanceof Array)){g=[g]}for(var f in g){if(this.$el.find('input[value="'+g[f]+'"]').length>0){return true}}}return false},first:function(){var f=this.$el.find("input");if(f.length>0){return f.val()}else{return undefined}},validate:function(){return b.validate(this.value())},wait:function(){if(this._size()==0){this._messageShow(this.options.wait_text,"info");this.$options.hide()}},unwait:function(){this._messageHide();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()}else{this._messageHide();this.$options.css("display","inline-block")}},_getValue:function(){var g=this.$el.find(":checked");if(g.length==0){return"__null__"}if(this.options.multiple){var f=[];g.each(function(){f.push($(this).val())});return f}else{return g.val()}},_size:function(){return this.$el.find(".ui-option").length},_messageShow:function(g,f){this.$message.show();this.$message.removeClass();this.$message.addClass("ui-message alert alert-"+f);this.$message.html(g)},_messageHide:function(){this.$message.hide()},_template:function(){return'<div class="ui-options-input"/>'}});var d={};d.View=a.extend({initialize:function(f){a.prototype.initialize.call(this,f)},_templateOption:function(f){return'<div><input type="radio" name="'+this.options.id+'" value="'+f.value+'"/>'+f.label+"<br></div>"}});var c={};c.View=a.extend({initialize:function(f){f.multiple=true;a.prototype.initialize.call(this,f)},_templateOption:function(f){return'<div><input type="checkbox" name="'+this.options.id+'" value="'+f.value+'"/>'+f.label+"<br></div>"}});var e={};e.View=a.extend({initialize:function(f){a.prototype.initialize.call(this,f)},value:function(f){if(f!==undefined){this.$el.find("input").prop("checked",false);this.$el.find("label").removeClass("active");this.$el.find('[value="'+f+'"]').prop("checked",true).closest("label").addClass("active")}return this._getValue()},_templateOption:function(h){var f="fa "+h.icon;if(!h.label){f+=" no-padding"}var g='<label class="btn btn-default">';if(h.icon){g+='<i class="'+f+'"/>'}g+='<input type="radio" name="'+this.options.id+'" value="'+h.value+'">';if(h.label){g+=h.label}g+="</label>";return g},_template:function(){return'<div class="btn-group ui-radiobutton" data-toggle="buttons"/>'}});return{Base:a,Radio:d,RadioButton:e,Checkbox:c}}); \ 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){this.optionsDefault={visible:true,data:[],id:c.uuid(),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._refresh();this.value(l)},value:function(j){if(j!==undefined){if(!(j instanceof Array)){j=[j]}this.$("input").prop("checked",false);for(var h in j){this.$('input[value="'+j[h]+'"]').first().prop("checked",true)}}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");if(h.length>0){return h.val()}else{return undefined}},validate:function(){return c.validate(this.value())},wait:function(){if(this._size()==0){this._messageShow(this.options.wait_text,"info");this.$options.hide()}},unwait:function(){this._messageHide();this._refresh()},_change:function(){var j=this._getValue();if(this.options.onchange){this.options.onchange(j)}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)}}}},_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()}},_getValue:function(){var i=this.$(":checked");if(i.length==0){return"__null__"}if(this.options.multiple){var h=[];i.each(function(){h.push($(this).val())});return h}else{return i.val()}},_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.uuid();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}}); \ No newline at end of file diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/style/blue/base.css --- a/static/style/blue/base.css +++ b/static/style/blue/base.css @@ -148,7 +148,7 @@ .form-control::-moz-placeholder{color:#999} .form-control:-ms-input-placeholder{color:#999} .form-control::-webkit-input-placeholder{color:#999} -.form-control,.ui-input,.ui-textarea,.ui-options .ui-options-input,.ui-form-slider .ui-form-slider-text,.ui-select-multiple{display:block;width:100%;height:27px;padding:4px 10px;font-size:12px;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;border:1px solid #aaa;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6)} +.form-control,.ui-input,.ui-textarea,.ui-options .ui-options-list,.ui-form-slider .ui-form-slider-text,.ui-select-multiple{display:block;width:100%;height:27px;padding:4px 10px;font-size:12px;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;border:1px solid #aaa;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6)} .form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{cursor:not-allowed;background-color:#eee} textarea.form-control{height:auto} .form-group{margin-bottom:15px} @@ -1435,9 +1435,15 @@ .ui-portlet-limited,.ui-portlet-narrow,.ui-portlet-narrow{max-width:900px} .ui-popover{max-width:700px;display:none}.ui-popover .popover-close{position:absolute;right:10px;top:7px;font-size:1.2em;cursor:pointer} .ui-popover .popover-title{padding:4px 10px} -.ui-input,.ui-textarea,.ui-options .ui-options-input,.ui-form-slider .ui-form-slider-text,.ui-select-multiple,.ui-textarea,.ui-options .ui-options-input,.ui-form-slider .ui-form-slider-text,.ui-select-multiple{background:transparent} +.ui-input,.ui-textarea,.ui-options .ui-options-list,.ui-form-slider .ui-form-slider-text,.ui-select-multiple,.ui-textarea,.ui-options .ui-options-list,.ui-form-slider .ui-form-slider-text,.ui-select-multiple{background:transparent} .ui-textarea{height:100px !important} -.ui-options .ui-options-input{height:100% !important} +.ui-options .ui-options-list{height:100% !important}.ui-options .ui-options-list input[type=checkbox],.ui-options .ui-options-list input[type=radio]{display:none} +.ui-options .ui-options-list label{margin:0px;cursor:pointer} +.ui-options .ui-options-list .ui-drilldown-button{position:relative;top:2px;left:-3px;margin-right:3px;cursor:pointer} +.ui-options .ui-options-list input[type=checkbox]+label:before{font-family:FontAwesome;display:inline-block;font-style:normal;font-size:1.2em;margin-right:5px;position:relative;top:1px;width:10px;content:"\f096"} +.ui-options .ui-options-list input[type=checkbox]:checked+label:before{content:"\f046"} +.ui-options .ui-options-list input[type=radio]+label:before{font-family:FontAwesome;display:inline-block;font-style:normal;font-size:1.2em;margin-right:5px;position:relative;top:1px;width:10px;content:"\f1db"} +.ui-options .ui-options-list input[type=radio]:checked+label:before{content:"\f192"} .ui-form-slider{display:inline-block;width:100%}.ui-form-slider .ui-form-slider-text{width:100px;float:left} .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} diff -r 7ba09a5bbe9d88ca035b44f2178d7d32442cf2e1 -r 16593d9d24fe952789835895c532ad246df4346b static/style/src/less/ui.less --- a/static/style/src/less/ui.less +++ b/static/style/src/less/ui.less @@ -321,9 +321,51 @@ } .ui-options { - .ui-options-input { + .ui-options-list { &:extend(.ui-input); height: 100% !important; + input[type=checkbox], input[type=radio] { + display: none; + } + label { + margin: 0px; + cursor: pointer; + } + .ui-drilldown-button { + position: relative; + top: 2px; + left: -3px; + margin-right: 3px; + cursor: pointer; + } + input[type=checkbox] + label:before { + font-family: FontAwesome; + display: inline-block; + font-style: normal; + font-size: 1.2em; + margin-right: 5px; + position: relative; + top: 1px; + width: 10px; + content: "\f096"; + } + input[type=checkbox]:checked + label:before { + content: "\f046"; + } + input[type=radio] + label:before { + font-family: FontAwesome; + display: inline-block; + font-style: normal; + font-size: 1.2em; + margin-right: 5px; + position: relative; + top: 1px; + width: 10px; + content: "\f1db"; + } + input[type=radio]:checked + label:before { + content: "\f192"; + } } } Repository URL: https://bitbucket.org/galaxy/galaxy-central/ -- This is a commit notification from bitbucket.org. You are receiving this because you have the service enabled, addressing the recipient of this email.
participants (1)
-
commits-noreply＠bitbucket.org