autocomplete.js - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

CHANGELOG.md

@@ -19,2 +19,7 @@ Changelog
 
+### 0.7.0 Sep 16, 2015
+
+* New standalone build (including Zepto.js)
+* Get rid of lodash-compat and use jQuery, Zepto or Angular.js's helper functions
+
 ### 0.6.0 Sep 11, 2015
@@ -21,0 +26,0 @@

Gruntfile.js

@@ -17,2 +17,20 @@ 'use strict';
 
+    uglify: {
+      options: {
+        banner: '<%= banner %>'
+      },
+      jquery: {
+        src: '<%= buildDir %>/autocomplete.jquery.js',
+        dest: '<%= buildDir %>/autocomplete.jquery.min.js'
+      },
+      angular: {
+        src: '<%= buildDir %>/autocomplete.angular.js',
+        dest: '<%= buildDir %>/autocomplete.angular.min.js'
+      },
+      standalone: {
+        src: '<%= buildDir %>/autocomplete.js',
+        dest: '<%= buildDir %>/autocomplete.min.js'
+      },
+    },
+
     browserify: {
@@ -26,9 +44,2 @@ options: {
       },
-      jqueryMinified: {
-        options: {
-          plugin: [['minifyify', {map: false}]]
-        },
-        src: 'index_jquery.js',
-        dest: '<%= buildDir %>/autocomplete.jquery.min.js'
-      },
       angular: {
@@ -38,8 +49,5 @@ src: 'index_angular.js',
       },
-      angularMinified: {
-        options: {
-          plugin: [['minifyify', {map: false}]]
-        },
-        src: 'index_angular.js',
-        dest: '<%= buildDir %>/autocomplete.angular.min.js'
+      standalone: {
+        src: 'index_standalone.js',
+        dest: '<%= buildDir %>/autocomplete.js'
       }
@@ -97,3 +105,3 @@ },
   grunt.registerTask('default', 'build');
-  grunt.registerTask('build', ['browserify', 'sed:version']);
+  grunt.registerTask('build', ['browserify', 'sed:version', 'uglify']);
   grunt.registerTask('server', 'connect:server');
@@ -117,3 +125,2 @@ grunt.registerTask('lint', 'eslint');
   grunt.loadNpmTasks('grunt-browserify');
-  grunt.loadNpmTasks('grunt-minifyify');
 };

package.json

@@ -19,5 +19,5 @@ {
   "devDependencies": {
+    "@algolia/jsfmt": "1.3.0",
     "angular": "~1.4.2",
     "angular-mocks": "^1.4.2",
-    "@algolia/jsfmt": "1.3.0",
     "browserify-istanbul": "^0.2.1",
@@ -36,6 +36,5 @@ "chai": "^3.0.0",
     "grunt-contrib-connect": "~0.10.1",
-    "grunt-contrib-uglify": "~0.9.1",
+    "grunt-contrib-uglify": "^0.9.2",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-exec": "~0.4.6",
-    "grunt-minifyify": "^3.2.1",
     "grunt-sed": "~0.1.1",
@@ -55,19 +54,19 @@ "grunt-step": "~0.2.0",
     "karma-safari-launcher": "^0.1.1",
-    "lodash-compat": "3.10.0",
-    "minifyify": "^7.0.2",
     "mocha": "^2.2.5",
+    "npm-zepto": "^1.1.7",
     "phantomjs": "~1.9.17",
-    "yiewd": "^0.6.0"
+    "yiewd": "^0.6.0",
+    "zepto": "0.0.4"
   },
   "scripts": {
-    "test": "./node_modules/karma/bin/karma start --single-run && grunt lint && npm run checkstyle",
+    "build": "grunt",
+    "checkstyle": "npm run jsfmt -- --diff",
     "dev": "grunt dev",
+    "jsfmt": "jsfmt '!(node_modules|dist|coverage){,/**/}*.js'",
     "lint": "grunt lint",
-    "jsfmt": "jsfmt '!(node_modules|dist|coverage){,/**/}*.js'",
-    "checkstyle": "npm run jsfmt -- --diff",
     "server": "grunt server",
-    "build": "grunt"
+    "test": "./node_modules/karma/bin/karma start --single-run && grunt lint && npm run checkstyle"
   },
-  "version": "0.6.0",
+  "version": "0.7.0",
   "main": "index.js"
 }

README.md

 Autocomplete.js
 =================
 
-This JavaScript library adds a fast and fully-featured auto-completion menu to your search box displaying results "as you type". It can easily be combined with Algolia's realtime search engine. The library is available as a jQuery plugin or an Angular.js directive.
+This JavaScript library adds a fast and fully-featured auto-completion menu to your search box displaying results "as you type". It can easily be combined with Algolia's realtime search engine. The library is available as a jQuery plugin, an Angular.js directive or a standalone library.
 
@@ -44,3 +44,3 @@ [![build status](https://travis-ci.org/algolia/algoliasearch-client-node.svg?branch=master)](http://travis-ci.org/algolia/autocomplete.js)
 
-The `autocomplete.js` library must be included **after** jQuery and/or Angular.js.
+The `autocomplete.js` library must be included **after** jQuery, Zepto or Angular.js.
 
@@ -54,2 +54,4 @@ #### From a CDN
 ```html
+<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
+<!-- OR -->
 <script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
@@ -63,2 +65,4 @@ <!-- OR -->
 ```html
+<script src="//cdnjs.cloudflare.com/ajax/libs/autocomplete.js/<VERSION>/autocomplete.min.js"></script>
+<!-- OR -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/autocomplete.js/<VERSION>/autocomplete.jquery.min.js"></script>
@@ -75,3 +79,3 @@ <!-- OR -->
 
-You can find the builded version in [dist/](https://github.com/algolia/autocomplete.js/tree/feature/angular.js/dist).
+You can find the builded version in [dist/](https://github.com/algolia/autocomplete.js/tree/master/dist).
 
@@ -93,2 +97,32 @@ ##### Browserify
 
+##### Standalone
+
+ 1. Include `autocomplete.min.js`
+ 1. Initialize the auto-completion menu calling the `autocomplete` function
+
+```html
+<input type="text" id="search-input" />
+
+<!-- [ ... ] -->
+<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
+<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
+<script>
+  var client = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey')
+  var index = client.initIndex('YourIndex');
+  autocomplete('#search-input', { hint: false }, [
+    {
+      source: index.ttAdapter({ hitsPerPage: 5 }),
+      displayKey: 'my_attribute',
+      templates: {
+        suggestion: function(suggestion) {
+          return suggestion._highlightResult.my_attribute.value;
+        }
+      }
+    }
+  ]).on('autocomplete:selected', function(even, suggestion, dataset) {
+    console.log(suggestion, dataset);
+  });
+</script>
+```
+
 ##### With jQuery
@@ -231,2 +265,4 @@
 
+* `autoselect` – If `true`, pressing `<ENTER>` in the search bar will automatically select the first suggestion.
+
 * `hint` – If `false`, the autocomplete will not show a hint. Defaults to `true`.
@@ -233,0 +269,0 @@

src/angular/directive.js

@@ -5,2 +5,18 @@ 'use strict';
 
+// setup DOM element
+var DOM = require('../common/dom.js');
+DOM.element = angular.element;
+
+// setup utils functions
+var _ = require('../common/utils.js');
+_.isArray = angular.isArray;
+_.isFunction = angular.isFunction;
+_.isObject = angular.isObject;
+_.bind = angular.element.proxy;
+_.each = angular.forEach;
+_.map = angular.element.map;
+_.mixin = angular.extend;
+
+////////////////////////
+
 var EventBus = require('../autocomplete/event_bus.js');
@@ -7,0 +23,0 @@ var Typeahead = require('../autocomplete/typeahead.js');

src/autocomplete/dataset.js

@@ -8,2 +8,3 @@ 'use strict';
 var _ = require('../common/utils.js');
+var DOM = require('../common/dom.js');
 var html = require('./html.js');
@@ -40,3 +41,4 @@ var css = require('./css.js');
   this.$el = o.$menu && this.name && o.$menu.find('.aa-dataset-' + this.name).length > 0 ?
-    $(o.$menu.find('.aa-dataset-' + this.name)[0]) : $(html.dataset.replace('%CLASS%', this.name));
+    DOM.element(o.$menu.find('.aa-dataset-' + this.name)[0]) :
+    DOM.element(html.dataset.replace('%CLASS%', this.name));
 
@@ -50,11 +52,11 @@ this.$menu = o.$menu;
 Dataset.extractDatasetName = function extractDatasetName(el) {
-  return $(el).data(datasetKey);
+  return DOM.element(el).data(datasetKey);
 };
 
 Dataset.extractValue = function extractDatum(el) {
-  return $(el).data(valueKey);
+  return DOM.element(el).data(valueKey);
 };
 
 Dataset.extractDatum = function extractDatum(el) {
-  return $(el).data(datumKey);
+  return DOM.element(el).data(datumKey);
 };
@@ -111,3 +113,3 @@
 
-      $suggestions = $(html.suggestions).css(css.suggestions);
+      $suggestions = DOM.element(html.suggestions).css(css.suggestions);
 
@@ -124,9 +126,9 @@ // jQuery#append doesn't support arrays as the first argument
 
-        $el = $(html.suggestion)
+        $el = DOM.element(html.suggestion)
           .append(that.templates.suggestion.apply(this, [suggestion].concat(args)))
           .data(datasetKey, that.name)
-          .data(valueKey, that.displayFn(suggestion))
+          .data(valueKey, that.displayFn(suggestion) || null)
           .data(datumKey, suggestion);
 
-        $el.children().each(function() { $(this).css(css.suggestionChild); });
+        $el.children().each(function() { DOM.element(this).css(css.suggestionChild); });
 
@@ -133,0 +135,0 @@ return $el;

src/autocomplete/dropdown.js

 'use strict';
 
 var _ = require('../common/utils.js');
+var DOM = require('../common/dom.js');
 var EventEmitter = require('./event_emitter.js');
@@ -27,3 +28,3 @@ var Dataset = require('./dataset.js');
   if (!o.datasets) {
-    $.error('datasets is required');
+    _.error('datasets is required');
   }
@@ -39,3 +40,3 @@
 
-  this.$menu = $(o.menu)
+  this.$menu = DOM.element(o.menu)
     .on('click.aa', '.aa-suggestion', onSuggestionClick)
@@ -71,3 +72,3 @@ .on('mouseenter.aa', '.aa-suggestion', onSuggestionMouseEnter)
   _onSuggestionClick: function onSuggestionClick($e) {
-    this.trigger('suggestionClicked', $($e.currentTarget));
+    this.trigger('suggestionClicked', DOM.element($e.currentTarget));
   },
@@ -77,3 +78,3 @@
     this._removeCursor();
-    this._setCursor($($e.currentTarget), true);
+    this._setCursor(DOM.element($e.currentTarget), true);
   },
@@ -80,0 +81,0 @@

src/autocomplete/event_bus.js

@@ -6,2 +6,3 @@ 'use strict';
 var _ = require('../common/utils.js');
+var DOM = require('../common/dom.js');
 
@@ -16,3 +17,3 @@ // constructor
 
-  this.$el = $(o.el);
+  this.$el = DOM.element(o.el);
 }
@@ -19,0 +20,0 @@

src/autocomplete/input.js

@@ -16,2 +16,3 @@ 'use strict';
 var _ = require('../common/utils.js');
+var DOM = require('../common/dom.js');
 var EventEmitter = require('./event_emitter.js');
@@ -41,4 +42,4 @@
 
-  this.$hint = $(o.hint);
-  this.$input = $(o.input)
+  this.$hint = DOM.element(o.hint);
+  this.$input = DOM.element(o.input)
     .on('blur.aa', onBlur)
@@ -292,3 +293,3 @@ .on('focus.aa', onFocus)
 function buildOverflowHelper($input) {
-  return $('<pre aria-hidden="true"></pre>')
+  return DOM.element('<pre aria-hidden="true"></pre>')
     .css({
@@ -295,0 +296,0 @@ // position helper off-screen

src/autocomplete/typeahead.js

@@ -6,2 +6,3 @@ 'use strict';
 var _ = require('../common/utils.js');
+var DOM = require('../common/dom.js');
 var EventBus = require('./event_bus.js');
@@ -44,4 +45,2 @@ var Input = require('./input.js');
   $input.on('blur.aa', function($e) {
-    var active;
-
     var active = document.activeElement;
@@ -368,4 +367,4 @@ if (_.isMsie() && ($menu.is(active) || $menu.has(active).length > 0)) {
 
-  $input = $(options.input);
-  $wrapper = $(html.wrapper).css(css.wrapper);
+  $input = DOM.element(options.input);
+  $wrapper = DOM.element(html.wrapper).css(css.wrapper);
   // override the display property with the table-cell value
@@ -377,3 +376,3 @@ // if the parent element is a table and the original input was a block
   }
-  $dropdown = $(html.dropdown).css(css.dropdown);
+  $dropdown = DOM.element(html.dropdown).css(css.dropdown);
   if (options.templates && options.templates.dropdownMenu) {
@@ -380,0 +379,0 @@ $dropdown.html(_.templatify(options.templates.dropdownMenu)());

src/common/utils.js

 'use strict';
 
+var DOM = require('./dom.js');
+
 module.exports = {
+  // those methods are implemented differently
+  // depending on which build it is, using
+  // $... or angular... or Zepto... or require(...)
+  isArray: null,
+  isFunction: null,
+  isObject: null,
+  bind: null,
+  each: null,
+  map: null,
+  mixin: null,
+
   isMsie: function() {
@@ -17,8 +30,2 @@ // from https://github.com/ded/bowser/blob/master/bowser.js
 
-  isArray: require('lodash-compat/lang/isArray'),
-
-  isFunction: require('lodash-compat/lang/isFunction'),
-
-  isObject: require('lodash-compat/lang/isPlainObject'),
-
   toStr: function toStr(s) {
@@ -28,10 +35,2 @@ return s === undefined || s === null ? '' : s + '';
 
-  bind: require('lodash-compat/function/bind'),
-
-  each: require('lodash-compat/collection/forEach'),
-
-  map: require('lodash-compat/collection/map'),
-
-  filter: require('lodash-compat/collection/filter'),
-
   error: function(msg) {
@@ -41,6 +40,16 @@ throw new Error(msg);
 
-  every: require('lodash-compat/collection/every'),
+  every: function(obj, test) {
+    var result = true;
+    if (!obj) {
+      return result;
+    }
+    this.each(obj, function(val, key) {
+      result = test.call(null, val, key, obj);
+      if (!result) {
+        return false;
+      }
+    });
+    return !!result;
+  },
 
-  mixin: require('lodash-compat/object/assign'),
-
   getUniqueId: (function() {
@@ -52,8 +61,6 @@ var counter = 0;
   templatify: function templatify(obj) {
-    var isFunction = require('lodash-compat/lang/isFunction');
-
-    if (isFunction(obj)) {
+    if (this.isFunction(obj)) {
       return obj;
     }
-    var $template = $(obj);
+    var $template = DOM.element(obj);
     if ($template.prop('tagName') === 'SCRIPT') {
@@ -60,0 +67,0 @@ return function template() { return $template.text(); };

src/jquery/plugin.js

 'use strict';
 
+// setup DOM element
+var DOM = require('../common/dom.js');
+DOM.element = $;
+
+// setup utils functions
 var _ = require('../common/utils.js');
+_.isArray = $.isArray;
+_.isFunction = $.isFunction;
+_.isObject = $.isPlainObject;
+_.bind = $.proxy;
+_.each = function(collection, cb) {
+  // stupid argument order for jQuery.each
+  $.each(collection, reverseArgs);
+  function reverseArgs(index, value) {
+    return cb(value, index);
+  }
+};
+_.map = $.map;
+_.mixin = $.extend;
+
+////////////////////////
+
 var Typeahead = require('../autocomplete/typeahead.js');
 var EventBus = require('../autocomplete/event_bus.js');
 
-
 var old;
@@ -9,0 +29,0 @@ var typeaheadKey;

test/unit/angular_spec.js

@@ -5,7 +5,7 @@ 'use strict';
 
-global.$ = require('jquery');
+require('../../src/common/dom.js').element = require('jquery');
 
+var $autocomplete = require('../../src/angular/directive.js');
 var Typeahead = require('../../src/autocomplete/typeahead.js');
 var fixtures = require('../fixtures.js');
-var $autocomplete = require('../../src/jquery/plugin.js');
 
@@ -12,0 +12,0 @@ describe('autocomplete directive', function() {

test/unit/dataset_spec.js

@@ -5,3 +5,5 @@ 'use strict';
 
-global.$ = require('jquery');
+global.$ = require('../../src/common/dom.js').element = require('jquery');
+require('../../src/jquery/plugin.js');
+
 var Dataset = require('../../src/autocomplete/dataset.js');
@@ -8,0 +10,0 @@

test/unit/dropdown_spec.js

@@ -5,3 +5,4 @@ 'use strict';
 
-global.$ = require('jquery');
+global.$ = require('../../src/common/dom.js').element = require('jquery');
+require('../../src/jquery/plugin.js');
 var Dropdown = require('../../src/autocomplete/dropdown.js');
@@ -8,0 +9,0 @@ var fixtures = require('../fixtures.js');

test/unit/event_emitter_spec.js

@@ -5,3 +5,5 @@ 'use strict';
 
-global.$ = require('jquery');
+global.$ = require('../../src/common/dom.js').element = require('jquery');
+require('../../src/jquery/plugin.js');
+
 var EventEmitter = require('../../src/autocomplete/event_emitter.js');
@@ -8,0 +10,0 @@ var _ = require('../../src/common/utils.js');

test/unit/input_spec.js

@@ -5,3 +5,5 @@ 'use strict';
 
-global.$ = require('jquery');
+global.$ = require('../../src/common/dom.js').element = require('jquery');
+require('../../src/jquery/plugin.js');
+
 var Input = require('../../src/autocomplete/input.js');
@@ -8,0 +10,0 @@ var _ = require('../../src/common/utils.js');

test/unit/jquery_spec.js

@@ -5,3 +5,4 @@ 'use strict';
 
-global.$ = require('jquery');
+global.$ = require('../../src/common/dom.js').element = require('jquery');
+require('../../src/jquery/plugin.js');
 
@@ -8,0 +9,0 @@ var Typeahead = require('../../src/autocomplete/typeahead.js');

test/unit/typeahead_spec.js

@@ -5,3 +5,4 @@ 'use strict';
 
-global.$ = require('jquery');
+global.$ = require('../../src/common/dom.js').element = require('jquery');
+require('../../src/jquery/plugin.js');
 
@@ -8,0 +9,0 @@ var Typeahead = require('../../src/autocomplete/typeahead.js');

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

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

Dev dependency count

38

decreased by-2.56%

Number of package files

54

increased by14.89%

Number of lines in readme file

537

increased by7.19%

Worsened metrics

Total package byte prevSize

498471

decreased by-23.94%

Lines of code

9390

decreased by-30.11%

Number of low quality alerts

4

increased by33.33%

Number of low supply chain risk alerts

14

increased by40%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes