velge - npm Package Compare versions

Comparing version 0.9.4 to 1.0.0-alpha

bower.json

 {
   "name": "velge",
-  "version": "0.9.4",
-  "main": "velge.js",
-  "dependencies": {
-    "jquery": "~2"
-  },
-  "devDependencies": {
-    "chai":        "~1.7",
-    "chai-jquery": "~1.1",
-    "mocha":       "~1.12",
-    "sinon":       "http://sinonjs.org/releases/sinon-1.7.1.js"
-  }
+  "version": "1.0.0-alpha",
+  "main": "dist/velge.js",
+  "ignore": [
+    ".jshintrc",
+    "karma.conf.js",
+    "modules/**/*.js",
+    "scripts/*",
+    "test/**/*.js"
+  ]
 }

CHANGELOG.md

@@ -0,1 +1,21 @@
+# Unreleased
+
+* Entire library is vanilla javascript, no more coffeescript.
+* Modular build process using browserify, emits a UMD compatible top level
+  module.
+* No more jquery dependency.
+* Testing is now run headlessly with karma.
+* There aren't any more callbacks, everything is event based now. This is how
+  the events break down:
+
+  * onAdd -> 'choose'
+  * onRem -> 'reject'
+  * onBlur -> 'blur'
+  * onFocus -> 'focus'
+
+# v0.10.0
+
+* Passing `{ silent: true }` to `addChosen` or `remChosen` avoids triggering
+  any registered callbacks.
+
 # v0.9.4
@@ -2,0 +22,0 @@

package.json

 {
   "name": "velge",
-  "version": "0.9.4",
+  "version": "1.0.0-alpha",
+  "author": "Dscout, Inc",
   "description": "Nimble autocompleting tag management",
-  "main": "velge.js",
+  "main": "modules/index.js",
+  "scripts": {
+    "build": "scripts/build",
+    "test": "scripts/test --single-run",
+    "lint": "scripts/lint"
+  },
   "repository": {
@@ -10,16 +16,17 @@ "type": "git",
   },
-  "author": "Dscout, inc",
   "license": "MIT",
   "devDependencies": {
-    "grunt": "~0.4.1",
-    "grunt-contrib-coffee": "~0.7.0",
-    "grunt-contrib-uglify": "~0.2.2",
-    "grunt-contrib-watch": "~0.5.2",
-    "grunt-lib-phantomjs": "~0.3.1",
-    "grunt-mocha": "~0.4.1",
-    "grunt-umd": "~1.7.4"
-  },
-  "dependencies": {
-    "jquery": "~2"
+    "browserify": "^4",
+    "chai": "^1.9.2",
+    "jshint": "^2.5.6",
+    "karma": "^0.12.24",
+    "karma-browserify": "^0.2.1",
+    "karma-chai-sinon": "^0.1.3",
+    "karma-firefox-launcher": "^0.1.3",
+    "karma-mocha": "^0.1.9",
+    "mocha": "^1.21.5",
+    "sinon": "^1.10.3",
+    "sinon-chai": "^2.6.0",
+    "uglify-js": "^2.4.15"
   }
 }

README.md

@@ -1,2 +0,3 @@
-[![Build Status](https://travis-ci.org/dscout/velge.png?branch=master)](https://travis-ci.org/dscout/velge)
+[![Build Status](https://travis-ci.org/dscout/velge.svg?branch=master)](https://travis-ci.org/dscout/velge)
+[![NPM version](https://badge.fury.io/js/velge.svg)](http://badge.fury.io/js/velge)
 
@@ -10,13 +11,12 @@ # Velge (ch•oose)
 
-Velge is a nimble tag management widget. It is written in CoffeeScript, fully
-tested with Mocha, depends only on jQuery, and can be installed via Bower. If
-you have ever wanted a tag widget similar to label management in Pivotal
-Tracker, velge is it.
+Velge is a nimble tag management widget. It is written in pure javascript, has
+no dependencies, is fully tested with Mocha, and can be installed via NPM or
+Bower.
 
 Some of the features:
 
-* Automatic sorting, validation, normalization
-* Fuzzy pattern matching
-* Keyboard shortcuts for submission, removal, and navigation
-* Very simple callback hooks for addition and removal
+* Event emission for all state and ui events.
+* Fuzzy pattern matching for searching.
+* Customizable sorting, validation, normalization.
+* Keyboard shortcuts for navigation, quick submission, and removal.
 
@@ -29,6 +29,6 @@ The library is very lightweight and constructed in a way that allows for easy
 
-The simplest way is via bower:
+The simplest way is through NPM:
 
 ```bash
-bower install velge
+npm install velge --save
 ```
@@ -39,6 +39,13 @@
 ```html
-<link href="/bower_components/velge/velge.css" rel="stylesheet" type="text/css">
-<script src="/bower_components/velge/velge.min.js"></script>
+<link href="/node_modules/velge/dist/velge.css" rel="stylesheet" type="text/css">
+<script src="/node_modules/velge/dist/velge.min.js"></script>
 ```
 
+If you prefer to import velge directly you can import it directly through
+CommonJS:
+
+```javascript
+var velge = require('velge');
+```
+
 ## Usage
@@ -55,8 +62,7 @@
 ```javascript
-var velge = new Velge($('.container'), {
-  dropdownOffset: 42,
-  onBlur:         blurCallback
-  onFocus:        focusCallback
-  placeholder:    'Choose'
-}).setup()
+var container = document.getElementById('container');
+
+var velge = new Velge(container, {
+  placeholder: 'Choose'
+});
 ```
@@ -67,39 +73,22 @@
 
-## Example
-
-There is an example page that sets up a few instances of velge to play with.
-jQuery must be installed via bower for the examples to operate:
-
-```bash
-bower install jquery
-```
-
-Alernativly you can swap in jquery from a CDN if you don't have bower installed:
-
-```html
-<!-- replace this -->
-<script src="../bower_components/jquery/jquery.js"></script>
-
-<!-- with this -->
-<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
-```
-
 ### Loading Tags
 
 All tag matching is performed locally. As such you must load in all possible
-choices and an optional set of applied choices:
+choices and an optional set of chosen values:
 
 ```javascript
 velge
-  .addChosen({ name: "Apple" })
-  .addChosen({ name: "Juicy" })
+  .add({ name: 'orange' })
+  .add({ name: 'berry' })
+  .add({ name: 'tangy' });
 
 velge
-  .addChoice({ name: "Orange" })
-  .addChoice({ name: "Berry" })
-  .addChoice({ name: "Tangy" })
+  .choose({ name: 'apple' })
+  .choose({ name: 'juicy' });
+
+// Choices: 'orange', 'berry', 'tangy', 'apple', 'juicy'
 ```
 
-Tag objects can be anything that have a "name" property or method. Whatever
-object is loaded is what will be passed to any callbacks.
+Tag objects can be anything that have a "name" property. Whatever object is
+loaded is what will be passed to any callbacks.
 
@@ -110,12 +99,12 @@ It isn't always tidy to add choices and chosen separately. For convenience they can
 ```javascript
-new Velge($selector,
+new Velge(element, {
   choices: [
-    { name: "apple"  },
-    { name: "pear"   },
-    { name: "quince" }
+    { name: 'macintosh' },
+    { name: 'cortland' }
   ],
   chosen: [
-    { name: "kiwi" }
+    { name: 'jonagold' },
+    { name: 'snow sweet' }
   ]
-).setup()
+});
 ```
@@ -125,13 +114,11 @@
 
-The velge instance exposes hooks for persisting changes after tags have been
-added or removed:
+The velge instance emits events for persisting changes after tags have been
+added, chosen, rejected, or deleted.
 
 ```javascript
-var addCallback = function(choice, velge) { /* Persist Me */ }
-  , remCallback = function(choice, velge) { /* Destroy Me */ }
-  , context     = this;
-
 velge
-  .onAdd(addCallback, context)
-  .onRem(remCallback, context)
+  .on('add',    function(object) { console.log('added', object) })
+  .on('choose', function(object) { console.log('chose', object) })
+  .on('reject', function(object) { console.log('reject', object) })
+  .on('delete', function(object) { console.log('deleted', object) });
 ```
@@ -143,14 +130,49 @@
 ```javascript
-var chosen = velge.getChosen(),
-  , names  = chosen.map(function(choice) { return choice.name });
+var chosen = velge.getChosen();
+var names  = chosen.map(function(choice) { return choice.name });
 ```
 
-### Single Mode
+### Other Events
 
+Sometimes it is helpful to be notified of DOM level events within velge.
+Currently velge provides focus events which are bubbled up from the input area.
+
+```javascript
+velge
+  .on('focus', function(event) { console.log('has focus'); })
+  .on('blur',  function(event) { console.log('lost focus'); })
+```
+
+### Sorting
+
+By default choices will be displayed in the order they were added. It is
+possible to specify a sorting behavior during construction, or afterwards:
+
+```javascript
+var comparitor = function(a, b) {
+  if (a.name > b.name)      { return 1;  }
+  else if (a.name < b.name) { return -1; }
+  else                      { return 0;  }
+};
+
+var velge = new Velge(element, {
+  comparitor: comparitor
+})
+
+// Setting options will trigger an immediate re-sort
+velge.setOptions({ comparitor: function(a, b) {
+  if (a.createdAt > b.createdAt)      { return 1;  }
+  else if (a.createdAt < b.createdAt) { return -1; }
+  else                                { return 0;  }
+});
+```
+
+### Limitation Mode
+
 While velge is designed as an interface for applying multiple "tags" to a
-resource it can also operate in single mode. Under single mode only the most
-recent tag will be kept, all others will be unchosen.
+resource it can also operate in single, limitation, mode. Under single mode only
+the most recent tag will be kept, all others will be unchosen.
 
 ```javascript
-var velge = new Velge($('.container'), { single: true })
+var velge = new Velge(element, { limitation: true })
 ```
@@ -165,3 +187,3 @@
 ```javascript
-var addCallback = function(choice, velge) {
+var addCallback = function(choice) {
   $.ajax({
@@ -172,5 +194,5 @@ data: choice,
   }).fail(function(error) {
-    velge.remChosen(choice);
+    velge.reject(choice);
   })
-}
+};
 ```
@@ -180,20 +202,14 @@
 
-The project is built via [Grunt](http://gruntjs.com) and depdends on packages
-installed with [Bower](http://bower.io). To contribute you'll need both
-packages installed along with all required bower components.
+The project is built with modules from NPM. Simply run:
 
 ```bash
-npm install -g grunt-cli
-npm install -g bower
 npm install
-bower install --dev
 ```
 
-Once grunt, grunt-contrib, and bower components are installed you're all set to
-compile, test, or release (compile minified).
+Once all modules are installed you're all set to test, lint, or build.
 
 ```bash
-grunt         # compile, test
-grunt release # compile, test, minify
-grunt watch   # compile lib and test on any change
+npm run test  # scripts/test
+npm run lint  # scripts/lint
+npm run build # scripts/build
 ```
@@ -200,0 +216,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 6 instances in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93187

increased by20.66%

Dependency count

0

decreased by-100%

Number of package files

36

increased by80%

Lines of code

2029

increased by143.29%

Number of lines in readme file

209

increased by8.29%

Worsened metrics

Dev dependency count

12

increased by71.43%

Number of low supply chain risk alerts

11

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedjquery@~2

• - Removedjquery@2.2.4(transitive)