/
types.js
142 lines (132 loc) · 5.55 KB
/
types.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/** This class renders the chart type selection grid. */
define( [ 'utils/utils', 'mvc/ui/ui-misc', 'plugin/charts/overview' ], function( Utils, Ui, Overview ) {
return Backbone.View.extend({
optionsDefault: {
onchange : null,
ondblclick : null
},
events : {
'click' : '_onclick',
'dblclick' : '_ondblclick'
},
initialize : function( app, options ) {
var self = this;
this.app = app;
this.options = Utils.merge( options, this.optionsDefault );
this.data = Overview;
this.library = new Ui.RadioButton.View({
data : this.data,
onchange: function( value ) {
self._filter( value );
var data = _.findWhere( self.data, { value: value } );
self.$message.html( data.help );
}
});
this.setElement( $( '<div/>' ).addClass( 'charts-grid' )
.append( ( new Ui.Label( { title : 'Which visualization library would you like to use?' } ) ).$el )
.append( this.library.$el.addClass( 'ui-margin-bottom' ) )
.append( this.$message = $( '<div/>' ).addClass( 'ui-form-info ui-margin-bottom' ) ) );
this._render();
this.library.value( 'default' );
this.library.trigger( 'change' );
},
/** Set/Get selected chart type */
value: function( new_value ) {
var before = this.$( '.current' ).attr( 'id' );
if ( new_value !== undefined ) {
this.$( '.current' ).removeClass( 'current' );
this.$( '#' + new_value ).addClass( 'current' );
}
var after = this.$( '.current' ).attr( 'id' );
if( after !== undefined ) {
if ( after != before && this.options.onchange ) {
this.options.onchange( new_value );
}
return after;
}
},
/** Filter chart types */
_filter: function( value ) {
this.$( '.header' ).hide();
var types = this.app.types.attributes;
for ( var id in types ) {
var type = types[ id ];
var $el = this.$( '#' + id );
var $header = this.$( '#types-header-' + this.categories_index[ type.category ] );
var keywords = type.keywords || '';
if ( keywords.indexOf( value ) >= 0 ) {
$el.show();
$header.show();
} else {
$el.hide();
}
}
},
/** Render chart type view */
_render: function() {
var category_index = 0;
this.categories = {};
this.categories_index = {};
var types = this.app.types.attributes;
for ( var id in types ) {
var type = types[ id ];
var category = type.category;
if ( !this.categories[ category ] ) {
this.categories[ category ] = {};
this.categories_index[ category ] = category_index++;
}
this.categories[ category ][ id ] = type;
}
// add categories and charts to screen
for (var category in this.categories) {
var $el = $( '<div style="clear: both;"/>' ).append( this._template_header({
id : 'types-header-' + this.categories_index[ category ],
title : category
}));
for ( var id in this.categories[ category ] ) {
var type = this.categories[ category ][ id ];
var title = type.title + ' (' + type.library + ')';
if ( type.zoomable ) {
title = '<span class="fa fa-search-plus"/>' + title;
}
$el.append( this._template_item({
id : id,
title : title,
url : app_root + 'charts/' + this.app.chartPath( id ) + '/logo.png'
}));
}
this.$el.append( $el );
}
},
/** Add click handler */
_onclick: function( e ) {
var old_value = this.value();
var new_value = $( e.target ).closest( '.item' ).attr( 'id' );
if ( new_value != '' ) {
if ( new_value && old_value != new_value ) {
this.value( new_value );
}
}
},
/** Add double click handler */
_ondblclick: function( e ) {
var value = this.value();
if ( value && this.options.ondblclick ) {
this.options.ondblclick( value );
}
},
// header template
_template_header: function( options ) {
return '<div id="' + options.id + '" class="header">' +
'• ' + options.title +
'<div>';
},
// item template
_template_item: function( options ) {
return '<div id="' + options.id + '" class="item">' +
'<img class="image" src="' + options.url + '">' +
'<div class="title">' + options.title + '</div>' +
'<div>';
}
});
});