← All changes | js/media/view.js +77 -67 4.0.8 → 1.1.0 View file →

		@@ -1,9 +1,5 @@
1		-/*jshint scripturl:true*/
2		-/* global google */
3		-/* global visualizer */
4		-/* global showNotice */
5		-(function($, wpm, visualizer) {
	1	+(function($, wpm) {
6	2	var libraryWidth, libraryHeight, wpmv, wpmV, wpmvv, wpmvvl, wpmvvb, l10n;
7	3
8	4	wpmv = wpm.view;
9	5	wpmV = wpm.View;
		@@ -15,22 +11,8 @@
15	11	* COMMON
16	12	* =========================================================================
17	13	*/
18	14
19		- if (!_.isFunction(wpmV.prototype.make)) {
20		- wpmV.prototype.make = function(tag, attrs, val) {
21		- var html, attr;
22		-
23		- html = '<' + tag;
24		- for (attr in attrs) {
25		- html += ' ' + attr + '="' + attrs[attr] + '"';
26		- }
27		- html += '>' + val + '</' + tag + '>';
28		-
29		- return html;
30		- };
31		- }
32		-
33	15	wpmvv.Chart = wpmV.extend({
34	16	className: 'visualizer-library-chart-canvas',
35	17
36	18	constructor: function(options) {
		@@ -38,11 +20,12 @@
38	20	wpmV.apply(this, arguments);
39	21	},
40	22
41	23	render: function() {
42		- var self, model, chart;
	24	+ var self, model, chart, gv, type, series, data, table, settings, i, j, row, date;
43	25
44	26	self = this;
	27	+ gv = google.visualization;
45	28	model = self.model;
46	29
47	30	self.$el
48	31	.width(self.options.width)
		@@ -48,34 +31,70 @@
48	31	.width(self.options.width)
49	32	.height(self.options.height)
50	33	.css('background-image', 'none');
51	34
52		- chart = {};
53		- chart.type = model.get('type');
54		- chart.series = model.get('series');
55		- chart.data = model.get('data');
56		- chart.library = model.get('library');
57		- chart.settings = model.get('settings');
58		- chart.code = model.get('code');
59		- chart.settings.width = self.options.width;
60		- chart.settings.height = self.options.height;
61		- $('#' + self.id).parent().append(model.get('css'));
	35	+ type = model.get('type');
	36	+ series = model.get('series');
	37	+ data = model.get('data');
	38	+ settings = model.get('settings');
62	39
63		- if ( chart.library && 'd3' === chart.library ) {
64		- $('body').trigger('visualizer:render:chart:start', {
65		- id: self.id,
66		- charts: {
67		- [self.id]: {
68		- library: 'd3',
69		- code: chart.code,
70		- series: chart.series,
71		- data: chart.data
	40	+ table = new gv.DataTable({cols: series});
	41	+ chart = type == 'gauge' ? 'Gauge' : type.charAt(0).toUpperCase() + type.slice(1) + 'Chart';
	42	+ chart = new gv[chart](self.el);
	43	+
	44	+ switch (type) {
	45	+ case 'pie':
	46	+ if (settings.slices) {
	47	+ for (i in settings.slices) {
	48	+ if (settings.slices[i]['color'] == '') {
	49	+ delete settings.slices[i]['color'];
	50	+ }
72	51	}
73	52	}
74		- });
75		- } else {
76		- $('body').trigger('visualizer:render:specificchart:start', {id: self.id, chart: chart, v: {page_type: 'post'}} );
	53	+ break;
	54	+ case 'line':
	55	+ case 'bar':
	56	+ case 'column':
	57	+ case 'area':
	58	+ case 'scatter':
	59	+ case 'candlestick':
	60	+ if (settings.series) {
	61	+ for (i in settings.series) {
	62	+ if (settings.series[i]['color'] == '') {
	63	+ delete settings.series[i]['color'];
	64	+ }
	65	+ }
	66	+ }
	67	+ break;
	68	+ case 'geo':
	69	+ if (settings.region != undefined && settings.region.replace(/^\s+|\s+$/g, '') == '') {
	70	+ settings['region'] = 'world';
	71	+ }
	72	+ break;
	73	+ case 'gauge':
	74	+ break;
	75	+ default:
	76	+ return;
77	77	}
	78	+
	79	+ for (i = 0; i < data.length; i++) {
	80	+ row = [];
	81	+ for (j = 0; j < series.length; j++) {
	82	+ if (series[j].type == 'date' || series[j].type == 'datetime') {
	83	+ date = new Date(data[i][j]);
	84	+ data[i][j] = null;
	85	+ if (Object.prototype.toString.call(date) === "[object Date]") {
	86	+ if (!isNaN(date.getTime())) {
	87	+ data[i][j] = date;
	88	+ }
	89	+ }
	90	+ }
	91	+ row.push(data[i][j]);
	92	+ }
	93	+ table.addRow(row);
	94	+ }
	95	+
	96	+ chart.draw(table, settings);
78	97	}
79	98	});
80	99
81	100	/**
		@@ -119,8 +138,10 @@
119	138
120	139	renderCollection: function() {
121	140	var self = this;
122	141
	142	+ self.views.dispose();
	143	+
123	144	if (self.collection.length > 0) {
124	145	self.$el.html('');
125	146	self.collection.each(self.addChart, self);
126	147	} else {
		@@ -161,23 +182,8 @@
161	182	paginationView.options.total = response.total || 1;
162	183	paginationView.render();
163	184	}
164	185
165		- self.renderCollection();
166		- if (self.collection.length > 0) {
167		- $('.visualizer-library-chart').css('position', 'relative')
168		- .append($(
169		- // jshint ignore:start
170		- '<div class="visualizer-chart-bg"></div>'
171		- + '<div class="visualizer-chart-insert-bg">'
172		- + '<button class="button button-primary visualizer-library-chart-insert">' + visualizer.i10n.insert + '</button>'
173		- + '</div>'
174		- // jshint ignore:end
175		- ))
176		- .on('mouseover', function(){
177		- $(this).addClass('hover');
178		- });
179		- }
180	186	content.unlock();
181	187	}
182	188	}
183	189	});
		@@ -276,9 +282,9 @@
276	282	createFilters: function() {
277	283	var self = this;
278	284
279	285	self.filters = {};
280		- _.each(l10n.library.types, function(type, i) {
	286	+ _.each(['all', 'pie', 'line', 'area', 'bar', 'column', 'geo', 'scatter', 'gauge', 'candlestick'], function(type, i) {
281	287	self.filters[type] = {
282	288	text: l10n.library.filters[type],
283	289	key: type,
284	290	priority: (i + 1) * 10
		@@ -319,11 +325,15 @@
319	325
320	326	self.$el.html(_.chain(items).map(function(item) {
321	327	var content, className;
322	328
323		- content = item === '...' || item === self.options.page ? self.make('span', { class: 'visualizer-library-pagination-page' }, item) : self.make('a', { class: 'visualizer-library-pagination-page', href: 'javascript:;', 'data-page': item }, item);
	329	+ content = item == '...' || item == self.options.page
	330	+ ? self.make('span', { class: 'visualizer-library-pagination-page' }, item)
	331	+ : self.make('a', { class: 'visualizer-library-pagination-page', href: 'javascript:;', 'data-page': item }, item);
324	332
325		- className = item === self.options.page ? 'visualizer-library-pagination-item visualizer-library-pagination-active' : 'visualizer-library-pagination-item';
	333	+ className = item == self.options.page
	334	+ ? 'visualizer-library-pagination-item visualizer-library-pagination-active'
	335	+ : 'visualizer-library-pagination-item';
326	336
327	337	return self.make('li', { class: className }, content);
328	338	}).value());
329	339	},
		@@ -337,9 +347,9 @@
337	347	}
338	348	} else {
339	349	tmp = current - Math.floor( max / 2 );
340	350
341		- if ( max % 2 === 0 ) {
	351	+ if ( max % 2 == 0 ) {
342	352	tmp++;
343	353	}
344	354
345	355	if ( tmp < 1 ) {
		@@ -353,14 +363,14 @@
353	363	for ( i = 1; i <= max; i++ ) {
354	364	pagenation.push(tmp++);
355	365	}
356	366
357		- if ( pagenation[0] !== 1 ) {
	367	+ if ( pagenation[0] != 1 ) {
358	368	pagenation[0] = 1;
359	369	pagenation[1] = '...';
360	370	}
361	371
362		- if ( pagenation[max - 1] !== total ) {
	372	+ if ( pagenation[max - 1] != total ) {
363	373	pagenation[max - 1] = total;
364	374	pagenation[max - 2] = '...';
365	375	}
366	376	}
		@@ -371,9 +381,9 @@
371	381	onPageChange: function(e) {
372	382	this.controller.trigger('visualizer:library:page', $(e.target).data('page'));
373	383	}
374	384	});
375		-})(jQuery, wp.media, visualizer);
	385	+})(jQuery, wp.media);
376	386
377	387	(function($) {
378	388	$.fn.lock = function() {
379	389	$(this).each(function() {
		@@ -405,9 +415,9 @@
405	415	$this.append(locker);
406	416	});
407	417
408	418	return $(this);
409		- };
	419	+ }
410	420
411	421	$.fn.unlock = function() {
412	422	$(this).each(function() {
413	423	var $this = $(this);
		@@ -418,6 +428,6 @@
418	428	}).find('.locker').remove();
419	429	});
420	430
421	431	return $(this);
422		- };
423		-})(jQuery);
	432	+ }
	433	+})(jQuery);