diff d3s_examples/python-neo4jrestclient/static/platin/js/Table/TableWidget.js @ 8:18ef6948d689

new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/d3s_examples/python-neo4jrestclient/static/platin/js/Table/TableWidget.js	Thu Oct 01 17:17:27 2015 +0200
@@ -0,0 +1,476 @@
+/*
+* TableWidget.js
+*
+* Copyright (c) 2012, Stefan Jänicke. All rights reserved.
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 3 of the License, or (at your option) any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public
+* License along with this library; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+* MA 02110-1301  USA
+*/
+
+/**
+ * @class TableWidget
+ * TableWidget Implementation
+ * @author Stefan Jänicke (stjaenicke@informatik.uni-leipzig.de)
+ * @release 1.0
+ * @release date: 2012-07-27
+ * @version date: 2012-07-27
+ *
+ * @param {TableWrapper} core wrapper for interaction to other widgets
+ * @param {HTML object} div parent div to append the table widget div
+ * @param {JSON} options user specified configuration that overwrites options in TableConfig.js
+ */
+TableWidget = function(core, div, options) {
+
+	this.core = core;
+	this.core.setWidget(this);
+	this.tables = [];
+	this.tableTabs = [];
+	this.tableElements = [];
+	this.tableHash = [];
+
+	this.options = (new TableConfig(options)).options;
+	this.gui = new TableGui(this, div, this.options);
+	this.filterBar = new FilterBar(this);
+
+}
+
+TableWidget.prototype = {
+
+	initWidget : function(data) {
+		this.datasets = data;
+
+		$(this.gui.tabs).empty();
+		$(this.gui.input).empty();
+		this.activeTable = undefined;
+		this.tables = [];
+		this.tableTabs = [];
+		this.tableElements = [];
+		this.tableHash = [];
+		this.selection = new Selection();
+		this.filterBar.reset(false);
+
+		var tableWidget = this;
+		var addTab = function(name, index) {
+			var dataSet = GeoTemConfig.datasets[index];
+			var tableTab = document.createElement('div');
+			var tableTabTable = document.createElement('table');
+			$(tableTab).append(tableTabTable);
+			var tableTabTableRow = document.createElement('tr');
+			$(tableTabTable).append(tableTabTableRow);
+			tableTab.setAttribute('class', 'tableTab');
+			var c = GeoTemConfig.getColor(index);
+			tableTab.style.backgroundColor = 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')';
+			tableTab.onclick = function() {
+				tableWidget.selectTable(index);
+			}
+			var tableNameDiv = document.createElement('div');
+			$(tableNameDiv).append(name);
+			$(tableNameDiv).dblclick(function() {
+				var n = $(tableNameDiv).text();
+				$(tableNameDiv).empty();
+				var nameInput = $('<input type="text" name="nameinput" value="'+n+'" />');
+				$(tableNameDiv).append(nameInput);
+				$(nameInput).focus();
+				$(nameInput).focusout(function() {
+					var newname = $(nameInput).val();
+					$(tableNameDiv).empty();
+					$(tableNameDiv).append(newname);
+					dataSet.label = newname;
+				});
+				$(nameInput).keypress(function(event) {
+					if (event.which == 13) {
+						var newname = $(nameInput).val();
+						$(tableNameDiv).empty();
+						$(tableNameDiv).append(newname);
+						dataSet.label = newname;
+					}
+				});
+			});
+			
+			if (typeof dataSet.url !== "undefined"){
+				var tableLinkDiv = document.createElement('a');
+				tableLinkDiv.title = dataSet.url;
+				tableLinkDiv.href = dataSet.url;
+				tableLinkDiv.target = '_';
+				tableLinkDiv.setAttribute('class', 'externalLink');
+				$(tableNameDiv).append(tableLinkDiv);
+			}
+			$(tableTabTableRow).append($(document.createElement('td')).append(tableNameDiv));
+			
+			var removeTabDiv = document.createElement('div');
+			removeTabDiv.setAttribute('class', 'smallButton removeDataset');
+			removeTabDiv.title = GeoTemConfig.getString('removeDatasetHelp');
+			removeTabDiv.onclick = $.proxy(function(e) {
+				GeoTemConfig.removeDataset(index);
+				//don't let the event propagate to the DIV above			
+				e.stopPropagation();
+				//discard link click
+				return(false);
+			},{index:index});
+			$(tableTabTableRow).append($(document.createElement('td')).append(removeTabDiv));
+			
+			if (GeoTemConfig.tableExportDataset){
+				var exportTabDiv = document.createElement('div');
+				exportTabDiv.setAttribute('class', 'smallButton exportDataset');
+				exportTabDiv.title = GeoTemConfig.getString('exportDatasetHelp');
+				var exportTabForm = document.createElement('form');
+				//TODO: make this configurable
+				exportTabForm.action = 'php/download.php';
+				exportTabForm.method = 'post';
+				var exportTabHiddenValue = document.createElement('input');
+				exportTabHiddenValue.name = 'file';
+				exportTabHiddenValue.type = 'hidden';
+				exportTabForm.appendChild(exportTabHiddenValue);
+				exportTabDiv.onclick = $.proxy(function(e) {
+					$(exportTabHiddenValue).val(GeoTemConfig.createKMLfromDataset(index));
+					$(exportTabForm).submit();
+					//don't let the event propagate to the DIV				
+					e.stopPropagation();
+					//discard link click
+					return(false);
+				},{index:index});
+				exportTabDiv.appendChild(exportTabForm);
+				$(tableTabTableRow).append($(document.createElement('td')).append(exportTabDiv));
+			}
+			
+			if (GeoTemConfig.allowUserShapeAndColorChange){
+				var dataset = GeoTemConfig.datasets[index];
+
+				var changeColorShapeSelect = $("<select></select>");
+				changeColorShapeSelect.attr("title", GeoTemConfig.getString("colorShapeDatasetHelp"));
+				changeColorShapeSelect.css("font-size","1.5em");
+				
+				var currentOptgroup = $("<optgroup label='Current'></optgroup>");
+				var currentOption = $("<option value='current'></option>");
+				var color = GeoTemConfig.getColor(index);
+				currentOption.css("color","rgb("+color.r1+","+color.g1+","+color.b1+")");
+				currentOption.data("color",{r1:color.r1,g1:color.g1,b1:color.b1,r0:color.r0,g0:color.g0,b0:color.b0});
+				if (dataset.graphic.shape=="circle"){
+					currentOption.append("●");
+				} else if (dataset.graphic.shape=="triangel"){
+					currentOption.append("▲");
+				} else if (dataset.graphic.shape=="square"){
+					if (dataset.graphic.rotation===0){
+						currentOption.append("■");
+					} else {
+						currentOption.append("◆");
+					}
+				}
+				currentOptgroup.append(currentOption);
+				changeColorShapeSelect.append(currentOptgroup);
+
+				var defaultOptgroup = $("<optgroup label='Default'></optgroup>");
+				var defaultOption = $("<option value='default'></option>");
+				var color = GeoTemConfig.colors[index];
+				defaultOption.css("color","rgb("+color.r1+","+color.g1+","+color.b1+")");
+				defaultOption.data("color",{r1:color.r1,g1:color.g1,b1:color.b1,r0:color.r0,g0:color.g0,b0:color.b0});
+				defaultOption.append("●");
+				defaultOptgroup.append(defaultOption);
+				changeColorShapeSelect.append(defaultOptgroup);
+				
+				var shapeOptgroup = $("<optgroup label='Shapes'></optgroup>");
+				shapeOptgroup.append("<option>○</option>");
+				shapeOptgroup.append("<option>□</option>");
+				shapeOptgroup.append("<option>◇</option>");
+				shapeOptgroup.append("<option>△</option>");
+				changeColorShapeSelect.append(shapeOptgroup);
+				
+				var colorOptgroup = $("<optgroup label='Colors'></optgroup>");
+				var red = $("<option style='color:red'>■</option>");
+				red.data("color",{r1:255,g1:0,b1:0});
+				colorOptgroup.append(red);
+				var green = $("<option style='color:green'>■</option>");
+				green.data("color",{r1:0,g1:255,b1:0});
+				colorOptgroup.append(green);
+				var blue = $("<option style='color:blue'>■</option>");
+				blue.data("color",{r1:0,g1:0,b1:255});
+				colorOptgroup.append(blue);
+				var yellow = $("<option style='color:yellow'>■</option>");
+				yellow.data("color",{r1:255,g1:255,b1:0});
+				colorOptgroup.append(yellow);
+				changeColorShapeSelect.append(colorOptgroup);
+				
+				changeColorShapeSelect.change($.proxy(function(e) {
+					var selected = changeColorShapeSelect.find("option:selected");
+
+					//credits: Pimp Trizkit @ http://stackoverflow.com/a/13542669
+					function shadeRGBColor(color, percent) {
+					    var f=color.split(","),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=parseInt(f[0].slice(4)),G=parseInt(f[1]),B=parseInt(f[2]);
+					    return "rgb("+(Math.round((t-R)*p)+R)+","+(Math.round((t-G)*p)+G)+","+(Math.round((t-B)*p)+B)+")";
+					}
+
+					var color = selected.data("color");
+					
+					if (typeof color !== "undefined"){
+						if (	(typeof color.r0 === "undefined") ||
+								(typeof color.g0 === "undefined") ||
+								(typeof color.b0 === "undefined") ){
+							var shadedrgb = shadeRGBColor("rgb("+color.r1+","+color.g1+","+color.b1+")",0.7);
+							shadedrgb = shadedrgb.replace("rgb(","").replace(")","");
+							shadedrgb = shadedrgb.split(",");
+							
+							color.r0 = parseInt(shadedrgb[0]);
+							color.g0 = parseInt(shadedrgb[1]);
+							color.b0 = parseInt(shadedrgb[2]);
+						}
+					}
+
+					var shapeText = selected.text();
+					var graphic;
+					if ((shapeText=="■") || (shapeText=="□")){
+						graphic = {
+								shape: "square",
+								rotation: 0
+						};
+					} else if ((shapeText=="●") || (shapeText=="○")){
+						graphic = {
+								shape: "circle",
+								rotation: 0
+						};
+					} else if ((shapeText=="◆") || (shapeText=="◇")){
+						graphic = {
+								shape: "square",
+								rotation: 45
+						};
+					} else if ((shapeText=="▲") || (shapeText=="△")){
+						graphic = {
+								shape: "triangle",
+								rotation: 0
+						};
+					}
+					
+					if (shapeOptgroup.has(selected).length>0){
+						//shape change
+						dataset.graphic = graphic;
+					} else if (colorOptgroup.has(selected).length>0){
+						//color changed
+						dataset.color = color;
+					} else {
+						//back to default
+						dataset.graphic = graphic;
+						dataset.color = color;
+					}
+					
+					//reload data
+					Publisher.Publish('filterData', GeoTemConfig.datasets, null);
+					
+					//don't let the event propagate to the DIV				
+					e.stopPropagation();
+					//discard link click
+					return(false);
+				},{index:index}));
+				$(tableTabTableRow).append($(document.createElement('td')).append(changeColorShapeSelect));
+			}
+			
+			return tableTab;
+		}
+		tableWidget.addTab = addTab;
+		
+		for (var i in data ) {
+			this.tableHash.push([]);
+			var tableTab = addTab(data[i].label, i);
+			this.gui.tabs.appendChild(tableTab);
+			this.tableTabs.push(tableTab);
+			var elements = [];
+			for (var j in data[i].objects ) {
+				elements.push(new TableElement(data[i].objects[j]));
+				this.tableHash[i][data[i].objects[j].index] = elements[elements.length - 1];
+			}
+			var table = new Table(elements, this, i);
+			this.tables.push(table);
+			this.tableElements.push(elements);
+		}
+
+		if (data.length > 0) {
+			this.selectTable(0);
+		}
+
+	},
+
+	getHeight : function() {
+		if (this.options.tableHeight) {
+			return this.gui.tableContainer.offsetHeight - this.gui.tabs.offsetHeight;
+		}
+		return false;
+	},
+
+	selectTable : function(index) {
+		if (this.activeTable != index) {
+			if ( typeof this.activeTable != 'undefined') {
+				this.tables[this.activeTable].hide();
+				var c = GeoTemConfig.getColor(this.activeTable);
+				this.tableTabs[this.activeTable].style.backgroundColor = 'rgb(' + c.r0 + ',' + c.g0 + ',' + c.b0 + ')';
+			}
+			this.activeTable = index;
+			this.tables[this.activeTable].show();
+			var c = GeoTemConfig.getColor(this.activeTable);
+			this.tableTabs[this.activeTable].style.backgroundColor = 'rgb(' + c.r1 + ',' + c.g1 + ',' + c.b1 + ')';
+			this.core.triggerRise(index);
+		}
+
+	},
+
+	highlightChanged : function(objects) {
+		if( !GeoTemConfig.highlightEvents || (typeof this.tables[this.activeTable] === "undefined")){
+			return;
+		}
+		if( this.tables.length > 0 ){
+			return;
+		}
+		for (var i = 0; i < this.tableElements.length; i++) {
+			for (var j = 0; j < this.tableElements[i].length; j++) {
+				this.tableElements[i][j].highlighted = false;
+			}
+		}
+		for (var i = 0; i < objects.length; i++) {
+			for (var j = 0; j < objects[i].length; j++) {
+				this.tableHash[i][objects[i][j].index].highlighted = true;
+			}
+		}
+		this.tables[this.activeTable].update();
+	},
+
+	selectionChanged : function(selection) {
+		if( !GeoTemConfig.selectionEvents || (typeof this.tables[this.activeTable] === "undefined")){
+			return;
+		}
+		this.reset();
+		if( this.tables.length == 0 ){
+			return;
+		}
+		this.selection = selection;
+		for (var i = 0; i < this.tableElements.length; i++) {
+			for (var j = 0; j < this.tableElements[i].length; j++) {
+				this.tableElements[i][j].selected = false;
+				this.tableElements[i][j].highlighted = false;
+			}
+		}
+		var objects = selection.getObjects(this);
+		for (var i = 0; i < objects.length; i++) {
+			for (var j = 0; j < objects[i].length; j++) {
+				this.tableHash[i][objects[i][j].index].selected = true;
+			}
+		}
+		this.tables[this.activeTable].reset();
+		this.tables[this.activeTable].update();
+	},
+
+	triggerHighlight : function(item) {
+		var selectedObjects = [];
+		for (var i = 0; i < GeoTemConfig.datasets.length; i++) {
+			selectedObjects.push([]);
+		}
+		if ( typeof item != 'undefined') {
+			selectedObjects[this.activeTable].push(item);
+		}
+		this.core.triggerHighlight(selectedObjects);
+	},
+
+	tableSelection : function() {
+		var selectedObjects = [];
+		for (var i = 0; i < GeoTemConfig.datasets.length; i++) {
+			selectedObjects.push([]);
+		}
+		var valid = false;
+		for (var i = 0; i < this.tableElements.length; i++) {
+			for (var j = 0; j < this.tableElements[i].length; j++) {
+				var e = this.tableElements[i][j];
+				if (e.selected) {
+					selectedObjects[i].push(e.object);
+					valid = true;
+				}
+			}
+		}
+		this.selection = new Selection();
+		if (valid) {
+			this.selection = new Selection(selectedObjects, this);
+		}
+		this.core.triggerSelection(this.selection);
+		this.filterBar.reset(true);
+	},
+
+	deselection : function() {
+		this.reset();
+		this.selection = new Selection();
+		this.core.triggerSelection(this.selection);
+	},
+
+	filtering : function() {
+		for (var i = 0; i < this.datasets.length; i++) {
+			this.datasets[i].objects = this.selection.objects[i];
+		}
+		this.core.triggerRefining(this.datasets);
+	},
+
+	inverseFiltering : function() {
+		var selectedObjects = [];
+		for (var i = 0; i < GeoTemConfig.datasets.length; i++) {
+			selectedObjects.push([]);
+		}
+		var valid = false;
+		for (var i = 0; i < this.tableElements.length; i++) {
+			for (var j = 0; j < this.tableElements[i].length; j++) {
+				var e = this.tableElements[i][j];
+				if (!e.selected) {
+					selectedObjects[i].push(e.object);
+					valid = true;
+				}
+			}
+		}
+		this.selection = new Selection();
+		if (valid) {
+			this.selection = new Selection(selectedObjects, this);
+		}
+		this.filtering();
+	},
+
+	triggerRefining : function() {
+		this.core.triggerRefining(this.selection.objects);
+	},
+
+	reset : function() {
+		this.filterBar.reset(false);
+		if( this.tables.length > 0 ){
+			this.tables[this.activeTable].resetElements();
+			this.tables[this.activeTable].reset();
+			this.tables[this.activeTable].update();
+		}
+	},
+	
+	
+	getConfig : function(inquiringWidget){
+		var tableWidget = this;
+		var config = {};
+		
+		//save widget specific configurations here into the config object
+		
+		//send config to iquiring widget
+		if (typeof inquiringWidget.sendConfig !== "undefined"){
+			inquiringWidget.sendConfig({widgetName: "table", 'config': config});
+		}
+	},
+	
+	setConfig : function(configObj){
+		var tableWidget = this;
+		
+		if (configObj.widgetName === "table"){
+			var config = configObj.config;
+			
+			//set widgets configuration provided by config
+			
+		}
+	},
+
+}