Remove jQuery dependency

iVis-at-Bilkent · Apr 29, 2019 · 2d0ec3c · 2d0ec3c
1 parent 4b94483
commit 2d0ec3c
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -129,7 +129,6 @@ Notice that following events are performed for *each* node that is collapsed/exp
 ## Dependencies
 
  * Cytoscape.js ^1.7.0
- * jQuery ^1.7.0 || ^2.0.0 || ^3.0.0
  * cytoscape-undo-redo.js(optional) ^1.0.1
  * cytoscape-cose-bilkent.js(optional/suggested for layout after expand/collapse) ^1.3.6
 
@@ -146,10 +145,9 @@ Download the library:
 CommonJS:
 ```js
 var cytoscape = require('cytoscape');
-var jquery = require('jquery');
 var expandCollapse = require('cytoscape-expand-collapse');
 
-expandCollapse( cytoscape, jquery ); // register extension
+expandCollapse( cytoscape ); // register extension
 ```
 
 AMD:

diff --git a/cytoscape-expand-collapse.js b/cytoscape-expand-collapse.js
diff --git a/demo-compounds-collapsed.html b/demo-compounds-collapsed.html
@@ -5,15 +5,15 @@
 	<head>
 		<title>cytoscape-expand-collapse.js demo</title>
 
+		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
 
-                <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
 		<script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
 
 		<!-- for testing with local version of cytoscape.js -->
 		<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
 		<script src="https://unpkg.com/[email protected]/cytoscape-cose-bilkent.js"></script>
-		<script src="https://unpkg.com/[email protected]/cytoscape-expand-collapse.js"></script>
+		<script src="cytoscape-expand-collapse.js"></script>
 
 
 		<style>

diff --git a/demo-undoable.html b/demo-undoable.html
@@ -5,9 +5,9 @@
 	<head>
 		<title>cytoscape-expand-collapse.js demo</title>
 
+		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
 
-                <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
 		<script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
 
 		<!-- for testing with local version of cytoscape.js -->

diff --git a/demo.html b/demo.html
@@ -5,9 +5,9 @@
 	<head>
 		<title>cytoscape-expand-collapse.js demo</title>
 
+		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
 
-                <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
 		<script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
 
 		<!-- for testing with local version of cytoscape.js -->

diff --git a/package.json b/package.json
@@ -38,7 +38,6 @@
     "vinyl-source-stream": "^1.1.2"
   },
   "peerDependencies": {
-    "cytoscape": "^2.7.0 || ^3.0.0",
-    "jquery": "^1.7.0 || ^2.0.0 || ^3.0.0"
+    "cytoscape": "^2.7.0 || ^3.0.0"
   }
 }
diff --git a/src/cueUtilities.js b/src/cueUtilities.js
@@ -1,6 +1,6 @@
 var debounce = require('./debounce');
 
-module.exports = function (params, cy, api, $) {
+module.exports = function (params, cy, api) {
   var elementUtilities;
   var fn = params;
 
@@ -11,34 +11,35 @@ module.exports = function (params, cy, api, $) {
     init: function () {
       var self = this;
       var opts = params;
-      var $container = this;
-      var $canvas = $('<canvas></canvas>');
+      var $canvas = document.createElement('canvas');
+      var $container = cy.container();
+      var ctx = $canvas.getContext( '2d' );
+      $container.append($canvas);
+
       elementUtilities = require('./elementUtilities')(cy);
 
-      $container.append($canvas);
+      var offset = function(elt) {
+          var rect = elt.getBoundingClientRect();
+
+          return {
+            top: rect.top + document.documentElement.scrollTop,
+            left: rect.left + document.documentElement.scrollLeft
+          }
+      }
 
       var _sizeCanvas = debounce(function () {
-        $canvas
-          .attr('height', $container.height())
-          .attr('width', $container.width())
-          .css({
-            'position': 'absolute',
-            'top': 0,
-            'left': 0,
-            'z-index': '999'
-          })
-        ;
+        $canvas.height = cy.height();
+        $canvas.width = cy.width();
+        $canvas.style.position = 'absolute';
+        $canvas.style.top = 0;
+        $canvas.style.left = 0;
+        $canvas.style.zIndex = 999;
 
         setTimeout(function () {
-          var canvasBb = $canvas.offset();
-          var containerBb = $container.offset();
-
-          $canvas
-            .css({
-              'top': -(canvasBb.top - containerBb.top),
-              'left': -(canvasBb.left - containerBb.left)
-            })
-          ;
+          var canvasBb = offset($canvas);
+          var containerBb = offset($container);
+          $canvas.style.top = -(canvasBb.top - containerBb.top);
+          $canvas.style.left = -(canvasBb.left - containerBb.left);
 
           // refresh the cues on canvas resize
           if(cy){
@@ -54,14 +55,10 @@ module.exports = function (params, cy, api, $) {
 
       sizeCanvas();
 
-      $(window).bind('resize', function () {
-        sizeCanvas();
-      });
-
-      var ctx = $canvas[0].getContext('2d');
+      window.addEventListener('resize', sizeCanvas);
 
       // write options to data
-      var data = $container.data('cyexpandcollapse');
+      var data = cy.scratch('cyexpandcollapse');
       if (data == null) {
         data = {};
       }
@@ -70,12 +67,12 @@ module.exports = function (params, cy, api, $) {
       var optCache;
 
       function options() {
-        return optCache || (optCache = $container.data('cyexpandcollapse').options);
+        return optCache || (optCache = cy.scratch('cyexpandcollapse').options);
       }
 
       function clearDraws() {
-        var w = $container.width();
-        var h = $container.height();
+        var w = cy.width();
+        var h = cy.height();
 
         ctx.clearRect(0, 0, w, h);
       }
@@ -320,7 +317,7 @@ module.exports = function (params, cy, api, $) {
 		});
       }
 
-      $container.data('cyexpandcollapse', data);
+      cy.scratch('cyexpandcollapse', data);
     },
     unbind: function () {
         var cy = this.cytoscape('get');
@@ -337,12 +334,12 @@ module.exports = function (params, cy, api, $) {
   };
 
   if (functions[fn]) {
-    return functions[fn].apply($(cy.container()), Array.prototype.slice.call(arguments, 1));
+    return functions[fn].apply(cy.container(), Array.prototype.slice.call(arguments, 1));
   } else if (typeof fn == 'object' || !fn) {
-    return functions.init.apply($(cy.container()), arguments);
+    return functions.init.apply(cy.container(), arguments);
   } else {
-    $.error('No such function `' + fn + '` for cytoscape.js-expand-collapse');
+    throw new Error('No such function `' + fn + '` for cytoscape.js-expand-collapse');
   }
 
-  return $(this);
+  return this;
 };
diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,7 @@
   'use strict';
 
   // registers the extension on a cytoscape lib ref
-  var register = function (cytoscape, $) {
+  var register = function (cytoscape) {
 
     if (!cytoscape) {
       return;
@@ -240,7 +240,7 @@
         undoRedoUtilities(cy, api);
 
         if(options.cueEnabled)
-          cueUtilities(options, cy, api, $);
+          cueUtilities(options, cy, api);
 
 
         options.ready();
@@ -263,8 +263,8 @@
     });
   }
 
-    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);
   }
 
 })();