sc-filtered-list - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

gulpfile.js

 var gulp = require( "gulp" ),
   browserify = require( "gulp-browserify" ),
   css = require( "gulp-minify-css" ),
+  concat = require( "gulp-concat" ),
   jshint = require( "gulp-jshint" ),
   jshintReporter = require( "jshint-stylish" ),
   less = require( "gulp-less" ),
+  mochaPhantomJS = require( "gulp-mocha-phantomjs" ),
   rename = require( "gulp-rename" ),
@@ -13,6 +15,6 @@ shell = require( "gulp-shell" ),
   livereloadServer,
-  moduleName = pkg.name.replace( /-(\w)/g, "$1" );
+  moduleName = pkg.moduleName;
 
 var livereload = function ( _file ) {
-  return function ( _path ) {
+  return function () {
     if ( livereloadServer ) livereloadServer.changed( _file );
@@ -22,2 +24,8 @@ }
 
+gulp.task( "concatScripts", function () {
+  return gulp.src( [ "./src/scripts/index.js", "./src/scripts/list.js" ] )
+    .pipe( concat( "src.js" ) )
+    .pipe( gulp.dest( "./.tmp/" ) );
+} );
+
 gulp.task( "jshint", function () {
@@ -45,2 +53,10 @@ return gulp.src( [ "./src/scripts/**/*.js", "test/**/*.js", "testClient/**/*.js" ] )
 
+gulp.task( "readme", [ "concatScripts" ], function () {
+  gulp.src( "" )
+    .pipe( shell( [
+      "./node_modules/.bin/dox < ./.tmp/src.js -a > README.md"
+    ] ) )
+    .on( "end", livereload( ".js" ) );
+} );
+
 gulp.task( "scriptMain", function () {
@@ -65,15 +81,28 @@ return gulp.src( [ "./src/scripts/index.js" ] )
 
-gulp.task( "test", [ "scriptMain", "stylesMain" ], function () {
+gulp.task( "test", function () {
   return gulp.src( "" ).pipe( shell( [
     "npm test"
-  ], {
-    ignoreErrors: true
-  } ) )
-    .on( "end", livereload( ".js" ) );
+  ] ) );
 } );
 
+gulp.task( "tests", [ "scriptMain", "stylesMain" ], function () {
+  [
+    "testClient/data.html",
+    "testClient/defaults.html",
+    "testClient/destroy.html",
+    "testClient/fuzzy-search.html",
+    "testClient/more-than-one.html",
+    "testClient/open-close.html",
+    "testClient/options-given-by-data-attrs.html",
+    "testClient/sort.html",
+    "testClient/templates.html"
+  ].forEach( function ( _html ) {
+    gulp.src( _html ).pipe( mochaPhantomJS() );
+  } );
+} );
+
 gulp.task( "watch", function () {
   livereloadServer = require( "gulp-livereload" )();
 
-  gulp.watch( [ "./src/scripts/**/*.js*" ], [ "scripts", "minifyScripts" ] );
+  gulp.watch( [ "./src/scripts/**/*.js*" ], [ "scripts", "minifyScripts", "test", "docs" ] );
   gulp.watch( [ "./src/styles/**/*.less" ], [ "styles" ] );
@@ -86,6 +115,7 @@ gulp.watch( [ "./demo/*" ], [ "default" ] );
 gulp.task( "default", [ "build", "test" ] );
-gulp.task( "build", [ "scripts", "styles", "minify" ] );
+gulp.task( "build", [ "scripts", "styles", "minify", "docs" ] );
 gulp.task( "scripts", [ "scriptMain" ] );
 gulp.task( "styles", [ "stylesMain" ] );
 gulp.task( "minify", [ "minifyScripts", "minifyStyles" ] );
-gulp.task( "run", [ "build", "watch" ] );
+gulp.task( "docs", [ "readme" ] );
+gulp.task( "run", [ "build", "test", "watch" ] );

package.json

 {
   "name": "sc-filtered-list",
-  "version": "0.0.0",
-  "description": "",
-  "main": "index.js",
+  "moduleName": "FilteredList",
+  "version": "0.0.1",
+  "description": "A UI control to allow the user to quickly choose a single object from a list of many objects",
+  "main": "src/scripts/index.js",
   "scripts": {
     "postinstall": "bower install --config.interactive=false && gulp",
-    "test": "mocha && npm run pjs1 && npm run pjs2 && npm run pjs3 && npm run pjs4 && npm run pjs5 && npm run pjs6 && npm run pjs7",
-    "pjs1": "mocha-phantomjs -p ./node_modules/.bin/phantomjs testClient/open-close.html",
-    "pjs2": "mocha-phantomjs -p ./node_modules/.bin/phantomjs testClient/options-given-by-data-attrs.html",
-    "pjs3": "mocha-phantomjs -p ./node_modules/.bin/phantomjs testClient/destroy.html",
-    "pjs4": "mocha-phantomjs -p ./node_modules/.bin/phantomjs testClient/defaults.html",
-    "pjs5": "mocha-phantomjs -p ./node_modules/.bin/phantomjs testClient/more-than-one.html",
-    "pjs6": "mocha-phantomjs -p ./node_modules/.bin/phantomjs testClient/sort.html",
-    "pjs7": "mocha-phantomjs -p ./node_modules/.bin/phantomjs testClient/fuzzy-search.html",
-    "posttest": "mocha test/readme.js -R markdown > README.md"
+    "test": "gulp tests",
+    "posttest": "gulp docs"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SPEAKUI/sc-filtered-list"
+  },
   "author": "David Tsuji",
   "license": "MIT",
   "devDependencies": {
-    "should": "~2.1.1",
-    "gulp": "^3.6.0",
-    "gulp-shell": "^0.2.4",
+    "async": "^0.7.0",
+    "bower": "^1.3.1",
+    "dox": "^0.4.4",
+    "gulp": "^3.6.1",
     "gulp-browserify": "^0.5.0",
-    "bower": "^1.3.1",
+    "gulp-concat": "^2.2.0",
+    "gulp-jshint": "^1.5.3",
     "gulp-less": "^1.2.3",
+    "gulp-livereload": "^1.2.0",
+    "gulp-minify-css": "^0.3.0",
+    "gulp-mocha-phantomjs": "^0.1.4",
     "gulp-rename": "^1.2.0",
+    "gulp-shell": "^0.2.4",
     "gulp-uglify": "^0.2.1",
-    "gulp-minify-css": "^0.3.0",
-    "gulp-jshint": "^1.5.3",
     "jshint-stylish": "^0.1.5",
-    "gulp-livereload": "^1.2.0",
-    "mocha-phantomjs": "^3.3.2",
-    "phantomjs": "^1.9.7-3",
-    "mocha": "^1.18.2",
-    "async": "^0.7.0"
+    "should": "~2.1.1",
+    "mocha": "^1.18.2"
   },
@@ -49,2 +48,2 @@ "dependencies": {
   }
-}
+}

README.md

@@ -1,12 +0,220 @@
-# TOC
-   - [sc-filtered-list](#sc-filtered-list)
-<a name=""></a>
- 
-<a name="sc-filtered-list"></a>
-# sc-filtered-list
-should.
+  - [FilteredList()](#filteredlist)
+  - [Installation](#installation)
+  - [Overview](#overview)
+  - [Instantiate](#instantiate)
+  - [Options](#options)
+  - [Defaults](#defaults)
+  - [Events](#events)
+  - [Styling](#styling)
+  - [Templates](#templates)
+  - [FilteredList.data()](#filteredlistdata)
+  - [Add a single object/item](#addasingleobjectitem)
+  - [Get the value](#getthevalue)
+  - [FilteredList.destroy()](#filteredlistdestroy)
 
+## FilteredList()
+
+  `sc-filtered-list` is a UI control to allow the user to quickly choose a
+  single object from a list of many objects.
+  
+  <img src="https://raw.githubusercontent.com/SPEAKUI/sc-filtered-list/master/demo/demo.gif" style="align: center">
+  
+# Installation
+  
+  Get [Node.js](http://nodejs.org). And then in a console...
+  
+  ```bash
+  npm install
+  ```
+  
+# Overview
+  
+  This control is attached to a button. When the button is clicked a list
+  would appear inline to allow the user to either use the mouse or keyboard
+  to choose an item. A text input is available to allow the list to be
+  filtered.
+  
+# Instantiate
+  
+  The `FilteredList` can be instantiated using `data-` attributes directly in
+  the markup or manually by code.
+  
+  **Instantiate using `data-` attributes**
+  
+  Add `data-sc-filtered-list` to a `<button>`. Will instantiate on domready.
+  
 ```js
-}
+<button data-sc-filtered-list>
 ```
 
+  
+  To get a reference to the instantiated object use the jQuery `data` method:
+  
+```js
+$('#myButton').data('scfilteredlist');
+```
+
+  
+  **Instantiate using code**
+  
+```js
+var filter = new FilteredList(document.querySelector('#myButton'));
+```
+
+  
+## Options
+  
+  Give options using the `data-` attribute.
+  
+```js
+<button data-sc-filtered-list data-sc-filtered-list-options='{"fuzzy": true}'>
+```
+
+  
+  > The options object must be a properly formatted JSON string.
+  
+  Give options using code.
+  
+```js
+var filter = new FilteredList(document.querySelector('#myButton'), {
+  fuzzy: true
+});
+```
+
+  
+  - `buttonLabel` The button label (default: "Choose one")
+  - `fuzzy` The search type. If true "dvd" will match "david" (default: false)
+  - `itemLabelKey` The object key to use for the items label (default: "name")
+  - `listTitle` The title above the list (default: "Select an item")
+  - `maxNumItems` The maximum number of items in the list (default: 10)
+  - `maxNumItemsVisible` The maximum number of items visible (default: 7)
+  - `width` The width of the list (default: 300)
+  - `sort` The default sort ["", "asc", "desc"] (default: "desc")
+  - `sortControlVisible` If the sort control is visible (default: true)
+  
+## Defaults
+  
+  To change the defaults, use the global `FilteredList` variable.
+  
+```js
+FilteredList.defaults.maxNumItems = 10;
+```
+
+  
+## Events
+  
+  The `FilteredList` uses an event based system with methods `on`, `off` and
+  `once`.
+  
+```js
+myList.on('change', function(){});
+```
+
+  
+  **Events**
+  
+  - `change` When the user selects and item and the value has changed
+  - `close` When the list closes
+  - `destroy` When the `FilteredList` is destroyed
+  - `filtered` When the search value changes
+  - `itemFocus` When an item in the list gains focus
+  - `open` When the list opens
+  - `sort` When the list is sorted
+  - `redraw` When the list redraws itself
+  - `fetch` When the list tries to fetch data based on the search term
+  
+## Styling
+  
+  CSS is provided and is required however it is plain by design. There are 2
+  ways to make the list pretty.
+  
+  1. Include bootstrap 3.x
+  2. Write your own
+  
+## Templates
+  
+  The markup that is generated on instantiation is template driven. These templates
+  can be changed if necessary.
+  
+  **FilteredList.templates.listWrapper**
+  
+```js
+<div class='{{config.className}}-container'>{{!config.templates.listInput}}{{!config.templates.listHeader}}{{!config.templates.listItemWrapper}}</div>
+```
+
+  
+  **FilteredList.templates.listInput**
+  
+```js
+<div class='{{config.className}}-input-container'><input type='text' class='{{config.className}}-input form-control'></div>
+```
+
+  
+  **FilteredList.templates.listHeader**
+  
+```js
+<header class='{{config.className}}-header panel-heading'>{{!config.defaults.listTitle}}{{!config.templates.listSortToggle}}</header>
+```
+
+  
+  **FilteredList.templates.listItemWrapper**
+  
+```js
+<div class='{{config.className}}-items list-group'></div>
+```
+
+  
+  **FilteredList.templates.listItem**
+  
+```js
+<a href class='{{config.className}}-item list-group-item' data-cid='{{cid}}'>{{!key}}</a>
+```
+
+  
+  **FilteredList.templates.listSortToggle**
+  
+```js
+<button type='button' class='{{config.className}}-sort-toggle btn btn-default btn-xs' title='sort'></button>
+```
+
+## FilteredList.data()
+
+  Adds an array of objects/items in bulk
+  
+```js
+myList.data([{
+  name: "david"
+}, {
+  name: "max"
+}]);
+```
+
+  
+# Add a single object/item
+  
+```js
+myList.items.push({
+  name: "david"
+});
+```
+
+  
+# Get the value
+  
+  To get the value of the selected object/item use the `value` property.
+  
+```js
+myList.value;
+```
+
+## FilteredList.destroy()
+
+  Destroys the `FilteredList` and invalidates the object.
+  
+```js
+myList.destroy();
+```
+
+  
+  > Any further calls to methods like `destroy` or `data` etc will return
+  nothing.

src/scripts/config.json

@@ -11,3 +11,3 @@ {
     "maxNumItemsVisible": 7,
-    "minWidth": 300,
+    "width": 300,
     "sort": "desc",
@@ -14,0 +14,0 @@ "sortControlVisible": true

src/scripts/index.js

@@ -9,2 +9,136 @@ var config = require( "./config.json" ),
 
+/**
+ * `sc-filtered-list` is a UI control to allow the user to quickly choose a
+ * single object from a list of many objects.
+ *
+ * <img src="https://raw.githubusercontent.com/SPEAKUI/sc-filtered-list/master/demo/demo.gif" style="align: center">
+ *
+ * ## Installation
+ *
+ * Get [Node.js](http://nodejs.org). And then in a console...
+ *
+ * ```bash
+ * npm install
+ * ```
+ *
+ * ## Overview
+ *
+ * This control is attached to a button. When the button is clicked a list
+ * would appear inline to allow the user to either use the mouse or keyboard
+ * to choose an item. A text input is available to allow the list to be
+ * filtered.
+ *
+ * ## Instantiate
+ *
+ * The `FilteredList` can be instantiated using `data-` attributes directly in
+ * the markup or manually by code.
+ *
+ * **Instantiate using `data-` attributes**
+ *
+ * Add `data-sc-filtered-list` to a `<button>`. Will instantiate on domready.
+ *
+ *   <button data-sc-filtered-list>
+ *
+ * To get a reference to the instantiated object use the jQuery `data` method:
+ *
+ *   $('#myButton').data('scfilteredlist');
+ *
+ * **Instantiate using code**
+ *
+ *   var filter = new FilteredList(document.querySelector('#myButton'));
+ *
+ * ### Options
+ *
+ * Give options using the `data-` attribute.
+ *
+ *   <button data-sc-filtered-list data-sc-filtered-list-options='{"fuzzy": true}'>
+ *
+ * > The options object must be a properly formatted JSON string.
+ *
+ * Give options using code.
+ *
+ *   var filter = new FilteredList(document.querySelector('#myButton'), {
+ *     fuzzy: true
+ *   });
+ *
+ * - `buttonLabel` The button label (default: "Choose one")
+ * - `fuzzy` The search type. If true "dvd" will match "david" (default: false)
+ * - `itemLabelKey` The object key to use for the items label (default: "name")
+ * - `listTitle` The title above the list (default: "Select an item")
+ * - `maxNumItems` The maximum number of items in the list (default: 10)
+ * - `maxNumItemsVisible` The maximum number of items visible (default: 7)
+ * - `width` The width of the list (default: 300)
+ * - `sort` The default sort ["", "asc", "desc"] (default: "desc")
+ * - `sortControlVisible` If the sort control is visible (default: true)
+ *
+ * ### Defaults
+ *
+ * To change the defaults, use the global `FilteredList` variable.
+ *
+ *   FilteredList.defaults.maxNumItems = 10;
+ *
+ * ### Events
+ *
+ * The `FilteredList` uses an event based system with methods `on`, `off` and
+ * `once`.
+ *
+ *   myList.on('change', function(){});
+ *
+ * **Events**
+ *
+ * - `change` When the user selects and item and the value has changed
+ * - `close` When the list closes
+ * - `destroy` When the `FilteredList` is destroyed
+ * - `filtered` When the search value changes
+ * - `itemFocus` When an item in the list gains focus
+ * - `open` When the list opens
+ * - `sort` When the list is sorted
+ * - `redraw` When the list redraws itself
+ * - `fetch` When the list tries to fetch data based on the search term
+ *
+ * ### Styling
+ *
+ * CSS is provided and is required however it is plain by design. There are 2
+ * ways to make the list pretty.
+ *
+ * 1. Include bootstrap 3.x
+ * 2. Write your own
+ *
+ * ### Templates
+ *
+ * The markup that is generated on instantiation is template driven. These templates
+ * can be changed if necessary.
+ *
+ * **FilteredList.templates.listWrapper**
+ *
+ *   <div class='{{config.className}}-container'>{{!config.templates.listInput}}{{!config.templates.listHeader}}{{!config.templates.listItemWrapper}}</div>
+ *
+ * **FilteredList.templates.listInput**
+ *
+ *   <div class='{{config.className}}-input-container'><input type='text' class='{{config.className}}-input form-control'></div>
+ *
+ * **FilteredList.templates.listHeader**
+ *
+ *   <header class='{{config.className}}-header panel-heading'>{{!config.defaults.listTitle}}{{!config.templates.listSortToggle}}</header>
+ *
+ * **FilteredList.templates.listItemWrapper**
+ *
+ *   <div class='{{config.className}}-items list-group'></div>
+ *
+ * **FilteredList.templates.listItem**
+ *
+ *   <a href class='{{config.className}}-item list-group-item' data-cid='{{cid}}'>{{!key}}</a>
+ *
+ * **FilteredList.templates.listSortToggle**
+ *
+ *   <button type='button' class='{{config.className}}-sort-toggle btn btn-default btn-xs' title='sort'></button>
+ *
+ * @class FilteredList
+ * @param {jQuery|HTMLElement} _el The element you want to attach the list to
+ * @param {Object} _defaults A defaults object
+ * @property {String} __cid An automated GUID used internally
+ * @property {String} __config The config
+ * @property {Boolean} __destroyed Whether or not the object has been destroyed
+ * @return {FilteredList}
+ */
 var FilteredList = function ( _el, _defaults ) {
@@ -130,2 +264,48 @@ var self = this,
 
+/**
+ * Adds an array of objects/items in bulk
+ *
+ *   myList.data([{
+ *     name: "david"
+ *   }, {
+ *     name: "max"
+ *   }]);
+ *
+ * ## Add a single object/item
+ *
+ *   myList.items.push({
+ *     name: "david"
+ *   });
+ *
+ * ## Get the value
+ *
+ * To get the value of the selected object/item use the `value` property.
+ *
+ *   myList.value;
+ *
+ */
+FilteredList.prototype.data = function ( _arrayOfItems ) {
+  var self = this;
+
+  if ( self.__destroyed ) {
+    return;
+  }
+
+  var items = is.array( _arrayOfItems ) ? _arrayOfItems : [];
+
+  items.forEach( function ( _item ) {
+    if ( is.an.object( _item ) ) {
+      self.items.push( _item );
+    }
+  } );
+};
+
+/**
+ * Destroys the `FilteredList` and invalidates the object.
+ *
+ *   myList.destroy();
+ *
+ * > Any further calls to methods like `destroy` or `data` etc will return
+ * nothing.
+ */
 FilteredList.prototype.destroy = function () {
@@ -168,2 +348,3 @@ var self = this;
 exports.defaults = config.defaults;
+exports.templates = config.templates;
 
@@ -170,0 +351,0 @@ $( function () {

src/scripts/list.js

@@ -52,3 +52,3 @@ var helpers = require( "./helpers" ),
 
-  self.$el.width( config.defaults.minWidth );
+  self.$el.width( config.defaults.width );
 
@@ -173,3 +173,2 @@ self.$input = self.$el.find( "." + config.className + "-input" );
 
-
   if ( self.filter.__sort ) {
@@ -176,0 +175,0 @@ results.sort( function ( a, b ) {

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

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 6 instances in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 3 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

221

increased by1600%

Number of low supply chain risk alerts

4

decreased by-75%

Number of medium supply chain risk alerts

3

decreased by-62.5%

Worsened metrics

Total package byte prevSize

1191230

decreased by-49.94%

Dev dependency count

17

increased by6.25%

Number of package files

23

decreased by-89.5%

Lines of code

7080

decreased by-79.26%

No dependency changes