From 1fb745a00174af5ce072fe7f85e980c0d8c1b27a Mon Sep 17 00:00:00 2001 From: Hoogkamer Date: Sun, 22 Dec 2019 22:29:03 +0100 Subject: [PATCH 1/6] Add option for taphold --- README.md | 4 ++++ cytoscape-context-menus.js | 18 ++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/README.md b/README.md index 1b2398a..dac180c 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,8 @@ Plain HTML/JS has the extension registered for you automatically, because no `re ## Default Options ```js var options = { + // Show menu on taphold + taphold: false, // List of initial menu items menuItems: [/* { @@ -124,6 +126,8 @@ An instance has a number of functions available: ```js instance.isActive(); // Returns whether the extension is active. +instance.setTaphold(boolean); // Show menu on taphold (true), or ignore taphold (false) + instance.appendMenuItem(item); // Appends given menu item to the menu items list. instance.appendMenuItems(items); // Appends menu items in the given list to the menu items list. diff --git a/cytoscape-context-menus.js b/cytoscape-context-menus.js index 15b477e..57ab445 100644 --- a/cytoscape-context-menus.js +++ b/cytoscape-context-menus.js @@ -7,6 +7,8 @@ if( !cytoscape ){ return; } // can't register if cytoscape unspecified var defaults = { + // Use taphold to bring up the context menu + taphold: false, // List of initial menu items menuItems: [ /* @@ -166,6 +168,15 @@ return; } + _cxtfcn(event); + }); + cy.on('taphold', cxtCoreFcn = function(event) { + if (!options.taphold) return + var target = event.target || event.cyTarget; + if( target != cy ) { + return; + } + _cxtfcn(event); }); } @@ -174,6 +185,10 @@ cy.on('cxttap', selector, cxtfcn = function(event) { _cxtfcn(event); }); + cy.on('taphold', selector, cxtfcn = function(event) { + if (!options.taphold) return + _cxtfcn(event); + }); } // Bind the event to menu item to be able to remove it back @@ -420,6 +435,9 @@ isActive: function() { return getScratchProp('active'); }, + setTaphold: function(value) { + options.taphold=value + }, // Appends given menu item to the menu items list. appendMenuItem: function(item) { createAndAppendMenuItemComponent(item); From 2d17a81e33cfeed20ab31bd6c8f76a3df74bc055 Mon Sep 17 00:00:00 2001 From: Hoogkamer Date: Tue, 24 Dec 2019 19:55:04 +0100 Subject: [PATCH 2/6] Add option for taphold, in stead of right-mouse --- README.md | 4 +--- cytoscape-context-menus.js | 27 +++++++-------------------- 2 files changed, 8 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index dac180c..d5da52e 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ Plain HTML/JS has the extension registered for you automatically, because no `re ## Default Options ```js var options = { - // Show menu on taphold + // Show menu on taphold in stead of right-mouse click taphold: false, // List of initial menu items menuItems: [/* @@ -126,8 +126,6 @@ An instance has a number of functions available: ```js instance.isActive(); // Returns whether the extension is active. -instance.setTaphold(boolean); // Show menu on taphold (true), or ignore taphold (false) - instance.appendMenuItem(item); // Appends given menu item to the menu items list. instance.appendMenuItems(items); // Appends menu items in the given list to the menu items list. diff --git a/cytoscape-context-menus.js b/cytoscape-context-menus.js index 57ab445..97ce67a 100644 --- a/cytoscape-context-menus.js +++ b/cytoscape-context-menus.js @@ -160,18 +160,10 @@ var cxtfcn; var cxtCoreFcn; - + var evtType=options.taphold?'taphold':'cxttap' if(coreAsWell) { - cy.on('cxttap', cxtCoreFcn = function(event) { - var target = event.target || event.cyTarget; - if( target != cy ) { - return; - } - - _cxtfcn(event); - }); - cy.on('taphold', cxtCoreFcn = function(event) { - if (!options.taphold) return + + cy.on(evtType, cxtCoreFcn = function(event) { var target = event.target || event.cyTarget; if( target != cy ) { return; @@ -182,11 +174,7 @@ } if(selector) { - cy.on('cxttap', selector, cxtfcn = function(event) { - _cxtfcn(event); - }); - cy.on('taphold', selector, cxtfcn = function(event) { - if (!options.taphold) return + cy.on(evtType, selector, cxtfcn = function(event) { _cxtfcn(event); }); } @@ -376,12 +364,14 @@ var selector = $component.data('selector'); var callOnClickFcn = $component.data('call-on-click-function'); var cxtCoreFcn = $component.data('cy-context-menus-cxtcorefcn'); - + if(cxtfcn) { + cy.off('taphold', selector, cxtfcn); cy.off('cxttap', selector, cxtfcn); } if(cxtCoreFcn) { + cy.off('taphold', cxtCoreFcn); cy.off('cxttap', cxtCoreFcn); } @@ -435,9 +425,6 @@ isActive: function() { return getScratchProp('active'); }, - setTaphold: function(value) { - options.taphold=value - }, // Appends given menu item to the menu items list. appendMenuItem: function(item) { createAndAppendMenuItemComponent(item); From 1d4858809dc39c32fa0548d33cfb21a1947f950e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hasan=20Balc=C4=B1?= Date: Wed, 25 Dec 2019 15:05:29 +0300 Subject: [PATCH 3/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d5da52e..4c68462 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ A Cytoscape.js extension to provide context menu around elements and core instan ## Demo -Click [here](https://ivis-at-bilkent.github.io/cytoscape.js-context-menus/demo.html) (simple) or [here](https://ivis-at-bilkent.github.io/cytoscape.js-context-menus/demo-customized.html) (customized) or [here](https://ivis-at-bilkent.github.io/cytoscape.js-context-menus/demo-show-hide-menuitem.html) (with different menu items) for demos +Click [here](https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-context-menus/unstable/demo.html) (simple) or [here](https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-context-menus/unstable/demo-customized.html) (customized) or [here](https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-context-menus/unstable/demo-show-hide-menuitem.html) (with different menu items) for demos ## Dependencies From bd4809f1c48c395184ff6e66c9a6a3798ddd34d7 Mon Sep 17 00:00:00 2001 From: ugurdogrusoz Date: Tue, 14 Jan 2020 11:11:37 +0300 Subject: [PATCH 4/6] Include citation --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 4c68462..5580261 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,10 @@ A Cytoscape.js extension to provide context menu around elements and core instan ![Image of extension](example.png) +Please cite the following paper when using this extension: + +U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "[Efficient methods and readily customizable libraries for managing complexity of large networks](https://doi.org/10.1371/journal.pone.0197238)", PLoS ONE, 13(5): e0197238, 2018. + ## Demo Click [here](https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-context-menus/unstable/demo.html) (simple) or [here](https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-context-menus/unstable/demo-customized.html) (customized) or [here](https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-context-menus/unstable/demo-show-hide-menuitem.html) (with different menu items) for demos From 5fb329e4f9a94f5e1392cb7105cb59cafb1880b5 Mon Sep 17 00:00:00 2001 From: l2d22 Date: Tue, 11 Feb 2020 09:32:56 -0800 Subject: [PATCH 5/6] feat(options): add event type option for user configuration --- cytoscape-context-menus.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/cytoscape-context-menus.js b/cytoscape-context-menus.js index 97ce67a..b160362 100644 --- a/cytoscape-context-menus.js +++ b/cytoscape-context-menus.js @@ -7,8 +7,9 @@ if( !cytoscape ){ return; } // can't register if cytoscape unspecified var defaults = { - // Use taphold to bring up the context menu - taphold: false, + // Customize event to bring up the context menu + // Possible options https://js.cytoscape.org/#events/user-input-device-events + evtType: 'cxttap', // List of initial menu items menuItems: [ /* @@ -160,10 +161,9 @@ var cxtfcn; var cxtCoreFcn; - var evtType=options.taphold?'taphold':'cxttap' if(coreAsWell) { - cy.on(evtType, cxtCoreFcn = function(event) { + cy.on(options.evtType, cxtCoreFcn = function(event) { var target = event.target || event.cyTarget; if( target != cy ) { return; @@ -174,7 +174,7 @@ } if(selector) { - cy.on(evtType, selector, cxtfcn = function(event) { + cy.on(options.evtType, selector, cxtfcn = function(event) { _cxtfcn(event); }); } @@ -366,13 +366,11 @@ var cxtCoreFcn = $component.data('cy-context-menus-cxtcorefcn'); if(cxtfcn) { - cy.off('taphold', selector, cxtfcn); - cy.off('cxttap', selector, cxtfcn); + cy.off(options.evtType, selector, cxtfcn); } if(cxtCoreFcn) { - cy.off('taphold', cxtCoreFcn); - cy.off('cxttap', cxtCoreFcn); + cy.off(options.evtType, cxtCoreFcn); } if(callOnClickFcn) { From c07735b6ded9c7a59be202406d85d881d399fcde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hasan=20Balc=C4=B1?= Date: Wed, 12 Feb 2020 16:18:16 +0300 Subject: [PATCH 6/6] Update README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5580261..4cbe162 100644 --- a/README.md +++ b/README.md @@ -66,8 +66,9 @@ Plain HTML/JS has the extension registered for you automatically, because no `re ## Default Options ```js var options = { - // Show menu on taphold in stead of right-mouse click - taphold: false, + // Customize event to bring up the context menu + // Possible options https://js.cytoscape.org/#events/user-input-device-events + evtType: 'cxttap', // List of initial menu items menuItems: [/* {