Multi-tab support; highlight manually added entities; click and hold …

…an entity to open node details
tudarmstadt-lt · Dec 14, 2016 · f7bbdd2 · f7bbdd2
1 parent 0ed3ff6
commit f7bbdd2
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 23 deletions.
diff --git a/js/index.js b/js/index.js
@@ -9,6 +9,9 @@ function Storyfinder(){
 	var cssNamespace = 'de-tu-darmstadt-lt-storyfinder'
 		, article = null
 		, articleNodes = []
+		, nodeToOpen = null
+		, timeoutForOpening = null
+		, openDelay = 450
 		;
 
 	/*
@@ -36,6 +39,11 @@ function Storyfinder(){
 				activateHighlighting();
 			});
 
+			self.port.on('addEntities', function(data){
+				setEntities(data.nodes);
+				activateHighlighting();
+			});
+
 			self.port.on('error', function(err){
 				alert(err.msg);
 			});
@@ -196,7 +204,7 @@ function Storyfinder(){
 			});
 		});
 	}
-
+		
 	function activateHighlighting(){
 		articleNodes.forEach(articleNode => {
 			var delegate = new Delegate(articleNode.el);
@@ -209,10 +217,42 @@ function Storyfinder(){
 			delegate.on('mouseout', 'sf-entity', function(event){	
 				var nodeId = this.getAttribute('data-entity-id');
 				setHighlight(nodeId, false);
+				console.log('clear timeout');
+				if(timeoutForOpening != null)
+					clearTimeout(timeoutForOpening);
+			});
+
+			delegate.on('mousedown', 'sf-entity', function(event){	
+				var nodeId = this.getAttribute('data-entity-id');
+				console.log('mousedown');
+
+				if(timeoutForOpening != null)
+					clearTimeout(timeoutForOpening);
+
+				nodeToOpen = nodeId;
+				console.log('Setting timeout');
+				timeoutForOpening = setTimeout(openNode, 150);
+				console.log('Timeout set');
+			});
+
+			delegate.on('mouseup', 'sf-entity', function(event){
+				console.log('clear timeout');
+				if(timeoutForOpening != null)
+					clearTimeout(timeoutForOpening);
 			});
 		});
 	}
 
+	function openNode(){
+		if(nodeToOpen != null){
+			console.log('Opening ' + nodeToOpen);
+			self.port.emit('emit-sidebar-event', {
+				event: 'open',
+				data: nodeToOpen
+			});
+		}
+	}
+
 	function setHighlight(id, status){		
 
 		self.port.emit('emit-sidebar-event', {

diff --git a/plugin/data/contentscript.js b/plugin/data/contentscript.js
@@ -10,6 +10,9 @@ function Storyfinder(){
 	var cssNamespace = 'de-tu-darmstadt-lt-storyfinder'
 		, article = null
 		, articleNodes = []
+		, nodeToOpen = null
+		, timeoutForOpening = null
+		, openDelay = 450
 		;
 
 	/*
@@ -37,6 +40,11 @@ function Storyfinder(){
 				activateHighlighting();
 			});
 
+			self.port.on('addEntities', function(data){
+				setEntities(data.nodes);
+				activateHighlighting();
+			});
+
 			self.port.on('error', function(err){
 				alert(err.msg);
 			});
@@ -197,7 +205,7 @@ function Storyfinder(){
 			});
 		});
 	}
-
+		
 	function activateHighlighting(){
 		articleNodes.forEach(articleNode => {
 			var delegate = new Delegate(articleNode.el);
@@ -210,10 +218,42 @@ function Storyfinder(){
 			delegate.on('mouseout', 'sf-entity', function(event){	
 				var nodeId = this.getAttribute('data-entity-id');
 				setHighlight(nodeId, false);
+				console.log('clear timeout');
+				if(timeoutForOpening != null)
+					clearTimeout(timeoutForOpening);
+			});
+
+			delegate.on('mousedown', 'sf-entity', function(event){	
+				var nodeId = this.getAttribute('data-entity-id');
+				console.log('mousedown');
+
+				if(timeoutForOpening != null)
+					clearTimeout(timeoutForOpening);
+
+				nodeToOpen = nodeId;
+				console.log('Setting timeout');
+				timeoutForOpening = setTimeout(openNode, 150);
+				console.log('Timeout set');
+			});
+
+			delegate.on('mouseup', 'sf-entity', function(event){
+				console.log('clear timeout');
+				if(timeoutForOpening != null)
+					clearTimeout(timeoutForOpening);
 			});
 		});
 	}
 
+	function openNode(){
+		if(nodeToOpen != null){
+			console.log('Opening ' + nodeToOpen);
+			self.port.emit('emit-sidebar-event', {
+				event: 'open',
+				data: nodeToOpen
+			});
+		}
+	}
+
 	function setHighlight(id, status){		
 
 		self.port.emit('emit-sidebar-event', {

diff --git a/plugin/data/sidebar.html b/plugin/data/sidebar.html
@@ -13,6 +13,11 @@
 			width: 100%;
 			height: 100%;
 			border: 0;
+			display: none;
+		}
+
+		iframe.active {
+			display: block;
 		}
 	</style>
 	<script>
@@ -38,12 +43,47 @@
 
 		addon.port.on('load', function(data){
 			baseUrl = data.url;
-			document.querySelector('body').innerHTML += '<iframe src="' + data.url + '" />';
+			var tabId = data.id;
+			//document.querySelector('body').innerHTML += '<iframe class="active" id="tab-' + tabId + '" src="' + data.url + '" />';
+			activateTab(tabId);
 		});
 
 		addon.port.on('msg', function(data){
-			document.querySelector('iframe').contentWindow.postMessage(data, '*');
+			document.querySelector('iframe.active').contentWindow.postMessage(data, '*');
+		});
+
+		addon.port.on('activateTab', function(data){
+			var tabId = data.id;
+
+			activateTab(tabId);			
 		});
+
+		function activateTab(tabId){
+			if(document.getElementById('tab-' + tabId) == null){
+				var iframe = document.createElement('iframe');
+				iframe.id = 'tab-' + tabId;
+				iframe.setAttribute('src', baseUrl);
+
+				document.body.appendChild(iframe);
+				console.log('Creating tab with id ' + tabId);
+			}
+
+			var current = document.querySelector('iframe.active');
+			if(current != null){
+				current.classList.remove('active');
+				current.contentWindow.postMessage({
+					action: 'deactivate'
+				}, '*');
+			}
+
+			var next = document.getElementById('tab-' + tabId);
+			if(next != null){
+				next.classList.add('active');
+				next.contentWindow.postMessage({
+					action: 'activate'
+				}, '*');
+			}else console.log('Missing tab with id ' + tabId);
+		}
 	</script>
 	<body style="margin:0px; padding: 0px; background-color: #555555" onload="initialize()">
 

diff --git a/plugin/install.rdf b/plugin/install.rdf
@@ -5,7 +5,7 @@
           <em:type>2</em:type>
           <em:bootstrap>true</em:bootstrap>
           <em:unpack>false</em:unpack>
-          <em:version>0.0.2</em:version>
+          <em:version>0.0.4</em:version>
           <em:name>Storyfinder</em:name>
           <em:description>Using graphs to improve the understanding of text on websites</em:description>
           <em:creator>Manuel Kaufmann</em:creator>
@@ -16,7 +16,7 @@
             <Description>
               <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
               <em:minVersion>38.0a1</em:minVersion>
-              <em:maxVersion>39.0</em:maxVersion>
+              <em:maxVersion>54.0</em:maxVersion>
 </Description>
 </em:targetApplication>
 

diff --git a/plugin/package.json b/plugin/package.json
@@ -2,7 +2,7 @@
   "title": "Storyfinder",
   "name": "storyfinder",
   "id": "storyfinder@lt.informatik.tu-darmstadt.de",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Using graphs to improve the understanding of text on websites",
   "main": "index.js",
   "author": "Manuel Kaufmann",

diff --git a/plugin/pageworker.js b/plugin/pageworker.js
@@ -79,11 +79,6 @@ module.exports = function(prefs, sidebar){
 						return;
 					}
 
-					if(_.isNull(response)){
-						next();
-						return;
-					}
-
 					bIsRelevant = response.is_relevant;
 					bIsNew = response.is_new;			
 
@@ -180,6 +175,16 @@ module.exports = function(prefs, sidebar){
 
 	this.parseSite = parseSite;
 
+	function addToHighlighting(entities){
+		workers.forEach(function(worker){
+			if(typeof worker != 'undefined'){
+				worker.port.emit('addEntities', entities);
+			}
+		});
+	}
+
+	this.addToHighlighting = addToHighlighting;
+
 	/*Attach the content script*/
 	pageMod.PageMod({
 		include: "*",

diff --git a/plugin/sidebar.js b/plugin/sidebar.js
@@ -44,11 +44,14 @@ module.exports = function(prefs){
 					switch(data.action){
 						case 'userRegistered':
 							storeCredentials(data.username, data.password);
-							//worker.port.emit("initialize", prefs["server"].replace(/\/$/,'') + '/');
 						break;
 						case 'parseSite':
 							pageworker.parseSite(data.url);
 						break;
+						case 'newEntity':
+							console.log('Received new entity');
+							pageworker.addToHighlighting(data.data);
+						break;
 						default:
 							console.log('Received unknown message from iframe', data);
 						break;
@@ -71,12 +74,11 @@ module.exports = function(prefs){
 
 	function initializeSidebar(worker){
 		var server = url(prefs['server']);
-		//worker.port.emit("load", {url: prefs["server"]});
-
+
 		if(prefs['username'] == ''){
-			worker.port.emit("load", {url: prefs["server"].replace(/\/$/,'') + '/login'});
+			worker.port.emit("load", {url: prefs["server"].replace(/\/$/,'') + '/login', id: tabs.activeTab.id});
 		}else{
-			worker.port.emit("load", {url: prefs["server"]});
+			worker.port.emit("load", {url: prefs["server"], id: tabs.activeTab.id});
 		}
 	}
 
@@ -94,21 +96,25 @@ module.exports = function(prefs){
 		});
 	}
 
-	this.emit = emit;
-
-	function showLogin(){
-		worker.port.emit("load", {url: prefs["server"].replace(/\/$/,'') + '/login'});
+	function showGraphForTab(id){
+		workers.forEach(function(worker){
+			if(typeof worker != 'undefined'){
+				worker.port.emit('activateTab', {id: id});
+			}
+		});
 	}
 
-	this.showLogin = showLogin;
+	this.emit = emit;
 
 	initialize();
 
 	tabs.on('activate', function () {
 		if(tabs.activeTab.url.replace(/\/$/g,'') == prefs["server"].replace(/\/$/g,''))
 			sidebar.hide();
-		else if(prefs['showSidebar'])
+		else if(prefs['showSidebar']){
 			sidebar.show();
+			showGraphForTab(tabs.activeTab.id);
+		}
 	});
 
 	tabs.on('open', function (tab) {