mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Merge pull request #3079 from guerler/reusable_grid_view
Move thumbnail list view to shared ui elements, revise tabs, add test cases
This commit is contained in:
John Chilton
@@ -1,213 +1,149 @@
|
||||
/**
|
||||
* Renders tabs e.g. used in the Charts editor, behaves similar to repeat and section rendering
|
||||
* Renders tabs e.g. used in the charts editor, behaves similar to repeat and section rendering
|
||||
*/
|
||||
define( [ 'utils/utils' ], function( Utils ) {
|
||||
var View = Backbone.View.extend({
|
||||
initialize : function( options ) {
|
||||
var self = this;
|
||||
this.visible = false;
|
||||
this.$nav = null;
|
||||
this.$content = null;
|
||||
this.first_tab = null;
|
||||
this.current_id = null;
|
||||
this.list = {};
|
||||
this.options = Utils.merge( options, {
|
||||
title_new : '',
|
||||
operations : null,
|
||||
onnew : null,
|
||||
max : null,
|
||||
onchange : null
|
||||
});
|
||||
this.setElement( $( this._template( this.options ) ) );
|
||||
this.$nav = this.$( '.tab-navigation' );
|
||||
this.$content = this.$( '.tab-content' );
|
||||
this.$operations = this.$nav.find( '.tab-operations' );
|
||||
var View = Backbone.View.extend({
|
||||
initialize : function( options ) {
|
||||
var self = this;
|
||||
this.collection = new Backbone.Collection();
|
||||
this.model = options && options.model || new Backbone.Model( {
|
||||
onchange : null,
|
||||
visible : true
|
||||
}).set( options );
|
||||
this.setElement( $( this._template() ) );
|
||||
this.$nav = this.$( '.tab-navigation' );
|
||||
this.$content = this.$( '.tab-content' );
|
||||
this.$el.on( 'click', function() { $( '.tooltip' ).hide() } );
|
||||
this.render();
|
||||
this.listenTo( this.model, 'change', this.render, this );
|
||||
this.listenTo( this.collection, 'add', this._add, this );
|
||||
this.listenTo( this.collection, 'remove', this._remove, this );
|
||||
this.listenTo( this.collection, 'change', this._change, this );
|
||||
this.listenTo( this.collection, 'reset', this._reset, this );
|
||||
this.listenTo( this.collection, 'add remove reset', this.render, this );
|
||||
},
|
||||
|
||||
// Renders tab operations
|
||||
if ( this.options.operations ) {
|
||||
$.each( this.options.operations, function( name, item ) {
|
||||
item.$el.prop( 'id', name );
|
||||
self.$operations.append( item.$el );
|
||||
});
|
||||
render: function() {
|
||||
var id = this.model.get( 'current' );
|
||||
id = this.$( '#' + id ).length > 0 ? id : this.first();
|
||||
if ( id ) {
|
||||
this.$nav.children().removeClass('active' );
|
||||
this.$content.children().removeClass('active' );
|
||||
this.$( '#tab-' + id ).addClass( 'active' );
|
||||
this.$( '#' + id ).addClass( 'active' );
|
||||
}
|
||||
this.$el[ this.model.get( 'visible' ) ? 'fadeIn' : 'fadeOut' ]( 'fast' );
|
||||
this.$nav[ this.size() > 1 ? 'show' : 'hide' ]();
|
||||
},
|
||||
|
||||
/** Returns tab id for currently shown tab */
|
||||
current: function() {
|
||||
return this.model.get( 'current' );
|
||||
},
|
||||
|
||||
/** Show tab view and highlight a tab by id */
|
||||
show: function( id ) {
|
||||
if ( id ) {
|
||||
this.model.set( { 'current': id, 'visible': true } );
|
||||
this.model.get( 'onchange' ) && this.model.get( 'onchange' )( id );
|
||||
}
|
||||
},
|
||||
|
||||
/** Hide tab view */
|
||||
hide: function(){
|
||||
this.model.set( 'visible', false );
|
||||
},
|
||||
|
||||
/** Returns first tab */
|
||||
first: function() {
|
||||
var model = this.collection.first();
|
||||
return model && model.id;
|
||||
},
|
||||
|
||||
/** Returns current number of tabs */
|
||||
size: function() {
|
||||
return this.collection.length;
|
||||
},
|
||||
|
||||
/** Adds a new tab */
|
||||
add: function( options ) {
|
||||
this.collection.add( options );
|
||||
},
|
||||
|
||||
/** Delete tab */
|
||||
del: function( id ) {
|
||||
this.collection.remove( id );
|
||||
},
|
||||
|
||||
/** Delete all tabs */
|
||||
delAll: function() {
|
||||
this.collection.reset();
|
||||
},
|
||||
|
||||
/** Show tab */
|
||||
showTab: function( id ) {
|
||||
this.collection.get( id ).set( 'hidden', false );
|
||||
},
|
||||
|
||||
/** Hide tab */
|
||||
hideTab: function( id ) {
|
||||
this.collection.get( id ).set( 'hidden', true );
|
||||
},
|
||||
|
||||
/** Adds a new tab */
|
||||
_add: function( tab_model ) {
|
||||
var self = this;
|
||||
var options = tab_model.attributes;
|
||||
this.$content.append( $( '<div/>' ).attr( 'id', options.id ).addClass( 'tab-pane' ).append( options.$el ) );
|
||||
this.$nav.append( $( this._template_tab( options ) )
|
||||
.show()
|
||||
.tooltip( { title: options.tooltip, placement: 'bottom', container: self.$el } )
|
||||
.on( 'click', function( e ) {
|
||||
e.preventDefault();
|
||||
self.show( options.id );
|
||||
}));
|
||||
if ( this.size() == 1 ) {
|
||||
this.show( options.id );
|
||||
}
|
||||
},
|
||||
|
||||
/** Delete tab */
|
||||
_remove: function( tab_model ) {
|
||||
this.$( '#tab-' + tab_model.id ).remove();
|
||||
this.$( '#' + tab_model.id ).remove();
|
||||
},
|
||||
|
||||
/** Reset collection */
|
||||
_reset: function() {
|
||||
this.$nav.empty();
|
||||
this.$content.empty();
|
||||
},
|
||||
|
||||
/** Change tab */
|
||||
_change: function( tab_model ) {
|
||||
this.$( '#tab-' + tab_model.id )[ tab_model.get( 'hidden' ) ? 'hide' : 'show' ]();
|
||||
},
|
||||
|
||||
/** Main template */
|
||||
_template: function() {
|
||||
return $( '<div/>' ).addClass( 'ui-tabs tabbable tabs-left' )
|
||||
.append( $( '<ul/>' ).addClass( 'tab-navigation nav nav-tabs' ) )
|
||||
.append( $( '<div/>' ).addClass( 'tab-content' ) );
|
||||
},
|
||||
|
||||
/** Tab template */
|
||||
_template_tab: function( options ) {
|
||||
var $tmpl = $( '<li/>' ).addClass( 'tab-element' )
|
||||
.attr( 'id', 'tab-' + options.id )
|
||||
.append( $( '<a/>' ).attr( 'id', 'tab-title-link-' + options.id ) );
|
||||
var $href = $tmpl.find( 'a' );
|
||||
options.icon && $href.append( $( '<i/>' ).addClass( 'tab-icon fa' ).addClass( options.icon ) );
|
||||
$href.append( $( '<span/>' ).attr( 'id', 'tab-title-text-' + options.id )
|
||||
.addClass( 'tab-title-text' )
|
||||
.append( options.title ) );
|
||||
return $tmpl;
|
||||
}
|
||||
});
|
||||
|
||||
// Allows user to add new tabs
|
||||
this.options.onnew && this.$nav.append( $( this._template_tab_new( this.options ) )
|
||||
.tooltip( { title: 'Add a new tab', placement: 'bottom', container: self.$el } )
|
||||
.on( 'click', function( e ) { self.options.onnew() } )
|
||||
);
|
||||
this.$tabnew = this.$nav.find( '.tab-new' );
|
||||
|
||||
// Remove all tooltips on click
|
||||
this.$el.on( 'click', function() { $( '.tooltip' ).hide() } );
|
||||
},
|
||||
|
||||
/** Returns current number of tabs */
|
||||
size: function() {
|
||||
return _.size( this.list );
|
||||
},
|
||||
|
||||
/** Returns tab id for currently shown tab */
|
||||
current: function() {
|
||||
return this.$el.find( '.tab-pane.active' ).attr( 'id' );
|
||||
},
|
||||
|
||||
/** Adds a new tab */
|
||||
add: function( options ) {
|
||||
var self = this;
|
||||
var id = options.id;
|
||||
var $tab_title = $( this._template_tab( options ) );
|
||||
var $tab_content = $( '<div/>' ).attr( 'id', options.id ).addClass( 'tab-pane' );
|
||||
|
||||
// hide new tab if maximum number of tabs has been reached
|
||||
this.list[ id ] = true;
|
||||
if ( this.options.max && this.size() >= this.options.max ) {
|
||||
this.$tabnew.hide();
|
||||
}
|
||||
|
||||
// insert tab before new tab or as last tab
|
||||
if ( this.options.onnew ) {
|
||||
this.$tabnew.before( $tab_title );
|
||||
} else {
|
||||
this.$nav.append( $tab_title );
|
||||
}
|
||||
|
||||
// assing delete callback if provided
|
||||
if ( options.ondel ) {
|
||||
$tab_title.find( '.tab-delete' ).tooltip( { title: 'Delete this tab', placement: 'bottom', container: self.$el } )
|
||||
.on( 'click', function() { options.ondel() } );
|
||||
} else {
|
||||
$tab_title.tooltip( { title: options.tooltip, placement: 'bottom', container: self.$el } );
|
||||
}
|
||||
$tab_title.on( 'click', function( e ) {
|
||||
e.preventDefault();
|
||||
options.onclick ? options.onclick() : self.show( id );
|
||||
});
|
||||
this.$content.append( $tab_content.append( options.$el ) );
|
||||
|
||||
// assign current/first tab
|
||||
if ( this.size() == 1 ) {
|
||||
$tab_title.addClass( 'active' );
|
||||
$tab_content.addClass( 'active' );
|
||||
this.first_tab = id;
|
||||
}
|
||||
if ( !this.current_id ) {
|
||||
this.current_id = id;
|
||||
}
|
||||
},
|
||||
|
||||
/** Delete tab */
|
||||
del: function( id ) {
|
||||
this.$( '#tab-' + id ).remove();
|
||||
this.$( '#' + id ).remove();
|
||||
this.first_tab = this.first_tab == id ? null : this.first_tab;
|
||||
this.first_tab != null && this.show( this.first_tab );
|
||||
this.list[ id ] && delete this.list[ id ];
|
||||
if ( this.size() < this.options.max ) {
|
||||
this.$el.find( '.ui-tabs-new' ).show();
|
||||
}
|
||||
},
|
||||
|
||||
/** Delete all tabs */
|
||||
delAll: function() {
|
||||
for ( var id in this.list ) {
|
||||
this.del( id );
|
||||
}
|
||||
},
|
||||
|
||||
/** Show tab view and highlight a tab by id */
|
||||
show: function( id ){
|
||||
this.$el.fadeIn( 'fast' );
|
||||
this.visible = true;
|
||||
if ( id ) {
|
||||
this.$( '#tab-' + this.current_id ).removeClass('active' );
|
||||
this.$( '#' + this.current_id ).removeClass('active' );
|
||||
this.$( '#tab-' + id ).addClass( 'active' );
|
||||
this.$( '#' + id ).addClass( 'active' );
|
||||
this.current_id = id;
|
||||
}
|
||||
this.options.onchange && this.options.onchange( id );
|
||||
},
|
||||
|
||||
/** Hide tab view */
|
||||
hide: function(){
|
||||
this.$el.fadeOut( 'fast' );
|
||||
this.visible = false;
|
||||
},
|
||||
|
||||
/** Show tab */
|
||||
showTab: function( id ) {
|
||||
this.$( '#tab-' + id ).show();
|
||||
},
|
||||
|
||||
/** hide tab */
|
||||
hideTab: function( id ) {
|
||||
this.$( '#tab-' + id ).hide();
|
||||
},
|
||||
|
||||
/** Hide operation by id */
|
||||
hideOperation: function( id ) {
|
||||
this.$nav.find( '#' + id ).hide();
|
||||
},
|
||||
|
||||
/** Show operation by id */
|
||||
showOperation: function( id ) {
|
||||
this.$nav.find( '#' + id ).show();
|
||||
},
|
||||
|
||||
/** Reassign an operation to a new callback */
|
||||
setOperation: function( id, callback ) {
|
||||
this.$nav.find( '#' + id ).off('click').on( 'click', callback );
|
||||
},
|
||||
|
||||
/** Set/Get title */
|
||||
title: function( id, new_title ) {
|
||||
var $el = this.$( '#tab-title-text-' + id );
|
||||
new_title && $el.html( new_title );
|
||||
return $el.html();
|
||||
},
|
||||
|
||||
/** Enumerate titles */
|
||||
retitle: function( new_title ) {
|
||||
var index = 0;
|
||||
for ( var id in this.list ) {
|
||||
this.title( id, ++index + ': ' + new_title );
|
||||
}
|
||||
},
|
||||
|
||||
/** Main template */
|
||||
_template: function( options ) {
|
||||
return $( '<div/>' ).addClass( 'ui-tabs tabbable tabs-left' )
|
||||
.append( $( '<ul/>' ).addClass( 'tab-navigation nav nav-tabs' )
|
||||
.append( $( '<div/>' ).addClass( 'tab-operations' ) ) )
|
||||
.append( $( '<div/>' ).addClass( 'tab-content' ) );
|
||||
},
|
||||
|
||||
/** Default tab templates */
|
||||
_template_tab: function( options ) {
|
||||
var $tmpl = $( '<li/>' ).addClass( 'tab-element' )
|
||||
.attr( 'id', 'tab-' + options.id )
|
||||
.append( $( '<a/>' ).attr( 'id', 'tab-title-link-' + options.id ) );
|
||||
var $href = $tmpl.find( 'a' );
|
||||
options.icon && $href.append( $( '<i/>' ).addClass( 'tab-icon fa' ).addClass( options.icon ) );
|
||||
$href.append( $( '<span/>' ).attr( 'id', 'tab-title-text-' + options.id )
|
||||
.addClass( 'tab-title-text' )
|
||||
.append( options.title ) );
|
||||
options.ondel && $href.append( $( '<i/>' ).addClass( 'tab-delete fa fa-minus-circle' ) );
|
||||
return $tmpl;
|
||||
},
|
||||
|
||||
/** Template for 'new' tab */
|
||||
_template_tab_new: function( options ) {
|
||||
return $( '<li/>' ).addClass( 'tab-new' )
|
||||
.append( $( '<a/>' ).attr( 'href', 'javascript:void(0);' )
|
||||
.append( $( '<i/>' ).addClass( 'tab-icon fa fa-plus-circle' ) )
|
||||
.append( options.title_new ) );
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
View : View
|
||||
}
|
||||
|
||||
});
|
||||
return { View : View }
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
/** This class renders the selection grid. */
|
||||
define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs' ], function( Utils, Ui, Tabs ) {
|
||||
var View = Backbone.View.extend({
|
||||
events : {
|
||||
'click .ui-thumbnails-item' : '_onclick',
|
||||
'dblclick .ui-thumbnails-item' : '_ondblclick'
|
||||
},
|
||||
|
||||
initialize : function( options ) {
|
||||
this.model = options.model || new Backbone.Model( options );
|
||||
this.collection = new Backbone.Collection( this.model.get( 'collection' ) );
|
||||
this.tabs = new Tabs.View({});
|
||||
this.setElement( this.tabs.$el.addClass( 'ui-thumbnails' ) );
|
||||
this.render();
|
||||
this.listenTo( this.model, 'change', this.render, this );
|
||||
this.listenTo( this.collection, 'reset change add remove', this.render, this );
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.first = null;
|
||||
this.tabs.delAll();
|
||||
this._renderDefault();
|
||||
this._renderList();
|
||||
},
|
||||
|
||||
_renderDefault: function() {
|
||||
var self = this;
|
||||
var index = [];
|
||||
var title_length = 20;
|
||||
var $el = $( '<div/>' ).addClass( 'ui-thumbnails-grid' );
|
||||
this.collection.each( function( model ) {
|
||||
if ( model.get( 'keywords' ).indexOf( 'default' ) !== -1 ) {
|
||||
var title = model.get( 'title' );
|
||||
$el.append( $( self._templateThumbnailItem( {
|
||||
id : model.id,
|
||||
title : title.length < title_length ? title : title.substr( 0, title_length ) + '...',
|
||||
title_icon : model.get( 'title_icon' ),
|
||||
image_src : model.get( 'image_src' )
|
||||
})).tooltip( { title: model.get( 'description' ), placement: 'bottom' } ) );
|
||||
}
|
||||
});
|
||||
if ( $el.children().length > 0 ) {
|
||||
this.tabs.add( { id: Utils.uid(), title: self.model.get( 'title_default' ), $el: $el } );
|
||||
}
|
||||
},
|
||||
|
||||
_renderList: function() {
|
||||
var self = this;
|
||||
if ( this.collection.length > 0 ) {
|
||||
this.first = this.first || this.collection.first().id;
|
||||
var $el = $( '<div/>' ).addClass( 'ui-thumbnails-grid' );
|
||||
this.collection.each( function( model ) {
|
||||
$el.append( self._templateRegularItem( model.attributes ) );
|
||||
});
|
||||
this.tabs.add( { id: Utils.uid(), title: self.model.get( 'title_list' ), $el: $el } );
|
||||
}
|
||||
},
|
||||
|
||||
/** Set/Get value */
|
||||
value: function( new_value ) {
|
||||
if ( new_value !== undefined ) {
|
||||
new_value = new_value == '__first' ? this.first : new_value;
|
||||
var before = this.$( '.ui-thumbnail-current' ).attr( 'value' );
|
||||
this.$( '.ui-thumbnail-current' ).removeClass( 'ui-thumbnail-current' );
|
||||
this.$( '[value="' + new_value + '"]' ).addClass( 'ui-thumbnail-current' );
|
||||
var after = this.$( '.ui-thumbnail-current' ).attr( 'value' );
|
||||
var change_handler = this.model.get( 'onchange' );
|
||||
after != before && change_handler && change_handler( after );
|
||||
}
|
||||
return this.$( '.ui-thumbnail-current' ).attr( 'value' );
|
||||
},
|
||||
|
||||
/** Add click handler */
|
||||
_onclick: function( e ) {
|
||||
this.value( $( e.target ).closest( '.ui-thumbnails-item' ).attr( 'value' ) );
|
||||
},
|
||||
|
||||
/** Add double click handler */
|
||||
_ondblclick: function( e ) {
|
||||
this.model.get( 'ondblclick' ) && this.model.get( 'ondblclick' )( this.value() );
|
||||
},
|
||||
|
||||
/* Thumbnail template with image */
|
||||
_templateThumbnailItem: function( options ) {
|
||||
return '<div class="ui-thumbnails-item ui-thumbnails-item-float" value="' + options.id + '">' +
|
||||
'<img class="ui-thumbnails-image" src="' + options.image_src + '">' +
|
||||
'<div class="ui-thumbnails-title ui-form-info">' +
|
||||
'<span class="fa ' + options.title_icon + '"/>' + options.title +
|
||||
'</div>' +
|
||||
'<div>';
|
||||
},
|
||||
|
||||
/* Thumbnail template with image and description */
|
||||
_templateRegularItem: function( options ) {
|
||||
return '<div class="ui-thumbnails-item" value="' + options.id + '">' +
|
||||
'<table>' +
|
||||
'<tr>' +
|
||||
'<td>' +
|
||||
'<img class="ui-thumbnails-image" src="' + options.image_src + '">' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<div class="ui-thumbnails-description-title ui-form-info">' + options.title + '</div>' +
|
||||
'<div class="ui-thumbnails-description-text ui-form-info">' + options.description + '</div>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'<div>';
|
||||
}
|
||||
});
|
||||
|
||||
return { View: View }
|
||||
});
|
||||
@@ -200,6 +200,48 @@
|
||||
}
|
||||
}
|
||||
|
||||
// thumbnails
|
||||
.ui-thumbnails {
|
||||
margin-bottom: 10px;
|
||||
.ui-thumbnails-grid {
|
||||
.ui-thumbnails-item {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
border-radius:5px;
|
||||
.ui-thumbnails-title {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
word-wrap: break-work;
|
||||
font-weight: bold;
|
||||
width: 100px;
|
||||
}
|
||||
.ui-thumbnails-image {
|
||||
padding: 10px;
|
||||
width: 100px;
|
||||
height: 86px;
|
||||
}
|
||||
.ui-thumbnails-description-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-thumbnails-description-text {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
.ui-thumbnail-current {
|
||||
border-color:#66afe9;
|
||||
background-color:#EEEEFF;
|
||||
outline:0;
|
||||
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
.ui-thumbnails-item-float {
|
||||
float: left;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tables
|
||||
.ui-table {
|
||||
&:extend(.grid);
|
||||
|
||||
@@ -15,10 +15,6 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.charts-types .nav-tabs {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.charts-description-image {
|
||||
width: 50px;
|
||||
height: 43px;
|
||||
@@ -50,46 +46,6 @@
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.charts-grid .item {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
border-radius:5px;
|
||||
}
|
||||
.charts-grid .item-float {
|
||||
float: left;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.charts-grid .title {
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
word-wrap: break-work;
|
||||
font-weight: bold;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.charts-grid .header {
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 10px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.charts-grid .current {
|
||||
border-color:#66afe9;
|
||||
background-color:#EEEEFF;
|
||||
outline:0;
|
||||
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
|
||||
.charts-grid .image {
|
||||
padding: 10px;
|
||||
width: 100px;
|
||||
height: 86px;
|
||||
}
|
||||
|
||||
.charts-viewport {
|
||||
height: inherit;
|
||||
min-height: 50px;
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
* The charts editor holds the tabs for selecting chart types, chart configuration
|
||||
* and data group selections.
|
||||
*/
|
||||
define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils', 'plugin/views/settings', 'plugin/views/groups', 'plugin/views/types' ],
|
||||
function( Tabs, Ui, Portlet, Utils, SettingsView, GroupsView, TypesView ) {
|
||||
define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'mvc/ui/ui-thumbnails', 'utils/utils', 'plugin/views/settings', 'plugin/views/groups' ],
|
||||
function( Tabs, Ui, Portlet, Thumbnails, Utils, SettingsView, GroupsView ) {
|
||||
return Backbone.View.extend({
|
||||
initialize: function( app, options ){
|
||||
var self = this;
|
||||
@@ -35,8 +35,21 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
|
||||
});
|
||||
|
||||
// grid with chart types
|
||||
this.types = new TypesView( app, {
|
||||
onchange : function( chart_type ) {
|
||||
this.types = new Thumbnails.View({
|
||||
title_default : 'Suggested visualizations',
|
||||
title_list : 'List of available visualizations',
|
||||
collection : _.map( this.app.types, function( type, type_id ) {
|
||||
return {
|
||||
id : type_id,
|
||||
keywords : type.keywords,
|
||||
title : type.title + ' (' + type.library + ')',
|
||||
title_icon : type.zoomable && 'fa-search-plus',
|
||||
image_src : repository_root + '/visualizations/' + self.app.split( type_id ) + '/logo.png',
|
||||
description : type.description
|
||||
}
|
||||
}),
|
||||
ondblclick : function( chart_type ) { self._drawChart() },
|
||||
onchange : function( chart_type ) {
|
||||
var chart_definition = self.app.types[ chart_type ];
|
||||
if ( !chart_definition ) {
|
||||
self.tabs.hideTab( 'settings' );
|
||||
@@ -53,9 +66,6 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
|
||||
self.message.model.set( 'message', '' );
|
||||
console.debug( 'editor::onchange() - Switched visualization type.' );
|
||||
}
|
||||
},
|
||||
ondblclick : function( chart_id ) {
|
||||
self._drawChart();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -100,7 +110,6 @@ define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils'
|
||||
this.portlet.append( this.tabs.$el.addClass( 'ui-margin-top-large' ) );
|
||||
this.portlet.hideOperation( 'back' );
|
||||
this.setElement( this.portlet.$el );
|
||||
this.tabs.hideOperation( 'back' );
|
||||
|
||||
// chart events
|
||||
this.listenTo( this.chart, 'change:title', function( chart ) { self._refreshTitle() } );
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
/** This class renders the chart type selection grid. */
|
||||
define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-tabs' ], function( Utils, Ui, Tabs ) {
|
||||
return Backbone.View.extend({
|
||||
events : {
|
||||
'click .item' : '_onclick',
|
||||
'dblclick .item' : '_ondblclick'
|
||||
},
|
||||
|
||||
initialize : function( app, options ) {
|
||||
var self = this;
|
||||
this.app = app;
|
||||
this.options = Utils.merge( options, this.optionsDefault );
|
||||
this.tabs = new Tabs.View( {} );
|
||||
this.setElement( this.tabs.$el.addClass( 'charts-types' ) );
|
||||
this.render();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.first = null;
|
||||
this.tabs.delAll();
|
||||
this._renderDefault();
|
||||
this._renderList();
|
||||
},
|
||||
|
||||
_renderDefault: function() {
|
||||
var self = this;
|
||||
var index = [];
|
||||
var title_length = 20;
|
||||
var $el = $( '<div/>' ).addClass( 'charts-grid' );
|
||||
_.each( this.app.types, function( type, type_id ) {
|
||||
if ( type.keywords.indexOf( 'default' ) !== -1 ) {
|
||||
var title = type.title.length < title_length ? type.title : type.title.substr( 0, title_length ) + '...';
|
||||
$el.append( $( self._templateThumbnailItem( {
|
||||
id : type_id,
|
||||
title : ( type.zoomable ? '<span class="fa fa-search-plus"/>' : '' ) + title + ' (' + type.library + ')',
|
||||
url : repository_root + '/visualizations/' + self.app.split( type_id ) + '/logo.png'
|
||||
})).tooltip( { title: type.description, placement: 'bottom' } ) );
|
||||
}
|
||||
});
|
||||
if ( $el.children().length > 0 ) {
|
||||
this.tabs.add( { id: Utils.uid(), title: 'Suggested visualizations', $el: $el } );
|
||||
}
|
||||
},
|
||||
|
||||
_renderList: function() {
|
||||
var self = this;
|
||||
var index = [];
|
||||
_.each( this.app.types, function( type, type_id ) {
|
||||
index.push( {
|
||||
id : type_id,
|
||||
title : ( type.zoomable ? '<span class="fa fa-search-plus"/>' : '' ) + type.title + ' (' + type.library + ')',
|
||||
description : type.description || 'No description available.',
|
||||
url : repository_root + '/visualizations/' + self.app.split( type_id ) + '/logo.png'
|
||||
});
|
||||
});
|
||||
if ( index.length > 0 ) {
|
||||
this.first = this.first || index[ 0 ].id;
|
||||
var $el = $( '<div/>' ).addClass( 'charts-grid' );
|
||||
_.each( index, function( d, i ) {
|
||||
$el.append( self._templateRegularItem( d ) );
|
||||
});
|
||||
this.tabs.add( { id: Utils.uid(), title: 'List of available visualizations', $el: $el } );
|
||||
}
|
||||
},
|
||||
|
||||
/** Set/Get selected chart type */
|
||||
value: function( new_value ) {
|
||||
if ( new_value !== undefined ) {
|
||||
new_value = new_value == '__first' ? this.first : new_value;
|
||||
var before = this.$( '.current' ).attr( 'chart_id' );
|
||||
this.$( '.current' ).removeClass( 'current' );
|
||||
this.$( '[chart_id="' + new_value + '"]' ).addClass( 'current' );
|
||||
var after = this.$( '.current' ).attr( 'chart_id' );
|
||||
if ( after != before && this.options.onchange ) {
|
||||
this.options.onchange( after );
|
||||
}
|
||||
}
|
||||
return this.$( '.current' ).attr( 'chart_id' );
|
||||
},
|
||||
|
||||
/** Add click handler */
|
||||
_onclick: function( e ) {
|
||||
this.value( $( e.target ).closest( '.item' ).attr( 'chart_id' ) );
|
||||
},
|
||||
|
||||
/** Add double click handler */
|
||||
_ondblclick: function( e ) {
|
||||
this.options.ondblclick && this.options.ondblclick( this.value() );
|
||||
},
|
||||
|
||||
/* Chart type template with image */
|
||||
_templateThumbnailItem: function( options ) {
|
||||
return '<div class="item item-float" chart_id="' + options.id + '">' +
|
||||
'<img class="image" src="' + options.url + '">' +
|
||||
'<div class="title ui-form-info">' + options.title + '</div>' +
|
||||
'<div>';
|
||||
},
|
||||
|
||||
/* Chart type template with image */
|
||||
_templateRegularItem: function( options ) {
|
||||
return '<div class="item" chart_id="' + options.id + '">' +
|
||||
'<table>' +
|
||||
'<tr>' +
|
||||
'<td>' +
|
||||
'<img class="image" src="' + options.url + '">' +
|
||||
'</td>' +
|
||||
'<td>' +
|
||||
'<div class="charts-description-title ui-form-info">' + options.title + '</div>' +
|
||||
'<div class="charts-description-text ui-form-info">' + options.description + '</div>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'<div>';
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"ui-tabs.js","sources":["../../../src/mvc/ui/ui-tabs.js"],"names":["define","Utils","View","Backbone","extend","initialize","options","self","this","visible","$nav","$content","first_tab","current_id","list","merge","title_new","operations","onnew","max","onchange","setElement","$","_template","$operations","find","each","name","item","$el","prop","append","_template_tab_new","tooltip","title","placement","container","on","$tabnew","hide","size","_","current","attr","add","id","$tab_title","_template_tab","$tab_content","addClass","before","ondel","e","preventDefault","onclick","show","del","remove","delAll","fadeIn","removeClass","fadeOut","showTab","hideTab","hideOperation","showOperation","setOperation","callback","off","new_title","html","retitle","index","$tmpl","$href","icon"],"mappings":"AAGAA,QAAU,eAAiB,SAAUC,GACrC,GAAIC,GAAOC,SAASD,KAAKE,QACrBC,WAAa,SAAUC,GACnB,GAAIC,GAAOC,IACXA,MAAKC,SAAa,EAClBD,KAAKE,KAAa,KAClBF,KAAKG,SAAa,KAClBH,KAAKI,UAAa,KAClBJ,KAAKK,WAAa,KAClBL,KAAKM,QACLN,KAAKF,QAAUL,EAAMc,MAAOT,GACxBU,UAAc,GACdC,WAAc,KACdC,MAAc,KACdC,IAAc,KACdC,SAAc,OAElBZ,KAAKa,WAAYC,EAAGd,KAAKe,UAAWf,KAAKF,WACzCE,KAAKE,KAAiBF,KAAKc,EAAG,mBAC9Bd,KAAKG,SAAiBH,KAAKc,EAAG,gBAC9Bd,KAAKgB,YAAiBhB,KAAKE,KAAKe,KAAM,mBAGjCjB,KAAKF,QAAQW,YACdK,EAAEI,KAAMlB,KAAKF,QAAQW,WAAY,SAAUU,EAAMC,GAC7CA,EAAKC,IAAIC,KAAM,KAAMH,GACrBpB,EAAKiB,YAAYO,OAAQH,EAAKC,OAKtCrB,KAAKF,QAAQY,OAASV,KAAKE,KAAKqB,OAAQT,EAAGd,KAAKwB,kBAAmBxB,KAAKF,UACnE2B,SAAWC,MAAO,gBAAiBC,UAAW,SAAUC,UAAW7B,EAAKsB,MACxEQ,GAAI,QAAS,WAAgB9B,EAAKD,QAAQY,WAE/CV,KAAK8B,QAAU9B,KAAKE,KAAKe,KAAM,YAG/BjB,KAAKqB,IAAIQ,GAAI,QAAS,WAAaf,EAAG,YAAaiB,UAIvDC,KAAM,WACF,MAAOC,GAAED,KAAMhC,KAAKM,OAIxB4B,QAAS,WACL,MAAOlC,MAAKqB,IAAIJ,KAAM,oBAAqBkB,KAAM,OAIrDC,IAAK,SAAUtC,GACX,GAAIC,GAAOC,KACPqC,EAAKvC,EAAQuC,GACbC,EAAexB,EAAGd,KAAKuC,cAAezC,IACtC0C,EAAe1B,EAAG,UAAWqB,KAAM,KAAMrC,EAAQuC,IAAKI,SAAU,WAGpEzC,MAAKM,KAAM+B,IAAO,EACbrC,KAAKF,QAAQa,KAAOX,KAAKgC,QAAUhC,KAAKF,QAAQa,KACjDX,KAAK8B,QAAQC,OAIZ/B,KAAKF,QAAQY,MACdV,KAAK8B,QAAQY,OAAQJ,GAErBtC,KAAKE,KAAKqB,OAAQe,GAIjBxC,EAAQ6C,MACTL,EAAWrB,KAAM,eAAgBQ,SAAWC,MAAO,kBAAmBC,UAAW,SAAUC,UAAW7B,EAAKsB,MAC1EQ,GAAI,QAAS,WAAa/B,EAAQ6C,UAEnEL,EAAWb,SAAWC,MAAO5B,EAAQ2B,QAASE,UAAW,SAAUC,UAAW7B,EAAKsB,MAEvFiB,EAAWT,GAAI,QAAS,SAAUe,GAC9BA,EAAEC,iBACF/C,EAAQgD,QAAUhD,EAAQgD,UAAY/C,EAAKgD,KAAMV,KAErDrC,KAAKG,SAASoB,OAAQiB,EAAajB,OAAQzB,EAAQuB,MAG/B,GAAfrB,KAAKgC,SACNM,EAAWG,SAAU,UACrBD,EAAaC,SAAU,UACvBzC,KAAKI,UAAYiC,GAEfrC,KAAKK,aACPL,KAAKK,WAAagC,IAK1BW,IAAK,SAAUX,GACXrC,KAAKc,EAAG,QAAUuB,GAAKY,SACvBjD,KAAKc,EAAG,IAAMuB,GAAKY,SACnBjD,KAAKI,UAAYJ,KAAKI,WAAaiC,EAAK,KAAOrC,KAAKI,UAClC,MAAlBJ,KAAKI,WAAqBJ,KAAK+C,KAAM/C,KAAKI,WAC1CJ,KAAKM,KAAM+B,UAAerC,MAAKM,KAAM+B,GAChCrC,KAAKgC,OAAShC,KAAKF,QAAQa,KAC5BX,KAAKqB,IAAIJ,KAAM,gBAAiB8B,QAKxCG,OAAQ,WACJ,IAAM,GAAIb,KAAMrC,MAAKM,KACjBN,KAAKgD,IAAKX,IAKlBU,KAAM,SAAUV,GACZrC,KAAKqB,IAAI8B,OAAQ,QACjBnD,KAAKC,SAAU,EACVoC,IACDrC,KAAKc,EAAG,QAAUd,KAAKK,YAAa+C,YAAY,UAChDpD,KAAKc,EAAG,IAAMd,KAAKK,YAAa+C,YAAY,UAC5CpD,KAAKc,EAAG,QAAUuB,GAAKI,SAAU,UACjCzC,KAAKc,EAAG,IAAMuB,GAAKI,SAAU,UAC7BzC,KAAKK,WAAagC,GAEtBrC,KAAKF,QAAQc,UAAYZ,KAAKF,QAAQc,SAAUyB,IAIpDN,KAAM,WACF/B,KAAKqB,IAAIgC,QAAS,QAClBrD,KAAKC,SAAU,GAInBqD,QAAS,SAAUjB,GACfrC,KAAKc,EAAG,QAAUuB,GAAKU,QAI3BQ,QAAS,SAAUlB,GACfrC,KAAKc,EAAG,QAAUuB,GAAKN,QAI3ByB,cAAe,SAAUnB,GACrBrC,KAAKE,KAAKe,KAAM,IAAMoB,GAAKN,QAI/B0B,cAAe,SAAUpB,GACrBrC,KAAKE,KAAKe,KAAM,IAAMoB,GAAKU,QAI/BW,aAAc,SAAUrB,EAAIsB,GACxB3D,KAAKE,KAAKe,KAAM,IAAMoB,GAAKuB,IAAI,SAAS/B,GAAI,QAAS8B,IAIzDjC,MAAO,SAAUW,EAAIwB,GACjB,GAAIxC,GAAMrB,KAAKc,EAAG,mBAAqBuB,EAEvC,OADAwB,IAAaxC,EAAIyC,KAAMD,GAChBxC,EAAIyC,QAIfC,QAAS,SAAUF,GACf,GAAIG,GAAQ,CACZ,KAAM,GAAI3B,KAAMrC,MAAKM,KACjBN,KAAK0B,MAAOW,IAAM2B,EAAQ,KAAOH,IAKzC9C,UAAW,WACP,MAAQD,GAAG,UAAW2B,SAAU,8BACVlB,OAAQT,EAAG,SAAU2B,SAAU,+BACVlB,OAAQT,EAAG,UAAW2B,SAAU,oBACrDlB,OAAQT,EAAG,UAAW2B,SAAU,iBAI1DF,cAAe,SAAUzC,GACrB,GAAImE,GAAQnD,EAAG,SAAU2B,SAAU,eACVN,KAAM,KAAM,OAASrC,EAAQuC,IAC7Bd,OAAQT,EAAG,QAASqB,KAAM,KAAM,kBAAoBrC,EAAQuC,KACjF6B,EAAQD,EAAMhD,KAAM,IAMxB,OALAnB,GAAQqE,MAAQD,EAAM3C,OAAQT,EAAG,QAAS2B,SAAU,eAAgBA,SAAU3C,EAAQqE,OACtFD,EAAM3C,OAAQT,EAAG,WAAYqB,KAAM,KAAM,kBAAoBrC,EAAQuC,IACxCI,SAAU,kBACVlB,OAAQzB,EAAQ4B,QAC7C5B,EAAQ6C,OAASuB,EAAM3C,OAAQT,EAAG,QAAS2B,SAAU,kCAC9CwB,GAIXzC,kBAAmB,SAAU1B,GACzB,MAAQgB,GAAG,SAAU2B,SAAU,WACVlB,OAAQT,EAAG,QAASqB,KAAM,OAAQ,uBACdZ,OAAQT,EAAG,QAAS2B,SAAU,+BAC9BlB,OAAQzB,EAAQU,cAIjE,QACId,KAAOA"}
|
||||
{"version":3,"file":"ui-tabs.js","sources":["../../../src/mvc/ui/ui-tabs.js"],"names":["define","View","Backbone","extend","initialize","options","this","collection","Collection","model","Model","onchange","visible","set","setElement","$","_template","$nav","$content","$el","on","hide","render","listenTo","_add","_remove","_change","_reset","id","get","length","first","children","removeClass","addClass","size","current","show","add","del","remove","delAll","reset","showTab","hideTab","tab_model","self","attributes","append","attr","_template_tab","tooltip","title","placement","container","e","preventDefault","empty","$tmpl","$href","find","icon"],"mappings":"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"}
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"ui-thumbnails.js","sources":["../../../src/mvc/ui/ui-thumbnails.js"],"names":["define","Utils","Ui","Tabs","View","Backbone","extend","events","click .ui-thumbnails-item","dblclick .ui-thumbnails-item","initialize","options","this","model","Model","collection","Collection","get","tabs","setElement","$el","addClass","render","listenTo","first","delAll","_renderDefault","_renderList","self","title_length","$","each","indexOf","title","append","_templateThumbnailItem","id","length","substr","title_icon","image_src","tooltip","placement","children","add","uid","_templateRegularItem","attributes","value","new_value","undefined","before","attr","removeClass","after","change_handler","_onclick","e","target","closest","_ondblclick","description"],"mappings":"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"}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,2 +1,2 @@
|
||||
define(["utils/utils"],function(a){var b=Backbone.View.extend({initialize:function(b){var c=this;this.visible=!1,this.$nav=null,this.$content=null,this.first_tab=null,this.current_id=null,this.list={},this.options=a.merge(b,{title_new:"",operations:null,onnew:null,max:null,onchange:null}),this.setElement($(this._template(this.options))),this.$nav=this.$(".tab-navigation"),this.$content=this.$(".tab-content"),this.$operations=this.$nav.find(".tab-operations"),this.options.operations&&$.each(this.options.operations,function(a,b){b.$el.prop("id",a),c.$operations.append(b.$el)}),this.options.onnew&&this.$nav.append($(this._template_tab_new(this.options)).tooltip({title:"Add a new tab",placement:"bottom",container:c.$el}).on("click",function(){c.options.onnew()})),this.$tabnew=this.$nav.find(".tab-new"),this.$el.on("click",function(){$(".tooltip").hide()})},size:function(){return _.size(this.list)},current:function(){return this.$el.find(".tab-pane.active").attr("id")},add:function(a){var b=this,c=a.id,d=$(this._template_tab(a)),e=$("<div/>").attr("id",a.id).addClass("tab-pane");this.list[c]=!0,this.options.max&&this.size()>=this.options.max&&this.$tabnew.hide(),this.options.onnew?this.$tabnew.before(d):this.$nav.append(d),a.ondel?d.find(".tab-delete").tooltip({title:"Delete this tab",placement:"bottom",container:b.$el}).on("click",function(){a.ondel()}):d.tooltip({title:a.tooltip,placement:"bottom",container:b.$el}),d.on("click",function(d){d.preventDefault(),a.onclick?a.onclick():b.show(c)}),this.$content.append(e.append(a.$el)),1==this.size()&&(d.addClass("active"),e.addClass("active"),this.first_tab=c),this.current_id||(this.current_id=c)},del:function(a){this.$("#tab-"+a).remove(),this.$("#"+a).remove(),this.first_tab=this.first_tab==a?null:this.first_tab,null!=this.first_tab&&this.show(this.first_tab),this.list[a]&&delete this.list[a],this.size()<this.options.max&&this.$el.find(".ui-tabs-new").show()},delAll:function(){for(var a in this.list)this.del(a)},show:function(a){this.$el.fadeIn("fast"),this.visible=!0,a&&(this.$("#tab-"+this.current_id).removeClass("active"),this.$("#"+this.current_id).removeClass("active"),this.$("#tab-"+a).addClass("active"),this.$("#"+a).addClass("active"),this.current_id=a),this.options.onchange&&this.options.onchange(a)},hide:function(){this.$el.fadeOut("fast"),this.visible=!1},showTab:function(a){this.$("#tab-"+a).show()},hideTab:function(a){this.$("#tab-"+a).hide()},hideOperation:function(a){this.$nav.find("#"+a).hide()},showOperation:function(a){this.$nav.find("#"+a).show()},setOperation:function(a,b){this.$nav.find("#"+a).off("click").on("click",b)},title:function(a,b){var c=this.$("#tab-title-text-"+a);return b&&c.html(b),c.html()},retitle:function(a){var b=0;for(var c in this.list)this.title(c,++b+": "+a)},_template:function(){return $("<div/>").addClass("ui-tabs tabbable tabs-left").append($("<ul/>").addClass("tab-navigation nav nav-tabs").append($("<div/>").addClass("tab-operations"))).append($("<div/>").addClass("tab-content"))},_template_tab:function(a){var b=$("<li/>").addClass("tab-element").attr("id","tab-"+a.id).append($("<a/>").attr("id","tab-title-link-"+a.id)),c=b.find("a");return a.icon&&c.append($("<i/>").addClass("tab-icon fa").addClass(a.icon)),c.append($("<span/>").attr("id","tab-title-text-"+a.id).addClass("tab-title-text").append(a.title)),a.ondel&&c.append($("<i/>").addClass("tab-delete fa fa-minus-circle")),b},_template_tab_new:function(a){return $("<li/>").addClass("tab-new").append($("<a/>").attr("href","javascript:void(0);").append($("<i/>").addClass("tab-icon fa fa-plus-circle")).append(a.title_new))}});return{View:b}});
|
||||
define(["utils/utils"],function(){var a=Backbone.View.extend({initialize:function(a){this.collection=new Backbone.Collection,this.model=a&&a.model||new Backbone.Model({onchange:null,visible:!0}).set(a),this.setElement($(this._template())),this.$nav=this.$(".tab-navigation"),this.$content=this.$(".tab-content"),this.$el.on("click",function(){$(".tooltip").hide()}),this.render(),this.listenTo(this.model,"change",this.render,this),this.listenTo(this.collection,"add",this._add,this),this.listenTo(this.collection,"remove",this._remove,this),this.listenTo(this.collection,"change",this._change,this),this.listenTo(this.collection,"reset",this._reset,this),this.listenTo(this.collection,"add remove reset",this.render,this)},render:function(){var a=this.model.get("current");a=this.$("#"+a).length>0?a:this.first(),a&&(this.$nav.children().removeClass("active"),this.$content.children().removeClass("active"),this.$("#tab-"+a).addClass("active"),this.$("#"+a).addClass("active")),this.$el[this.model.get("visible")?"fadeIn":"fadeOut"]("fast"),this.$nav[this.size()>1?"show":"hide"]()},current:function(){return this.model.get("current")},show:function(a){a&&(this.model.set({current:a,visible:!0}),this.model.get("onchange")&&this.model.get("onchange")(a))},hide:function(){this.model.set("visible",!1)},first:function(){var a=this.collection.first();return a&&a.id},size:function(){return this.collection.length},add:function(a){this.collection.add(a)},del:function(a){this.collection.remove(a)},delAll:function(){this.collection.reset()},showTab:function(a){this.collection.get(a).set("hidden",!1)},hideTab:function(a){this.collection.get(a).set("hidden",!0)},_add:function(a){var b=this,c=a.attributes;this.$content.append($("<div/>").attr("id",c.id).addClass("tab-pane").append(c.$el)),this.$nav.append($(this._template_tab(c)).show().tooltip({title:c.tooltip,placement:"bottom",container:b.$el}).on("click",function(a){a.preventDefault(),b.show(c.id)})),1==this.size()&&this.show(c.id)},_remove:function(a){this.$("#tab-"+a.id).remove(),this.$("#"+a.id).remove()},_reset:function(){this.$nav.empty(),this.$content.empty()},_change:function(a){this.$("#tab-"+a.id)[a.get("hidden")?"hide":"show"]()},_template:function(){return $("<div/>").addClass("ui-tabs tabbable tabs-left").append($("<ul/>").addClass("tab-navigation nav nav-tabs")).append($("<div/>").addClass("tab-content"))},_template_tab:function(a){var b=$("<li/>").addClass("tab-element").attr("id","tab-"+a.id).append($("<a/>").attr("id","tab-title-link-"+a.id)),c=b.find("a");return a.icon&&c.append($("<i/>").addClass("tab-icon fa").addClass(a.icon)),c.append($("<span/>").attr("id","tab-title-text-"+a.id).addClass("tab-title-text").append(a.title)),b}});return{View:a}});
|
||||
//# sourceMappingURL=../../../maps/mvc/ui/ui-tabs.js.map
|
||||
@@ -0,0 +1,2 @@
|
||||
define(["utils/utils","mvc/ui/ui-misc","mvc/ui/ui-tabs"],function(a,b,c){var d=Backbone.View.extend({events:{"click .ui-thumbnails-item":"_onclick","dblclick .ui-thumbnails-item":"_ondblclick"},initialize:function(a){this.model=a.model||new Backbone.Model(a),this.collection=new Backbone.Collection(this.model.get("collection")),this.tabs=new c.View({}),this.setElement(this.tabs.$el.addClass("ui-thumbnails")),this.render(),this.listenTo(this.model,"change",this.render,this),this.listenTo(this.collection,"reset change add remove",this.render,this)},render:function(){this.first=null,this.tabs.delAll(),this._renderDefault(),this._renderList()},_renderDefault:function(){var b=this,c=20,d=$("<div/>").addClass("ui-thumbnails-grid");this.collection.each(function(a){if(-1!==a.get("keywords").indexOf("default")){var e=a.get("title");d.append($(b._templateThumbnailItem({id:a.id,title:e.length<c?e:e.substr(0,c)+"...",title_icon:a.get("title_icon"),image_src:a.get("image_src")})).tooltip({title:a.get("description"),placement:"bottom"}))}}),d.children().length>0&&this.tabs.add({id:a.uid(),title:b.model.get("title_default"),$el:d})},_renderList:function(){var b=this;if(this.collection.length>0){this.first=this.first||this.collection.first().id;var c=$("<div/>").addClass("ui-thumbnails-grid");this.collection.each(function(a){c.append(b._templateRegularItem(a.attributes))}),this.tabs.add({id:a.uid(),title:b.model.get("title_list"),$el:c})}},value:function(a){if(void 0!==a){a="__first"==a?this.first:a;var b=this.$(".ui-thumbnail-current").attr("value");this.$(".ui-thumbnail-current").removeClass("ui-thumbnail-current"),this.$('[value="'+a+'"]').addClass("ui-thumbnail-current");var c=this.$(".ui-thumbnail-current").attr("value"),d=this.model.get("onchange");c!=b&&d&&d(c)}return this.$(".ui-thumbnail-current").attr("value")},_onclick:function(a){this.value($(a.target).closest(".ui-thumbnails-item").attr("value"))},_ondblclick:function(){this.model.get("ondblclick")&&this.model.get("ondblclick")(this.value())},_templateThumbnailItem:function(a){return'<div class="ui-thumbnails-item ui-thumbnails-item-float" value="'+a.id+'"><img class="ui-thumbnails-image" src="'+a.image_src+'"><div class="ui-thumbnails-title ui-form-info"><span class="fa '+a.title_icon+'"/>'+a.title+"</div><div>"},_templateRegularItem:function(a){return'<div class="ui-thumbnails-item" value="'+a.id+'"><table><tr><td><img class="ui-thumbnails-image" src="'+a.image_src+'"></td><td><div class="ui-thumbnails-description-title ui-form-info">'+a.title+'</div><div class="ui-thumbnails-description-text ui-form-info">'+a.description+"</div></td></tr><div>"}});return{View:d}});
|
||||
//# sourceMappingURL=../../../maps/mvc/ui/ui-thumbnails.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
/* global define, QUnit, module, test, ok, equal, deepEqual, notEqual */
|
||||
define([ 'test-app', 'mvc/ui/ui-misc', 'mvc/ui/ui-select-content', 'mvc/ui/ui-drilldown'
|
||||
], function( testApp, Ui, SelectContent, Drilldown ){
|
||||
define([ 'test-app', 'mvc/ui/ui-misc', 'mvc/ui/ui-select-content', 'mvc/ui/ui-drilldown', 'mvc/ui/ui-thumbnails', 'mvc/ui/ui-tabs'
|
||||
], function( testApp, Ui, SelectContent, Drilldown, Thumbnails, Tabs ){
|
||||
'use strict';
|
||||
module( 'Ui test', {
|
||||
setup: function() {
|
||||
@@ -11,6 +11,95 @@ define([ 'test-app', 'mvc/ui/ui-misc', 'mvc/ui/ui-select-content', 'mvc/ui/ui-dr
|
||||
}
|
||||
} );
|
||||
|
||||
test( 'tabs', function() {
|
||||
var self = this;
|
||||
var tabs = new Tabs.View({});
|
||||
var collection = tabs.collection;
|
||||
collection.add( { id: 'id_a', title: 'title_a', icon: 'icon_a', $el: 'el_a' } );
|
||||
var _test = function() {
|
||||
self.clock.tick ( window.WAIT_FADE );
|
||||
collection.each( function( model, index ) {
|
||||
var $tab_element = tabs.$( '#tab-' + model.id );
|
||||
var $tab_content = tabs.$( '#' + model.id );
|
||||
var is_current = model.id == tabs.model.get( 'current' );
|
||||
ok( $tab_content.hasClass( 'active' ) == is_current, 'Active state of content.' );
|
||||
ok( $tab_element.hasClass( 'active' ) == is_current, 'Active state of element.' );
|
||||
ok( $tab_element.css( 'display' ) == ( model.get( 'hidden' ) ? 'none' : 'list-item' ), 'Element visibility.' );
|
||||
});
|
||||
};
|
||||
$( 'body' ).prepend( tabs.$el );
|
||||
_test();
|
||||
collection.add( { id: 'id_b', title: 'title_b', icon: 'icon_b', $el: 'el_b' } );
|
||||
_test();
|
||||
tabs.collection.get( 'id_b' ).set( 'hidden', true );
|
||||
_test();
|
||||
collection.add( { id: 'id_c', title: 'title_c', icon: 'icon_c', $el: 'el_c' } );
|
||||
tabs.model.set( 'current', 'id_c' );
|
||||
_test();
|
||||
tabs.collection.get( 'id_b' ).set( 'hidden', false );
|
||||
_test();
|
||||
tabs.model.set( 'current', 'id_b' );
|
||||
_test();
|
||||
tabs.model.set( 'visible', false );
|
||||
tabs.collection.reset();
|
||||
self.clock.tick ( window.WAIT_FADE );
|
||||
ok( tabs.$el.css( 'display', 'none' ), 'Everything hidden.' );
|
||||
tabs.model.set( 'visible', true );
|
||||
self.clock.tick ( window.WAIT_FADE );
|
||||
ok( tabs.$el.css( 'display', 'block' ), 'Everything shown.' );
|
||||
collection.add( { id: 'id_c', title: 'title_c', icon: 'icon_c', $el: 'el_c' } );
|
||||
tabs.model.set( 'current', 'id_c' );
|
||||
_test();
|
||||
});
|
||||
|
||||
test( 'thumbnails', function() {
|
||||
var _test = function( options ) {
|
||||
ok( thumb.$( '.tab-pane' ).length == options.ntabs, 'Two tabs found.' );
|
||||
ok( thumb.$( '.ui-thumbnails-item' ).length == options.nitems, 'Thumbnail item.' );
|
||||
ok( $(thumb.$( '.ui-thumbnails-image' )[ options.index || 0 ]).attr( 'src' ) == options.image_src, 'Correct image source' );
|
||||
ok( $(thumb.$( '.ui-thumbnails-title' )[ options.index || 0 ]).html() == options.title, 'Correct title with icon' );
|
||||
ok( $(thumb.$( '.ui-thumbnails-description-text' )[ options.index || 0 ]).html() == options.description, 'Correct description' );
|
||||
};
|
||||
var thumb = new Thumbnails.View({
|
||||
title_default : 'title_default',
|
||||
title_list : 'title_list',
|
||||
collection : [{
|
||||
id : 'id',
|
||||
keywords : 'default',
|
||||
title : 'title',
|
||||
title_icon : 'title_icon',
|
||||
image_src : 'image_src',
|
||||
description : 'description'
|
||||
}]
|
||||
});
|
||||
var model = thumb.model;
|
||||
$( 'body' ).prepend( thumb.$el );
|
||||
_test({
|
||||
ntabs : 2,
|
||||
nitems : 2,
|
||||
image_src : 'image_src',
|
||||
title : '<span class="fa title_icon"></span>title',
|
||||
description : 'description'
|
||||
});
|
||||
thumb.collection.add({
|
||||
id : 'id_a',
|
||||
keywords : 'default_a',
|
||||
title : 'title_a',
|
||||
title_icon : 'title_icon_a',
|
||||
image_src : 'image_src_a',
|
||||
description : 'description_a'
|
||||
});
|
||||
this.clock.tick ( window.WAIT_FADE );
|
||||
_test({
|
||||
index : 1,
|
||||
ntabs : 2,
|
||||
nitems : 4,
|
||||
image_src : 'image_src_a',
|
||||
title : '<span class="fa title_icon_a"></span>title_a',
|
||||
description : 'description_a'
|
||||
});
|
||||
});
|
||||
|
||||
test( 'button-default', function() {
|
||||
var button = new Ui.Button( { title: 'title' } );
|
||||
var model = button.model;
|
||||
|
||||
Reference in New Issue
Block a user