cytoscape-navigator - npm Package Compare versions

Comparing version 1.3.3 to 2.0.0

bower.json

@@ -6,4 +6,3 @@ {
   "dependencies": {
-    "cytoscape": "^2.6.0 || ^3.0.0",
-    "jquery": "^1.4.0 || ^2.0.0"
+    "cytoscape": "^2.6.0 || ^3.0.0"
   },
@@ -10,0 +9,0 @@ "repository": {

cytoscape-navigator.js

 ;(function(){ 'use strict';
 
-  var $;
-
   var defaults = {
@@ -270,4 +268,23 @@ container: false // can be a HTML or jQuery element or jQuery selector
     this._init(element, options)
-  }
+  };
 
+  var extend = function() {
+    for(var i = 1; i < arguments.length; i++) {
+      for(var key in arguments[i]) {
+        if(arguments[i].hasOwnProperty(key)) {
+          arguments[0][key] = arguments[i][key];
+        }
+      }
+    }
+    return arguments[0];
+  };
+
+  var wid = function(elem) {
+    return Math.max(elem.clientWidth, elem.scrollWidth, elem.offsetWidth);
+  };
+
+  var hei = function(elem) {
+    return Math.max(elem.clientHeight, elem.scrollHeight, elem.offsetHeight);
+  };
+
   Navigator.prototype = {
@@ -320,4 +337,4 @@
 
-      this.$element = $( cy.container() )
-      this.options = $.extend({}, defaults, options)
+      this.$element = cy.container()
+      this.options = extend({}, defaults, options)
 
@@ -330,4 +347,4 @@ this.cy = cy
       // Cache sizes
-      this.width = this.$element.width()
-      this.height = this.$element.height()
+      this.width = wid(this.$element);
+      this.height = hei(this.$element)
 
@@ -346,7 +363,6 @@ // Init components
       if (this.options.container && !this.options.removeCustomContainer) {
-        this.$panel.empty()
+        this.$panel.innerHTML = '';
       } else {
-        this.$panel.remove()
+        document.body.removeChild(this.$panel);
       }
-      this.$element.removeData('navigator')
     }
@@ -366,33 +382,22 @@
       var options = this.options
-
-      if( options.container ) {
-        if( options.container instanceof $ ){
-          if( options.container.length > 0 ){
-            this.$panel = options.container.first()
-          } else {
-            $.error("Container for jquery.cyNavigator is empty")
-            return
-          }
-        } else if ( $(options.container).length > 0 ) {
-          this.$panel = $(options.container).first()
+      if(options.container && typeof options.container === 'string' && options.container.length > 0) {
+        // to not break users which gives a jquery string selector
+        if (options.container.indexOf('#') !== -1) {
+          this.$panel = document.getElementById(options.container.replace('#', ''));
         } else {
-          $.error("There is no any element matching your selector for jquery.cyNavigator")
-          return
-        }
+          this.$panel = document.getElementsByClassName(options.container.replace('.', ''))[0];
+        } 
       } else {
-        this.$panel = $('<div class="cytoscape-navigator"/>')
-        $('body').append(this.$panel)
+        this.$panel = document.createElement('div');
+        this.$panel.className = 'cytoscape-navigator';
+        document.body.appendChild(this.$panel);
       }
-
       this._setupPanel()
-
-      this._addCyListener('resize', $.proxy(this.resize, this))
+      this._addCyListener('resize', this.resize.bind(this))
     }
 
   , _setupPanel: function () {
-      var options = this.options
-
       // Cache sizes
-      this.panelWidth = this.$panel.width()
-      this.panelHeight = this.$panel.height()
+      this.panelWidth = wid(this.$panel);
+      this.panelHeight = hei(this.$panel);
     }
@@ -408,6 +413,6 @@
       // Create thumbnail
-      this.$thumbnail = $('<img/>')
+      this.$thumbnail = document.createElement('img');
 
       // Add thumbnail canvas to the DOM
-      this.$panel.append(this.$thumbnail)
+      this.$panel.appendChild(this.$thumbnail);
 
@@ -465,13 +470,11 @@ // Setup thumbnail
   , _initView: function () {
-      var that = this
-
-      this.$view = $('<div class="cytoscape-navigatorView"/>')
-      this.$panel.append(this.$view)
-
+      this.$view = document.createElement('div');
+      this.$view.className = 'cytoscape-navigatorView';
+      this.$panel.appendChild(this.$view)
       // Compute borders
-      this.viewBorderTop = parseInt(this.$view.css('border-top-width'), 10)
-      this.viewBorderRight = parseInt(this.$view.css('border-right-width'), 10)
-      this.viewBorderBottom = parseInt(this.$view.css('border-bottom-width'), 10)
-      this.viewBorderLeft = parseInt(this.$view.css('border-left-width'), 10)
-
+      this.viewBorderTop = parseInt(this.$view.style['border-top-width'], 10) || 0;
+      this.viewBorderRight = parseInt(this.$view.style['border-right-width'], 10) || 0;
+      this.viewBorderBottom = parseInt(this.$view.style['border-bottom-width'], 10) || 0;
+      this.viewBorderLeft = parseInt(this.$view.style['border-left-width'], 10) || 0;
+      
       // Abstract borders
@@ -484,3 +487,3 @@ this.viewBorderHorizontal = this.viewBorderLeft + this.viewBorderRight
       // Hook graph zoom and pan
-      this._addCyListener('zoom pan', $.proxy(this._setupView, this))
+      this._addCyListener('zoom pan', this._setupView.bind(this))
     }
@@ -504,10 +507,7 @@
       // CSS view
-      this.$view
-        .width(this.viewW)
-        .height(this.viewH)
-        .css({
-          position: 'absolute',
-          left: this.viewX
-        , top: this.viewY
-        })
+      this.$view.style['width'] = this.viewW + 'px';
+      this.$view.style['height'] = this.viewH + 'px';
+      this.$view.style['position'] = 'absolute';
+      this.$view.style['left'] = this.viewX + 'px';
+      this.$view.style['top'] = this.viewY + 'px';
     }
@@ -525,6 +525,7 @@
       // Used to capture mouse events
-      this.$overlay = $('<div class="cytoscape-navigatorOverlay"/>')
+      this.$overlay = document.createElement('div');
+      this.$overlay.className = 'cytoscape-navigatorOverlay';
 
       // Add overlay to the DOM
-      this.$panel.append(this.$overlay)
+      this.$panel.appendChild(this.$overlay)
 
@@ -545,5 +546,4 @@ // Init some attributes
       // Cache sizes
-      this.width = this.$element.width()
-      this.height = this.$element.height()
-
+      this.width = wid(this.$element);
+      this.height = hei(this.$element);
       this._thumbnailSetup = false
@@ -575,9 +575,14 @@ this._setupPanel()
       // handle events and stop their propagation
-      var overlayListener;
-      this.$overlay.on(eventsLocal.join(' '), overlayListener = function (ev) {
+      var overlayListener = function (ev) {
         // Touch events
         if (ev.type == 'touchstart') {
           // Will count as middle of View
-          ev.offsetX = that.viewX + that.viewW / 2
-          ev.offsetY = that.viewY + that.viewH / 2
+          Object.defineProperty(ev, 'offsetX', {
+            value: that.viewX + that.viewW / 2,
+            writable: true
+          });
+          Object.defineProperty(ev, 'offsetY', {
+            value: that.viewY + that.viewH / 2,
+            writable: true
+          });
         }
@@ -587,5 +592,15 @@
         if (ev.offsetX === undefined || ev.offsetY === undefined) {
-          var targetOffset = $(ev.target).offset()
-          ev.offsetX = ev.pageX - targetOffset.left
-          ev.offsetY = ev.pageY - targetOffset.top
+          var rect = ev.target.getBoundingClientRect();
+          var targetOffset = { 
+            top: rect.top + window.scrollY, 
+            left: rect.left + window.scrollX, 
+          };
+          Object.defineProperty(ev, 'offsetX', {
+            value: ev.pageX - targetOffset.left,
+            writable: true
+          });
+          Object.defineProperty(ev, 'offsetY', {
+            value: ev.pageY - targetOffset.top,
+            writable: true
+          });
         }
@@ -602,7 +617,7 @@
         return false;
-      })
+      };
 
       // Hook global events
-      var globalListener;
-      $(window).on(eventsGlobal.join(' '), globalListener = function (ev) {
+      var globalListener = function (ev) {
+
         // Do not make any computations if it is has no effect on Navigator
@@ -615,8 +630,20 @@ if (!that.overlayInMovement)
           // Will count as middle of View
-          ev.offsetX = that.viewX + that.viewW / 2
-          ev.offsetY = that.viewY + that.viewH / 2
+          Object.defineProperty(ev, 'offsetX', {
+            value: that.viewX + that.viewW / 2,
+            writable: true
+          });
+          Object.defineProperty(ev, 'offsetY', {
+            value: that.viewY + that.viewH / 2,
+            writable: true
+          });
         } else if (ev.type == 'touchmove') {
           // Hack - we take in account only first touch
-          ev.pageX = ev.originalEvent.touches[0].pageX
-          ev.pageY = ev.originalEvent.touches[0].pageY
+          Object.defineProperty(ev, 'pageX', {
+            value: ev.originalEvent.touches[0].pageX,
+            writable: true
+          });
+          Object.defineProperty(ev, 'pageY', {
+            value: ev.originalEvent.touches[0].pageY,
+            writable: true
+          });
         }
@@ -626,15 +653,39 @@
         if (ev.offsetX === undefined || ev.offsetY === undefined) {
-          var targetOffset = $(ev.target).offset()
-          ev.offsetX = ev.pageX - targetOffset.left
-          ev.offsetY = ev.pageY - targetOffset.top
+          var rect = ev.target.getBoundingClientRect();
+          var targetOffset = { 
+            top: rect.top + window.scrollY, 
+            left: rect.left + window.scrollX, 
+          };
+          Object.defineProperty(ev, 'offsetX', {
+            value: ev.pageX - targetOffset.left,
+            writable: true
+          });
+          Object.defineProperty(ev, 'offsetY', {
+            value: ev.pageY - targetOffset.top,
+            writable: true
+          });
         }
 
         // Translate global events into local coordinates
-        if (ev.target !== that.$overlay[0]) {
-          var targetOffset = $(ev.target).offset()
-            , overlayOffset = that.$overlay.offset()
-
-          if(targetOffset && overlayOffset){
-            ev.offsetX = ev.offsetX - overlayOffset.left + targetOffset.left
-            ev.offsetY = ev.offsetY - overlayOffset.top + targetOffset.top
+        if (ev.target !== that.$overlay) {
+          var rect = ev.target.getBoundingClientRect();
+          var rect2 = that.$overlay.getBoundingClientRect();
+          var targetOffset = { 
+            top: rect.top + window.scrollY, 
+            left: rect.left + window.scrollX, 
+          };
+          var overlayOffset = { 
+            top: rect2.top + window.scrollY, 
+            left: rect2.left + window.scrollX, 
+          };
+          
+          if(targetOffset && overlayOffset) {
+            Object.defineProperty(ev, 'offsetX', {
+              value: ev.offsetX - overlayOffset.left + targetOffset.left,
+              writable: true
+            });
+            Object.defineProperty(ev, 'offsetY', {
+              value: ev.offsetY - overlayOffset.top + targetOffset.top,
+              writable: true
+            });
           } else {
@@ -654,8 +705,21 @@ return false;
         return false;
-      })
+      };
 
+      for (var i = 0; i < eventsLocal.length; i++) {
+        this.$overlay.addEventListener(eventsLocal[i], overlayListener, false);
+      }
+
+      for (var i = 0; i < eventsGlobal.length; i++) {
+        window.addEventListener(eventsGlobal[i], globalListener, false);
+      }
+
       this._removeEventsHandling = function(){
 
-        this.$overlay.off( eventsLocal.join(' '), overlayListener )
-        $(window).off( eventsGlobal.join(' '), globalListener )
+        for (var i = 0; i < eventsLocal.length; i++) {
+          this.$overlay.removeEventListener(eventsLocal[i], overlayListener);
+        }
+
+        for (var i = 0; i < eventsGlobal.length; i++) {
+          window.removeEventListener(eventsGlobal[i], globalListener);
+        }
       }
@@ -737,4 +801,4 @@ }
       // Update view position
-      this.$view.css('left', this.viewX)
-      this.$view.css('top', this.viewY)
+      this.$view.style['left'] = this.viewX + 'px';
+      this.$view.style['top'] = this.viewY + 'px';
 
@@ -753,3 +817,3 @@ // Move Cy
             that.overlayTimeout = false
-          }, 1000/this.options.viewLiveFramerate)
+          }, 1000 / this.options.viewLiveFramerate)
         }
@@ -763,5 +827,5 @@ }
         && ev.offsetY > this.viewY && ev.offsetY < this.viewY + this.viewBorderVertical + this.viewH) {
-        this.$panel.addClass('mouseover-view')
+        this.$panel.classList.add('mouseover-view')
       } else {
-        this.$panel.removeClass('mouseover-view')
+        this.$panel.classList.remove('mouseover-view')
       }
@@ -775,3 +839,3 @@ }
       // Remove class when mouse is not over Navigator
-      this.$panel.removeClass('mouseover-view')
+      this.$panel.classList.remove('mouseover-view')
 
@@ -795,3 +859,5 @@ if (!this.overlayInMovement) {
   , _eventZoom: function (ev) {
-      var zoomRate = Math.pow(10, ev.originalEvent.wheelDeltaY / 1000 || ev.originalEvent.wheelDelta / 1000 || ev.originalEvent.detail / -32)
+      var ev2 = extend({}, ev.originalEvent);
+      var delta = ev.wheelDeltaY / 1000 || ev.wheelDelta / 1000 || ev.detail / -32 || ev2.wheelDeltaY / 1000 || ev2.wheelDelta / 1000 || ev2.detail / -32;
+      var zoomRate = Math.pow(10, delta)
         , mousePosition = {
@@ -816,3 +882,3 @@ left: ev.offsetX
 
-    var render = function(){
+    var render = function() {
       that._checkThumbnailSizesAndUpdate();
@@ -822,3 +888,3 @@ that._setupView();
       var $img = that.$thumbnail;
-      var img = $img[0];
+      var img = $img;
 
@@ -841,3 +907,2 @@ var w = that.panelWidth;
       });
-
       if( png.indexOf('image/png') < 0 ){
@@ -849,7 +914,5 @@ img.removeAttribute( 'src' );
 
-      $img.css({
-        'position': 'absolute',
-        'left': translate.x + 'px',
-        'top': translate.y + 'px'
-      });
+      $img.style['position'] = 'absolute';
+      $img.style['left'] = translate.x + 'px';
+      $img.style['top'] = translate.y + 'px';
     }
@@ -896,8 +959,6 @@
   // registers the extension on a cytoscape lib ref
-  var register = function( cytoscape, jq ){
+  var register = function( cytoscape ){
 
-    if( !cytoscape || !jq ){ return; } // can't register if cytoscape unspecified
+    if (!cytoscape){ return; } // can't register if cytoscape unspecified
 
-    $ = jq;
-
     cytoscape( 'core', 'navigator', function( options ){
@@ -911,7 +972,7 @@ var cy = this;
 
-  if( typeof module !== 'undefined' && module.exports ){ // expose as a commonjs module
-    module.exports = function( cytoscape, jq ){
-      register( cytoscape, jq || require('jquery') );
+  if (typeof module !== 'undefined' && module.exports) { // expose as a commonjs module
+    module.exports = function( cytoscape ){
+      register( cytoscape );
     };
-  } else if( typeof define !== 'undefined' && define.amd ){ // expose as an amd/requirejs module
+  } else if (typeof define !== 'undefined' && define.amd) { // expose as an amd/requirejs module
     define('cytoscape-navigator', function(){
@@ -922,6 +983,6 @@ return register;
 
-  if( typeof cytoscape !== 'undefined' && typeof jQuery !== 'undefined' ){ // expose to global cytoscape (i.e. window.cytoscape)
-    register( cytoscape, jQuery );
+  if (typeof cytoscape !== 'undefined') { // expose to global cytoscape (i.e. window.cytoscape)
+    register(cytoscape);
   }
 
 })();

package.json

 {
   "name": "cytoscape-navigator",
-  "version": "1.3.3",
+  "version": "2.0.0",
   "description": "Bird's eye view pan and zoom control for Cytoscape.js",
@@ -35,5 +35,2 @@ "main": "cytoscape-navigator.js",
   },
-  "dependencies": {
-    "jquery": "^2.0.0 || ^1.4.0"
-  },
   "peerDependencies": {
@@ -40,0 +37,0 @@ "cytoscape": "^2.6.0 || ^3.0.0"

README.md

@@ -13,3 +13,2 @@ cytoscape-navigator
  * Cytoscape.js ^2.6.0 || ^3.0.0
- * jQuery ^2.0.0 || ^1.4.0
 
@@ -50,3 +49,3 @@
 var defaults = {
-    container: false // can be a HTML or jQuery element or jQuery selector
+    container: false // html dom element
   , viewLiveFramerate: 0 // set false to update graph pan only on drag end; set 0 to do it instantly; set a number (frames per second) to update not more than N times per second
@@ -53,0 +52,0 @@ , thumbnailEventFramerate: 30 // max thumbnail's updates per second triggered by graph updates

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39112

increased by6.33%

Dependency count

1

decreased by-50%

Lines of code

968

increased by6.96%

Worsened metrics

Number of lines in readme file

71

decreased by-1.39%

Dependency changes

• - Removedjquery@^2.0.0 || ^1.4.0

• - Removedjquery@2.2.4(transitive)