Compare commits
72 Commits
Author | SHA1 | Date |
---|---|---|
mlharvest | 6a5d61b061 | |
Krister Kari | 75606a7434 | |
Krister Kari | 50e3db34ab | |
Krister Kari | 4b6fe537d7 | |
mlharvest | dc2eb014bd | |
Matthew Lettini | 7430fd54e4 | |
Patrick Filler | 5175cb809e | |
Patrick Filler | c93a52b7e8 | |
Patrick Filler | add519f2ad | |
Patrick Filler | dcbac1aba2 | |
Patrick Filler | 929253b6d9 | |
Matthew Lettini | bd2cc547e4 | |
Matthew Beale | 5d23a35453 | |
Matthew Beale | eb2b3285bc | |
Matthew Beale | 71c06c7da4 | |
Matthew Beale | 04568d271e | |
Patrick Filler | 8ce24bda89 | |
Patrick Filler | 3b3eca5249 | |
Patrick Filler | c9294d5943 | |
Patrick Filler | 0108f15866 | |
Thomas Frössman | 4f3a8bebdb | |
Mark Nadig | e400dc7a3a | |
Mark Nadig | cf23dc522d | |
Mark Nadig | 47bc14148f | |
Mike Frey | 5911d684f9 | |
Paul Redmond | e85cf8481e | |
Mike Frey | a316ca88d6 | |
Patrick Filler | 880a30dcb4 | |
Matthew Lettini | 7a0687e995 | |
Matthew Lettini | 859425f782 | |
Matthew Lettini | 50f2df47e7 | |
Matthew Lettini | 89141f1493 | |
Matthew Lettini | 1ed5f7d5af | |
Patrick Filler | 5808c97172 | |
Patrick Filler | 31cd33f22b | |
Patrick Filler | 16b6f5047a | |
Patrick Filler | 9dd4fb51a8 | |
Jerrett | 5d0e5855c7 | |
Jerrett | acf540ff21 | |
T.J. Schuck | 875c800c7a | |
Jerrett | 91502810c9 | |
Patrick Filler | f87575cb75 | |
Patrick Filler | f0a349d782 | |
Patrick Filler | 948fbcca11 | |
Graham Randall | 3ba2d65221 | |
Patrick Filler | a9d52581a5 | |
Patrick Filler | 9bc5fdcfe0 | |
Patrick Filler | 581f2073b5 | |
François Bernier | 17c1e8e18e | |
Krister Kari | 71b343ffd5 | |
Patrick Filler | 0f89ebef85 | |
Patrick Filler | c772be4cc1 | |
Patrick Filler | 84ee71187d | |
Steve De Jonghe | b3ff621d85 | |
Patrick Filler | f09c117224 | |
Patrick Filler | 35e0680e75 | |
Patrick Filler | 20a588d5b1 | |
Patrick Filler | fa35528d15 | |
Patrick Filler | 499c35b62d | |
Kévin Gomez Pinto | a53b58f15a | |
Patrick Filler | f618c69d54 | |
Patrick Filler | 4a48fbcd11 | |
Matthew Beale | 47b7b4d6bc | |
Patrick Filler | 1e49c19d20 | |
Patrick Filler | 1e9b4ddbe9 | |
Patrick Filler | d87310ee5d | |
Patrick Filler | 7dd29088e8 | |
Patrick Filler | cde5fc8e69 | |
Adam Ford | 208370bd0d | |
Adam Ford | 4b9a5c68a5 | |
Matthew Beale | 4e463669d2 | |
Sebastian Delmont | 3bf68f6aef |
|
@ -1 +1,2 @@
|
|||
.DS_Store
|
||||
.DS_Store
|
||||
node_modules
|
||||
|
|
20
Cakefile
20
Cakefile
|
@ -11,12 +11,14 @@ CoffeeScript = require 'coffee-script'
|
|||
|
||||
javascripts = {
|
||||
'chosen/chosen.jquery.js': [
|
||||
'coffee/chosen.jquery.coffee'
|
||||
'coffee/lib/select-parser.coffee'
|
||||
'coffee/lib/abstract-chosen.coffee'
|
||||
'coffee/chosen.jquery.coffee'
|
||||
]
|
||||
'chosen/chosen.proto.js': [
|
||||
'coffee/chosen.proto.coffee'
|
||||
'coffee/lib/select-parser.coffee'
|
||||
'coffee/lib/abstract-chosen.coffee'
|
||||
'coffee/chosen.proto.coffee'
|
||||
]
|
||||
}
|
||||
|
||||
|
@ -75,7 +77,8 @@ task 'build', 'build Chosen from source', build = (cb) ->
|
|||
write_chosen_javascript javascript.replace(/\.js$/,'.min.js'), (
|
||||
uglify.gen_code uglify.ast_squeeze uglify.ast_mangle parser.parse code
|
||||
)
|
||||
cb() if typeof cb is 'function'
|
||||
package_npm () ->
|
||||
cb() if typeof cb is 'function'
|
||||
catch e
|
||||
print_error e, file_name, file_contents
|
||||
|
||||
|
@ -92,6 +95,17 @@ task 'watch', 'watch coffee/ for changes and build Chosen', ->
|
|||
invoke 'build'
|
||||
)(file)
|
||||
|
||||
task 'package_npm', 'generate the package.json file for npm', package_npm = (cb) ->
|
||||
try
|
||||
package_file = 'package.json'
|
||||
package = JSON.parse("#{fs.readFileSync package_file}")
|
||||
package['version'] = version()
|
||||
fs.writeFileSync package_file, JSON.stringify(package, null, 2)
|
||||
console.log "Wrote #{package_file}"
|
||||
cb() if typeof cb is 'function'
|
||||
catch e
|
||||
print_error e, package_file
|
||||
|
||||
run = (cmd, args, cb, err_cb) ->
|
||||
exec "#{cmd} #{args.join(' ')}", (err, stdout, stderr) ->
|
||||
if err isnt null
|
||||
|
|
22
README.md
22
README.md
|
@ -14,17 +14,20 @@ Contributions and pull requests are very welcome. Please follow these guidelines
|
|||
|
||||
1. Make all changes in Coffeescript files, **not** JavaScript files.
|
||||
2. For feature changes, update both jQuery *and* Prototype versions
|
||||
3. Use 'cake build' to generate Chosen's JavaScript file and minified version.
|
||||
4. Don't touch the VERSION file
|
||||
5. Submit a Pull Request using GitHub.
|
||||
3. Use `npm install -d` to install the correct development dependencies.
|
||||
4. Use `cake build` or `cake watch` to generate Chosen's JavaScript file and minified version.
|
||||
5. Don't touch the `VERSION` file
|
||||
6. Submit a Pull Request using GitHub.
|
||||
|
||||
### Using CoffeeScript & Cake
|
||||
|
||||
First, make sure you have the proper CoffeeScript / Cake set-up in place.
|
||||
First, make sure you have the proper CoffeeScript / Cake set-up in place. We have added a package.json that makes this easy:
|
||||
|
||||
1. Install Coffeescript: the [CoffeeScript documentation](http://jashkenas.github.com/coffee-script/) provides easy-to-follow instructions.
|
||||
2. Install UglifyJS: <code>npm -g install uglify-js</code>
|
||||
3. Verify that your $NODE_PATH is properly configured using <code>echo $NODE_PATH</code>
|
||||
```
|
||||
npm install -d
|
||||
```
|
||||
|
||||
This will install `coffee-script` and `uglifyjs`.
|
||||
|
||||
Once you're configured, building the JavasScript from the command line is easy:
|
||||
|
||||
|
@ -36,11 +39,12 @@ If you're interested, you can find the recipes in Cakefile.
|
|||
|
||||
### Chosen Credits
|
||||
|
||||
- Built by [Harvest](http://www.getharvest.com/)
|
||||
- Built by [Harvest](http://www.getharvest.com/). Want to work on projects like this? [We’re hiring](http://www.getharvest.com/careers)!
|
||||
- Concept and development by [Patrick Filler](http://www.patrickfiller.com/)
|
||||
- Design and CSS by [Matthew Lettini](http://matthewlettini.com/)
|
||||
|
||||
### Notable Forks
|
||||
|
||||
- [Chosen for MooTools](https://github.com/julesjanssen/chosen), by Jules Janssen
|
||||
- [Chosen Drupal 7 Module](https://github.com/Polzme/chosen), by Pol Dell'Aiera
|
||||
- [Chosen Drupal 7 Module](http://drupal.org/project/chosen), by Pol Dell'Aiera, Arshad Chummun, Bart Feenstra, Kálmán Hosszu, etc.
|
||||
- [Chosen CakePHP Plugin](https://github.com/paulredmond/chosen-cakephp), by Paul Redmond
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 1.5 KiB |
|
@ -23,29 +23,32 @@
|
|||
|
||||
/* @group Single Chosen */
|
||||
.chzn-container-single .chzn-single {
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
|
||||
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
|
||||
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
|
||||
background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%);
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius : 4px;
|
||||
border-radius : 4px;
|
||||
background-color: #ffffff;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
|
||||
background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-image: -ms-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-image: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius : 5px;
|
||||
border-radius : 5px;
|
||||
-moz-background-clip : padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip : padding-box;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid #aaaaaa;
|
||||
-webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
|
||||
-moz-box-shadow : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
|
||||
box-shadow : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
height: 23px;
|
||||
line-height: 24px;
|
||||
padding: 0 0 0 8px;
|
||||
color: #444;
|
||||
color: #444444;
|
||||
text-decoration: none;
|
||||
}
|
||||
.chzn-container-single .chzn-single span {
|
||||
|
@ -61,7 +64,7 @@
|
|||
display: block;
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
top: 8px;
|
||||
top: 6px;
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
font-size: 1px;
|
||||
|
@ -71,21 +74,6 @@
|
|||
background-position: right -11px;
|
||||
}
|
||||
.chzn-container-single .chzn-single div {
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
-moz-border-radius : 0 4px 4px 0;
|
||||
border-radius : 0 4px 4px 0;
|
||||
-moz-background-clip : padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip : padding-box;
|
||||
background: #ccc;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
|
||||
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
||||
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
|
||||
background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
|
||||
background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
|
||||
background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
|
||||
border-left: 1px solid #aaa;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
@ -94,25 +82,26 @@
|
|||
width: 18px;
|
||||
}
|
||||
.chzn-container-single .chzn-single div b {
|
||||
background: url('chosen-sprite.png') no-repeat 0 1px;
|
||||
background: url('chosen-sprite.png') no-repeat 0 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chzn-container-single .chzn-search {
|
||||
padding: 3px 4px;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
z-index: 1010;
|
||||
}
|
||||
.chzn-container-single .chzn-search input {
|
||||
background: #fff url('chosen-sprite.png') no-repeat 100% -22px;
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%,#eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
margin: 1px 0;
|
||||
padding: 4px 20px 4px 5px;
|
||||
outline: 0;
|
||||
|
@ -130,16 +119,20 @@
|
|||
}
|
||||
/* @end */
|
||||
|
||||
.chzn-container-single-nosearch .chzn-search input {
|
||||
position: absolute;
|
||||
left: -9000px;
|
||||
}
|
||||
|
||||
/* @group Multi Chosen */
|
||||
.chzn-container-multi .chzn-choices {
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
||||
background-image: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
|
||||
background-image: linear-gradient(top, #ffffff 85%,#eeeeee 99%);
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
border: 1px solid #aaa;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -162,6 +155,9 @@
|
|||
color: #666;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
height: 15px;
|
||||
padding: 5px;
|
||||
margin: 1px 0;
|
||||
outline: 0;
|
||||
|
@ -181,21 +177,22 @@
|
|||
-webkit-background-clip: padding-box;
|
||||
background-clip : padding-box;
|
||||
background-color: #e4e4e4;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
|
||||
background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
|
||||
background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%);
|
||||
background-image: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 );
|
||||
background-image: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
-moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
color: #333;
|
||||
border: 1px solid #b4b4b4;
|
||||
border: 1px solid #aaaaaa;
|
||||
line-height: 13px;
|
||||
padding: 3px 19px 3px 6px;
|
||||
padding: 3px 20px 3px 5px;
|
||||
margin: 3px 0 3px 5px;
|
||||
position: relative;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice span {
|
||||
cursor: default;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice-focus {
|
||||
|
@ -222,7 +219,7 @@
|
|||
/* @group Results */
|
||||
.chzn-container .chzn-results {
|
||||
margin: 0 4px 4px 0;
|
||||
max-height: 190px;
|
||||
max-height: 240px;
|
||||
padding: 0 0 0 4px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
|
@ -234,8 +231,8 @@
|
|||
}
|
||||
.chzn-container .chzn-results li {
|
||||
display: none;
|
||||
line-height: 80%;
|
||||
padding: 7px 7px 8px;
|
||||
line-height: 15px;
|
||||
padding: 5px 6px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
@ -244,7 +241,14 @@
|
|||
display: list-item;
|
||||
}
|
||||
.chzn-container .chzn-results .highlighted {
|
||||
background: #3875d7;
|
||||
background-color: #3875d7;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875d7', endColorstr='#2a62bc', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
|
||||
background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: -ms-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
color: #fff;
|
||||
}
|
||||
.chzn-container .chzn-results li em {
|
||||
|
@ -264,11 +268,34 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
.chzn-container .chzn-results .group-option {
|
||||
padding-left: 20px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.chzn-container-multi .chzn-drop .result-selected {
|
||||
display: none;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll {
|
||||
background: white;
|
||||
margin: 0 4px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 321px; /* This should by dynamic with js */
|
||||
z-index: 1;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll span {
|
||||
display: inline-block;
|
||||
height: 17px;
|
||||
text-indent: -5000px;
|
||||
width: 9px;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll-down {
|
||||
bottom: 0;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll-down span {
|
||||
background: url('chosen-sprite.png') no-repeat -4px -3px;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll-up span {
|
||||
background: url('chosen-sprite.png') no-repeat -22px -3px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Active */
|
||||
|
@ -286,13 +313,13 @@
|
|||
-o-box-shadow : 0 1px 0 #fff inset;
|
||||
box-shadow : 0 1px 0 #fff inset;
|
||||
background-color: #eee;
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
|
||||
background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
|
||||
background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
|
||||
background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
|
||||
background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
background-image: linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
-webkit-border-bottom-left-radius : 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-moz-border-radius-bottomleft : 0;
|
||||
|
@ -332,31 +359,31 @@
|
|||
}
|
||||
|
||||
/* @group Right to Left */
|
||||
.chzn-rtl { direction:rtl;text-align: right; }
|
||||
.chzn-rtl .chzn-single { padding-left: 0; padding-right: 8px; }
|
||||
.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; }
|
||||
.chzn-rtl .chzn-single div {
|
||||
left: 0; right: auto;
|
||||
border-left: none; border-right: 1px solid #aaaaaa;
|
||||
-webkit-border-radius: 4px 0 0 4px;
|
||||
-moz-border-radius : 4px 0 0 4px;
|
||||
border-radius : 4px 0 0 4px;
|
||||
.chzn-rtl { text-align: right; }
|
||||
.chzn-rtl .chzn-single { padding: 0 8px 0 0; overflow: visible; }
|
||||
.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; direction: rtl; }
|
||||
|
||||
.chzn-rtl .chzn-single div { left: 3px; right: auto; }
|
||||
.chzn-rtl .chzn-single abbr {
|
||||
left: 26px;
|
||||
right: auto;
|
||||
}
|
||||
.chzn-rtl .chzn-choices .search-field input { direction: rtl; }
|
||||
.chzn-rtl .chzn-choices li { float: right; }
|
||||
.chzn-rtl .chzn-choices .search-choice { padding: 3px 6px 3px 19px; margin: 3px 5px 3px 0; }
|
||||
.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 5px; right: auto; background-position: right top;}
|
||||
.chzn-rtl.chzn-container-single .chzn-results { margin-left: 4px; margin-right: 0; padding-left: 0; padding-right: 4px; }
|
||||
.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 20px; }
|
||||
.chzn-rtl .chzn-choices .search-choice { padding: 3px 5px 3px 19px; margin: 3px 5px 3px 0; }
|
||||
.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 4px; right: auto; background-position: right top;}
|
||||
.chzn-rtl.chzn-container-single .chzn-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; }
|
||||
.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; }
|
||||
.chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; }
|
||||
.chzn-rtl .chzn-search input {
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, #ffffff;
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, linear-gradient(top, #ffffff 85%,#eeeeee 99%);
|
||||
background: #fff url('chosen-sprite.png') no-repeat -38px -22px;
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
padding: 4px 5px 4px 20px;
|
||||
direction: rtl;
|
||||
}
|
||||
/* @end */
|
||||
/* @end */
|
||||
|
|
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
|
@ -7,40 +7,22 @@ $ = jQuery
|
|||
|
||||
$.fn.extend({
|
||||
chosen: (options) ->
|
||||
return this if $.browser is "msie" and ($.browser.version is "6.0" or $.browser.version is "7.0")
|
||||
# Do no harm and return as soon as possible for unsupported browsers, namely IE6 and IE7
|
||||
return this if $.browser.msie and ($.browser.version is "6.0" or $.browser.version is "7.0")
|
||||
$(this).each((input_field) ->
|
||||
new Chosen(this, options) unless ($ this).hasClass "chzn-done"
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
class Chosen
|
||||
class Chosen extends AbstractChosen
|
||||
|
||||
constructor: (@form_field, @options={}) ->
|
||||
this.set_default_values()
|
||||
|
||||
setup: ->
|
||||
@form_field_jq = $ @form_field
|
||||
@is_multiple = @form_field.multiple
|
||||
@is_rtl = @form_field_jq.hasClass "chzn-rtl"
|
||||
|
||||
@default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"
|
||||
|
||||
this.set_up_html()
|
||||
this.register_observers()
|
||||
finish_setup: ->
|
||||
@form_field_jq.addClass "chzn-done"
|
||||
|
||||
set_default_values: ->
|
||||
|
||||
@click_test_action = (evt) => this.test_active_click(evt)
|
||||
@activate_action = (evt) => this.activate_field(evt)
|
||||
@active_field = false
|
||||
@mouse_on_container = false
|
||||
@results_showing = false
|
||||
@result_highlighted = null
|
||||
@result_single_selected = null
|
||||
@allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0].text == "" then @options.allow_single_deselect else false
|
||||
@choices = 0
|
||||
@results_none_found = @options.no_results_text or "No results match"
|
||||
|
||||
set_up_html: ->
|
||||
@container_id = if @form_field.id.length then @form_field.id.replace(/(:|\.)/g, '_') else this.generate_field_id()
|
||||
@container_id += "_chzn"
|
||||
|
@ -87,7 +69,7 @@ class Chosen
|
|||
|
||||
this.results_build()
|
||||
this.set_tab_index()
|
||||
|
||||
@form_field_jq.trigger("liszt:ready", {chosen: this})
|
||||
|
||||
register_observers: ->
|
||||
@container.mousedown (evt) => this.container_mousedown(evt)
|
||||
|
@ -108,30 +90,32 @@ class Chosen
|
|||
if @is_multiple
|
||||
@search_choices.click (evt) => this.choices_click(evt)
|
||||
@search_field.focus (evt) => this.input_focus(evt)
|
||||
else
|
||||
@container.click (evt) => evt.preventDefault() # gobble click of anchor
|
||||
|
||||
search_field_disabled: ->
|
||||
@is_disabled = @form_field_jq.attr 'disabled'
|
||||
@is_disabled = @form_field_jq[0].disabled
|
||||
if(@is_disabled)
|
||||
@container.addClass 'chzn-disabled'
|
||||
@search_field.attr 'disabled', true
|
||||
@search_field[0].disabled = true
|
||||
@selected_item.unbind "focus", @activate_action if !@is_multiple
|
||||
this.close_field()
|
||||
else
|
||||
@container.removeClass 'chzn-disabled'
|
||||
@search_field.attr 'disabled', false
|
||||
@search_field[0].disabled = false
|
||||
@selected_item.bind "focus", @activate_action if !@is_multiple
|
||||
|
||||
container_mousedown: (evt) ->
|
||||
if !@is_disabled
|
||||
target_node = if evt? then evt.target.nodeName else null
|
||||
target_closelink = if evt? then ($ evt.target).hasClass "search-choice-close" else false
|
||||
if evt and evt.type is "mousedown"
|
||||
evt.stopPropagation()
|
||||
if not @pending_destroy_click and target_node != "ABBR"
|
||||
if not @pending_destroy_click and not target_closelink
|
||||
if not @active_field
|
||||
@search_field.val "" if @is_multiple
|
||||
$(document).click @click_test_action
|
||||
this.results_show()
|
||||
else if not @is_multiple and evt and ($(evt.target) is @selected_item || $(evt.target).parents("a.chzn-single").length)
|
||||
else if not @is_multiple and evt and (($(evt.target)[0] == @selected_item[0]) || $(evt.target).parents("a.chzn-single").length)
|
||||
evt.preventDefault()
|
||||
this.results_toggle()
|
||||
|
||||
|
@ -142,17 +126,6 @@ class Chosen
|
|||
container_mouseup: (evt) ->
|
||||
this.results_reset(evt) if evt.target.nodeName is "ABBR"
|
||||
|
||||
mouse_enter: -> @mouse_on_container = true
|
||||
mouse_leave: -> @mouse_on_container = false
|
||||
|
||||
input_focus: (evt) ->
|
||||
setTimeout (=> this.container_mousedown()), 50 unless @active_field
|
||||
|
||||
input_blur: (evt) ->
|
||||
if not @mouse_on_container
|
||||
@active_field = false
|
||||
setTimeout (=> this.blur_test()), 100
|
||||
|
||||
blur_test: (evt) ->
|
||||
this.close_field() if not @active_field and @container.hasClass "chzn-container-active"
|
||||
|
||||
|
@ -192,7 +165,6 @@ class Chosen
|
|||
this.close_field()
|
||||
|
||||
results_build: ->
|
||||
startTime = new Date()
|
||||
@parsing = true
|
||||
@results_data = root.SelectParser.select_to_array @form_field
|
||||
|
||||
|
@ -201,6 +173,10 @@ class Chosen
|
|||
@choices = 0
|
||||
else if not @is_multiple
|
||||
@selected_item.find("span").text @default_text
|
||||
if @form_field.options.length <= @disable_search_threshold
|
||||
@container.addClass "chzn-container-single-nosearch"
|
||||
else
|
||||
@container.removeClass "chzn-container-single-nosearch"
|
||||
|
||||
content = ''
|
||||
for data in @results_data
|
||||
|
@ -212,7 +188,7 @@ class Chosen
|
|||
this.choice_build data
|
||||
else if data.selected and not @is_multiple
|
||||
@selected_item.find("span").text data.text
|
||||
@selected_item.find("span").first().after "<abbr></abbr>" if @allow_single_deselect
|
||||
this.single_deselect_control_build() if @allow_single_deselect
|
||||
|
||||
this.search_field_disabled()
|
||||
this.show_search_field_default()
|
||||
|
@ -229,23 +205,6 @@ class Chosen
|
|||
else
|
||||
""
|
||||
|
||||
result_add_option: (option) ->
|
||||
if not option.disabled
|
||||
option.dom_id = @container_id + "_o_" + option.array_index
|
||||
|
||||
classes = if option.selected and @is_multiple then [] else ["active-result"]
|
||||
classes.push "result-selected" if option.selected
|
||||
classes.push "group-option" if option.group_array_index?
|
||||
|
||||
'<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.html + '</li>'
|
||||
else
|
||||
""
|
||||
|
||||
results_update_field: ->
|
||||
this.result_clear_highlight()
|
||||
@result_single_selected = null
|
||||
this.results_build()
|
||||
|
||||
result_do_highlight: (el) ->
|
||||
if el.length
|
||||
this.result_clear_highlight()
|
||||
|
@ -269,12 +228,6 @@ class Chosen
|
|||
@result_highlight.removeClass "highlighted" if @result_highlight
|
||||
@result_highlight = null
|
||||
|
||||
results_toggle: ->
|
||||
if @results_showing
|
||||
this.results_hide()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
results_show: ->
|
||||
if not @is_multiple
|
||||
@selected_item.addClass "chzn-single-with-drop"
|
||||
|
@ -392,8 +345,8 @@ class Chosen
|
|||
this.choice_build item
|
||||
else
|
||||
@selected_item.find("span").first().text item.text
|
||||
@selected_item.find("span").first().after "<abbr></abbr>" if @allow_single_deselect
|
||||
|
||||
this.single_deselect_control_build() if @allow_single_deselect
|
||||
|
||||
this.results_hide() unless evt.metaKey and @is_multiple
|
||||
|
||||
@search_field.val ""
|
||||
|
@ -421,14 +374,10 @@ class Chosen
|
|||
@form_field_jq.trigger "change"
|
||||
this.search_field_scale()
|
||||
|
||||
results_search: (evt) ->
|
||||
if @results_showing
|
||||
this.winnow_results()
|
||||
else
|
||||
this.results_show()
|
||||
single_deselect_control_build: ->
|
||||
@selected_item.find("span").first().after "<abbr class=\"search-choice-close\"></abbr>" if @allow_single_deselect and @selected_item.find("abbr").length < 1
|
||||
|
||||
winnow_results: ->
|
||||
startTime = new Date()
|
||||
this.no_results_clear()
|
||||
|
||||
results = 0
|
||||
|
@ -440,10 +389,11 @@ class Chosen
|
|||
for option in @results_data
|
||||
if not option.disabled and not option.empty
|
||||
if option.group
|
||||
$('#' + option.dom_id).hide()
|
||||
$('#' + option.dom_id).css('display', 'none')
|
||||
else if not (@is_multiple and option.selected)
|
||||
found = false
|
||||
result_id = option.dom_id
|
||||
result = $("#" + result_id)
|
||||
|
||||
if regex.test option.html
|
||||
found = true
|
||||
|
@ -464,16 +414,15 @@ class Chosen
|
|||
text = text.substr(0, startpos) + '<em>' + text.substr(startpos)
|
||||
else
|
||||
text = option.html
|
||||
|
||||
result.html(text)
|
||||
this.result_activate result
|
||||
|
||||
$("#" + result_id).html text if $("#" + result_id).html != text
|
||||
|
||||
this.result_activate $("#" + result_id)
|
||||
|
||||
$("#" + @results_data[option.group_array_index].dom_id).show() if option.group_array_index?
|
||||
$("#" + @results_data[option.group_array_index].dom_id).css('display', 'list-item') if option.group_array_index?
|
||||
else
|
||||
this.result_clear_highlight() if @result_highlight and result_id is @result_highlight.attr 'id'
|
||||
this.result_deactivate $("#" + result_id)
|
||||
|
||||
this.result_deactivate result
|
||||
|
||||
if results < 1 and searchText.length
|
||||
this.no_results searchText
|
||||
else
|
||||
|
@ -486,7 +435,7 @@ class Chosen
|
|||
for li in lis
|
||||
li = $(li)
|
||||
if li.hasClass "group-result"
|
||||
li.show()
|
||||
li.css('display', 'auto')
|
||||
else if not @is_multiple or not li.hasClass "result-selected"
|
||||
this.result_activate li
|
||||
|
||||
|
@ -540,27 +489,6 @@ class Chosen
|
|||
@pending_backstroke.removeClass "search-choice-focus" if @pending_backstroke
|
||||
@pending_backstroke = null
|
||||
|
||||
keyup_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
||||
switch stroke
|
||||
when 8
|
||||
if @is_multiple and @backstroke_length < 1 and @choices > 0
|
||||
this.keydown_backstroke()
|
||||
else if not @pending_backstroke
|
||||
this.result_clear_highlight()
|
||||
this.results_search()
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
this.result_select(evt) if this.results_showing
|
||||
when 27
|
||||
this.results_hide() if @results_showing
|
||||
when 9, 38, 40, 16, 91, 17
|
||||
# don't do anything on these keys
|
||||
else this.results_search()
|
||||
|
||||
|
||||
keydown_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
@ -572,6 +500,7 @@ class Chosen
|
|||
@backstroke_length = this.search_field.val().length
|
||||
break
|
||||
when 9
|
||||
this.result_select(evt) if this.results_showing and not @is_multiple
|
||||
@mouse_on_container = false
|
||||
break
|
||||
when 13
|
||||
|
@ -611,22 +540,12 @@ class Chosen
|
|||
dd_top = @container.height()
|
||||
@dropdown.css({"top": dd_top + "px"})
|
||||
|
||||
generate_field_id: ->
|
||||
new_id = this.generate_random_id()
|
||||
@form_field.id = new_id
|
||||
new_id
|
||||
|
||||
generate_random_id: ->
|
||||
string = "sel" + this.generate_random_char() + this.generate_random_char() + this.generate_random_char()
|
||||
while $("#" + string).length > 0
|
||||
string += this.generate_random_char()
|
||||
string
|
||||
|
||||
generate_random_char: ->
|
||||
chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
|
||||
rand = Math.floor(Math.random() * chars.length)
|
||||
newchar = chars.substring rand, rand+1
|
||||
|
||||
get_side_border_padding = (elmt) ->
|
||||
side_border_padding = elmt.outerWidth() - elmt.width()
|
||||
|
||||
|
|
|
@ -4,43 +4,23 @@ Copyright (c) 2011 by Harvest
|
|||
###
|
||||
root = this
|
||||
|
||||
class Chosen
|
||||
class Chosen extends AbstractChosen
|
||||
|
||||
constructor: (@form_field, @options={}) ->
|
||||
|
||||
this.set_default_values()
|
||||
|
||||
@is_multiple = @form_field.multiple
|
||||
setup: ->
|
||||
@is_rtl = @form_field.hasClassName "chzn-rtl"
|
||||
|
||||
@default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"
|
||||
|
||||
this.set_up_html()
|
||||
this.register_observers()
|
||||
finish_setup: ->
|
||||
@form_field.addClassName "chzn-done"
|
||||
|
||||
|
||||
set_default_values: ->
|
||||
super()
|
||||
|
||||
@click_test_action = (evt) => this.test_active_click(evt)
|
||||
@activate_action = (evt) => this.activate_field(evt)
|
||||
@active_field = false
|
||||
@mouse_on_container = false
|
||||
@results_showing = false
|
||||
@result_highlighted = null
|
||||
@result_single_selected = null
|
||||
@allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0].text == "" then @options.allow_single_deselect else false
|
||||
@choices = 0
|
||||
|
||||
@results_none_found = @options.no_results_text or "No results match"
|
||||
|
||||
# HTML Templates
|
||||
@single_temp = new Template('<a href="javascript:void(0)" class="chzn-single"><span>#{default}</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" autocomplete="off" /></div><ul class="chzn-results"></ul></div>')
|
||||
@multi_temp = new Template('<ul class="chzn-choices"><li class="search-field"><input type="text" value="#{default}" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>')
|
||||
@choice_temp = new Template('<li class="search-choice" id="#{id}"><span>#{choice}</span><a href="javascript:void(0)" class="search-choice-close" rel="#{position}"></a></li>')
|
||||
@no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>"</li>')
|
||||
|
||||
|
||||
set_up_html: ->
|
||||
@container_id = @form_field.identify().replace(/(:|\.)/g, '_') + "_chzn"
|
||||
|
||||
|
@ -82,7 +62,7 @@ class Chosen
|
|||
|
||||
this.results_build()
|
||||
this.set_tab_index()
|
||||
|
||||
@form_field.fire("liszt:ready", {chosen: this})
|
||||
|
||||
register_observers: ->
|
||||
@container.observe "mousedown", (evt) => this.container_mousedown(evt)
|
||||
|
@ -103,6 +83,8 @@ class Chosen
|
|||
if @is_multiple
|
||||
@search_choices.observe "click", (evt) => this.choices_click(evt)
|
||||
@search_field.observe "focus", (evt) => this.input_focus(evt)
|
||||
else
|
||||
@container.observe "click", (evt) => evt.preventDefault() # gobble click of anchor
|
||||
|
||||
search_field_disabled: ->
|
||||
@is_disabled = @form_field.disabled
|
||||
|
@ -118,10 +100,10 @@ class Chosen
|
|||
|
||||
container_mousedown: (evt) ->
|
||||
if !@is_disabled
|
||||
target_node = if evt? then evt.target.nodeName else null
|
||||
target_closelink = if evt? then evt.target.hasClassName "search-choice-close" else false
|
||||
if evt and evt.type is "mousedown"
|
||||
evt.stop()
|
||||
if not @pending_destroy_click and target_node != "ABBR"
|
||||
if not @pending_destroy_click and not target_closelink
|
||||
if not @active_field
|
||||
@search_field.clear() if @is_multiple
|
||||
document.observe "click", @click_test_action
|
||||
|
@ -136,17 +118,6 @@ class Chosen
|
|||
container_mouseup: (evt) ->
|
||||
this.results_reset(evt) if evt.target.nodeName is "ABBR"
|
||||
|
||||
mouse_enter: -> @mouse_on_container = true
|
||||
mouse_leave: -> @mouse_on_container = false
|
||||
|
||||
input_focus: (evt) ->
|
||||
setTimeout this.container_mousedown.bind(this), 50 unless @active_field
|
||||
|
||||
input_blur: (evt) ->
|
||||
if not @mouse_on_container
|
||||
@active_field = false
|
||||
setTimeout this.blur_test.bind(this), 100
|
||||
|
||||
blur_test: (evt) ->
|
||||
this.close_field() if not @active_field and @container.hasClassName("chzn-container-active")
|
||||
|
||||
|
@ -186,7 +157,6 @@ class Chosen
|
|||
this.close_field()
|
||||
|
||||
results_build: ->
|
||||
startTime = new Date()
|
||||
@parsing = true
|
||||
@results_data = root.SelectParser.select_to_array @form_field
|
||||
|
||||
|
@ -195,6 +165,10 @@ class Chosen
|
|||
@choices = 0
|
||||
else if not @is_multiple
|
||||
@selected_item.down("span").update(@default_text)
|
||||
if @form_field.options.length <= @disable_search_threshold
|
||||
@container.addClassName "chzn-container-single-nosearch"
|
||||
else
|
||||
@container.removeClassName "chzn-container-single-nosearch"
|
||||
|
||||
content = ''
|
||||
for data in @results_data
|
||||
|
@ -206,7 +180,7 @@ class Chosen
|
|||
this.choice_build data
|
||||
else if data.selected and not @is_multiple
|
||||
@selected_item.down("span").update( data.html )
|
||||
@selected_item.down("span").insert { after: "<abbr></abbr>" } if @allow_single_deselect
|
||||
this.single_deselect_control_build() if @allow_single_deselect
|
||||
|
||||
this.search_field_disabled()
|
||||
this.show_search_field_default()
|
||||
|
@ -223,23 +197,6 @@ class Chosen
|
|||
else
|
||||
""
|
||||
|
||||
result_add_option: (option) ->
|
||||
if not option.disabled
|
||||
option.dom_id = @container_id + "_o_" + option.array_index
|
||||
|
||||
classes = if option.selected and @is_multiple then [] else ["active-result"]
|
||||
classes.push "result-selected" if option.selected
|
||||
classes.push "group-option" if option.group_array_index?
|
||||
|
||||
'<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.html + '</li>'
|
||||
else
|
||||
""
|
||||
|
||||
results_update_field: ->
|
||||
this.result_clear_highlight()
|
||||
@result_single_selected = null
|
||||
this.results_build()
|
||||
|
||||
result_do_highlight: (el) ->
|
||||
this.result_clear_highlight()
|
||||
|
||||
|
@ -262,12 +219,6 @@ class Chosen
|
|||
@result_highlight.removeClassName('highlighted') if @result_highlight
|
||||
@result_highlight = null
|
||||
|
||||
results_toggle: ->
|
||||
if @results_showing
|
||||
this.results_hide()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
results_show: ->
|
||||
if not @is_multiple
|
||||
@selected_item.addClassName('chzn-single-with-drop')
|
||||
|
@ -385,7 +336,7 @@ class Chosen
|
|||
this.choice_build item
|
||||
else
|
||||
@selected_item.down("span").update(item.html)
|
||||
@selected_item.down("span").insert { after: "<abbr></abbr>" } if @allow_single_deselect
|
||||
this.single_deselect_control_build() if @allow_single_deselect
|
||||
|
||||
this.results_hide() unless evt.metaKey and @is_multiple
|
||||
|
||||
|
@ -413,15 +364,11 @@ class Chosen
|
|||
|
||||
@form_field.simulate("change") if typeof Event.simulate is 'function'
|
||||
this.search_field_scale()
|
||||
|
||||
results_search: (evt) ->
|
||||
if @results_showing
|
||||
this.winnow_results()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
single_deselect_control_build: ->
|
||||
@selected_item.down("span").insert { after: "<abbr class=\"search-choice-close\"></abbr>" } if @allow_single_deselect and not @selected_item.down("abbr")
|
||||
|
||||
winnow_results: ->
|
||||
startTime = new Date()
|
||||
this.no_results_clear()
|
||||
|
||||
results = 0
|
||||
|
@ -462,7 +409,7 @@ class Chosen
|
|||
|
||||
this.result_activate $(result_id)
|
||||
|
||||
$(@results_data[option.group_array_index].dom_id).show() if option.group_array_index?
|
||||
$(@results_data[option.group_array_index].dom_id).setStyle({display: 'list-item'}) if option.group_array_index?
|
||||
else
|
||||
this.result_clear_highlight() if $(result_id) is @result_highlight
|
||||
this.result_deactivate $(result_id)
|
||||
|
@ -538,27 +485,6 @@ class Chosen
|
|||
@pending_backstroke.removeClassName("search-choice-focus") if @pending_backstroke
|
||||
@pending_backstroke = null
|
||||
|
||||
keyup_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
||||
switch stroke
|
||||
when 8
|
||||
if @is_multiple and @backstroke_length < 1 and @choices > 0
|
||||
this.keydown_backstroke()
|
||||
else if not @pending_backstroke
|
||||
this.result_clear_highlight()
|
||||
this.results_search()
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
this.result_select(evt) if this.results_showing
|
||||
when 27
|
||||
this.results_hide() if @results_showing
|
||||
when 9, 38, 40, 16, 91, 17
|
||||
# don't do anything on these keys
|
||||
else this.results_search()
|
||||
|
||||
|
||||
keydown_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
@ -568,16 +494,21 @@ class Chosen
|
|||
switch stroke
|
||||
when 8
|
||||
@backstroke_length = this.search_field.value.length
|
||||
break
|
||||
when 9
|
||||
this.result_select(evt) if this.results_showing and not @is_multiple
|
||||
@mouse_on_container = false
|
||||
break
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
break
|
||||
when 38
|
||||
evt.preventDefault()
|
||||
this.keyup_arrow()
|
||||
break
|
||||
when 40
|
||||
this.keydown_arrow()
|
||||
|
||||
break
|
||||
|
||||
search_field_scale: ->
|
||||
if @is_multiple
|
||||
|
|
|
@ -0,0 +1,109 @@
|
|||
###
|
||||
Chosen source: generate output using 'cake build'
|
||||
Copyright (c) 2011 by Harvest
|
||||
###
|
||||
root = this
|
||||
|
||||
class AbstractChosen
|
||||
|
||||
constructor: (@form_field, @options={}) ->
|
||||
this.set_default_values()
|
||||
|
||||
@is_multiple = @form_field.multiple
|
||||
@default_text_default = if @is_multiple then "Select Some Options" else "Select an Option"
|
||||
|
||||
this.setup()
|
||||
|
||||
this.set_up_html()
|
||||
this.register_observers()
|
||||
|
||||
this.finish_setup()
|
||||
|
||||
set_default_values: ->
|
||||
@click_test_action = (evt) => this.test_active_click(evt)
|
||||
@activate_action = (evt) => this.activate_field(evt)
|
||||
@active_field = false
|
||||
@mouse_on_container = false
|
||||
@results_showing = false
|
||||
@result_highlighted = null
|
||||
@result_single_selected = null
|
||||
@allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0]? and @form_field.options[0].text is "" then @options.allow_single_deselect else false
|
||||
@disable_search_threshold = @options.disable_search_threshold || 0
|
||||
@choices = 0
|
||||
@results_none_found = @options.no_results_text or "No results match"
|
||||
|
||||
mouse_enter: -> @mouse_on_container = true
|
||||
mouse_leave: -> @mouse_on_container = false
|
||||
|
||||
input_focus: (evt) ->
|
||||
setTimeout (=> this.container_mousedown()), 50 unless @active_field
|
||||
|
||||
input_blur: (evt) ->
|
||||
if not @mouse_on_container
|
||||
@active_field = false
|
||||
setTimeout (=> this.blur_test()), 100
|
||||
|
||||
result_add_option: (option) ->
|
||||
if not option.disabled
|
||||
option.dom_id = @container_id + "_o_" + option.array_index
|
||||
|
||||
classes = if option.selected and @is_multiple then [] else ["active-result"]
|
||||
classes.push "result-selected" if option.selected
|
||||
classes.push "group-option" if option.group_array_index?
|
||||
classes.push option.classes if option.classes != ""
|
||||
|
||||
style = if option.style.cssText != "" then " style=\"#{option.style}\"" else ""
|
||||
|
||||
'<li id="' + option.dom_id + '" class="' + classes.join(' ') + '"'+style+'>' + option.html + '</li>'
|
||||
else
|
||||
""
|
||||
|
||||
results_update_field: ->
|
||||
this.result_clear_highlight()
|
||||
@result_single_selected = null
|
||||
this.results_build()
|
||||
|
||||
results_toggle: ->
|
||||
if @results_showing
|
||||
this.results_hide()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
results_search: (evt) ->
|
||||
if @results_showing
|
||||
this.winnow_results()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
keyup_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
||||
switch stroke
|
||||
when 8
|
||||
if @is_multiple and @backstroke_length < 1 and @choices > 0
|
||||
this.keydown_backstroke()
|
||||
else if not @pending_backstroke
|
||||
this.result_clear_highlight()
|
||||
this.results_search()
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
this.result_select(evt) if this.results_showing
|
||||
when 27
|
||||
this.results_hide() if @results_showing
|
||||
return true
|
||||
when 9, 38, 40, 16, 91, 17
|
||||
# don't do anything on these keys
|
||||
else this.results_search()
|
||||
|
||||
generate_field_id: ->
|
||||
new_id = this.generate_random_id()
|
||||
@form_field.id = new_id
|
||||
new_id
|
||||
|
||||
generate_random_char: ->
|
||||
chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ"
|
||||
rand = Math.floor(Math.random() * chars.length)
|
||||
newchar = chars.substring rand, rand+1
|
||||
|
||||
root.AbstractChosen = AbstractChosen
|
|
@ -34,6 +34,8 @@ class SelectParser
|
|||
selected: option.selected
|
||||
disabled: if group_disabled is true then group_disabled else option.disabled
|
||||
group_array_index: group_position
|
||||
classes: option.className
|
||||
style: option.style.cssText
|
||||
else
|
||||
@parsed.push
|
||||
array_index: @parsed.length
|
||||
|
|
|
@ -1064,7 +1064,7 @@
|
|||
<em>Single Select with Groups</em>
|
||||
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
|
||||
<option value=""></option>
|
||||
<optgroup label="NFC East">
|
||||
<optgroup label="NFC EAST">
|
||||
<option>Dallas Cowboys</option>
|
||||
<option>New York Giants</option>
|
||||
<option>Philadelphia Eagles</option>
|
||||
|
@ -1118,7 +1118,7 @@
|
|||
<em>Multiple Select with Groups</em>
|
||||
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
|
||||
<option value=""></option>
|
||||
<optgroup label="NFC East">
|
||||
<optgroup label="NFC EAST">
|
||||
<option>Dallas Cowboys</option>
|
||||
<option>New York Giants</option>
|
||||
<option>Philadelphia Eagles</option>
|
||||
|
|
|
@ -1063,7 +1063,7 @@
|
|||
<em>Single Select with Groups</em>
|
||||
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
|
||||
<option value=""></option>
|
||||
<optgroup label="NFC East">
|
||||
<optgroup label="NFC EAST">
|
||||
<option>Dallas Cowboys</option>
|
||||
<option>New York Giants</option>
|
||||
<option>Philadelphia Eagles</option>
|
||||
|
@ -1117,7 +1117,7 @@
|
|||
<em>Multiple Select with Groups</em>
|
||||
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
|
||||
<option value=""></option>
|
||||
<optgroup label="NFC East">
|
||||
<optgroup label="NFC EAST">
|
||||
<option>Dallas Cowboys</option>
|
||||
<option>New York Giants</option>
|
||||
<option>Philadelphia Eagles</option>
|
||||
|
@ -1289,7 +1289,7 @@
|
|||
<p>Using Chosen is easy as can be.</p>
|
||||
<ol>
|
||||
<li>Download the plugin and copy the chosen files to your app.</li>
|
||||
<li>Activate the plugin by creating a new instance of Chosen: New Chosen(<em>some_form_field</em>);</li>
|
||||
<li>Activate the plugin by creating a new instance of Chosen: new Chosen(<em>some_form_field</em>);</li>
|
||||
<li><a href="http://youtu.be/pS-RsIzb78U?t=57s">Disco</a>.</li>
|
||||
</ol>
|
||||
|
||||
|
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"author": "harvest",
|
||||
"name": "chosen",
|
||||
"version": "0.9.7",
|
||||
"description": "Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/harvesthq/chosen"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"coffee-script": ">= 1.2",
|
||||
"uglify-js": ">= 1.2.5"
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue