cytoscape-cxtmenu - npm Package Compare versions

Comparing version 2.8.1 to 2.9.0

bower.json

@@ -10,4 +10,3 @@ {
   "dependencies": {
-    "cytoscape": "^2.2.0",
-    "jquery":"^1.4.0 || ^2.0.0"
+    "cytoscape": "^2.2.0"
   },
@@ -14,0 +13,0 @@ "ignore": [

cytoscape-cxtmenu.js

@@ -25,4 +25,2 @@ /*!
 
-  var $ = typeof jQuery === typeof undefined ? null : jQuery;
-
   var defaults = {
@@ -57,23 +55,78 @@ menuRadius: 100, // the radius of the circular menu in pixels
 
+  // Object.assign Polyfill for IE
+  if (typeof Object.assign != 'function') {
+    (function () {
+      Object.assign = function (target) {
+        'use strict';
+        // We must check against these specific cases.
+        if (target === undefined || target === null) {
+          throw new TypeError('Cannot convert undefined or null to object');
+        }
+
+        var output = Object(target);
+        for (var index = 1; index < arguments.length; index++) {
+          var source = arguments[index];
+          if (source !== undefined && source !== null) {
+            for (var nextKey in source) {
+              if (source.hasOwnProperty(nextKey)) {
+                output[nextKey] = source[nextKey];
+              }
+            }
+          }
+        }
+        return output;
+      };
+    })();
+  }
+
+  var removeEles = function(query, ancestor) {
+    ancestor = ancestor || document;
+
+    for (var el of [].slice.call(ancestor.querySelectorAll(query))) {
+      el.remove();
+    }
+  };
+
+  var setStyles = function(el, style) {
+    for (var key of Object.keys(style)) {
+      el.style[key] = style[key];
+    }
+  };
+
+  var createElement = function(options){
+    options = options || {};
+
+    var el = document.createElement(options.tag || 'div');
+
+    el.className = options.class || '';
+
+    if (options.style) {
+      setStyles(el, options.style);
+    }
+
+    return el;
+  };
+
   // registers the extension on a cytoscape lib ref
-  var register = function( cytoscape, $ ){
+  var register = function(cytoscape){
     if( !cytoscape ){ return; } // can't register if cytoscape unspecified
 
     cytoscape('core', 'cxtmenu', function(params){
-      var options = $.extend(true, {}, defaults, params);
+      var options = Object.assign({}, defaults, params);
       var fn = params;
       var cy = this;
-      var $container = $( cy.container() );
+      var container = cy.container();
       var target;
 
-      function getOffset( $ele ){
-        var offset = $ele.offset();
+      function getOffset( el ){
+        var offset = el.getBoundingClientRect();
 
-        offset.left += parseFloat( $ele.css('padding-left') );
-        offset.left += parseFloat( $ele.css('border-left-width') );
-
-        offset.top += parseFloat( $ele.css('padding-top') );
-        offset.top += parseFloat( $ele.css('border-top-width') );
-
-        return offset;
+        return {
+          left: offset.left + document.body.scrollLeft +
+                parseFloat(getComputedStyle(document.body)['padding-left']) +
+                parseFloat(getComputedStyle(document.body)['border-left-width']),
+          top: offset.top + document.body.scrollTop +
+               parseFloat(getComputedStyle(document.body)['padding-top']) +
+               parseFloat(getComputedStyle(document.body)['border-top-width'])
+        };
       }
@@ -85,7 +138,8 @@
       };
-      var $wrapper = $('<div class="cxtmenu"></div>'); data.$container = $wrapper;
-      var $parent = $('<div></div>');
-      var $canvas = $('<canvas></canvas>');
+      var wrapper = createElement({class: 'cxtmenu'});
+      data.container = wrapper;
+      var parent = createElement();
+      var canvas = createElement({tag: 'canvas'});
       var commands = [];
-      var c2d = $canvas[0].getContext('2d');
+      var c2d = canvas.getContext('2d');
       var r = options.menuRadius;
@@ -96,7 +150,7 @@ var containerSize = (r + options.activePadding)*2;
 
-      $container.prepend( $wrapper );
-      $wrapper.append( $parent );
-      $parent.append( $canvas );
+      container.insertBefore(wrapper, container.firstChild);
+      wrapper.appendChild(parent);
+      parent.appendChild(canvas);
 
-      $wrapper.css({
+      setStyles(wrapper, {
         position: 'absolute',
@@ -106,3 +160,4 @@ zIndex: options.zIndex
 
-      $parent.css({
+      setStyles(parent, {
+        display: 'none',
         width: containerSize + 'px',
@@ -114,9 +169,9 @@ height: containerSize + 'px',
         marginTop: - options.activePadding + 'px'
-      }).hide();
+      });
 
-      $canvas[0].width = containerSize;
-      $canvas[0].height = containerSize;
+      canvas.width = containerSize;
+      canvas.height = containerSize;
 
     function createMenuItems() {
-      $('.cxtmenu-item').remove();
+      removeEles('.cxtmenu-item', parent);
       var dtheta = 2 * Math.PI / (commands.length);
@@ -133,4 +188,4 @@ var theta1 = Math.PI / 2;
 
-        var $item = $('<div class="cxtmenu-item"></div>');
-        $item.css({
+        var item = createElement({class: 'cxtmenu-item'});
+        setStyles(item, {
           color: options.itemColor,
@@ -145,13 +200,14 @@ cursor: 'default',
           top: '50%',
-          'min-height': r * 0.66,
-          width: r * 0.66,
-          height: r * 0.66,
-          marginLeft: rx1 - r * 0.33,
-          marginTop: -ry1 - r * 0.33
+          'min-height': (r * 0.66) + 'px',
+          width: (r * 0.66) + 'px',
+          height: (r * 0.66) + 'px',
+          marginLeft: (rx1 - r * 0.33) + 'px',
+          marginTop: (-ry1 - r * 0.33) + 'px'
         });
 
-        var $content = $('<div class="cxtmenu-content">' + command.content + '</div>');
-        $content.css({
-          'width': r * 0.66,
-          'height': r * 0.66,
+        var content = createElement({class: 'cxtmenu-content'});
+        content.innerHTML = command.content;
+        setStyles(content, {
+          'width': (r * 0.66) + 'px',
+          'height': (r * 0.66) + 'px',
           'vertical-align': 'middle',
@@ -162,9 +218,8 @@ 'display': 'table-cell'
         if (command.disabled) {
-          $content.addClass('cxtmenu-disabled');
+          content.classList.add('cxtmenu-disabled');
         }
 
-        $parent.append($item);
-        $item.append($content);
+        parent.appendChild(item);
+        item.appendChild(content);
 
-
         theta1 += dtheta;
@@ -368,3 +423,3 @@ theta2 += dtheta;
             if (inGesture) {
-              $parent.hide();
+              parent.style.display = 'none';
 
@@ -408,3 +463,3 @@ inGesture = false;
 
-            offset = getOffset( $container );
+            offset = getOffset(container);
 
@@ -416,5 +471,6 @@ ctrx = rp.x;
 
-            $parent.show().css({
-              'left': rp.x - r + 'px',
-              'top': rp.y - r + 'px'
+            setStyles(parent, {
+              display: 'block',
+              left: (rp.x - r) + 'px',
+              top: (rp.y - r) + 'px'
             });
@@ -499,4 +555,5 @@
             var ele = this;
-            $parent.hide();
 
+            parent.style.display = 'none';
+
             if( activeCommandI !== undefined ){
@@ -519,3 +576,3 @@ var select = commands[ activeCommandI ].select;
           .on('cxttapend tapend', function(e){
-            $parent.hide();
+            parent.style.display = 'none';
 
@@ -550,3 +607,3 @@ inGesture = false;
 
-        $wrapper.remove();
+        wrapper.remove();
       }
@@ -576,6 +633,6 @@
 
-  if( typeof cytoscape !== typeof undefined && $ ){ // expose to global cytoscape (i.e. window.cytoscape)
-    register( cytoscape, $ );
+  if( typeof cytoscape !== typeof undefined ){ // expose to global cytoscape (i.e. window.cytoscape)
+    register(cytoscape);
   }
 
 })();

package.json

 {
   "name": "cytoscape-cxtmenu",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "description": "A context menu for Cytoscape.js",
@@ -33,5 +33,4 @@ "main": "cytoscape-cxtmenu.js",
   "peerDependencies": {
-    "cytoscape": "^2.2.0",
-    "jquery":"^1.4.0 || ^2.0.0"
+    "cytoscape": "^2.2.0"
   }
 }

README.md

@@ -16,3 +16,2 @@ cytoscape-cxtmenu
  * Cytoscape.js >= 2.2
- * jQuery >= 1.4
 
@@ -32,6 +31,5 @@
 var cytoscape = require('cytoscape');
-var jquery = require('jquery');
 var cxtmenu = require('cytoscape-cxtmenu');
 
-cxtmenu( cytoscape, jquery ); // register extension
+cxtmenu( cytoscape ); // register extension
 ```
@@ -41,9 +39,7 @@
 ```js
-require(['cytoscape', 'cytoscape-cxtmenu', 'jquery'], function( cytoscape, cxtmenu, jquery ){
-  cxtmenu( cytoscape, jquery ); // register extension
+require(['cytoscape', 'cytoscape-cxtmenu'], function( cytoscape, cxtmenu ){
+  cxtmenu( cytoscape ); // register extension
 });
 ```
 
-Note that `jquery` must point to a jQuery object if any sort of `require()` is used.
-
 Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed.
@@ -50,0 +46,0 @@

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

603986

increased by0.24%

Dependency count

1

decreased by-50%

Lines of code

1937

increased by2.6%

Worsened metrics

Number of lines in readme file

111

decreased by-3.48%

No dependency changes