datavis-glide 4.0.0-PRE.0

package/src/ui/windows/col_config.js

@@ -0,0 +1,341 @@
+import _ from 'underscore';
+
+import jQuery from 'jquery';
+
+import { trans } from '../../trans.js';
+import {
+	getPropDef,
+	icon,
+	makeSubclass,
+	moveArrayElement,
+} from '../../util/misc.js';
+import { PopupWindow } from '../popup_window.js';
+
+// ColConfigWin {{{1
+
+var ColConfigWin = makeSubclass('ColConfigWin', Object, function (grid) {
+	var self = this;
+
+	self.grid = grid;
+
+	grid.on('colConfigUpdate', function (colConfig, initColConfig) {
+		self.colConfig = colConfig;
+		self.initColConfig = initColConfig;
+	});
+});
+
+// #show {{{2
+
+ColConfigWin.prototype.show = function (posElt, onSave) {
+	var self = this;
+
+	var current = self.colConfig.clone();
+
+	var pw = new PopupWindow({
+		title: trans('GRID.COLCONFIG_WIN.TITLE'),
+		width: 600
+	});
+
+	pw.on('close', function () {
+		pw.destroy();
+	});
+
+	var pinnedCount = 0;
+
+	var contentDiv = jQuery('<div>');
+
+	var colTable = jQuery('<table>')
+		.addClass('wcdv_colconfigwin_table')
+		.appendTo(jQuery('<div>').css({
+			'max-height': '40ex',
+			'overflow-y': 'scroll'
+		}).appendTo(contentDiv));
+
+	var colTableHeader = jQuery('<thead>' +
+			'<th class="wcdv_bottom_border_teal wcdv_width_1em"></th>' +
+			'<th class="wcdv_bottom_border_teal">' + trans('GRID.COLCONFIG_WIN.TBL.FIELD') + '</th>' +
+			'<th class="wcdv_bottom_border_teal">' + trans('GRID.COLCONFIG_WIN.TBL.DISPLAY') + '</th>' +
+			'<th colspan="7" class="wcdv_bottom_border_teal">' + trans('GRID.COLCONFIG_WIN.TBL.OPTIONS') + '</th>' +
+		'</thead>')
+		.appendTo(colTable);
+
+	var keys = current.keys();
+
+	var colTableBody = jQuery('<tbody>')
+		._makeSortableTable(function (oldIndex, newIndex) {
+			colTableBody.children('tr').eq(newIndex).effect('highlight', 750);
+			moveArrayElement(keys, oldIndex, newIndex);
+		})
+		.appendTo(colTable);
+
+	var trsByField = {};
+	var clearRenderCache = [];
+
+	current.each(function (colConfig, field) {
+		var tr, td;
+
+		tr = jQuery('<tr>', {
+			'data-field': field
+		});
+
+		trsByField[field] = tr;
+
+		td = jQuery('<td>')
+			.addClass('wcdv_width_1em')
+			.appendTo(tr);
+
+		jQuery('<button>', {
+			'type': 'button',
+			'title': trans('GRID.COLCONFIG_WIN.REORDER_COLS')
+		})
+			.addClass('wcdv_icon_button drag-handle wcdv_button_right')
+			.append(icon('menu'))
+			.appendTo(td);
+
+		td = jQuery('<td>')
+			.text(field)
+			.appendTo(tr);
+
+		td = jQuery('<td>')
+			.css('color', colConfig.displayText ? '#000000' : '#C0C0C0')
+			.text(colConfig.displayText || field)
+			.appendTo(tr);
+		var displayTextTd = td;
+
+		td = jQuery('<td>')
+			.addClass('wcdv_width_1em')
+			.appendTo(tr);
+
+		var renameBtn = jQuery('<button>', {
+			'type': 'button',
+			'title': trans('GRID.COLCONFIG_WIN.RENAME_COL')
+		})
+			.addClass('wcdv_icon_button')
+			.append(icon('pencil'))
+			.on('click', function () {
+				var newName = prompt(trans('GRID.COLCONFIG_WIN.RENAME_COL.PROMPT', field));
+
+				if (newName) {
+					colConfig.displayText = newName;
+					displayTextTd
+						.css('color', colConfig.displayText ? '#000000' : '#C0C0C0')
+						.text(newName);
+				}
+			})
+			.appendTo(td)
+		;
+
+		td = jQuery('<td>', {
+			'data-prop': 'isPinned'
+		})
+			.addClass('wcdv_width_1em')
+			.appendTo(tr);
+
+		var isPinnedCheckbox = jQuery('<input>', {
+			'type': 'checkbox',
+			'title': trans('GRID.COLCONFIG_WIN.PIN_COL')
+		})
+			.prop('checked', getPropDef(false, colConfig, 'isPinned'))
+			.on('change', function () {
+				colConfig.isPinned = isPinnedCheckbox.prop('checked');
+				if (colConfig.isPinned) {
+					pinnedCount += 1;
+				}
+				else {
+					pinnedCount -= 1;
+				}
+				if (pinnedCount > 0) {
+					pinnedMsg.show();
+				}
+				else {
+					pinnedMsg.hide();
+				}
+			})
+			.appendTo(td)
+			._makeIconCheckbox('pin');
+
+		if (getPropDef(false, colConfig, 'isPinned')) {
+			pinnedCount += 1;
+		}
+
+		td = jQuery('<td>', {
+			'data-prop': 'isHidden'
+		})
+			.addClass('wcdv_width_1em')
+			.appendTo(tr);
+
+		var isHiddenCheckbox = jQuery('<input>', {
+			'type': 'checkbox',
+			'title': trans('GRID.COLCONFIG_WIN.HIDE_COL')
+		})
+			.prop('disabled', !getPropDef(true, colConfig, 'canHide'))
+			.prop('checked', getPropDef(false, colConfig, 'isHidden'))
+			.on('change', function () {
+				colConfig.isHidden = isHiddenCheckbox.prop('checked');
+			})
+			.appendTo(td)
+			._makeIconCheckbox('ban');
+
+		td = jQuery('<td>', {
+			'data-prop': 'allowHtml'
+		})
+			.addClass('wcdv_width_1em')
+			.appendTo(tr);
+
+		var allowHtmlCheckbox = jQuery('<input>', {
+			'type': 'checkbox',
+			'title': trans('GRID.COLCONFIG_WIN.ALLOW_HTML')
+		})
+			.prop('checked', getPropDef(false, colConfig, 'allowHtml'))
+			.on('change', function () {
+				colConfig.allowHtml = allowHtmlCheckbox.prop('checked');
+			})
+			.appendTo(td)
+			._makeIconCheckbox('code');
+
+		td = jQuery('<td>', {
+			'data-prop': 'allowFormatting'
+		})
+			.addClass('wcdv_width_1em')
+			.appendTo(tr);
+
+		var allowFormattingCheckbox = jQuery('<input>', {
+			'type': 'checkbox',
+			'title': trans('GRID.COLCONFIG_WIN.ALLOW_FORMATTING')
+		})
+			.prop('checked', getPropDef(false, colConfig, 'allowFormatting'))
+			.on('change', function () {
+				if (clearRenderCache.indexOf(field) >= 0) {
+					clearRenderCache = _.without(clearRenderCache, field);
+				}
+				else {
+					clearRenderCache.push(field);
+				}
+				colConfig.allowFormatting = allowFormattingCheckbox.prop('checked');
+			})
+			.appendTo(td)
+			._makeIconCheckbox('paintbrush');
+
+		/*
+		td = jQuery('<td>')
+			.addClass('wcdv_width_1em')
+			.appendTo(tr);
+
+		var configBtn = jQuery('<button>', {'type': 'button', 'title': 'Click to configure column'})
+			.addClass('wcdv_icon_button')
+			.append(icon('settings'))
+			.on('click', function () {
+				self.showConfigWin(field);
+			})
+			.appendTo(td);
+		*/
+
+		td = jQuery('<td>')
+			.addClass('wcdv_width_1em')
+			.appendTo(tr);
+
+		jQuery('<button>', {
+			'type': 'button',
+			'title': trans('GRID.COLCONFIG_WIN.MOVE_COL_TO_TOP')
+		})
+			.addClass('wcdv_icon_button wcdv_button_left')
+			.on('click', function () {
+				var oldIndex = tr.index();
+				colTableBody.prepend(tr);
+				var newIndex = tr.index();
+				colTableBody.children('tr').eq(oldIndex).effect('highlight', 750);
+				colTableBody.children('tr').eq(newIndex).effect('highlight', 750);
+				moveArrayElement(keys, oldIndex, newIndex);
+			})
+			.append(icon('chevrons-up'))
+			.appendTo(td);
+
+		td = jQuery('<td>')
+			.addClass('wcdv_width_1em')
+			.appendTo(tr);
+
+		jQuery('<button>', {
+			'type': 'button',
+			'title': trans('GRID.COLCONFIG_WIN.MOVE_COL_TO_BOTTOM')
+		})
+			.addClass('wcdv_icon_button wcdv_button_left')
+			.on('click', function () {
+				var oldIndex = tr.index();
+				colTableBody.append(tr);
+				var newIndex = tr.index();
+				colTableBody.children('tr').eq(oldIndex).effect('highlight', 750);
+				colTableBody.children('tr').eq(newIndex).effect('highlight', 750);
+				moveArrayElement(keys, oldIndex, newIndex);
+			})
+			.append(icon('chevrons-down'))
+			.appendTo(td);
+
+		tr.appendTo(colTableBody);
+	});
+
+	var pinnedMsg = jQuery('<div>')
+		.addClass('wcdv_dlg_info_banner')
+		.append(icon('info'))
+		.append(' ')
+		.append(trans('GRID.COLCONFIG_WIN.PINNED_COL_WARNING'))
+		.hide()
+		.appendTo(contentDiv);
+
+	if (pinnedCount > 0) {
+		pinnedMsg.show();
+	}
+
+	pw.setContent(contentDiv);
+
+	var buttons = [];
+
+	if (self.initColConfig) {
+		buttons.push({
+			icon: 'undo-2',
+			label: trans('GRID.COLCONFIG_WIN.RESET_COL_ORDER'),
+			callback: function () {
+				keys = self.initColConfig.keys();
+				_.each(keys, function (k) {
+					if (trsByField[k] !== null) {
+						colTableBody.append(trsByField[k]);
+						trsByField[k].effect('highlight', 750);
+					}
+				});
+			}
+		});
+	}
+
+	buttons.push({
+		icon: 'check',
+		label: trans('DIALOG.OK'),
+		attrs: {'data-role': 'ok'},
+		callback: function () {
+			self.colConfig.clear();
+			_.each(keys, function (k) {
+				self.colConfig.set(k, current.get(k));
+			});
+
+			pw.close();
+			onSave(self.colConfig, {
+				clearRenderCache: clearRenderCache.length > 0 ? clearRenderCache : null
+			});
+		}
+	});
+
+	buttons.push({
+		icon: 'ban',
+		label: trans('DIALOG.CANCEL'),
+		attrs: {'data-role': 'cancel'},
+		callback: function () {
+			pw.close();
+		}
+	});
+
+	pw.setButtons(buttons);
+
+	pw.open();
+};
+
+export {
+	ColConfigWin
+};

package/src/ui/windows/debug.js

@@ -0,0 +1,164 @@
+import _ from 'underscore';
+import JSONFormatter from 'json-formatter-js';
+
+import { OrdMap } from 'datavis-ace';
+
+import jQuery from 'jquery';
+
+import {
+	makeSubclass,
+	ordmapAsHtmlDefnList,
+} from '../../util/misc.js';
+import { PopupWindow } from '../popup_window.js';
+import { Tabs } from '../tabs.js';
+import { Collapsible } from '../collapsible.js';
+
+// DebugWin {{{1
+
+var DebugWin = makeSubclass('DebugWin', Object, function () {
+	var self = this;
+});
+
+// #show {{{2
+
+DebugWin.prototype.show = function (grid, view, source) {
+	var self = this;
+
+	var pw = new PopupWindow({
+		title: 'Debug Info',
+		width: 600,
+		maxHeight: 600,
+		position: {
+			my: 'center',
+			at: 'middle',
+			of: window
+		}
+	});
+
+	pw.on('close', function () {
+		pw.destroy();
+	});
+
+	var tabs = [{
+		name: 'Source',
+		id: 'sourceTab',
+		items: [{
+			name: 'Configuration',
+			elt: (function () {
+				var info = new OrdMap();
+				info.set('Source type', source.type);
+				info.set('Source name', source.name);
+				info.set('Source spec', source.origin.spec);
+				return jQuery('<div>')
+					.append(ordmapAsHtmlDefnList(info));
+			})()
+		}, {
+			name: 'Params',
+			elt: jQuery('<div>')
+				.append(new JSONFormatter(source.params, 0).render())
+		}, {
+			name: 'Type Info',
+			elt: jQuery('<div>')
+				.append(new JSONFormatter(source.cache.typeInfo.asMap(), 0).render())
+		}]
+	}, {
+		name: 'View',
+		id: 'viewTab',
+		items: [{
+			name: 'Current Config',
+			elt: (function () {
+				var info = new OrdMap();
+				info.set('View name', view.name);
+				info.set('Filter config', view.getFilter());
+				info.set('Group config', view.getGroup());
+				info.set('Pivot config', view.getPivot());
+				info.set('Aggregate config', view.getAggregate());
+				return jQuery('<div>')
+					.append(ordmapAsHtmlDefnList(info));
+			})()
+		}]
+	}, {
+		name: 'Grid',
+		id: 'gridTab',
+		items: [{
+			name: 'Columns',
+			elt: jQuery('<div>')
+				.append(new JSONFormatter(grid.colConfig.asMap(), 0).render())
+		}]
+	}, {
+		name: 'Prefs',
+		id: 'prefsTab',
+		items: [{
+			name: 'Configuration',
+			elt: (function () {
+				var info = new OrdMap();
+				info.set('Auto-Save', grid.prefs.opts.autoSave);
+				info.set('Backend Type', grid.prefs.opts.backend.type);
+				info.set('Current Perspective', jQuery('<span>' + grid.prefs.currentPerspective.id + '<br/><i>' + grid.prefs.currentPerspective.name + '</i></span>'));
+				info.set('Bardo', grid.prefs.bardo);
+				return jQuery('<div>')
+					.append(ordmapAsHtmlDefnList(info));
+			})()
+		}, {
+			name: 'Perspectives',
+			elt: (function () {
+				var info = new OrdMap();
+				_.each(grid.prefs.perspectives, function (p) {
+					info.set(p.id, {
+						'Name': p.name,
+						'Config': p.config,
+						'Status': p.isUnsaved ? 'Modified' : 'Saved'
+					});
+				});
+				return jQuery('<div>')
+					.append(ordmapAsHtmlDefnList(info));
+			})()
+		}]
+	}];
+
+	var tabsDiv = jQuery('<div>').css({
+		'flex': 'auto',
+		'overflow': 'hidden',
+		'display': 'flex',
+		'flex-direction': 'column'
+	});
+	var tabsWidget = new Tabs(tabsDiv);
+	_.each(tabs, function (t) {
+		var container = jQuery('<div>').css({
+			'flex-grow': '1',
+			'flex-shrink': '1',
+			'flex-basis': 'auto',
+			'overflow': 'scroll'
+		});
+		var collapsible = new Collapsible(container);
+		_.each(t.items, function (ti) {
+			collapsible.addSection(ti.name, ti.elt);
+		});
+		tabsWidget.addPage(t.name, container);
+	});
+
+	var contentDiv = jQuery('<div>').css({
+		'display': 'flex',
+		'flex-direction': 'column',
+		'flex': '1',
+		'overflow': 'hidden',
+		'min-height': '0'
+	}).append(tabsDiv);
+
+	pw.setContent(contentDiv);
+
+	var words = ['Very Cool', 'Thanks', 'Nice!', 'All Right', 'Whatever'];
+	pw.setButtons([{
+		icon: 'thumbs-up',
+		label: words[Math.floor(Math.random() * words.length)],
+		callback: function () {
+			pw.close();
+		}
+	}]);
+
+	pw.open();
+};
+
+export {
+	DebugWin
+};

package/src/ui/windows/grid_table_opts.js

@@ -0,0 +1,139 @@
+import _ from 'underscore';
+
+import jQuery from 'jquery';
+
+import {
+	deepCopy,
+	deepDefaults,
+	makeSubclass,
+	getPropDef,
+} from '../../util/misc.js';
+
+import GridTable from '../../renderers/grid/table.js';
+import { PopupWindow } from '../popup_window.js';
+
+// GridTableOptsWin {{{1
+
+/**
+ * @class
+ *
+ * @property {GridTable} renderer
+ */
+
+var GridTableOptsWin = makeSubclass('GridTableOptsWin', Object, function (renderer) {
+	var self = this;
+
+	if (!(renderer instanceof GridTable)) {
+		throw new Error('Call Error: `renderer` must be an instance of GridTable');
+	}
+
+	self.renderer = renderer;
+});
+
+// #show {{{2
+
+GridTableOptsWin.prototype.show = function (onSave) {
+	var self = this;
+
+	var curOpts = deepCopy(self.renderer.opts);
+	var canGroup = self.renderer.canRender('group');
+	var canPivot = self.renderer.canRender('pivot');
+
+	var ui = {};
+
+	var pw = new PopupWindow({
+		title: 'Columns',
+		width: 600,
+		buttons: [{
+			icon: 'check',
+			label: 'OK',
+			callback: function () {
+				curOpts = deepDefaults(curOpts, {
+					displayFormat: {}
+				});
+
+				if (canPivot && ui.cellChk.prop('checked')) {
+					curOpts.displayFormat.cell = [ui.cellText.val()];
+				}
+
+				/*
+				if ((canGroup || canPivot) && ui.groupChk.prop('checked')) {
+					curOpts.displayFormat.group = [ui.groupText.val()];
+				}
+
+				if (canPivot && ui.pivotChk.prop('checked')) {
+					curOpts.displayFormat.pivot = [ui.pivotText.val()];
+				}
+
+				if ((canGroup || canPivot) && ui.allChk.prop('checked')) {
+					curOpts.displayFormat.all = [ui.allText.val()];
+				}
+				*/
+
+				pw.close();
+				onSave(curOpts);
+			}
+		}, {
+			icon: 'ban',
+			label: 'Cancel',
+			callback: function () {
+				pw.close();
+			}
+		}]
+	});
+
+	pw.on('close', function () {
+		pw.destroy();
+	});
+
+	ui.root = jQuery('<div>');
+
+	var inputs = [{
+		field: 'cell',
+		available: canPivot,
+		label: 'Customize cell display',
+	}/*, {
+		field: 'group',
+		available: canGroup || canPivot,
+		label: 'Customize group display',
+	}, {
+		field: 'pivot',
+		available: canPivot,
+		label: 'Customize pivot display',
+	}, {
+		field: 'all',
+		available: canGroup || canPivot,
+		label: 'Customize total display',
+	}*/];
+
+	_.each(inputs, function (input) {
+		if (input.available) {
+			var curVal = getPropDef('', curOpts, 'displayFormat', input.field);
+
+			var checkbox = jQuery('<input>', {type: 'checkbox', checked: !!curVal});
+			var textarea = jQuery('<textarea>', {cols: 60}).css({display: 'block', fontFamily: 'monospace', marginTop: '1ex'}).val(curVal);
+			var label = jQuery('<label>').css({display: 'block', marginTop: '1ex'}).append(checkbox).append(input.label);
+
+			checkbox.on('change', function () {
+				textarea.toggle();
+			});
+
+			ui[input.field + 'Chk'] = checkbox;
+			ui[input.field + 'Text'] = textarea;
+
+			ui.root.append(label);
+			ui.root.append(textarea);
+
+			if (!curVal) {
+				textarea.hide();
+			}
+		}
+	});
+
+	pw.setContent(ui.root);
+	pw.open();
+};
+
+export {
+	GridTableOptsWin
+};