Typeahead for tags with selectize.

Fixes #12
This commit is contained in:
Tim Schumacher 2015-04-11 11:29:53 +02:00
parent 3a862e7432
commit faad41f5e2
94 changed files with 37138 additions and 4 deletions

View file

@ -26,6 +26,7 @@ use Jsvrcek\ICS\CalendarStream;
use Jsvrcek\ICS\CalendarExport;
use Symfony\Component\Validator\Constraints\DateTime;
use Doctrine\ORM\Query\ResultSetMappingBuilder;
use Symfony\Component\HttpFoundation\AcceptHeader;
/**
* Tag controller.
@ -170,4 +171,44 @@ EOF;
);
}
}
/**
* Finds and displays a Event entity.
*
* @Route("/")
* @Method("GET")
*/
public function indexAction() {
$accepts = AcceptHeader::fromString($this->getRequest()->headers->get('Accept'));
if ($accepts->has('application/json')) {
$em = $this->getDoctrine()->getManager();
/** @var QueryBuilder $qb */
$qb = $em->createQueryBuilder();
$qb->select(['t'])
->from('CalciferBundle:Tag', 't')
->where('t.name LIKE :tag')
->orderBy('t.name')
->setParameter('tag', sprintf('%%%s%%',strtolower($this->getRequest()->query->get('q'))));
$entities = $qb->getQuery()->execute();
$tags = [];
foreach($entities as $tag) {
/** @var Tag $tag */
$tags[] = [
'id' => $tag->id,
'name' => $tag->name,
];
}
$response = new Response(json_encode($tags));
$response->headers->set('Content-Type', 'application/json');
return $response;
} else {
return $this->redirect('/');
}
}
}

View file

@ -110,6 +110,38 @@ $(document).ready(function() {
calcBoxSize(4);
}
$('#event_tags').selectize({
create: true,
diacritics: true,
valueField: 'name',
labelField: 'name',
searchField: 'name',
render: {
item: function(data,escape){
console.log([data,escape]);
return '<div class="ui green compact small label"><i class="tag icon"></i>' + escape(data.name) + '</div>';
}
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: "/tags/",
type: "GET",
dataType: 'json',
data: {
q: query
},
error: function() {
callback();
},
success: function(res) {
console.log(res);
callback(res);
}
});
}
});
if (view_map_selector.length == 1) {
jQuery('.show_map').click(addGeoCoordinates);
map = L.map('view-map');
@ -146,4 +178,4 @@ $(document).ready(function() {
}
}).modal('attach events', '.show_map', 'show');
}
});
});

View file

@ -4,18 +4,22 @@
{% stylesheets filter="compass"
"@CalciferBundle/Resources/assets/css/jquery.datetimepicker.scss"
"@CalciferBundle/Resources/assets/css/events.scss"
"@CalciferBundle/Resources/assets/css/leaflet.scss" %}
"@CalciferBundle/Resources/assets/css/leaflet.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
<link rel="stylesheet" href="/vendor/selectize.js/dist/css/selectize.css"/>
{% endblock %}
{% block javascripts %}
{% javascripts
"@CalciferBundle/Resources/assets/js/jquery.datetimepicker.js"
"@CalciferBundle/Resources/assets/js/events.js"
"@CalciferBundle/Resources/assets/js/leaflet.js" %}
<script src="{{ asset_url }}"></script>
"@CalciferBundle/Resources/assets/js/leaflet.js"
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<script src="/vendor/selectize.js/dist/js/standalone/selectize.js"></script>
{% endblock %}
{% block body -%}

5
web/vendor/selectize.js/.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
.DS_Store
.DAV
node_modules
bower_components
*.log

24
web/vendor/selectize.js/.travis.yml vendored Normal file
View file

@ -0,0 +1,24 @@
language: node_js
env:
matrix:
- TARGET=phantomjs
- TARGET=saucelabs
global:
- secure: df9eTd6JkMOgdF3J3UInb0ouaDEbF4Y0sklmvwgBUs38yRvGQ3mucrzH13dCU0GYW8mM/H9euF7yG4/leWQHoUYdRJTDRy/sWXGvs6qg7DTkUXsmGyzv/5XxS86WTD5B9LbzB1hvRs5nzWeA1sFP6rpzGG6HwogM/+37ijRjKQQ=
- secure: FI6ATM3Pngx0bowuYi5WHIDCe0R5ORlJWNsFxJyZLEusie+wZrRy9QbZsVvJGVYZJKAR9MFT3Ks494ou85lyfUnfvEnn+lX2DQ3Hsyz0xyBNoSvNkQbhZEsUr0TV+UGpCvSwYr6lYqXsBy6VxqyAkXDkqdVTAzMydq5ttGxszPU=
- secure: "ctyTk+LdMsch1jTRLLTboJW2TsJCIRtXktEQ86JdGteg0YSvsqDj/LndUaaGZ2ZSR3sSJ1Q/YV1X0M0VizrzX5I7/3WnKViyeKygJ5sSbTuqkjwFa2sAAmrnmBv9JWofIc2XuRG3tfZv2fX6QMDy5PA72KGPBmGAw4S8WTxGkHQ="
matrix:
allow_failures:
- env: TARGET=saucelabs
node_js:
- '0.10'
before_script:
- npm install -g bower
- npm install -g grunt-cli
- npm install
- make
script:
- export COMMIT_MESSAGE=$(git show -s --format=%B $TRAVIS_COMMIT | tr -d '\n')
- export TRAVIS_CI=1
- if [[ "${TARGET}" == "phantomjs" ]]; then npm test || exit 1; fi
- if [[ "${TARGET}" == "saucelabs" ]]; then (for x in 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15; do export SAUCELABS_BATCH=$x; echo "Starting batch $x of 15"; npm test || true; done); fi

219
web/vendor/selectize.js/Gruntfile.js vendored Normal file
View file

@ -0,0 +1,219 @@
var fs = require('fs');
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-bower-task');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-replace');
grunt.registerTask('configure', [
'clean:pre',
'bower:install',
]);
grunt.registerTask('compile', [
'copy:less',
'copy:less_plugins',
'concat:less_theme_dependencies',
'concat:less_plugins',
'concat:js',
'less:uncompressed',
'clean_bootstrap2_css',
'replace',
'build_standalone',
'uglify',
'clean:post',
]);
grunt.registerTask('default', [
'configure',
'compile'
]);
grunt.registerTask('clean_bootstrap2_css', 'Cleans CSS rules ocurring before the header comment.', function() {
var file = 'dist/css/selectize.bootstrap2.css';
var source = fs.readFileSync(file, 'utf8');
grunt.file.write(file, source.replace(/^(.|\s)+?\/\*/m, '/*'));
grunt.log.writeln('Cleaned "' + file + '".');
});
grunt.registerTask('build_standalone', '', function() {
var files, i, n, source, name, path, modules = [];
// amd definitions must be changed to be not anonymous
// @see https://github.com/brianreavis/selectize.js/issues/89
files = [];
for (i = 0, n = files_js_dependencies.length; i < n; i++) {
path = files_js_dependencies[i];
name = path.match(/([^\/]+?).js$/)[1];
source = grunt.file.read(path).replace('define(factory);', 'define(\'' + name + '\', factory);');
modules.push(source);
}
path = 'dist/js/selectize.js';
source = grunt.file.read(path).replace(/define\((.*?)factory\);/, 'define(\'selectize\', $1factory);');
modules.push(source);
// write output
path = 'dist/js/standalone/selectize.js';
grunt.file.write(path, modules.join('\n\n'));
grunt.log.writeln('Built "' + path + '".');
});
var files_js = [
'src/contrib/*.js',
'src/*.js',
'!src/.wrapper.js',
'!src/defaults.js',
'!src/selectize.js',
'!src/selectize.jquery.js',
'src/selectize.js',
'src/defaults.js',
'src/selectize.jquery.js',
];
var files_js_dependencies = [
'bower_components/sifter/sifter.js',
'bower_components/microplugin/src/microplugin.js',
];
var less_imports = [];
var less_plugin_files = [];
// enumerate plugins
(function() {
var selector_plugins = grunt.option('plugins');
if (!selector_plugins) return;
if (selector_plugins.indexOf(',') !== -1) {
selector_plugins = '{' + selector_plugins.split(/\s*,\s*/).join(',') + '}';
}
// javascript
files_js.push('src/plugins/' + selector_plugins + '/*.js');
// less (css)
var matched_files = grunt.file.expand(['src/plugins/' + selector_plugins + '/plugin.less']);
for (var i = 0, n = matched_files.length; i < n; i++) {
var plugin_name = matched_files[i].match(/src\/plugins\/(.+?)\//)[1];
less_imports.push('@import "plugins/' + plugin_name + '";');
less_plugin_files.push({src: matched_files[i], dest: 'dist/less/plugins/' + plugin_name + '.less'});
}
})();
grunt.initConfig({
pkg: grunt.file.readJSON('bower.json'),
bower: {
install: {
options: {
copy: false,
clean: false,
layout: 'byComponent',
action: 'install'
}
}
},
clean: {
pre: ['dist'],
post: ['**/*.tmp*']
},
copy: {
less: {
files: [{expand: true, flatten: true, src: ['src/less/*.less'], dest: 'dist/less'}]
},
less_plugins: {
files: less_plugin_files
}
},
replace: {
options: {prefix: '@@'},
main: {
options: {
variables: {
'version': '<%= pkg.version %>',
'js': '<%= grunt.file.read("dist/js/selectize.js").replace(/\\n/g, "\\n\\t") %>',
'css': '<%= grunt.file.read("dist/css/selectize.css") %>',
},
},
files: [
{src: ['src/.wrapper.js'], dest: 'dist/js/selectize.js'},
{src: ['src/less/.wrapper.css'], dest: 'dist/css/selectize.css'}
]
},
css_post: {
options: {
variables: {
'version': '<%= pkg.version %>'
},
},
files: [
{expand: true, flatten: false, src: ['dist/css/*.css'], dest: ''},
{expand: true, flatten: false, src: ['dist/less/*.less'], dest: ''},
{expand: true, flatten: false, src: ['dist/less/plugins/*.less'], dest: ''},
]
}
},
less: {
options: {},
uncompressed: {
files: {
'dist/css/selectize.css': ['dist/less/selectize.less'],
'dist/css/selectize.default.css': ['dist/less/selectize.default.less'],
'dist/css/selectize.legacy.css': ['dist/less/selectize.legacy.less'],
'dist/css/selectize.bootstrap2.css': ['dist/less/selectize.bootstrap2.tmp.less'],
'dist/css/selectize.bootstrap3.css': ['dist/less/selectize.bootstrap3.tmp.less']
}
}
},
concat: {
options: {
stripBanners: true,
separator: grunt.util.linefeed + grunt.util.linefeed
},
js: {
files: {
'dist/js/selectize.js': files_js,
}
},
less_plugins: {
options: {
banner: less_imports.join('\n') + grunt.util.linefeed + grunt.util.linefeed
},
files: {
'dist/less/selectize.less': ['dist/less/selectize.less']
}
},
less_theme_dependencies: {
options: {stripBanners: false},
files: {
'dist/less/selectize.bootstrap2.tmp.less': [
'bower_components/bootstrap2/less/variables.less',
'bower_components/bootstrap2/less/mixins.less',
'dist/less/selectize.bootstrap2.less'
],
'dist/less/selectize.bootstrap3.tmp.less': [
'bower_components/bootstrap3/less/variables.less',
'bower_components/bootstrap3/less/mixins/nav-divider.less',
'dist/less/selectize.bootstrap3.less'
]
}
}
},
uglify: {
main: {
options: {
'banner': '/*! selectize.js - v<%= pkg.version %> | https://github.com/brianreavis/selectize.js | Apache License (v2) */\n',
'report': 'gzip',
'ascii-only': true
},
files: {
'dist/js/selectize.min.js': ['dist/js/selectize.js'],
'dist/js/standalone/selectize.min.js': ['dist/js/standalone/selectize.js']
}
}
}
});
};

202
web/vendor/selectize.js/LICENSE vendored Normal file
View file

@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 20132015 Brian Reavis
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

34
web/vendor/selectize.js/Makefile vendored Normal file
View file

@ -0,0 +1,34 @@
.PHONY: compile release test
plugins=*
GRUNT=node_modules/.bin/grunt
all: compile
test:
npm test
compile:
$(GRUNT) --plugins=$(plugins)
release:
ifeq ($(strip $(version)),)
@echo "\033[31mERROR:\033[0;39m No version provided."
@echo "\033[1;30mmake release version=1.0.0\033[0;39m"
else
sed -i.bak 's/"version": "[^"]*"/"version": "$(version)"/' selectize.jquery.json
sed -i.bak 's/"version": "[^"]*"/"version": "$(version)"/' bower.json
sed -i.bak 's/"version": "[^"]*"/"version": "$(version)"/' package.json
rm *.bak
make compile
npm test || exit 1
cp dist/js/standalone/selectize.js ../.selectize.js
git add .
git commit -a -m "Released $(version)."
git tag v$(version)
git push origin master
git push origin --tags
npm publish
git checkout gh-pages
mv -f ../.selectize.js js/selectize.js
git commit -a -m "Updated selectize.js to latest version."
git push origin gh-pages
git checkout master
@echo "\033[32mv${version} released\033[0;39m"
endif

104
web/vendor/selectize.js/README.md vendored Normal file
View file

@ -0,0 +1,104 @@
# selectize.js
[![NPM version](http://img.shields.io/npm/v/selectize.svg?style=flat)](https://www.npmjs.org/package/selectize)
![Bower version](http://img.shields.io/bower/v/selectize.svg?style=flat)
[![Build Status](http://img.shields.io/travis/brianreavis/selectize.js/master.svg?style=flat)](https://travis-ci.org/brianreavis/selectize.js)
[![Coverage Status](http://img.shields.io/coveralls/brianreavis/selectize.js/master.svg?style=flat)](https://coveralls.io/r/brianreavis/selectize.js)
Selectize is an extensible [jQuery](http://jquery.com/)-based custom &lt;select&gt; UI control. It's useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable experience with a clean and powerful API.
- [Demos](http://brianreavis.github.io/selectize.js/)
- [Changelog](https://github.com/brianreavis/selectize.js/releases)
- [Examples](examples/)
- [Usage Documentation](docs/usage.md)
- [API Documentation](docs/api.md)
- [Plugin Documentation](docs/plugins.md)
- [Browser Test Matrix](https://saucelabs.com/u/selectize)
### Features
- **Smart Option Searching / Ranking**<br>Options are efficiently scored and sorted on-the-fly (using [sifter](https://github.com/brianreavis/sifter.js)). Want to search an item's title *and* description? No problem.
- **Caret between items**<br>Order matters sometimes. Use the <kbd>&larr;</kbd> and <kbd>&rarr;</kbd> arrow keys to move between selected items.</li>
- **Select &amp; delete multiple items at once**<br>Hold down <kbd>option</kbd> on Mac or <kbd>ctrl</kbd> on Windows to select more than one item to delete.
- **Díåcritîçs supported**<br>Great for international environments.
- **Item creation**<br>Allow users to create items on the fly (async saving is supported; the control locks until the callback is fired).
- **Remote data loading**<br>For when you have thousands of options and want them provided by the server as the user types.
- **Clean API &amp; code**<br>Interface with it and make modifications easily. Pull requests welcome!
- **Extensible**<br> [Plugin API](docs/plugins.md) for developing custom features (uses [microplugin](https://github.com/brianreavis/microplugin.js)).
- **Touch Support**<br> Plays nice with iOS 5+ devices.
### Dependencies
- [jquery](https://github.com/jquery/jquery) (1.7 and greater)
- [sifter](https://github.com/brianreavis/sifter.js) (bundled in ["standalone" build](dist/js/standalone))
- [microplugin](https://github.com/brianreavis/microplugin.js) (bundled in ["standalone" build](dist/js/standalone))
### Files
All pre-built files needed to use Selectize can be found in the ["dist"](dist/) folder.
- [**js/**](dist/js)
- [**standalone/**](dist/js/standalone)
- [selectize.js](dist/js/standalone/selectize.js) — With dependencies, minus jquery
- [selectize.js](dist/js/selectize.js) — Without dependencies
- [**less/**](dist/less)
- [selectize.less](dist/less/selectize.less) — Core styles
- [selectize.default.less](dist/less/selectize.default.less) — Default theme
- [selectize.bootstrap2.less](dist/less/selectize.bootstrap2.less) — Bootstrap 2 theme
- [selectize.bootstrap3.less](dist/less/selectize.bootstrap3.less) — Bootstrap 3 theme
- [**plugins/**](dist/less/plugins) — Individual plugin styles
- [**css/**](dist/css)
- [selectize.css](dist/css/selectize.css) — Core styles
- [selectize.default.css](dist/css/selectize.default.css) — Default theme (with core styles)
- [selectize.bootstrap2.css](dist/css/selectize.bootstrap2.css) - Bootstrap 2 theme
- [selectize.bootstrap3.css](dist/css/selectize.bootstrap3.css) - Bootstrap 3 theme
### Usage
```js
$('select').selectize(options);
```
The available options are [documented here](docs/usage.md).
#### IE8 Support
To support Internet Explorer 8, [es5-shim](https://github.com/kriskowal/es5-shim/) must be added your page.
```html
<!--[if lt IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.0.8/es5-shim.min.js"></script><![endif]-->
```
### Custom Builds
By default, all [plugins](src/plugins) are included. To hand-pick what plugins (if any) to include, run [`grunt`](http://gruntjs.com/) with the "--plugins" flag. After this completes, grab the files you need from the ["dist"](dist) folder.
```sh
# dependencies
npm install -g bower
npm install
# build selectize
grunt --plugins=
grunt --plugins=*
grunt --plugins=remove_button,restore_on_backspace
```
### Contributing
When issuing a pull request, *please exclude changes in the "dist" folder to avoid merge conflicts*. Also, please ensure all the tests pass:
```sh
$ npm test # phantomjs
$ BROWSERS=Firefox npm test
$ BROWSERS=Firefox,Chrome npm test
$ BROWSERS=Firefox,Chrome,Safari npm test
```
## License
Copyright &copy; 20132015 [Brian Reavis](http://twitter.com/brianreavis) & [Contributors](https://github.com/brianreavis/selectize.js/graphs/contributors)
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

40
web/vendor/selectize.js/bower.json vendored Normal file
View file

@ -0,0 +1,40 @@
{
"name": "selectize",
"keywords": ["select", "ui", "form", "input", "control", "autocomplete", "tagging", "tag"],
"description": "Selectize is a jQuery-based custom <select> UI control. Useful for tagging, contact lists, country selectors, etc.",
"version": "0.12.0",
"license": "Apache License, Version 2.0",
"readmeFilename": "README.md",
"repository": {
"type": "git",
"url": "git://github.com/brianreavis/selectize.js.git"
},
"main": [
"dist/css/selectize.css",
"dist/js/selectize.js"
],
"ignore": [
"Makefile",
"Gruntfile.js",
"examples",
"node_modules",
"bower_components",
"docs",
"src",
"test",
".travis.yml",
"testem.json",
"selectize.jquery.json",
"*.sh",
"package.json"
],
"dependencies": {
"jquery": ">=1.7.0",
"sifter": "0.4.x",
"microplugin": "0.0.x"
},
"devDependencies": {
"bootstrap2": "bootstrap#2",
"bootstrap3": "bootstrap#3.2"
}
}

View file

@ -0,0 +1,487 @@
/**
* selectize.bootstrap2.css (v0.12.0) - Bootstrap 2 Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
-webkit-box-shadow: inset 0 0 12px 4px #ffffff;
box-shadow: inset 0 0 12px 4px #ffffff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: '!';
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown-header {
position: relative;
padding: 3px 10px;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.selectize-dropdown-header-close {
position: absolute;
right: 10px;
top: 50%;
color: #333333;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
color: #000000;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button [data-value] {
position: relative;
padding-right: 24px !important;
}
.selectize-control.plugin-remove_button [data-value] .remove {
z-index: 1;
/* fixes ie bug (see #392) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 17px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 1px 0 0 0;
border-left: 1px solid #cccccc;
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-control.plugin-remove_button [data-value] .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button [data-value].active .remove {
border-left-color: #0077b3;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
background: none;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
border-left-color: #e0e0e0;
}
.selectize-control {
position: relative;
}
.selectize-dropdown,
.selectize-input,
.selectize-input input {
color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
-webkit-font-smoothing: inherit;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active {
background: #ffffff;
cursor: text;
display: inline-block;
}
.selectize-input {
border: 1px solid #d0d0d0;
padding: 7px 10px;
display: inline-block;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.selectize-control.multi .selectize-input.has-items {
padding: 5px 10px 2px;
}
.selectize-input.full {
background-color: #ffffff;
}
.selectize-input.disabled,
.selectize-input.disabled * {
cursor: default !important;
}
.selectize-input.focus {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.selectize-input > * {
vertical-align: baseline;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 1px 3px;
background: #e6e6e6;
color: #333333;
border: 1px solid #cccccc;
}
.selectize-control.multi .selectize-input > div.active {
background: #0088cc;
color: #ffffff;
border: 1px solid #0077b3;
}
.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
color: #474747;
background: #fafafa;
border: 1px solid #e0e0e0;
}
.selectize-input > input {
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
-webkit-user-select: auto !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
display: none;
}
.selectize-input > input:focus {
outline: none !important;
}
.selectize-input::after {
content: ' ';
display: block;
clear: left;
}
.selectize-input.dropdown-active::before {
content: ' ';
display: block;
position: absolute;
background: #e5e5e5;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-dropdown {
position: absolute;
z-index: 10;
border: 1px solid #cccccc;
background: #ffffff;
margin: -1px 0 0 0;
border-top: 0 none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.selectize-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
background: rgba(255, 237, 40, 0.4);
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
padding: 3px 10px;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
color: #999999;
background: #ffffff;
cursor: default;
}
.selectize-dropdown .active {
background-color: #0088cc;
color: #ffffff;
}
.selectize-dropdown .active.create {
color: #ffffff;
}
.selectize-dropdown .create {
color: rgba(51, 51, 51, 0.5);
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: 200px;
}
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
cursor: pointer;
}
.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
cursor: text;
}
.selectize-control.single .selectize-input:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #000000 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: -4px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #000000 transparent;
}
.selectize-control.rtl.single .selectize-input:after {
left: 15px;
right: auto;
}
.selectize-control.rtl .selectize-input > input {
margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
opacity: 0.5;
background-color: #ffffff;
}
.selectize-dropdown {
margin: 2px 0 0 0;
z-index: 1000;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown .optgroup-header {
font-size: 11px;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.selectize-dropdown .optgroup:first-child:before {
display: none;
}
.selectize-dropdown .optgroup:before {
content: ' ';
display: block;
*width: 100%;
height: 1px;
margin: 9px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
margin-left: -10px;
margin-right: -10px;
}
.selectize-dropdown [data-selectable].active {
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.selectize-dropdown-content {
padding: 5px 0;
}
.selectize-dropdown-header {
padding: 6px 10px;
}
.selectize-input {
-webkit-transition: border linear .2s, box-shadow linear .2s;
-moz-transition: border linear .2s, box-shadow linear .2s;
-o-transition: border linear .2s, box-shadow linear .2s;
transition: border linear .2s, box-shadow linear .2s;
}
.selectize-input.dropdown-active {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.selectize-input.dropdown-active::before {
display: none;
}
.selectize-input.input-active,
.selectize-input.input-active:hover,
.selectize-control.multi .selectize-input.focus {
background: #ffffff !important;
border-color: rgba(82, 168, 236, 0.8) !important;
outline: 0 !important;
outline: thin dotted \9 !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
}
.selectize-control.single .selectize-input {
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e6e6e6;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.selectize-control.single .selectize-input:hover,
.selectize-control.single .selectize-input:focus,
.selectize-control.single .selectize-input:active,
.selectize-control.single .selectize-input.active,
.selectize-control.single .selectize-input.disabled,
.selectize-control.single .selectize-input[disabled] {
color: #333333;
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.selectize-control.single .selectize-input:active,
.selectize-control.single .selectize-input.active {
background-color: #cccccc \9;
}
.selectize-control.single .selectize-input:hover {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.selectize-control.single .selectize-input.disabled {
background: #e6e6e6 !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.selectize-control.multi .selectize-input {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.selectize-control.multi .selectize-input.has-items {
padding-left: 7px;
padding-right: 7px;
}
.selectize-control.multi .selectize-input > div {
color: #333333;
text-shadow: none;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e6e6e6;
border: 1px solid #cccccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.selectize-control.multi .selectize-input > div.active {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
color: #ffffff;
text-shadow: none;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
border-color: #0077b3 #0077b3 #004466;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #0088cc;
border: 1px solid #0088cc;
}

View file

@ -0,0 +1,401 @@
/**
* selectize.bootstrap3.css (v0.12.0) - Bootstrap 3 Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
-webkit-box-shadow: inset 0 0 12px 4px #ffffff;
box-shadow: inset 0 0 12px 4px #ffffff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: '!';
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown-header {
position: relative;
padding: 3px 12px;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.selectize-dropdown-header-close {
position: absolute;
right: 12px;
top: 50%;
color: #333333;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
color: #000000;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button [data-value] {
position: relative;
padding-right: 24px !important;
}
.selectize-control.plugin-remove_button [data-value] .remove {
z-index: 1;
/* fixes ie bug (see #392) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 17px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 1px 0 0 0;
border-left: 1px solid rgba(0, 0, 0, 0);
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-control.plugin-remove_button [data-value] .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button [data-value].active .remove {
border-left-color: rgba(0, 0, 0, 0);
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
background: none;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
border-left-color: rgba(77, 77, 77, 0);
}
.selectize-control {
position: relative;
}
.selectize-dropdown,
.selectize-input,
.selectize-input input {
color: #333333;
font-family: inherit;
font-size: inherit;
line-height: 20px;
-webkit-font-smoothing: inherit;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active {
background: #ffffff;
cursor: text;
display: inline-block;
}
.selectize-input {
border: 1px solid #cccccc;
padding: 6px 12px;
display: inline-block;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.selectize-control.multi .selectize-input.has-items {
padding: 5px 12px 2px;
}
.selectize-input.full {
background-color: #ffffff;
}
.selectize-input.disabled,
.selectize-input.disabled * {
cursor: default !important;
}
.selectize-input.focus {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.selectize-input > * {
vertical-align: baseline;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 1px 3px;
background: #efefef;
color: #333333;
border: 0 solid rgba(0, 0, 0, 0);
}
.selectize-control.multi .selectize-input > div.active {
background: #428bca;
color: #ffffff;
border: 0 solid rgba(0, 0, 0, 0);
}
.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
color: #808080;
background: #ffffff;
border: 0 solid rgba(77, 77, 77, 0);
}
.selectize-input > input {
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
-webkit-user-select: auto !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
display: none;
}
.selectize-input > input:focus {
outline: none !important;
}
.selectize-input::after {
content: ' ';
display: block;
clear: left;
}
.selectize-input.dropdown-active::before {
content: ' ';
display: block;
position: absolute;
background: #ffffff;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-dropdown {
position: absolute;
z-index: 10;
border: 1px solid #d0d0d0;
background: #ffffff;
margin: -1px 0 0 0;
border-top: 0 none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.selectize-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
background: rgba(255, 237, 40, 0.4);
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
padding: 3px 12px;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
color: #777777;
background: #ffffff;
cursor: default;
}
.selectize-dropdown .active {
background-color: #f5f5f5;
color: #262626;
}
.selectize-dropdown .active.create {
color: #262626;
}
.selectize-dropdown .create {
color: rgba(51, 51, 51, 0.5);
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: 200px;
}
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
cursor: pointer;
}
.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
cursor: text;
}
.selectize-control.single .selectize-input:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: 17px;
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #333333 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: -4px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #333333 transparent;
}
.selectize-control.rtl.single .selectize-input:after {
left: 17px;
right: auto;
}
.selectize-control.rtl .selectize-input > input {
margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
opacity: 0.5;
background-color: #ffffff;
}
.selectize-dropdown,
.selectize-dropdown.form-control {
height: auto;
padding: 0;
margin: 2px 0 0 0;
z-index: 1000;
background: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.selectize-dropdown .optgroup-header {
font-size: 12px;
line-height: 1.42857143;
}
.selectize-dropdown .optgroup:first-child:before {
display: none;
}
.selectize-dropdown .optgroup:before {
content: ' ';
display: block;
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
margin-left: -12px;
margin-right: -12px;
}
.selectize-dropdown-content {
padding: 5px 0;
}
.selectize-dropdown-header {
padding: 6px 12px;
}
.selectize-input {
min-height: 34px;
}
.selectize-input.dropdown-active {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.selectize-input.dropdown-active::before {
display: none;
}
.selectize-input.focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.has-error .selectize-input {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .selectize-input:focus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.selectize-control.multi .selectize-input.has-items {
padding-left: 9px;
padding-right: 9px;
}
.selectize-control.multi .selectize-input > div {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.form-control.selectize-control {
padding: 0;
height: auto;
border: none;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

View file

@ -0,0 +1,317 @@
/**
* selectize.css (v0.12.0)
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
/*.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
-webkit-box-shadow: inset 0 0 12px 4px #ffffff;
box-shadow: inset 0 0 12px 4px #ffffff;
}*/
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: '!';
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown-header {
position: relative;
padding: 5px 8px;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.selectize-dropdown-header-close {
position: absolute;
right: 8px;
top: 50%;
color: #303030;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
color: #000000;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button [data-value] {
position: relative;
padding-right: 24px !important;
}
.selectize-control.plugin-remove_button [data-value] .remove {
z-index: 1;
/* fixes ie bug (see #392) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 17px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 2px 0 0 0;
border-left: 1px solid #d0d0d0;
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-control.plugin-remove_button [data-value] .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button [data-value].active .remove {
border-left-color: #cacaca;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
background: none;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
border-left-color: #ffffff;
}
.selectize-control {
position: relative;
}
.selectize-dropdown,
.selectize-input,
.selectize-input input {
color: #303030;
font-family: inherit;
font-size: 13px;
line-height: 18px;
-webkit-font-smoothing: inherit;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active {
background: #ffffff;
cursor: text;
display: inline-block;
}
.selectize-input {
border: 1px solid #d0d0d0;
padding: 8px 8px;
display: inline-block;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.selectize-control.multi .selectize-input.has-items {
padding: 6px 8px 3px;
}
.selectize-input.full {
background-color: #ffffff;
}
.selectize-input.disabled,
.selectize-input.disabled * {
cursor: default !important;
}
.selectize-input.focus {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.selectize-input > * {
vertical-align: baseline;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
/*.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 2px 6px;
background: #f2f2f2;
color: #303030;
border: 0 solid #d0d0d0;
}
.selectize-control.multi .selectize-input > div.active {
background: #e8e8e8;
color: #303030;
border: 0 solid #cacaca;
}
.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
color: #7d7d7d;
background: #ffffff;
border: 0 solid #ffffff;
}*/
.selectize-input > input {
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 2px 0 0 !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
-webkit-user-select: auto !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
display: none;
}
.selectize-input > input:focus {
outline: none !important;
}
.selectize-input::after {
content: ' ';
display: block;
clear: left;
}
.selectize-input.dropdown-active::before {
content: ' ';
display: block;
position: absolute;
background: #f0f0f0;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-dropdown {
position: absolute;
z-index: 10;
border: 1px solid #d0d0d0;
background: #ffffff;
margin: -1px 0 0 0;
border-top: 0 none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.selectize-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
background: rgba(125, 168, 208, 0.2);
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
padding: 5px 8px;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
color: #303030;
background: #ffffff;
cursor: default;
}
.selectize-dropdown .active {
background-color: #f5fafd;
color: #495c68;
}
.selectize-dropdown .active.create {
color: #495c68;
}
.selectize-dropdown .create {
color: rgba(48, 48, 48, 0.5);
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: 200px;
}
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
cursor: pointer;
}
.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
cursor: text;
}
.selectize-control.single .selectize-input:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #808080 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: -4px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #808080 transparent;
}
.selectize-control.rtl.single .selectize-input:after {
left: 15px;
right: auto;
}
.selectize-control.rtl .selectize-input > input {
margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
opacity: 0.5;
background-color: #fafafa;
}

View file

@ -0,0 +1,387 @@
/**
* selectize.default.css (v0.12.0) - Default Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
-webkit-box-shadow: inset 0 0 12px 4px #ffffff;
box-shadow: inset 0 0 12px 4px #ffffff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: '!';
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown-header {
position: relative;
padding: 5px 8px;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.selectize-dropdown-header-close {
position: absolute;
right: 8px;
top: 50%;
color: #303030;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
color: #000000;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button [data-value] {
position: relative;
padding-right: 24px !important;
}
.selectize-control.plugin-remove_button [data-value] .remove {
z-index: 1;
/* fixes ie bug (see #392) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 17px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 2px 0 0 0;
border-left: 1px solid #0073bb;
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-control.plugin-remove_button [data-value] .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button [data-value].active .remove {
border-left-color: #00578d;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
background: none;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
border-left-color: #aaaaaa;
}
.selectize-control {
position: relative;
}
.selectize-dropdown,
.selectize-input,
.selectize-input input {
color: #303030;
font-family: inherit;
font-size: 13px;
line-height: 18px;
-webkit-font-smoothing: inherit;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active {
background: #ffffff;
cursor: text;
display: inline-block;
}
.selectize-input {
border: 1px solid #d0d0d0;
padding: 8px 8px;
display: inline-block;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.selectize-control.multi .selectize-input.has-items {
padding: 5px 8px 2px;
}
.selectize-input.full {
background-color: #ffffff;
}
.selectize-input.disabled,
.selectize-input.disabled * {
cursor: default !important;
}
.selectize-input.focus {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.selectize-input > * {
vertical-align: baseline;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 2px 6px;
background: #1da7ee;
color: #ffffff;
border: 1px solid #0073bb;
}
.selectize-control.multi .selectize-input > div.active {
background: #92c836;
color: #ffffff;
border: 1px solid #00578d;
}
.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
color: #ffffff;
background: #d2d2d2;
border: 1px solid #aaaaaa;
}
.selectize-input > input {
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 1px !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
-webkit-user-select: auto !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
display: none;
}
.selectize-input > input:focus {
outline: none !important;
}
.selectize-input::after {
content: ' ';
display: block;
clear: left;
}
.selectize-input.dropdown-active::before {
content: ' ';
display: block;
position: absolute;
background: #f0f0f0;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-dropdown {
position: absolute;
z-index: 10;
border: 1px solid #d0d0d0;
background: #ffffff;
margin: -1px 0 0 0;
border-top: 0 none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.selectize-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
background: rgba(125, 168, 208, 0.2);
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
padding: 5px 8px;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
color: #303030;
background: #ffffff;
cursor: default;
}
.selectize-dropdown .active {
background-color: #f5fafd;
color: #495c68;
}
.selectize-dropdown .active.create {
color: #495c68;
}
.selectize-dropdown .create {
color: rgba(48, 48, 48, 0.5);
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: 200px;
}
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
cursor: pointer;
}
.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
cursor: text;
}
.selectize-control.single .selectize-input:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #808080 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: -4px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #808080 transparent;
}
.selectize-control.rtl.single .selectize-input:after {
left: 15px;
right: auto;
}
.selectize-control.rtl .selectize-input > input {
margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
opacity: 0.5;
background-color: #fafafa;
}
.selectize-control.multi .selectize-input.has-items {
padding-left: 5px;
padding-right: 5px;
}
.selectize-control.multi .selectize-input.disabled [data-value] {
color: #999;
text-shadow: none;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.selectize-control.multi .selectize-input.disabled [data-value],
.selectize-control.multi .selectize-input.disabled [data-value] .remove {
border-color: #e6e6e6;
}
.selectize-control.multi .selectize-input.disabled [data-value] .remove {
background: none;
}
.selectize-control.multi .selectize-input [data-value] {
text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #1b9dec;
background-image: -moz-linear-gradient(top, #1da7ee, #178ee9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1da7ee), to(#178ee9));
background-image: -webkit-linear-gradient(top, #1da7ee, #178ee9);
background-image: -o-linear-gradient(top, #1da7ee, #178ee9);
background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1da7ee', endColorstr='#ff178ee9', GradientType=0);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
box-shadow: 0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03);
}
.selectize-control.multi .selectize-input [data-value].active {
background-color: #0085d4;
background-image: -moz-linear-gradient(top, #008fd8, #0075cf);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#008fd8), to(#0075cf));
background-image: -webkit-linear-gradient(top, #008fd8, #0075cf);
background-image: -o-linear-gradient(top, #008fd8, #0075cf);
background-image: linear-gradient(to bottom, #008fd8, #0075cf);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff008fd8', endColorstr='#ff0075cf', GradientType=0);
}
.selectize-control.single .selectize-input {
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
box-shadow: 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
background-color: #f9f9f9;
background-image: -moz-linear-gradient(top, #fefefe, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fefefe), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #fefefe, #f2f2f2);
background-image: -o-linear-gradient(top, #fefefe, #f2f2f2);
background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffefefe', endColorstr='#fff2f2f2', GradientType=0);
}
.selectize-control.single .selectize-input,
.selectize-dropdown.single {
border-color: #b8b8b8;
}
.selectize-dropdown .optgroup-header {
padding-top: 7px;
font-weight: bold;
font-size: 0.85em;
}
.selectize-dropdown .optgroup {
border-top: 1px solid #f0f0f0;
}
.selectize-dropdown .optgroup:first-child {
border-top: 0 none;
}

View file

@ -0,0 +1,364 @@
/**
* selectize.legacy.css (v0.12.0) - Default Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
-webkit-box-shadow: inset 0 0 12px 4px #ffffff;
box-shadow: inset 0 0 12px 4px #ffffff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: '!';
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown-header {
position: relative;
padding: 7px 10px;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.selectize-dropdown-header-close {
position: absolute;
right: 10px;
top: 50%;
color: #303030;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
color: #000000;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button [data-value] {
position: relative;
padding-right: 24px !important;
}
.selectize-control.plugin-remove_button [data-value] .remove {
z-index: 1;
/* fixes ie bug (see #392) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 17px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 1px 0 0 0;
border-left: 1px solid #74b21e;
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.selectize-control.plugin-remove_button [data-value] .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button [data-value].active .remove {
border-left-color: #6f9839;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
background: none;
}
.selectize-control.plugin-remove_button .disabled [data-value] .remove {
border-left-color: #b4b4b4;
}
.selectize-control {
position: relative;
}
.selectize-dropdown,
.selectize-input,
.selectize-input input {
color: #303030;
font-family: inherit;
font-size: 13px;
line-height: 20px;
-webkit-font-smoothing: inherit;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active {
background: #ffffff;
cursor: text;
display: inline-block;
}
.selectize-input {
border: 1px solid #d0d0d0;
padding: 10px 10px;
display: inline-block;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.selectize-control.multi .selectize-input.has-items {
padding: 8px 10px 4px;
}
.selectize-input.full {
background-color: #f2f2f2;
}
.selectize-input.disabled,
.selectize-input.disabled * {
cursor: default !important;
}
.selectize-input.focus {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.selectize-input > * {
vertical-align: baseline;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 4px 4px 0;
padding: 1px 5px;
background: #b8e76f;
color: #3d5d18;
border: 1px solid #74b21e;
}
.selectize-control.multi .selectize-input > div.active {
background: #92c836;
color: #303030;
border: 1px solid #6f9839;
}
.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
color: #878787;
background: #f8f8f8;
border: 1px solid #b4b4b4;
}
.selectize-input > input {
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 2px 0 0 !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
-webkit-user-select: auto !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
display: none;
}
.selectize-input > input:focus {
outline: none !important;
}
.selectize-input::after {
content: ' ';
display: block;
clear: left;
}
.selectize-input.dropdown-active::before {
content: ' ';
display: block;
position: absolute;
background: #f0f0f0;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-dropdown {
position: absolute;
z-index: 10;
border: 1px solid #d0d0d0;
background: #ffffff;
margin: -1px 0 0 0;
border-top: 0 none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.selectize-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
background: rgba(255, 237, 40, 0.4);
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
padding: 7px 10px;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
color: #303030;
background: #f8f8f8;
cursor: default;
}
.selectize-dropdown .active {
background-color: #fffceb;
color: #303030;
}
.selectize-dropdown .active.create {
color: #303030;
}
.selectize-dropdown .create {
color: rgba(48, 48, 48, 0.5);
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: 200px;
}
.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
cursor: pointer;
}
.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
cursor: text;
}
.selectize-control.single .selectize-input:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #808080 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: -4px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #808080 transparent;
}
.selectize-control.rtl.single .selectize-input:after {
left: 15px;
right: auto;
}
.selectize-control.rtl .selectize-input > input {
margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
opacity: 0.5;
background-color: #fafafa;
}
.selectize-control.multi .selectize-input [data-value] {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #b2e567;
background-image: -moz-linear-gradient(top, #b8e76f, #a9e25c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b8e76f), to(#a9e25c));
background-image: -webkit-linear-gradient(top, #b8e76f, #a9e25c);
background-image: -o-linear-gradient(top, #b8e76f, #a9e25c);
background-image: linear-gradient(to bottom, #b8e76f, #a9e25c);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb8e76f', endColorstr='#ffa9e25c', GradientType=0);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.selectize-control.multi .selectize-input [data-value].active {
background-color: #88c332;
background-image: -moz-linear-gradient(top, #92c836, #7abc2c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#92c836), to(#7abc2c));
background-image: -webkit-linear-gradient(top, #92c836, #7abc2c);
background-image: -o-linear-gradient(top, #92c836, #7abc2c);
background-image: linear-gradient(to bottom, #92c836, #7abc2c);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff92c836', endColorstr='#ff7abc2c', GradientType=0);
}
.selectize-control.single .selectize-input {
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 0 #e0e0e0, 0 3px 0 #c8c8c8, 0 4px 1px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 0 #e0e0e0, 0 3px 0 #c8c8c8, 0 4px 1px rgba(0,0,0,0.1);
background-color: #f3f3f3;
background-image: -moz-linear-gradient(top, #f5f5f5, #efefef);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#efefef));
background-image: -webkit-linear-gradient(top, #f5f5f5, #efefef);
background-image: -o-linear-gradient(top, #f5f5f5, #efefef);
background-image: linear-gradient(to bottom, #f5f5f5, #efefef);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffefefef', GradientType=0);
}
.selectize-control.single .selectize-input,
.selectize-dropdown.single {
border-color: #b8b8b8;
}
.selectize-dropdown .optgroup-header {
font-weight: bold;
font-size: 0.8em;
border-bottom: 1px solid #f0f0f0;
border-top: 1px solid #f0f0f0;
}

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,16 @@
.selectize-control.plugin-drag_drop {
&.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0,0,0,0.06) !important;
border: 0 none !important;
.selectize-box-shadow(inset 0 0 12px 4px #fff);
}
.ui-sortable-placeholder::after {
content: '!';
visibility: hidden;
}
.ui-sortable-helper {
.selectize-box-shadow(0 2px 5px rgba(0,0,0,0.2));
}
}

View file

@ -0,0 +1,20 @@
.selectize-dropdown-header {
position: relative;
padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
border-bottom: 1px solid @selectize-color-border;
background: mix(@selectize-color-dropdown, @selectize-color-border, 85%);
.selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
}
.selectize-dropdown-header-close {
position: absolute;
right: @selectize-padding-dropdown-item-x;
top: 50%;
color: @selectize-color-text;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
color: darken(@selectize-color-text, 25%);
}

View file

@ -0,0 +1,17 @@
.selectize-dropdown.plugin-optgroup_columns {
.optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
float: left;
.selectize-box-sizing(border-box);
}
.optgroup:last-child {
border-right: 0 none;
}
.optgroup:before {
display: none;
}
.optgroup-header {
border-top: 0 none;
}
}

View file

@ -0,0 +1,37 @@
.selectize-control.plugin-remove_button {
[data-value] {
position: relative;
padding-right: 24px !important;
}
[data-value] .remove {
z-index: 1; /* fixes ie bug (see #392) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 17px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: @selectize-padding-item-y 0 0 0;
border-left: 1px solid @selectize-color-item-border;
.selectize-border-radius(0 2px 2px 0);
.selectize-box-sizing(border-box);
}
[data-value] .remove:hover {
background: rgba(0,0,0,0.05);
}
[data-value].active .remove {
border-left-color: @selectize-color-item-active-border;
}
.disabled [data-value] .remove:hover {
background: none;
}
.disabled [data-value] .remove {
border-left-color: lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
}
}

View file

@ -0,0 +1,161 @@
/**
* selectize.bootstrap2.css (v0.12.0) - Bootstrap 2 Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
@import "selectize";
@selectize-font-family: @baseFontFamily;
@selectize-font-size: @baseFontSize;
@selectize-line-height: @baseLineHeight;
@selectize-color-text: @textColor;
@selectize-color-highlight: rgba(255,237,40,0.4);
@selectize-color-input: @inputBackground;
@selectize-color-input-full: @inputBackground;
@selectize-color-disabled: @inputBackground;
@selectize-color-item: @btnBackgroundHighlight;
@selectize-color-item-border: @btnBorder;
@selectize-color-item-active: @dropdownLinkBackgroundHover;
@selectize-color-item-active-text: @dropdownLinkColorHover;
@selectize-color-item-active-border: darken(@selectize-color-item-active, 5%);
@selectize-color-optgroup: @dropdownBackground;
@selectize-color-optgroup-text: @grayLight;
@selectize-color-optgroup-border: @dropdownDividerTop;
@selectize-color-dropdown: @dropdownBackground;
@selectize-color-dropdown-border: @inputBorder;
@selectize-color-dropdown-border-top: @dropdownDividerTop;
@selectize-color-dropdown-item-active: @dropdownLinkBackgroundHover;
@selectize-color-dropdown-item-active-text: @dropdownLinkColorHover;
@selectize-color-dropdown-item-create-active-text: @dropdownLinkColorHover;
@selectize-lighten-disabled-item: 8%;
@selectize-lighten-disabled-item-text: 8%;
@selectize-lighten-disabled-item-border: 8%;
@selectize-opacity-disabled: 0.5;
@selectize-shadow-input: none;
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
@selectize-border-radius: @inputBorderRadius;
@selectize-padding-x: 10px;
@selectize-padding-y: 7px;
@selectize-padding-dropdown-item-x: @selectize-padding-x;
@selectize-padding-dropdown-item-y: 3px;
@selectize-padding-item-x: 3px;
@selectize-padding-item-y: 1px;
@selectize-margin-item-x: 3px;
@selectize-margin-item-y: 3px;
@selectize-caret-margin: 0;
@selectize-arrow-size: 5px;
@selectize-arrow-color: @black;
@selectize-arrow-offset: @selectize-padding-x + 5px;
@selectize-width-item-border: 1px;
.selectize-dropdown {
margin: 2px 0 0 0;
z-index: @zindexDropdown;
border: 1px solid @dropdownBorder;
border-radius: @baseBorderRadius;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
.optgroup-header {
font-size: 11px;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
.optgroup:first-child:before {
display: none;
}
.optgroup:before {
content: ' ';
display: block;
.nav-divider();
margin-left: @selectize-padding-dropdown-item-x * -1;
margin-right: @selectize-padding-dropdown-item-x * -1;
}
[data-selectable].active {
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}
}
.selectize-dropdown-content {
padding: 5px 0;
}
.selectize-dropdown-header {
padding: @selectize-padding-dropdown-item-y * 2 @selectize-padding-dropdown-item-x;
}
.selectize-input {
.transition(~"border linear .2s, box-shadow linear .2s");
&.dropdown-active {
.selectize-border-radius(@selectize-border-radius);
}
&.dropdown-active::before {
display: none;
}
&.input-active, &.input-active:hover, .selectize-control.multi &.focus {
background: @selectize-color-input !important;
border-color: rgba(82,168,236,.8) !important;
outline: 0 !important;
outline: thin dotted \9 !important;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)") !important;
}
}
.selectize-control {
&.single {
.selectize-input {
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
&:hover {
color: @grayDark;
text-decoration: none;
background-position: 0 -15px;
.transition(background-position .1s linear);
}
&.disabled {
background: @btnBackgroundHighlight !important;
.box-shadow(none);
}
}
}
&.multi {
.selectize-input {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
&.has-items {
@padding-x: @selectize-padding-x - @selectize-padding-item-x;
padding-left: @padding-x;
padding-right: @padding-x;
}
}
.selectize-input > div {
.gradientBar(@btnBackground, @btnBackgroundHighlight, @selectize-color-item-text, none);
*background-color: @selectize-color-item;
border: @selectize-width-item-border solid @selectize-color-item-border;
.border-radius(@baseBorderRadius);
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
&.active {
.box-shadow(~"0 1px 2px rgba(0,0,0,.05)");
.gradientBar(@selectize-color-item-active, @selectize-color-item-active-border, @selectize-color-item-active-text, none);
*background-color: @selectize-color-item-active;
border: @selectize-width-item-border solid @dropdownLinkBackgroundHover;
}
}
}
}

View file

@ -0,0 +1,150 @@
/**
* selectize.bootstrap3.css (v0.12.0) - Bootstrap 3 Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
@import "selectize";
@selectize-fonts-family: inherit;
@selectize-font-size: inherit;
@selectize-line-height: @line-height-computed;
@selectize-color-text: @text-color;
@selectize-color-highlight: rgba(255,237,40,0.4);
@selectize-color-input: @input-bg;
@selectize-color-input-full: @input-bg;
@selectize-color-input-error: @state-danger-text;
@selectize-color-input-error-focus: darken(@selectize-color-input-error, 10%);
@selectize-color-disabled: @input-bg;
@selectize-color-item: #efefef;
@selectize-color-item-border: rgba(0,0,0,0);
@selectize-color-item-active: @component-active-bg;
@selectize-color-item-active-text: #fff;
@selectize-color-item-active-border: rgba(0,0,0,0);
@selectize-color-optgroup: @dropdown-bg;
@selectize-color-optgroup-text: @dropdown-header-color;
@selectize-color-optgroup-border: @dropdown-divider-bg;
@selectize-color-dropdown: @dropdown-bg;
@selectize-color-dropdown-border-top: mix(@input-border, @input-bg, 0.8);
@selectize-color-dropdown-item-active: @dropdown-link-hover-bg;
@selectize-color-dropdown-item-active-text: @dropdown-link-hover-color;
@selectize-color-dropdown-item-create-active-text: @dropdown-link-hover-color;
@selectize-opacity-disabled: 0.5;
@selectize-shadow-input: none;
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
@selectize-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, .075);
@selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@selectize-color-input-error, 20%);
@selectize-border: 1px solid @input-border;
@selectize-border-radius: @input-border-radius;
@selectize-width-item-border: 0;
@selectize-padding-x: @padding-base-horizontal;
@selectize-padding-y: @padding-base-vertical;
@selectize-padding-dropdown-item-x: @padding-base-horizontal;
@selectize-padding-dropdown-item-y: 3px;
@selectize-padding-item-x: 3px;
@selectize-padding-item-y: 1px;
@selectize-margin-item-x: 3px;
@selectize-margin-item-y: 3px;
@selectize-caret-margin: 0;
@selectize-arrow-size: 5px;
@selectize-arrow-color: @selectize-color-text;
@selectize-arrow-offset: @selectize-padding-x + 5px;
.selectize-dropdown, .selectize-dropdown.form-control {
height: auto;
padding: 0;
margin: 2px 0 0 0;
z-index: @zindex-dropdown;
background: @selectize-color-dropdown;
border: 1px solid @dropdown-fallback-border;
border: 1px solid @dropdown-border;
.selectize-border-radius(@border-radius-base);
.selectize-box-shadow(0 6px 12px rgba(0,0,0,.175));
}
.selectize-dropdown {
.optgroup-header {
font-size: @font-size-small;
line-height: @line-height-base;
}
.optgroup:first-child:before {
display: none;
}
.optgroup:before {
content: ' ';
display: block;
.nav-divider();
margin-left: @selectize-padding-dropdown-item-x * -1;
margin-right: @selectize-padding-dropdown-item-x * -1;
}
}
.selectize-dropdown-content {
padding: 5px 0;
}
.selectize-dropdown-header {
padding: @selectize-padding-dropdown-item-y * 2 @selectize-padding-dropdown-item-x;
}
.selectize-input {
min-height: @input-height-base;
&.dropdown-active {
.selectize-border-radius(@selectize-border-radius);
}
&.dropdown-active::before {
display: none;
}
&.focus {
@color: @input-border-focus;
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
border-color: @color;
outline: 0;
.selectize-box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
.has-error .selectize-input {
border-color: @selectize-color-input-error;
.selectize-box-shadow(@selectize-shadow-input-error);
&:focus {
border-color: @selectize-color-input-error-focus;
.selectize-box-shadow(@selectize-shadow-input-error-focus);
}
}
.selectize-control {
&.multi {
.selectize-input.has-items {
padding-left: @selectize-padding-x - @selectize-padding-item-x;
padding-right: @selectize-padding-x - @selectize-padding-item-x;
}
.selectize-input > div {
.selectize-border-radius(@selectize-border-radius - 1px);
}
}
}
.form-control.selectize-control {
padding: 0;
height: auto;
border: none;
background: none;
.selectize-box-shadow(none);
.selectize-border-radius(0);
}

View file

@ -0,0 +1,84 @@
/**
* selectize.default.css (v0.12.0) - Default Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
@import "selectize";
@selectize-color-item: #1da7ee;
@selectize-color-item-text: #fff;
@selectize-color-item-active-text: #fff;
@selectize-color-item-border: #0073bb;
@selectize-color-item-active: #92c836;
@selectize-color-item-active-border: #00578d;
@selectize-width-item-border: 1px;
@selectize-caret-margin: 0 1px;
.selectize-control {
&.multi {
.selectize-input {
&.has-items {
@padding-x: @selectize-padding-x - 3px;
padding-left: @padding-x;
padding-right: @padding-x;
}
&.disabled [data-value] {
color: #999;
text-shadow: none;
background: none;
.selectize-box-shadow(none);
&, .remove {
border-color: #e6e6e6;
}
.remove {
background: none;
}
}
[data-value] {
text-shadow: 0 1px 0 rgba(0,51,83,0.3);
.selectize-border-radius(3px);
.selectize-vertical-gradient(#1da7ee, #178ee9);
.selectize-box-shadow(~"0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03)");
&.active {
.selectize-vertical-gradient(#008fd8, #0075cf);
}
}
}
}
&.single {
.selectize-input {
.selectize-box-shadow(~"0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8)");
.selectize-vertical-gradient(#fefefe, #f2f2f2);
}
}
}
.selectize-control.single .selectize-input, .selectize-dropdown.single {
border-color: #b8b8b8;
}
.selectize-dropdown {
.optgroup-header {
padding-top: @selectize-padding-dropdown-item-y + 2px;
font-weight: bold;
font-size: 0.85em;
}
.optgroup {
border-top: 1px solid @selectize-color-dropdown-border-top;
&:first-child {
border-top: 0 none;
}
}
}

View file

@ -0,0 +1,75 @@
/**
* selectize.legacy.css (v0.12.0) - Default Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
@import "selectize";
@selectize-font-size: 13px;
@selectize-line-height: 20px;
@selectize-color-input-full: #f2f2f2;
@selectize-color-item: #b8e76f;
@selectize-color-item-text: #3d5d18;
@selectize-color-item-border: #74b21e;
@selectize-color-item-active: #92c836;
@selectize-color-item-active-border: #6f9839;
@selectize-color-highlight: rgba(255,237,40,0.4);
@selectize-color-dropdown-item-active: #fffceb;
@selectize-color-dropdown-item-active-text: @selectize-color-text;
@selectize-color-optgroup: #f8f8f8;
@selectize-color-optgroup-text: @selectize-color-text;
@selectize-width-item-border: 1px;
@selectize-padding-x: 10px;
@selectize-padding-y: 10px;
@selectize-padding-item-x: 5px;
@selectize-padding-item-y: 1px;
@selectize-padding-dropdown-item-x: 10px;
@selectize-padding-dropdown-item-y: 7px;
@selectize-margin-item-x: 4px;
@selectize-margin-item-y: 4px;
.selectize-control {
&.multi {
.selectize-input [data-value] {
text-shadow: 0 1px 0 rgba(255,255,255,0.1);
.selectize-border-radius(3px);
.selectize-vertical-gradient(#b8e76f, #a9e25c);
.selectize-box-shadow(0 1px 1px rgba(0,0,0,0.1));
&.active {
.selectize-vertical-gradient(#92c836, #7abc2c);
}
}
}
&.single {
.selectize-input {
.selectize-box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 0 #e0e0e0, 0 3px 0 #c8c8c8, 0 4px 1px rgba(0,0,0,0.1)");
.selectize-vertical-gradient(#f5f5f5, #efefef);
}
}
}
.selectize-control.single .selectize-input, .selectize-dropdown.single {
border-color: #b8b8b8;
}
.selectize-dropdown {
.optgroup-header {
font-weight: bold;
font-size: 0.8em;
border-bottom: 1px solid @selectize-color-dropdown-border-top;
border-top: 1px solid @selectize-color-dropdown-border-top;
}
}

View file

@ -0,0 +1,295 @@
@import "plugins/drag_drop";
@import "plugins/dropdown_header";
@import "plugins/optgroup_columns";
@import "plugins/remove_button";
// base styles
@selectize-font-family: inherit;
@selectize-font-smoothing: inherit;
@selectize-font-size: 13px;
@selectize-line-height: 18px;
@selectize-color-text: #303030;
@selectize-color-border: #d0d0d0;
@selectize-color-highlight: rgba(125,168,208,0.2);
@selectize-color-input: #fff;
@selectize-color-input-full: @selectize-color-input;
@selectize-color-disabled: #fafafa;
@selectize-color-item: #f2f2f2;
@selectize-color-item-text: @selectize-color-text;
@selectize-color-item-border: #d0d0d0;
@selectize-color-item-active: #e8e8e8;
@selectize-color-item-active-text: @selectize-color-text;
@selectize-color-item-active-border: #cacaca;
@selectize-color-dropdown: #fff;
@selectize-color-dropdown-border: @selectize-color-border;
@selectize-color-dropdown-border-top: #f0f0f0;
@selectize-color-dropdown-item-active: #f5fafd;
@selectize-color-dropdown-item-active-text: #495c68;
@selectize-color-dropdown-item-create-text: rgba(red(@selectize-color-text), green(@selectize-color-text), blue(@selectize-color-text), 0.5);
@selectize-color-dropdown-item-create-active-text: @selectize-color-dropdown-item-active-text;
@selectize-color-optgroup: @selectize-color-dropdown;
@selectize-color-optgroup-text: @selectize-color-text;
@selectize-lighten-disabled-item: 30%;
@selectize-lighten-disabled-item-text: 30%;
@selectize-lighten-disabled-item-border: 30%;
@selectize-opacity-disabled: 0.5;
@selectize-shadow-input: inset 0 1px 1px rgba(0,0,0,0.1);
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
@selectize-border: 1px solid @selectize-color-border;
@selectize-dropdown-border: 1px solid @selectize-color-dropdown-border;
@selectize-border-radius: 3px;
@selectize-width-item-border: 0;
@selectize-max-height-dropdown: 200px;
@selectize-padding-x: 8px;
@selectize-padding-y: 8px;
@selectize-padding-item-x: 6px;
@selectize-padding-item-y: 2px;
@selectize-padding-dropdown-item-x: @selectize-padding-x;
@selectize-padding-dropdown-item-y: 5px;
@selectize-margin-item-x: 3px;
@selectize-margin-item-y: 3px;
@selectize-arrow-size: 5px;
@selectize-arrow-color: #808080;
@selectize-arrow-offset: 15px;
@selectize-caret-margin: 0 2px 0 0;
@selectize-caret-margin-rtl: 0 4px 0 -2px;
.selectize-border-radius (@radii) {
-webkit-border-radius: @radii;
-moz-border-radius: @radii;
border-radius: @radii;
}
.selectize-unselectable () {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.selectize-box-shadow (@shadow) {
-webkit-box-shadow: @shadow;
box-shadow: @shadow;
}
.selectize-box-sizing (@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.selectize-vertical-gradient (@color-top, @color-bottom) {
background-color: mix(@color-top, @color-bottom, 60%);
background-image: -moz-linear-gradient(top, @color-top, @color-bottom); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@color-top), to(@color-bottom)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @color-top, @color-bottom); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @color-top, @color-bottom); // Opera 11.10
background-image: linear-gradient(to bottom, @color-top, @color-bottom); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@color-top),argb(@color-bottom))); // IE9 and down
}
.selectize-control {
position: relative;
}
.selectize-dropdown, .selectize-input, .selectize-input input {
color: @selectize-color-text;
font-family: @selectize-font-family;
font-size: @selectize-font-size;
line-height: @selectize-line-height;
-webkit-font-smoothing: @selectize-font-smoothing;
}
.selectize-input, .selectize-control.single .selectize-input.input-active {
background: @selectize-color-input;
cursor: text;
display: inline-block;
}
.selectize-input {
border: @selectize-border;
padding: @selectize-padding-y @selectize-padding-x;
display: inline-block;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
.selectize-box-sizing(border-box);
.selectize-box-shadow(@selectize-shadow-input);
.selectize-border-radius(@selectize-border-radius);
.selectize-control.multi &.has-items {
@padding-x: @selectize-padding-x;
@padding-top: @selectize-padding-y - @selectize-padding-item-y - @selectize-width-item-border;
@padding-bottom: @selectize-padding-y - @selectize-padding-item-y - @selectize-margin-item-y - @selectize-width-item-border;
padding: @padding-top @padding-x @padding-bottom;
}
&.full {
background-color: @selectize-color-input-full;
}
&.disabled, &.disabled * {
cursor: default !important;
}
&.focus {
.selectize-box-shadow(@selectize-shadow-input-focus);
}
&.dropdown-active {
.selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
}
> * {
vertical-align: baseline;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.selectize-control.multi & > div {
cursor: pointer;
margin: 0 @selectize-margin-item-x @selectize-margin-item-y 0;
padding: @selectize-padding-item-y @selectize-padding-item-x;
background: @selectize-color-item;
color: @selectize-color-item-text;
border: @selectize-width-item-border solid @selectize-color-item-border;
&.active {
background: @selectize-color-item-active;
color: @selectize-color-item-active-text;
border: @selectize-width-item-border solid @selectize-color-item-active-border;
}
}
.selectize-control.multi &.disabled > div {
&, &.active {
color: lighten(desaturate(@selectize-color-item-text, 100%), @selectize-lighten-disabled-item-text);
background: lighten(desaturate(@selectize-color-item, 100%), @selectize-lighten-disabled-item);
border: @selectize-width-item-border solid lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
}
}
> input {
&::-ms-clear {
display: none;
}
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: @selectize-caret-margin !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
-webkit-user-select: auto !important;
.selectize-box-shadow(none) !important;
&:focus { outline: none !important; }
}
}
.selectize-input::after {
content: ' ';
display: block;
clear: left;
}
.selectize-input.dropdown-active::before {
content: ' ';
display: block;
position: absolute;
background: @selectize-color-dropdown-border-top;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-dropdown {
position: absolute;
z-index: 10;
border: @selectize-dropdown-border;
background: @selectize-color-dropdown;
margin: -1px 0 0 0;
border-top: 0 none;
.selectize-box-sizing(border-box);
.selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));
.selectize-border-radius(0 0 @selectize-border-radius @selectize-border-radius);
[data-selectable] {
cursor: pointer;
overflow: hidden;
.highlight {
background: @selectize-color-highlight;
.selectize-border-radius(1px);
}
}
[data-selectable], .optgroup-header {
padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
}
.optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.optgroup-header {
color: @selectize-color-optgroup-text;
background: @selectize-color-optgroup;
cursor: default;
}
.active {
background-color: @selectize-color-dropdown-item-active;
color: @selectize-color-dropdown-item-active-text;
&.create {
color: @selectize-color-dropdown-item-create-active-text;
}
}
.create {
color: @selectize-color-dropdown-item-create-text;
}
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: @selectize-max-height-dropdown;
}
.selectize-control.single .selectize-input {
&, input { cursor: pointer; }
&.input-active, &.input-active input { cursor: text; }
&:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: @selectize-arrow-offset;
margin-top: round(-1 * @selectize-arrow-size / 2);
width: 0;
height: 0;
border-style: solid;
border-width: @selectize-arrow-size @selectize-arrow-size 0 @selectize-arrow-size;
border-color: @selectize-arrow-color transparent transparent transparent;
}
&.dropdown-active:after {
margin-top: @selectize-arrow-size * -0.8;
border-width: 0 @selectize-arrow-size @selectize-arrow-size @selectize-arrow-size;
border-color: transparent transparent @selectize-arrow-color transparent;
}
}
.selectize-control.rtl {
&.single .selectize-input:after {
left: @selectize-arrow-offset;
right: auto;
}
.selectize-input > input {
margin: @selectize-caret-margin-rtl !important;
}
}
.selectize-control .selectize-input.disabled {
opacity: @selectize-opacity-disabled;
background-color: @selectize-color-disabled;
}

247
web/vendor/selectize.js/docs/api.md vendored Normal file
View file

@ -0,0 +1,247 @@
## Selectize API
Selectize controls can be controlled programmatically via the methods described in this section.
When initializing the control, the "selectize" property is
added on the original &lt;select&gt; / &lt;input&gt; element—this
property points to the underlying Selectize instance.
```js
// initialize the selectize control
var $select = $('select').selectize(options);
// fetch the instance
var selectize = $select[0].selectize;
```
#### Related Topics
- [Event Documentation](events.md)
- [Developing Plugins](plugins.md)
### Methods
<table width="100%">
<tr>
<th valign="top" colspan="3" align="left"><a href="#methods_options" name="methods_options">Options</a></th>
</tr>
<tr>
<th valign="top" width="120px" align="left">Method</th>
<th valign="top" align="left">Description</th>
</tr>
<tr>
<td valign="top"><code>addOption(data)</code></td>
<td valign="top">Adds an available option, or array of options. If it already exists, nothing will happen. Note: this does not refresh the options list dropdown (use refreshOptions() for that).</td>
</tr>
<tr>
<td valign="top"><code>updateOption(value, data)</code></td>
<td valign="top">Updates an option available for selection. If it is visible in the selected items or options dropdown, it will be re-rendered automatically.</td>
</tr>
<tr>
<td valign="top"><code>removeOption(value)</code></td>
<td valign="top">Removes the option identified by the given value.</td>
</tr>
<tr>
<td valign="top"><code>clearOptions()</code></td>
<td valign="top">Removes all options from the control.</td>
</tr>
<tr>
<td valign="top"><code>getOption(value)</code></td>
<td valign="top">Retrieves the jQuery element for the option identified by the given value.</td>
</tr>
<tr>
<td valign="top"><code>getAdjacentOption(value, direction)</code></td>
<td valign="top">Retrieves the jQuery element for the previous or next option, relative to the currently highlighted option. The "direction" argument should be 1 for "next" or -1 for "previous".</td>
</tr>
<tr>
<td valign="top"><code>refreshOptions(triggerDropdown)</code></td>
<td valign="top">Refreshes the list of available options shown in the autocomplete dropdown menu.</td>
</tr>
<tr>
<th valign="top" colspan="3" align="left"><a href="#methods_items" name="methods_items">Items</a></th>
</tr>
<tr>
<th valign="top" width="120px" align="left">Method</th>
<th valign="top" align="left">Description</th>
</tr>
<tr>
<td valign="top"><code>clear(silent)</code></td>
<td valign="top">Resets / clears all selected items from the control. If "silent" is truthy, no change event will be fired on the original input.</td>
</tr>
<tr>
<td valign="top"><code>getItem(value)</code></td>
<td valign="top">Returns the jQuery element of the item matching the given value.</td>
</tr>
<tr>
<td valign="top"><code>addItem(value, silent)</code></td>
<td valign="top">"Selects" an item. Adds it to the list at the current caret position. If "silent" is truthy, no change event will be fired on the original input.</td>
</tr>
<tr>
<td valign="top"><code>removeItem(value, silent)</code></td>
<td valign="top">Removes the selected item matching the provided value. If "silent" is truthy, no change event will be fired on the original input.</td>
</tr>
<tr>
<td valign="top"><code>createItem(value, callback)</code></td>
<td valign="top">Invokes the "create" method provided in the selectize options that should provide the data for the new item, given the user input. Once this completes, it will be added to the item list.</td>
</tr>
<tr>
<td valign="top"><code>refreshItems()</code></td>
<td valign="top">Re-renders the selected item lists.</td>
</tr>
<tr>
<th valign="top" colspan="3" align="left"><a href="#methods_items" name="methods_optgroups">Optgroups</a></th>
</tr>
<tr>
<th valign="top" width="120px" align="left">Method</th>
<th valign="top" align="left">Description</th>
</tr>
<tr>
<td valign="top"><code>addOptionGroup(id, data)</code></td>
<td valign="top">Registers a new optgroup for options to be bucketed into. The "id" argument refers to a value of the property in option identified by the "optgroupField" setting.</td>
</tr>
<tr>
<td valign="top"><code>removeOptionGroup(id)</code></td>
<td valign="top">Removes a single option group.</td>
</tr>
<tr>
<td valign="top"><code>clearOptionGroups()</code></td>
<td valign="top">Removes all existing option groups.</td>
</tr>
<tr>
<th valign="top" colspan="3" align="left"><a href="#methods_events" name="methods_events">Events</a></th>
</tr>
<tr>
<th valign="top" width="120px" align="left">Method</th>
<th valign="top" align="left">Description</th>
</tr>
<tr>
<td valign="top"><code>on(event, handler)</code></td>
<td valign="top">Adds an event listener.</td>
</tr>
<tr>
<td valign="top"><code>off(event, handler)</code></td>
<td valign="top">Removes an event listener.</td>
</tr>
<tr>
<td valign="top"><code>off(event)</code></td>
<td valign="top">Removes all event listeners.</td>
</tr>
<tr>
<td valign="top"><code>trigger(event, ...)</code></td>
<td valign="top">Triggers event listeners.</td>
</tr>
<tr>
<th valign="top" colspan="3" align="left"><a href="#methods_dropdown" name="methods_dropdown">Dropdown</a></th>
</tr>
<tr>
<th valign="top" width="120px" align="left">Method</th>
<th valign="top" align="left">Description</th>
</tr>
<tr>
<td valign="top"><code>open()</code></td>
<td valign="top">Shows the autocomplete dropdown containing the available options.</td>
</tr>
<tr>
<td valign="top"><code>close()</code></td>
<td valign="top">Closes the autocomplete dropdown menu.</td>
</tr>
<tr>
<td valign="top"><code>positionDropdown()</code></td>
<td valign="top">Calculates and applies the appropriate position of the dropdown.</td>
</tr>
<tr>
<th valign="top" colspan="3" align="left"><a href="#methods_other" name="methods_other">Other</a></th>
</tr>
<tr>
<th valign="top" width="120px" align="left">Method</th>
<th valign="top" align="left">Description</th>
</tr>
<tr>
<td valign="top"><code>destroy()</code></td>
<td valign="top">Destroys the control and unbinds event listeners so that it can be garbage collected.</td>
</tr>
<tr>
<td valign="top"><code>load(fn)</code></td>
<td valign="top">Loads options by invoking the the provided function. The function should accept one argument (callback) and invoke the callback with the results once they are available.</td>
</tr>
<tr>
<td valign="top"><code>focus()</code></td>
<td valign="top">Brings the control into focus.</td>
</tr>
<tr>
<td valign="top"><code>blur()</code></td>
<td valign="top">Forces the control out of focus.</td>
</tr>
<tr>
<td valign="top"><code>lock()</code></td>
<td valign="top">Disables user input on the control (note: the control can still receive focus).</td>
</tr>
<tr>
<td valign="top"><code>unlock()</code></td>
<td valign="top">Re-enables user input on the control.</td>
</tr>
<tr>
<td valign="top"><code>disable()</code></td>
<td valign="top">Disables user input on the control completely. While disabled, it cannot receive focus.</td>
</tr>
<tr>
<td valign="top"><code>enable()</code></td>
<td valign="top">Enables the control so that it can respond to focus and user input.</td>
</tr>
<tr>
<td valign="top"><code>getValue()</code></td>
<td valign="top">Returns the value of the control. If multiple items can be selected (e.g. <a href="usage.md#maxItems">&lt;select multiple&gt;</a>, this returns an array. If only one item can be selected, this returns a string.</td>
</tr>
<tr>
<td valign="top"><code>setValue(value, silent)</code></td>
<td valign="top">Resets the selected items to the given value.</td>
</tr>
<tr>
<td valign="top"><code>setCaret(index)</code></td>
<td valign="top">Moves the caret to the specified position ("index" being the index in the list of selected items).</td>
</tr>
<tr>
<td valign="top"><code>isFull()</code></td>
<td valign="top">Returns whether or not the user can select more items.</td>
</tr>
<tr>
<td valign="top"><code>clearCache(template)</code></td>
<td valign="top">Clears the render cache. Takes an optional template argument (e.g. "option", "item") to clear only that cache.</td>
</tr>
</table>
### Related Objects
#### Search
<table width="100%">
<tr>
<th valign="top" width="120px" align="left">Option</th>
<th valign="top" align="left">Description</th>
<th valign="top" width="60px" align="left">Type</th>
</tr>
<tr>
<td valign="top"><code>options</code></td>
<td valign="top">Original search options.</td>
<td valign="top"><code>object</code></td>
</tr>
<tr>
<td valign="top"><code>query</code></td>
<td valign="top">The raw user input.</td>
<td valign="top"><code>string</code></td>
</tr>
<tr>
<td valign="top"><code>tokens</code></td>
<td valign="top">An array containing parsed search tokens. A token is an object containing two properties: "string" and "regex".</td>
<td valign="top"><code>array</code></td>
</tr>
<tr>
<td valign="top"><code>total</code></td>
<td valign="top">The total number of results.</td>
<td valign="top"><code>int</code></td>
</tr>
<tr>
<td valign="top"><code>items</code></td>
<td valign="top">A list of matched results. Each result is an object containing two properties: "score" and "id".</td>
<td valign="top"><code>array</code></td>
</tr>
</table>

114
web/vendor/selectize.js/docs/events.md vendored Normal file
View file

@ -0,0 +1,114 @@
## Selectize API Events
In the [usage documentation](usage.md), a few callbacks are listed that
allow you to listen for certain events. Callbacks aren't always ideal though;
specifically when you wish to have multiple handlers.
Selectize instances have a basic event emitter interface that mimics jQuery, Backbone.js, et al:
```js
var handler = function() { /* ... */ };
selectize.on('event_name', handler);
selectize.off('event_name');
selectize.off('event_name', handler);
```
### List of Events
<table width="100%">
<tr>
<th valign="top" width="200px" align="left">Event</th>
<th valign="top" width="100px" align="left">Params</th>
<th valign="top" align="left">Description</th>
</tr>
<tr>
<td valign="top"><code>"initialize"</code></td>
<td valign="top"></td>
<td valign="top">Invoked once the control is completely initialized.</td>
</tr>
<tr>
<td valign="top"><code>"change"</code></td>
<td valign="top">value</td>
<td valign="top">Invoked when the value of the control changes.</td>
</tr>
<tr>
<td valign="top"><code>"focus"</code></td>
<td valign="top"></td>
<td valign="top">Invoked when the control gains focus.</td>
</tr>
<tr>
<td valign="top"><code>"blur"</code></td>
<td valign="top"></td>
<td valign="top">Invoked when the control loses focus.</td>
</tr>
<tr>
<td valign="top"><code>"item_add"</code></td>
<td valign="top">value, $item</td>
<td valign="top">Invoked when an item is selected.</td>
</tr>
<tr>
<td valign="top"><code>"item_remove"</code></td>
<td valign="top">value</td>
<td valign="top">Invoked when an item is deselected.</td>
</tr>
<tr>
<td valign="top"><code>"clear"</code></td>
<td valign="top"></td>
<td valign="top">Invoked when the control is manually cleared via the clear() method.</td>
</tr>
<tr>
<td valign="top"><code>"option_add"</code></td>
<td valign="top">value, data</td>
<td valign="top">Invoked when a new option is added to the available options list.</td>
</tr>
<tr>
<td valign="top"><code>"option_remove"</code></td>
<td valign="top">value</td>
<td valign="top">Invoked when an option is removed from the available options.</td>
</tr>
<tr>
<td valign="top"><code>"option_clear"</code></td>
<td valign="top"></td>
<td valign="top">Invoked when all options are removed from the control.</td>
</tr>
<tr>
<td valign="top"><code>"optgroup_add"</code></td>
<td valign="top">id, data</td>
<td valign="top">Invoked when a new option is added to the available options list.</td>
</tr>
<tr>
<td valign="top"><code>"optgroup_remove"</code></td>
<td valign="top">id</td>
<td valign="top">Invoked when an option group is removed.</td>
</tr>
<tr>
<td valign="top"><code>"optgroup_clear"</code></td>
<td valign="top"></td>
<td valign="top">Invoked when all option groups are removed.</td>
</tr>
<tr>
<td valign="top"><code>"dropdown_open"</code></td>
<td valign="top">$dropdown</td>
<td valign="top">Invoked when the dropdown opens.</td>
</tr>
<tr>
<td valign="top"><code>"dropdown_close"</code></td>
<td valign="top">$dropdown</td>
<td valign="top">Invoked when the dropdown closes.</td>
</tr>
<tr>
<td valign="top"><code>"type"</code></td>
<td valign="top">str</td>
<td valign="top">Invoked when the user types while filtering options.</td>
</tr>
<tr>
<td valign="top"><code>"load"</code></td>
<td valign="top">data</td>
<td valign="top">Invoked when new options have been loaded and added to the control (via the "load" option or "load" API method).</td>
</tr>
<tr>
<td valign="top"><code>"destroy"</code></td>
<td valign="top"></td>
<td valign="top">Invoked right before the control is destroyed.</td>
</tr>
</table>

101
web/vendor/selectize.js/docs/plugins.md vendored Normal file
View file

@ -0,0 +1,101 @@
## Selectize API Plugins
Via the [microplugin](https://github.com/brianreavis/microplugin.js) interface,
features can be added to Selectize without modifying the main library.
This is great because it protects against code bloat, allows for lean builds,
and allows for addons to be sanely isolated. The plugin system isn't meant
to be sexy; it's lean, makes very few assumptions, and gives the developer
complete control.
[**Example Plugins**](../src/plugins)
**A few notes:**
- All plugins live in their own folders in ["src/plugins"](../src/plugins).
- Plugin names should be in follow the format: `/[a-z_]+$`
- JS source should live in a "plugin.js" file (required).
- CSS should live in a "plugin.less" file (optional). It will be bundled at build time.
- Plugins are initialized right before the control is setup.
This means that if you want to listen for events on any of the control's
elements, you should override the `setup()` method (see ["DOM Events"](#dom-events)).
### Boilerplate
```js
Selectize.define('plugin_name', function(options) {
// options: plugin-specific options
// this: selectize instance
});
```
#### Adding Dependencies
```js
Selectize.define('plugin_name', function(options) {
this.require('another_plugin');
});
```
## Overriding Methods
Methods should be extended by [wrapping them](http://coreymaynard.com/blog/extending-a-javascript-function/):
```js
var self = this;
this.someMethod = (function() {
var original = self.someMethod;
return function() {
// do your logic
return original.apply(this, arguments);
};
})();
```
**Important:** If the method you're overriding returns a value, make sure the
overridden function returns a value as well.
## DOM Events
Because all elements for the control are created within the `setup()` method (which is
invoked after the plugin initialized) events should be added by overriding the setup method,
like so:
```js
Selectize.define('plugin_name', function(options) {
var self = this;
// override the setup method to add an extra "click" handler
this.setup = (function() {
var original = self.setup;
return function() {
original.apply(this, arguments);
this.$control.on('click', 'div', function(e) {
alert('A div was clicked!');
});
};
})();
});
```
## Plugin Usage
#### List (without options)
```js
$('select').selectize({
plugins: ['plugin_a', 'plugin_b']
});
```
#### List (with options)
```js
$('select').selectize({
plugins: {
'plugin_a': { /* ... */ },
'plugin_b': { /* ... */ }
}
});
```
For a more detailed description of plugin option formats and how the plugin system works, check out the [microplugin](https://github.com/brianreavis/microplugin.js) documentation.

385
web/vendor/selectize.js/docs/usage.md vendored Normal file
View file

@ -0,0 +1,385 @@
## Selectize Usage
```html
<script type="text/javascript" src="selectize.js"></script>
<link rel="stylesheet" type="text/css" href="selectize.css" />
<script>
$(function() {
$('select').selectize(options);
});
</script>
```
### Options
<table width="100%">
<tr>
<th valign="top" colspan="4" align="left"><a href="#general" name="general">General</a></th>
</tr>
<tr>
<th valign="top" width="120px" align="left">Option</th>
<th valign="top" align="left">Description</th>
<th valign="top" width="60px" align="left">Type</th>
<th valign="top" width="60px" align="left">Default</th>
</tr>
<tr>
<td valign="top"><code>delimiter</code></td>
<td valign="top">The string to separate items by. This option is only used when Selectize is instantiated from a &lt;input type="text"&gt; element.</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>','</code></td>
</tr>
<tr>
<td valign="top"><code>diacritics</code></td>
<td valign="top">Enable or disable international character support.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>true</code></td>
</tr>
<tr>
<td valign="top"><code>create</code></td>
<td valign="top">
Allows the user to create a new items that aren't in the list of options. This option can be any of the following: "true", "false" (disabled), or a function that accepts two arguments: "input" and "callback". The callback should be invoked with the final data for the option.</td>
<td valign="top"><code>mixed</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<td valign="top"><code>createOnBlur</code></td>
<td valign="top">
If true, when user exits the field (clicks outside of input or presses ESC) new option is created and selected (if `create`-option is enabled).
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<td valign="top"><code>createFilter</code></td>
<td valign="top">
Specifies a RegExp or String containing a regular expression that the current search filter must match to be allowed to be created. May also be a predicate function that takes the filter text and returns whether it is allowed.</td>
<td valign="top"><code>mixed</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>highlight</code></td>
<td valign="top">Toggles match highlighting within the dropdown menu.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>true</code></td>
</tr>
<tr>
<td valign="top"><code>persist</code></td>
<td valign="top">If false, items created by the user will not show up as available options once they are unselected.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>true</code></td>
</tr>
<tr>
<td valign="top"><code>openOnFocus</code></td>
<td valign="top">Show the dropdown immediately when the control receives focus.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>true</code></td>
</tr>
<tr>
<td valign="top"><code>maxOptions</code></td>
<td valign="top">The max number of items to render at once in the dropdown list of options.</td>
<td valign="top"><code>int</code></td>
<td valign="top"><code>1000</code></td>
</tr>
<tr name="maxItems">
<td valign="top"><code>maxItems</code></td>
<td valign="top">The max number of items the user can select.</td>
<td valign="top"><code>int</code></td>
<td valign="top"><code>1</code></td>
</tr>
<tr>
<td valign="top"><code>hideSelected</code></td>
<td valign="top">If true, the items that are currently selected will not be shown in the dropdown list of available options.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<td valign="top"><code>closeAfterSelect</code></td>
<td valign="top">If true, the dropdown will be closed after a selection is made.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<td valign="top"><code>allowEmptyOption</code></td>
<td valign="top">If true, Selectize will treat any options with a "" value like normal. This defaults to false to accomodate the common &lt;select&gt; practice of having the first empty option act as a placeholder.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<td valign="top"><code>scrollDuration</code></td>
<td valign="top">The animation duration (in milliseconds) of the scroll animation triggered when going [up] and [down] in the options dropdown.</td>
<td valign="top"><code>int</code></td>
<td valign="top"><code>60</code></td>
</tr>
<tr>
<td valign="top"><code>loadThrottle</code></td>
<td valign="top">The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled.</td>
<td valign="top"><code>int</code></td>
<td valign="top"><code>300</code></td>
</tr>
<tr>
<td valign="top"><code>loadingClass</code></td>
<td valign="top">The class name added to the wrapper element while awaiting the fulfillment of load requests.</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>'loading'</code></td>
</tr>
<tr>
<td valign="top"><code>preload</code></td>
<td valign="top">If true, the "load" function will be called upon control initialization (with an empty search). Alternatively it can be set to "focus" to call the "load" function when control receives focus.</td>
<td valign="top"><code>boolean/string</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<td valign="top"><code>dropdownParent</code></td>
<td valign="top">The element the dropdown menu is appended to. This should be "body" or null. If null, the dropdown will be appended as a child of the selectize control.</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>addPrecedence</code></td>
<td valign="top">Sets if the "Add..." option should be the default selection in the dropdown.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<td valign="top"><code>selectOnTab</code></td>
<td valign="top">If true, the tab key will choose the currently selected item.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<th valign="top" colspan="4" align="left"><a href="#data_searching" name="data_searching">Data / Searching</a></th>
</tr>
<tr>
<th valign="top" align="left">Option</th>
<th valign="top" align="left">Description</th>
<th valign="top" align="left">Type</th>
<th valign="top" align="left">Default</th>
</tr>
<tr>
<td valign="top"><code>options</code></td>
<td valign="top">Options available to select; array of objects. If your element i as &lt;select&gt; with &lt;option&gt;s specified this property gets populated automatically. Setting this property is convenient if you have your data as an array and want to automatically generate the &lt;option&gt;s.</td>
<td valign="top"><code>array</code></td>
<td valign="top"><code>[]</code></td>
</tr>
<tr>
<td valign="top"><code>optgroups</code></td>
<td valign="top">Option groups that options will be bucketed into. If your element is a &lt;select&gt; with &lt;optgroup&gt;s this property gets populated automatically. Make sure each object in the array has a property named whatever "optgroupValueField" is set to.</td>
<td valign="top"><code>array</code></td>
<td valign="top"><code>[]</code></td>
</tr>
<tr>
<td valign="top"><code>dataAttr</code></td>
<td valign="top">The &lt;option&gt; attribute from which to read JSON data about the option.</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>'data-data'</code></td>
</tr>
<tr>
<td valign="top"><code>valueField</code></td>
<td valign="top">The name of the property to use as the "value" when an item is selected.</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>'value'</code></td>
</tr>
<tr>
<td valign="top"><code>optgroupValueField</code></td>
<td valign="top">The name of the option group property that serves as its unique identifier.</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>'value'</code></td>
</tr>
<tr>
<td valign="top"><code>labelField</code></td>
<td valign="top">The name of the property to render as an option / item label (not needed when custom rendering functions are defined).</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>'text'</code></td>
</tr>
<tr>
<td valign="top"><code>optgroupLabelField</code></td>
<td valign="top">The name of the property to render as an option group label (not needed when custom rendering functions are defined).</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>'label'</code></td>
</tr>
<tr>
<td valign="top"><code>optgroupField</code></td>
<td valign="top">The name of the property to group items by.</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>'optgroup'</code></td>
</tr>
<tr>
<td valign="top"><code>sortField</code></td>
<td valign="top">
A single field or an array of fields to sort by. Each item in the array should be an object containing at
least a "field" property. Optionally, "direction" can be set to "asc" or "desc". The
order of the array defines the sort precedence.<br><br>
Unless present, a special "$score" field will be automatically added to the beginning
of the sort list. This will make results sorted primarily by match quality (descending).<br><br>
You can override the "$score" function. For more information, see the <a href="https://github.com/brianreavis/sifter.js#sifterjs">sifter documentation</a>.
</td>
<td valign="top"><code>string|array</code></td>
<td valign="top"><code>'$order'</code></td>
</tr>
<tr>
<td valign="top"><code>searchField</td>
<td valign="top">An array of property names to analyze when filtering options.</td>
<td valign="top"><code>array</code></td>
<td valign="top"><code>['text']</code></td>
</tr>
<tr>
<td valign="top"><code>searchConjunction</td>
<td valign="top">When searching for multiple terms (separated by a space), this is the operator used. Can be "and" or "or".</td>
<td valign="top"><code>string</code></td>
<td valign="top"><code>'and'</code></td>
</tr>
<tr>
<td valign="top"><code>lockOptgroupOrder</td>
<td valign="top">If truthy, selectize will make all optgroups be in the same order as they were added (by the "$order" property). Otherwise, it will order based on the score of the results in each.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>false</code></td>
</tr>
<tr>
<td valign="top"><code>copyClassesToDropdown</code></td>
<td valign="top">Copy the original input classes to the Dropdown element.</td>
<td valign="top"><code>boolean</code></td>
<td valign="top"><code>true</code></td>
</tr>
<tr>
<th valign="top" colspan="4" align="left"><a href="#callbacks" name="callbacks">Callbacks</a></th>
</tr>
<tr>
<th valign="top" align="left">Option</th>
<th valign="top" align="left">Description</th>
<th valign="top" align="left">Type</th>
<th valign="top" align="left">Default</th>
</tr>
<tr>
<td valign="top"><code>load(query, callback)</code></td>
<td valign="top">Invoked when new options should be loaded from the server.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>score(search)</code></td>
<td valign="top">Overrides the scoring function used to sort available options. The provided function should return a <strong>function</strong> that returns a number greater than or equal to zero to represent the "score" of an item (the function's first argument). If 0, the option is declared not a match. The "search" argument is a <a href="#search">Search</a> object. For an example, see the <a href="https://github.com/brianreavis/selectize.js/blob/master/examples/github.html">"GitHub" example</a>.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onInitialize()</code></td>
<td valign="top">Invoked once the control is completely initialized.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onFocus()</code></td>
<td valign="top">Invoked when the control gains focus.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onBlur()</code></td>
<td valign="top">Invoked when the control loses focus.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onChange(value)</code></td>
<td valign="top">Invoked when the value of the control changes.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onItemAdd(value, $item)</code></td>
<td valign="top">Invoked when an item is selected.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onItemRemove(value)</code></td>
<td valign="top">Invoked when an item is deselected.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onClear()</code></td>
<td valign="top">Invoked when the control is manually cleared via the clear() method.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onDelete(values)</code></td>
<td valign="top">Invoked when the user attempts to delete the current selection.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onOptionAdd(value, data)</code></td>
<td valign="top">Invoked when a new option is added to the available options list.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onOptionRemove(value)</code></td>
<td valign="top">Invoked when an option is removed from the available options.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onDropdownOpen($dropdown)</code></td>
<td valign="top">Invoked when the dropdown opens.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onDropdownClose($dropdown)</code></td>
<td valign="top">Invoked when the dropdown closes.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onType(str)</code></td>
<td valign="top">Invoked when the user types while filtering options.</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<td valign="top"><code>onLoad(data)</code></td>
<td valign="top">Invoked when new options have been loaded and added to the control (via the "load" option or "load" API method).</td>
<td valign="top"><code>function</code></td>
<td valign="top"><code>null</code></td>
</tr>
<tr>
<th valign="top" colspan="4" align="left"><a href="#rendering" name="rendering">Rendering</a></th>
</tr>
<tr>
<td valign="top"><code>render</code></td>
<td valign="top">
Custom rendering functions. Each function should accept two arguments: "data" and "escape" and return HTML (string) with a single root element.
The "escape" argument is a function that takes a string and escapes all special HTML characters.
This is very important to use to prevent XSS vulnerabilities.
<table width="100%">
<tr>
<td valign="top"><code>option</code></td>
<td valign="top">An option in the dropdown list of available options.</td>
</tr>
<tr>
<td valign="top"><code>item</code></td>
<td valign="top">An item the user has selected.</td>
</tr>
<tr>
<td valign="top"><code>option_create</code></td>
<td valign="top">The "create new" option at the bottom of the dropdown. The data contains one property: "input" (which is what the user has typed).</td>
</tr>
<tr>
<td valign="top"><code>optgroup_header</code></td>
<td valign="top">The header of an option group.</td>
</tr>
<tr>
<td valign="top"><code>optgroup</code></td>
<td valign="top">The wrapper for an optgroup. The "html" property in the data will be the raw html of the optgroup's header and options.</td>
</tr>
</table>
</td>
<td valign="top"><code>object</code></td>
<td valign="top"></td>
</tr>
</table>

View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>API</h2>
<p>Examples of how to interact with the control programmatically.</p>
<div class="control-group">
<label for="select-tools">Tools:</label>
<select id="select-tools" multiple placeholder="Pick a tool..."></select>
</div>
<div class="buttons">
<input type="button" value="clear()" id="button-clear">
<input type="button" value="clearOptions()" id="button-clearoptions">
<input type="button" value="addOption()" id="button-addoption">
<input type="button" value="addItem()" id="button-additem">
<input type="button" value="setValue()" id="button-setvalue">
</div>
<script>
var $select = $('#select-tools').selectize({
maxItems: null,
valueField: 'id',
labelField: 'title',
searchField: 'title',
options: [
{id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
{id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
{id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
],
create: false
});
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
var control = $select[0].selectize;
$('#button-clear').on('click', function() {
control.clear();
});
$('#button-clearoptions').on('click', function() {
control.clearOptions();
});
$('#button-addoption').on('click', function() {
control.addOption({
id: 4,
title: 'Something New',
url: 'http://google.com'
});
});
$('#button-additem').on('click', function() {
control.addItem(2);
});
$('#button-setvalue').on('click', function() {
control.setValue([2, 3]);
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,492 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>&lt;input type="text"&gt;</h2>
<div class="control-group">
<label for="input-tags">Tags:</label>
<input type="text" id="input-tags" class="demo-default" value="awesome,neat">
</div>
<script>
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true
});
</script>
</div>
<div class="demo">
<h2>&lt;select&gt;</h2>
<div class="control-group">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<script>
$('#select-beast').selectize({
create: true,
sortField: {
field: 'text',
direction: 'asc'
},
dropdownParent: 'body'
});
</script>
</div>
<div class="demo">
<h2>&lt;select&gt; (allow empty)</h2>
<div class="control-group">
<label for="select-beast-empty">Beast:</label>
<select id="select-beast-empty" class="demo-default" data-placeholder="Select a person...">
<option value="">None</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<script>
$('#select-beast-empty').selectize({
allowEmptyOption: true,
create: true
});
</script>
</div>
<div class="demo">
<h2>&lt;select&gt; (disabled)</h2>
<div class="control-group">
<label for="select-beast-disabled">Beast:</label>
<select id="select-beast-disabled" class="demo-default" disabled placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3" selected>Nikola Tesla</option>
</select>
</div>
<script>
$('#select-beast-disabled').selectize({
create: true,
sortField: {field: 'text'}
});
</script>
</div>
<div class="demo">
<h2>&lt;select multiple&gt;</h2>
<div class="control-group">
<label for="select-state">States:</label>
<select id="select-state" name="state[]" multiple class="demo-default" style="width:50%" placeholder="Select a state...">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" selected>California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY" selected>Wyoming</option>
</select>
</div>
<script>
$('#select-state').selectize({
maxItems: 3
});
</script>
</div>
<div class="demo">
<div class="control-group">
<label for="select-country">Country:</label>
<select id="select-country" class="demo-default" placeholder="Select a country...">
<option value="">Select a country...</option>
<option value="AF">Afghanistan</option>
<option value="AX">&Aring;land Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">C&ocirc;te d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libyan Arab Jamahiriya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="AN">Netherlands Antilles</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">R&eacute;union</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barth&eacute;lemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
<script>
$('#select-country').selectize();
</script>
</div>
<div class="demo">
<h2>&lt;select multiple&gt; (disabled)</h2>
<div class="control-group">
<label for="select-state-disabled">States:</label>
<select id="select-state-disabled" name="state[]" multiple disabled class="demo-default" style="width:50%" placeholder="Select a state...">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" selected>California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY" selected>Wyoming</option>
</select>
</div>
<script>
$('#select-state-disabled').selectize({
maxItems: 3
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,145 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
<style type="text/css">
.selectize-control::before {
-moz-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
content: ' ';
z-index: 2;
position: absolute;
display: block;
top: 12px;
right: 34px;
width: 16px;
height: 16px;
background: url(images/spinner.gif);
background-size: 16px 16px;
opacity: 0;
}
.selectize-control.loading::before {
opacity: 0.4;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>State / City Selection</h2>
<p>A demonstration showing how to use the API to cascade controls for a classic state / city selector.</p>
<p><strong>Note:</strong> The API for fetching cities is a little spotty, so if it fails to list cities, that's the problem.</p>
<div class="control-group">
<label for="select-beast">State:</label>
<select id="select-state" placeholder="Pick a state...">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="select-beast" style="margin-top:20px">City:</label>
<select id="select-city" placeholder="Pick a city..."></select>
</div>
<script>
var xhr;
var select_state, $select_state;
var select_city, $select_city;
$select_state = $('#select-state').selectize({
onChange: function(value) {
if (!value.length) return;
select_city.disable();
select_city.clearOptions();
select_city.load(function(callback) {
xhr && xhr.abort();
xhr = $.ajax({
url: 'http://www.corsproxy.com/api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json',
success: function(results) {
select_city.enable();
callback(results);
},
error: function() {
callback();
}
})
});
}
});
$select_city = $('#select-city').selectize({
valueField: 'name',
labelField: 'name',
searchField: ['name']
});
select_city = $select_city[0].selectize;
select_state = $select_state[0].selectize;
select_city.disable();
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Confirm Delete</h2>
<div class="control-group">
<label for="input-tags">Tags:</label>
<input type="text" id="input-tags" class="demo-default" value="awesome,neat,yeah">
</div>
<script>
$('#input-tags').selectize({
delimiter: ',',
persist: false,
onDelete: function(values) {
return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?');
}
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,155 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
<style type="text/css">
.selectize-control.contacts .selectize-input > div {
padding: 1px 10px;
font-size: 13px;
font-weight: normal;
-webkit-font-smoothing: auto;
color: #f7fbff;
text-shadow: 0 1px 0 rgba(8,32,65,0.2);
background: #2183f5;
background: -moz-linear-gradient(top, #2183f5 0%, #1d77f3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2183f5), color-stop(100%,#1d77f3));
background: -webkit-linear-gradient(top, #2183f5 0%,#1d77f3 100%);
background: -o-linear-gradient(top, #2183f5 0%,#1d77f3 100%);
background: -ms-linear-gradient(top, #2183f5 0%,#1d77f3 100%);
background: linear-gradient(to bottom, #2183f5 0%,#1d77f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2183f5', endColorstr='#1d77f3',GradientType=0 );
border: 1px solid #0f65d2;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.selectize-control.contacts .selectize-input > div.active {
background: #0059c7;
background: -moz-linear-gradient(top, #0059c7 0%, #0051c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0059c7), color-stop(100%,#0051c1));
background: -webkit-linear-gradient(top, #0059c7 0%,#0051c1 100%);
background: -o-linear-gradient(top, #0059c7 0%,#0051c1 100%);
background: -ms-linear-gradient(top, #0059c7 0%,#0051c1 100%);
background: linear-gradient(to bottom, #0059c7 0%,#0051c1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0059c7', endColorstr='#0051c1',GradientType=0 );
border-color: #0051c1;
}
.selectize-control.contacts .selectize-input > div .email {
opacity: 0.8;
}
.selectize-control.contacts .selectize-input > div .name + .email {
margin-left: 5px;
}
.selectize-control.contacts .selectize-input > div .email:before {
content: '<';
}
.selectize-control.contacts .selectize-input > div .email:after {
content: '>';
}
.selectize-control.contacts .selectize-dropdown .caption {
font-size: 12px;
display: block;
color: #a0a0a0;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Email Contacts</h2>
<p>An example showing how you might go about creating contact selector like those used in Email apps.</p>
<div class="control-group">
<label for="select-to">To:</label>
<select id="select-to" class="contacts" placeholder="Pick some people..."></select>
</div>
<script>
// <select id="select-to"></select>
var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
'(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';
var formatName = function(item) {
return $.trim((item.first_name || '') + ' ' + (item.last_name || ''));
};
$('#select-to').selectize({
persist: false,
maxItems: null,
valueField: 'email',
labelField: 'name',
searchField: ['first_name', 'last_name', 'email'],
sortField: [
{field: 'first_name', direction: 'asc'},
{field: 'last_name', direction: 'asc'}
],
options: [
{email: 'nikola@tesla.com', first_name: 'Nikola', last_name: 'Tesla'},
{email: 'brian@thirdroute.com', first_name: 'Brian', last_name: 'Reavis'},
{email: 'someone@gmail.com'}
],
render: {
item: function(item, escape) {
var name = formatName(item);
return '<div>' +
(name ? '<span class="name">' + escape(name) + '</span>' : '') +
(item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
'</div>';
},
option: function(item, escape) {
var name = formatName(item);
var label = name || item.email;
var caption = name ? item.email : null;
return '<div>' +
'<span class="label">' + escape(label) + '</span>' +
(caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
'</div>';
}
},
createFilter: function(input) {
var regexpA = new RegExp('^' + REGEX_EMAIL + '$', 'i');
var regexpB = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
return regexpA.test(input) || regexpB.test(input);
},
create: function(input) {
if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
return {email: input};
}
var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
if (match) {
var name = $.trim(match[1]);
var pos_space = name.indexOf(' ');
var first_name = name.substring(0, pos_space);
var last_name = name.substring(pos_space + 1);
return {
email: match[2],
first_name: first_name,
last_name: last_name
};
}
alert('Invalid email address.');
return false;
}
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Create Filter</h2>
<p>Examples of how to filter created results.</p>
<div class="control-group">
<label for="regex">Pattern</label>
<input type="text" id="regex" value="^a+$"><br><br>
<label for="select-words-regex">Words:</label>
<select id="select-words-regex" multiple placeholder="Enter a word matching the pattern..."></select>
</div>
<div class="control-group" style="margin-top:40px">
<label for="length">Minimum Length</label>
<input type="text" id="length" value="2"><br><br>
<label for="select-words-length">Words:</label>
<select id="select-words-length" multiple placeholder="Enter a word longer than the minimum number of characters..."></select>
</div>
<div class="control-group" style="margin-top:40px">
<label for="select-words-unique">Words:</label>
<select id="select-words-unique" multiple placeholder="Enter unique words (case-insensitive)..."></select>
</div>
<script>
$('#select-words-regex').selectize({
create: true,
createFilter: $('#regex').val()
});
$('#select-words-length').selectize({
create: true,
createFilter: function(input) { return input.length >= parseInt($('#length').val(), 10); }
});
var unique = $('#select-words-unique').selectize({
create: true,
createFilter: function(input) {
input = input.toLowerCase();
return $.grep(unique.getValue(), function(value) {
return value.toLowerCase() === input;
}).length == 0;
}
})[0].selectize;
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,375 @@
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Sets default font family to sans-serif.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/*
* Removes default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
/*
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Corrects font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Sets consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
========================================================================== */
/*
* Removes border when inside `a` element in IE 8/9.
*/
img {
border: 0;
}
/*
* Corrects overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/*
* Addresses margin not present in IE 8/9 and Safari 5.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/*
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/*
* 1. Corrects color not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/*
* 1. Corrects font family not being inherited in all browsers.
* 2. Corrects font size not being inherited in all browsers.
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/*
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/*
* Re-set default cursor for disabled elements.
*/
button[disabled],
input[disabled] {
cursor: default;
}
/*
* 1. Addresses box sizing set to `content-box` in IE 8/9.
* 2. Removes excess padding in IE 8/9.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/*
* Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
* Removes inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*
* 1. Removes default vertical scrollbar in IE 8/9.
* 2. Improves readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}

View file

@ -0,0 +1,132 @@
body {
margin: 70px 0;
padding: 0;
font-family: Helvetica, arial, sans-serif;
font-size: 15px;
color: #454545;
background: #fff url(../images/bg.png);
text-shadow: 0 1px 0 rgba(0,0,0,0.02);
-webkit-font-smoothing: antialiased;
}
a, a:visited {
color: #3fabff;
text-decoration: none;
}
a:hover {
color: #008af5;
}
h1 {
margin: 0;
font-weight: 300;
font-size: 35px;
letter-spacing: -1px;
}
h2 {
font-size: 15px;
color: #a0a0a0;
margin: 30px 0;
}
label {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
p, .control-group {
margin: 0 0 20px 0;
}
.demo {
border-bottom: 1px solid #e8e8e8;
padding-top: 50px;
padding-bottom: 50px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.demo:last-child {
border-bottom: 0 none;
}
.demo select, .demo input, .demo .selectize-control {
width: 100%;
}
.demo > *:first-child {
margin-top: 0;
}
.demo > *:last-child {
margin-bottom: 0;
}
.demo .value {
margin: 0 0 10px 0;
font-size: 12px;
}
.demo .value span {
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
}
.theme-selector {
margin-top: 10px;
font-size: 13px;
}
.theme-selector:before {
content: 'Themes: ';
}
.theme-selector a {
margin: 0 5px;
}
.theme-selector a.active {
color: #202020;
font-weight: bold;
}
#wrapper {
margin: 0;
}
#wrapper > * {
padding-left: 100px;
padding-right: 100px;
}
pre {
background: #f8f8f8;
border: 1px solid #f2f2f2;
padding: 10px;
font-size: 12px;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
input[type=button] {
margin: 0 10px 0 0;
padding: 6px 10px;
color: #606060;
background: #e0e0e0;
border: 0 none;
width: auto;
display: inline-block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-font-smoothing: antialiased;
}
.buttons {
margin: 0 0 25px 0;
}
input[type=button]:hover {
background: #dadada;
}
@media only screen and (max-width : 320px) {
body {
margin: 20px 0;
}
#wrapper {
margin: 0;
}
#wrapper > * {
padding-left: 10px;
padding-right: 10px;
}
.demo {
padding: 20px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
}

View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
<style type="text/css">
.selectize-control.links .option .title {
display: block;
}
.selectize-control.links .option .url {
font-size: 12px;
display: block;
color: #a0a0a0;
}
.selectize-control.links .item a {
color: #006ef5;
}
.selectize-control.links .item.active a {
color: #303030;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Customizing Appearance</h2>
<p>Render items on your own &amp; apply unique CSS styles.</p>
<div class="control-group">
<label for="select-links">Links:</label>
<select id="select-links" placeholder="Pick some links..."></select>
</div>
<script>
// <select id="select-links"></select>
$('#select-links').selectize({
theme: 'links',
maxItems: null,
valueField: 'id',
searchField: 'title',
options: [
{id: 1, title: 'DIY', url: 'https://diy.org'},
{id: 2, title: 'Google', url: 'http://google.com'},
{id: 3, title: 'Yahoo', url: 'http://yahoo.com'},
],
render: {
option: function(data, escape) {
return '<div class="option">' +
'<span class="title">' + escape(data.title) + '</span>' +
'<span class="url">' + escape(data.url) + '</span>' +
'</div>';
},
item: function(data, escape) {
return '<div class="item"><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>';
}
},
create: function(input) {
return {
id: 0,
title: input,
url: '#'
};
}
});
</script>
<p>TODO: explain how to bind events.</p>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Dynamic Options</h2>
<p>The options are created straight from an array.</p>
<div class="control-group">
<label for="select-tools">Tools:</label>
<select id="select-tools" placeholder="Pick a tool..."></select>
</div>
<script>
// <select id="select-tools"></select>
$('#select-tools').selectize({
maxItems: null,
valueField: 'id',
labelField: 'title',
searchField: 'title',
options: [
{id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'},
{id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'},
{id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'}
],
create: false
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,109 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js Demos</h1>
<div class="demo">
<h2>Events</h2>
<p>Check out the console for more details about each event.</p>
<div class="control-group">
<label for="select-state">States:</label>
<select id="select-state" multiple name="state[]" class="demo-default" style="width:50%">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY" selected>Wyoming</option>
</select>
</div>
<h3>Event Log</h3>
<pre id="log"></pre>
<h3>Source</h3>
<script>
var eventHandler = function(name) {
return function() {
console.log(name, arguments);
$('#log').append('<div><span class="name">' + name + '</span></div>');
};
};
var $select = $('#select-state').selectize({
create : true,
onChange : eventHandler('onChange'),
onItemAdd : eventHandler('onItemAdd'),
onItemRemove : eventHandler('onItemRemove'),
onOptionAdd : eventHandler('onOptionAdd'),
onOptionRemove : eventHandler('onOptionRemove'),
onDropdownOpen : eventHandler('onDropdownOpen'),
onDropdownClose : eventHandler('onDropdownClose'),
onFocus : eventHandler('onFocus'),
onBlur : eventHandler('onBlur'),
onInitialize : eventHandler('onInitialize'),
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,153 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
<style type="text/css">
.selectize-control.repositories .selectize-dropdown > div {
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.selectize-control.repositories .selectize-dropdown .by {
font-size: 11px;
opacity: 0.8;
}
.selectize-control.repositories .selectize-dropdown .by::before {
content: 'by ';
}
.selectize-control.repositories .selectize-dropdown .name {
font-weight: bold;
margin-right: 5px;
}
.selectize-control.repositories .selectize-dropdown .title {
display: block;
}
.selectize-control.repositories .selectize-dropdown .description {
font-size: 12px;
display: block;
color: #a0a0a0;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
}
.selectize-control.repositories .selectize-dropdown .meta {
list-style: none;
margin: 0;
padding: 0;
font-size: 10px;
}
.selectize-control.repositories .selectize-dropdown .meta li {
margin: 0;
padding: 0;
display: inline;
margin-right: 10px;
}
.selectize-control.repositories .selectize-dropdown .meta li span {
font-weight: bold;
}
.selectize-control.repositories::before {
-moz-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
content: ' ';
z-index: 2;
position: absolute;
display: block;
top: 12px;
right: 34px;
width: 16px;
height: 16px;
background: url(images/spinner.gif);
background-size: 16px 16px;
opacity: 0;
}
.selectize-control.repositories.loading::before {
opacity: 0.4;
}
.icon {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
background-size: 16px 16px;
margin: 0 3px 0 0;
}
.icon.fork {
background-image: url(images/repo-fork.png);
}
.icon.source {
background-image: url(images/repo-source.png);
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Loading + Custom Scoring</h2>
<p>This demo shows how to integrate third-party data and override the scoring method.</p>
<div class="control-group">
<label for="select-repo">Repository:</label>
<select id="select-repo" class="repositories" placeholder="Pick a repository..."></select>
</div>
<script>
// <select id="select-repo"></select>
$('#select-repo').selectize({
valueField: 'url',
labelField: 'name',
searchField: 'name',
options: [],
create: false,
render: {
option: function(item, escape) {
return '<div>' +
'<span class="title">' +
'<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source') + '"></i>' + escape(item.name) + '</span>' +
'<span class="by">' + escape(item.username) + '</span>' +
'</span>' +
'<span class="description">' + escape(item.description) + '</span>' +
'<ul class="meta">' +
(item.language ? '<li class="language">' + escape(item.language) + '</li>' : '') +
'<li class="watchers"><span>' + escape(item.watchers) + '</span> watchers</li>' +
'<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>' +
'</ul>' +
'</div>';
}
},
score: function(search) {
var score = this.getScoreFunction(search);
return function(item) {
return score(item) * (1 + Math.min(item.watchers / 100, 1));
};
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
type: 'GET',
error: function() {
callback();
},
success: function(res) {
callback(res.repositories.slice(0, 10));
}
});
}
});
</script>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -0,0 +1,17 @@
(function(o){"function"==typeof define?define(o):"function"==typeof YUI?YUI.add("es5",o):o()})(function(){function o(){}function v(a){a=+a;a!==a?a=0:0!==a&&(a!==1/0&&a!==-(1/0))&&(a=(0<a||-1)*Math.floor(Math.abs(a)));return a}function s(a){var b=typeof a;return null===a||"undefined"===b||"boolean"===b||"number"===b||"string"===b}Function.prototype.bind||(Function.prototype.bind=function(a){var b=this;if("function"!=typeof b)throw new TypeError("Function.prototype.bind called on incompatible "+b);
var d=q.call(arguments,1),c=function(){if(this instanceof c){var e=b.apply(this,d.concat(q.call(arguments)));return Object(e)===e?e:this}return b.apply(a,d.concat(q.call(arguments)))};b.prototype&&(o.prototype=b.prototype,c.prototype=new o,o.prototype=null);return c});var k=Function.prototype.call,p=Object.prototype,q=Array.prototype.slice,h=k.bind(p.toString),t=k.bind(p.hasOwnProperty);t(p,"__defineGetter__")&&(k.bind(p.__defineGetter__),k.bind(p.__defineSetter__),k.bind(p.__lookupGetter__),k.bind(p.__lookupSetter__));
if(2!=[1,2].splice(0).length){var y=Array.prototype.splice;Array.prototype.splice=function(a,b){return arguments.length?y.apply(this,[a===void 0?0:a,b===void 0?this.length-a:b].concat(q.call(arguments,2))):[]}}if(1!=[].unshift(0)){var z=Array.prototype.unshift;Array.prototype.unshift=function(){z.apply(this,arguments);return this.length}}Array.isArray||(Array.isArray=function(a){return h(a)=="[object Array]"});var k=Object("a"),l="a"!=k[0]||!(0 in k);Array.prototype.forEach||(Array.prototype.forEach=
function(a,b){var d=n(this),c=l&&h(this)=="[object String]"?this.split(""):d,e=-1,f=c.length>>>0;if(h(a)!="[object Function]")throw new TypeError;for(;++e<f;)e in c&&a.call(b,c[e],e,d)});Array.prototype.map||(Array.prototype.map=function(a,b){var d=n(this),c=l&&h(this)=="[object String]"?this.split(""):d,e=c.length>>>0,f=Array(e);if(h(a)!="[object Function]")throw new TypeError(a+" is not a function");for(var g=0;g<e;g++)g in c&&(f[g]=a.call(b,c[g],g,d));return f});Array.prototype.filter||(Array.prototype.filter=
function(a,b){var d=n(this),c=l&&h(this)=="[object String]"?this.split(""):d,e=c.length>>>0,f=[],g;if(h(a)!="[object Function]")throw new TypeError(a+" is not a function");for(var i=0;i<e;i++)if(i in c){g=c[i];a.call(b,g,i,d)&&f.push(g)}return f});Array.prototype.every||(Array.prototype.every=function(a,b){var d=n(this),c=l&&h(this)=="[object String]"?this.split(""):d,e=c.length>>>0;if(h(a)!="[object Function]")throw new TypeError(a+" is not a function");for(var f=0;f<e;f++)if(f in c&&!a.call(b,c[f],
f,d))return false;return true});Array.prototype.some||(Array.prototype.some=function(a,b){var d=n(this),c=l&&h(this)=="[object String]"?this.split(""):d,e=c.length>>>0;if(h(a)!="[object Function]")throw new TypeError(a+" is not a function");for(var f=0;f<e;f++)if(f in c&&a.call(b,c[f],f,d))return true;return false});Array.prototype.reduce||(Array.prototype.reduce=function(a){var b=n(this),d=l&&h(this)=="[object String]"?this.split(""):b,c=d.length>>>0;if(h(a)!="[object Function]")throw new TypeError(a+
" is not a function");if(!c&&arguments.length==1)throw new TypeError("reduce of empty array with no initial value");var e=0,f;if(arguments.length>=2)f=arguments[1];else{do{if(e in d){f=d[e++];break}if(++e>=c)throw new TypeError("reduce of empty array with no initial value");}while(1)}for(;e<c;e++)e in d&&(f=a.call(void 0,f,d[e],e,b));return f});Array.prototype.reduceRight||(Array.prototype.reduceRight=function(a){var b=n(this),d=l&&h(this)=="[object String]"?this.split(""):b,c=d.length>>>0;if(h(a)!=
"[object Function]")throw new TypeError(a+" is not a function");if(!c&&arguments.length==1)throw new TypeError("reduceRight of empty array with no initial value");var e,c=c-1;if(arguments.length>=2)e=arguments[1];else{do{if(c in d){e=d[c--];break}if(--c<0)throw new TypeError("reduceRight of empty array with no initial value");}while(1)}do c in this&&(e=a.call(void 0,e,d[c],c,b));while(c--);return e});if(!Array.prototype.indexOf||-1!=[0,1].indexOf(1,2))Array.prototype.indexOf=function(a){var b=l&&
h(this)=="[object String]"?this.split(""):n(this),d=b.length>>>0;if(!d)return-1;var c=0;arguments.length>1&&(c=v(arguments[1]));for(c=c>=0?c:Math.max(0,d+c);c<d;c++)if(c in b&&b[c]===a)return c;return-1};if(!Array.prototype.lastIndexOf||-1!=[0,1].lastIndexOf(0,-3))Array.prototype.lastIndexOf=function(a){var b=l&&h(this)=="[object String]"?this.split(""):n(this),d=b.length>>>0;if(!d)return-1;var c=d-1;arguments.length>1&&(c=Math.min(c,v(arguments[1])));for(c=c>=0?c:d-Math.abs(c);c>=0;c--)if(c in b&&
a===b[c])return c;return-1};if(!Object.keys){var w=!0,x="toString toLocaleString valueOf hasOwnProperty isPrototypeOf propertyIsEnumerable constructor".split(" "),A=x.length,r;for(r in{toString:null})w=!1;Object.keys=function(a){if(typeof a!="object"&&typeof a!="function"||a===null)throw new TypeError("Object.keys called on a non-object");var b=[],d;for(d in a)t(a,d)&&b.push(d);if(w)for(d=0;d<A;d++){var c=x[d];t(a,c)&&b.push(c)}return b}}if(!Date.prototype.toISOString||-1===(new Date(-621987552E5)).toISOString().indexOf("-000001"))Date.prototype.toISOString=
function(){var a,b,d,c;if(!isFinite(this))throw new RangeError("Date.prototype.toISOString called on non-finite value.");c=this.getUTCFullYear();a=this.getUTCMonth();c=c+Math.floor(a/12);a=[(a%12+12)%12+1,this.getUTCDate(),this.getUTCHours(),this.getUTCMinutes(),this.getUTCSeconds()];c=(c<0?"-":c>9999?"+":"")+("00000"+Math.abs(c)).slice(0<=c&&c<=9999?-4:-6);for(b=a.length;b--;){d=a[b];d<10&&(a[b]="0"+d)}return c+"-"+a.slice(0,2).join("-")+"T"+a.slice(2).join(":")+"."+("000"+this.getUTCMilliseconds()).slice(-3)+
"Z"};r=!1;try{r=Date.prototype.toJSON&&null===(new Date(NaN)).toJSON()&&-1!==(new Date(-621987552E5)).toJSON().indexOf("-000001")&&Date.prototype.toJSON.call({toISOString:function(){return true}})}catch(H){}r||(Date.prototype.toJSON=function(){var a=Object(this),b;a:if(s(a))b=a;else{b=a.valueOf;if(typeof b==="function"){b=b.call(a);if(s(b))break a}b=a.toString;if(typeof b==="function"){b=b.call(a);if(s(b))break a}throw new TypeError;}if(typeof b==="number"&&!isFinite(b))return null;b=a.toISOString;
if(typeof b!="function")throw new TypeError("toISOString property is not callable");return b.call(a)});var g=Date,m=function(a,b,d,c,e,f,h){var i=arguments.length;if(this instanceof g){i=i==1&&String(a)===a?new g(m.parse(a)):i>=7?new g(a,b,d,c,e,f,h):i>=6?new g(a,b,d,c,e,f):i>=5?new g(a,b,d,c,e):i>=4?new g(a,b,d,c):i>=3?new g(a,b,d):i>=2?new g(a,b):i>=1?new g(a):new g;i.constructor=m;return i}return g.apply(this,arguments)},u=function(a,b){var d=b>1?1:0;return B[b]+Math.floor((a-1969+d)/4)-Math.floor((a-
1901+d)/100)+Math.floor((a-1601+d)/400)+365*(a-1970)},C=RegExp("^(\\d{4}|[+-]\\d{6})(?:-(\\d{2})(?:-(\\d{2})(?:T(\\d{2}):(\\d{2})(?::(\\d{2})(?:\\.(\\d{3}))?)?(Z|(?:([-+])(\\d{2}):(\\d{2})))?)?)?)?$"),B=[0,31,59,90,120,151,181,212,243,273,304,334,365],j;for(j in g)m[j]=g[j];m.now=g.now;m.UTC=g.UTC;m.prototype=g.prototype;m.prototype.constructor=m;m.parse=function(a){var b=C.exec(a);if(b){var d=Number(b[1]),c=Number(b[2]||1)-1,e=Number(b[3]||1)-1,f=Number(b[4]||0),h=Number(b[5]||0),i=Number(b[6]||
0),j=Number(b[7]||0),m=!b[4]||b[8]?0:Number(new g(1970,0)),k=b[9]==="-"?1:-1,l=Number(b[10]||0),b=Number(b[11]||0);if(f<(h>0||i>0||j>0?24:25)&&h<60&&i<60&&j<1E3&&c>-1&&c<12&&l<24&&b<60&&e>-1&&e<u(d,c+1)-u(d,c)){d=((u(d,c)+e)*24+f+l*k)*60;d=((d+h+b*k)*60+i)*1E3+j+m;if(-864E13<=d&&d<=864E13)return d}return NaN}return g.parse.apply(this,arguments)};Date=m;Date.now||(Date.now=function(){return(new Date).getTime()});if("0".split(void 0,0).length){var D=String.prototype.split;String.prototype.split=function(a,
b){return a===void 0&&b===0?[]:D.apply(this,arguments)}}if("".substr&&"b"!=="0b".substr(-1)){var E=String.prototype.substr;String.prototype.substr=function(a,b){return E.call(this,a<0?(a=this.length+a)<0?0:a:a,b)}}j="\t\n\x0B\f\r \u00a0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\ufeff";if(!String.prototype.trim||j.trim()){j="["+j+"]";var F=RegExp("^"+j+j+"*"),G=RegExp(j+j+"*$");String.prototype.trim=function(){if(this===void 0||this===
null)throw new TypeError("can't convert "+this+" to object");return String(this).replace(F,"").replace(G,"")}}var n=function(a){if(a==null)throw new TypeError("can't convert "+a+" to object");return Object(a)}});

View file

@ -0,0 +1,50 @@
$(function() {
var $wrapper = $('#wrapper');
// theme switcher
var theme_match = String(window.location).match(/[?&]theme=([a-z0-9]+)/);
var theme = (theme_match && theme_match[1]) || 'default';
var themes = ['default','legacy','bootstrap2','bootstrap3'];
$('head').append('<link rel="stylesheet" href="../dist/css/selectize.' + theme + '.css">');
var $themes = $('<div>').addClass('theme-selector').insertAfter('h1');
for (var i = 0; i < themes.length; i++) {
$themes.append('<a href="?theme=' + themes[i] + '"' + (themes[i] === theme ? ' class="active"' : '') + '>' + themes[i] + '</a>');
}
// display scripts on the page
$('script', $wrapper).each(function() {
var code = this.text;
if (code && code.length) {
var lines = code.split('\n');
var indent = null;
for (var i = 0; i < lines.length; i++) {
if (/^[ ]*$/.test(lines[i])) continue;
if (!indent) {
var lineindent = lines[i].match(/^([ ]+)/);
if (!lineindent) break;
indent = lineindent[1];
}
lines[i] = lines[i].replace(new RegExp('^' + indent), '');
}
var code = $.trim(lines.join('\n')).replace(/ /g, ' ');
var $pre = $('<pre>').addClass('js').text(code);
$pre.insertAfter(this);
}
});
// show current input values
$('select.selectized,input.selectized', $wrapper).each(function() {
var $container = $('<div>').addClass('value').html('Current Value: ');
var $value = $('<span>').appendTo($container);
var $input = $(this);
var update = function(e) { $value.text(JSON.stringify($input.val())); }
$(this).on('change', update);
update();
$container.insertAfter($input);
});
});

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Locking</h2>
<p>Selectize controls can be locked to prevent user interaction.</p>
<div class="control-group">
<label for="select-locked-empty">Locked (empty):</label>
<select id="select-locked-empty" multiple placeholder="No input allowed...">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</div>
<div class="control-group">
<label for="select-locked-single">Locked (single):</label>
<select id="select-locked-single" placeholder="No input allowed...">
<option value="A">Option A</option>
<option value="B" selected>Option B</option>
<option value="C">Option C</option>
</select>
</div>
<div class="control-group">
<label for="select-locked">Locked:</label>
<select id="select-locked" multiple placeholder="No input allowed...">
<option value="A">Option A</option>
<option value="B" selected>Option B</option>
<option value="C" selected>Option C</option>
</select>
</div>
<div class="control-group">
<label for="select-unlocked">Unlocked:</label>
<select id="select-unlocked" multiple placeholder="Input allowed...">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
</div>
<script>
$('select').selectize({create: true});
$('#select-locked-empty')[0].selectize.lock();
$('#select-locked-single')[0].selectize.lock();
$('#select-locked')[0].selectize.lock();
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,164 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
<style type="text/css">
.selectize-control.movies .selectize-dropdown [data-selectable] {
border-bottom: 1px solid rgba(0,0,0,0.05);
height: 60px;
position: relative;
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding: 10px 10px 10px 60px;
}
.selectize-control.movies .selectize-dropdown [data-selectable]:last-child {
border-bottom: 0 none;
}
.selectize-control.movies .selectize-dropdown .by {
font-size: 11px;
opacity: 0.8;
}
.selectize-control.movies .selectize-dropdown .by::before {
content: 'by ';
}
.selectize-control.movies .selectize-dropdown .name {
font-weight: bold;
margin-right: 5px;
}
.selectize-control.movies .selectize-dropdown .description {
font-size: 12px;
color: #a0a0a0;
}
.selectize-control.movies .selectize-dropdown .actors,
.selectize-control.movies .selectize-dropdown .description,
.selectize-control.movies .selectize-dropdown .title {
display: block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.selectize-control.movies .selectize-dropdown .actors {
font-size: 10px;
color: #a0a0a0;
}
.selectize-control.movies .selectize-dropdown .actors span {
color: #606060;
}
.selectize-control.movies .selectize-dropdown img {
height: 60px;
left: 10px;
position: absolute;
border-radius: 3px;
background: rgba(0,0,0,0.04);
}
.selectize-control.movies .selectize-dropdown .meta {
list-style: none;
margin: 0;
padding: 0;
font-size: 10px;
}
.selectize-control.movies .selectize-dropdown .meta li {
margin: 0;
padding: 0;
display: inline;
margin-right: 10px;
}
.selectize-control.movies .selectize-dropdown .meta li span {
font-weight: bold;
}
.selectize-control.movies::before {
-moz-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
content: ' ';
z-index: 2;
position: absolute;
display: block;
top: 12px;
right: 34px;
width: 16px;
height: 16px;
background: url(images/spinner.gif);
background-size: 16px 16px;
opacity: 0;
}
.selectize-control.movies.loading::before {
opacity: 0.4;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Loading from API</h2>
<p>This demo shows how to integrate third-party data, loaded asynchronously.</p>
<div class="control-group">
<label for="select-movie">Movie:</label>
<select id="select-movie" class="movies" placeholder="Find a movie..."></select>
</div>
<script>
// <select id="select-movie"></select>
$('#select-movie').selectize({
valueField: 'title',
labelField: 'title',
searchField: 'title',
options: [],
create: false,
render: {
option: function(item, escape) {
var actors = [];
for (var i = 0, n = item.abridged_cast.length; i < n; i++) {
actors.push('<span>' + escape(item.abridged_cast[i].name) + '</span>');
}
return '<div>' +
'<img src="' + escape(item.posters.thumbnail) + '" alt="">' +
'<span class="title">' +
'<span class="name">' + escape(item.title) + '</span>' +
'</span>' +
'<span class="description">' + escape(item.synopsis || 'No synopsis available at this time.') + '</span>' +
'<span class="actors">' + (actors.length ? 'Starring ' + actors.join(', ') : 'Actors unavailable') + '</span>' +
'</div>';
}
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
type: 'GET',
dataType: 'jsonp',
data: {
q: query,
page_limit: 10,
apikey: '3qqmdwbuswut94jv4eua3j85'
},
error: function() {
callback();
},
success: function(res) {
console.log(res.movies);
callback(res.movies);
}
});
}
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,174 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
<style type="text/css">
.demo-animals .scientific {
font-weight: normal;
opacity: 0.3;
margin: 0 0 0 2px;
}
.demo-animals .scientific::before {
content: '(';
}
.demo-animals .scientific::after {
content: ')';
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Optgroups (basic)</h2>
<div class="control-group">
<label for="select-gear">Gear:</label>
<select id="select-gear" class="demo-default" multiple placeholder="Select gear...">
<option value="">Select gear...</option>
<optgroup label="Climbing">
<option value="pitons">Pitons</option>
<option value="cams">Cams</option>
<option value="nuts">Nuts</option>
<option value="bolts">Bolts</option>
<option value="stoppers">Stoppers</option>
<option value="sling">Sling</option>
</optgroup>
<optgroup label="Skiing">
<option value="skis">Skis</option>
<option value="skins">Skins</option>
<option value="poles">Poles</option>
</optgroup>
</select>
</div>
<script>
$('#select-gear').selectize({
sortField: 'text'
});
</script>
</div>
<div class="demo">
<h2>Optgroups (repeated options)</h2>
<div class="control-group">
<label for="select-repeated-options">Options:</label>
<select id="select-repeated-options" class="demo-default" multiple>
<option value="">Select...</option>
<optgroup label="Group 1">
<option value="a">Item A</option>
<option value="b">Item B</option>
</optgroup>
<optgroup label="Group 2">
<option value="a">Item A</option>
<option value="b">Item B</option>
</optgroup>
</select>
</div>
<script>
$('#select-repeated-options').selectize({
sortField: 'text'
});
</script>
</div>
<div class="demo">
<h2>Optgroups (programmatic)</h2>
<div class="control-group">
<label for="select-animal">Animal:</label>
<select id="select-animal" class="demo-animals" placeholder="Select animal..."></select>
</div>
<script>
$('#select-animal').selectize({
options: [
{class: 'mammal', value: "dog", name: "Dog" },
{class: 'mammal', value: "cat", name: "Cat" },
{class: 'mammal', value: "horse", name: "Horse" },
{class: 'mammal', value: "kangaroo", name: "Kangaroo" },
{class: 'bird', value: 'duck', name: 'Duck'},
{class: 'bird', value: 'chicken', name: 'Chicken'},
{class: 'bird', value: 'ostrich', name: 'Ostrich'},
{class: 'bird', value: 'seagull', name: 'Seagull'},
{class: 'reptile', value: 'snake', name: 'Snake'},
{class: 'reptile', value: 'lizard', name: 'Lizard'},
{class: 'reptile', value: 'alligator', name: 'Alligator'},
{class: 'reptile', value: 'turtle', name: 'Turtle'}
],
optgroups: [
{value: 'mammal', label: 'Mammal', label_scientific: 'Mammalia'},
{value: 'bird', label: 'Bird', label_scientific: 'Aves'},
{value: 'reptile', label: 'Reptile', label_scientific: 'Reptilia'}
],
optgroupField: 'class',
labelField: 'name',
searchField: ['name'],
render: {
optgroup_header: function(data, escape) {
return '<div class="optgroup-header">' + escape(data.label) + ' <span class="scientific">' + escape(data.label_scientific) + '</span></div>';
}
}
});
</script>
</div>
<div class="demo">
<h2>Plugin: "optgroup_columns"</h2>
<div class="control-group" id="select-car-group">
<input type="text" id="select-car" placeholder="Select cars...">
</div>
<script>
$("#select-car").selectize({
options: [
{id: 'avenger', make: 'dodge', model: 'Avenger'},
{id: 'caliber', make: 'dodge', model: 'Caliber'},
{id: 'caravan-grand-passenger', make: 'dodge', model: 'Caravan Grand Passenger'},
{id: 'challenger', make: 'dodge', model: 'Challenger'},
{id: 'ram-1500', make: 'dodge', model: 'Ram 1500'},
{id: 'viper', make: 'dodge', model: 'Viper'},
{id: 'a3', make: 'audi', model: 'A3'},
{id: 'a6', make: 'audi', model: 'A6'},
{id: 'r8', make: 'audi', model: 'R8'},
{id: 'rs-4', make: 'audi', model: 'RS 4'},
{id: 's4', make: 'audi', model: 'S4'},
{id: 's8', make: 'audi', model: 'S8'},
{id: 'tt', make: 'audi', model: 'TT'},
{id: 'avalanche', make: 'chevrolet', model: 'Avalanche'},
{id: 'aveo', make: 'chevrolet', model: 'Aveo'},
{id: 'cobalt', make: 'chevrolet', model: 'Cobalt'},
{id: 'silverado', make: 'chevrolet', model: 'Silverado'},
{id: 'suburban', make: 'chevrolet', model: 'Suburban'},
{id: 'tahoe', make: 'chevrolet', model: 'Tahoe'},
{id: 'trail-blazer', make: 'chevrolet', model: 'TrailBlazer'},
],
optgroups: [
{$order: 3, id: 'dodge', name: 'Dodge'},
{$order: 2, id: 'audi', name: 'Audi'},
{$order: 1, id: 'chevrolet', name: 'Chevrolet'}
],
labelField: 'model',
valueField: 'id',
optgroupField: 'make',
optgroupLabelField: 'name',
optgroupValueField: 'id',
lockOptgroupOrder: true,
searchField: ['model'],
plugins: ['optgroup_columns'],
openOnFocus: false
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Performance</h2>
<p>This shows how it performs with 25,000 items.</p>
<div class="control-group">
<label for="select-junk">Jumbled Mess:</label>
<select id="select-junk" placeholder="Start Typing..."></select>
</div>
<script>
// <select id="select-junk"></select>
var letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUV';
var options = [];
for (var i = 0; i < 25000; i++) {
var title = [];
for (var j = 0; j < 8; j++) {
title.push(letters.charAt(Math.round((letters.length - 1) * Math.random())));
}
options.push({
id: i,
title: title.join('')
});
}
$('#select-junk').selectize({
maxItems: null,
maxOptions: 100,
valueField: 'id',
labelField: 'title',
searchField: 'title',
sortField: 'title',
options: options,
create: false
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,118 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="js/jqueryui.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Plugin: "remove_button"</h2>
<div class="control-group">
<label for="input-tags">Tags:</label>
<input type="text" id="input-tags" class="input-tags demo-default" value="awesome,neat">
</div>
<div class="control-group">
<label for="input-tags2">Tags:</label>
<input type="text" disabled id="input-tags2" class="input-tags demo-default" value="awesome,neat">
</div>
<script>
$('.input-tags').selectize({
plugins: ['remove_button'],
persist: false,
create: true,
render: {
item: function(data, escape) {
return '<div>"' + escape(data.text) + '"</div>';
}
},
onDelete: function(values) {
return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?');
}
});
</script>
</div>
<div class="demo">
<h2>Plugin: "restore_on_backspace"</h2>
<div class="control-group">
<label for="input-tags6">Tags:</label>
<input type="text" id="input-tags6" class="demo-default" value="awesome,neat">
</div>
<script>
$('#input-tags6').selectize({
plugins: ['restore_on_backspace'],
persist: false,
create: true
});
</script>
</div>
<div class="demo">
<h2>Plugin: "drag_drop"</h2>
<div class="control-group">
<label for="input-sortable">Tags:</label>
<input type="text" id="input-sortable" class="input-sortable demo-default" value="drag,these,items,around">
</div>
<div class="control-group">
<label for="input-sortable2">Tags:</label>
<input type="text" id="input-sortable2" disabled class="input-sortable demo-default" value="drag,these,items,around">
</div>
<script>
$('.input-sortable').selectize({
plugins: ['drag_drop'],
persist: false,
create: true
});
</script>
</div>
<div class="demo">
<h2>Plugin: "dropdown_header"</h2>
<div class="control-group">
<label for="select-code-language">Single:</label>
<select id="select-code-language" class="demo-code-language" placeholder="Select a language...">
<option value="txt">Text</option>
<option value="md">Markdown</option>
<option value="html">HTML</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="js" selected>JavaScript</option>
<option value="c#">Ruby</option>
<option value="c#">VHDL</option>
<option value="c#">Verilog</option>
<option value="c#">C#</option>
<option value="c++">C/C++</option>
</select>
</div>
<script>
$('.demo-code-language').selectize({
sortField: 'text',
hideSelected: false,
plugins: {
'dropdown_header': {
title: 'Language'
}
}
})
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Required Element</h2>
<div class="control-group">
<form>
<label for="select-beast">Beast:</label>
<select id="select-beast" required class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
<div style="margin-top:20px">
<button type="submit">Submit</button>
</div>
</form>
</div>
<script>
$('#select-beast').selectize({
create: true,
sortField: {
field: 'text',
direction: 'asc'
}
});
</script>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Right-to-left Support (RTL)</h2>
<div class="control-group" dir="rtl">
<label for="input-tags">Tags:</label>
<input type="text" id="input-tags" class="demo-default" value="awesome,neat">
</div>
<script>
$('#input-tags').selectize({
persist: false,
create: true
});
</script>
</div>
<div class="demo">
<h2>Right-to-left Support (RTL) Single</h2>
<div class="control-group" dir="rtl">
<label for="select-beast">Beast:</label>
<select id="select-beast" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
</div>
<script>
$('#select-beast').selectize({});
</script>
</div>
</div>
</body>
</html>

107
web/vendor/selectize.js/karma.conf.js vendored Normal file
View file

@ -0,0 +1,107 @@
module.exports = function(config) {
// workaround for https://github.com/karma-runner/karma-sauce-launcher/issues/40
var saucelabsBatchID = Number(process.env.SAUCELABS_BATCH) - 1;
var saucelabsConcurrency = 4;
var saucelabsBrowsers = [
// mobile
{platform: 'OS X 10.10', browserName: 'iPhone', version: '8.1'},
//{platform: 'OS X 10.10 ', browserName: 'iPhone', version: '6.0'},
{platform: 'OS X 10.10', browserName: 'iPad', version: '8.1'},
//{platform: 'OS X 10.10', browserName: 'iPad', version: '6.0'},
{platform: 'Linux', browserName: 'android', version: '4.4'},
{platform: 'Linux', browserName: 'android', version: '4.3'},
// desktop (safari)
{platform: 'OS X 10.8', browserName: 'safari', version: 6},
{platform: 'OS X 10.9', browserName: 'safari', version: 7},
{platform: 'OS X 10.10', browserName: 'safari', version: 8},
// desktop (chrome)
{platform: 'OS X 10.10', browserName: 'chrome', version: 39},
{platform: 'OS X 10.10', browserName: 'chrome', version: 38},
{platform: 'OS X 10.10', browserName: 'chrome', version: 37},
{platform: 'Windows 7', browserName: 'chrome', version: 39},
{platform: 'Windows 7', browserName: 'chrome', version: 38},
{platform: 'Windows 7', browserName: 'chrome', version: 37},
// desktop (firefox)
{platform: 'Windows 7', browserName: 'firefox', version: 35},
{platform: 'Windows 8', browserName: 'firefox', version: 35},
{platform: 'OS X 10.10', browserName: 'firefox', version: 34},
{platform: 'OS X 10.10', browserName: 'firefox', version: 33},
{platform: 'OS X 10.10', browserName: 'firefox', version: 32},
// desktop (internet explorer)
{platform: 'Windows 8', browserName: 'iexplore', version: 10},
{platform: 'Windows 8.1', browserName: 'iexplore', version: 11},
{platform: 'Windows 7', browserName: 'iexplore', version: 9}
];
if (process.env.TARGET === 'saucelabs') {
saucelabsBrowsers = saucelabsBrowsers.slice(saucelabsBatchID * saucelabsConcurrency, saucelabsBatchID * saucelabsConcurrency + saucelabsConcurrency);
if (!saucelabsBrowsers.length) process.exit(0);
}
var customLaunchers = {};
saucelabsBrowsers.forEach(function(browser, i) {
browser.base = 'SauceLabs';
customLaunchers['SL_' + i] = browser;
});
var targets = {
'saucelabs': Object.keys(customLaunchers),
'phantomjs': ['PhantomJS']
};
var reporters = ['mocha'];
if (process.env.TRAVIS_CI) {
reporters = process.env.TARGET === 'saucelabs'
? ['saucelabs', 'mocha']
: ['mocha', 'coverage', 'coveralls']
}
var browsers = targets[process.env.TARGET || 'phantomjs'];
if (process.env.BROWSERS) {
browsers = process.env.BROWSERS.split(',');
}
config.set({
frameworks: ['mocha', 'chai'],
files: [
'dist/css/selectize.default.css',
'bower_components/jquery/jquery.js',
'bower_components/microplugin/src/microplugin.js',
'bower_components/sifter/sifter.js',
'test/support/*.js',
'src/contrib/*.js',
'src/constants.js',
'src/utils.js',
'src/selectize.js',
'src/defaults.js',
'src/selectize.jquery.js',
'test/*.js'
],
preprocessors: {
'src/*.js': ['coverage']
},
coverageReporter: {
type: process.env.TRAVIS_CI && process.env.TARGET === 'phantomjs' ? 'lcov' : 'text-summary',
dir: 'coverage/'
},
sauceLabs: {
recordVideo: false,
startConnect: true,
tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
build: process.env.TRAVIS_BUILD_NUMBER,
testName: process.env.COMMIT_MESSAGE,
tags: ['selectize', 'test']
},
customLaunchers: customLaunchers,
reporters: reporters,
port: 8888,
colors: true,
captureTimeout: 0,
logLevel: config.LOG_INFO,
browsers: browsers,
browserDisconnectTolerance: 2,
browserDisconnectTimeout: 10000,
browserNoActivityTimeout: 120000,
singleRun: true
});
};

54
web/vendor/selectize.js/package.json vendored Normal file
View file

@ -0,0 +1,54 @@
{
"name": "selectize",
"keywords": [
"select",
"ui",
"form",
"input",
"control",
"autocomplete",
"tagging",
"tag"
],
"main": "dist/js/selectize.js",
"description": "Selectize is a jQuery-based custom <select> UI control. Useful for tagging, contact lists, country selectors, etc.",
"version": "0.12.0",
"author": "Brian Reavis <brian@thirdroute.com>",
"repository": {
"type": "git",
"url": "git://github.com/brianreavis/selectize.js.git"
},
"dependencies": {
"microplugin": "0.0.3",
"sifter": "^0.4.0"
},
"devDependencies": {
"grunt": "0.4.x",
"grunt-bower-task": "^0.4.0",
"grunt-cli": "^0.1.13",
"grunt-contrib-clean": "0.5.x",
"grunt-contrib-concat": "0.3.x",
"grunt-contrib-copy": "0.4.x",
"grunt-contrib-less": "~0.9.0",
"grunt-contrib-uglify": "0.2.x",
"grunt-recess": "0.5.x",
"grunt-replace": "0.4.x",
"karma": "^0.12.31",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^0.1.7",
"karma-coverage": "^0.2.7",
"karma-coveralls": "^0.1.5",
"karma-firefox-launcher": "^0.1.4",
"karma-mocha": "^0.1.10",
"karma-mocha-reporter": "^0.3.1",
"karma-phantomjs-launcher": "^0.1.4",
"karma-safari-launcher": "^0.1.1",
"karma-sauce-launcher": "^0.2.10"
},
"scripts": {
"test": "./node_modules/karma/bin/karma start"
},
"engines": {
"node": "*"
}
}

View file

@ -0,0 +1,32 @@
{
"name": "selectize",
"version": "0.12.0",
"title": "Selectize.js",
"author": {
"name": "Brian Reavis",
"email": "brian@thirdroute.com",
"url": "http://thirdroute.com"
},
"keywords": ["select", "ui", "form", "input", "control", "autocomplete", "tagging", "tag"],
"description": "Selectize is a jQuery-based custom <select> UI control. Useful for tagging, contact lists, country selectors, etc.",
"homepage": "http://brianreavis.github.io/selectize.js/",
"demo": "http://brianreavis.github.io/selectize.js/",
"docs": "https://github.com/brianreavis/selectize.js",
"bugs": "https://github.com/brianreavis/selectize.js/issues",
"licenses": [
{
"type": "Apache License, Version 2.0",
"url": "http://www.apache.org/licenses/LICENSE-2.0.html"
}
],
"maintainers": [
{
"name": "Brian Reavis",
"email": "brian@thirdroute.com",
"url": "http://thirdroute.com"
}
],
"dependencies": {
"jquery": ">=1.6"
}
}

34
web/vendor/selectize.js/src/.wrapper.js vendored Normal file
View file

@ -0,0 +1,34 @@
/**
* selectize.js (v@@version)
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
/*jshint curly:false */
/*jshint browser:true */
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery','sifter','microplugin'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('jquery'), require('sifter'), require('microplugin'));
} else {
root.Selectize = factory(root.jQuery, root.Sifter, root.MicroPlugin);
}
}(this, function($, Sifter, MicroPlugin) {
'use strict';
@@js
return Selectize;
}));

View file

@ -0,0 +1,24 @@
var IS_MAC = /Mac/.test(navigator.userAgent);
var KEY_A = 65;
var KEY_COMMA = 188;
var KEY_RETURN = 13;
var KEY_ESC = 27;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_P = 80;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_N = 78;
var KEY_BACKSPACE = 8;
var KEY_DELETE = 46;
var KEY_SHIFT = 16;
var KEY_CMD = IS_MAC ? 91 : 17;
var KEY_CTRL = IS_MAC ? 18 : 17;
var KEY_TAB = 9;
var TAG_SELECT = 1;
var TAG_INPUT = 2;
// for now, android support in general is too spotty to support validity
var SUPPORTS_VALIDITY_API = !/android/i.test(window.navigator.userAgent) && !!document.createElement('form').validity;

View file

@ -0,0 +1,39 @@
/**
* highlight v3 | MIT license | Johann Burkard <jb@eaio.com>
* Highlights arbitrary terms in a node.
*
* - Modified by Marshal <beatgates@gmail.com> 2011-6-24 (added regex)
* - Modified by Brian Reavis <brian@thirdroute.com> 2012-8-27 (cleanup)
*/
var highlight = function($element, pattern) {
if (typeof pattern === 'string' && !pattern.length) return;
var regex = (typeof pattern === 'string') ? new RegExp(pattern, 'i') : pattern;
var highlight = function(node) {
var skip = 0;
if (node.nodeType === 3) {
var pos = node.data.search(regex);
if (pos >= 0 && node.data.length > 0) {
var match = node.data.match(regex);
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(match[0].length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
} else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += highlight(node.childNodes[i]);
}
}
return skip;
};
return $element.each(function() {
highlight(this);
});
};

View file

@ -0,0 +1,48 @@
/**
* MicroEvent - to make any js object an event emitter
*
* - pure javascript - server compatible, browser compatible
* - dont rely on the browser doms
* - super simple - you get it immediatly, no mistery, no magic involved
*
* @author Jerome Etienne (https://github.com/jeromeetienne)
*/
var MicroEvent = function() {};
MicroEvent.prototype = {
on: function(event, fct){
this._events = this._events || {};
this._events[event] = this._events[event] || [];
this._events[event].push(fct);
},
off: function(event, fct){
var n = arguments.length;
if (n === 0) return delete this._events;
if (n === 1) return delete this._events[event];
this._events = this._events || {};
if (event in this._events === false) return;
this._events[event].splice(this._events[event].indexOf(fct), 1);
},
trigger: function(event /* , args... */){
this._events = this._events || {};
if (event in this._events === false) return;
for (var i = 0; i < this._events[event].length; i++){
this._events[event][i].apply(this, Array.prototype.slice.call(arguments, 1));
}
}
};
/**
* Mixin will delegate all MicroEvent.js function in the destination object.
*
* - MicroEvent.mixin(Foobar) will make Foobar able to use MicroEvent
*
* @param {object} the object which will support MicroEvent
*/
MicroEvent.mixin = function(destObject){
var props = ['on', 'off', 'trigger'];
for (var i = 0; i < props.length; i++){
destObject.prototype[props[i]] = MicroEvent.prototype[props[i]];
}
};

80
web/vendor/selectize.js/src/defaults.js vendored Normal file
View file

@ -0,0 +1,80 @@
Selectize.count = 0;
Selectize.defaults = {
options: [],
optgroups: [],
plugins: [],
delimiter: ',',
splitOn: null, // regexp or string for splitting up values from a paste command
persist: true,
diacritics: true,
create: false,
createOnBlur: false,
createFilter: null,
highlight: true,
openOnFocus: true,
maxOptions: 1000,
maxItems: null,
hideSelected: null,
addPrecedence: false,
selectOnTab: false,
preload: false,
allowEmptyOption: false,
closeAfterSelect: false,
scrollDuration: 60,
loadThrottle: 300,
loadingClass: 'loading',
dataAttr: 'data-data',
optgroupField: 'optgroup',
valueField: 'value',
labelField: 'text',
optgroupLabelField: 'label',
optgroupValueField: 'value',
lockOptgroupOrder: false,
sortField: '$order',
searchField: ['text'],
searchConjunction: 'and',
mode: null,
wrapperClass: 'selectize-control',
inputClass: 'selectize-input',
dropdownClass: 'selectize-dropdown',
dropdownContentClass: 'selectize-dropdown-content',
dropdownParent: null,
copyClassesToDropdown: true,
/*
load : null, // function(query, callback) { ... }
score : null, // function(search) { ... }
onInitialize : null, // function() { ... }
onChange : null, // function(value) { ... }
onItemAdd : null, // function(value, $item) { ... }
onItemRemove : null, // function(value) { ... }
onClear : null, // function() { ... }
onOptionAdd : null, // function(value, data) { ... }
onOptionRemove : null, // function(value) { ... }
onOptionClear : null, // function() { ... }
onOptionGroupAdd : null, // function(id, data) { ... }
onOptionGroupRemove : null, // function(id) { ... }
onOptionGroupClear : null, // function() { ... }
onDropdownOpen : null, // function($dropdown) { ... }
onDropdownClose : null, // function($dropdown) { ... }
onType : null, // function(str) { ... }
onDelete : null, // function(values) { ... }
*/
render: {
/*
item: null,
optgroup: null,
optgroup_header: null,
option: null,
option_create: null
*/
}
};

View file

@ -0,0 +1,17 @@
/**
* selectize.css (v@@version)
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
@@css

View file

@ -0,0 +1,161 @@
/**
* selectize.bootstrap2.css (v@@version) - Bootstrap 2 Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
@import "selectize";
@selectize-font-family: @baseFontFamily;
@selectize-font-size: @baseFontSize;
@selectize-line-height: @baseLineHeight;
@selectize-color-text: @textColor;
@selectize-color-highlight: rgba(255,237,40,0.4);
@selectize-color-input: @inputBackground;
@selectize-color-input-full: @inputBackground;
@selectize-color-disabled: @inputBackground;
@selectize-color-item: @btnBackgroundHighlight;
@selectize-color-item-border: @btnBorder;
@selectize-color-item-active: @dropdownLinkBackgroundHover;
@selectize-color-item-active-text: @dropdownLinkColorHover;
@selectize-color-item-active-border: darken(@selectize-color-item-active, 5%);
@selectize-color-optgroup: @dropdownBackground;
@selectize-color-optgroup-text: @grayLight;
@selectize-color-optgroup-border: @dropdownDividerTop;
@selectize-color-dropdown: @dropdownBackground;
@selectize-color-dropdown-border: @inputBorder;
@selectize-color-dropdown-border-top: @dropdownDividerTop;
@selectize-color-dropdown-item-active: @dropdownLinkBackgroundHover;
@selectize-color-dropdown-item-active-text: @dropdownLinkColorHover;
@selectize-color-dropdown-item-create-active-text: @dropdownLinkColorHover;
@selectize-lighten-disabled-item: 8%;
@selectize-lighten-disabled-item-text: 8%;
@selectize-lighten-disabled-item-border: 8%;
@selectize-opacity-disabled: 0.5;
@selectize-shadow-input: none;
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
@selectize-border-radius: @inputBorderRadius;
@selectize-padding-x: 10px;
@selectize-padding-y: 7px;
@selectize-padding-dropdown-item-x: @selectize-padding-x;
@selectize-padding-dropdown-item-y: 3px;
@selectize-padding-item-x: 3px;
@selectize-padding-item-y: 1px;
@selectize-margin-item-x: 3px;
@selectize-margin-item-y: 3px;
@selectize-caret-margin: 0;
@selectize-arrow-size: 5px;
@selectize-arrow-color: @black;
@selectize-arrow-offset: @selectize-padding-x + 5px;
@selectize-width-item-border: 1px;
.selectize-dropdown {
margin: 2px 0 0 0;
z-index: @zindexDropdown;
border: 1px solid @dropdownBorder;
border-radius: @baseBorderRadius;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
.optgroup-header {
font-size: 11px;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase;
}
.optgroup:first-child:before {
display: none;
}
.optgroup:before {
content: ' ';
display: block;
.nav-divider();
margin-left: @selectize-padding-dropdown-item-x * -1;
margin-right: @selectize-padding-dropdown-item-x * -1;
}
[data-selectable].active {
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}
}
.selectize-dropdown-content {
padding: 5px 0;
}
.selectize-dropdown-header {
padding: @selectize-padding-dropdown-item-y * 2 @selectize-padding-dropdown-item-x;
}
.selectize-input {
.transition(~"border linear .2s, box-shadow linear .2s");
&.dropdown-active {
.selectize-border-radius(@selectize-border-radius);
}
&.dropdown-active::before {
display: none;
}
&.input-active, &.input-active:hover, .selectize-control.multi &.focus {
background: @selectize-color-input !important;
border-color: rgba(82,168,236,.8) !important;
outline: 0 !important;
outline: thin dotted \9 !important;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)") !important;
}
}
.selectize-control {
&.single {
.selectize-input {
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
&:hover {
color: @grayDark;
text-decoration: none;
background-position: 0 -15px;
.transition(background-position .1s linear);
}
&.disabled {
background: @btnBackgroundHighlight !important;
.box-shadow(none);
}
}
}
&.multi {
.selectize-input {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
&.has-items {
@padding-x: @selectize-padding-x - @selectize-padding-item-x;
padding-left: @padding-x;
padding-right: @padding-x;
}
}
.selectize-input > div {
.gradientBar(@btnBackground, @btnBackgroundHighlight, @selectize-color-item-text, none);
*background-color: @selectize-color-item;
border: @selectize-width-item-border solid @selectize-color-item-border;
.border-radius(@baseBorderRadius);
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
&.active {
.box-shadow(~"0 1px 2px rgba(0,0,0,.05)");
.gradientBar(@selectize-color-item-active, @selectize-color-item-active-border, @selectize-color-item-active-text, none);
*background-color: @selectize-color-item-active;
border: @selectize-width-item-border solid @dropdownLinkBackgroundHover;
}
}
}
}

View file

@ -0,0 +1,150 @@
/**
* selectize.bootstrap3.css (v@@version) - Bootstrap 3 Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
@import "selectize";
@selectize-fonts-family: inherit;
@selectize-font-size: inherit;
@selectize-line-height: @line-height-computed;
@selectize-color-text: @text-color;
@selectize-color-highlight: rgba(255,237,40,0.4);
@selectize-color-input: @input-bg;
@selectize-color-input-full: @input-bg;
@selectize-color-input-error: @state-danger-text;
@selectize-color-input-error-focus: darken(@selectize-color-input-error, 10%);
@selectize-color-disabled: @input-bg;
@selectize-color-item: #efefef;
@selectize-color-item-border: rgba(0,0,0,0);
@selectize-color-item-active: @component-active-bg;
@selectize-color-item-active-text: #fff;
@selectize-color-item-active-border: rgba(0,0,0,0);
@selectize-color-optgroup: @dropdown-bg;
@selectize-color-optgroup-text: @dropdown-header-color;
@selectize-color-optgroup-border: @dropdown-divider-bg;
@selectize-color-dropdown: @dropdown-bg;
@selectize-color-dropdown-border-top: mix(@input-border, @input-bg, 0.8);
@selectize-color-dropdown-item-active: @dropdown-link-hover-bg;
@selectize-color-dropdown-item-active-text: @dropdown-link-hover-color;
@selectize-color-dropdown-item-create-active-text: @dropdown-link-hover-color;
@selectize-opacity-disabled: 0.5;
@selectize-shadow-input: none;
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
@selectize-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, .075);
@selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@selectize-color-input-error, 20%);
@selectize-border: 1px solid @input-border;
@selectize-border-radius: @input-border-radius;
@selectize-width-item-border: 0;
@selectize-padding-x: @padding-base-horizontal;
@selectize-padding-y: @padding-base-vertical;
@selectize-padding-dropdown-item-x: @padding-base-horizontal;
@selectize-padding-dropdown-item-y: 3px;
@selectize-padding-item-x: 3px;
@selectize-padding-item-y: 1px;
@selectize-margin-item-x: 3px;
@selectize-margin-item-y: 3px;
@selectize-caret-margin: 0;
@selectize-arrow-size: 5px;
@selectize-arrow-color: @selectize-color-text;
@selectize-arrow-offset: @selectize-padding-x + 5px;
.selectize-dropdown, .selectize-dropdown.form-control {
height: auto;
padding: 0;
margin: 2px 0 0 0;
z-index: @zindex-dropdown;
background: @selectize-color-dropdown;
border: 1px solid @dropdown-fallback-border;
border: 1px solid @dropdown-border;
.selectize-border-radius(@border-radius-base);
.selectize-box-shadow(0 6px 12px rgba(0,0,0,.175));
}
.selectize-dropdown {
.optgroup-header {
font-size: @font-size-small;
line-height: @line-height-base;
}
.optgroup:first-child:before {
display: none;
}
.optgroup:before {
content: ' ';
display: block;
.nav-divider();
margin-left: @selectize-padding-dropdown-item-x * -1;
margin-right: @selectize-padding-dropdown-item-x * -1;
}
}
.selectize-dropdown-content {
padding: 5px 0;
}
.selectize-dropdown-header {
padding: @selectize-padding-dropdown-item-y * 2 @selectize-padding-dropdown-item-x;
}
.selectize-input {
min-height: @input-height-base;
&.dropdown-active {
.selectize-border-radius(@selectize-border-radius);
}
&.dropdown-active::before {
display: none;
}
&.focus {
@color: @input-border-focus;
@color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
border-color: @color;
outline: 0;
.selectize-box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
}
}
.has-error .selectize-input {
border-color: @selectize-color-input-error;
.selectize-box-shadow(@selectize-shadow-input-error);
&:focus {
border-color: @selectize-color-input-error-focus;
.selectize-box-shadow(@selectize-shadow-input-error-focus);
}
}
.selectize-control {
&.multi {
.selectize-input.has-items {
padding-left: @selectize-padding-x - @selectize-padding-item-x;
padding-right: @selectize-padding-x - @selectize-padding-item-x;
}
.selectize-input > div {
.selectize-border-radius(@selectize-border-radius - 1px);
}
}
}
.form-control.selectize-control {
padding: 0;
height: auto;
border: none;
background: none;
.selectize-box-shadow(none);
.selectize-border-radius(0);
}

View file

@ -0,0 +1,84 @@
/**
* selectize.default.css (v@@version) - Default Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
@import "selectize";
@selectize-color-item: #1da7ee;
@selectize-color-item-text: #fff;
@selectize-color-item-active-text: #fff;
@selectize-color-item-border: #0073bb;
@selectize-color-item-active: #92c836;
@selectize-color-item-active-border: #00578d;
@selectize-width-item-border: 1px;
@selectize-caret-margin: 0 1px;
.selectize-control {
&.multi {
.selectize-input {
&.has-items {
@padding-x: @selectize-padding-x - 3px;
padding-left: @padding-x;
padding-right: @padding-x;
}
&.disabled [data-value] {
color: #999;
text-shadow: none;
background: none;
.selectize-box-shadow(none);
&, .remove {
border-color: #e6e6e6;
}
.remove {
background: none;
}
}
[data-value] {
text-shadow: 0 1px 0 rgba(0,51,83,0.3);
.selectize-border-radius(3px);
.selectize-vertical-gradient(#1da7ee, #178ee9);
.selectize-box-shadow(~"0 1px 0 rgba(0,0,0,0.2),inset 0 1px rgba(255,255,255,0.03)");
&.active {
.selectize-vertical-gradient(#008fd8, #0075cf);
}
}
}
}
&.single {
.selectize-input {
.selectize-box-shadow(~"0 1px 0 rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8)");
.selectize-vertical-gradient(#fefefe, #f2f2f2);
}
}
}
.selectize-control.single .selectize-input, .selectize-dropdown.single {
border-color: #b8b8b8;
}
.selectize-dropdown {
.optgroup-header {
padding-top: @selectize-padding-dropdown-item-y + 2px;
font-weight: bold;
font-size: 0.85em;
}
.optgroup {
border-top: 1px solid @selectize-color-dropdown-border-top;
&:first-child {
border-top: 0 none;
}
}
}

View file

@ -0,0 +1,75 @@
/**
* selectize.legacy.css (v@@version) - Default Theme
* Copyright (c) 20132015 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
@import "selectize";
@selectize-font-size: 13px;
@selectize-line-height: 20px;
@selectize-color-input-full: #f2f2f2;
@selectize-color-item: #b8e76f;
@selectize-color-item-text: #3d5d18;
@selectize-color-item-border: #74b21e;
@selectize-color-item-active: #92c836;
@selectize-color-item-active-border: #6f9839;
@selectize-color-highlight: rgba(255,237,40,0.4);
@selectize-color-dropdown-item-active: #fffceb;
@selectize-color-dropdown-item-active-text: @selectize-color-text;
@selectize-color-optgroup: #f8f8f8;
@selectize-color-optgroup-text: @selectize-color-text;
@selectize-width-item-border: 1px;
@selectize-padding-x: 10px;
@selectize-padding-y: 10px;
@selectize-padding-item-x: 5px;
@selectize-padding-item-y: 1px;
@selectize-padding-dropdown-item-x: 10px;
@selectize-padding-dropdown-item-y: 7px;
@selectize-margin-item-x: 4px;
@selectize-margin-item-y: 4px;
.selectize-control {
&.multi {
.selectize-input [data-value] {
text-shadow: 0 1px 0 rgba(255,255,255,0.1);
.selectize-border-radius(3px);
.selectize-vertical-gradient(#b8e76f, #a9e25c);
.selectize-box-shadow(0 1px 1px rgba(0,0,0,0.1));
&.active {
.selectize-vertical-gradient(#92c836, #7abc2c);
}
}
}
&.single {
.selectize-input {
.selectize-box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 0 #e0e0e0, 0 3px 0 #c8c8c8, 0 4px 1px rgba(0,0,0,0.1)");
.selectize-vertical-gradient(#f5f5f5, #efefef);
}
}
}
.selectize-control.single .selectize-input, .selectize-dropdown.single {
border-color: #b8b8b8;
}
.selectize-dropdown {
.optgroup-header {
font-weight: bold;
font-size: 0.8em;
border-bottom: 1px solid @selectize-color-dropdown-border-top;
border-top: 1px solid @selectize-color-dropdown-border-top;
}
}

View file

@ -0,0 +1,290 @@
// base styles
@selectize-font-family: inherit;
@selectize-font-smoothing: inherit;
@selectize-font-size: 13px;
@selectize-line-height: 18px;
@selectize-color-text: #303030;
@selectize-color-border: #d0d0d0;
@selectize-color-highlight: rgba(125,168,208,0.2);
@selectize-color-input: #fff;
@selectize-color-input-full: @selectize-color-input;
@selectize-color-disabled: #fafafa;
@selectize-color-item: #f2f2f2;
@selectize-color-item-text: @selectize-color-text;
@selectize-color-item-border: #d0d0d0;
@selectize-color-item-active: #e8e8e8;
@selectize-color-item-active-text: @selectize-color-text;
@selectize-color-item-active-border: #cacaca;
@selectize-color-dropdown: #fff;
@selectize-color-dropdown-border: @selectize-color-border;
@selectize-color-dropdown-border-top: #f0f0f0;
@selectize-color-dropdown-item-active: #f5fafd;
@selectize-color-dropdown-item-active-text: #495c68;
@selectize-color-dropdown-item-create-text: rgba(red(@selectize-color-text), green(@selectize-color-text), blue(@selectize-color-text), 0.5);
@selectize-color-dropdown-item-create-active-text: @selectize-color-dropdown-item-active-text;
@selectize-color-optgroup: @selectize-color-dropdown;
@selectize-color-optgroup-text: @selectize-color-text;
@selectize-lighten-disabled-item: 30%;
@selectize-lighten-disabled-item-text: 30%;
@selectize-lighten-disabled-item-border: 30%;
@selectize-opacity-disabled: 0.5;
@selectize-shadow-input: inset 0 1px 1px rgba(0,0,0,0.1);
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
@selectize-border: 1px solid @selectize-color-border;
@selectize-dropdown-border: 1px solid @selectize-color-dropdown-border;
@selectize-border-radius: 3px;
@selectize-width-item-border: 0;
@selectize-max-height-dropdown: 200px;
@selectize-padding-x: 8px;
@selectize-padding-y: 8px;
@selectize-padding-item-x: 6px;
@selectize-padding-item-y: 2px;
@selectize-padding-dropdown-item-x: @selectize-padding-x;
@selectize-padding-dropdown-item-y: 5px;
@selectize-margin-item-x: 3px;
@selectize-margin-item-y: 3px;
@selectize-arrow-size: 5px;
@selectize-arrow-color: #808080;
@selectize-arrow-offset: 15px;
@selectize-caret-margin: 0 2px 0 0;
@selectize-caret-margin-rtl: 0 4px 0 -2px;
.selectize-border-radius (@radii) {
-webkit-border-radius: @radii;
-moz-border-radius: @radii;
border-radius: @radii;
}
.selectize-unselectable () {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.selectize-box-shadow (@shadow) {
-webkit-box-shadow: @shadow;
box-shadow: @shadow;
}
.selectize-box-sizing (@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.selectize-vertical-gradient (@color-top, @color-bottom) {
background-color: mix(@color-top, @color-bottom, 60%);
background-image: -moz-linear-gradient(top, @color-top, @color-bottom); // FF 3.6+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@color-top), to(@color-bottom)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @color-top, @color-bottom); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @color-top, @color-bottom); // Opera 11.10
background-image: linear-gradient(to bottom, @color-top, @color-bottom); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@color-top),argb(@color-bottom))); // IE9 and down
}
.selectize-control {
position: relative;
}
.selectize-dropdown, .selectize-input, .selectize-input input {
color: @selectize-color-text;
font-family: @selectize-font-family;
font-size: @selectize-font-size;
line-height: @selectize-line-height;
-webkit-font-smoothing: @selectize-font-smoothing;
}
.selectize-input, .selectize-control.single .selectize-input.input-active {
background: @selectize-color-input;
cursor: text;
display: inline-block;
}
.selectize-input {
border: @selectize-border;
padding: @selectize-padding-y @selectize-padding-x;
display: inline-block;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
.selectize-box-sizing(border-box);
.selectize-box-shadow(@selectize-shadow-input);
.selectize-border-radius(@selectize-border-radius);
.selectize-control.multi &.has-items {
@padding-x: @selectize-padding-x;
@padding-top: @selectize-padding-y - @selectize-padding-item-y - @selectize-width-item-border;
@padding-bottom: @selectize-padding-y - @selectize-padding-item-y - @selectize-margin-item-y - @selectize-width-item-border;
padding: @padding-top @padding-x @padding-bottom;
}
&.full {
background-color: @selectize-color-input-full;
}
&.disabled, &.disabled * {
cursor: default !important;
}
&.focus {
.selectize-box-shadow(@selectize-shadow-input-focus);
}
&.dropdown-active {
.selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
}
> * {
vertical-align: baseline;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.selectize-control.multi & > div {
cursor: pointer;
margin: 0 @selectize-margin-item-x @selectize-margin-item-y 0;
padding: @selectize-padding-item-y @selectize-padding-item-x;
background: @selectize-color-item;
color: @selectize-color-item-text;
border: @selectize-width-item-border solid @selectize-color-item-border;
&.active {
background: @selectize-color-item-active;
color: @selectize-color-item-active-text;
border: @selectize-width-item-border solid @selectize-color-item-active-border;
}
}
.selectize-control.multi &.disabled > div {
&, &.active {
color: lighten(desaturate(@selectize-color-item-text, 100%), @selectize-lighten-disabled-item-text);
background: lighten(desaturate(@selectize-color-item, 100%), @selectize-lighten-disabled-item);
border: @selectize-width-item-border solid lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
}
}
> input {
&::-ms-clear {
display: none;
}
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: @selectize-caret-margin !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
-webkit-user-select: auto !important;
.selectize-box-shadow(none) !important;
&:focus { outline: none !important; }
}
}
.selectize-input::after {
content: ' ';
display: block;
clear: left;
}
.selectize-input.dropdown-active::before {
content: ' ';
display: block;
position: absolute;
background: @selectize-color-dropdown-border-top;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-dropdown {
position: absolute;
z-index: 10;
border: @selectize-dropdown-border;
background: @selectize-color-dropdown;
margin: -1px 0 0 0;
border-top: 0 none;
.selectize-box-sizing(border-box);
.selectize-box-shadow(0 1px 3px rgba(0,0,0,0.1));
.selectize-border-radius(0 0 @selectize-border-radius @selectize-border-radius);
[data-selectable] {
cursor: pointer;
overflow: hidden;
.highlight {
background: @selectize-color-highlight;
.selectize-border-radius(1px);
}
}
[data-selectable], .optgroup-header {
padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
}
.optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.optgroup-header {
color: @selectize-color-optgroup-text;
background: @selectize-color-optgroup;
cursor: default;
}
.active {
background-color: @selectize-color-dropdown-item-active;
color: @selectize-color-dropdown-item-active-text;
&.create {
color: @selectize-color-dropdown-item-create-active-text;
}
}
.create {
color: @selectize-color-dropdown-item-create-text;
}
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: @selectize-max-height-dropdown;
}
.selectize-control.single .selectize-input {
&, input { cursor: pointer; }
&.input-active, &.input-active input { cursor: text; }
&:after {
content: ' ';
display: block;
position: absolute;
top: 50%;
right: @selectize-arrow-offset;
margin-top: round(-1 * @selectize-arrow-size / 2);
width: 0;
height: 0;
border-style: solid;
border-width: @selectize-arrow-size @selectize-arrow-size 0 @selectize-arrow-size;
border-color: @selectize-arrow-color transparent transparent transparent;
}
&.dropdown-active:after {
margin-top: @selectize-arrow-size * -0.8;
border-width: 0 @selectize-arrow-size @selectize-arrow-size @selectize-arrow-size;
border-color: transparent transparent @selectize-arrow-color transparent;
}
}
.selectize-control.rtl {
&.single .selectize-input:after {
left: @selectize-arrow-offset;
right: auto;
}
.selectize-input > input {
margin: @selectize-caret-margin-rtl !important;
}
}
.selectize-control .selectize-input.disabled {
opacity: @selectize-opacity-disabled;
background-color: @selectize-color-disabled;
}

View file

@ -0,0 +1,67 @@
/**
* Plugin: "drag_drop" (selectize.js)
* Copyright (c) 2013 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
Selectize.define('drag_drop', function(options) {
if (!$.fn.sortable) throw new Error('The "drag_drop" plugin requires jQuery UI "sortable".');
if (this.settings.mode !== 'multi') return;
var self = this;
self.lock = (function() {
var original = self.lock;
return function() {
var sortable = self.$control.data('sortable');
if (sortable) sortable.disable();
return original.apply(self, arguments);
};
})();
self.unlock = (function() {
var original = self.unlock;
return function() {
var sortable = self.$control.data('sortable');
if (sortable) sortable.enable();
return original.apply(self, arguments);
};
})();
self.setup = (function() {
var original = self.setup;
return function() {
original.apply(this, arguments);
var $control = self.$control.sortable({
items: '[data-value]',
forcePlaceholderSize: true,
disabled: self.isLocked,
start: function(e, ui) {
ui.placeholder.css('width', ui.helper.css('width'));
$control.css({overflow: 'visible'});
},
stop: function() {
$control.css({overflow: 'hidden'});
var active = self.$activeItems ? self.$activeItems.slice() : null;
var values = [];
$control.children('[data-value]').each(function() {
values.push($(this).attr('data-value'));
});
self.setValue(values);
self.setActiveItem(active);
}
});
};
})();
});

View file

@ -0,0 +1,16 @@
.selectize-control.plugin-drag_drop {
&.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0,0,0,0.06) !important;
border: 0 none !important;
.selectize-box-shadow(inset 0 0 12px 4px #fff);
}
.ui-sortable-placeholder::after {
content: '!';
visibility: hidden;
}
.ui-sortable-helper {
.selectize-box-shadow(0 2px 5px rgba(0,0,0,0.2));
}
}

View file

@ -0,0 +1,48 @@
/**
* Plugin: "dropdown_header" (selectize.js)
* Copyright (c) 2013 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
Selectize.define('dropdown_header', function(options) {
var self = this;
options = $.extend({
title : 'Untitled',
headerClass : 'selectize-dropdown-header',
titleRowClass : 'selectize-dropdown-header-title',
labelClass : 'selectize-dropdown-header-label',
closeClass : 'selectize-dropdown-header-close',
html: function(data) {
return (
'<div class="' + data.headerClass + '">' +
'<div class="' + data.titleRowClass + '">' +
'<span class="' + data.labelClass + '">' + data.title + '</span>' +
'<a href="javascript:void(0)" class="' + data.closeClass + '">&times;</a>' +
'</div>' +
'</div>'
);
}
}, options);
self.setup = (function() {
var original = self.setup;
return function() {
original.apply(self, arguments);
self.$dropdown_header = $(options.html(options));
self.$dropdown.prepend(self.$dropdown_header);
};
})();
});

View file

@ -0,0 +1,20 @@
.selectize-dropdown-header {
position: relative;
padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
border-bottom: 1px solid @selectize-color-border;
background: mix(@selectize-color-dropdown, @selectize-color-border, 85%);
.selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
}
.selectize-dropdown-header-close {
position: absolute;
right: @selectize-padding-dropdown-item-x;
top: 50%;
color: @selectize-color-text;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
}
.selectize-dropdown-header-close:hover {
color: darken(@selectize-color-text, 25%);
}

View file

@ -0,0 +1,108 @@
/**
* Plugin: "optgroup_columns" (selectize.js)
* Copyright (c) 2013 Simon Hewitt & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Simon Hewitt <si@sjhewitt.co.uk>
*/
Selectize.define('optgroup_columns', function(options) {
var self = this;
options = $.extend({
equalizeWidth : true,
equalizeHeight : true
}, options);
this.getAdjacentOption = function($option, direction) {
var $options = $option.closest('[data-group]').find('[data-selectable]');
var index = $options.index($option) + direction;
return index >= 0 && index < $options.length ? $options.eq(index) : $();
};
this.onKeyDown = (function() {
var original = self.onKeyDown;
return function(e) {
var index, $option, $options, $optgroup;
if (this.isOpen && (e.keyCode === KEY_LEFT || e.keyCode === KEY_RIGHT)) {
self.ignoreHover = true;
$optgroup = this.$activeOption.closest('[data-group]');
index = $optgroup.find('[data-selectable]').index(this.$activeOption);
if(e.keyCode === KEY_LEFT) {
$optgroup = $optgroup.prev('[data-group]');
} else {
$optgroup = $optgroup.next('[data-group]');
}
$options = $optgroup.find('[data-selectable]');
$option = $options.eq(Math.min($options.length - 1, index));
if ($option.length) {
this.setActiveOption($option);
}
return;
}
return original.apply(this, arguments);
};
})();
var getScrollbarWidth = function() {
var div;
var width = getScrollbarWidth.width;
var doc = document;
if (typeof width === 'undefined') {
div = doc.createElement('div');
div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
div = div.firstChild;
doc.body.appendChild(div);
width = getScrollbarWidth.width = div.offsetWidth - div.clientWidth;
doc.body.removeChild(div);
}
return width;
};
var equalizeSizes = function() {
var i, n, height_max, width, width_last, width_parent, $optgroups;
$optgroups = $('[data-group]', self.$dropdown_content);
n = $optgroups.length;
if (!n || !self.$dropdown_content.width()) return;
if (options.equalizeHeight) {
height_max = 0;
for (i = 0; i < n; i++) {
height_max = Math.max(height_max, $optgroups.eq(i).height());
}
$optgroups.css({height: height_max});
}
if (options.equalizeWidth) {
width_parent = self.$dropdown_content.innerWidth() - getScrollbarWidth();
width = Math.round(width_parent / n);
$optgroups.css({width: width});
if (n > 1) {
width_last = width_parent - width * (n - 1);
$optgroups.eq(n - 1).css({width: width_last});
}
}
};
if (options.equalizeHeight || options.equalizeWidth) {
hook.after(this, 'positionDropdown', equalizeSizes);
hook.after(this, 'refreshOptions', equalizeSizes);
}
});

View file

@ -0,0 +1,17 @@
.selectize-dropdown.plugin-optgroup_columns {
.optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
float: left;
.selectize-box-sizing(border-box);
}
.optgroup:last-child {
border-right: 0 none;
}
.optgroup:before {
display: none;
}
.optgroup-header {
border-top: 0 none;
}
}

View file

@ -0,0 +1,70 @@
/**
* Plugin: "remove_button" (selectize.js)
* Copyright (c) 2013 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
Selectize.define('remove_button', function(options) {
if (this.settings.mode === 'single') return;
options = $.extend({
label : '&times;',
title : 'Remove',
className : 'remove',
append : true
}, options);
var self = this;
var html = '<a href="javascript:void(0)" class="' + options.className + '" tabindex="-1" title="' + escape_html(options.title) + '">' + options.label + '</a>';
/**
* Appends an element as a child (with raw HTML).
*
* @param {string} html_container
* @param {string} html_element
* @return {string}
*/
var append = function(html_container, html_element) {
var pos = html_container.search(/(<\/[^>]+>\s*)$/);
return html_container.substring(0, pos) + html_element + html_container.substring(pos);
};
this.setup = (function() {
var original = self.setup;
return function() {
// override the item rendering method to add the button to each
if (options.append) {
var render_item = self.settings.render.item;
self.settings.render.item = function(data) {
return append(render_item.apply(this, arguments), html);
};
}
original.apply(this, arguments);
// add event listener
this.$control.on('click', '.' + options.className, function(e) {
e.preventDefault();
if (self.isLocked) return;
var $item = $(e.currentTarget).parent();
self.setActiveItem($item);
if (self.deleteSelection()) {
self.setCaret(self.items.length);
}
});
};
})();
});

View file

@ -0,0 +1,37 @@
.selectize-control.plugin-remove_button {
[data-value] {
position: relative;
padding-right: 24px !important;
}
[data-value] .remove {
z-index: 1; /* fixes ie bug (see #392) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 17px;
text-align: center;
font-weight: bold;
font-size: 12px;
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: @selectize-padding-item-y 0 0 0;
border-left: 1px solid @selectize-color-item-border;
.selectize-border-radius(0 2px 2px 0);
.selectize-box-sizing(border-box);
}
[data-value] .remove:hover {
background: rgba(0,0,0,0.05);
}
[data-value].active .remove {
border-left-color: @selectize-color-item-active-border;
}
.disabled [data-value] .remove:hover {
background: none;
}
.disabled [data-value] .remove {
border-left-color: lighten(desaturate(@selectize-color-item-border, 100%), @selectize-lighten-disabled-item-border);
}
}

View file

@ -0,0 +1,43 @@
/**
* Plugin: "restore_on_backspace" (selectize.js)
* Copyright (c) 2013 Brian Reavis & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis <brian@thirdroute.com>
*/
Selectize.define('restore_on_backspace', function(options) {
var self = this;
options.text = options.text || function(option) {
return option[this.settings.labelField];
};
this.onKeyDown = (function() {
var original = self.onKeyDown;
return function(e) {
var index, option;
if (e.keyCode === KEY_BACKSPACE && this.$control_input.val() === '' && !this.$activeItems.length) {
index = this.caretPos - 1;
if (index >= 0 && index < this.items.length) {
option = this.options[this.items[index]];
if (this.deleteSelection(e)) {
this.setTextboxValue(options.text.apply(this, [option]));
this.refreshOptions(true);
}
e.preventDefault();
return;
}
}
return original.apply(this, arguments);
};
})();
});

View file

@ -0,0 +1,161 @@
$.fn.selectize = function(settings_user) {
var defaults = $.fn.selectize.defaults;
var settings = $.extend({}, defaults, settings_user);
var attr_data = settings.dataAttr;
var field_label = settings.labelField;
var field_value = settings.valueField;
var field_optgroup = settings.optgroupField;
var field_optgroup_label = settings.optgroupLabelField;
var field_optgroup_value = settings.optgroupValueField;
var optionsMap = {};
/**
* Initializes selectize from a <input type="text"> element.
*
* @param {object} $input
* @param {object} settings_element
*/
var init_textbox = function($input, settings_element) {
var i, n, values, option;
var data_raw = $input.attr(attr_data);
if (!data_raw) {
var value = $.trim($input.val() || '');
if (!settings.allowEmptyOption && !value.length) return;
values = value.split(settings.delimiter);
for (i = 0, n = values.length; i < n; i++) {
option = {};
option[field_label] = values[i];
option[field_value] = values[i];
settings_element.options.push(option);
}
settings_element.items = values;
} else {
settings_element.options = JSON.parse(data_raw);
for (i = 0, n = settings_element.options.length; i < n; i++) {
settings_element.items.push(settings_element.options[i][field_value]);
}
}
};
/**
* Initializes selectize from a <select> element.
*
* @param {object} $input
* @param {object} settings_element
*/
var init_select = function($input, settings_element) {
var i, n, tagName, $children, order = 0;
var options = settings_element.options;
var readData = function($el) {
var data = attr_data && $el.attr(attr_data);
if (typeof data === 'string' && data.length) {
return JSON.parse(data);
}
return null;
};
var addOption = function($option, group) {
$option = $($option);
var value = hash_key($option.attr('value'));
if (!value && !settings.allowEmptyOption) return;
// if the option already exists, it's probably been
// duplicated in another optgroup. in this case, push
// the current group to the "optgroup" property on the
// existing option so that it's rendered in both places.
if (optionsMap.hasOwnProperty(value)) {
if (group) {
var arr = optionsMap[value][field_optgroup];
if (!arr) {
optionsMap[value][field_optgroup] = group;
} else if (!$.isArray(arr)) {
optionsMap[value][field_optgroup] = [arr, group];
} else {
arr.push(group);
}
}
return;
}
var option = readData($option) || {};
option[field_label] = option[field_label] || $option.text();
option[field_value] = option[field_value] || value;
option[field_optgroup] = option[field_optgroup] || group;
optionsMap[value] = option;
options.push(option);
if ($option.is(':selected')) {
settings_element.items.push(value);
}
};
var addGroup = function($optgroup) {
var i, n, id, optgroup, $options;
$optgroup = $($optgroup);
id = $optgroup.attr('label');
if (id) {
optgroup = readData($optgroup) || {};
optgroup[field_optgroup_label] = id;
optgroup[field_optgroup_value] = id;
settings_element.optgroups.push(optgroup);
}
$options = $('option', $optgroup);
for (i = 0, n = $options.length; i < n; i++) {
addOption($options[i], id);
}
};
settings_element.maxItems = $input.attr('multiple') ? null : 1;
$children = $input.children();
for (i = 0, n = $children.length; i < n; i++) {
tagName = $children[i].tagName.toLowerCase();
if (tagName === 'optgroup') {
addGroup($children[i]);
} else if (tagName === 'option') {
addOption($children[i]);
}
}
};
return this.each(function() {
if (this.selectize) return;
var instance;
var $input = $(this);
var tag_name = this.tagName.toLowerCase();
var placeholder = $input.attr('placeholder') || $input.attr('data-placeholder');
if (!placeholder && !settings.allowEmptyOption) {
placeholder = $input.children('option[value=""]').text();
}
var settings_element = {
'placeholder' : placeholder,
'options' : [],
'optgroups' : [],
'items' : []
};
if (tag_name === 'select') {
init_select($input, settings_element);
} else {
init_textbox($input, settings_element);
}
instance = new Selectize($input, $.extend(true, {}, defaults, settings_element, settings_user));
});
};
$.fn.selectize.defaults = Selectize.defaults;
$.fn.selectize.support = {
validity: SUPPORTS_VALIDITY_API
};

2102
web/vendor/selectize.js/src/selectize.js vendored Normal file

File diff suppressed because it is too large Load diff

325
web/vendor/selectize.js/src/utils.js vendored Normal file
View file

@ -0,0 +1,325 @@
/**
* Determines if the provided value has been defined.
*
* @param {mixed} object
* @returns {boolean}
*/
var isset = function(object) {
return typeof object !== 'undefined';
};
/**
* Converts a scalar to its best string representation
* for hash keys and HTML attribute values.
*
* Transformations:
* 'str' -> 'str'
* null -> ''
* undefined -> ''
* true -> '1'
* false -> '0'
* 0 -> '0'
* 1 -> '1'
*
* @param {string} value
* @returns {string|null}
*/
var hash_key = function(value) {
if (typeof value === 'undefined' || value === null) return null;
if (typeof value === 'boolean') return value ? '1' : '0';
return value + '';
};
/**
* Escapes a string for use within HTML.
*
* @param {string} str
* @returns {string}
*/
var escape_html = function(str) {
return (str + '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
};
/**
* Escapes "$" characters in replacement strings.
*
* @param {string} str
* @returns {string}
*/
var escape_replace = function(str) {
return (str + '').replace(/\$/g, '$$$$');
};
var hook = {};
/**
* Wraps `method` on `self` so that `fn`
* is invoked before the original method.
*
* @param {object} self
* @param {string} method
* @param {function} fn
*/
hook.before = function(self, method, fn) {
var original = self[method];
self[method] = function() {
fn.apply(self, arguments);
return original.apply(self, arguments);
};
};
/**
* Wraps `method` on `self` so that `fn`
* is invoked after the original method.
*
* @param {object} self
* @param {string} method
* @param {function} fn
*/
hook.after = function(self, method, fn) {
var original = self[method];
self[method] = function() {
var result = original.apply(self, arguments);
fn.apply(self, arguments);
return result;
};
};
/**
* Wraps `fn` so that it can only be invoked once.
*
* @param {function} fn
* @returns {function}
*/
var once = function(fn) {
var called = false;
return function() {
if (called) return;
called = true;
fn.apply(this, arguments);
};
};
/**
* Wraps `fn` so that it can only be called once
* every `delay` milliseconds (invoked on the falling edge).
*
* @param {function} fn
* @param {int} delay
* @returns {function}
*/
var debounce = function(fn, delay) {
var timeout;
return function() {
var self = this;
var args = arguments;
window.clearTimeout(timeout);
timeout = window.setTimeout(function() {
fn.apply(self, args);
}, delay);
};
};
/**
* Debounce all fired events types listed in `types`
* while executing the provided `fn`.
*
* @param {object} self
* @param {array} types
* @param {function} fn
*/
var debounce_events = function(self, types, fn) {
var type;
var trigger = self.trigger;
var event_args = {};
// override trigger method
self.trigger = function() {
var type = arguments[0];
if (types.indexOf(type) !== -1) {
event_args[type] = arguments;
} else {
return trigger.apply(self, arguments);
}
};
// invoke provided function
fn.apply(self, []);
self.trigger = trigger;
// trigger queued events
for (type in event_args) {
if (event_args.hasOwnProperty(type)) {
trigger.apply(self, event_args[type]);
}
}
};
/**
* A workaround for http://bugs.jquery.com/ticket/6696
*
* @param {object} $parent - Parent element to listen on.
* @param {string} event - Event name.
* @param {string} selector - Descendant selector to filter by.
* @param {function} fn - Event handler.
*/
var watchChildEvent = function($parent, event, selector, fn) {
$parent.on(event, selector, function(e) {
var child = e.target;
while (child && child.parentNode !== $parent[0]) {
child = child.parentNode;
}
e.currentTarget = child;
return fn.apply(this, [e]);
});
};
/**
* Determines the current selection within a text input control.
* Returns an object containing:
* - start
* - length
*
* @param {object} input
* @returns {object}
*/
var getSelection = function(input) {
var result = {};
if ('selectionStart' in input) {
result.start = input.selectionStart;
result.length = input.selectionEnd - result.start;
} else if (document.selection) {
input.focus();
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart('character', -input.value.length);
result.start = sel.text.length - selLen;
result.length = selLen;
}
return result;
};
/**
* Copies CSS properties from one element to another.
*
* @param {object} $from
* @param {object} $to
* @param {array} properties
*/
var transferStyles = function($from, $to, properties) {
var i, n, styles = {};
if (properties) {
for (i = 0, n = properties.length; i < n; i++) {
styles[properties[i]] = $from.css(properties[i]);
}
} else {
styles = $from.css();
}
$to.css(styles);
};
/**
* Measures the width of a string within a
* parent element (in pixels).
*
* @param {string} str
* @param {object} $parent
* @returns {int}
*/
var measureString = function(str, $parent) {
if (!str) {
return 0;
}
var $test = $('<test>').css({
position: 'absolute',
top: -99999,
left: -99999,
width: 'auto',
padding: 0,
whiteSpace: 'pre'
}).text(str).appendTo('body');
transferStyles($parent, $test, [
'letterSpacing',
'fontSize',
'fontFamily',
'fontWeight',
'textTransform'
]);
var width = $test.width();
$test.remove();
return width;
};
/**
* Sets up an input to grow horizontally as the user
* types. If the value is changed manually, you can
* trigger the "update" handler to resize:
*
* $input.trigger('update');
*
* @param {object} $input
*/
var autoGrow = function($input) {
var currentWidth = null;
var update = function(e, options) {
var value, keyCode, printable, placeholder, width;
var shift, character, selection;
e = e || window.event || {};
options = options || {};
if (e.metaKey || e.altKey) return;
if (!options.force && $input.data('grow') === false) return;
value = $input.val();
if (e.type && e.type.toLowerCase() === 'keydown') {
keyCode = e.keyCode;
printable = (
(keyCode >= 97 && keyCode <= 122) || // a-z
(keyCode >= 65 && keyCode <= 90) || // A-Z
(keyCode >= 48 && keyCode <= 57) || // 0-9
keyCode === 32 // space
);
if (keyCode === KEY_DELETE || keyCode === KEY_BACKSPACE) {
selection = getSelection($input[0]);
if (selection.length) {
value = value.substring(0, selection.start) + value.substring(selection.start + selection.length);
} else if (keyCode === KEY_BACKSPACE && selection.start) {
value = value.substring(0, selection.start - 1) + value.substring(selection.start + 1);
} else if (keyCode === KEY_DELETE && typeof selection.start !== 'undefined') {
value = value.substring(0, selection.start) + value.substring(selection.start + 1);
}
} else if (printable) {
shift = e.shiftKey;
character = String.fromCharCode(e.keyCode);
if (shift) character = character.toUpperCase();
else character = character.toLowerCase();
value += character;
}
}
placeholder = $input.attr('placeholder');
if (!value && placeholder) {
value = placeholder;
}
width = measureString(value, $input) + 4;
if (width !== currentWidth) {
currentWidth = width;
$input.width(width);
$input.triggerHandler('resize');
}
};
$input.on('keydown keyup update blur', update);
update();
};

723
web/vendor/selectize.js/test/api.js vendored Normal file
View file

@ -0,0 +1,723 @@
(function() {
describe('API', function() {
describe('disable()', function() {
var test;
before(function() {
test = setup_test('<select tabindex="4">', {});
expect(String(test.selectize.$control_input.attr('tabindex'))).to.be.equal('4');
test.selectize.disable();
});
it('should set "tabindex" prop to -1', function() {
expect(String(test.selectize.$control_input.attr('tabindex'))).to.be.equal('-1');
});
it('should set "disabled" class', function() {
expect(test.selectize.$control.hasClass('disabled')).to.be.equal(true);
});
it('should set isDisabled property to true', function() {
expect(test.selectize.isDisabled).to.be.equal(true);
});
it('should add "disabled" attribute on inputs', function() {
expect(test.selectize.$input.is(':disabled')).to.be.equal(true);
expect(test.selectize.$control_input.is(':disabled')).to.be.equal(true);
});
});
describe('enable()', function() {
var test;
before(function() {
test = setup_test('<select disabled tabindex="2">', {});
expect(String(test.selectize.$control_input.attr('tabindex'))).to.be.equal('-1');
test.selectize.enable();
});
it('should restore original "tabindex" prop', function() {
expect(String(test.selectize.$control_input.attr('tabindex'))).to.be.equal('2');
});
it('should remove "disabled" class', function() {
expect(test.selectize.$control.hasClass('disabled')).to.be.equal(false);
});
it('should set isDisabled property to false', function() {
expect(test.selectize.isDisabled).to.be.equal(false);
});
it('should remove "disabled" attribute on inputs', function() {
expect(test.selectize.$input.is(':disabled')).to.be.equal(false);
expect(test.selectize.$control_input.is(':disabled')).to.be.equal(false);
});
});
describe('focus()', function() {
var test;
before(function(done) {
test = setup_test('<select>', {});
test.selectize.focus();
window.setTimeout(function() { done(); }, 5);
});
it('should set isFocused property to true', function() {
expect(test.selectize.isFocused).to.be.equal(true);
});
it('should give the control focus', function() {
expect(has_focus(test.selectize.$control_input[0])).to.be.equal(true);
});
});
describe('blur()', function() {
var test;
before(function(done) {
test = setup_test('<select>', {});
test.selectize.focus();
window.setTimeout(function() {
test.selectize.blur();
window.setTimeout(done, 100);
}, 50);
});
it('should set isFocused property to false', function() {
expect(test.selectize.isFocused).to.be.equal(false);
});
it('should remove focus from the control', function() {
expect(has_focus(test.selectize.$control_input[0])).to.be.equal(false);
});
});
describe('createItem()', function() {
it('should fail if non-object returned by "create" callback', function() {
var test = setup_test('<select>', {
valueField: 'value',
labelField: 'value',
create: function(input) {
return false;
}
});
test.selectize.$control_input.val('test');
test.selectize.createItem();
expect(test.selectize.items.length).to.be.equal(0);
test = setup_test('<select>', {
valueField: 'value',
labelField: 'value',
create: function(input) {
return 'hello';
}
});
test.selectize.$control_input.val('test');
test.selectize.createItem();
expect(test.selectize.items.length).to.be.equal(0);
});
it('should add option upon completion (synchronous)', function() {
var test = setup_test('<select>', {
valueField: 'value',
labelField: 'value',
create: function(input) {
return {value: input};
}
});
test.selectize.$control_input.val('test');
test.selectize.createItem();
expect(test.selectize.options).to.have.property('test');
});
it('should add option upon completion (asynchronous)', function(done) {
var test = setup_test('<select>', {
valueField: 'value',
labelField: 'value',
create: function(input, callback) {
window.setTimeout(function() {
callback({value: input});
expect(test.selectize.options).to.have.property('test');
done();
}, 0);
}
});
test.selectize.$control_input.val('test');
test.selectize.createItem();
});
});
describe('addOptionGroup()', function() {
var test;
before(function() {
test = setup_test('<select>', {valueField: 'value', labelField: 'value', optgroupValueField: 'grpval'});
});
it('should register group', function() {
var data = {label: 'Group Label'};
test.selectize.addOptionGroup('group_id', data);
expect(test.selectize.optgroups).to.have.property('group_id');
});
it('should add implicit $order property', function() {
test.selectize.addOptionGroup('group1', {});
test.selectize.addOptionGroup('group2', {});
assert.equal(test.selectize.optgroups['group1'].$order, 2);
assert.equal(test.selectize.optgroups['group2'].$order, 3);
});
});
describe('removeOptionGroup()', function() {
var test;
before(function() {
test = setup_test('<select>', {valueField: 'value', labelField: 'value'});
});
it('should remove group', function() {
var data = {label: 'Group Label'};
test.selectize.addOptionGroup('group_id', data);
test.selectize.removeOptionGroup('group_id');
expect(test.selectize.optgroups).to.not.have.property('group_id');
});
});
describe('clearOptionGroups()', function() {
var test;
before(function() {
test = setup_test('<select>', {valueField: 'value', labelField: 'value'});
});
it('should clear all groups', function() {
var data = {label: 'Group Label'};
test.selectize.addOptionGroup('group_id', data);
test.selectize.addOptionGroup('group_id2', data);
test.selectize.clearOptionGroups();
expect(test.selectize.optgroups).to.deep.equal({});
});
});
describe('addOption()', function() {
var test;
before(function() {
test = setup_test('<select>', {valueField: 'value', labelField: 'value'});
});
it('should add implicit $order property', function() {
var opt1 = {value: 'hello'};
var opt2 = {value: 'world'};
test.selectize.addOption(opt1);
test.selectize.addOption(opt2);
assert.deepEqual(test.selectize.options, {
'hello': {value: 'hello', $order: 1},
'world': {value: 'world', $order: 2}
});
});
it('should allow string values', function() {
test.selectize.addOption({value: 'stringtest'});
expect(test.selectize.options).to.have.property('stringtest');
});
it('should not allow null / undefined values', function() {
test.selectize.addOption({value: undefined});
test.selectize.addOption({value: null});
expect(test.selectize.options).to.not.have.property('undefined');
expect(test.selectize.options).to.not.have.property('null');
expect(test.selectize.options).to.not.have.property('');
});
it('should allow integer values', function() {
test.selectize.addOption({value: 0});
test.selectize.addOption({value: 1});
expect(test.selectize.options).to.have.property('0');
expect(test.selectize.options).to.have.property('1');
});
it('should allow arrays of options', function() {
test.selectize.addOption([{value: 'a'}, {value: 'b'}]);
expect(test.selectize.options).to.have.property('a');
expect(test.selectize.options).to.have.property('b');
});
it('should not override existing options', function() {
test.selectize.addOption([{value: 'a'}, {value: 'b'}]);
test.selectize.addOption({value: 'a', test: 'hello'});
expect(test.selectize.options.a).to.not.have.property('test');
});
});
describe('addItem()', function() {
var test;
before(function() {
test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 0},
{value: 1},
{value: 'undefined'},
{value: 'null'},
{value: 'a'},
{value: 'b'},
{value: 'c'},
{value: 'x'},
{value: '$1'},
{value: '\''},
{value: '"'},
{value: '\\\''},
{value: '\\"'},
]
});
});
it('should update "items" array', function() {
test.selectize.addItem('b');
expect(test.selectize.items.indexOf('b')).to.be.equal(0);
});
it('should not give control focus', function(done) {
test.selectize.addItem(0);
window.setTimeout(function() {
expect(test.selectize.isFocused).to.be.equal(false);
done();
}, 0);
});
it('should not allow duplicate entries', function() {
test.selectize.addItem('a');
test.selectize.addItem('a');
expect(test.selectize.items.indexOf('a')).to.be.equal(test.selectize.items.lastIndexOf('a'));
});
it('should not allow undefined / null values', function() {
test.selectize.addItem(undefined);
test.selectize.addItem(null);
expect(test.selectize.items.indexOf('undefined')).to.be.equal(-1);
expect(test.selectize.items.indexOf('null')).to.be.equal(-1);
});
it('should allow integer values', function() {
test.selectize.addItem(0);
expect(test.selectize.items.indexOf('0')).to.not.be.equal(-1);
});
it('should not fire "change" if silent is truthy', function(done) {
var watcher = function(e) { throw new Error('Change fired'); };
test.$select.on('change', watcher);
test.selectize.addItem('x', true);
expect(test.selectize.items.indexOf('x')).to.not.be.equal(-1);
window.setTimeout(function() {
test.$select.off('change', watcher);
done();
}, 0);
});
it('should update DOM', function() {
test.selectize.addItem('c');
expect(test.selectize.$control.find('[data-value=c]').length).to.be.equal(1);
test.selectize.addItem('$1');
var found = false;
test.selectize.$control.children().each(function() {
if (this.getAttribute('data-value') === '$1') {
found = true;
return false;
}
});
expect(found).to.be.equal(true);
});
});
describe('updateOption()', function() {
var test;
before(function() {
test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 0},
{value: 1},
{value: 'a'},
{value: 'b'},
{value: 'c'},
{value: 'd'},
{value: 'e'},
{value: 'f'},
{value: 'x'},
{value: 'null'},
{value: 'undefined'},
{value: '\''},
{value: '"'},
{value: '\\\''},
{value: '\\"'},
],
items: ['e','f']
});
});
it('should update option data', function() {
test.selectize.updateOption('a', {value: 'a', test: 'test'});
expect(test.selectize.options).to.have.property('a');
expect(test.selectize.options['a'].test).to.equal('test');
});
it('should update indexes', function() {
test.selectize.updateOption('e', {value: 'e_updated'});
expect(test.selectize.options).to.not.have.property('e');
expect(test.selectize.options).to.have.property('e_updated');
expect(test.selectize.items.indexOf('e')).to.be.equal(-1);
expect(test.selectize.items.indexOf('e_updated')).to.be.equal(0);
});
it('should maintain implicit $order property', function() {
var order_orig = test.selectize.options['x'].$order;
assert.isNumber(order_orig);
test.selectize.updateOption('x', {value: 'x', something: 'x'});
assert.equal(test.selectize.options['x'].$order, order_orig);
});
it('should allow integer values', function() {
test.selectize.updateOption(0, {value: '0_updated'});
test.selectize.updateOption(1, {value: '1_updated'});
expect(test.selectize.options).to.not.have.property('0');
expect(test.selectize.options).to.not.have.property('1');
expect(test.selectize.options).to.have.property('0_updated');
expect(test.selectize.options).to.have.property('1_updated');
});
it('should throw error if value not set in data', function() {
expect(function() {
test.selectize.updateOption('c', {value: undefined, test: 'test'});
test.selectize.updateOption('d', {value: null, test: 'test'});
}).to.throw(Error);
});
it('should ignore undefined / null value references', function() {
test.selectize.updateOption(undefined, {value: 'undefined', test: 'test'});
test.selectize.updateOption(null, {value: 'null', test: 'test'});
expect(test.selectize.options['undefined']).to.not.have.property('test');
expect(test.selectize.options['null']).to.not.have.property('test');
});
it('should update DOM', function() {
test.selectize.updateOption('f', {value: 'f_updated'});
expect(test.selectize.$control.find('[data-value=f]').length).to.be.equal(0);
expect(test.selectize.$control.find('[data-value=f_updated]').length).to.be.equal(1);
});
});
describe('getOption()', function() {
var test;
before(function() {
test = setup_test('<select>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 0},
{value: 1},
{value: 'a'},
{value: 'b'},
{value: '\''},
{value: '\\'},
{value: '"'},
{value: '\\\''},
{value: '\\"'},
]
});
test.selectize.refreshOptions(true);
});
it('should allow string values', function() {
expect(test.selectize.getOption('a')).to.be.ok;
expect(test.selectize.getOption('a').length).to.be.equal(1);
expect(test.selectize.getOption('b')).to.be.ok;
expect(test.selectize.getOption('b').length).to.be.equal(1);
});
it('should allow integer values', function() {
expect(test.selectize.getOption(0)).to.be.ok;
expect(test.selectize.getOption(0).length).to.be.equal(1);
expect(test.selectize.getOption(1)).to.be.ok;
expect(test.selectize.getOption(1).length).to.be.equal(1);
});
it('should allow values with quotation marks', function() {
expect(test.selectize.getOption('\'')).to.be.ok;
expect(test.selectize.getOption('\'').length).to.be.equal(1);
expect(test.selectize.getOption('"')).to.be.ok;
expect(test.selectize.getOption('"').length).to.be.equal(1);
});
it('should allow values with backslashes', function() {
expect(test.selectize.getOption('\\')).to.be.ok;
expect(test.selectize.getOption('\\').length).to.be.equal(1);
expect(test.selectize.getOption('\\\'')).to.be.ok;
expect(test.selectize.getOption('\\\'').length).to.be.equal(1);
expect(test.selectize.getOption('\\"')).to.be.ok;
expect(test.selectize.getOption('\\"').length).to.be.equal(1);
});
it('should not allow undefined / null values', function() {
expect(test.selectize.getOption(null)).to.be.ok;
expect(test.selectize.getOption(null).length).to.be.equal(0);
expect(test.selectize.getOption(undefined)).to.be.ok;
expect(test.selectize.getOption(undefined).length).to.be.equal(0);
});
});
describe('getItem()', function() {
var test;
before(function() {
test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 0},
{value: 1},
{value: 'a'},
{value: 'b'},
{value: '\''},
{value: '"'},
{value: '\\\''},
{value: '\\"'}
],
items: ['0','1','a','b','\'','"','\\\'','\\"']
});
});
it('should allow string values', function() {
expect(test.selectize.getItem('a')).to.be.ok;
expect(test.selectize.getItem('a').length).to.be.equal(1);
expect(test.selectize.getItem('b')).to.be.ok;
expect(test.selectize.getItem('b').length).to.be.equal(1);
});
it('should allow integer values', function() {
expect(test.selectize.getItem(0)).to.be.ok;
expect(test.selectize.getItem(0).length).to.be.equal(1);
expect(test.selectize.getItem(1)).to.be.ok;
expect(test.selectize.getItem(1).length).to.be.equal(1);
});
it('should allow values with quotation marks', function() {
expect(test.selectize.getItem('\'')).to.be.ok;
expect(test.selectize.getItem('\'').length).to.be.equal(1);
expect(test.selectize.getItem('"')).to.be.ok;
expect(test.selectize.getItem('"').length).to.be.equal(1);
});
it('should allow values with backslashes', function() {
expect(test.selectize.getItem('\\\'')).to.be.ok;
expect(test.selectize.getItem('\\\'').length).to.be.equal(1);
expect(test.selectize.getItem('\\"')).to.be.ok;
expect(test.selectize.getItem('\\"').length).to.be.equal(1);
});
it('should not allow undefined / null values', function() {
expect(test.selectize.getItem(null)).to.be.ok;
expect(test.selectize.getItem(null).length).to.be.equal(0);
expect(test.selectize.getItem(undefined)).to.be.ok;
expect(test.selectize.getItem(undefined).length).to.be.equal(0);
});
});
describe('clear()', function() {
var test;
beforeEach(function() {
test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 0},
{value: 1},
{value: 2},
{value: 3},
],
items: ['1','2','3']
});
});
it('should empty "$activeItems" array', function() {
test.selectize.setActiveItem(test.selectize.getItem('1'));
expect(test.selectize.$activeItems.length).to.be.equal(1);
test.selectize.clear();
expect(test.selectize.$activeItems.length).to.be.equal(0);
});
it('should refresh option list (dropdown)', function(done) {
// test = setup_test('<select multiple>', {
// valueField: 'value',
// labelField: 'value',
// options: [
// {value: 0},
// {value: 1},
// {value: 2},
// {value: 3},
// ],
// items: ['1','2','3']
// });
test.selectize.focus();
window.setTimeout(function() {
test.selectize.clear();
test.selectize.focus();
window.setTimeout(function() {
expect(test.selectize.$dropdown_content.find('[data-value=1]').length).to.be.equal(1);
expect(test.selectize.$dropdown_content.find('[data-value=2]').length).to.be.equal(1);
expect(test.selectize.$dropdown_content.find('[data-value=3]').length).to.be.equal(1);
done();
}, 0);
}, 0);
});
it('should empty "items" array', function() {
test.selectize.clear();
expect(test.selectize.items.length).to.be.equal(0);
});
it('should update DOM', function() {
test.selectize.clear();
expect(test.selectize.$control.find('[data-value=1]').length).to.be.equal(0);
expect(test.selectize.$control.find('[data-value=2]').length).to.be.equal(0);
expect(test.selectize.$control.find('[data-value=3]').length).to.be.equal(0);
});
it('should not fire "change" if silent is truthy', function(done) {
var watcher = function(e) { throw new Error('Change fired'); };
test.$select.on('change', watcher);
test.selectize.clear(true);
window.setTimeout(function() {
test.$select.off('change', watcher);
done();
}, 0);
});
it('should not give control focus', function(done) {
test.selectize.clear();
window.setTimeout(function() {
expect(test.selectize.isFocused).to.be.equal(false);
done();
}, 0);
});
it('should empty "items" array', function() {
test.selectize.clear();
expect(test.selectize.items.length).to.be.equal(0);
});
});
describe('search()', function() {
it('should throw error if "score" setting does not return a function', function() {
var test;
expect(function() {
test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 0},
{value: 1}
],
score: function() { }
});
test.selectize.search('hello');
}).to.throw(Error);
});
it('should not throw error if "score" setting does return a function', function() {
var test;
expect(function() {
test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 0},
{value: 1}
],
score: function(query) {
return function(item) { return 0; };
}
});
test.selectize.search('hello');
}).to.not.throw(Error);
});
});
describe('getScoreFunction()', function() {
it('should return an function that returns a number', function() {
var test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
searchField: 'value',
options: []
});
var fn = test.selectize.getScoreFunction('test');
expect(typeof fn).to.be.equal('function');
expect(typeof fn({value: 'test'})).to.be.equal('number');
expect(fn({value: 'test'})).to.be.above(0);
});
});
describe('destroy()', function() {
var has_namespaced_event = function($el, ns) {
var i, n, key;
var data = ($._data || $.data).apply($, [$(window)[0], 'events']);
ns = ns.replace(/^./, '');
for (key in data) {
if (data.hasOwnProperty(key)) {
for (i = 0, n = data[key].length; i < n; i++) {
if (data[key][i].namespace.indexOf(ns) !== -1) {
return true;
}
}
}
}
return false;
};
it('should remove control from DOM', function() {
var test = setup_test('<select>', {});
test.selectize.destroy();
expect($.contains(document.documentElement, test.selectize.$wrapper[0])).to.be.equal(false);
});
it('should delete "selectize" reference on original input element', function() {
var test = setup_test('<select>', {});
test.selectize.destroy();
expect(test.selectize.$input[0].selectize).to.be.equal(undefined);
});
it('should unbind events on window', function() {
var test = setup_test('<select>', {});
test.selectize.destroy();
expect(has_namespaced_event($(window), test.selectize.eventNS)).to.be.equal(false);
});
it('should unbind events on document', function() {
var test = setup_test('<select>', {});
test.selectize.destroy();
expect(has_namespaced_event($(document), test.selectize.eventNS)).to.be.equal(false);
});
it('should unbind events on <body>', function() {
var test = setup_test('<select>', {});
test.selectize.destroy();
expect(has_namespaced_event($('body'), test.selectize.eventNS)).to.be.equal(false);
});
it('should restore original options and tabindex', function() {
var children = '<optgroup label="Swedish Cars">' +
'<option value="volvo">Volvo</option>' +
'<option value="saab">Saab</option>' +
'</optgroup>' +
'<optgroup label="German Cars">' +
'<option value="mercedes">Mercedes</option>' +
'<option value="audi">Audi</option>' +
'</optgroup>';
var test = setup_test('<select tabindex="9999">' + children + '</select>', {});
test.selectize.destroy();
expect(test.$select.html()).to.be.equal(children);
expect(test.$select.attr('tabindex')).to.be.equal('9999');
});
it('should remove tabindex if it was originally undefined', function() {
var test = setup_test('<select>', {});
test.selectize.destroy();
expect(test.$select.attr('tabindex')).to.be.equal(undefined);
});
});
describe('clearCache()', function() {
var test;
before(function() {
test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 0},
{value: 1},
{value: 2},
{value: 3},
],
items: ['1','2','3']
});
test.selectize.advanceSelection(1);
test.selectize.refreshOptions(true);
test.selectize.refreshItems();
});
it('should clear the whole renderCache', function () {
expect($.isEmptyObject(test.selectize.renderCache)).to.be.equal(false);
test.selectize.clearCache();
expect($.isEmptyObject(test.selectize.renderCache)).to.be.equal(true);
});
it('should allow clearing just one template type from the renderCache', function () {
test.selectize.render('item', test.selectize.options[0]);
test.selectize.refreshOptions();
expect($.isEmptyObject(test.selectize.renderCache['option'])).to.be.equal(false);
expect($.isEmptyObject(test.selectize.renderCache['item'])).to.be.equal(false);
test.selectize.clearCache('option');
expect($.isEmptyObject(test.selectize.renderCache['option'])).to.be.equal(true);
expect($.isEmptyObject(test.selectize.renderCache['item'])).to.be.equal(false);
});
});
});
})();

274
web/vendor/selectize.js/test/events.js vendored Normal file
View file

@ -0,0 +1,274 @@
describe('Events', function() {
describe('focus', function() {
it('should work as expected', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b"></option><option value="c"></option></select>', {});
var counter = 0;
test.selectize.on('focus', function() { counter++; });
test.selectize.focus();
syn.click(test.selectize.$control).delay(0, function() {
window.setTimeout(function() {
expect(counter).to.be.equal(1);
done();
}, 0);
});
});
});
describe('blur', function() {
it('should work as expected', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b"></option><option value="c"></option></select>', {});
var counter = 0;
test.selectize.on('blur', function() { counter++; });
test.selectize.focus();
syn.click(test.selectize.$control).delay(0, function() {
syn.click($('body')).delay(0, function() {
window.setTimeout(function() {
expect(counter).to.be.equal(1);
done();
}, 0);
});
});
});
});
describe('change', function() {
it('should be triggered once', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b"></option><option value="c"></option></select>', {});
var counter = 0;
test.selectize.on('change', function() { counter++; });
test.selectize.setValue('b');
window.setTimeout(function() {
expect(counter).to.be.equal(1);
done();
}, 0);
});
it('should contain current value', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b"></option><option value="c"></option></select>', {});
test.selectize.on('change', function(value) {
expect(value).to.be.equal('c');
done();
});
test.selectize.setValue('c');
});
it('should not be triggered when the selected item has not changed', function(done) {
var test = setup_test('<select><option value="a" selected="selected">a</option></select>');
var counter = 0;
test.$select.on('change', function() { counter++; });
syn.click(test.selectize.$control).delay(0, function() {
syn
.click($('[data-value="a"]', test.selectize.$dropdown))
.delay(0, function() {
expect(counter).to.be.equal(0);
done();
});
});
});
});
describe('item_add', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a"></option><option value="b"></option><option value="c"></option></select>', {});
test.selectize.on('item_add', function() {
done();
});
test.selectize.addItem('b');
});
it('should contain item\'s value and element', function(done) {
var test = setup_test('<select><option value="a"></option><option value="b"></option><option value="c"></option></select>', {});
test.selectize.on('item_add', function(value, $item) {
expect(value).to.be.equal('b');
assert.equal($item.length, 1);
done();
});
test.selectize.addItem('b');
});
});
describe('item_remove', function() {
it('should be triggered', function(done) {
var test = setup_test('<select multiple><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('item_remove', function() {
done();
});
test.selectize.removeItem('a');
});
it('should contain item\'s value and element', function(done) {
var test = setup_test('<select multiple><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('item_remove', function(value, $item) {
expect(value).to.be.equal('b');
assert.equal($item.length, 1);
done();
});
test.selectize.removeItem('b');
});
});
describe('clear', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('clear', function() {
done();
});
test.selectize.clear();
});
});
describe('optgroup_add', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('optgroup_add', function() { done(); });
test.selectize.addOptionGroup('id', {label: 'Group'});
});
it('should contain optgroup id', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('optgroup_add', function(id, data) {
expect(id).to.be.equal('id');
done();
});
test.selectize.addOptionGroup('id', {label: 'Group'});
});
it('should contain outgroup data', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
var optgroup = {label: 'Group'};
test.selectize.on('optgroup_add', function(id, data) {
expect(data).to.eql(optgroup);
done();
});
test.selectize.addOptionGroup('id', optgroup);
});
});
describe('optgroup_remove', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('optgroup_remove', function(id) {
expect(id).to.be.equal('id');
done();
});
test.selectize.addOptionGroup('id', {label: 'Group'});
test.selectize.removeOptionGroup('id');
});
});
describe('optgroup_clear', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('optgroup_clear', function() {
done();
});
test.selectize.addOptionGroup('id', {label: 'Group'});
test.selectize.clearOptionGroups();
});
});
describe('option_add', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('option_add', function() {
done();
});
test.selectize.addOption({value: 'e'});
});
it('should contain option value', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('option_add', function(value, data) {
expect(value).to.be.equal('e');
done();
});
test.selectize.addOption({value: 'e'});
});
it('should contain option data', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
var option = {value: 'e'};
test.selectize.on('option_add', function(value, data) {
expect(option).to.eql(data);
done();
});
test.selectize.addOption(option);
});
});
describe('option_remove', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('option_remove', function() {
done();
});
test.selectize.removeOption('a');
});
it('should contain option value', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('option_remove', function(value) {
expect(value).to.be.equal('a');
done();
});
test.selectize.removeOption('a');
});
});
describe('option_clear', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('option_clear', function() {
done();
});
test.selectize.clearOptions();
});
});
describe('dropdown_open', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('dropdown_open', function() {
done();
});
test.selectize.open();
});
});
describe('dropdown_close', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('dropdown_close', function() {
done();
});
test.selectize.open();
test.selectize.close();
});
});
describe('destroy', function() {
it('should be triggered', function(done) {
var test = setup_test('<select><option value="a" selected></option><option value="b" selected></option><option value="c"></option></select>', {});
test.selectize.on('destroy', function() {
done();
});
test.selectize.destroy();
});
});
describe('type', function() {
it('should be triggered', function(done) {
var test = setup_test('<select></select>', {create: true});
test.selectize.on('type', function() {
done();
});
syn.click(test.selectize.$control).type('a', test.selectize.$control_input);
});
it('should contain current value', function(done) {
var test = setup_test('<select></select>', {create: true});
test.selectize.on('type', function(value) {
expect(value).to.be.equal('a');
done();
});
syn.click(test.selectize.$control).type('a', test.selectize.$control_input);
});
});
});

View file

@ -0,0 +1,64 @@
describe('DOM Events', function() {
describe('"change"', function() {
it('should be triggered once by addItem()', function(done) {
var test = setup_test('<select>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 'a'},
{value: 'b'},
],
items: ['a']
});
var counter = 0;
test.$select.on('change', function() { counter++; });
test.selectize.addItem('b');
window.setTimeout(function() {
expect(counter).to.be.equal(1);
done();
}, 0);
});
it('should be triggered once by removeItem()', function(done) {
var test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 'a'},
{value: 'b'},
],
items: ['a','b']
});
var counter = 0;
test.$select.on('change', function() { counter++; });
test.selectize.removeItem('b');
window.setTimeout(function() {
expect(counter).to.be.equal(1);
done();
}, 0);
});
it('should be triggered once by clear()', function(done) {
var test = setup_test('<select multiple>', {
valueField: 'value',
labelField: 'value',
options: [
{value: 'a'},
{value: 'b'},
],
items: ['a','b']
});
var counter = 0;
test.$select.on('change', function() { counter++; });
test.selectize.clear();
window.setTimeout(function() {
expect(counter).to.be.equal(1);
done();
}, 0);
});
});
});

View file

@ -0,0 +1,323 @@
(function() {
var click = function(el, cb) {
syn.click(el).delay(350, cb);
};
// These tests are functional simulations of
// user interaction, using syn.js. For more information:
//
// @see http://v3.javascriptmvc.com/docs.html#&who=syn
// @see http://bitovi.com/blog/2010/07/syn-a-standalone-synthetic-event-library.html
describe('Interaction', function() {
it('should keep dropdown open after selection made if closeAfterSelect: false', function(done) {
var test = setup_test('<select multiple>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {});
click(test.selectize.$control, function() {
click($('[data-value=a]', test.selectize.$dropdown_content), function() {
expect(test.selectize.isOpen).to.be.equal(true);
expect(test.selectize.isFocused).to.be.equal(true);
done();
});
});
});
it('should close dropdown after selection made if closeAfterSelect: true', function(done) {
var test = setup_test('<select multiple>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {closeAfterSelect: true});
click(test.selectize.$control, function() {
click($('[data-value=a]', test.selectize.$dropdown_content), function() {
expect(test.selectize.isOpen).to.be.equal(false);
expect(test.selectize.isFocused).to.be.equal(true);
done();
});
});
});
describe('clicking control', function() {
it('should give it focus', function(done) {
var test = setup_test('<select>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {});
click(test.selectize.$control, function() {
expect(test.selectize.isFocused).to.be.equal(true);
done();
});
});
it('should start loading results if preload:"focus"', function(done) {
var calls_focus = 0;
var calls_load = 0;
var test = setup_test('<select>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {
preload: 'focus',
load: function(query, done) {
calls_load++;
assert.equal(query, '');
setTimeout(function() {
done([{value: 'c', text: 'C'}]);
});
}
});
test.selectize.on('focus', function() {
calls_focus++;
});
click(test.selectize.$control, function() {
setTimeout(function() {
assert.equal(calls_focus, 1);
assert.equal(calls_load, 1);
done();
}, 300);
});
});
it('should open dropdown menu', function(done) {
var test = setup_test('<select>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {});
click(test.selectize.$control, function() {
expect(test.selectize.isOpen).to.be.equal(true);
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(true);
done();
});
});
});
describe('clicking option', function() {
it('should select it', function(done) {
var test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {});
click(test.selectize.$control, function() {
click($('[data-value="b"]', test.selectize.$dropdown), function() {
expect(test.selectize.$input.val()).to.be.equal('b');
expect(test.selectize.$input.text()).to.be.equal('B');
done();
});
});
});
it('should close dropdown', function(done) {
var test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {});
click(test.selectize.$control, function() {
click($('[data-value="b"]', test.selectize.$dropdown), function() {
expect(test.selectize.isOpen).to.be.equal(false);
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(false);
done();
});
});
});
});
describe('typing in input', function() {
it('should filter results', function(done) {
var test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {});
click(test.selectize.$control, function() {
syn.type('a', test.selectize.$control_input)
.delay(0, function() {
expect($('[data-value="a"]', test.selectize.$dropdown).length).to.be.equal(1);
expect($('[data-value="b"]', test.selectize.$dropdown).length).to.be.equal(0);
done();
});
});
});
it('should hide dropdown if no results present', function(done) {
var test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {});
click(test.selectize.$control, function() {
syn.type('awaw', test.selectize.$control_input)
.delay(0, function() {
expect(test.selectize.isOpen).to.be.equal(false);
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(false);
done();
});
});
});
it('should not hide dropdown if "create" option enabled and no results present', function(done) {
var test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {create: true});
click(test.selectize.$control, function() {
syn.type('awaw', test.selectize.$control_input)
.delay(0, function() {
expect(test.selectize.isOpen).to.be.equal(true);
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(true);
done();
});
});
});
it('should restore dropdown visibility when backing out of a query without results (backspace)', function(done) {
var test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {});
click(test.selectize.$control, function() {
syn.type('awf', test.selectize.$control_input)
.type('\b\b\b', test.selectize.$control_input)
.delay(0, function() {
expect(test.selectize.isOpen).to.be.equal(true);
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(true);
done();
});
});
});
it('should move caret when [left] or [right] pressed', function(done) {
var test = setup_test('<input type="text" value="a,b,c,d">', {create: true});
click(test.selectize.$control, function() {
syn.type('[left][left]whatt', test.selectize.$control_input)
.delay(0, function() {
expect(test.selectize.caretPos).to.be.equal(2);
done();
});
});
});
it('should not create input if comma entered in single select mode', function(done) {
var test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {create: true});
click(test.selectize.$control, function() {
syn.type('asdf,asdf', test.selectize.$control_input)
.delay(0, function() {
expect(test.selectize.isOpen).to.be.equal(true);
expect(test.selectize.options).to.not.have.property('asdf');
done();
});
});
});
});
describe('blurring the input', function() {
it('should close dropdown when createOnBlur is true', function(done) {
var test = setup_test('<select multiple="multiple">' +
'<option></option>' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'</select>', {
createOnBlur: true,
create: function(value){
return {
value: value,
text: value
};
}
});
click(test.selectize.$control, function() {
syn
.type('fooo', test.selectize.$control_input)
.delay(0, function() {
expect(test.selectize.isOpen).to.be.equal(true);
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(true);
syn
.click($("body"))
.delay(5, function() {
expect(test.selectize.isOpen).to.be.equal(false);
expect(test.selectize.$dropdown.is(':visible')).to.be.equal(false);
done();
});
});
});
});
});
describe('filtering created items', function() {
function createFilterTest(createFilter) {
return setup_test('<select multiple="multiple"></select>', {create: true, createFilter: createFilter});
}
var text = 'abc';
function execFilterTest(test, done, expectation) {
var selectize = test.selectize;
click(selectize.$control, function() {
syn
.type(text, selectize.$control_input)
.type(selectize.settings.delimiter, selectize.$control_input)
.delay(0, function() {
expectation(selectize);
done();
})
});
}
function execFilterTests(heading, filters, expectation) {
for (var i = 0; i < filters.length; i++) {
(function(filter) {
it(heading, function(done) {
execFilterTest(createFilterTest(filter), done, expectation);
});
})(filters[i]);
}
}
execFilterTests('should add an item normally if there is no createFilter', [undefined, null, ''], function(selectize) {
expect(selectize.getItem(text).length).to.be.equal(1);
});
execFilterTests('should add an item if the input matches the createFilter', ['a', /a/, function() { return true; }], function(selectize) {
expect(selectize.getItem(text).length).to.be.equal(1);
});
execFilterTests('should not add an item or display the create label if the input does not match the createFilter', ['foo', /foo/, function() { return false; }], function(selectize) {
expect(selectize.getItem(text).length).to.be.equal(0);
expect($(selectize.$dropdown_content).filter('.create').length).to.be.equal(0);
});
});
});
})();

283
web/vendor/selectize.js/test/setup.js vendored Normal file
View file

@ -0,0 +1,283 @@
(function() {
describe('Setup', function() {
it('should not allow duplicate initialization', function() {
var instance_before, instance_after, test;
test = setup_test('<input type="text">', {});
instance_before = test.$select[0].selectize;
test.$select.selectize();
instance_after = test.$select[0].selectize;
expect(instance_before).to.be.equal(instance_after);
});
describe('<input type="text">', function() {
it('should complete without exceptions', function() {
var test = setup_test('<input type="text">', {});
});
it('should populate items,options from "dataAttr" if available', function() {
var data = [{val: 'a', lbl: 'Hello'}, {val: 'b', lbl: 'World'}];
var test = setup_test('<input type="text" value="c,d,e" data-hydrate="' + JSON.stringify(data).replace(/"/g,'&quot;') + '">', {
dataAttr: 'data-hydrate',
valueField: 'val',
labelField: 'lbl'
});
expect(test.selectize.getValue()).to.be.equal('a,b');
assert.deepEqual(test.selectize.items, ['a','b']);
assert.deepEqual(test.selectize.options, {
'a': {val: 'a', lbl: 'Hello', $order: 1},
'b': {val: 'b', lbl: 'World', $order: 2}
});
});
describe('getValue()', function() {
it('should return value as a string', function() {
var test = setup_test('<input type="text" value="a,b">', {delimiter: ','});
expect(test.selectize.getValue()).to.be.a('string');
});
it('should return "" when empty', function() {
var test = setup_test('<input type="text" value="">', {delimiter: ','});
expect(test.selectize.getValue()).to.be.equal('');
});
it('should return proper value when not empty', function() {
var test = setup_test('<input type="text" value="a,b">', {delimiter: ','});
expect(test.selectize.getValue()).to.be.equal('a,b');
});
});
describe('<input type="text" attributes>', function() {
it('should propagate original input attributes to the generated input', function() {
var test = setup_test('<input type="text" autocorrect="off" autocapitalize="none">', {});
expect(test.selectize.$control_input.attr('autocorrect')).to.be.equal('off');
expect(test.selectize.$control_input.attr('autocapitalize')).to.be.equal('none');
});
it('should not add attributes if not present in the original', function() {
var test = setup_test('<input type="text">', {});
expect(test.selectize.$control_input.attr('autocorrect')).to.be.equal(undefined);
expect(test.selectize.$control_input.attr('autocapitalize')).to.be.equal(undefined);
});
});
});
describe('<select>', function() {
it('should complete without exceptions', function() {
var test = setup_test('<select></select>', {});
});
it('should allow for values optgroups with duplicated options', function() {
var test = setup_test(['<select>',
'<optgroup label="Group 1">',
'<option value="a">Item A</option>',
'<option value="b">Item B</option>',
'</optgroup>',
'<optgroup label="Group 2">',
'<option value="a">Item A</option>',
'<option value="b">Item B</option>',
'</optgroup>',
'</select>'].join(''), {
optgroupValueField: 'val',
optgroupField: 'grp'
});
assert.deepEqual(test.selectize.options, {
'a': {text: 'Item A', value: 'a', grp: ['Group 1', 'Group 2'], $order: 1},
'b': {text: 'Item B', value: 'b', grp: ['Group 1', 'Group 2'], $order: 2}
});
assert.deepEqual(test.selectize.optgroups, {
'Group 1': {label: 'Group 1', val: 'Group 1', $order: 3},
'Group 2': {label: 'Group 2', val: 'Group 2', $order: 4}
});
});
it('should add options in text form (no html entities)', function() {
var test = setup_test('<select><option selected value="a">&lt;hi&gt;</option></select>', {});
expect(test.selectize.options['a'].text).to.be.equal('<hi>');
});
it('should keep options in original order if no sort given', function(done) {
var test = setup_test([
'<select multiple>',
'<option value="">Select a state...</option>',
'<option value="AL">Alabama</option>',
'<option value="AK">Alaska</option>',
'<option value="AZ">Arizona</option>',
'<option value="AR">Arkansas</option>',
'<option value="CA" selected>California</option>',
'<option value="CO">Colorado</option>',
'<option value="CT">Connecticut</option>',
'<option value="DE">Delaware</option>',
'<option value="DC">District of Columbia</option>',
'<option value="FL">Florida</option>',
'<option value="GA">Georgia</option>',
'<option value="HI">Hawaii</option>',
'<option value="ID">Idaho</option>',
'<option value="IL">Illinois</option>',
'<option value="IN">Indiana</option>',
'<option value="IA">Iowa</option>',
'<option value="KS">Kansas</option>',
'<option value="KY">Kentucky</option>',
'<option value="LA">Louisiana</option>',
'<option value="ME">Maine</option>',
'<option value="MD">Maryland</option>',
'<option value="MA">Massachusetts</option>',
'<option value="MI">Michigan</option>',
'<option value="MN">Minnesota</option>',
'<option value="MS">Mississippi</option>',
'<option value="MO">Missouri</option>',
'<option value="MT">Montana</option>',
'<option value="NE">Nebraska</option>',
'<option value="NV">Nevada</option>',
'<option value="NH">New Hampshire</option>',
'<option value="NJ">New Jersey</option>',
'<option value="NM">New Mexico</option>',
'<option value="NY">New York</option>',
'<option value="NC">North Carolina</option>',
'<option value="ND">North Dakota</option>',
'<option value="OH">Ohio</option>',
'<option value="OK">Oklahoma</option>',
'<option value="OR">Oregon</option>',
'<option value="PA">Pennsylvania</option>',
'<option value="RI">Rhode Island</option>',
'<option value="SC">South Carolina</option>',
'<option value="SD">South Dakota</option>',
'<option value="TN">Tennessee</option>',
'<option value="TX">Texas</option>',
'<option value="UT">Utah</option>',
'<option value="VT">Vermont</option>',
'<option value="VA">Virginia</option>',
'<option value="WA">Washington</option>',
'<option value="WV">West Virginia</option>',
'<option value="WI">Wisconsin</option>',
'<option value="01">01</option>',
'<option value="10">10</option>',
'<option value="WY" selected>Wyoming</option>',
'</select>'
].join(), {});
var order_expected = ['AL','AK','AZ','AR','CO','CT','DE','DC','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','01','10'];
var order_actual = [];
test.selectize.refreshOptions(true);
window.setTimeout(function() {
test.selectize.$dropdown.find('[data-value]').each(function(i, el) {
order_actual.push($(el).attr('data-value'));
});
expect(order_actual).to.eql(order_expected);
done();
}, 0);
});
describe('getValue()', function() {
it('should return "" when empty', function() {
var test = setup_test('<select>', {});
expect(test.selectize.getValue()).to.be.equal('');
});
it('should return proper value when not empty', function() {
var test = setup_test('<select><option selected value="a">A</option></select>', {});
expect(test.selectize.getValue()).to.be.equal('a');
});
});
});
describe('<select multiple>', function() {
it('should complete without exceptions', function() {
var test = setup_test('<select>', {});
});
describe('getValue()', function() {
it('should return [] when empty', function() {
var test = setup_test('<select multiple>', {});
expect(test.selectize.getValue()).to.deep.equal([]);
});
it('should return proper value as array when not empty', function() {
var test = setup_test('<select multiple><option selected value="a">A</option></select>', {});
expect(test.selectize.getValue()).to.deep.equal(['a']);
});
});
});
describe('<select disabled>', function() {
var test;
before(function() {
test = setup_test('<select disabled>', {});
});
it('should have "disabled" class', function() {
expect(test.selectize.$control.hasClass('disabled')).to.be.equal(true);
});
it('should have isDisabled property set to true', function() {
expect(test.selectize.isDisabled).to.be.equal(true);
});
});
describe('<select required>', function(){
var $form, $button, test;
beforeEach(function() {
test = setup_test('<select required>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'</select>', {});
$form = test.$select.parents('form');
$button = $('<button type="submit">').appendTo($form);
});
afterEach(function() {
$form.off('.test_required');
$button.remove();
});
it('should have isRequired property set to true', function() {
expect(test.selectize.isRequired).to.be.equal(true);
});
it('should have the required class', function() {
expect(test.selectize.$control.hasClass('required')).to.be.equal(true);
});
if ($.fn.selectize.support.validity) {
it('should have "invalid" class when validation fails', function(done) {
test.$select[0].checkValidity();
window.setTimeout(function() {
expect(test.selectize.$control.hasClass('invalid')).to.be.equal(true);
done();
}, 250);
});
it('should clear the invalid class after an item is selected', function(done) {
syn.click($button).delay(0, function() {
test.selectize.addItem('a');
expect(test.selectize.$control.hasClass('invalid')).to.be.equal(false);
done();
});
});
it('should pass validation if an element is selected', function(done) {
test.selectize.addItem('a');
$form.one('submit.test_required', function(e) {
done();
});
syn.click($button);
});
}
});
describe('<select> (not required)', function(){
var $form, $button, test;
beforeEach(function() {
test = setup_test('<select>' +
'<option value="">Select an option...</option>' +
'<option value="a">A</option>' +
'</select>', {});
$form = test.$select.parents('form');
$button = $('<button type="submit">').appendTo($form);
});
afterEach(function() {
$form.off('.test_required');
$button.remove();
});
it('should have isRequired property set to false', function() {
expect(test.selectize.isRequired).to.be.equal(false);
});
it('should not have the required class', function() {
expect(test.selectize.$control.hasClass('required')).to.be.equal(false);
});
});
});
})();

View file

@ -0,0 +1,35 @@
window.expect = chai.expect;
window.assert = chai.assert;
window.has_focus = function(elem) {
return !!(elem === document.activeElement);
};
var sandbox = document.createElement('form');
document.body.appendChild(sandbox);
window.setup_test = function(html, options, callback) {
if (window.test_last) window.test_last.teardown();
var $select = $(html).appendTo(sandbox).selectize(options);
var instance = $select[0].selectize;
var test = window.test_last = {
$select: $select,
callback: callback,
selectize: instance,
teardown: function() {
instance.destroy();
$select.remove();
window.test_last = null;
}
};
return test;
};
after(function() {
if (window.test_last) {
window.test_last.teardown();
}
});
$(sandbox).on('submit', function(e) { e.preventDefault(); });

File diff suppressed because it is too large Load diff

61
web/vendor/selectize.js/test/xss.js vendored Normal file
View file

@ -0,0 +1,61 @@
(function() {
window.setup_xss_test = function(html, options, done) {
window.xss = function() {
window.clearTimeout(timeout);
complete(new Error('Exploit executed'));
};
var test = setup_test(html, options);
var complete = function(err) {
window.xss = function() {};
done(err);
};
var timeout = window.setTimeout(complete, 75);
return test;
};
describe('XSS', function() {
describe('Raw HTML in original input value', function() {
it('should not trigger exploit', function(done) {
setup_xss_test('<input type="text" value="&lt;img src=&quot;x&quot; onerror=&quot;xss()&quot;&gt;">', {}, done);
});
});
describe('Raw HTML in optgroup label', function() {
it('should not trigger exploit', function(done) {
var test = setup_xss_test('<select><optgroup label="&lt;img src=&quot;x&quot; onerror=&quot;xss()&quot;&gt;"><option>Test</option></optgroup></select>', {}, done);
test.selectize.refreshOptions();
test.selectize.open();
});
});
describe('Raw HTML in option label should not trigger exploit', function() {
it('should not trigger exploit', function(done) {
setup_xss_test('<input type="text" value="">', {
options: [
{value: '1', label: '<img src="x" onerror="xss()">'}
],
items: ['1'],
labelField: 'label',
valueField: 'value'
}, done);
});
});
describe('Raw HTML in option value should not trigger exploit', function() {
it('should not trigger exploit', function(done) {
setup_xss_test('<input type="text" value="">', {
options: [
{value: '<img src="x" onerror="xss()">', label: '1'}
],
items: ['<img src="x" onerror="xss()">'],
labelField: 'label',
valueField: 'value'
}, done);
});
});
});
})();