multiselect 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +19 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +20 -0
- data/README.md +159 -0
- data/Rakefile +30 -0
- data/app/assets/images/switch.png +0 -0
- data/app/assets/javascripts/multiselect.js +584 -0
- data/app/assets/stylesheets/multiselect.scss +100 -0
- data/lib/multiselect/engine.rb +6 -0
- data/lib/multiselect/railtie.rb +5 -0
- data/lib/multiselect/version.rb +5 -0
- data/lib/multiselect.rb +12 -0
- data/multiselect.gemspec +21 -0
- data/multiselect.sublime-project +13 -0
- metadata +100 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: c245581242fed86a194e7f9e790271d28438aec3
|
|
4
|
+
data.tar.gz: e0e34d47fd3ed68dca9e28af2f44b34831565904
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: dfcc344935e1af8a8c71dd93a3fd41f1ad8ee108e1d49697a75302af131c4da16e35eebbe2eed0a1ac7a6527175ea730c6f71a88762fbebdcd3429f7577f44b9
|
|
7
|
+
data.tar.gz: 83a1da2cc6166ac736cf931ed5ca4b8c1d35f6ed87eebd72a404311a6386e1a1af2a365227bd182337c3e03ac2341bc6a6b43a55ce59c844ad6d57c5609c38ee
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2013
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
6
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
7
|
+
the Software without restriction, including without limitation the rights to
|
|
8
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
9
|
+
the Software, and to permit persons to whom the Software is furnished to do so,
|
|
10
|
+
subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
17
|
+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
18
|
+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
19
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
20
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# Multiselect
|
|
2
|
+
|
|
3
|
+
## Usage
|
|
4
|
+
|
|
5
|
+
#### Install multiselect gem
|
|
6
|
+
|
|
7
|
+
Include multi-select-rails in Gemfile
|
|
8
|
+
```sh
|
|
9
|
+
gem 'multiselect'
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Then run
|
|
13
|
+
```sh
|
|
14
|
+
bundle install
|
|
15
|
+
```
|
|
16
|
+
#### Include multiselect javascript
|
|
17
|
+
|
|
18
|
+
Add to your app/assets/javascripts/application.js
|
|
19
|
+
|
|
20
|
+
```sh
|
|
21
|
+
//= require multi-select
|
|
22
|
+
```
|
|
23
|
+
#### Include multiselect stylesheet
|
|
24
|
+
|
|
25
|
+
Add to your app/assets/stylesheets/application.css
|
|
26
|
+
```sh
|
|
27
|
+
*= require multi-select
|
|
28
|
+
```
|
|
29
|
+
#### Updating the gem
|
|
30
|
+
|
|
31
|
+
There are two rake tasks designed to ease the maintenance of this gem.
|
|
32
|
+
|
|
33
|
+
The update task pulls the latest multiselect code from github and places images, stylesheets and javascripts in the correct gem paths. It also changes background-image properties in the stylesheet to asset pipeline equivalents.
|
|
34
|
+
```sh
|
|
35
|
+
rake update
|
|
36
|
+
```
|
|
37
|
+
The build task is a simple wrapper for gem build
|
|
38
|
+
```sh
|
|
39
|
+
rake build
|
|
40
|
+
```
|
|
41
|
+
#### Example
|
|
42
|
+
###### HTML
|
|
43
|
+
```sh
|
|
44
|
+
<html>
|
|
45
|
+
<head>
|
|
46
|
+
<link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
<select multiple="multiple" id="my-select" name="my-select[]">
|
|
50
|
+
<option value='elem_1'>elem 1</option>
|
|
51
|
+
<option value='elem_2'>elem 2</option>
|
|
52
|
+
<option value='elem_3'>elem 3</option>
|
|
53
|
+
<option value='elem_4'>elem 4</option>
|
|
54
|
+
...
|
|
55
|
+
<option value='elem_100'>elem 100</option>
|
|
56
|
+
</select>
|
|
57
|
+
<script src="path/to/jquery.multi-select.js" type="text/javascript"></script>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
60
|
+
```
|
|
61
|
+
###### JavaScript
|
|
62
|
+
```sh
|
|
63
|
+
$('#my-select').multiSelect()
|
|
64
|
+
```
|
|
65
|
+
#### Options
|
|
66
|
+
|
|
67
|
+
| Name | type | default | description |
|
|
68
|
+
| --------|---------|-------|-------|
|
|
69
|
+
| afterInit | function | function(container){} | Function to call after the multiSelect initilization. |
|
|
70
|
+
| afterSelect | function | function(values){} | Function to call after one item is selected. |
|
|
71
|
+
| afterDeselect | function | function(values){} | Function to call after one item is deselected. |
|
|
72
|
+
| selectableHeader | HTML/Text | null | Text or HTML to display in the selectable header. |
|
|
73
|
+
| selectionHeader | HTML/Text | null | Text or HTML to display in the selection header. |
|
|
74
|
+
| selectableFooter | HTML/Text | null | Text or HTML to display in the selectable footer. |
|
|
75
|
+
| selectionFooter | HTML/Text | null | Text or HTML to display in the selection footer. |
|
|
76
|
+
| disabledClass | String | 'disabled' | CSS class for disabled items. |
|
|
77
|
+
| selectableOptgroup | Boolean | false | Click on optgroup will select all nested options when set to true. |
|
|
78
|
+
| keepOrder | Boolean | false | The selected items will be displayed in the same order than they are selected. |
|
|
79
|
+
| dblClick | Boolean | false | Replace the defautl click event to select items by the dblclick one. |
|
|
80
|
+
| cssClass | String | "" | Add a custom CSS class to the multiselect container. |
|
|
81
|
+
#### Methods
|
|
82
|
+
|
|
83
|
+
##### .multiSelect(options)
|
|
84
|
+
|
|
85
|
+
Activates your content as a multiselect. Accepts an optional options object
|
|
86
|
+
```sh
|
|
87
|
+
$('#your-select').multiSelect({});
|
|
88
|
+
```
|
|
89
|
+
Note: You must init the multiple select with $('#your-select').multiSelect() before calling one of the following methods.
|
|
90
|
+
##### .multiSelect('select', String|Array)
|
|
91
|
+
|
|
92
|
+
Select the item with the value given in parameter. The value can be either a string ('elem_1') matching the value of the option oran Array of values (['elem_1', 'elem_42']).
|
|
93
|
+
```sh
|
|
94
|
+
$('#your-select').multiSelect('select', String|Array);
|
|
95
|
+
```
|
|
96
|
+
##### .multiSelect('deselect', String|Array)
|
|
97
|
+
|
|
98
|
+
Deselect the item with the value given in parameter. The value can be either a string ('elem_1') matching the value of the option oran Array of values (['elem_1', 'elem_42']).
|
|
99
|
+
```sh
|
|
100
|
+
$('#your-select').multiSelect('deselect', String|Array);
|
|
101
|
+
```
|
|
102
|
+
##### .multiSelect('deselect')
|
|
103
|
+
|
|
104
|
+
Select all elements.
|
|
105
|
+
```sh
|
|
106
|
+
$('#your-select').multiSelect('select_all');
|
|
107
|
+
```
|
|
108
|
+
##### .multiSelect('select_all')
|
|
109
|
+
|
|
110
|
+
Select all items.
|
|
111
|
+
```sh
|
|
112
|
+
$('#your-select').multiSelect('select_all');
|
|
113
|
+
```
|
|
114
|
+
##### .multiSelect('deselect_all')
|
|
115
|
+
|
|
116
|
+
Deselect all items previously selected.
|
|
117
|
+
```sh
|
|
118
|
+
$('#your-select').multiSelect('deselect_all');
|
|
119
|
+
```
|
|
120
|
+
##### .multiSelect('select_marked')
|
|
121
|
+
|
|
122
|
+
Select all marked items.
|
|
123
|
+
```sh
|
|
124
|
+
$('#your-select').multiSelect('select_marked');
|
|
125
|
+
```
|
|
126
|
+
##### .multiSelect('deselect_marked')
|
|
127
|
+
|
|
128
|
+
Deselect all marked items previously selected.
|
|
129
|
+
```sh
|
|
130
|
+
$('#your-select').multiSelect('deselect_marked');
|
|
131
|
+
```
|
|
132
|
+
##### .multiSelect('refresh')
|
|
133
|
+
|
|
134
|
+
Refresh current multiselect.
|
|
135
|
+
```sh
|
|
136
|
+
$('#your-select').multiSelect('refresh');
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
##### .multiSelect('addOption', Hash)
|
|
140
|
+
|
|
141
|
+
Dynamically add option to the multiselect.
|
|
142
|
+
The options hash is described bellow:
|
|
143
|
+
| key | type | required | desription |
|
|
144
|
+
| --------|---------|-------|-------|
|
|
145
|
+
| value | String | true | The value of the option to create |
|
|
146
|
+
| text | String | true | The text of the option to create |
|
|
147
|
+
| index | Number | false | The index where to insert the option. If none given, it will be inserted as last option. |
|
|
148
|
+
| nested | String | false | If there are optgroups you can choose under which optgroup you want to insert the option. |
|
|
149
|
+
```sh
|
|
150
|
+
$('#your-select').multiSelect('addOption', { value: 'test', text: 'test', index: 0, nested: 'optgroup_label' });
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
### Version
|
|
155
|
+
0.1.0
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
|
data/Rakefile
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
desc "Update"
|
|
2
|
+
task :update do
|
|
3
|
+
system("rm -rf multiselect-src")
|
|
4
|
+
|
|
5
|
+
system("git clone https://github.com/artyomkalm/multiselect.git multiselect-src")
|
|
6
|
+
system("cp multiselect-src/img/switch.png app/assets/images/switch.png")
|
|
7
|
+
system("cp multiselect-src/css/multiselect.css app/assets/stylesheets/multiselect.scss")
|
|
8
|
+
system("cp multiselect-src/js/jquery.multiselect.js app/assets/javascripts/multiselect.js")
|
|
9
|
+
|
|
10
|
+
fixes
|
|
11
|
+
|
|
12
|
+
system("rm -rf multiselect-src")
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
def fixes
|
|
16
|
+
replace_string_in_file("app/assets/stylesheets/multiselect.scss", "url('../img/switch.png')", "image-url('switch.png')")
|
|
17
|
+
end
|
|
18
|
+
|
|
19
|
+
def replace_string_in_file(file, find, replace)
|
|
20
|
+
file_content = File.read(file)
|
|
21
|
+
|
|
22
|
+
File.open(file, "w") do |f|
|
|
23
|
+
f.puts file_content.gsub!(find, replace)
|
|
24
|
+
end
|
|
25
|
+
end
|
|
26
|
+
|
|
27
|
+
desc "Build"
|
|
28
|
+
task "build" do
|
|
29
|
+
system("gem build multiselect.gemspec")
|
|
30
|
+
end
|
|
Binary file
|
|
@@ -0,0 +1,584 @@
|
|
|
1
|
+
!function ($) {
|
|
2
|
+
|
|
3
|
+
"use strict";
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
/* MULTISELECT CLASS DEFINITION
|
|
7
|
+
* ====================== */
|
|
8
|
+
|
|
9
|
+
var MultiSelect = function (element, options) {
|
|
10
|
+
this.options = options;
|
|
11
|
+
this.$element = $(element);
|
|
12
|
+
this.$container = $('<div/>', { 'class': "ms-container" });
|
|
13
|
+
this.$selectableContainer = $('<div/>', { 'class': 'ms-selectable' });
|
|
14
|
+
this.$selectionContainer = $('<div/>', { 'class': 'ms-selection' });
|
|
15
|
+
this.$selectableUl = $('<ul/>', { 'class': "ms-list", 'tabindex' : '-1' });
|
|
16
|
+
this.$selectionUl = $('<ul/>', { 'class': "ms-list", 'tabindex' : '-1' });
|
|
17
|
+
this.scrollTo = 0;
|
|
18
|
+
this.elemsSelector = 'li:visible:not(.ms-optgroup-label,.ms-optgroup-container,.'+options.disabledClass+')';
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
MultiSelect.prototype = {
|
|
22
|
+
constructor: MultiSelect,
|
|
23
|
+
|
|
24
|
+
init: function(){
|
|
25
|
+
var that = this,
|
|
26
|
+
ms = this.$element;
|
|
27
|
+
|
|
28
|
+
if (ms.next('.ms-container').length === 0){
|
|
29
|
+
ms.css({ position: 'absolute', left: '-9999px' });
|
|
30
|
+
ms.attr('id', ms.attr('id') ? ms.attr('id') : Math.ceil(Math.random()*1000)+'multiselect');
|
|
31
|
+
this.$container.attr('id', 'ms-'+ms.attr('id'));
|
|
32
|
+
this.$container.addClass(that.options.cssClass);
|
|
33
|
+
ms.find('option').each(function(){
|
|
34
|
+
that.generateLisFromOption(this);
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
this.$selectionUl.find('.ms-optgroup-label').hide();
|
|
38
|
+
|
|
39
|
+
if (that.options.selectableHeader){
|
|
40
|
+
that.$selectableContainer.append(that.options.selectableHeader);
|
|
41
|
+
}
|
|
42
|
+
that.$selectableContainer.append(that.$selectableUl);
|
|
43
|
+
if (that.options.selectableFooter){
|
|
44
|
+
that.$selectableContainer.append(that.options.selectableFooter);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
if (that.options.selectionHeader){
|
|
48
|
+
that.$selectionContainer.append(that.options.selectionHeader);
|
|
49
|
+
}
|
|
50
|
+
that.$selectionContainer.append(that.$selectionUl);
|
|
51
|
+
if (that.options.selectionFooter){
|
|
52
|
+
that.$selectionContainer.append(that.options.selectionFooter);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
that.$container.append(that.$selectableContainer);
|
|
56
|
+
that.$container.append(that.$selectionContainer);
|
|
57
|
+
ms.after(that.$container);
|
|
58
|
+
|
|
59
|
+
that.activeMouse(that.$selectableUl);
|
|
60
|
+
that.activeKeyboard(that.$selectableUl);
|
|
61
|
+
|
|
62
|
+
var action = that.options.dblClick ? 'dblclick' : 'click';
|
|
63
|
+
|
|
64
|
+
that.$selectableUl.on(action, '.ms-elem-selectable', function(){
|
|
65
|
+
that.select($(this).data('ms-value'));
|
|
66
|
+
});
|
|
67
|
+
that.$selectionUl.on(action, '.ms-elem-selection', function(){
|
|
68
|
+
that.deselect($(this).data('ms-value'));
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
if (action === 'dblclick') {
|
|
72
|
+
var leftButtonDown = false;
|
|
73
|
+
$(document).mousedown(function(e){
|
|
74
|
+
// Left mouse button was pressed, set flag
|
|
75
|
+
if(e.which === 1) leftButtonDown = true;
|
|
76
|
+
});
|
|
77
|
+
$(document).mouseup(function(e){
|
|
78
|
+
// Left mouse button was released, clear flag
|
|
79
|
+
if(e.which === 1) leftButtonDown = false;
|
|
80
|
+
});
|
|
81
|
+
that.$selectableUl.on('mouseover', '.ms-elem-selectable', function(){
|
|
82
|
+
if (leftButtonDown) {
|
|
83
|
+
$(this).addClass('marked');
|
|
84
|
+
};
|
|
85
|
+
});
|
|
86
|
+
that.$selectionUl.on('mouseover', '.ms-elem-selection', function(){
|
|
87
|
+
if (leftButtonDown) {
|
|
88
|
+
$(this).addClass('dmarked');
|
|
89
|
+
};
|
|
90
|
+
});
|
|
91
|
+
that.$selectableUl.on('click', '.ms-elem-selectable', function(){
|
|
92
|
+
if ($(this).hasClass('marked')) {
|
|
93
|
+
$(this).removeClass('marked');
|
|
94
|
+
} else {
|
|
95
|
+
$(this).addClass('marked');
|
|
96
|
+
};
|
|
97
|
+
});
|
|
98
|
+
that.$selectionUl.on('click', '.ms-elem-selection', function(){
|
|
99
|
+
if ($(this).hasClass('dmarked')) {
|
|
100
|
+
$(this).removeClass('dmarked');
|
|
101
|
+
} else {
|
|
102
|
+
$(this).addClass('dmarked');
|
|
103
|
+
};
|
|
104
|
+
});
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
that.activeMouse(that.$selectionUl);
|
|
108
|
+
that.activeKeyboard(that.$selectionUl);
|
|
109
|
+
|
|
110
|
+
ms.on('focus', function(){
|
|
111
|
+
that.$selectableUl.focus();
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
var selectedValues = ms.find('option:selected').map(function(){ return $(this).val(); }).get();
|
|
116
|
+
that.select(selectedValues, 'init');
|
|
117
|
+
|
|
118
|
+
if (typeof that.options.afterInit === 'function') {
|
|
119
|
+
that.options.afterInit.call(this, this.$container);
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
|
|
123
|
+
'generateLisFromOption' : function(option, index, $container){
|
|
124
|
+
var that = this,
|
|
125
|
+
ms = that.$element,
|
|
126
|
+
attributes = "",
|
|
127
|
+
$option = $(option);
|
|
128
|
+
|
|
129
|
+
for (var cpt = 0; cpt < option.attributes.length; cpt++){
|
|
130
|
+
var attr = option.attributes[cpt];
|
|
131
|
+
|
|
132
|
+
if(attr.name !== 'value' && attr.name !== 'disabled'){
|
|
133
|
+
attributes += attr.name+'="'+attr.value+'" ';
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
var selectableLi = $('<li '+attributes+'><span>'+that.escapeHTML($option.text())+'</span></li>'),
|
|
137
|
+
selectedLi = selectableLi.clone(),
|
|
138
|
+
value = $option.val(),
|
|
139
|
+
elementId = that.sanitize(value);
|
|
140
|
+
|
|
141
|
+
selectableLi
|
|
142
|
+
.data('ms-value', value)
|
|
143
|
+
.addClass('ms-elem-selectable')
|
|
144
|
+
.attr('id', elementId+'-selectable');
|
|
145
|
+
|
|
146
|
+
selectedLi
|
|
147
|
+
.data('ms-value', value)
|
|
148
|
+
.addClass('ms-elem-selection')
|
|
149
|
+
.attr('id', elementId+'-selection')
|
|
150
|
+
.hide();
|
|
151
|
+
|
|
152
|
+
if ($option.prop('disabled') || ms.prop('disabled')){
|
|
153
|
+
selectedLi.addClass(that.options.disabledClass);
|
|
154
|
+
selectableLi.addClass(that.options.disabledClass);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
var $optgroup = $option.parent('optgroup');
|
|
158
|
+
|
|
159
|
+
if ($optgroup.length > 0){
|
|
160
|
+
var optgroupLabel = $optgroup.attr('label'),
|
|
161
|
+
optgroupId = that.sanitize(optgroupLabel),
|
|
162
|
+
$selectableOptgroup = that.$selectableUl.find('#optgroup-selectable-'+optgroupId),
|
|
163
|
+
$selectionOptgroup = that.$selectionUl.find('#optgroup-selection-'+optgroupId);
|
|
164
|
+
|
|
165
|
+
if ($selectableOptgroup.length === 0){
|
|
166
|
+
var optgroupContainerTpl = '<li class="ms-optgroup-container"></li>',
|
|
167
|
+
optgroupTpl = '<ul class="ms-optgroup"><li class="ms-optgroup-label"><span>'+optgroupLabel+'</span></li></ul>';
|
|
168
|
+
|
|
169
|
+
$selectableOptgroup = $(optgroupContainerTpl);
|
|
170
|
+
$selectionOptgroup = $(optgroupContainerTpl);
|
|
171
|
+
$selectableOptgroup.attr('id', 'optgroup-selectable-'+optgroupId);
|
|
172
|
+
$selectionOptgroup.attr('id', 'optgroup-selection-'+optgroupId);
|
|
173
|
+
$selectableOptgroup.append($(optgroupTpl));
|
|
174
|
+
$selectionOptgroup.append($(optgroupTpl));
|
|
175
|
+
if (that.options.selectableOptgroup){
|
|
176
|
+
$selectableOptgroup.find('.ms-optgroup-label').on('click', function(){
|
|
177
|
+
var values = $optgroup.children(':not(:selected, :disabled)').map(function(){ return $(this).val();}).get();
|
|
178
|
+
that.select(values);
|
|
179
|
+
});
|
|
180
|
+
$selectionOptgroup.find('.ms-optgroup-label').on('click', function(){
|
|
181
|
+
var values = $optgroup.children(':selected:not(:disabled)').map(function(){ return $(this).val();}).get();
|
|
182
|
+
that.deselect(values);
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
that.$selectableUl.append($selectableOptgroup);
|
|
186
|
+
that.$selectionUl.append($selectionOptgroup);
|
|
187
|
+
}
|
|
188
|
+
index = index === undefined ? $selectableOptgroup.find('ul').children().length : index + 1;
|
|
189
|
+
selectableLi.insertAt(index, $selectableOptgroup.children());
|
|
190
|
+
selectedLi.insertAt(index, $selectionOptgroup.children());
|
|
191
|
+
} else {
|
|
192
|
+
index = index === undefined ? that.$selectableUl.children().length : index;
|
|
193
|
+
|
|
194
|
+
selectableLi.insertAt(index, that.$selectableUl);
|
|
195
|
+
selectedLi.insertAt(index, that.$selectionUl);
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
|
|
199
|
+
'addOption' : function(options){
|
|
200
|
+
var that = this;
|
|
201
|
+
|
|
202
|
+
if (options.value !== undefined && options.value !== null){
|
|
203
|
+
options = [options];
|
|
204
|
+
}
|
|
205
|
+
$.each(options, function(index, option){
|
|
206
|
+
if (option.value !== undefined && option.value !== null &&
|
|
207
|
+
that.$element.find("option[value='"+option.value+"']").length === 0){
|
|
208
|
+
var $option = $('<option value="'+option.value+'">'+option.text+'</option>'),
|
|
209
|
+
index = parseInt((typeof option.index === 'undefined' ? that.$element.children().length : option.index)),
|
|
210
|
+
$container = option.nested === undefined ? that.$element : $("optgroup[label='"+option.nested+"']");
|
|
211
|
+
|
|
212
|
+
$option.insertAt(index, $container);
|
|
213
|
+
that.generateLisFromOption($option.get(0), index, option.nested);
|
|
214
|
+
}
|
|
215
|
+
});
|
|
216
|
+
},
|
|
217
|
+
|
|
218
|
+
'escapeHTML' : function(text){
|
|
219
|
+
return $("<div>").text(text).html();
|
|
220
|
+
},
|
|
221
|
+
|
|
222
|
+
'activeKeyboard' : function($list){
|
|
223
|
+
var that = this;
|
|
224
|
+
|
|
225
|
+
$list.on('focus', function(){
|
|
226
|
+
$(this).addClass('ms-focus');
|
|
227
|
+
})
|
|
228
|
+
.on('blur', function(){
|
|
229
|
+
$(this).removeClass('ms-focus');
|
|
230
|
+
})
|
|
231
|
+
.on('keydown', function(e){
|
|
232
|
+
switch (e.which) {
|
|
233
|
+
case 40:
|
|
234
|
+
case 38:
|
|
235
|
+
e.preventDefault();
|
|
236
|
+
e.stopPropagation();
|
|
237
|
+
that.moveHighlight($(this), (e.which === 38) ? -1 : 1);
|
|
238
|
+
return;
|
|
239
|
+
case 37:
|
|
240
|
+
case 39:
|
|
241
|
+
e.preventDefault();
|
|
242
|
+
e.stopPropagation();
|
|
243
|
+
that.switchList($list);
|
|
244
|
+
return;
|
|
245
|
+
case 9:
|
|
246
|
+
if(that.$element.is('[tabindex]')){
|
|
247
|
+
e.preventDefault();
|
|
248
|
+
var tabindex = parseInt(that.$element.attr('tabindex'), 10);
|
|
249
|
+
tabindex = (e.shiftKey) ? tabindex-1 : tabindex+1;
|
|
250
|
+
$('[tabindex="'+(tabindex)+'"]').focus();
|
|
251
|
+
return;
|
|
252
|
+
}else{
|
|
253
|
+
if(e.shiftKey){
|
|
254
|
+
that.$element.trigger('focus');
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
if($.inArray(e.which, that.options.keySelect) > -1){
|
|
259
|
+
e.preventDefault();
|
|
260
|
+
e.stopPropagation();
|
|
261
|
+
that.selectHighlighted($list);
|
|
262
|
+
return;
|
|
263
|
+
}
|
|
264
|
+
});
|
|
265
|
+
},
|
|
266
|
+
|
|
267
|
+
'moveHighlight': function($list, direction){
|
|
268
|
+
var $elems = $list.find(this.elemsSelector),
|
|
269
|
+
$currElem = $elems.filter('.ms-hover'),
|
|
270
|
+
$nextElem = null,
|
|
271
|
+
elemHeight = $elems.first().outerHeight(),
|
|
272
|
+
containerHeight = $list.height(),
|
|
273
|
+
containerSelector = '#'+this.$container.prop('id');
|
|
274
|
+
|
|
275
|
+
$elems.removeClass('ms-hover');
|
|
276
|
+
if (direction === 1){ // DOWN
|
|
277
|
+
|
|
278
|
+
$nextElem = $currElem.nextAll(this.elemsSelector).first();
|
|
279
|
+
if ($nextElem.length === 0){
|
|
280
|
+
var $optgroupUl = $currElem.parent();
|
|
281
|
+
|
|
282
|
+
if ($optgroupUl.hasClass('ms-optgroup')){
|
|
283
|
+
var $optgroupLi = $optgroupUl.parent(),
|
|
284
|
+
$nextOptgroupLi = $optgroupLi.next(':visible');
|
|
285
|
+
|
|
286
|
+
if ($nextOptgroupLi.length > 0){
|
|
287
|
+
$nextElem = $nextOptgroupLi.find(this.elemsSelector).first();
|
|
288
|
+
} else {
|
|
289
|
+
$nextElem = $elems.first();
|
|
290
|
+
}
|
|
291
|
+
} else {
|
|
292
|
+
$nextElem = $elems.first();
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
} else if (direction === -1){ // UP
|
|
296
|
+
|
|
297
|
+
$nextElem = $currElem.prevAll(this.elemsSelector).first();
|
|
298
|
+
if ($nextElem.length === 0){
|
|
299
|
+
var $optgroupUl = $currElem.parent();
|
|
300
|
+
|
|
301
|
+
if ($optgroupUl.hasClass('ms-optgroup')){
|
|
302
|
+
var $optgroupLi = $optgroupUl.parent(),
|
|
303
|
+
$prevOptgroupLi = $optgroupLi.prev(':visible');
|
|
304
|
+
|
|
305
|
+
if ($prevOptgroupLi.length > 0){
|
|
306
|
+
$nextElem = $prevOptgroupLi.find(this.elemsSelector).last();
|
|
307
|
+
} else {
|
|
308
|
+
$nextElem = $elems.last();
|
|
309
|
+
}
|
|
310
|
+
} else {
|
|
311
|
+
$nextElem = $elems.last();
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
if ($nextElem.length > 0){
|
|
316
|
+
$nextElem.addClass('ms-hover');
|
|
317
|
+
var scrollTo = $list.scrollTop() + $nextElem.position().top -
|
|
318
|
+
containerHeight / 2 + elemHeight / 2;
|
|
319
|
+
|
|
320
|
+
$list.scrollTop(scrollTo);
|
|
321
|
+
}
|
|
322
|
+
},
|
|
323
|
+
|
|
324
|
+
'selectHighlighted' : function($list){
|
|
325
|
+
var $elems = $list.find(this.elemsSelector),
|
|
326
|
+
$highlightedElem = $elems.filter('.ms-hover').first();
|
|
327
|
+
|
|
328
|
+
if ($highlightedElem.length > 0){
|
|
329
|
+
if ($list.parent().hasClass('ms-selectable')){
|
|
330
|
+
this.select($highlightedElem.data('ms-value'));
|
|
331
|
+
} else {
|
|
332
|
+
this.deselect($highlightedElem.data('ms-value'));
|
|
333
|
+
}
|
|
334
|
+
$elems.removeClass('ms-hover');
|
|
335
|
+
}
|
|
336
|
+
},
|
|
337
|
+
|
|
338
|
+
'switchList' : function($list){
|
|
339
|
+
$list.blur();
|
|
340
|
+
this.$container.find(this.elemsSelector).removeClass('ms-hover');
|
|
341
|
+
if ($list.parent().hasClass('ms-selectable')){
|
|
342
|
+
this.$selectionUl.focus();
|
|
343
|
+
} else {
|
|
344
|
+
this.$selectableUl.focus();
|
|
345
|
+
}
|
|
346
|
+
},
|
|
347
|
+
|
|
348
|
+
'activeMouse' : function($list){
|
|
349
|
+
var that = this;
|
|
350
|
+
|
|
351
|
+
this.$container.on('mouseenter', that.elemsSelector, function(){
|
|
352
|
+
$(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover');
|
|
353
|
+
$(this).addClass('ms-hover');
|
|
354
|
+
});
|
|
355
|
+
|
|
356
|
+
this.$container.on('mouseleave', that.elemsSelector, function () {
|
|
357
|
+
$(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover');
|
|
358
|
+
});
|
|
359
|
+
},
|
|
360
|
+
|
|
361
|
+
'refresh' : function() {
|
|
362
|
+
this.destroy();
|
|
363
|
+
this.$element.multiSelect(this.options);
|
|
364
|
+
},
|
|
365
|
+
|
|
366
|
+
'destroy' : function(){
|
|
367
|
+
$("#ms-"+this.$element.attr("id")).remove();
|
|
368
|
+
this.$element.off('focus');
|
|
369
|
+
this.$element.css('position', '').css('left', '');
|
|
370
|
+
this.$element.removeData('multiselect');
|
|
371
|
+
},
|
|
372
|
+
|
|
373
|
+
'select' : function(value, method){
|
|
374
|
+
if (typeof value === 'string'){ value = [value]; }
|
|
375
|
+
|
|
376
|
+
var that = this,
|
|
377
|
+
ms = this.$element,
|
|
378
|
+
msIds = $.map(value, function(val){ return(that.sanitize(val)); }),
|
|
379
|
+
selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable').filter(':not(.'+that.options.disabledClass+')'),
|
|
380
|
+
selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection').filter(':not(.'+that.options.disabledClass+')'),
|
|
381
|
+
options = ms.find('option:not(:disabled)').filter(function(){ return($.inArray(this.value, value) > -1); });
|
|
382
|
+
|
|
383
|
+
if (method === 'init'){
|
|
384
|
+
selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable'),
|
|
385
|
+
selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection');
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
if (selectables.length > 0){
|
|
389
|
+
selectables.addClass('ms-selected').hide();
|
|
390
|
+
selections.addClass('ms-selected').show();
|
|
391
|
+
|
|
392
|
+
options.prop('selected', true);
|
|
393
|
+
|
|
394
|
+
that.$container.find(that.elemsSelector).removeClass('ms-hover');
|
|
395
|
+
|
|
396
|
+
var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container');
|
|
397
|
+
if (selectableOptgroups.length > 0){
|
|
398
|
+
selectableOptgroups.each(function(){
|
|
399
|
+
var selectablesLi = $(this).find('.ms-elem-selectable');
|
|
400
|
+
if (selectablesLi.length === selectablesLi.filter('.ms-selected').length){
|
|
401
|
+
$(this).find('.ms-optgroup-label').hide();
|
|
402
|
+
}
|
|
403
|
+
});
|
|
404
|
+
|
|
405
|
+
var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container');
|
|
406
|
+
selectionOptgroups.each(function(){
|
|
407
|
+
var selectionsLi = $(this).find('.ms-elem-selection');
|
|
408
|
+
if (selectionsLi.filter('.ms-selected').length > 0){
|
|
409
|
+
$(this).find('.ms-optgroup-label').show();
|
|
410
|
+
}
|
|
411
|
+
});
|
|
412
|
+
} else {
|
|
413
|
+
if (that.options.keepOrder && method !== 'init'){
|
|
414
|
+
var selectionLiLast = that.$selectionUl.find('.ms-selected');
|
|
415
|
+
if((selectionLiLast.length > 1) && (selectionLiLast.last().get(0) != selections.get(0))) {
|
|
416
|
+
selections.insertAfter(selectionLiLast.last());
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
if (method !== 'init'){
|
|
421
|
+
ms.trigger('change');
|
|
422
|
+
if (typeof that.options.afterSelect === 'function') {
|
|
423
|
+
that.options.afterSelect.call(this, value);
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
|
|
429
|
+
'deselect' : function(value){
|
|
430
|
+
if (typeof value === 'string'){ value = [value]; }
|
|
431
|
+
|
|
432
|
+
var that = this,
|
|
433
|
+
ms = this.$element,
|
|
434
|
+
msIds = $.map(value, function(val){ return(that.sanitize(val)); }),
|
|
435
|
+
selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable'),
|
|
436
|
+
selections = this.$selectionUl.find('#' + msIds.join('-selection, #')+'-selection').filter('.ms-selected').filter(':not(.'+that.options.disabledClass+')'),
|
|
437
|
+
options = ms.find('option').filter(function(){ return($.inArray(this.value, value) > -1); });
|
|
438
|
+
|
|
439
|
+
if (selections.length > 0){
|
|
440
|
+
selectables.removeClass('ms-selected').show();
|
|
441
|
+
selections.removeClass('ms-selected').hide();
|
|
442
|
+
options.prop('selected', false);
|
|
443
|
+
|
|
444
|
+
that.$container.find(that.elemsSelector).removeClass('ms-hover');
|
|
445
|
+
|
|
446
|
+
var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container');
|
|
447
|
+
if (selectableOptgroups.length > 0){
|
|
448
|
+
selectableOptgroups.each(function(){
|
|
449
|
+
var selectablesLi = $(this).find('.ms-elem-selectable');
|
|
450
|
+
if (selectablesLi.filter(':not(.ms-selected)').length > 0){
|
|
451
|
+
$(this).find('.ms-optgroup-label').show();
|
|
452
|
+
}
|
|
453
|
+
});
|
|
454
|
+
|
|
455
|
+
var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container');
|
|
456
|
+
selectionOptgroups.each(function(){
|
|
457
|
+
var selectionsLi = $(this).find('.ms-elem-selection');
|
|
458
|
+
if (selectionsLi.filter('.ms-selected').length === 0){
|
|
459
|
+
$(this).find('.ms-optgroup-label').hide();
|
|
460
|
+
}
|
|
461
|
+
});
|
|
462
|
+
}
|
|
463
|
+
ms.trigger('change');
|
|
464
|
+
if (typeof that.options.afterDeselect === 'function') {
|
|
465
|
+
that.options.afterDeselect.call(this, value);
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
},
|
|
469
|
+
|
|
470
|
+
'select_all' : function(){
|
|
471
|
+
var ms = this.$element,
|
|
472
|
+
values = ms.val();
|
|
473
|
+
|
|
474
|
+
ms.find('option:not(":disabled")').prop('selected', true);
|
|
475
|
+
this.$selectableUl.find('.ms-elem-selectable').filter(':not(.'+this.options.disabledClass+')').addClass('ms-selected').hide();
|
|
476
|
+
this.$selectionUl.find('.ms-optgroup-label').show();
|
|
477
|
+
this.$selectableUl.find('.ms-optgroup-label').hide();
|
|
478
|
+
this.$selectionUl.find('.ms-elem-selection').filter(':not(.'+this.options.disabledClass+')').addClass('ms-selected').show();
|
|
479
|
+
this.$selectionUl.focus();
|
|
480
|
+
ms.trigger('change');
|
|
481
|
+
if (typeof this.options.afterSelect === 'function') {
|
|
482
|
+
var selectedValues = $.grep(ms.val(), function(item){
|
|
483
|
+
return $.inArray(item, values) < 0;
|
|
484
|
+
});
|
|
485
|
+
this.options.afterSelect.call(this, selectedValues);
|
|
486
|
+
}
|
|
487
|
+
},
|
|
488
|
+
|
|
489
|
+
'deselect_all' : function(){
|
|
490
|
+
var ms = this.$element,
|
|
491
|
+
values = ms.val();
|
|
492
|
+
|
|
493
|
+
ms.find('option').prop('selected', false);
|
|
494
|
+
this.$selectableUl.find('.ms-elem-selectable').removeClass('ms-selected').show();
|
|
495
|
+
this.$selectionUl.find('.ms-optgroup-label').hide();
|
|
496
|
+
this.$selectableUl.find('.ms-optgroup-label').show();
|
|
497
|
+
this.$selectionUl.find('.ms-elem-selection').removeClass('ms-selected').hide();
|
|
498
|
+
this.$selectableUl.focus();
|
|
499
|
+
ms.trigger('change');
|
|
500
|
+
if (typeof this.options.afterDeselect === 'function') {
|
|
501
|
+
this.options.afterDeselect.call(this, values);
|
|
502
|
+
}
|
|
503
|
+
},
|
|
504
|
+
|
|
505
|
+
'select_marked' : function(){
|
|
506
|
+
$('li.marked').each(function( index ) {
|
|
507
|
+
$(this).removeClass('marked');
|
|
508
|
+
$(this).dblclick();
|
|
509
|
+
});
|
|
510
|
+
},
|
|
511
|
+
|
|
512
|
+
'deselect_marked' : function(){
|
|
513
|
+
$('li.dmarked').each(function( index ) {
|
|
514
|
+
$(this).removeClass('dmarked');
|
|
515
|
+
$(this).dblclick();
|
|
516
|
+
});
|
|
517
|
+
},
|
|
518
|
+
|
|
519
|
+
'unmark' : function(){
|
|
520
|
+
$('li.marked').each(function( index ) {
|
|
521
|
+
$(this).removeClass('marked');
|
|
522
|
+
});
|
|
523
|
+
$('li.dmarked').each(function( index ) {
|
|
524
|
+
$(this).removeClass('dmarked');
|
|
525
|
+
});
|
|
526
|
+
},
|
|
527
|
+
|
|
528
|
+
sanitize: function(value){
|
|
529
|
+
var hash = 0, i, character;
|
|
530
|
+
if (value.length == 0) return hash;
|
|
531
|
+
var ls = 0;
|
|
532
|
+
for (i = 0, ls = value.length; i < ls; i++) {
|
|
533
|
+
character = value.charCodeAt(i);
|
|
534
|
+
hash = ((hash<<5)-hash)+character;
|
|
535
|
+
hash |= 0; // Convert to 32bit integer
|
|
536
|
+
}
|
|
537
|
+
return hash;
|
|
538
|
+
}
|
|
539
|
+
};
|
|
540
|
+
|
|
541
|
+
/* MULTISELECT PLUGIN DEFINITION
|
|
542
|
+
* ======================= */
|
|
543
|
+
|
|
544
|
+
$.fn.multiSelect = function () {
|
|
545
|
+
var option = arguments[0],
|
|
546
|
+
args = arguments;
|
|
547
|
+
|
|
548
|
+
return this.each(function () {
|
|
549
|
+
var $this = $(this),
|
|
550
|
+
data = $this.data('multiselect'),
|
|
551
|
+
options = $.extend({}, $.fn.multiSelect.defaults, $this.data(), typeof option === 'object' && option);
|
|
552
|
+
|
|
553
|
+
if (!data){ $this.data('multiselect', (data = new MultiSelect(this, options))); }
|
|
554
|
+
|
|
555
|
+
if (typeof option === 'string'){
|
|
556
|
+
data[option](args[1]);
|
|
557
|
+
} else {
|
|
558
|
+
data.init();
|
|
559
|
+
}
|
|
560
|
+
});
|
|
561
|
+
};
|
|
562
|
+
|
|
563
|
+
$.fn.multiSelect.defaults = {
|
|
564
|
+
keySelect: [32],
|
|
565
|
+
selectableOptgroup: false,
|
|
566
|
+
disabledClass : 'disabled',
|
|
567
|
+
dblClick : false,
|
|
568
|
+
keepOrder: false,
|
|
569
|
+
cssClass: ''
|
|
570
|
+
};
|
|
571
|
+
|
|
572
|
+
$.fn.multiSelect.Constructor = MultiSelect;
|
|
573
|
+
|
|
574
|
+
$.fn.insertAt = function(index, $parent) {
|
|
575
|
+
return this.each(function() {
|
|
576
|
+
if (index === 0) {
|
|
577
|
+
$parent.prepend(this);
|
|
578
|
+
} else {
|
|
579
|
+
$parent.children().eq(index - 1).after(this);
|
|
580
|
+
}
|
|
581
|
+
});
|
|
582
|
+
};
|
|
583
|
+
|
|
584
|
+
}(window.jQuery);
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
.ms-container{
|
|
2
|
+
background: transparent url('../img/switch.png') no-repeat 50% 50%;
|
|
3
|
+
width: 370px;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.ms-container:after{
|
|
7
|
+
content: ".";
|
|
8
|
+
display: block;
|
|
9
|
+
height: 0;
|
|
10
|
+
line-height: 0;
|
|
11
|
+
font-size: 0;
|
|
12
|
+
clear: both;
|
|
13
|
+
min-height: 0;
|
|
14
|
+
visibility: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ms-container .ms-selectable, .ms-container .ms-selection{
|
|
18
|
+
background: #fff;
|
|
19
|
+
color: #555555;
|
|
20
|
+
float: left;
|
|
21
|
+
width: 45%;
|
|
22
|
+
}
|
|
23
|
+
.ms-container .ms-selection{
|
|
24
|
+
float: right;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.ms-container .ms-list{
|
|
28
|
+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
29
|
+
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
30
|
+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
31
|
+
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
32
|
+
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
33
|
+
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
34
|
+
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
35
|
+
transition: border linear 0.2s, box-shadow linear 0.2s;
|
|
36
|
+
border: 1px solid #ccc;
|
|
37
|
+
-webkit-border-radius: 3px;
|
|
38
|
+
-moz-border-radius: 3px;
|
|
39
|
+
border-radius: 3px;
|
|
40
|
+
position: relative;
|
|
41
|
+
height: 200px;
|
|
42
|
+
padding: 0;
|
|
43
|
+
overflow-y: auto;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.ms-container .ms-list.ms-focus{
|
|
47
|
+
border-color: rgba(82, 168, 236, 0.8);
|
|
48
|
+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
|
49
|
+
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
|
50
|
+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
|
51
|
+
outline: 0;
|
|
52
|
+
outline: thin dotted \9;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.ms-container ul{
|
|
56
|
+
margin: 0;
|
|
57
|
+
list-style-type: none;
|
|
58
|
+
padding: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ms-container .ms-optgroup-container{
|
|
62
|
+
width: 100%;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.ms-container .ms-optgroup-label{
|
|
66
|
+
margin: 0;
|
|
67
|
+
padding: 5px 0px 0px 5px;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
color: #999;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.ms-container .ms-selectable li.ms-elem-selectable,
|
|
73
|
+
.ms-container .ms-selection li.ms-elem-selection{
|
|
74
|
+
border-bottom: 1px #eee solid;
|
|
75
|
+
padding: 2px 10px;
|
|
76
|
+
color: #555;
|
|
77
|
+
font-size: 10px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.ms-container .ms-selectable li.ms-hover,
|
|
81
|
+
.ms-container .ms-selection li.ms-hover{
|
|
82
|
+
cursor: pointer;
|
|
83
|
+
color: #fff;
|
|
84
|
+
text-decoration: none;
|
|
85
|
+
background-color: #08c;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.ms-container .ms-selectable li.marked,
|
|
89
|
+
.ms-container .ms-selection li.dmarked{
|
|
90
|
+
color: #fff;
|
|
91
|
+
text-decoration: none;
|
|
92
|
+
background-color: #08c;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.ms-container .ms-selectable li.disabled,
|
|
96
|
+
.ms-container .ms-selection li.disabled{
|
|
97
|
+
background-color: #eee;
|
|
98
|
+
color: #aaa;
|
|
99
|
+
cursor: text;
|
|
100
|
+
}
|
data/lib/multiselect.rb
ADDED
data/multiselect.gemspec
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
require File.expand_path('../lib/multiselect/version', __FILE__)
|
|
3
|
+
|
|
4
|
+
Gem::Specification.new do |gem|
|
|
5
|
+
gem.authors = ["Artyom Kalmikov"]
|
|
6
|
+
gem.email = ["artyom.kalm@yahoo.com"]
|
|
7
|
+
gem.description = %q{Customized multiselect jQuery plugin for Rails asset pipeline}
|
|
8
|
+
gem.homepage = "https://github.com/artyomkalm/multiselect"
|
|
9
|
+
gem.summary = gem.description
|
|
10
|
+
|
|
11
|
+
gem.name = "multiselect"
|
|
12
|
+
gem.require_paths = ["lib"]
|
|
13
|
+
gem.files = `git ls-files`.split("\n")
|
|
14
|
+
gem.version = MultiSelect::Rails::VERSION
|
|
15
|
+
|
|
16
|
+
gem.license = "MIT"
|
|
17
|
+
|
|
18
|
+
gem.add_dependency "railties", ">= 3.0"
|
|
19
|
+
gem.add_development_dependency "bundler", ">= 1.0"
|
|
20
|
+
gem.add_development_dependency "rake"
|
|
21
|
+
end
|
metadata
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: multiselect
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.1.0
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Artyom Kalmikov
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2016-04-11 00:00:00.000000000 Z
|
|
12
|
+
dependencies:
|
|
13
|
+
- !ruby/object:Gem::Dependency
|
|
14
|
+
name: railties
|
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
|
16
|
+
requirements:
|
|
17
|
+
- - ">="
|
|
18
|
+
- !ruby/object:Gem::Version
|
|
19
|
+
version: '3.0'
|
|
20
|
+
type: :runtime
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - ">="
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: '3.0'
|
|
27
|
+
- !ruby/object:Gem::Dependency
|
|
28
|
+
name: bundler
|
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - ">="
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: '1.0'
|
|
34
|
+
type: :development
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
37
|
+
requirements:
|
|
38
|
+
- - ">="
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: '1.0'
|
|
41
|
+
- !ruby/object:Gem::Dependency
|
|
42
|
+
name: rake
|
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
|
44
|
+
requirements:
|
|
45
|
+
- - ">="
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
version: '0'
|
|
48
|
+
type: :development
|
|
49
|
+
prerelease: false
|
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
51
|
+
requirements:
|
|
52
|
+
- - ">="
|
|
53
|
+
- !ruby/object:Gem::Version
|
|
54
|
+
version: '0'
|
|
55
|
+
description: Customized multiselect jQuery plugin for Rails asset pipeline
|
|
56
|
+
email:
|
|
57
|
+
- artyom.kalm@yahoo.com
|
|
58
|
+
executables: []
|
|
59
|
+
extensions: []
|
|
60
|
+
extra_rdoc_files: []
|
|
61
|
+
files:
|
|
62
|
+
- ".gitignore"
|
|
63
|
+
- Gemfile
|
|
64
|
+
- LICENSE.txt
|
|
65
|
+
- README.md
|
|
66
|
+
- Rakefile
|
|
67
|
+
- app/assets/images/switch.png
|
|
68
|
+
- app/assets/javascripts/multiselect.js
|
|
69
|
+
- app/assets/stylesheets/multiselect.scss
|
|
70
|
+
- lib/multiselect.rb
|
|
71
|
+
- lib/multiselect/engine.rb
|
|
72
|
+
- lib/multiselect/railtie.rb
|
|
73
|
+
- lib/multiselect/version.rb
|
|
74
|
+
- multiselect.gemspec
|
|
75
|
+
- multiselect.sublime-project
|
|
76
|
+
homepage: https://github.com/artyomkalm/multiselect
|
|
77
|
+
licenses:
|
|
78
|
+
- MIT
|
|
79
|
+
metadata: {}
|
|
80
|
+
post_install_message:
|
|
81
|
+
rdoc_options: []
|
|
82
|
+
require_paths:
|
|
83
|
+
- lib
|
|
84
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
85
|
+
requirements:
|
|
86
|
+
- - ">="
|
|
87
|
+
- !ruby/object:Gem::Version
|
|
88
|
+
version: '0'
|
|
89
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
90
|
+
requirements:
|
|
91
|
+
- - ">="
|
|
92
|
+
- !ruby/object:Gem::Version
|
|
93
|
+
version: '0'
|
|
94
|
+
requirements: []
|
|
95
|
+
rubyforge_project:
|
|
96
|
+
rubygems_version: 2.4.5.1
|
|
97
|
+
signing_key:
|
|
98
|
+
specification_version: 4
|
|
99
|
+
summary: Customized multiselect jQuery plugin for Rails asset pipeline
|
|
100
|
+
test_files: []
|