cytoscape-cxtmenu - npm Package Compare versions

Comparing version 2.0.0 to 2.1.1

bower.json

 {
   "name": "cytoscape-cxtmenu",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "A context menu for Cytoscape.js",
@@ -10,2 +10,6 @@ "main": "cytoscape-cxtmenu.js",
   },
+  "dependencies": {
+    "cytoscape": ">= 2.2",
+    "jquery":">=1.4"
+  },
   "ignore": [
@@ -12,0 +16,0 @@ "**/.*",

cytoscape-cxtmenu.js

@@ -135,18 +135,27 @@ ;(function( $ ){ 'use strict';
 
-      // Left click hides menu and triggers command
-      $(document).on('click', function() {
-        $parent.hide();
-      });
+      var hideParentOnClick, selectOnClickWrapper;
 
-      $wrapper.on('click', function() {
-        if (activeCommandI !== undefined && !!target) {
-          var select = options.commands[activeCommandI].select;
+      function addDomListeners(){
+        // Left click hides menu and triggers command
+        $(document).on('click', hideParentOnClick = function() {
+          $parent.hide();
+        });
 
-          if (select) {
-              select.apply(target);
+        $wrapper.on('click', selectOnClickWrapper = function() {
+          if (activeCommandI !== undefined && !!target) {
+            var select = options.commands[activeCommandI].select;
+
+            if (select) {
+                select.apply(target);
+            }
           }
-        }
-      });
+        });
+      }
 
+      function removeDomListeners(){
+        $(document).off('click', hideParentOnClick);
+        $wrapper.off('click', selectOnClickWrapper);
+      }
 
+
       function drawBg( rspotlight ){
@@ -238,3 +247,11 @@ rspotlight = rspotlight !== undefined ? rspotlight : rs;
 
-          cy.on(events, selector, fn);
+          if( selector === 'core' ){
+            cy.on(events, function( e ){
+              if( e.cyTarget === cy ){ // only if event target is directly core
+                return fn.apply( this, [ e ] );
+              }
+            });
+          } else {
+            cy.on(events, selector, fn);
+          }
 
@@ -246,9 +263,19 @@ return this;
       function addEventListeners(){
+        var grabbable;
+        var inGesture = false;
+        var dragHandler;
+
         bindings
-          .on('cxttapstart', options.selector, function(e){
+          .on('cxttapstart taphold', options.selector, function(e){
             target = this; // Remember which node the context menu is for
             var ele = this;
+            var isCy = this === cy;
 
+            grabbable = target.grabbable();
+            if( grabbable ){
+              target.ungrabify();
+            }
+
             var rp, rw, rh;
-            if( ele.isNode() ){
+            if( !isCy && ele.isNode() ){
               rp = ele.renderedPosition();
@@ -282,6 +309,10 @@ rw = ele.renderedWidth();
             activeCommandI = undefined;
+
+            inGesture = true;
           })
 
-          .on('cxtdrag', options.selector, function(e){ rateLimitedCall(function(){
+          .on('cxtdrag tapdrag', options.selector, dragHandler = function(e){ rateLimitedCall(function(){
 
+            if( !inGesture ){ return; }
+
             var dx = e.originalEvent.pageX - offset.left - ctrx;
@@ -372,3 +403,5 @@ var dy = e.originalEvent.pageY - offset.top - ctry;
 
-          .on('cxttapend', options.selector, function(e){
+          .on('tapdrag', dragHandler)
+
+          .on('cxttapend tapend', options.selector, function(e){
             var ele = this;
@@ -384,12 +417,51 @@ $parent.hide();
             }
+
+            inGesture = false;
+
+            if( grabbable ){
+              target.grabify();
+            }
           })
 
-          .on('cxttapend', function(e){
+          .on('cxttapend tapend', function(e){
             $parent.hide();
+
+            inGesture = false;
+
+            if( grabbable ){
+              target.grabify();
+            }
           })
         ;
       }
+
+      function removeEventListeners(){
+        var handlers = data.handlers;
+
+        for( var i = 0; i < handlers.length; i++ ){
+          var h = handlers[i];
+
+          if( h.selector === 'core' ){
+            cy.off(h.events, h.fn);
+          } else {
+            cy.off(h.events, h.selector, h.fn);
+          }
+        }
+      }
+
+      function destroyInstance(){
+        removeEventListeners();
+
+        removeDomListeners();
+        $wrapper.remove();
+      }
         
       addEventListeners();
 
+      return {
+        destroy: function(){
+          destroyInstance();
+        }
+      };
+
     });
@@ -396,0 +468,0 @@

package.json

 {
   "name": "cytoscape-cxtmenu",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "A context menu for Cytoscape.js",
@@ -5,0 +5,0 @@ "main": "cytoscape-cxtmenu.js",

README.md

 cytoscape-cxtmenu
 ================================================================================
 
-![Preview](https://raw2.github.com/cytoscape/cytoscape.js-cxtmenu/master/img/preview.png)
+![Preview](https://raw.githubusercontent.com/cytoscape/cytoscape.js-cxtmenu/master/img/preview.png)
 
@@ -16,2 +16,3 @@ ## Description
  * Cytoscape.js >= 2.2
+ * jQuery >= 1.4
 
@@ -32,3 +33,3 @@
 var jquery = require('jquery');
-var cxtmenu = require('cxtmenu');
+var cxtmenu = require('cytoscape-cxtmenu');
 
@@ -40,3 +41,3 @@ cxtmenu( cytoscape, jquery ); // register extension
 ```js
-require(['cytoscape', 'cxtmenu', 'jquery'], function( cytoscape, cxtmenu, jquery ){
+require(['cytoscape', 'cytoscape-cxtmenu', 'jquery'], function( cytoscape, cxtmenu, jquery ){
   cxtmenu( cytoscape, jquery ); // register extension
@@ -46,3 +47,3 @@ });
 
-Note that `jquery` must point to a jQuery object with `.qtip()` registered if any sort of `require()` is used.
+Note that `jquery` must point to a jQuery object if any sort of `require()` is used.
 
@@ -52,2 +53,7 @@ Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed.
 
+## CSS
+
+You can style the font of the command text with the `cxtmenu-content` class.
+
+
 ## API
@@ -71,3 +77,3 @@
 		{ // example command
-			content: 'a command name' // html/text content to be displayed in the menu
+			content: 'a command name', // html/text content to be displayed in the menu
 			select: function(){ // a function to execute when the command is selected
@@ -92,5 +98,14 @@ console.log( this.id() ) // `this` holds the reference to the active element
 
-cy.cxtmenu( defaults );
+var cxtmenuApi = cy.cxtmenu( defaults );
+```
 
+You get access to the cxtmenu API as the returned value of calling the extension.  You can use this to clean up and destroy the menu instance:
 
+```js
+var cxtmenuApi = cy.cxtmenu( someOptions );
+
+cxtmenuApi.destroy();
+```
+
+
 ## Publishing instructions
@@ -97,0 +112,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

598281

increased by0.42%

Lines of code

1822

increased by3.35%

Number of lines in readme file

111

increased by15.63%

No dependency changes