commit/galaxy-central: guerler: Ui/Charts: Enable user to add/remove tabs and include that in Charts
1 new commit in galaxy-central: https://bitbucket.org/galaxy/galaxy-central/commits/462a28f96c21/ Changeset: 462a28f96c21 User: guerler Date: 2014-02-24 06:44:07 Summary: Ui/Charts: Enable user to add/remove tabs and include that in Charts Affected #: 12 files diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/app.js --- a/config/plugins/visualizations/charts/static/app.js +++ b/config/plugins/visualizations/charts/static/app.js @@ -1,10 +1,10 @@ // dependencies define(['mvc/ui/ui-portlet', 'plugin/library/ui', 'utils/utils', - 'plugin/views/charts', 'plugin/views/viewport', 'plugin/views/chart', 'plugin/views/group', - 'plugin/models/config', 'plugin/models/datasets', 'plugin/models/chart', 'plugin/models/charts', 'plugin/models/group', 'plugin/models/types'], + 'plugin/views/charts', 'plugin/views/viewport', 'plugin/views/chart', + 'plugin/models/config', 'plugin/models/datasets', 'plugin/models/chart', 'plugin/models/charts', 'plugin/models/types'], function( Portlet, Ui, Utils, - ChartsView, ViewportView, ChartView, GroupView, - Config, Datasets, Chart, Charts, Group, Types + ChartsView, ViewportView, ChartView, + Config, Datasets, Chart, Charts, Types ) { // widget @@ -26,14 +26,12 @@ this.types = new Types(); this.chart = new Chart(); this.charts = new Charts(); - this.group = new Group(); // create dataset handler this.datasets = new Datasets(this); // create views this.charts_view = new ChartsView(this); - this.group_view = new GroupView(this); this.chart_view = new ChartView(this); this.viewport_view = new ViewportView(this); @@ -49,9 +47,8 @@ // append views this.portlet.append(this.charts_view.$el); - this.portlet.append(this.group_view.$el); this.portlet.append(this.chart_view.$el); - + // set element if (!this.options.config.widget) { this.setElement(this.portlet.$el); @@ -60,7 +57,6 @@ } // hide views - this.group_view.$el.hide(); this.charts_view.$el.hide(); // events diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/library/table.js --- a/config/plugins/visualizations/charts/static/library/table.js +++ b/config/plugins/visualizations/charts/static/library/table.js @@ -20,8 +20,8 @@ // events events : { - 'click' : 'onclick', - 'dblclick' : 'ondblclick' + 'click' : '_onclick', + 'dblclick' : '_ondblclick' }, // first @@ -33,7 +33,7 @@ this.options = Utils.merge(options, this.optionsDefault); // create new element - this.setElement(this.template(options)); + this.setElement(this._template(options)); // initialize row this.row = $('<tr></tr>'); @@ -64,46 +64,26 @@ // append append: function(id) { - this.commit(id); + this._commit(id); }, // prepend prepend: function(id) { - this.commit(id, true); - }, - - // commit - commit: function(id, prepend) { - // add - this.row.attr('id', id); - - // add row - if (prepend) { - $(this.el).find('tbody').prepend(this.row); - } else { - $(this.el).find('tbody').append(this.row); - } - - // row - this.row = $('<tr></tr>'); - - // row count - this.row_count++; - this.refresh(); + this._commit(id, true); }, // remove remove: function(id) { $(this.el).find('#' + id).remove(); this.row_count--; - this.refresh(); + this._refresh(); }, // remove removeAll: function() { $(this.el).find('tbody').html(''); this.row_count = 0; - this.refresh(); + this._refresh(); }, // value @@ -134,13 +114,28 @@ } }, - // confirm new value - confirm: function(new_value) { - this.value(new_value); + // commit + _commit: function(id, prepend) { + // add + this.row.attr('id', id); + + // add row + if (prepend) { + $(this.el).find('tbody').prepend(this.row); + } else { + $(this.el).find('tbody').append(this.row); + } + + // row + this.row = $('<tr></tr>'); + + // row count + this.row_count++; + this._refresh(); }, // onclick - onclick: function(e) { + _onclick: function(e) { // get values var old_value = this.value(); var new_value = $(e.target).closest('tr').attr('id'); @@ -150,13 +145,13 @@ if (this.options.onconfirm) { this.options.onconfirm(new_value); } else { - this.confirm(new_value); + this.value(new_value); } } }, - // onclick - ondblclick: function(e) { + // ondblclick + _ondblclick: function(e) { var value = this.value(); if (value && this.options.ondblclick) { this.options.ondblclick(value); @@ -164,7 +159,7 @@ }, // refresh - refresh: function() { + _refresh: function() { if (this.row_count == 0) { this.$el.find('tmessage').show(); } else { @@ -173,7 +168,7 @@ }, // load html template - template: function(options) + _template: function(options) { return '<div>' + '<table class="grid">' + diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/library/ui.js --- a/config/plugins/visualizations/charts/static/library/ui.js +++ b/config/plugins/visualizations/charts/static/library/ui.js @@ -6,7 +6,7 @@ { // options optionsDefault: { - label : '' + title : '' }, // initialize @@ -15,17 +15,17 @@ this.options = Utils.merge(options, this.optionsDefault); // create new element - this.setElement(this.template(this.options)); + this.setElement(this._template(this.options)); }, // template - template: function(options) { - return '<label><b>' + options.label + '</b></label>'; + _template: function(options) { + return '<label><b>' + options.title + '</b></label>'; }, // value value: function() { - return options.label; + return options.title; } }); @@ -35,10 +35,9 @@ // options optionsDefault: { id : null, - label : '', + title : '', float : 'right', cls : 'btn-default', - type : 'submit', icon : '' }, @@ -52,43 +51,99 @@ // add event $(this.el).on('click', options.onclick); + + // add tooltip + $(this.el).tooltip({title: options.tooltip, placement: 'bottom'}); + }, + + // element + _template: function(options) { + var str = '<button id="' + options.id + '" type="submit" style="margin-right: 5px; float: ' + options.float + ';" type="button" class="btn ' + options.cls + '">'; + if (options.icon) { + str += '<i class="icon fa ' + options.icon + '"></i> ' ; + } + str += options.title + + '</button>'; + return str; + } +}); + +// plugin +var ButtonIcon = Backbone.View.extend( +{ + // options + optionsDefault: { + title : '', + id : null, + float : 'right', + cls : 'icon-btn', + icon : '', + tooltip : '' + }, + + // initialize + initialize : function(options) { + // get options + this.options = Utils.merge(options, this.optionsDefault); + + // create new element + this.setElement(this._template(this.options)); + + // add event + $(this.el).on('click', options.onclick); + + // add tooltip + $(this.el).tooltip({title: options.tooltip, placement: 'bottom'}); + }, + + // element + _template: function(options) { + // width + var width = ''; + if (options.title) { + width = 'width: auto;'; + } + + // string + var str = '<div id="' + options.id + '" style="margin-right: 5px; float: ' + options.float + '; ' + width + '" class="' + options.cls + '">'; + + // title + if (options.title) { + str += '<div style="margin-right: 5px; margin-left: 5px;">' + + '<i class="icon fa ' + options.icon + '"/> ' + + '<span style="position: relative; font-size: 0.8em; top: -1px;">' + options.title + '</span>' + + '</div>'; + } else { + str += '<i class="icon fa ' + options.icon + '"/>'; + } + str += '</div>'; + return str; + } +}); + +// plugin +var Anchor = Backbone.View.extend( +{ + // options + optionsDefault: { + title : '' + }, + + // initialize + initialize : function(options) { + // get options + this.options = Utils.merge(options, this.optionsDefault); + + // create new element + this.setElement(this._template(this.options)); + + // add event + $(this.el).on('click', options.onclick); }, // element _template: function(options) { - var str = '<button id="' + options.id + '" type="' + options.type + '" style="margin-right: 5px; float: ' + options.float + ';" type="button" class="btn ' + options.cls + '">'; - if (options.icon) { - str += '<i class="icon fa ' + options.icon + '"></i> ' ; - } - str += options.label + - '</button>'; - return str; - } -}); - -// plugin -var Anchor = Backbone.View.extend( -{ - // options - optionsDefault: { - label : '' - }, - - // initialize - initialize : function(options) { - // get options - this.options = Utils.merge(options, this.optionsDefault); - - // create new element - this.setElement(this._template(this.options)); - - // add event - $(this.el).on('click', options.onclick); - }, - - // element - _template: function(options) { - return '<div><a href="javascript:void(0)">' + options.label + '</a></div>'; + return '<div><a href="javascript:void(0)">' + options.title + '</a></div>'; } }); @@ -118,7 +173,7 @@ // show message if (options.message != '') { - this.$el.html(this.template(this.options)); + this.$el.html(this._template(this.options)); this.$el.fadeIn(); // check if message is persistent @@ -139,7 +194,7 @@ }, // element - template: function(options) { + _template: function(options) { return '<div class="alert alert-' + options.status + '" style="padding: 2px 2px 2px 10px;">' + options.message + '</div>'; } }); @@ -159,7 +214,7 @@ this.options = Utils.merge(options, this.optionsDefault); // create new element - this.setElement(this.template(this.options)); + this.setElement(this._template(this.options)); // add click event var self = this; @@ -172,7 +227,7 @@ }, // element - template: function(options) { + _template: function(options) { return '<div class="search">' + '<form onsubmit="return false;">' + '<input id="search" class="form-control input-sm" type="text" name="search" placeholder="Search..." value="' + options.searchword + '">' + @@ -189,7 +244,7 @@ { // options optionsDefault: { - label : 'Unlabeled', + title : 'Unlabeled', body : null }, @@ -199,7 +254,7 @@ this.options = Utils.merge(options, this.optionsDefault); // create new element - this.setElement(this.template(this.options)); + this.setElement(this._template(this.options)); if (this.options.body) { this.$el.find('.body').append(this.options.body); @@ -207,9 +262,9 @@ }, // element - template: function(options) { + _template: function(options) { return '<div id="title" class="title">' + - options.label + ':' + + options.title + ':' + '</div>'; } }); @@ -370,48 +425,6 @@ }); // plugin -var ButtonIcon = Backbone.View.extend( -{ - // options - optionsDefault: { - id : null, - label : '', - float : 'right', - cls : 'icon-btn', - type : 'submit', - icon : '', - tooltip : '' - }, - - // initialize - initialize : function(options) { - // get options - this.options = Utils.merge(options, this.optionsDefault); - - // create new element - this.setElement(this.template(this.options)); - - // add event - $(this.el).on('click', options.onclick); - - // add tooltip - $(this.el).tooltip({title: options.tooltip, placement: 'bottom'}); - }, - - // element - template: function(options) { - var str = '<a id="' + options.id + '" style="margin-right: 5px; float: ' + options.float + ';" class="' + options.cls + '">'; - if (options.icon) { - str += '<i class="icon fa ' + options.icon + '"></i>'; - } - str += options.label + - '</a>'; - return str; - } -}); - - -// plugin var Input = Backbone.View.extend( { // options @@ -429,7 +442,7 @@ this.options = Utils.merge(options, this.optionsDefault); // create new element - this.setElement(this.template(this.options)); + this.setElement(this._template(this.options)); // disable input field if (this.options.disabled) { @@ -440,6 +453,14 @@ if (!this.options.visible) { this.$el.hide(); } + + // onchange event handler + var self = this; + if (this.options.onchange) { + this.$el.on('input', function() { + self.options.onchange(); + }); + } }, // value @@ -451,7 +472,7 @@ }, // element - template: function(options) { + _template: function(options) { return '<input id="' + options.id + '" type="' + options.type + '" value="' + options.value + '" placeholder="' + options.placeholder + '" class="form-control">'; } }); diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/library/ui.select.js --- a/config/plugins/visualizations/charts/static/library/ui.select.js +++ b/config/plugins/visualizations/charts/static/library/ui.select.js @@ -19,6 +19,11 @@ // create new element this.setElement(this._template(this.options)); + // initial value + if (this.options.value) { + this.$el.val(this.options.value); + } + // add change event var self = this; if (this.options.onchange) { diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/models/group.js --- a/config/plugins/visualizations/charts/static/models/group.js +++ b/config/plugins/visualizations/charts/static/models/group.js @@ -4,6 +4,12 @@ // model return Backbone.Model.extend( { + // options + defaults : { + label : 'Data label', + date : '' + }, + // reset reset: function() { diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e 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-tabs', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', 'plugin/models/chart', 'plugin/views/groups'], - function(Tabs, Table, Ui, Utils, Chart, GroupsView) { +define(['mvc/ui/ui-tabs', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', 'plugin/models/chart', 'plugin/models/group', 'plugin/views/group'], + function(Tabs, Table, Ui, Utils, Chart, Group, GroupView) { // widget return Backbone.View.extend( @@ -28,10 +28,9 @@ this.title = new Ui.Input({placeholder: 'Chart title'}); this.dataset = new Ui.Input({value : app.options.dataset.id, disabled: true, visible: false}); - // configure dataset - this.groups_view = new GroupsView(this.app); - - // table + // + // table with chart types + // var self = this; this.table = new Table({ header : false, @@ -40,7 +39,7 @@ // show modal self.app.modal.show({ title : 'Switching the chart type?', - body : 'You configured data sources. If you switch chart types your configurations will be removed.', + body : 'If you continue your data selections will cleared.', buttons : { 'Cancel' : function() { // hide modal @@ -51,13 +50,13 @@ self.app.modal.hide(); // confirm - self.table.confirm(type); + self.table.value(type); } } }); } else { // confirm - self.table.confirm(type); + self.table.value(type); } }, onchange : function(type) { @@ -70,7 +69,7 @@ content: 'No chart types available' }); - // add types + // load chart types into table var types_n = 0; var types = app.types.attributes; for (var id in types){ @@ -80,47 +79,55 @@ this.table.append(id); } + // + // tabs + // + this.tabs = new Tabs.View({ + title_new : 'Add Data', + onnew : function() { + self._addGroupModel(); + }, + operations : { + 'save' : new Ui.ButtonIcon({ + icon : 'fa-save', + tooltip : 'Draw Chart', + title : 'Draw', + onclick : function() { + // ensure that data group is available + if (self.chart.groups.length == 0) { + var group = self._addGroupModel(); + self.tabs.show(group.id); + } + + // save chart + self._saveChart(); + } + }), + 'back' : new Ui.ButtonIcon({ + icon : 'fa-caret-left', + tooltip : 'Return to Viewer', + title : 'Return', + onclick : function() { + self.$el.hide(); + self.app.charts_view.$el.show(); + } + }) + } + }); + // 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((new Ui.Label({ title : '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((new Ui.Label({ title : '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', - tooltip : 'Save Chart', - onclick : function() { - self._saveChart(); - } - }), - 'back' : new Ui.ButtonIcon({ - icon : 'fa-caret-left', - tooltip : 'Return', - onclick : function() { - self.$el.hide(); - self.app.charts_view.$el.show(); - } - }) - } - }); // 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' + id : 'settings', + title : 'Start', + $el : $settings }); // elements @@ -129,7 +136,7 @@ // hide back button on startup this.tabs.hideOperation('back'); - // model events + // chart events var self = this; this.chart.on('change:title', function(chart) { self.title.value(chart.get('title')); @@ -141,7 +148,7 @@ self._resetChart(); }); - // collection events + // charts events this.app.charts.on('add', function(chart) { self.tabs.showOperation('back'); }); @@ -154,12 +161,66 @@ self.tabs.hideOperation('back'); }); + // groups events + this.app.chart.groups.on('add', function(group) { + self._addGroup(group); + }); + this.app.chart.groups.on('remove', function(group) { + self._removeGroup(group); + }); + this.app.chart.groups.on('reset', function(group) { + self._removeAllGroups(); + }); + // reset this._resetChart(); }, + // new group + _addGroupModel: function() { + var group = new Group({ + id : Utils.uuid(), + dataset_id : this.chart.get('dataset_id') + }); + this.chart.groups.add(group); + return group; + }, + + // add group + _addGroup: function(group) { + // link this + var self = this; + + // create view + var group_view = new GroupView(this.app, {group: group}); + + // number of groups + var count = self.chart.groups.length; + + // add new tab + this.tabs.add({ + title : count + ': Chart Data', + id : group.id, + $el : group_view.$el, + ondel : function() { + self.chart.groups.remove(group.id); + } + }); + }, + + // remove group + _removeGroup: function(group) { + this.tabs.del(group.id); + }, + + // remove group + _removeAllGroups: function(group) { + this.tabs.delRemovable(); + }, + // reset _resetChart: function() { + // reset chart details this.chart.set('id', Utils.uuid()); this.chart.set('dataset_id', this.app.options.dataset.id); this.chart.set('type', 'bardiagram'); diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e 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 @@ -1,5 +1,5 @@ // dependencies -define(['mvc/ui/ui-portlet', 'plugin/library/table', 'plugin/library/ui', 'utils/utils'], function(Portlet, Table, Ui, Utils) { +define(['mvc/ui/ui-portlet', 'plugin/library/table', 'plugin/library/ui', 'utils/utils', 'plugin/models/group'], function(Portlet, Table, Ui, Utils, Group) { // widget return Backbone.View.extend( @@ -17,11 +17,11 @@ // get chart var chart = self.app.charts.get(chart_id); self.app.chart.copy(chart); - - // show edit + + // hide this element self.$el.hide(); - // update model and show create + // show chart view self.app.chart_view.$el.show(); }, onchange : function(chart_id) { diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e 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 @@ -12,46 +12,34 @@ initialize: function(app, options) { // link app this.app = app; - + + // link this + var self = this; + // get current chart object this.chart = this.app.chart; - this.group = this.app.group; + + // access group + this.group = options.group; // ui elements - this.message = new Ui.Message(); - this.label = new Ui.Input({placeholder: 'Group label'}); + this.label = new Ui.Input({ + placeholder: 'Data label', + onchange: function() { + self.group.set('label', self.label.value()); + } + }); this.table = new Table({content: 'No data column.'}); // add table to portlet - var self = this; - this.portlet = new Portlet.View({ - icon : 'fa-edit', - title : 'Define group properties:', - operations : { - 'save' : new Ui.ButtonIcon({ - icon : 'fa-save', - tooltip : 'Save', - onclick : function() { - // save/add group - self._saveGroup(); - } - }), - 'back' : new Ui.ButtonIcon({ - icon : 'fa-caret-left', - tooltip : 'Return', - onclick : function() { - self.$el.hide(); - self.app.chart_view.$el.show(); - } - }) - } - }); - this.portlet.append(this.message.$el); - this.portlet.append(this.label.$el); - this.portlet.append(this.table.$el); + var $view = $('<div/>'); + $view.append(Utils.wrap((new Ui.Label({title: 'Provide a label:'})).$el)); + $view.append(Utils.wrap(this.label.$el)); + $view.append(Utils.wrap((new Ui.Label({title: 'Select columns:'})).$el)); + $view.append(Utils.wrap(this.table.$el)); // add element - this.setElement(this.portlet.$el); + this.setElement($view); // change var self = this; @@ -67,20 +55,17 @@ this.group.on('change', function() { self._refreshGroup(); }); - this.group.on('reset', function() { - self._resetGroup(); - }); + + // refresh + this._refresh(); }, - // show - show: function() { - this.$el.show(); - }, - - // reset - _resetGroup: function() { - this.group.set('id', Utils.uuid()); - this.group.set('label', 'Group label'); + // render + _refresh: function() { + this._refreshDataset(); + this._refreshType(); + this._refreshLabel(); + this._refreshGroup(); }, // update dataset @@ -98,7 +83,7 @@ // check if (!dataset) { - this.app.log('Config::render()', 'Failed to retrieve dataset.'); + this.app.log('Group::_refreshDataset()', 'Failed to retrieve dataset.'); return; } @@ -138,9 +123,13 @@ data : this.columns, onchange : function(value) { self.group.set(this.gid, value); - } + }, + value : this.group.get(id) }); + // set model value + this.group.set(id, select.value()); + // add row to table this.table.add(data_def.title); this.table.add(select.$el); @@ -154,14 +143,7 @@ // update _refreshGroup: function() { - // update select fields - for (var id in this.list) { - var col = this.group.get(id); - if (col === undefined) { - col = 0; - } - this.list[id].value(col); - } + this.group.set('date', Utils.time()); }, // update label @@ -171,48 +153,6 @@ label_text = ''; } this.label.value(label_text); - }, - - // create group - _saveGroup: function() { - // get current chart - var chart = this.chart; - - // update group object - var group = this.group; - for (var key in this.list) { - group.set(key, this.list[key].value()); - } - - // add label - group.set({ - dataset_id : this.chart.get('dataset_id'), - label : this.label.value(), - date : Utils.time() - }); - - // validate - if (!group.get('label')) { - this.message.update({message : 'Please enter a label for your group.'}); - return; - } - - // get groups of current chart - var groups = this.chart.groups; - - // create/update group - var group_update = groups.get(group.id); - if (group_update) { - group_update.set(group.attributes); - } else { - groups.add(group.clone()); - } - - // hide - this.$el.hide(); - - // update main - this.app.chart_view.$el.show(); } }); diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e config/plugins/visualizations/charts/static/views/groups.js --- a/config/plugins/visualizations/charts/static/views/groups.js +++ /dev/null @@ -1,154 +0,0 @@ -// dependencies -define(['mvc/ui/ui-portlet', 'plugin/library/table', 'plugin/library/ui', 'utils/utils'], function(Portlet, Table, Ui, Utils) { - -// chart config -return Backbone.View.extend( -{ - // initialize - initialize: function(app, options) { - // link app - this.app = app; - - // get current chart object - this.chart = this.app.chart; - - // table - this.table = new Table({ - content : 'Add data columns to this table.', - ondblclick : function(group_id) { - // get group - var group = self.app.chart.groups.get(group_id); - - // show edit - self.app.chart_view.$el.hide(); - self.app.group_view.show(); - self.app.group_view.group.set(group.attributes); - } - }); - - // add table to portlet - var self = this; - this.portlet = new Portlet.View({ - icon : '', - title : 'Select data columns:', - height : 100, - operations : { - 'new' : new Ui.ButtonIcon({ - icon : 'fa-plus', - tooltip: 'Create', - onclick: function() { - self.app.group.reset(); - self.app.chart_view.$el.hide(); - self.app.group_view.show(); - } - }), - 'edit' : new Ui.ButtonIcon({ - icon : 'fa-pencil', - tooltip: 'Edit', - onclick: function() { - // check if element has been selected - var group_id = self.table.value(); - if (!group_id) { - return; - } - - // get group - var group = self.app.chart.groups.get(group_id); - - // show edit - self.app.chart_view.$el.hide(); - self.app.group_view.show(); - self.app.group_view.group.set(group.attributes); - } - }), - 'delete' : new Ui.ButtonIcon({ - icon : 'fa-minus', - tooltip: 'Delete', - onclick: function() { - // check if element has been selected - var id = self.table.value(); - if (!id) { - return; - } - // remove group from chart - self.chart.groups.remove(id); - } - }) - } - }); - this.portlet.append(this.table.$el); - - // add element - this.setElement(this.portlet.$el); - - // change - var self = this; - this.chart.on('change', function() { - self._refresh(); - }); - this.chart.on('reset', function() { - self._removeGroupAll(); - }); - this.chart.on('change:type', function() { - self.app.group_view.trigger('change'); - }); - this.chart.groups.on('add', function(group) { - self._addGroup(group); - }); - this.chart.groups.on('remove', function(group) { - self._removeGroup(group); - }); - this.chart.groups.on('reset', function(group) { - self._removeGroupAll(); - }); - this.chart.groups.on('change', function(group) { - self._removeGroup(group); - self._addGroup(group); - }); - }, - - // refresh - _refresh: function() { - this._removeGroupAll(); - var self = this; - var groups = this.chart.groups; - if (groups) { - groups.each(function(group) { self._addGroup(group); }); - } - }, - - // add - _addGroup: function(group) { - // make custom info string - var info = '['; - var chart_type = this.chart.get('type'); - if (chart_type) { - var chart_settings = this.app.types.get(chart_type); - for (var key in chart_settings.data) { - info += key + '=' + group.get(key) + ', ' - } - } - info = info.substring(0, info.length - 2) + ']'; - - // add to table - this.table.add(group.get('label')); - this.table.add(info); - this.table.add('Last changed: ' + group.get('date')); - this.table.prepend(group.id); - this.table.value(group.id); - }, - - // remove - _removeGroup: function(group) { - // remove from to table - this.table.remove(group.id); - }, - - // data config reset - _removeGroupAll: function() { - // reset options table - this.table.removeAll(); - } -}); - -}); \ No newline at end of file diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e static/scripts/mvc/ui/ui-portlet.js --- a/static/scripts/mvc/ui/ui-portlet.js +++ b/static/scripts/mvc/ui/ui-portlet.js @@ -109,12 +109,12 @@ this.$buttons.find('#' + id).prop('disabled', true); }, - // enable operation + // hide operation hideOperation: function(id) { this.$operations.find('#' + id).hide(); }, - // disable operation + // show operation showOperation: function(id) { this.$operations.find('#' + id).show(); }, diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e static/scripts/mvc/ui/ui-tabs.js --- a/static/scripts/mvc/ui/ui-tabs.js +++ b/static/scripts/mvc/ui/ui-tabs.js @@ -12,9 +12,14 @@ $nav: null, $content: null, + // first + first_tab: null, + // defaults options optionsDefault: { - operations: null, + title_new : '', + operations : null, + onnew : null }, // initialize @@ -22,10 +27,12 @@ // configure options this.options = Utils.merge(options, this.optionsDefault); - // create element + // create tabs var $tabs = $(this._template(this.options)); - this.$nav = $tabs.find('.tab-navigation'); - this.$content = $tabs.find('.tab-content'); + + // link elements + this.$nav = $tabs.find('.tab-navigation'); + this.$content = $tabs.find('.tab-content'); // create new element this.setElement($tabs); @@ -38,42 +45,111 @@ self.$nav.append(item.$el); }); } + + // add built-in add-new-tab tab + if (this.options.onnew) { + // create tab object + var $tab_new = $(this._template_tab_new(this.options)); + + // append to navbar + this.$nav.append($tab_new); + + // add tooltip + $tab_new.tooltip({title: 'Add a new tab', placement: 'bottom'}); + + // link click event + $tab_new.on('click', function(e) { + $tab_new.tooltip('hide'); + self.options.onnew(); + }); + } }, // append add: function(options) { - // collect parameters - var $el = options.$el; - var title = options.title; + // get tab id var id = options.id; // create tab object var tab = { - $title : $(this._template_tab(options)), - $content : $(this._template_tab_content(options)) + $title : $(this._template_tab(options)), + $content : $(this._template_tab_content(options)), + removable : options.ondel ? true : false } - // 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 + // 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); + } else { + this.$nav.append(tab.$title); + } + + // add 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'); + this.first_tab = id; + } + + // add click event to remove tab + if (options.ondel) { + var $del_icon = tab.$title.find('#delete'); + $del_icon.tooltip({title: 'Delete this tab', placement: 'bottom'}); + $del_icon.on('click', function(e) { + $del_icon.tooltip('destroy'); + options.ondel(); + return false; + }); + } + }, + + // delete tab + del: function(id) { + // delete tab from list/dom + var tab = this.list[id]; + tab.$title.remove(); + tab.$content.remove(); + delete tab; + + // check if first tab has been deleted + if (this.first_tab == id) { + this.first_tab = null; + } + + // show first tab + if (this.first_tab != null) { + this.show(this.first_tab); + } + }, + + // delete tab + delRemovable: function() { + // delete tab from list/dom + for (var id in this.list) { + var tab = this.list[id]; + if (tab.removable) { + this.del(id); + } } }, // show - show: function(){ + show: function(id){ + // show tab view this.$el.fadeIn('fast'); this.visible = true; + + // show selected tab + if (id) { + this.list[id].$title.find('a').tab('show'); + } }, // hide @@ -82,12 +158,12 @@ this.visible = false; }, - // enable operation + // hide operation hideOperation: function(id) { this.$nav.find('#' + id).hide(); }, - // disable operation + // show operation showOperation: function(id) { this.$nav.find('#' + id).show(); }, @@ -100,8 +176,8 @@ }, // title - title: function(id, new_label) { - var $el = this.$el.find('#title-' + id + ' a'); + title: function(id, new_title) { + var $el = this.list[id].$title.find('#text'); if (new_title) { $el.html(new_title); } @@ -117,10 +193,29 @@ }, // fill template tab + _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"/>' + + options.title_new + + '</a>' + + '</li>'; + }, + + // 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>'; + 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>'; + + if (options.ondel) { + tmpl += '<i id="delete" style="font-size: 0.8em; margin-left: 5px; cursor: pointer;" class="fa fa-minus-circle"/>'; + } + + tmpl += '</a>' + + '</li>'; + + return tmpl; }, // fill template tab content diff -r fac578cca75887d811e67993a655fed20c0d8713 -r 462a28f96c2172113d1cad657e271e792493b49e 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,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 +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);if(this.options.operations){var d=this;$.each(this.options.operations,function(g,h){h.$el.prop("id",g);d.$nav.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"});f.on("click",function(g){f.tooltip("hide");d.options.onnew()})}},add:function(d){var f=d.id;var e={$title:$(this._template_tab(d)),$content:$(this._template_tab_content(d)),removable:d.ondel?true:false};this.list[f]=e;if(this.options.onnew){this.$nav.find("#new-tab").before(e.$title)}else{this.$nav.append(e.$title)}e.$content.append(d.$el);this.$content.append(e.$content);if(_.size(this.list)==1){e.$title.addClass("active");e.$content.addClass("active");this.first_tab=f}if(d.ondel){var c=e.$title.find("#delete");c.tooltip({title:"Delete this tab",placement:"bottom"});c.on("click",function(g){c.tooltip("destroy");d.ondel();return false})}},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="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 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