1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/c42da63a174f/ Changeset: c42da63a174f User: guerler Date: 2014-05-27 05:57:16 Summary: Ui: Refactoring of ui-tabs Affected #: 2 files diff -r b0f8204ebc18d7b48cfc7f4940a56be22d501679 -r c42da63a174f7695eb48ee71107b18589e034418 static/scripts/mvc/ui/ui-tabs.js --- a/static/scripts/mvc/ui/ui-tabs.js +++ b/static/scripts/mvc/ui/ui-tabs.js @@ -4,17 +4,6 @@ // return var View = Backbone.View.extend( { - // visibility - visible: false, - - // elements - list: {}, - $nav: null, - $content: null, - - // first - first_tab: null, - // defaults options optionsDefault: { title_new : '', @@ -24,6 +13,12 @@ // initialize initialize : function(options) { + // configure + this.visible = false; + this.$nav = null; + this.$content = null; + this.first_tab = null; + // configure options this.options = Utils.merge(options, this.optionsDefault); @@ -72,41 +67,40 @@ // append add: function(options) { + // self + var self = this; + // get tab id var id = options.id; // create tab object - var tab = { - $title : $(this._template_tab(options)), - $content : $(this._template_tab_content(options)), - removable : options.ondel ? true : false - } + var $tab_title = $(this._template_tab(options)); + var $tab_content = $(this._template_tab_content(options)); // add to list - this.list[id] = tab; + this.list[id] = options.ondel ? true : false; // add a new tab either before the add-new-tab tab or behind the last tab if (this.options.onnew) { - this.$nav.find('#new-tab').before(tab.$title); + this.$nav.find('#new-tab').before($tab_title); } else { - this.$nav.append(tab.$title); + this.$nav.append($tab_title); } // add content - tab.$content.append(options.$el); - this.$content.append(tab.$content); + $tab_content.append(options.$el); + this.$content.append($tab_content); // activate this tab if this is the first tab if (_.size(this.list) == 1) { - tab.$title.addClass('active'); - tab.$content.addClass('active'); + $tab_title.addClass('active'); + $tab_content.addClass('active'); this.first_tab = id; } // add click event to remove tab if (options.ondel) { - var self = this; - var $del_icon = tab.$title.find('#delete'); + var $del_icon = $tab_title.find('#delete'); $del_icon.tooltip({title: 'Delete this tab', placement: 'bottom', container: self.$el}); $del_icon.on('click', function() { $del_icon.tooltip('destroy'); @@ -117,20 +111,24 @@ } // add custom click event handler - if (options.onclick) { - tab.$title.on('click', function() { + $tab_title.on('click', function(e) { + // prevent default + e.preventDefault(); + + // click + if (options.onclick) { options.onclick(); - }); - } + } else { + self.show(id); + } + }); }, // delete tab del: function(id) { - // delete tab from list/dom - var tab = this.list[id]; - tab.$title.remove(); - tab.$content.remove(); - delete tab; + // delete tab from dom + this.$el.find('#tab-' + id).remove(); + this.$el.find('#tab-content-' + id).remove(); // check if first tab has been deleted if (this.first_tab == id) { @@ -145,10 +143,8 @@ // delete tab delRemovable: function() { - // delete tab from list/dom for (var id in this.list) { - var tab = this.list[id]; - if (tab.removable) { + if (this.list[id]) { this.del(id); } } @@ -162,7 +158,9 @@ // show selected tab if (id) { - this.list[id].$title.find('a').tab('show'); + this.$el.find('.active').removeClass('active'); + this.$el.find('#tab-' + id).addClass('active'); + this.$el.find('#tab-content-' + id).addClass('active'); } }, @@ -191,7 +189,7 @@ // title title: function(id, new_title) { - var $el = this.list[id].$title.find('#text'); + var $el = this.$el.find('#tab-title-text-' + id); if (new_title) { $el.html(new_title); } @@ -200,11 +198,11 @@ // fill template _template: function(options) { - return '<div class="tabbable tabs-left">' + - '<ul class="tab-navigation nav nav-tabs">' + + return '<div class="ui-tabs tabbable tabs-left">' + + '<ul id="tab-navigation" class="tab-navigation nav nav-tabs">' + '<div class="operations" style="float: right; margin-bottom: 4px;"></div>' + '</ul>'+ - '<div class="tab-content"/>' + + '<div id="tab-content" class="tab-content"/>' + '</div>'; }, @@ -212,7 +210,7 @@ _template_tab_new: function(options) { return '<li id="new-tab">' + '<a href="javascript:void(0);">' + - '<i style="font-size: 0.8em; margin-right: 5px;" class="fa fa-plus-circle"/>' + + '<i class="ui-tabs-add fa fa-plus-circle"/>' + options.title_new + '</a>' + '</li>'; @@ -220,12 +218,12 @@ // fill template tab _template_tab: function(options) { - var tmpl = '<li id="title-' + options.id + '">' + - '<a title="" href="#tab-' + options.id + '" data-toggle="tab" data-original-title="">' + - '<span id="text">' + options.title + '</span>'; + var tmpl = '<li id="tab-' + options.id + '">' + + '<a id="tab-title-link-' + options.id + '" title="" href="#tab-content-' + options.id + '" data-original-title="">' + + '<span id="tab-title-text-' + options.id + '">' + options.title + '</span>'; if (options.ondel) { - tmpl += '<i id="delete" style="font-size: 0.8em; margin-left: 5px; cursor: pointer;" class="fa fa-minus-circle"/>'; + tmpl += '<i id="delete" class="ui-tabs-delete fa fa-minus-circle"/>'; } tmpl += '</a>' + @@ -236,7 +234,7 @@ // fill template tab content _template_tab_content: function(options) { - return '<div id="tab-' + options.id + '" class="tab-pane"/>'; + return '<div id="tab-content-' + options.id + '" class="tab-pane"/>'; } }); diff -r b0f8204ebc18d7b48cfc7f4940a56be22d501679 -r c42da63a174f7695eb48ee71107b18589e034418 static/scripts/packed/mvc/ui/ui-tabs.js --- a/static/scripts/packed/mvc/ui/ui-tabs.js +++ b/static/scripts/packed/mvc/ui/ui-tabs.js @@ -1,1 +1,1 @@ -define(["utils/utils"],function(a){var b=Backbone.View.extend({visible:false,list:{},$nav:null,$content:null,first_tab:null,optionsDefault:{title_new:"",operations:null,onnew: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);this.list={};var d=this;if(this.options.operations){$.each(this.options.operations,function(g,h){h.$el.prop("id",g);d.$nav.find(".operations").append(h.$el)})}if(this.options.onnew){var f=$(this._template_tab_new(this.options));this.$nav.append(f);f.tooltip({title:"Add a new tab",placement:"bottom",container:d.$el});f.on("click",function(g){f.tooltip("hide");d.options.onnew()})}},add:function(e){var g=e.id;var f={$title:$(this._template_tab(e)),$content:$(this._template_tab_content(e)),removable:e.ondel?true:false};this.list[g]=f;if(this.options.onnew){this.$nav.find("#new-tab").before(f.$title)}else{this.$nav.append(f.$title)}f.$content.append(e.$el);this.$content.append(f.$content);if(_.size(this.list)==1){f.$title.addClass("active");f.$content.addClass("active");this.first_tab=g}if(e.ondel){var d=this;var c=f.$title.find("#delete");c.tooltip({title:"Delete this tab",placement:"bottom",container:d.$el});c.on("click",function(){c.tooltip("destroy");d.$el.find(".tooltip").remove();e.ondel();return false})}if(e.onclick){f.$title.on("click",function(){e.onclick()})}},del:function(d){var c=this.list[d];c.$title.remove();c.$content.remove();delete c;if(this.first_tab==d){this.first_tab=null}if(this.first_tab!=null){this.show(this.first_tab)}},delRemovable:function(){for(var d in this.list){var c=this.list[d];if(c.removable){this.del(d)}}},show:function(c){this.$el.fadeIn("fast");this.visible=true;if(c){this.list[c].$title.find("a").tab("show")}},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,d){var c=this.list[e].$title.find("#text");if(d){c.html(d)}return c.html()},_template:function(c){return'<div class="tabbable tabs-left"><ul class="tab-navigation nav nav-tabs"><div class="operations" style="float: right; margin-bottom: 4px;"></div></ul><div class="tab-content"/></div>'},_template_tab_new:function(c){return'<li id="new-tab"><a href="javascript:void(0);"><i style="font-size: 0.8em; margin-right: 5px;" class="fa fa-plus-circle"/>'+c.title_new+"</a></li>"},_template_tab:function(d){var c='<li id="title-'+d.id+'"><a title="" href="#tab-'+d.id+'" data-toggle="tab" data-original-title=""><span id="text">'+d.title+"</span>";if(d.ondel){c+='<i id="delete" style="font-size: 0.8em; margin-left: 5px; cursor: pointer;" class="fa fa-minus-circle"/>'}c+="</a></li>";return c},_template_tab_content:function(c){return'<div id="tab-'+c.id+'" class="tab-pane"/>'}});return{View:b}}); \ No newline at end of file +define(["utils/utils"],function(a){var b=Backbone.View.extend({optionsDefault:{title_new:"",operations:null,onnew:null},initialize:function(e){this.visible=false;this.$nav=null;this.$content=null;this.first_tab=null;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);this.list={};var d=this;if(this.options.operations){$.each(this.options.operations,function(g,h){h.$el.prop("id",g);d.$nav.find(".operations").append(h.$el)})}if(this.options.onnew){var f=$(this._template_tab_new(this.options));this.$nav.append(f);f.tooltip({title:"Add a new tab",placement:"bottom",container:d.$el});f.on("click",function(g){f.tooltip("hide");d.options.onnew()})}},add:function(f){var e=this;var h=f.id;var g=$(this._template_tab(f));var d=$(this._template_tab_content(f));this.list[h]=f.ondel?true:false;if(this.options.onnew){this.$nav.find("#new-tab").before(g)}else{this.$nav.append(g)}d.append(f.$el);this.$content.append(d);if(_.size(this.list)==1){g.addClass("active");d.addClass("active");this.first_tab=h}if(f.ondel){var c=g.find("#delete");c.tooltip({title:"Delete this tab",placement:"bottom",container:e.$el});c.on("click",function(){c.tooltip("destroy");e.$el.find(".tooltip").remove();f.ondel();return false})}g.on("click",function(i){i.preventDefault();if(f.onclick){f.onclick()}else{e.show(h)}})},del:function(c){this.$el.find("#tab-"+c).remove();this.$el.find("#tab-content-"+c).remove();if(this.first_tab==c){this.first_tab=null}if(this.first_tab!=null){this.show(this.first_tab)}},delRemovable:function(){for(var c in this.list){if(this.list[c]){this.del(c)}}},show:function(c){this.$el.fadeIn("fast");this.visible=true;if(c){this.$el.find(".active").removeClass("active");this.$el.find("#tab-"+c).addClass("active");this.$el.find("#tab-content-"+c).addClass("active")}},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,d){var c=this.$el.find("#tab-title-text-"+e);if(d){c.html(d)}return c.html()},_template:function(c){return'<div class="ui-tabs tabbable tabs-left"><ul id="tab-navigation" class="tab-navigation nav nav-tabs"><div class="operations" style="float: right; margin-bottom: 4px;"></div></ul><div id="tab-content" class="tab-content"/></div>'},_template_tab_new:function(c){return'<li id="new-tab"><a href="javascript:void(0);"><i class="ui-tabs-add fa fa-plus-circle"/>'+c.title_new+"</a></li>"},_template_tab:function(d){var c='<li id="tab-'+d.id+'"><a id="tab-title-link-'+d.id+'" title="" href="#tab-content-'+d.id+'" data-original-title=""><span id="tab-title-text-'+d.id+'">'+d.title+"</span>";if(d.ondel){c+='<i id="delete" class="ui-tabs-delete fa fa-minus-circle"/>'}c+="</a></li>";return c},_template_tab_content:function(c){return'<div id="tab-content-'+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.