From f7bbdd2d117e12958ad3cdf98d07e2c8628c89e9 Mon Sep 17 00:00:00 2001 From: Manuel Kaufmann Date: Wed, 14 Dec 2016 08:15:28 +0100 Subject: [PATCH] Multi-tab support; highlight manually added entities; click and hold an entity to open node details --- js/index.js | 42 +++++++++++++++++++++++++++++++++- plugin/data/contentscript.js | 42 +++++++++++++++++++++++++++++++++- plugin/data/sidebar.html | 44 ++++++++++++++++++++++++++++++++++-- plugin/install.rdf | 4 ++-- plugin/package.json | 2 +- plugin/pageworker.js | 15 ++++++++---- plugin/sidebar.js | 28 ++++++++++++++--------- 7 files changed, 154 insertions(+), 23 deletions(-) diff --git a/js/index.js b/js/index.js index 1c4d1c2..de017ce 100644 --- 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 index b2cc2dd..548f68f 100644 --- 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 index 8ebe142..7688318 100644 --- 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; } diff --git a/plugin/install.rdf b/plugin/install.rdf index 37827f8..f86a060 100644 --- a/plugin/install.rdf +++ b/plugin/install.rdf @@ -5,7 +5,7 @@ 2 true false - 0.0.2 + 0.0.4 Storyfinder Using graphs to improve the understanding of text on websites Manuel Kaufmann @@ -16,7 +16,7 @@ {ec8030f7-c20a-464f-9b0e-13a3a9e97384} 38.0a1 - 39.0 + 54.0 diff --git a/plugin/package.json b/plugin/package.json index 8578e9e..abaef1a 100644 --- 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 index 1f581e0..3c4a339 100644 --- 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 index d9e34c9..4157111 100644 --- 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) {