commit/galaxy-central: guerler: Ui: Add backbone wrapper for bootstrap tabs
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/c5be84ef148e/ Changeset: c5be84ef148e User: guerler Date: 2014-02-21 21:20:14 Summary: Ui: Add backbone wrapper for bootstrap tabs Affected #: 13 files diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 config/plugins/visualizations/charts/static/app.js --- a/config/plugins/visualizations/charts/static/app.js +++ b/config/plugins/visualizations/charts/static/app.js @@ -42,7 +42,7 @@ // create portlet if (!this.options.config.widget) { - this.portlet = new Portlet.View({icon : 'fa-bar-chart-o', label : 'Charts'}); + this.portlet = new Portlet.View({icon : 'fa-bar-chart-o', title : 'Charts'}); } else { this.portlet = $('<div></div>'); } diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 config/plugins/visualizations/charts/static/views/chart.js --- a/config/plugins/visualizations/charts/static/views/chart.js +++ b/config/plugins/visualizations/charts/static/views/chart.js @@ -1,6 +1,6 @@ // dependencies -define(['mvc/ui/ui-portlet', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', 'plugin/models/chart', 'plugin/views/groups'], - function(Portlet, Table, Ui, Utils, Chart, GroupsView) { +define(['mvc/ui/ui-tabs', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', 'plugin/models/chart', 'plugin/views/groups'], + function(Tabs, Table, Ui, Utils, Chart, GroupsView) { // widget return Backbone.View.extend( @@ -79,12 +79,17 @@ this.table.add (chart_type.title); this.table.append(id); } - - // add table to portlet - var self = this; - this.portlet = new Portlet.View({ - icon : 'fa-edit', - label : 'Create a new chart:', + + // construct element + var $settings = $('<div/>'); + $settings.append(Utils.wrap(this.message.$el)); + $settings.append(Utils.wrap((new Ui.Label({ label : 'Provide a chart title:'})).$el)); + $settings.append(Utils.wrap(this.title.$el)); + $settings.append(Utils.wrap((new Ui.Label({ label : 'Select a chart type:'})).$el)); + $settings.append(Utils.wrap(this.table.$el)); + + // tabs + this.tabs = new Tabs.View({ operations : { 'save' : new Ui.ButtonIcon({ icon : 'fa-save', @@ -103,19 +108,26 @@ }) } }); - this.portlet.append(this.message.$el); - this.portlet.append(this.dataset.$el); - this.portlet.append((new Ui.Label({ label : 'Provide a chart title:'})).$el); - this.portlet.append(this.title.$el); - this.portlet.append((new Ui.Label({ label : 'Select a chart type:'})).$el); - this.portlet.append(this.table.$el); - this.portlet.append(this.groups_view.$el); - + + // add tab + this.tabs.add({ + $el: $settings, + title: 'Start', + id: 'settings' + }); + + // add tab + this.tabs.add({ + $el: this.groups_view.$el, + title: 'Chart Groups', + id: 'groups' + }); + // elements - this.setElement(this.portlet.$el); + this.setElement(this.tabs.$el); // hide back button on startup - this.portlet.hideOperation('back'); + this.tabs.hideOperation('back'); // model events var self = this; @@ -131,15 +143,15 @@ // collection events this.app.charts.on('add', function(chart) { - self.portlet.showOperation('back'); + self.tabs.showOperation('back'); }); this.app.charts.on('remove', function(chart) { if (self.app.charts.length == 1) { - self.portlet.hideOperation('back'); + self.tabs.hideOperation('back'); } }); this.app.charts.on('reset', function(chart) { - self.portlet.hideOperation('back'); + self.tabs.hideOperation('back'); }); // reset diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 config/plugins/visualizations/charts/static/views/charts.js --- a/config/plugins/visualizations/charts/static/views/charts.js +++ b/config/plugins/visualizations/charts/static/views/charts.js @@ -33,7 +33,7 @@ var self = this; this.portlet = new Portlet.View({ icon : 'fa-list', - label : 'List of created charts:', + title : 'List of created charts:', height : 100, operations : { 'new' : new Ui.ButtonIcon({ diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 config/plugins/visualizations/charts/static/views/group.js --- a/config/plugins/visualizations/charts/static/views/group.js +++ b/config/plugins/visualizations/charts/static/views/group.js @@ -26,7 +26,7 @@ var self = this; this.portlet = new Portlet.View({ icon : 'fa-edit', - label : 'Define group properties:', + title : 'Define group properties:', operations : { 'save' : new Ui.ButtonIcon({ icon : 'fa-save', diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 config/plugins/visualizations/charts/static/views/groups.js --- a/config/plugins/visualizations/charts/static/views/groups.js +++ b/config/plugins/visualizations/charts/static/views/groups.js @@ -30,7 +30,7 @@ var self = this; this.portlet = new Portlet.View({ icon : '', - label : 'Select data columns:', + title : 'Select data columns:', height : 100, operations : { 'new' : new Ui.ButtonIcon({ diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 config/plugins/visualizations/charts/static/views/viewport.js --- a/config/plugins/visualizations/charts/static/views/viewport.js +++ b/config/plugins/visualizations/charts/static/views/viewport.js @@ -25,7 +25,7 @@ // add table to portlet this.portlet = new Portlet.View({ - label : '', + title : '', icon : 'fa-signal', height : this.options.height, overflow : 'hidden', @@ -75,7 +75,7 @@ var chart = self.app.charts.get(chart_id); // update portlet - this.portlet.label(chart.get('title')); + this.portlet.title(chart.get('title')); this.portlet.setOperation('edit', function() { // get chart self.app.chart.copy(chart); diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 static/scripts/mvc/ui/ui-popover.js --- a/static/scripts/mvc/ui/ui-popover.js +++ b/static/scripts/mvc/ui/ui-popover.js @@ -97,7 +97,7 @@ return $el.width() + parseInt($el.css('padding-left')) + parseInt($el.css('padding-right')) }, - // heigth + // height _get_height: function($el) { return $el.height() + parseInt($el.css('padding-top')) + parseInt($el.css('padding-bottom')) }, diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 static/scripts/mvc/ui/ui-portlet.js --- a/static/scripts/mvc/ui/ui-portlet.js +++ b/static/scripts/mvc/ui/ui-portlet.js @@ -9,7 +9,7 @@ // defaults options optionsDefault: { - label : '', + title : '', icon : 'fa-tasks', buttons : null, body : null, @@ -19,8 +19,10 @@ overflow : 'auto' }, - // content + // elements $content : null, + $buttons : null, + $operations : null, // initialize initialize : function(options) { @@ -28,7 +30,7 @@ this.options = Utils.merge(options, this.optionsDefault); // create new element - this.setElement(this.template(this.options)); + this.setElement(this._template(this.options)); // link content this.$content = this.$el.find('#content'); @@ -79,7 +81,7 @@ return this.$content; }, - // hide modal + // show show: function(){ // fade in this.$el.fadeIn('fast'); @@ -88,7 +90,7 @@ this.visible = true; }, - // hide modal + // hide hide: function(){ // fade out this.$el.fadeOut('fast'); @@ -124,20 +126,20 @@ $el.on('click', callback); }, - // label - label: function(new_label) { - var $el = this.$el.find('#label'); - if (new_label) { - $el.html(new_label); + // title + title: function(new_title) { + var $el = this.$el.find('#title'); + if (new_title) { + $el.html(new_title); } return $el.html(); }, - // fill regular modal template - template: function(options) { + // fill template + _template: function(options) { var tmpl = '<div class="toolForm">'; - if (options.label || options.icon) { + if (options.title || options.icon) { tmpl += '<div id="title" class="toolFormTitle" style="overflow:hidden;">' + '<div id="operations" style="float: right;"></div>' + '<div style="overflow: hidden">'; @@ -145,7 +147,7 @@ if (options.icon) tmpl += '<i style="padding-top: 3px; float: left; font-size: 1.2em" class="icon fa ' + options.icon + '"> </i>'; - tmpl += '<div id="label" style="padding-top: 2px; float: left;">' + options.label + '</div>'; + tmpl += '<div id="title" style="padding-top: 2px; float: left;">' + options.title + '</div>'; tmpl += '</div>' + '</div>'; diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 static/scripts/mvc/ui/ui-select.js --- a/static/scripts/mvc/ui/ui-select.js +++ b/static/scripts/mvc/ui/ui-select.js @@ -20,6 +20,12 @@ // create new element this.setElement(this._template(this.options)); + // check if container exists + if (!this.options.container) { + console.log('ui-select::initialize() : container not specified.'); + return; + } + // add to dom this.options.container.append(this.$el); diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 static/scripts/mvc/ui/ui-tabs.js --- /dev/null +++ b/static/scripts/mvc/ui/ui-tabs.js @@ -0,0 +1,136 @@ +// dependencies +define(['utils/utils'], function(Utils) { + +// return +var View = Backbone.View.extend( +{ + // visibility + visible: false, + + // elements + list: {}, + $nav: null, + $content: null, + + // defaults options + optionsDefault: { + operations: null, + }, + + // initialize + initialize : function(options) { + // configure options + this.options = Utils.merge(options, this.optionsDefault); + + // create element + var $tabs = $(this._template(this.options)); + this.$nav = $tabs.find('.tab-navigation'); + this.$content = $tabs.find('.tab-content'); + + // create new element + this.setElement($tabs); + + // append operations + if (this.options.operations) { + var self = this; + $.each(this.options.operations, function(name, item) { + item.$el.prop('id', name); + self.$nav.append(item.$el); + }); + } + }, + + // append + add: function(options) { + // collect parameters + var $el = options.$el; + var title = options.title; + var id = options.id; + + // create tab object + var tab = { + $title : $(this._template_tab(options)), + $content : $(this._template_tab_content(options)) + } + + // add nav element + this.$nav.append(tab.$title); + + // add content + tab.$content.append($el); + this.$content.append(tab.$content); + + // add to list + this.list[id] = tab; + + // check list size + if (_.size(this.list) == 1) { + tab.$title.addClass('active'); + tab.$content.addClass('active'); + } + }, + + // show + show: function(){ + this.$el.fadeIn('fast'); + this.visible = true; + }, + + // hide + hide: function(){ + this.$el.fadeOut('fast'); + this.visible = false; + }, + + // enable operation + hideOperation: function(id) { + this.$nav.find('#' + id).hide(); + }, + + // disable operation + showOperation: function(id) { + this.$nav.find('#' + id).show(); + }, + + // set operation + setOperation: function(id, callback) { + var $el = this.$nav.find('#' + id); + $el.off('click'); + $el.on('click', callback); + }, + + // title + title: function(id, new_label) { + var $el = this.$el.find('#title-' + id + ' a'); + if (new_title) { + $el.html(new_title); + } + return $el.html(); + }, + + // fill template + _template: function(options) { + return '<div class="tabbable tabs-left">' + + '<ul class="tab-navigation nav nav-tabs"/>' + + '<div class="tab-content"/>' + + '</div>'; + }, + + // fill template tab + _template_tab: function(options) { + return '<li id="title-' + options.id + '">' + + '<a title="" href="#tab-' + options.id + '" data-toggle="tab" data-original-title="">' + options.title + '</a>' + + '</li>'; + }, + + // fill template tab content + _template_tab_content: function(options) { + return '<div id="tab-' + options.id + '" class="tab-pane"/>'; + } +}); + +return { + View : View +} + +}); diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 static/scripts/packed/mvc/ui/ui-portlet.js --- a/static/scripts/packed/mvc/ui/ui-portlet.js +++ b/static/scripts/packed/mvc/ui/ui-portlet.js @@ -1,1 +1,1 @@ -define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,optionsDefault:{label:"",icon:"fa-tasks",buttons:null,body:null,height:null,operations:null,placement:"bottom",overflow:"auto"},$content:null,initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this.template(this.options));this.$content=this.$el.find("#content");if(this.options.height){this.$el.find("#body").css("height",this.options.height);this.$el.find("#content").css("overflow",this.options.overflow)}this.$buttons=$(this.el).find("#buttons");if(this.options.buttons){var c=this;$.each(this.options.buttons,function(e,f){f.$el.prop("id",e);c.$buttons.append(f.$el)})}else{this.$buttons.remove()}this.$operations=$(this.el).find("#operations");if(this.options.operations){var c=this;$.each(this.options.operations,function(e,f){f.$el.prop("id",e);c.$operations.append(f.$el)})}if(this.options.body){this.append(this.options.body)}},append:function(c){this.$content.append(a.wrap(c))},content:function(){return this.$content},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},enableButton:function(c){this.$buttons.find("#"+c).prop("disabled",false)},disableButton:function(c){this.$buttons.find("#"+c).prop("disabled",true)},hideOperation:function(c){this.$operations.find("#"+c).hide()},showOperation:function(c){this.$operations.find("#"+c).show()},setOperation:function(e,d){var c=this.$operations.find("#"+e);c.off("click");c.on("click",d)},label:function(c){var d=this.$el.find("#label");if(c){d.html(c)}return d.html()},template:function(d){var c='<div class="toolForm">';if(d.label||d.icon){c+='<div id="title" class="toolFormTitle" style="overflow:hidden;"><div id="operations" style="float: right;"></div><div style="overflow: hidden">';if(d.icon){c+='<i style="padding-top: 3px; float: left; font-size: 1.2em" class="icon fa '+d.icon+'"> </i>'}c+='<div id="label" style="padding-top: 2px; float: left;">'+d.label+"</div>";c+="</div></div>"}c+='<div id="body" class="toolFormBody">';if(d.placement=="top"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+='<div id="content" class="content" style="height: inherit; padding: 10px;"></div>';if(d.placement=="bottom"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+="</div></div>";return c}});return{View:b}}); \ No newline at end of file +define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,optionsDefault:{title:"",icon:"fa-tasks",buttons:null,body:null,height:null,operations:null,placement:"bottom",overflow:"auto"},$content:null,$buttons:null,$operations:null,initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.$content=this.$el.find("#content");if(this.options.height){this.$el.find("#body").css("height",this.options.height);this.$el.find("#content").css("overflow",this.options.overflow)}this.$buttons=$(this.el).find("#buttons");if(this.options.buttons){var c=this;$.each(this.options.buttons,function(e,f){f.$el.prop("id",e);c.$buttons.append(f.$el)})}else{this.$buttons.remove()}this.$operations=$(this.el).find("#operations");if(this.options.operations){var c=this;$.each(this.options.operations,function(e,f){f.$el.prop("id",e);c.$operations.append(f.$el)})}if(this.options.body){this.append(this.options.body)}},append:function(c){this.$content.append(a.wrap(c))},content:function(){return this.$content},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},enableButton:function(c){this.$buttons.find("#"+c).prop("disabled",false)},disableButton:function(c){this.$buttons.find("#"+c).prop("disabled",true)},hideOperation:function(c){this.$operations.find("#"+c).hide()},showOperation:function(c){this.$operations.find("#"+c).show()},setOperation:function(e,d){var c=this.$operations.find("#"+e);c.off("click");c.on("click",d)},title:function(d){var c=this.$el.find("#title");if(d){c.html(d)}return c.html()},_template:function(d){var c='<div class="toolForm">';if(d.title||d.icon){c+='<div id="title" class="toolFormTitle" style="overflow:hidden;"><div id="operations" style="float: right;"></div><div style="overflow: hidden">';if(d.icon){c+='<i style="padding-top: 3px; float: left; font-size: 1.2em" class="icon fa '+d.icon+'"> </i>'}c+='<div id="title" style="padding-top: 2px; float: left;">'+d.title+"</div>";c+="</div></div>"}c+='<div id="body" class="toolFormBody">';if(d.placement=="top"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+='<div id="content" class="content" style="height: inherit; padding: 10px;"></div>';if(d.placement=="bottom"){c+='<div id="buttons" class="buttons" style="height: 50px; padding: 10px;"></div>'}c+="</div></div>";return c}});return{View:b}}); \ No newline at end of file diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 static/scripts/packed/mvc/ui/ui-select.js --- a/static/scripts/packed/mvc/ui/ui-select.js +++ b/static/scripts/packed/mvc/ui/ui-select.js @@ -1,1 +1,1 @@ -define(["utils/utils"],function(a){var b=Backbone.View.extend({optionsDefault:{css:"",placeholder:"No data available",data:[],value:null},initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));this.options.container.append(this.$el);this.select_data=this.options.data;this._refresh();if(this.options.value){this._setValue(this.options.value)}var c=this;if(this.options.onchange){this.$el.on("change",function(){c.options.onchange(c.value())})}},value:function(c){var d=this._getValue();if(c!==undefined){this._setValue(c)}var e=this._getValue();if((e!=d&&this.options.onchange)){this.options.onchange(e)}return e},text:function(){return this.$el.select2("data").text},disabled:function(){return !this.$el.select2("enable")},enable:function(){this.$el.select2("enable",true)},disable:function(){this.$el.select2("enable",false)},add:function(c){this.select_data.push({id:c.id,text:c.text});this._refresh()},del:function(d){var c=this._getIndex(d);if(c!=-1){this.select_data.splice(c,1);this._refresh()}},remove:function(){this.$el.select2("destroy")},update:function(c){this.select_data=[];for(var d in c.data){this.select_data.push(c.data[d])}this._refresh()},_refresh:function(){var c=this._getValue();this.$el.select2({data:this.select_data,containerCssClass:this.options.css,placeholder:this.options.placeholder});this._setValue(c)},_getIndex:function(d){for(var c in this.select_data){if(this.select_data[c].id==d){return c}}return -1},_getValue:function(){return this.$el.select2("val")},_setValue:function(d){var c=this._getIndex(d);if(c==-1){if(this.select_data.length>0){d=this.select_data[0].id}}this.$el.select2("val",d)},_template:function(c){return'<input type="hidden"/>'}});return{View:b}}); \ No newline at end of file +define(["utils/utils"],function(a){var b=Backbone.View.extend({optionsDefault:{css:"",placeholder:"No data available",data:[],value:null},initialize:function(d){this.options=a.merge(d,this.optionsDefault);this.setElement(this._template(this.options));if(!this.options.container){console.log("ui-select::initialize() : container not specified.");return}this.options.container.append(this.$el);this.select_data=this.options.data;this._refresh();if(this.options.value){this._setValue(this.options.value)}var c=this;if(this.options.onchange){this.$el.on("change",function(){c.options.onchange(c.value())})}},value:function(c){var d=this._getValue();if(c!==undefined){this._setValue(c)}var e=this._getValue();if((e!=d&&this.options.onchange)){this.options.onchange(e)}return e},text:function(){return this.$el.select2("data").text},disabled:function(){return !this.$el.select2("enable")},enable:function(){this.$el.select2("enable",true)},disable:function(){this.$el.select2("enable",false)},add:function(c){this.select_data.push({id:c.id,text:c.text});this._refresh()},del:function(d){var c=this._getIndex(d);if(c!=-1){this.select_data.splice(c,1);this._refresh()}},remove:function(){this.$el.select2("destroy")},update:function(c){this.select_data=[];for(var d in c.data){this.select_data.push(c.data[d])}this._refresh()},_refresh:function(){var c=this._getValue();this.$el.select2({data:this.select_data,containerCssClass:this.options.css,placeholder:this.options.placeholder});this._setValue(c)},_getIndex:function(d){for(var c in this.select_data){if(this.select_data[c].id==d){return c}}return -1},_getValue:function(){return this.$el.select2("val")},_setValue:function(d){var c=this._getIndex(d);if(c==-1){if(this.select_data.length>0){d=this.select_data[0].id}}this.$el.select2("val",d)},_template:function(c){return'<input type="hidden"/>'}});return{View:b}}); \ No newline at end of file diff -r 4a3c5d044d5ae7236a03942eabd048ec7a9c9d70 -r c5be84ef148e7866bfe31610cea5c9f1bae09fe0 static/scripts/packed/mvc/ui/ui-tabs.js --- /dev/null +++ b/static/scripts/packed/mvc/ui/ui-tabs.js @@ -0,0 +1,1 @@ +define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,list:{},$nav:null,$content:null,optionsDefault:{operations:null,},initialize:function(e){this.options=a.merge(e,this.optionsDefault);var c=$(this._template(this.options));this.$nav=c.find(".tab-navigation");this.$content=c.find(".tab-content");this.setElement(c);if(this.options.operations){var d=this;$.each(this.options.operations,function(f,g){g.$el.prop("id",f);d.$nav.append(g.$el)})}},add:function(c){var d=c.$el;var f=c.title;var g=c.id;var e={$title:$(this._template_tab(c)),$content:$(this._template_tab_content(c))};this.$nav.append(e.$title);e.$content.append(d);this.$content.append(e.$content);this.list[g]=e;if(_.size(this.list)==1){e.$title.addClass("active");e.$content.addClass("active")}},show:function(){this.$el.fadeIn("fast");this.visible=true},hide:function(){this.$el.fadeOut("fast");this.visible=false},hideOperation:function(c){this.$nav.find("#"+c).hide()},showOperation:function(c){this.$nav.find("#"+c).show()},setOperation:function(e,d){var c=this.$nav.find("#"+e);c.off("click");c.on("click",d)},title:function(e,c){var d=this.$el.find("#title-"+e+" a");if(new_title){d.html(new_title)}return d.html()},_template:function(c){return'<div class="tabbable tabs-left"><ul class="tab-navigation nav nav-tabs"/><div class="tab-content"/></div>'},_template_tab:function(c){return'<li id="title-'+c.id+'"><a title="" href="#tab-'+c.id+'" data-toggle="tab" data-original-title="">'+c.title+"</a></li>"},_template_tab_content:function(c){return'<div id="tab-'+c.id+'" class="tab-pane"/>'}});return{View:b}}); \ No newline at end of file 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