← All changes | js/media/view.js +79 -52 3.10.11 → 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,19 +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.settings.width = self.options.width;
59		- chart.settings.height = self.options.height;
60		- $('#' + 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');
61	39
62		- $('body').trigger('visualizer:render:specificchart:start', {id: self.id, chart: chart, v: {page_type: 'post'}} );
	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	+ }
	51	+ }
	52	+ }
	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	+ }
	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);
63	97	}
64	98	});
65	99
66	100	/**
		@@ -104,8 +138,10 @@
104	138
105	139	renderCollection: function() {
106	140	var self = this;
107	141
	142	+ self.views.dispose();
	143	+
108	144	if (self.collection.length > 0) {
109	145	self.$el.html('');
110	146	self.collection.each(self.addChart, self);
111	147	} else {
		@@ -146,21 +182,8 @@
146	182	paginationView.options.total = response.total || 1;
147	183	paginationView.render();
148	184	}
149	185
150		- self.renderCollection();
151		- $('.visualizer-library-chart').css('position', 'relative')
152		- .append($(
153		- // jshint ignore:start
154		- '<div class="visualizer-chart-bg"></div>'
155		- + '<div class="visualizer-chart-insert-bg">'
156		- + '<button class="button button-primary visualizer-library-chart-insert">' + visualizer.i10n.insert + '</button>'
157		- + '</div>'
158		- // jshint ignore:end
159		- ))
160		- .on('mouseover', function(){
161		- $(this).addClass('hover');
162		- });
163	186	content.unlock();
164	187	}
165	188	}
166	189	});
		@@ -259,9 +282,9 @@
259	282	createFilters: function() {
260	283	var self = this;
261	284
262	285	self.filters = {};
263		- _.each(l10n.library.types, function(type, i) {
	286	+ _.each(['all', 'pie', 'line', 'area', 'bar', 'column', 'geo', 'scatter', 'gauge', 'candlestick'], function(type, i) {
264	287	self.filters[type] = {
265	288	text: l10n.library.filters[type],
266	289	key: type,
267	290	priority: (i + 1) * 10
		@@ -302,11 +325,15 @@
302	325
303	326	self.$el.html(_.chain(items).map(function(item) {
304	327	var content, className;
305	328
306		- 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);
307	332
308		- 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';
309	336
310	337	return self.make('li', { class: className }, content);
311	338	}).value());
312	339	},
		@@ -320,9 +347,9 @@
320	347	}
321	348	} else {
322	349	tmp = current - Math.floor( max / 2 );
323	350
324		- if ( max % 2 === 0 ) {
	351	+ if ( max % 2 == 0 ) {
325	352	tmp++;
326	353	}
327	354
328	355	if ( tmp < 1 ) {
		@@ -336,14 +363,14 @@
336	363	for ( i = 1; i <= max; i++ ) {
337	364	pagenation.push(tmp++);
338	365	}
339	366
340		- if ( pagenation[0] !== 1 ) {
	367	+ if ( pagenation[0] != 1 ) {
341	368	pagenation[0] = 1;
342	369	pagenation[1] = '...';
343	370	}
344	371
345		- if ( pagenation[max - 1] !== total ) {
	372	+ if ( pagenation[max - 1] != total ) {
346	373	pagenation[max - 1] = total;
347	374	pagenation[max - 2] = '...';
348	375	}
349	376	}
		@@ -354,9 +381,9 @@
354	381	onPageChange: function(e) {
355	382	this.controller.trigger('visualizer:library:page', $(e.target).data('page'));
356	383	}
357	384	});
358		-})(jQuery, wp.media, visualizer);
	385	+})(jQuery, wp.media);
359	386
360	387	(function($) {
361	388	$.fn.lock = function() {
362	389	$(this).each(function() {
		@@ -388,9 +415,9 @@
388	415	$this.append(locker);
389	416	});
390	417
391	418	return $(this);
392		- };
	419	+ }
393	420
394	421	$.fn.unlock = function() {
395	422	$(this).each(function() {
396	423	var $this = $(this);
		@@ -401,6 +428,6 @@
401	428	}).find('.locker').remove();
402	429	});
403	430
404	431	return $(this);
405		- };
	432	+ }
406	433	})(jQuery);