From 7b17ccaa25ca7730415f09a06b5b2db710f4830d Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Wed, 12 Mar 2014 10:01:28 +0100 Subject: [PATCH] added highlight on keypress per #62 --- dist/vis.css | 4 +++ dist/vis.js | 34 ++++++++++++++++++++++-- examples/graph/20_navigation.html | 2 +- src/graph/css/graph-navigation.css | 4 +++ src/graph/graphMixins/NavigationMixin.js | 30 +++++++++++++++++++++ 5 files changed, 71 insertions(+), 3 deletions(-) diff --git a/dist/vis.css b/dist/vis.css index fc64dc1a..e290c0a0 100644 --- a/dist/vis.css +++ b/dist/vis.css @@ -427,6 +427,10 @@ div.graph-navigation:active { box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); } +div.graph-navigation.active { + box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); +} + div.graph-navigation.up { background-image: url("img/graph/upArrow.png"); bottom:50px; diff --git a/dist/vis.js b/dist/vis.js index 492949ea..9d614357 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -4,8 +4,8 @@ * * A dynamic, browser-based visualization library. * - * @version 0.8.0-SNAPSHOT - * @date 2014-03-11 + * @version @@version + * @date @@date * * @license * Copyright (C) 2011-2014 Almende B.V, http://almende.com @@ -15663,6 +15663,9 @@ var NavigationMixin = { this.yIncrement = this.constants.keyboard.speed.y; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['up'].className += " active"; + } }, @@ -15674,6 +15677,9 @@ var NavigationMixin = { this.yIncrement = -this.constants.keyboard.speed.y; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['down'].className += " active"; + } }, @@ -15685,6 +15691,9 @@ var NavigationMixin = { this.xIncrement = this.constants.keyboard.speed.x; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['left'].className += " active"; + } }, @@ -15696,6 +15705,9 @@ var NavigationMixin = { this.xIncrement = -this.constants.keyboard.speed.y; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['right'].className += " active"; + } }, @@ -15707,6 +15719,9 @@ var NavigationMixin = { this.zoomIncrement = this.constants.keyboard.speed.zoom; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['zoomIn'].className += " active"; + } }, @@ -15718,6 +15733,9 @@ var NavigationMixin = { this.zoomIncrement = -this.constants.keyboard.speed.zoom; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['zoomOut'].className += " active"; + } }, @@ -15727,6 +15745,10 @@ var NavigationMixin = { */ _stopZoom : function() { this.zoomIncrement = 0; + if (this.navigationDivs) { + this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active",""); + this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active",""); + } }, @@ -15736,6 +15758,10 @@ var NavigationMixin = { */ _yStopMoving : function() { this.yIncrement = 0; + if (this.navigationDivs) { + this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active",""); + this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active",""); + } }, @@ -15745,6 +15771,10 @@ var NavigationMixin = { */ _xStopMoving : function() { this.xIncrement = 0; + if (this.navigationDivs) { + this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active",""); + this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active",""); + } } diff --git a/examples/graph/20_navigation.html b/examples/graph/20_navigation.html index 478f154a..28a706ff 100644 --- a/examples/graph/20_navigation.html +++ b/examples/graph/20_navigation.html @@ -161,7 +161,7 @@
Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above. - Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. To correctly display the navigation icons, the vis.css file must be included. + Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. To correctly display the navigation icons, the vis.css file must be included. The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. diff --git a/src/graph/css/graph-navigation.css b/src/graph/css/graph-navigation.css index cc402691..1a318390 100644 --- a/src/graph/css/graph-navigation.css +++ b/src/graph/css/graph-navigation.css @@ -25,6 +25,10 @@ div.graph-navigation:active { box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); } +div.graph-navigation.active { + box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95); +} + div.graph-navigation.up { background-image: url("img/graph/upArrow.png"); bottom:50px; diff --git a/src/graph/graphMixins/NavigationMixin.js b/src/graph/graphMixins/NavigationMixin.js index ab1ed784..efa8b9c6 100644 --- a/src/graph/graphMixins/NavigationMixin.js +++ b/src/graph/graphMixins/NavigationMixin.js @@ -87,6 +87,9 @@ var NavigationMixin = { this.yIncrement = this.constants.keyboard.speed.y; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['up'].className += " active"; + } }, @@ -98,6 +101,9 @@ var NavigationMixin = { this.yIncrement = -this.constants.keyboard.speed.y; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['down'].className += " active"; + } }, @@ -109,6 +115,9 @@ var NavigationMixin = { this.xIncrement = this.constants.keyboard.speed.x; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['left'].className += " active"; + } }, @@ -120,6 +129,9 @@ var NavigationMixin = { this.xIncrement = -this.constants.keyboard.speed.y; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['right'].className += " active"; + } }, @@ -131,6 +143,9 @@ var NavigationMixin = { this.zoomIncrement = this.constants.keyboard.speed.zoom; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['zoomIn'].className += " active"; + } }, @@ -142,6 +157,9 @@ var NavigationMixin = { this.zoomIncrement = -this.constants.keyboard.speed.zoom; this.start(); // if there is no node movement, the calculation wont be done this._preventDefault(event); + if (this.navigationDivs) { + this.navigationDivs['zoomOut'].className += " active"; + } }, @@ -151,6 +169,10 @@ var NavigationMixin = { */ _stopZoom : function() { this.zoomIncrement = 0; + if (this.navigationDivs) { + this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active",""); + this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active",""); + } }, @@ -160,6 +182,10 @@ var NavigationMixin = { */ _yStopMoving : function() { this.yIncrement = 0; + if (this.navigationDivs) { + this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active",""); + this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active",""); + } }, @@ -169,6 +195,10 @@ var NavigationMixin = { */ _xStopMoving : function() { this.xIncrement = 0; + if (this.navigationDivs) { + this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active",""); + this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active",""); + } }