cytoscape-qtip - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

bower.json

 {
   "name": "cytoscape-qtip",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "main": "cytoscape-qtip.js",
@@ -18,10 +18,9 @@ "repository": {
     "cytoscape",
-    "cytoscape.js",
-    "cytoscapejs",
     "qtip",
     "extension",
     "popup",
-    "tooltip"
+    "tooltip",
+    "cyext"
   ],
   "license": "LGPL-3.0+"
 }

cytoscape-qtip.js

 ;(function( $, $$ ){ 'use strict';
-  
-  if( !$ ){
-    try {
-      $ = require('jquery');
-    } catch(e){
-      console.error('Cytoscape extension tried to pull in `jquery` via require() but failed');
-    }
-  }
 
-  if( !$$ ){
-    try {
-      $$ = require('cytoscape');
-    } catch(e){
-      console.error('Cytoscape extension tried to pull in `cytoscape` via require() but failed');
-    }
-  }
+  function register( $$, $ ){
 
-  // use a single dummy dom ele as target for every qtip
-  var $qtipContainer = $('<div></div>');
-  var viewportDebounceRate = 250;
+    // use a single dummy dom ele as target for every qtip
+    var $qtipContainer = $('<div></div>');
+    var viewportDebounceRate = 250;
 
-  function generateOpts( target, passedOpts ){
-    var qtip = target.scratch().qtip;
-    var opts = $.extend( {}, passedOpts );
+    function generateOpts( target, passedOpts ){
+      var qtip = target.scratch().qtip;
+      var opts = $.extend( {}, passedOpts );
 
-    if( !opts.id ){
-      opts.id = 'cy-qtip-target-' + ( Date.now() + Math.round( Math.random() * 10000) );
-    }
+      if( !opts.id ){
+        opts.id = 'cy-qtip-target-' + ( Date.now() + Math.round( Math.random() * 10000) );
+      }
 
-    if( !qtip.$domEle ){
-      qtip.$domEle = $qtipContainer;
-    }
+      if( !qtip.$domEle ){
+        qtip.$domEle = $qtipContainer;
+      }
 
-    // qtip should be positioned relative to cy dom container
-    opts.position = opts.position || {};
-    opts.position.container = opts.position.container || $( document.body );
-    opts.position.viewport = opts.position.viewport || $( document.body );
-    opts.position.target = [0, 0];
+      // qtip should be positioned relative to cy dom container
+      opts.position = opts.position || {};
+      opts.position.container = opts.position.container || $( document.body );
+      opts.position.viewport = opts.position.viewport || $( document.body );
+      opts.position.target = [0, 0];
 
-    // adjust
-    opts.position.adjust = opts.position.adjust || {};
-    opts.position.adjust.method = opts.position.adjust.method || 'flip';
-    opts.position.adjust.mouse = false;
+      // adjust
+      opts.position.adjust = opts.position.adjust || {};
+      opts.position.adjust.method = opts.position.adjust.method || 'flip';
+      opts.position.adjust.mouse = false;
 
-    // default show event
-    opts.show = opts.show || {};
+      // default show event
+      opts.show = opts.show || {};
 
-    if( !opts.show.event ){
-      opts.show.event = 'tap';
-    }
+      if( !opts.show.event ){
+        opts.show.event = 'tap';
+      }
 
-    // default hide event
-    opts.hide = opts.hide || {};
-    opts.hide.cyViewport = opts.hide.cyViewport === undefined ? true : opts.hide.cyViewport;
+      // default hide event
+      opts.hide = opts.hide || {};
+      opts.hide.cyViewport = opts.hide.cyViewport === undefined ? true : opts.hide.cyViewport;
 
-    if( !opts.hide.event ){
-      opts.hide.event = 'unfocus';
+      if( !opts.hide.event ){
+        opts.hide.event = 'unfocus';
+      }
+
+      // so multiple qtips can exist at once (only works on recent qtip2 versions)
+      opts.overwrite = false;
+
+      var content;
+      if( opts.content ){
+        if( $$.is.fn(opts.content) ){
+          content = opts.content;
+        } else if( opts.content.text && $$.is.fn(opts.content.text) ){
+          content = opts.content.text;
+        }
+
+        if( content ){
+          opts.content = function(event, api){
+            return content.apply( target, [event, api] );
+          };
+        }
+      }
+
+      return opts;
     }
 
-    // so multiple qtips can exist at once (only works on recent qtip2 versions)
-    opts.overwrite = false;
+    $$('collection', 'qtip', function( passedOpts ){
+      var eles = this;
+      var cy = this.cy();
+      var container = cy.container();
 
-    var content;
-    if( opts.content ){
-      if( $$.is.fn(opts.content) ){
-        content = opts.content;
-      } else if( opts.content.text && $$.is.fn(opts.content.text) ){
-        content = opts.content.text;
+      if( passedOpts === 'api' ){
+        return this.scratch().qtip.api;
       }
 
-      if( content ){
-        opts.content = function(event, api){
-          return content.apply( target, [event, api] );
+      eles.each(function(i, ele){
+        var scratch = ele.scratch();
+        var qtip = scratch.qtip = scratch.qtip || {};
+        var opts = generateOpts( ele, passedOpts );
+
+
+        qtip.$domEle.qtip( opts );
+        var qtipApi = qtip.api = qtip.$domEle.qtip('api'); // save api ref
+        qtip.$domEle.removeData('qtip'); // remove qtip dom/api ref to be safe
+
+        var updatePosition = function(e){
+          var cOff = container.getBoundingClientRect();
+          var pos = ele.renderedPosition() || ( e ? e.cyRenderedPosition : undefined );
+          if( !pos || pos.x == null || isNaN(pos.x) ){ return; }
+
+          qtipApi.set('position.adjust.x', cOff.left + pos.x + window.pageXOffset);
+          qtipApi.set('position.adjust.y', cOff.top + pos.y + window.pageYOffset);
         };
-      }
-    }
+        updatePosition();
 
-    return opts;
-  }
+        ele.on( opts.show.event, function(e){
+          updatePosition(e);
 
-  $$('collection', 'qtip', function( passedOpts ){
-    var eles = this;
-    var cy = this.cy();
-    var container = cy.container();
+          qtipApi.show();
+        } );
 
-    if( passedOpts === 'api' ){
-      return this.scratch().qtip.api;
-    }
+        ele.on( opts.hide.event, function(e){
+          qtipApi.hide();
+        } );
 
-    eles.each(function(i, ele){
-      var scratch = ele.scratch();
+        if( opts.hide.cyViewport ){
+          cy.on('viewport', $$.util.debounce(function(){
+            qtipApi.hide();
+          }, viewportDebounceRate, { leading: true }) );
+        }
+
+        if( opts.position.adjust.cyViewport ){
+          cy.on('pan zoom', $$.util.debounce(function(e){
+            updatePosition(e);
+
+            qtipApi.reposition();
+          }, viewportDebounceRate, { trailing: true }) );
+        }
+
+      });
+
+      return this; // chainability
+      
+    });
+
+    $$('core', 'qtip', function( passedOpts ){
+      var cy = this;
+      var container = cy.container();
+
+      if( passedOpts === 'api' ){
+        return this.scratch().qtip.api;
+      }
+
+      var scratch = cy.scratch();
       var qtip = scratch.qtip = scratch.qtip || {};
-      var opts = generateOpts( ele, passedOpts );
+      var opts = generateOpts( cy, passedOpts );
 
-
+   
       qtip.$domEle.qtip( opts );
@@ -103,3 +146,3 @@ var qtipApi = qtip.api = qtip.$domEle.qtip('api'); // save api ref
         var cOff = container.getBoundingClientRect();
-        var pos = ele.renderedPosition() || ( e ? e.cyRenderedPosition : undefined );
+        var pos = e.cyRenderedPosition;
         if( !pos || pos.x == null || isNaN(pos.x) ){ return; }
@@ -110,12 +153,15 @@
       };
-      updatePosition();
 
-      ele.on( opts.show.event, function(e){
-        updatePosition(e);
+      cy.on( opts.show.event, function(e){
+        if( !opts.show.cyBgOnly || (opts.show.cyBgOnly && e.cyTarget === cy) ){
+          updatePosition(e);
 
-        qtipApi.show();
+          qtipApi.show();
+        }
       } );
 
-      ele.on( opts.hide.event, function(e){
-        qtipApi.hide();
+      cy.on( opts.hide.event, function(e){
+        if( !opts.hide.cyBgOnly || (opts.hide.cyBgOnly && e.cyTarget === cy) ){
+          qtipApi.hide();
+        }
       } );
@@ -129,66 +175,22 @@
 
-      if( opts.position.adjust.cyViewport ){
-        cy.on('pan zoom', $$.util.debounce(function(e){
-          updatePosition(e);
-
-          qtipApi.reposition();
-        }, viewportDebounceRate, { trailing: true }) );
-      }
-
+      return this; // chainability
+      
     });
 
-    return this; // chainability
-    
-  });
+  }
 
-  $$('core', 'qtip', function( passedOpts ){
-    var cy = this;
-    var container = cy.container();
+  if( typeof module !== 'undefined' && module.exports ){ // expose as a commonjs module
+    module.exports = register;
+  }
 
-    if( passedOpts === 'api' ){
-      return this.scratch().qtip.api;
-    }
+  if( typeof define !== 'undefined' && define.amd ){ // expose as an amd/requirejs module
+    define('cytoscape-qtip', function(){
+      return register;
+    });
+  }
 
-    var scratch = cy.scratch();
-    var qtip = scratch.qtip = scratch.qtip || {};
-    var opts = generateOpts( cy, passedOpts );
-
- 
-    qtip.$domEle.qtip( opts );
-    var qtipApi = qtip.api = qtip.$domEle.qtip('api'); // save api ref
-    qtip.$domEle.removeData('qtip'); // remove qtip dom/api ref to be safe
-
-    var updatePosition = function(e){
-      var cOff = container.getBoundingClientRect();
-      var pos = e.cyRenderedPosition;
-      if( !pos || pos.x == null || isNaN(pos.x) ){ return; }
-
-      qtipApi.set('position.adjust.x', cOff.left + pos.x + window.pageXOffset);
-      qtipApi.set('position.adjust.y', cOff.top + pos.y + window.pageYOffset);
-    };
-
-    cy.on( opts.show.event, function(e){
-      if( !opts.show.cyBgOnly || (opts.show.cyBgOnly && e.cyTarget === cy) ){
-        updatePosition(e);
-
-        qtipApi.show();
-      }
-    } );
-
-    cy.on( opts.hide.event, function(e){
-      if( !opts.hide.cyBgOnly || (opts.hide.cyBgOnly && e.cyTarget === cy) ){
-        qtipApi.hide();
-      }
-    } );
-
-    if( opts.hide.cyViewport ){
-      cy.on('viewport', $$.util.debounce(function(){
-        qtipApi.hide();
-      }, viewportDebounceRate, { leading: true }) );
-    }
-
-    return this; // chainability
-    
-  });
+  if( $ && $$ ){
+    register( $$, $ );
+  }
   
 })( jQuery, cytoscape );

package.json

 {
   "name": "cytoscape-qtip",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A Cytoscape.js extension that wraps the qTip jQuery library",
@@ -15,8 +15,7 @@ "main": "cytoscape-qtip.js",
     "cytoscape",
-    "cytoscape.js",
-    "cytoscapejs",
     "qtip",
     "extension",
     "popup",
-    "tooltip"
+    "tooltip",
+    "cyext"
   ],
@@ -23,0 +22,0 @@ "license": "LGPL-3.0+",

README.md

@@ -20,2 +20,32 @@ cytoscape-qtip
 
+## Usage instructions
+
+Download the library:
+ * via npm: `npm install cytoscape-qtip`,
+ * via bower: `bower install cytoscape-qtip`, or
+ * via direct download in the repository (probably from a tag).
+
+`require()` the library as appropriate for your project:
+
+CommonJS:
+```js
+var cytoscape = require('cytoscape');
+var jquery = require('jquery');
+var cyqtip = require('cytoscape-qtip');
+
+cyqtip( cytoscape, jquery ); // register extension
+```
+
+AMD:
+```js
+require(['cytoscape', 'cytoscape-qtip', 'jquery'], function( cytoscape, cyqtip, jquery ){
+  cyqtip( cytoscape, jquery ); // register extension
+});
+```
+
+Note that `jquery` must point to a jQuery object with `.qtip()` registered if any sort of `require()` is used.
+
+Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed.
+
+
 ## API
@@ -22,0 +52,0 @@

No alert changes

Improved metrics

Total package byte prevSize

26638

increased by4.09%

Number of lines in readme file

95

increased by46.15%

Worsened metrics

Lines of code

246

decreased by-0.81%

No dependency changes