Skip to content

Commit

Permalink
Revise to 3-tab mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@guerler
guerler committed Jun 22, 2016
1 parent ca4b444 commit 9f7c392
Showing 1 changed file with 19 additions and 72 deletions.
91 changes: 19 additions & 72 deletions config/plugins/visualizations/charts/static/views/editor.js
View file
Expand Up @@ -4,14 +4,14 @@
*/
define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils',
'plugin/models/chart', 'plugin/models/group',
'plugin/views/group', 'plugin/views/settings', 'plugin/views/types' ],
function( Tabs, Ui, Portlet, Utils, Chart, Group, GroupView, SettingsView, TypesView ) {
'plugin/views/settings', 'plugin/views/groups', 'plugin/views/types' ],
function( Tabs, Ui, Portlet, Utils, Chart, Group, SettingsView, GroupsView, TypesView ) {
return Backbone.View.extend({
initialize: function( app, options ){
var self = this;
this.app = app;
this.chart = this.app.chart;
this.message = new Ui.Message();
this.message = new Ui.Message( { cls: 'ui-margin-bottom' } );
this.portlet = new Portlet.View({
icon : 'fa-bar-chart-o',
title: 'Editor',
Expand Down Expand Up @@ -53,42 +53,38 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
}
});

// tab view
this.tabs = new Tabs.View({
title_new : 'Add Data',
onnew : function() {
var group = self._addGroupModel();
self.tabs.show( group.id );
}
});

// start tab
// input field for chart title
this.title = new Ui.Input({
placeholder: 'Chart title',
onchange: function() {
self.chart.set( 'title', self.title.value() );
}
});

// create tabs
this.tabs = new Tabs.View( {} );
this.tabs.add({
id : 'main',
title : 'Start',
title : '1: Start',
$el : $( '<div/>' ).append( ( new Ui.Label( { title : 'Provide a chart title:' } ).$el ) )
.append( this.title.$el )
.append( $( '<div/>' ).addClass( 'ui-form-info' ).html( 'This title will appear in the list of \'Saved Visualizations\'. Charts are saved upon creation.' ) )
.append( this.types.$el.addClass( 'ui-margin-top' ) )
});

// settings tab
this.settings = new SettingsView( this.app );
this.tabs.add({
id : 'settings',
title : 'Configuration',
$el : this.settings.$el
title : '2: Customize',
$el : ( new SettingsView( this.app ) ).$el
});
this.tabs.add({
id : 'groups',
title : '3: Select data',
$el : ( new GroupsView( this.app ) ).$el
});

// set elements
this.portlet.append( this.message.$el.addClass( 'ui-margin-top' ) );
this.portlet.append( this.tabs.$el.addClass( 'ui-margin-top' ) );
this.portlet.append( this.message.$el );
this.portlet.append( this.tabs.$el );
this.setElement( this.portlet.$el );
this.tabs.hideOperation( 'back' );

Expand All @@ -97,10 +93,6 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
this.chart.on( 'change:type', function( chart ) { self.types.value( chart.get( 'type' ) ) } );
this.chart.on( 'reset', function( chart ) { self._resetChart() } );
this.app.chart.on( 'redraw', function( chart ) { self.portlet.showOperation( 'back' ) } );
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() } );
this.app.chart.groups.on( 'change:key', function( group ) { self._refreshGroupKey() } );
this._resetChart();
},

Expand All @@ -118,51 +110,7 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
_refreshTitle: function() {
var title = this.chart.get( 'title' );
this.portlet.title( title );
if ( this.title.value() != title ) {
this.title.value( title );
}
},

/** Refresh group handler */
_refreshGroupKey: function() {
var self = this;
var counter = 0;
this.chart.groups.each( function( group ) {
var title = group.get( 'key', '' );
self.tabs.title( group.id, ++counter + ': ' + ( title == '' ? 'Data label' : title ) );
});
},

/** Add group model */
_addGroupModel: function() {
var group = new Group( { id : Utils.uid() } );
this.chart.groups.add( group );
return group;
},

/** Add group tab */
_addGroup: function( group ) {
var self = this;
var group_view = new GroupView( this.app, { group: group } );
this.tabs.add({
id : group.id,
$el : group_view.$el,
ondel : function() { self.chart.groups.remove( group.id ) }
});
this._refreshGroupKey();
this.chart.set( 'modified', true );
},

/** Remove group */
_removeGroup: function( group ) {
this.tabs.del( group.id );
this._refreshGroupKey();
this.chart.set( 'modified', true );
},

/** Remove all groups */
_removeAllGroups: function( group ) {
this.tabs.delRemovable();
this.title.value( title );
},

/** Reset entire chart */
Expand All @@ -186,8 +134,7 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
});
if ( this.chart.groups.length == 0 ) {
this.message.update( { message: 'Please select data columns before drawing the chart.' } );
var group = this._addGroupModel();
this.tabs.show( group.id );
this.tabs.show( 'groups' );
return;
}
var valid = true;
Expand Down

0 comments on commit 9f7c392

Please sign in to comment.