Skip to content

Commit

Permalink
Align style of table view component to other ui views
Browse files Browse the repository at this point in the history
  • Loading branch information
@guerler
guerler committed Mar 15, 2017
1 parent d42848e commit 0b26d56
Show file tree
Hide file tree
Showing 8 changed files with 179 additions and 232 deletions.
374 changes: 161 additions & 213 deletions client/galaxy/scripts/mvc/ui/ui-table.js
View file
@@ -1,228 +1,176 @@
// dependencies
define(['utils/utils'], function(Utils) {
/** This class creates a ui table element. */
define( [ 'utils/utils' ], function( Utils ) {
var View = Backbone.View.extend({
initialize : function(options) {
this.options = Utils.merge(options, {
content : 'No content available.',
onchange : null,
ondblclick : null,
onconfirm : null,
cls : 'ui-table',
cls_tr : ''
});
this.setElement( this._template() );
this.$thead = this.$('thead');
this.$tbody = this.$('tbody');
this.$tmessage = this.$('tmessage');
this.row = this._row();
this.row_count = 0;
},

/**
* This class creates a ui table element.
*/
var View = Backbone.View.extend({
// current row
row: null,

// count rows
row_count: 0,

// defaults options
optionsDefault: {
content : 'No content available.',
onchange : null,
ondblclick : null,
onconfirm : null,
cls : 'ui-table',
cls_tr : ''
},

// events
events : {
'click' : '_onclick',
'dblclick' : '_ondblclick'
},

// initialize
initialize : function(options) {
// configure options
this.options = Utils.merge(options, this.optionsDefault);
events : {
'click' : '_onclick',
'dblclick' : '_ondblclick'
},

/** Add cell to header row */
addHeader: function( $el ) {
this.row.append( $( '<th/>' ).append( $el ) );
},

/** Append header row to table */
appendHeader: function() {
this.$thead.append( this.row );
this.row = $( '<tr/>' );
},

/** Add cell to row */
add: function($el, width, align) {
var wrapper = $( '<td/>' );
if ( width ) {
wrapper.css( 'width', width );
}
if ( align ) {
wrapper.css( 'text-align', align );
}
this.row.append( wrapper.append( $el ) );
},

// create new element
var $el = $(this._template(this.options));
/** Append row to table */
append: function( id, fade ) {
this._commit( id, fade, false );
},

// link sub-elements
this.$thead = $el.find('thead');
this.$tbody = $el.find('tbody');
this.$tmessage = $el.find('tmessage');
/** Prepend row to table */
prepend: function( id, fade ) {
this._commit( id, fade, true );
},

// set element
this.setElement($el);

// initialize row
this.row = this._row();
},

// add header cell
addHeader: function($el) {
var wrapper = $('<th></th>');
wrapper.append($el);
this.row.append(wrapper);
},

// header
appendHeader: function() {
// append header row
this.$thead.append(this.row);
/** Helper to get row element */
get: function( id ) {
return this.$( '#' + id );
},

// row
this.row = $('<tr></tr>');
},

// add row cell
add: function($el, width, align) {
var wrapper = $('<td></td>');
if (width) {
wrapper.css('width', width);
}
if (align) {
wrapper.css('text-align', align);
}
wrapper.append($el);
this.row.append(wrapper);
},

// append
append: function(id, fade) {
this._commit(id, fade, false);
},

// prepend
prepend: function(id, fade) {
this._commit(id, fade, true);
},

// get element
get: function(id) {
return this.$el.find('#' + id);
},

// delete
del: function(id) {
var item = this.$tbody.find('#' + id);
if (item.length > 0) {
item.remove();
this.row_count--;
/** Delete row by id */
del: function( id ) {
var item = this.$tbody.find( '#' + id );
if ( item.length > 0 ) {
item.remove();
this.row_count--;
this._refresh();
}
},

/** Delete all rows */
delAll: function() {
this.$tbody.empty();
this.row_count = 0;
this._refresh();
}
},
},

// delete all
delAll: function() {
this.$tbody.empty();
this.row_count = 0;
this._refresh();
},

// value
value: function(new_value) {
// get current id/value
this.before = this.$tbody.find('.current').attr('id');

// check if new_value is defined
if (new_value !== undefined) {
this.$tbody.find('tr').removeClass('current');
if (new_value) {
this.$tbody.find('#' + new_value).addClass('current');
/** Set a value i.e. selects/highlights a particular row by id */
value: function( new_value ) {
this.before = this.$tbody.find( '.current' ).attr( 'id' );
if ( new_value !== undefined ) {
this.$tbody.find( 'tr' ).removeClass( 'current' );
if ( new_value ) {
this.$tbody.find( '#' + new_value ).addClass( 'current' );
}
}
}

// get current id/value
var after = this.$tbody.find('.current').attr('id');
if(after === undefined) {
return null;
} else {
// fire onchange
if (after != this.before && this.options.onchange) {
this.options.onchange(new_value);
var after = this.$tbody.find( '.current' ).attr( 'id' );
if ( after === undefined ) {
return null;
} else {
if ( after != this.before && this.options.onchange ) {
this.options.onchange( new_value );
}
return after;
}

// return current value
return after;
}
},

// size
size: function() {
return this.$tbody.find('tr').length;
},

// commit
_commit: function(id, fade, prepend) {
// remove previous item with same id
this.del(id);

// add
this.row.attr('id', id);

// add row
if (prepend) {
this.$tbody.prepend(this.row);
} else {
this.$tbody.append(this.row);
}

// fade mode
if (fade) {
this.row.hide();
this.row.fadeIn();
}

// row
this.row = this._row();

// row count
this.row_count++;
this._refresh();
},

// create new row
_row: function() {
return $('<tr class="' + this.options.cls_tr + '"></tr>');
},

// onclick
_onclick: function(e) {
// get values
var old_value = this.value();
var new_value = $(e.target).closest('tr').attr('id');
if (new_value != ''){
// check equality
if (new_value && old_value != new_value) {
if (this.options.onconfirm) {
this.options.onconfirm(new_value);
} else {
this.value(new_value);
},

/** Return the number of rows */
size: function() {
return this.$tbody.find( 'tr' ).length;
},

/** Helper to append rows */
_commit: function( id, fade, prepend ) {
this.del( id );
this.row.attr( 'id', id );
if ( prepend ) {
this.$tbody.prepend( this.row );
} else {
this.$tbody.append( this.row );
}
if ( fade ) {
this.row.hide();
this.row.fadeIn();
}
this.row = this._row();
this.row_count++;
this._refresh();
},

/** Helper to create new row */
_row: function() {
return $( '<tr class="' + this.options.cls_tr + '"></tr>' );
},

/** Handles onclick events */
_onclick: function(e) {
var old_value = this.value();
var new_value = $( e.target ).closest( 'tr' ).attr( 'id' );
if ( new_value != '' ){
if ( new_value && old_value != new_value ) {
if ( this.options.onconfirm ) {
this.options.onconfirm( new_value );
} else {
this.value( new_value );
}
}
}
}
},
},

// ondblclick
_ondblclick: function(e) {
var value = this.value();
if (value && this.options.ondblclick) {
this.options.ondblclick(value);
}
},

// refresh
_refresh: function() {
if (this.row_count == 0) {
this.$tmessage.show();
} else {
this.$tmessage.hide();
}
},

// load html template
_template: function(options) {
return '<div>' +
'<table class="' + options.cls + '">' +
'<thead></thead>' +
'<tbody></tbody>' +
'</table>' +
'<tmessage>' + options.content + '</tmessage>' +
'<div>';
}
});
/** Handles ondblclick events */
_ondblclick: function( e ) {
var value = this.value();
if ( value && this.options.ondblclick ) {
this.options.ondblclick( value );
}
},

return {
View: View
}
/** Refresh helper */
_refresh: function() {
if ( this.row_count == 0 ) {
this.$tmessage.show();
} else {
this.$tmessage.hide();
}
},

/** Template */
_template: function() {
return '<div>' +
'<table class="' + this.options.cls + '">' +
'<thead/>' +
'<tbody/>' +
'</table>' +
'<tmessage>' + this.options.content + '</tmessage>' +
'<div>';
}
});

return {
View: View
}
});
1 change: 0 additions & 1 deletion client/galaxy/scripts/mvc/user/user-custom-builds.js
View file
Expand Up @@ -49,7 +49,6 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/form/form-view', 'mvc/ui/ui-tabl

_renderForm: function() {
var form = new Form({
//cls : 'ui-portlet-plain',
inputs : [{
type : 'text',
name : 'id',
Expand Down

0 comments on commit 0b26d56

Please sign in to comment.