Extracted core and the jQuery-Plugin from ng-virtual-select repository

Author: SQiShER

.eslintignore

@@ -0,0 +1,6 @@
+gulpfile.js
+karma.conf.js
+package.json
+config.js
+demo/*
+dist/*

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "globals": {
+    "angular": true,
+    "_": true,
+    "$": true
+  },
+  "ecmaFeatures": { "modules": true },
+  "rules": {
+    "linebreak-style": [2, "unix"],
+    "semi": [2, "always"],
+    "no-console": 0,
+    "array-bracket-spacing": [2, "never"],
+    "no-use-before-define": [2, "nofunc"],
+    "no-unused-vars": 2,
+    "max-len": [2, 120, 4]
+  },
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jquery": true
+  },
+  "extends": "airbnb/base"
+}

.gitignore

@@ -0,0 +1,3 @@
+.tmp
+node_modules
+jspm_packages

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - "4.2"
+before_install:
+  - npm install -g npm@'>=3.0.0'
+  - npm --version

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Daniel Bechler
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,4 @@
+# virtual-select
+This component aims to work well in rare scenarios in which `select2` or `selectize` don't cut it. Not because they are bad (which they are definitely not!), but because of horrible, horrible constraints of the project environment. Like being forced to pre-load and display all entries in the dropdown at once, because the backend request is incredibly slow. When we're talking about a couple thousand entries, this can become very slow and inefficient.
+
+virtual-select is designed to minimize DOM manipulations and memory consumption, in order to deal with large amounts of data.

config.js

@@ -0,0 +1,63 @@
+System.config({
+  defaultJSExtensions: true,
+  transpiler: "babel",
+  babelOptions: {
+    "optional": [
+      "runtime",
+      "optimisation.modules.system",
+    ],
+  },
+  paths: {
+    "github:*": "jspm_packages/github/*",
+    "npm:*": "jspm_packages/npm/*",
+  },
+
+  map: {
+    "array.prototype.findindex": "npm:[email protected]",
+    "babel": "npm:[email protected]",
+    "babel-runtime": "npm:[email protected]",
+    "core-js": "npm:[email protected]",
+    "jquery": "src/adapter/jquery-adapter.js",
+    "lodash": "npm:[email protected]",
+    "github:jspm/[email protected]": {
+      "assert": "npm:[email protected]",
+    },
+    "github:jspm/[email protected]": {
+      "path-browserify": "npm:[email protected]",
+    },
+    "github:jspm/[email protected]": {
+      "process": "npm:[email protected]",
+    },
+    "github:jspm/[email protected]": {
+      "util": "npm:[email protected]",
+    },
+    "npm:[email protected]": {
+      "util": "npm:[email protected]",
+    },
+    "npm:[email protected]": {
+      "process": "github:jspm/[email protected]",
+    },
+    "npm:[email protected]": {
+      "fs": "github:jspm/[email protected]",
+      "path": "github:jspm/[email protected]",
+      "process": "github:jspm/[email protected]",
+      "systemjs-json": "github:systemjs/[email protected]",
+    },
+    "npm:[email protected]": {
+      "util": "github:jspm/[email protected]",
+    },
+    "npm:[email protected]": {
+      "process": "github:jspm/[email protected]",
+    },
+    "npm:[email protected]": {
+      "process": "github:jspm/[email protected]",
+    },
+    "npm:[email protected]": {
+      "assert": "github:jspm/[email protected]",
+    },
+    "npm:[email protected]": {
+      "inherits": "npm:[email protected]",
+      "process": "github:jspm/[email protected]",
+    },
+  },
+});

demo/app.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var DataProvider = function() {
+  this.availableItems = null;
+  this.items = null;
+};
+DataProvider.prototype.load = function() {
+  var deferred = Q.defer();
+  var self = this;
+  if (this.availableItems) {
+    deferred.resolve();
+  } else {
+    // this timeout only exists to give the loading indicator a chance to appear for demo purposes.
+    setTimeout(function() {
+      self.availableItems = [];
+      for (var i = 1; i < 1000; i++) {
+        self.availableItems.push({
+          id: '' + i,
+          name: '' + i,
+        });
+      }
+      self.items = self.availableItems;
+      deferred.resolve();
+    }, 1000);
+  }
+  return deferred.promise;
+};
+DataProvider.prototype.filter = function(search) {
+  if (search.length > 0) {
+    this.items = _.filter(this.availableItems, function(item) {
+      return item.name.indexOf(search) === 0;
+    });
+  } else {
+    this.items = this.availableItems;
+  }
+};
+DataProvider.prototype.get = function(firstItem, lastItem) {
+  return this.items.slice(firstItem, lastItem);
+};
+DataProvider.prototype.size = function() {
+  return this.items.length;
+};
+DataProvider.prototype.identity = function(item) {
+  return item.id;
+};
+DataProvider.prototype.displayText = function(item, extended) {
+  if (item) {
+    return extended ? item.name + ' (' + item.id + ')' : item.name;
+  } else {
+    return '';
+  }
+};
+DataProvider.prototype.noSelectionText = function() {
+  return 'Please choose';
+};
+var dataProvider = new DataProvider();
+
+$(document).ready(function() {
+
+  $('.demo-virtual-select').virtualselect({
+    dataProvider: dataProvider,
+    onSelect: function(item) {
+      $('.demo-virtual-select--selection').text(JSON.stringify(item));
+    },
+  });
+
+  $('#select').click(function() {
+    $('.demo-virtual-select').virtualselect('select', {
+      "id": "5",
+      "name": "5",
+    });
+  });
+
+  $('#focus').click(function() {
+    $('.demo-virtual-select').virtualselect('focus');
+  });
+
+  $('#fetch').click(function() {
+    $('.demo-virtual-select').virtualselect('load');
+  });
+
+});

demo/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>virtual-select-jquery</title>
+	<link rel="stylesheet" href="main.css">
+	<link rel="stylesheet" href="../dist/virtual-select.css">
+</head>
+
+<body>
+
+	<script src="../node_modules/lodash/index.js"></script>
+	<script src="../node_modules/jquery/dist/jquery.min.js"></script>
+	<script src="../node_modules/q/q.js"></script>
+	<script src="../dist/virtual-select-jquery.min.js"></script>
+	<script src="app.js"></script>
+
+	<section>
+		<p>
+			<input type="button" id="fetch" value="Pre-load!">
+			<input type="button" id="select" value="Select something!">
+			<input type="button" id="focus" value="Focus!">
+		</p>
+
+		<div class="demo-virtual-select"></div>
+
+		<p class="demo-virtual-select--selection"></p>
+	</section>
+
+</body>
+
+</html>

demo/main.css

@@ -0,0 +1,10 @@
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 20px;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+}

dist/virtual-select-jquery.min.js

@@ -0,0 +1,60 @@
+const gulp = require('gulp'),
+  sourcemaps = require('gulp-sourcemaps'),
+  autoprefixer = require('gulp-autoprefixer'),
+  concat = require('gulp-concat'),
+  templateCache = require('gulp-angular-templatecache'),
+  babel = require('gulp-babel'),
+  del = require('del'),
+  path = require('path'),
+  jspm = require('gulp-jspm'),
+  rename = require('gulp-rename'),
+  KarmaServer = require('karma').Server;
+
+const options = {
+  buildDir: 'dist/',
+};
+
+gulp.task('css', () => {
+  return gulp.src('src/*.css')
+    .pipe(sourcemaps.init())
+    .pipe(autoprefixer({
+      browsers: ['last 2 versions'],
+      cascade: false,
+    }))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest(options.buildDir));
+});
+
+gulp.task('javascript', () => {
+  return gulp.src('src/virtual-select-jquery.js')
+    .pipe(sourcemaps.init())
+    .pipe(jspm({
+      selfExecutingBundle: true,
+      minify: true,
+    }))
+    .pipe(rename('virtual-select-jquery.min.js'))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest(options.buildDir));
+});
+
+gulp.task('test', (done) => {
+  new KarmaServer({
+    configFile: __dirname + '/karma.conf.js',
+    singleRun: true,
+    browsers: ['PhantomJS'],
+  }, done).start();
+});
+
+gulp.task('clean', () => {
+  return del([options.buildDir]);
+});
+
+gulp.task('build', ['css', 'javascript']);
+
+gulp.task('develop', ['build'], () => {
+  gulp.watch('src/**/*.css', ['css']);
+  gulp.watch('src/**/*.js', ['javascript']);
+});
+
+gulp.task('release', ['build']);
+gulp.task('default', ['develop']);