├── README.md
├── demos
    ├── api.html
    ├── bg-image.html
    ├── custom-editor.html
    ├── fixed-values.html
    ├── multipage.html
    ├── size-position.html
    ├── standard.html
    └── targets
    │   ├── complex.html
    │   ├── css
    │       └── style.css
    │   ├── images
    │       ├── bg1.jpg
    │       ├── bg2.jpg
    │       └── bg3.jpg
    │   └── simple.html
├── dependencies
    ├── chosen
    │   ├── chosen-sprite.png
    │   ├── chosen-sprite@2x.png
    │   ├── chosen.css
    │   ├── chosen.jquery.js
    │   ├── chosen.jquery.min.js
    │   ├── chosen.min.css
    │   ├── chosen.proto.js
    │   └── chosen.proto.min.js
    ├── jscolor
    │   ├── arrow.gif
    │   ├── cross.gif
    │   ├── hs.png
    │   ├── hv.png
    │   └── jscolor.js
    └── microtpl.js
└── source
    └── livecsseditor
        ├── editors
            ├── lceBackground.js
            ├── lceColor.js
            ├── lceFont.js
            ├── lcePosition.js
            └── lceSize.js
        ├── livecsseditor-2.0.css
        └── livecsseditor-2.0.js


/README.md:
--------------------------------------------------------------------------------
  1 | # Live CSS Editor
  2 | 
  3 | ## Overview
  4 | 
  5 | Live CSS Editor (LCE) is jquery plugin, "themeroller like" tool for customizing your web page design. Basically, you provide json with configuration and LCE shows: live preview and CSS editor with ability to edit properties you defined. So you can control which properties can be customized.
  6 | 
  7 | ## Demo
  8 | 
  9 | http://rukavina.github.com/live-css-editor/demo
 10 | 
 11 | ## Installation and setup
 12 | 
 13 | You have to include this dependencies in your page (head):
 14 | 
 15 | ```html
 16 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 17 | <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 18 | <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 19 | <script type="text/javascript" src="../dependencies/microtpl.js"></script>
 20 | <script type="text/javascript" src="../dependencies/jscolor/jscolor.js"></script>
 21 | <script type="text/javascript" src="../dependencies/chosen/chosen.jquery.min.js"></script>
 22 | 
 23 | <!-- Editor -->
 24 | <script src="../source/livecsseditor/livecsseditor-2.0.js"></script>
 25 | <script src="../source/livecsseditor/editors/lceColor.js"></script>
 26 | <script src="../source/livecsseditor/editors/lceFont.js"></script>
 27 | <script src="../source/livecsseditor/editors/lceBackground.js"></script>            
 28 | ```
 29 | 
 30 | In the page's body provide div where editor will be placed - give it enough space. Note: there cannot be 2 LCEs on a single page.
 31 | 
 32 | ```html
 33 | <div id="livecsseditor"></div> 
 34 | ```
 35 | 
 36 | Init LCE when document is ready, ex.
 37 | 
 38 | ```javascript
 39 | $(document).ready(function(){
 40 |     $('#livecsseditor').livecsseditor({
 41 |         pages: {
 42 |             'targets/simple.html': {
 43 |                 name: 'First Page',
 44 |                 def: {
 45 |                     'h1':{
 46 |                         name: 'Heading',
 47 |                         props:['color','background-color','font-family','font-weight','text-align'],
 48 |                         labels: ['Color','Background color','Font','Font Weight','Align'],
 49 |                         description: 'Update heading here',
 50 |                         editorsConfig:{
 51 |                             "font-family": {
 52 |                                 "names": ["Verdana","Arial", "Times New Roman"]
 53 |                             }
 54 |                         },
 55 |                         iconClass: "glyphicon glyphicon-star"
 56 |                     },
 57 |                     'p,span':{
 58 |                         name: 'Text',
 59 |                         props:['font-size','color'],
 60 |                         labels: ['Font size','Color'],
 61 |                         editorsConfig:{
 62 |                             "font-size": {
 63 |                                 "fixedValues": ["original","10px","11px","12px"]
 64 |                             }
 65 |                         },
 66 |                         iconClass: "glyphicon glyphicon-font"
 67 |                     }
 68 |                 }
 69 |             }
 70 |         }
 71 |     });               
 72 | });
 73 | ```
 74 | 
 75 | ## Options
 76 |             
 77 | 
 78 | |option | description | default | possible values|
 79 | |-------|-------------|---------|----------------|
 80 | |**pages**|JSON definition of pages, styles and properties to be customized|null|Object|
 81 | |**layout_tpl**|[Micro template](http://ejohn.org/blog/javascript-micro-templating/) layout|__default template__|String|
 82 | |**props_tp**l|[Micro template](http://ejohn.org/blog/javascript-micro-templating/) property list layout|__default template__|String|
 83 | |**hoverColor**|Background color or selected element in the live preview|#faf3ba|String|
 84 | 
 85 | 
 86 | ## Methods
 87 |             
 88 | ### getCss( pagePath )
 89 | 
 90 | Get customized css string for defined page `pagePath` or all pages
 91 | 
 92 | Returns: **String**
 93 | 
 94 | - **pagePath**, Type: String, Default: null
 95 | 
 96 | ```javascript
 97 | $('.selector').livecsseditor('getCss','page.html');</pre>
 98 | ```
 99 | 
100 | * * *
101 | 
102 | ### getJson( pagePath )
103 | 
104 | Get customized JSON Object for defined page `pagePath` or all pages
105 | 
106 | Returns: **Object**
107 | 
108 | - **pagePath**, Type: String, Default: null</li>
109 | 
110 | ```javascript
111 | $('.selector').livecsseditor('getJson','page.html');</pre>
112 | ```
113 | 
114 | * * *
115 | 
116 | ### setJson( jsonObject )
117 | 
118 | Set JSON Object for customized prepared style
119 | 
120 | - **jsonObject**, Type: Object, Default: null
121 | 
122 | ```javascript
123 | $('.selector').livecsseditor('setJson',{
124 |     "page.html":{
125 |         "h1": {
126 |             "background-color": "#F9FF40",
127 |             "color": "#FA2B46"
128 |         }
129 |     }
130 | });
131 | ```
132 | 
133 | ## Examples
134 | 
135 | * * *
136 | 
137 | ### Standard Setup
138 | 
139 | [VIEW DEMO](demos/standard.html)
140 | 
141 | Follow standard installation. Start livecsseditor when the document is ready.
142 | 
143 | ```javascript
144 | $('#livecsseditor').livecsseditor({
145 |     pages: {
146 |         'targets/simple.html': {
147 |             name: 'First Page',
148 |             def: {
149 |                 'h1':{
150 |                     name: 'Heading',
151 |                     props:['color','background-color','font-family','font-weight','text-align'],
152 |                     labels: ['Color','Background color','Font','Font Weight','Align'],
153 |                     description: 'Update heading here',
154 |                     editorsConfig:{
155 |                         "font-family": {
156 |                             "names": ["Verdana","Arial", "Times New Roman"]
157 |                         }
158 |                     },
159 |                     iconClass: "glyphicon glyphicon-star"
160 |                 },
161 |                 'p,span':{
162 |                     name: 'Text',
163 |                     props:['font-size','color'],
164 |                     labels: ['Font size','Color'],
165 |                     editorsConfig:{
166 |                         "font-size": {
167 |                             "fixedValues": ["original","10px","11px","12px"]
168 |                         }
169 |                     },
170 |                     iconClass: "glyphicon glyphicon-font"
171 |                 }
172 |             }
173 |         }
174 |     }
175 | });                
176 | ```
177 | 
178 | Options JSON has the following structure:
179 | 
180 | *   **pages**
181 |     *   _page url_ URL to a page to be customized
182 |         *   **name** Descriptive page name
183 |         *   **def**
184 |             *   _element css selector_ CSS selector of a DOM element
185 |                 *   **name** Descriptive element name
186 |                 *   **props** Array of editable CSS properties
187 |                 *   **labels** Array of descriptive names of editable properties
188 |                 *   **description** Description of the current element
189 |                 *   **iconClass** Optional element's icons css class
190 |                 *   **editorsConfig** Optional properties for particular editors
191 |                     *   _property_ Value for each key is configuration for particular editor
192 | 
193 | * * *
194 | 
195 | ### Multipage Setup
196 | 
197 | [VIEW DEMO](demos/multipage.html)
198 | 
199 | Livecsseditor let you manage multiple pages from the same screen.
200 | 
201 | * * *
202 | 
203 | ### Size and Position Editors
204 | 
205 | [VIEW DEMO](demos/size-position.html)
206 | 
207 | In this example we have included custom position and size editors for in place, WYSIWYG editing. After standard installation you need to include these 2 editors:
208 | 
209 | ```html
210 | <script src="../source/livecsseditor/editors/lceSize.js"></script>
211 | <script src="../source/livecsseditor/editors/lcePosition.js"></script>
212 | ```
213 | 
214 | Options JSON has to include definition for this properties on proper elements:
215 | 
216 | ```javascript
217 | 'div.resizable':{
218 |     name:'Resizable',
219 |     props:['width','height'],
220 |     iconClass: "glyphicon glyphicon-fullscreen"
221 | },
222 | 'div.movable':{
223 |     name:'Movable',
224 |     props:['left','top'],
225 |     iconClass: "glyphicon glyphicon-fullscreen"
226 | }
227 | ```
228 | 
229 | Note that movable element needs to have absolute position in order to be draggable.
230 | 
231 | * * *
232 | 
233 | ### Background image editor
234 | 
235 | [VIEW DEMO](demos/bg-image.html)
236 | 
237 | Selecting a background image for your elements is more of a backend task, thus you might want to create custom editor with integrated file manager or similar.
238 | 
239 | Still, there's a simple built-in option. Basically, it's a simple select box with predefined options provided by you.
240 | 
241 | ```javascript
242 | 'div.resizable':{
243 |     name:'BG Image',
244 |     props:['background-image'],
245 |     labels: ['Background Image'],
246 |     description: 'Choose BG Image',
247 |     editorsConfig:{
248 |         "background-image": {
249 |             "urls": ["images/bg1.jpg","images/bg2.jpg", "images/bg3.jpg"]
250 |         }
251 |     },
252 |     iconClass: "glyphicon glyphicon-fullscreen"
253 | }
254 | ```
255 | * * *
256 | 
257 | ### API Interaction
258 | 
259 | [VIEW DEMO](demos/api.html)
260 | 
261 | livecsseditor has two methods`getCss` and`getJson` for you to store somewhere definition of made customization. On the hand,`setJson` provides a way to load styles from JSON object:
262 | 
263 | Options JSON has to include definition for this properties on proper elements:
264 | 
265 | ```javascript
266 | //css button
267 | $('#cssBtn').click(function(){
268 |     alert($('#livecsseditor').livecsseditor('getCss','targets/complex.html'));
269 | });
270 | //json get button
271 | $('#jsonBtn').click(function(){
272 |     console.log($('#livecsseditor').livecsseditor('getJson','targets/complex.html'));
273 | });
274 | //json set button
275 | $('#jsonSetBtn').click(function(){
276 |     $('#livecsseditor').livecsseditor('setJson',{
277 |         "targets/complex.html":{
278 |             "h1": {
279 |                 "background-color": "#F9FF40",
280 |                 "color": "#FA2B46"
281 |             }
282 |         }
283 |     });
284 | });
285 | ```
286 | * * *
287 | 
288 | ### Custom Editor
289 | 
290 | [VIEW DEMO](demos/custom-editor.html)
291 | 
292 | Whenever you are not satisfied with built-in editor or you need some custom editing logic, you can easily plug in your custom editing function.
293 | 
294 | In this example we attached our custom color editor. Let's say we want our users to choose just red or green color, peace of cake:
295 | 
296 | ```javascript
297 | $.fn.livecsseditor.setPropertyEditor(['color','background-color'],
298 |     function customColorEditor(customizer, vars, config){
299 |         var $select = $('&lt;select class="form-control"&gt;&lt;/select&gt;'),
300 |             html = '',
301 |             options = {
302 |                 "original": "",
303 |                 "#FF0000": "Red",
304 |                 "#00FF00": "Green"
305 |             };
306 |         vars.container.append($select);
307 |         for(var value in options){
308 |             var selected = '';
309 |             if (vars.value == value) {
310 |                 selected = ' selected="selected"';
311 |             }
312 |             html += '&lt;option value="' + value + '"' + selected  + '"&gt;' + options[value] + '&lt;/option&gt;';
313 |         }
314 |         $select.html(html).change(function(){
315 |             vars.setValue($(this).val());
316 |         })                    
317 | });
318 | ```
319 | 
320 | We attached editor function using`$.fn.livecsseditor.setPropertyEditor`. Basically, we define in this call which properties we edit and callback function. During callback execution, livecsseditor provides 3 arguments:
321 | 
322 | *   **customizer** - livecsseditor instance
323 | *   **vars** - running environment: value, setValue function, etc.
324 | *   **config** - editor local configuration
325 | 
326 | * * *
327 | 
328 | ### Fixed values
329 | 
330 | [VIEW DEMO](demos/fixed-values.html)
331 | 
332 | Whenever you want to limit available options to predefined set, there's no need to create custom editor, you can just define property editor configuration:
333 | 
334 | ```javascript
335 | $('#livecsseditor').livecsseditor({
336 |     pages: {
337 |         'targets/complex.html': {
338 |             name: 'Complex page',
339 |             def: {
340 |                 'h1':{
341 |                     name: 'Heading',
342 |                     props:['font-size'],
343 |                     labels: ['Font size'],
344 |                     editorsConfig:{
345 |                         "font-size": {
346 |                             "fixedValues": ["14px","15px", "16px"]
347 |                         }
348 |                     },
349 |                     iconClass: "glyphicon glyphicon-star"
350 |                 }                                
351 |             }
352 |         }
353 |     }
354 | });
355 | ```
356 | 
357 | ## Credits
358 | 
359 | This projects was inspired or uses the following projects:
360 | 
361 | * [jquery](http://jquery.com/)
362 | * [JavaScript Micro-Templating](JavaScript Micro-Templating)
363 | * [twitter bootstrap](http://twitter.github.com/bootstrap/)
364 | * [jquery themeroller](http://jqueryui.com/themeroller/)
365 | * [bootstrap colorpicker](http://www.eyecon.ro/bootstrap-colorpicker)
366 | 
367 | ## Licence
368 | 
369 | The MIT License (MIT)
370 | 
371 | Copyright (c) 2012 Milan Rukavina
372 | 
373 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
374 | 
375 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
376 | 
377 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/demos/api.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <title>Livecsseditor</title>
  5 | 
  6 |         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
  7 |         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  8 |         <link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
  9 |         <link rel="stylesheet" href="../source/livecsseditor/livecsseditor-2.0.css">
 10 |         <link rel="stylesheet" href="../dependencies/chosen/chosen.min.css">
 11 |     </head>
 12 |     <body>
 13 |         <div class="page-header">
 14 |             <h1>Livecsseditor <small>API interaction</small></h1>
 15 |             <button class="btn" id="cssBtn">Get custom CSS</button>
 16 |             <button class="btn" id="jsonBtn">Get custom JSON</button>
 17 |             <button class="btn" id="jsonSetBtn">Set custom JSON</button>
 18 |         </div>        
 19 |         <div class="container" id="livecsseditor"></div>
 20 | 
 21 |         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 22 |         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 23 |         <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 24 |         <script type="text/javascript" src="../dependencies/microtpl.js"></script>
 25 |         <script type="text/javascript" src="../dependencies/jscolor/jscolor.js"></script>
 26 |         <script type="text/javascript" src="../dependencies/chosen/chosen.jquery.min.js"></script>
 27 | 
 28 |         <!-- Editor -->
 29 |         <script src="../source/livecsseditor/livecsseditor-2.0.js"></script>
 30 |         <script src="../source/livecsseditor/editors/lceColor.js"></script>
 31 |         <script src="../source/livecsseditor/editors/lceFont.js"></script>
 32 |         <script src="../source/livecsseditor/editors/lceBackground.js"></script>
 33 | 
 34 |         <script src="../source/livecsseditor/editors/lceSize.js"></script>
 35 |         <script src="../source/livecsseditor/editors/lcePosition.js"></script>
 36 |         <script>
 37 |             $(document).ready(function(){
 38 |                 $('#livecsseditor').livecsseditor({
 39 |                     pages: {
 40 |                         'targets/complex.html': {
 41 |                             name: 'Complex page',
 42 |                             def: {
 43 |                                 'h1':{
 44 |                                     name: 'Heading',
 45 |                                     props:['color','background-color','font-family','font-weight','text-align'],
 46 |                                     labels: ['Color','Background color','Font','Font Weight','Align'],
 47 |                                     description: 'Update heading here',
 48 |                                     editorsConfig:{
 49 |                                         "font-family": {
 50 |                                             "names": ["Verdana","Arial", "Times New Roman"]
 51 |                                         }
 52 |                                     },
 53 |                                     iconClass: "glyphicon glyphicon-star"
 54 |                                 },
 55 |                                 'p,span':{
 56 |                                     name: 'Text',
 57 |                                     props:['font-size','color'],
 58 |                                     editorsConfig:{
 59 |                                         "font-size": {
 60 |                                             "fixedValues": ["10px","11px","12px"]
 61 |                                         }
 62 |                                     },
 63 |                                     iconClass: "glyphicon glyphicon-font"
 64 |                                 },
 65 |                                 'div.resizable':{
 66 |                                     name:'Resizable',
 67 |                                     props:['width','height'],
 68 |                                     iconClass: "glyphicon glyphicon-fullscreen"
 69 |                                 },
 70 |                                 'div.movable':{
 71 |                                     name:'Movable',
 72 |                                     props:['left','top'],
 73 |                                     iconClass: "glyphicon glyphicon-fullscreen"
 74 |                                 }
 75 |                             }
 76 |                         }
 77 |                     }
 78 |                 });
 79 | 
 80 |                 //css button
 81 |                 $('#cssBtn').click(function(){
 82 |                     alert($('#livecsseditor').livecsseditor('getCss','targets/complex.html'));
 83 |                 });
 84 |                 //json get button
 85 |                 $('#jsonBtn').click(function(){
 86 |                     console.log($('#livecsseditor').livecsseditor('getJson','targets/complex.html'));
 87 |                 });
 88 |                 //json set button
 89 |                 $('#jsonSetBtn').click(function(){
 90 |                     $('#livecsseditor').livecsseditor('setJson',{
 91 |                         "targets/complex.html":{
 92 |                             "h1": {
 93 |                                 "background-color": "#F9FF40",
 94 |                                 "color": "#FA2B46"
 95 |                             }
 96 |                         }
 97 |                     });
 98 |                 });
 99 |                 
100 |             });
101 |         </script>
102 |     </body>
103 | </html>


--------------------------------------------------------------------------------
/demos/bg-image.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Livecsseditor</title>
 5 | 
 6 |         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
 7 |         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 8 |         <link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
 9 |         <link rel="stylesheet" href="../source/livecsseditor/livecsseditor-2.0.css">
10 |         <link rel="stylesheet" href="../dependencies/chosen/chosen.min.css">
11 |     </head>
12 |     <body>
13 |         <div class="page-header">
14 |             <h1>Livecsseditor <small>Background image</small></h1>
15 |             <p></p>
16 |         </div>        
17 |         <div class="container" id="livecsseditor"></div>
18 | 
19 |         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
20 |         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
21 |         <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
22 |         <script type="text/javascript" src="../dependencies/microtpl.js"></script>
23 |         <script type="text/javascript" src="../dependencies/jscolor/jscolor.js"></script>
24 |         <script type="text/javascript" src="../dependencies/chosen/chosen.jquery.min.js"></script>
25 | 
26 |         <!-- Editor -->
27 |         <script src="../source/livecsseditor/livecsseditor-2.0.js"></script>
28 |         <script src="../source/livecsseditor/editors/lceColor.js"></script>
29 |         <script src="../source/livecsseditor/editors/lceFont.js"></script>
30 |         <script src="../source/livecsseditor/editors/lceBackground.js"></script>
31 |         <script>
32 |             $(document).ready(function(){
33 |                 $('#livecsseditor').livecsseditor({
34 |                     pages: {
35 |                         'targets/complex.html': {
36 |                             name: 'Complex page',
37 |                             def: {
38 |                                 'h1':{
39 |                                     name: 'Heading',
40 |                                     props:['color','background-color','font-family','font-weight','text-align'],
41 |                                     labels: ['Color','Background color','Font','Font Weight','Align'],
42 |                                     description: 'Update heading here',
43 |                                     editorsConfig:{
44 |                                         "font-family": {
45 |                                             "names": ["Verdana","Arial", "Times New Roman"]
46 |                                         }
47 |                                     },
48 |                                     iconClass: "glyphicon glyphicon-star"
49 |                                 },
50 |                                 'div.resizable':{
51 |                                     name:'BG Image',
52 |                                     props:['background-image'],
53 |                                     labels: ['Background Image'],
54 |                                     description: 'Choose BG Image',
55 |                                     editorsConfig:{
56 |                                         "background-image": {
57 |                                             "urls": ["images/bg1.jpg","images/bg2.jpg", "images/bg3.jpg"]
58 |                                         }
59 |                                     },
60 |                                     iconClass: "glyphicon glyphicon-fullscreen"
61 |                                 }                                
62 |                             }
63 |                         }
64 |                     }
65 |                 });               
66 |             });
67 |         </script>
68 |     </body>
69 | </html>


--------------------------------------------------------------------------------
/demos/custom-editor.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Livecsseditor</title>
 5 | 
 6 |         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
 7 |         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 8 |         <link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
 9 |         <link rel="stylesheet" href="../source/livecsseditor/livecsseditor-2.0.css">
10 |         <link rel="stylesheet" href="../dependencies/chosen/chosen.min.css">
11 |     </head>
12 |     <body>
13 |         <div class="page-header">
14 |             <h1>Livecsseditor <small>Custom editor</small></h1>
15 |             <p></p>
16 |         </div>        
17 |         <div class="container" id="livecsseditor"></div>
18 | 
19 |         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
20 |         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
21 |         <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
22 |         <script type="text/javascript" src="../dependencies/microtpl.js"></script>
23 |         <script type="text/javascript" src="../dependencies/jscolor/jscolor.js"></script>
24 |         <script type="text/javascript" src="../dependencies/chosen/chosen.jquery.min.js"></script>
25 | 
26 |         <!-- Editor -->
27 |         <script src="../source/livecsseditor/livecsseditor-2.0.js"></script>
28 |         <script src="../source/livecsseditor/editors/lceColor.js"></script>
29 |         <script src="../source/livecsseditor/editors/lceFont.js"></script>
30 |         <script src="../source/livecsseditor/editors/lceBackground.js"></script>
31 |         <script>
32 |             $(document).ready(function(){
33 |                 //custom editor
34 |                 $.fn.livecsseditor.setPropertyEditor(['color','background-color'], function customColorEditor(customizer, vars, config){
35 |                     var $select = $('<select class="form-control"></select>'),
36 |                         html = '',
37 |                         options = {
38 |                             "original": "",
39 |                             "#FF0000": "Red",
40 |                             "#00FF00": "Green"
41 |                         };
42 |                     vars.container.append($select);
43 |                     for(var value in options){
44 |                         var selected = '';
45 |                         if (vars.value == value) {
46 |                             selected = ' selected="selected"';
47 |                         }
48 |                         html += '<option value="' + value + '"' + selected  + '">' + options[value] + '</option>';
49 |                     }
50 |                     $select.html(html).change(function(){
51 |                         vars.setValue($(this).val());
52 |                     })                    
53 |                 });
54 |                 
55 |                 $('#livecsseditor').livecsseditor({
56 |                     pages: {
57 |                         'targets/complex.html': {
58 |                             name: 'Complex page',
59 |                             def: {
60 |                                 'h1':{
61 |                                     name: 'Heading',
62 |                                     props:['color','background-color','font-family','font-weight','text-align'],
63 |                                     labels: ['Color','Background color','Font','Font Weight','Align'],
64 |                                     description: 'Update heading here',
65 |                                     editorsConfig:{
66 |                                         "font-family": {
67 |                                             "names": ["Verdana","Arial", "Times New Roman"]
68 |                                         }
69 |                                     },
70 |                                     iconClass: "glyphicon glyphicon-star"
71 |                                 },
72 |                                 'div.resizable':{
73 |                                     name:'BG Image',
74 |                                     props:['background-image'],
75 |                                     labels: ['Background Image'],
76 |                                     description: 'Choose BG Image',
77 |                                     editorsConfig:{
78 |                                         "background-image": {
79 |                                             "urls": ["images/bg1.jpg","images/bg2.jpg", "images/bg3.jpg"]
80 |                                         }
81 |                                     },
82 |                                     iconClass: "glyphicon glyphicon-fullscreen"
83 |                                 }                                
84 |                             }
85 |                         }
86 |                     }
87 |                 });               
88 |             });
89 |         </script>
90 |     </body>
91 | </html>


--------------------------------------------------------------------------------
/demos/fixed-values.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Livecsseditor</title>
 5 | 
 6 |         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
 7 |         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 8 |         <link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
 9 |         <link rel="stylesheet" href="../source/livecsseditor/livecsseditor-2.0.css">
10 |         <link rel="stylesheet" href="../dependencies/chosen/chosen.min.css">
11 |     </head>
12 |     <body>
13 |         <div class="page-header">
14 |             <h1>Livecsseditor <small>Fixed values</small></h1>
15 |             <p></p>
16 |         </div>        
17 |         <div class="container" id="livecsseditor"></div>
18 | 
19 |         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
20 |         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
21 |         <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
22 |         <script type="text/javascript" src="../dependencies/microtpl.js"></script>
23 |         <script type="text/javascript" src="../dependencies/jscolor/jscolor.js"></script>
24 |         <script type="text/javascript" src="../dependencies/chosen/chosen.jquery.min.js"></script>
25 | 
26 |         <!-- Editor -->
27 |         <script src="../source/livecsseditor/livecsseditor-2.0.js"></script>
28 |         <script src="../source/livecsseditor/editors/lceColor.js"></script>
29 |         <script src="../source/livecsseditor/editors/lceFont.js"></script>
30 |         <script src="../source/livecsseditor/editors/lceBackground.js"></script>
31 |         <script>
32 |             $(document).ready(function(){                
33 |                 $('#livecsseditor').livecsseditor({
34 |                     pages: {
35 |                         'targets/complex.html': {
36 |                             name: 'Complex page',
37 |                             def: {
38 |                                 'h1':{
39 |                                     name: 'Heading',
40 |                                     props:['font-size'],
41 |                                     labels: ['Font size'],
42 |                                     editorsConfig:{
43 |                                         "font-size": {
44 |                                             "fixedValues": ["14px","15px", "16px"]
45 |                                         }
46 |                                     },
47 |                                     iconClass: "glyphicon glyphicon-star"
48 |                                 }                                
49 |                             }
50 |                         }
51 |                     }
52 |                 });               
53 |             });
54 |         </script>
55 |     </body>
56 | </html>


--------------------------------------------------------------------------------
/demos/multipage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Livecsseditor</title>
 5 | 
 6 |         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
 7 |         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 8 |         <link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
 9 |         <link rel="stylesheet" href="../source/livecsseditor/livecsseditor-2.0.css">
10 |         <link rel="stylesheet" href="../dependencies/chosen/chosen.min.css">
11 |     </head>
12 |     <body>
13 |         <div class="page-header">
14 |             <h1>Livecsseditor <small>Multipage</small></h1>
15 |             <p></p>
16 |         </div>        
17 |         <div class="container" id="livecsseditor"></div>
18 | 
19 |         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
20 |         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
21 |         <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
22 |         <script type="text/javascript" src="../dependencies/microtpl.js"></script>
23 |         <script type="text/javascript" src="../dependencies/jscolor/jscolor.js"></script>
24 |         <script type="text/javascript" src="../dependencies/chosen/chosen.jquery.min.js"></script>
25 | 
26 |         <!-- Editor -->
27 |         <script src="../source/livecsseditor/livecsseditor-2.0.js"></script>
28 |         <script src="../source/livecsseditor/editors/lceColor.js"></script>
29 |         <script src="../source/livecsseditor/editors/lceFont.js"></script>
30 |         <script src="../source/livecsseditor/editors/lceBackground.js"></script>
31 |         <script>
32 |             $(document).ready(function(){
33 |                 $('#livecsseditor').livecsseditor({
34 |                     pages: {
35 |                         'targets/simple.html': {
36 |                             name: 'Simple Page',
37 |                             def: {
38 |                                 'h1':{
39 |                                     name: 'Heading',
40 |                                     props:['color','background-color','font-family','font-weight','text-align'],
41 |                                     labels: ['Color','Background color','Font','Font Weight','Align'],
42 |                                     description: 'Update heading here',
43 |                                     editorsConfig:{
44 |                                         "font-family": {
45 |                                             "names": ["Verdana","Arial", "Times New Roman"]
46 |                                         }
47 |                                     },
48 |                                     iconClass: "glyphicon glyphicon-star"
49 |                                 },
50 |                                 'p,span':{
51 |                                     name: 'Text',
52 |                                     props:['font-size','color'],
53 |                                     labels: ['Font size','Color'],
54 |                                     editorsConfig:{
55 |                                         "font-size": {
56 |                                             "fixedValues": ["original","10px","11px","12px"]
57 |                                         }
58 |                                     },
59 |                                     iconClass: "glyphicon glyphicon-font"
60 |                                 }
61 |                             }
62 |                         },
63 |                         'targets/complex.html': {
64 |                             name: 'Complex page',
65 |                             def: {
66 |                                 'h1':{
67 |                                     name: 'Heading',
68 |                                     props:['color','background-color','font-family','font-weight','text-align'],
69 |                                     labels: ['Color','Background color','Font','Font Weight','Align'],
70 |                                     description: 'Update heading here',
71 |                                     editorsConfig:{
72 |                                         "font-family": {
73 |                                             "names": ["Verdana","Arial", "Times New Roman"]
74 |                                         }
75 |                                     },
76 |                                     iconClass: "glyphicon glyphicon-star"
77 |                                 },
78 |                                 'p,span':{
79 |                                     name: 'Text',
80 |                                     props:['font-size','color'],
81 |                                     editorsConfig:{
82 |                                         "font-size": {
83 |                                             "fixedValues": ["10px","11px","12px"]
84 |                                         }
85 |                                     },
86 |                                     iconClass: "glyphicon glyphicon-font"
87 |                                 }
88 |                             }
89 |                         }
90 |                     }
91 |                 });               
92 |             });
93 |         </script>
94 |     </body>
95 | </html>


--------------------------------------------------------------------------------
/demos/size-position.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Livecsseditor</title>
 5 | 
 6 |         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
 7 |         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 8 |         <link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
 9 |         <link rel="stylesheet" href="../source/livecsseditor/livecsseditor-2.0.css">
10 |         <link rel="stylesheet" href="../dependencies/chosen/chosen.min.css">
11 |     </head>
12 |     <body>
13 |         <div class="page-header">
14 |             <h1>Livecsseditor <small>Size and position</small></h1>
15 |             <p></p>
16 |         </div>        
17 |         <div class="container" id="livecsseditor"></div>
18 | 
19 |         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
20 |         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
21 |         <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
22 |         <script type="text/javascript" src="../dependencies/microtpl.js"></script>
23 |         <script type="text/javascript" src="../dependencies/jscolor/jscolor.js"></script>
24 |         <script type="text/javascript" src="../dependencies/chosen/chosen.jquery.min.js"></script>
25 | 
26 |         <!-- Editor -->
27 |         <script src="../source/livecsseditor/livecsseditor-2.0.js"></script>
28 |         <script src="../source/livecsseditor/editors/lceColor.js"></script>
29 |         <script src="../source/livecsseditor/editors/lceFont.js"></script>
30 |         <script src="../source/livecsseditor/editors/lceBackground.js"></script>
31 | 
32 |         <script src="../source/livecsseditor/editors/lceSize.js"></script>
33 |         <script src="../source/livecsseditor/editors/lcePosition.js"></script>
34 |         <script>
35 |             $(document).ready(function(){
36 |                 $('#livecsseditor').livecsseditor({
37 |                     pages: {
38 |                         'targets/complex.html': {
39 |                             name: 'Complex page',
40 |                             def: {
41 |                                 'h1':{
42 |                                     name: 'Heading',
43 |                                     props:['color','background-color','font-family','font-weight','text-align'],
44 |                                     labels: ['Color','Background color','Font','Font Weight','Align'],
45 |                                     description: 'Update heading here',
46 |                                     editorsConfig:{
47 |                                         "font-family": {
48 |                                             "names": ["Verdana","Arial", "Times New Roman"]
49 |                                         }
50 |                                     },
51 |                                     iconClass: "glyphicon glyphicon-star"
52 |                                 },
53 |                                 'p,span':{
54 |                                     name: 'Text',
55 |                                     props:['font-size','color'],
56 |                                     editorsConfig:{
57 |                                         "font-size": {
58 |                                             "fixedValues": ["10px","11px","12px"]
59 |                                         }
60 |                                     },
61 |                                     iconClass: "glyphicon glyphicon-font"
62 |                                 },
63 |                                 'div.resizable':{
64 |                                     name:'Resizable',
65 |                                     props:['width','height'],
66 |                                     iconClass: "glyphicon glyphicon-fullscreen"
67 |                                 },
68 |                                 'div.movable':{
69 |                                     name:'Movable',
70 |                                     props:['left','top'],
71 |                                     iconClass: "glyphicon glyphicon-fullscreen"
72 |                                 }
73 |                             }
74 |                         }
75 |                     }
76 |                 });               
77 |             });
78 |         </script>
79 |     </body>
80 | </html>


--------------------------------------------------------------------------------
/demos/standard.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Livecsseditor</title>
 5 | 
 6 |         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
 7 |         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 8 |         <link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.css">
 9 |         <link rel="stylesheet" href="../source/livecsseditor/livecsseditor-2.0.css">
10 |         <link rel="stylesheet" href="../dependencies/chosen/chosen.min.css">
11 |     </head>
12 |     <body>
13 |         <div class="page-header">
14 |             <h1>Livecsseditor <small>Standard</small></h1>
15 |         </div>        
16 |         <div class="container" id="livecsseditor"></div>
17 | 
18 |         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
19 |         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
20 |         <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
21 |         <script type="text/javascript" src="../dependencies/microtpl.js"></script>
22 |         <script type="text/javascript" src="../dependencies/jscolor/jscolor.js"></script>
23 |         <script type="text/javascript" src="../dependencies/chosen/chosen.jquery.min.js"></script>
24 | 
25 |         <!-- Editor -->
26 |         <script src="../source/livecsseditor/livecsseditor-2.0.js"></script>
27 |         <script src="../source/livecsseditor/editors/lceColor.js"></script>
28 |         <script src="../source/livecsseditor/editors/lceFont.js"></script>
29 |         <script src="../source/livecsseditor/editors/lceBackground.js"></script>
30 |         <script>
31 |             $(document).ready(function(){
32 |                 $('#livecsseditor').livecsseditor({
33 |                     pages: {
34 |                         'targets/simple.html': {
35 |                             name: 'First Page',
36 |                             def: {
37 |                                 'h1':{
38 |                                     name: 'Heading',
39 |                                     props:['color','background-color','font-family','font-weight','text-align'],
40 |                                     labels: ['Color','Background color','Font','Font Weight','Align'],
41 |                                     description: 'Update heading here',
42 |                                     editorsConfig:{
43 |                                         "font-family": {
44 |                                             "names": ["Verdana","Arial", "Times New Roman"]
45 |                                         }
46 |                                     },
47 |                                     iconClass: "glyphicon glyphicon-star"
48 |                                 },
49 |                                 'p,span':{
50 |                                     name: 'Text',
51 |                                     props:['font-size','color'],
52 |                                     labels: ['Font size','Color'],
53 |                                     editorsConfig:{
54 |                                         "font-size": {
55 |                                             "fixedValues": ["original","10px","11px","12px"]
56 |                                         }
57 |                                     },
58 |                                     iconClass: "glyphicon glyphicon-font"
59 |                                 }
60 |                             }
61 |                         }
62 |                     }
63 |                 });               
64 |             });
65 |         </script>
66 |     </body>
67 | </html>


--------------------------------------------------------------------------------
/demos/targets/complex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Complex Page</title>
 5 |         <link rel="stylesheet" type="text/css" href="css/style.css">
 6 |     </head>
 7 |     <body>
 8 |         <div id="wraper">
 9 |             <h1>Lorem ipsum</h1>
10 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis, leo ut hendrerit molestie, nunc velit commodo urna, aliquet vehicula eros quam nec neque. Etiam quis elementum justo. Proin eget nunc erat. Nam et ullamcorper est. Suspendisse tincidunt, odio in varius fringilla, nunc est pellentesque sem, a sagittis libero urna a lacus. Ut sed augue eu massa faucibus pellentesque. Nam vel elit arcu, nec fringilla tellus. Vestibulum quis volutpat elit. Aenean eu odio diam. Aenean imperdiet condimentum tortor, venenatis varius ipsum cursus viverra. Nunc commodo cursus turpis sit amet viverra. Mauris a urna a quam varius consectetur. Duis fringilla erat ac urna ultricies ac adipiscing ipsum tincidunt. Nullam sagittis consectetur lorem in commodo. Aliquam bibendum egestas mi vel lacinia. Mauris non odio odio, faucibus euismod leo.</p>
11 |             <div class="movable">
12 |             </div>
13 |             
14 |             <div class="resizable">
15 |             </div>            
16 |         </div>
17 |     </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/demos/targets/css/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #FFF;
 3 |     color: #000;
 4 |     font-family: arial, verdana;
 5 |     font-size: 12px;
 6 | }
 7 | 
 8 | #wraper{
 9 |     width: 500px;
10 |     margin: auto;
11 |     min-height: 500px;
12 | }
13 | 
14 | h1{
15 |     color: #336699;
16 |     font-size: 14px;
17 | }
18 | 
19 | p, span{
20 |     font-size: 12px;
21 |     border-color: #000;
22 | }
23 | 
24 | div.movable{
25 |     position: absolute;
26 |     z-index: 10;
27 |     left: 100px;
28 |     top: 250px;
29 |     width: 300px;
30 |     height: 200px;
31 |     text-align: center;
32 |     vertical-align: middle;
33 |     background-color: #336699;
34 | }
35 | 
36 | div.resizable{
37 |     position: absolute;
38 |     z-index: 10;
39 |     left: 460px;
40 |     top: 250px;
41 |     width: 200px;
42 |     height: 200px;
43 |     text-align: center;
44 |     vertical-align: middle;
45 |     background-image: url('../images/bg2.jpg');
46 | }


--------------------------------------------------------------------------------
/demos/targets/images/bg1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rukavina/live-css-editor/7f40d64708d85c1ec0708e677b48971fd28aba2b/demos/targets/images/bg1.jpg


--------------------------------------------------------------------------------
/demos/targets/images/bg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rukavina/live-css-editor/7f40d64708d85c1ec0708e677b48971fd28aba2b/demos/targets/images/bg2.jpg


--------------------------------------------------------------------------------
/demos/targets/images/bg3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rukavina/live-css-editor/7f40d64708d85c1ec0708e677b48971fd28aba2b/demos/targets/images/bg3.jpg


--------------------------------------------------------------------------------
/demos/targets/simple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>Simple page</title>
 5 |         <link rel="stylesheet" type="text/css" href="css/style.css">
 6 |     </head>
 7 |     <body>
 8 |         <h1>dolor sit amet</h1>
 9 |         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis, leo ut hendrerit molestie, nunc velit commodo urna, aliquet vehicula eros quam nec neque. Etiam quis elementum justo. Proin eget nunc erat. Nam et ullamcorper est. Suspendisse tincidunt, odio in varius fringilla, nunc est pellentesque sem, a sagittis libero urna a lacus. Ut sed augue eu massa faucibus pellentesque. Nam vel elit arcu, nec fringilla tellus. Vestibulum quis volutpat elit. Aenean eu odio diam. Aenean imperdiet condimentum tortor, venenatis varius ipsum cursus viverra. Nunc commodo cursus turpis sit amet viverra. Mauris a urna a quam varius consectetur. Duis fringilla erat ac urna ultricies ac adipiscing ipsum tincidunt. Nullam sagittis consectetur lorem in commodo. Aliquam bibendum egestas mi vel lacinia. Mauris non odio odio, faucibus euismod leo.</p>
10 |     </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/dependencies/chosen/chosen-sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rukavina/live-css-editor/7f40d64708d85c1ec0708e677b48971fd28aba2b/dependencies/chosen/chosen-sprite.png


--------------------------------------------------------------------------------
/dependencies/chosen/chosen-sprite@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rukavina/live-css-editor/7f40d64708d85c1ec0708e677b48971fd28aba2b/dependencies/chosen/chosen-sprite@2x.png


--------------------------------------------------------------------------------
/dependencies/chosen/chosen.css:
--------------------------------------------------------------------------------
  1 | /* @group Base */
  2 | .chosen-container {
  3 |   position: relative;
  4 |   display: inline-block;
  5 |   vertical-align: middle;
  6 |   font-size: 13px;
  7 |   zoom: 1;
  8 |   *display: inline;
  9 |   -webkit-user-select: none;
 10 |   -moz-user-select: none;
 11 |   user-select: none;
 12 | }
 13 | .chosen-container .chosen-drop {
 14 |   position: absolute;
 15 |   top: 100%;
 16 |   left: -9999px;
 17 |   z-index: 1010;
 18 |   -webkit-box-sizing: border-box;
 19 |   -moz-box-sizing: border-box;
 20 |   box-sizing: border-box;
 21 |   width: 100%;
 22 |   border: 1px solid #aaa;
 23 |   border-top: 0;
 24 |   background: #fff;
 25 |   box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
 26 | }
 27 | .chosen-container.chosen-with-drop .chosen-drop {
 28 |   left: 0;
 29 | }
 30 | .chosen-container a {
 31 |   cursor: pointer;
 32 | }
 33 | 
 34 | /* @end */
 35 | /* @group Single Chosen */
 36 | .chosen-container-single .chosen-single {
 37 |   position: relative;
 38 |   display: block;
 39 |   overflow: hidden;
 40 |   padding: 0 0 0 8px;
 41 |   height: 23px;
 42 |   border: 1px solid #aaa;
 43 |   border-radius: 5px;
 44 |   background-color: #fff;
 45 |   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
 46 |   background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
 47 |   background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
 48 |   background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
 49 |   background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
 50 |   background-clip: padding-box;
 51 |   box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
 52 |   color: #444;
 53 |   text-decoration: none;
 54 |   white-space: nowrap;
 55 |   line-height: 24px;
 56 | }
 57 | .chosen-container-single .chosen-default {
 58 |   color: #999;
 59 | }
 60 | .chosen-container-single .chosen-single span {
 61 |   display: block;
 62 |   overflow: hidden;
 63 |   margin-right: 26px;
 64 |   text-overflow: ellipsis;
 65 |   white-space: nowrap;
 66 | }
 67 | .chosen-container-single .chosen-single-with-deselect span {
 68 |   margin-right: 38px;
 69 | }
 70 | .chosen-container-single .chosen-single abbr {
 71 |   position: absolute;
 72 |   top: 6px;
 73 |   right: 26px;
 74 |   display: block;
 75 |   width: 12px;
 76 |   height: 12px;
 77 |   background: url('chosen-sprite.png') -42px 1px no-repeat;
 78 |   font-size: 1px;
 79 | }
 80 | .chosen-container-single .chosen-single abbr:hover {
 81 |   background-position: -42px -10px;
 82 | }
 83 | .chosen-container-single.chosen-disabled .chosen-single abbr:hover {
 84 |   background-position: -42px -10px;
 85 | }
 86 | .chosen-container-single .chosen-single div {
 87 |   position: absolute;
 88 |   top: 0;
 89 |   right: 0;
 90 |   display: block;
 91 |   width: 18px;
 92 |   height: 100%;
 93 | }
 94 | .chosen-container-single .chosen-single div b {
 95 |   display: block;
 96 |   width: 100%;
 97 |   height: 100%;
 98 |   background: url('chosen-sprite.png') no-repeat 0px 2px;
 99 | }
100 | .chosen-container-single .chosen-search {
101 |   position: relative;
102 |   z-index: 1010;
103 |   margin: 0;
104 |   padding: 3px 4px;
105 |   white-space: nowrap;
106 | }
107 | .chosen-container-single .chosen-search input[type="text"] {
108 |   -webkit-box-sizing: border-box;
109 |   -moz-box-sizing: border-box;
110 |   box-sizing: border-box;
111 |   margin: 1px 0;
112 |   padding: 4px 20px 4px 5px;
113 |   width: 100%;
114 |   height: auto;
115 |   outline: 0;
116 |   border: 1px solid #aaa;
117 |   background: white url('chosen-sprite.png') no-repeat 100% -20px;
118 |   background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
119 |   background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
120 |   background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
121 |   background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
122 |   background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
123 |   font-size: 1em;
124 |   font-family: sans-serif;
125 |   line-height: normal;
126 |   border-radius: 0;
127 | }
128 | .chosen-container-single .chosen-drop {
129 |   margin-top: -1px;
130 |   border-radius: 0 0 4px 4px;
131 |   background-clip: padding-box;
132 | }
133 | .chosen-container-single.chosen-container-single-nosearch .chosen-search {
134 |   position: absolute;
135 |   left: -9999px;
136 | }
137 | 
138 | /* @end */
139 | /* @group Results */
140 | .chosen-container .chosen-results {
141 |   position: relative;
142 |   overflow-x: hidden;
143 |   overflow-y: auto;
144 |   margin: 0 4px 4px 0;
145 |   padding: 0 0 0 4px;
146 |   max-height: 240px;
147 |   -webkit-overflow-scrolling: touch;
148 | }
149 | .chosen-container .chosen-results li {
150 |   display: none;
151 |   margin: 0;
152 |   padding: 5px 6px;
153 |   list-style: none;
154 |   line-height: 15px;
155 | }
156 | .chosen-container .chosen-results li.active-result {
157 |   display: list-item;
158 |   cursor: pointer;
159 | }
160 | .chosen-container .chosen-results li.disabled-result {
161 |   display: list-item;
162 |   color: #ccc;
163 |   cursor: default;
164 | }
165 | .chosen-container .chosen-results li.highlighted {
166 |   background-color: #3875d7;
167 |   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
168 |   background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
169 |   background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
170 |   background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
171 |   background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
172 |   color: #fff;
173 | }
174 | .chosen-container .chosen-results li.no-results {
175 |   display: list-item;
176 |   background: #f4f4f4;
177 | }
178 | .chosen-container .chosen-results li.group-result {
179 |   display: list-item;
180 |   font-weight: bold;
181 |   cursor: default;
182 | }
183 | .chosen-container .chosen-results li.group-option {
184 |   padding-left: 15px;
185 | }
186 | .chosen-container .chosen-results li em {
187 |   font-style: normal;
188 |   text-decoration: underline;
189 | }
190 | 
191 | /* @end */
192 | /* @group Multi Chosen */
193 | .chosen-container-multi .chosen-choices {
194 |   position: relative;
195 |   overflow: hidden;
196 |   -webkit-box-sizing: border-box;
197 |   -moz-box-sizing: border-box;
198 |   box-sizing: border-box;
199 |   margin: 0;
200 |   padding: 0;
201 |   width: 100%;
202 |   height: auto !important;
203 |   height: 1%;
204 |   border: 1px solid #aaa;
205 |   background-color: #fff;
206 |   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
207 |   background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
208 |   background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
209 |   background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
210 |   background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
211 |   cursor: text;
212 | }
213 | .chosen-container-multi .chosen-choices li {
214 |   float: left;
215 |   list-style: none;
216 | }
217 | .chosen-container-multi .chosen-choices li.search-field {
218 |   margin: 0;
219 |   padding: 0;
220 |   white-space: nowrap;
221 | }
222 | .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
223 |   margin: 1px 0;
224 |   padding: 5px;
225 |   height: 15px;
226 |   outline: 0;
227 |   border: 0 !important;
228 |   background: transparent !important;
229 |   box-shadow: none;
230 |   color: #666;
231 |   font-size: 100%;
232 |   font-family: sans-serif;
233 |   line-height: normal;
234 |   border-radius: 0;
235 | }
236 | .chosen-container-multi .chosen-choices li.search-field .default {
237 |   color: #999;
238 | }
239 | .chosen-container-multi .chosen-choices li.search-choice {
240 |   position: relative;
241 |   margin: 3px 0 3px 5px;
242 |   padding: 3px 20px 3px 5px;
243 |   border: 1px solid #aaa;
244 |   border-radius: 3px;
245 |   background-color: #e4e4e4;
246 |   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
247 |   background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
248 |   background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
249 |   background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
250 |   background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
251 |   background-clip: padding-box;
252 |   box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
253 |   color: #333;
254 |   line-height: 13px;
255 |   cursor: default;
256 | }
257 | .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
258 |   position: absolute;
259 |   top: 4px;
260 |   right: 3px;
261 |   display: block;
262 |   width: 12px;
263 |   height: 12px;
264 |   background: url('chosen-sprite.png') -42px 1px no-repeat;
265 |   font-size: 1px;
266 | }
267 | .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
268 |   background-position: -42px -10px;
269 | }
270 | .chosen-container-multi .chosen-choices li.search-choice-disabled {
271 |   padding-right: 5px;
272 |   border: 1px solid #ccc;
273 |   background-color: #e4e4e4;
274 |   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
275 |   background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
276 |   background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
277 |   background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
278 |   background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
279 |   color: #666;
280 | }
281 | .chosen-container-multi .chosen-choices li.search-choice-focus {
282 |   background: #d4d4d4;
283 | }
284 | .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
285 |   background-position: -42px -10px;
286 | }
287 | .chosen-container-multi .chosen-results {
288 |   margin: 0;
289 |   padding: 0;
290 | }
291 | .chosen-container-multi .chosen-drop .result-selected {
292 |   display: list-item;
293 |   color: #ccc;
294 |   cursor: default;
295 | }
296 | 
297 | /* @end */
298 | /* @group Active  */
299 | .chosen-container-active .chosen-single {
300 |   border: 1px solid #5897fb;
301 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
302 | }
303 | .chosen-container-active.chosen-with-drop .chosen-single {
304 |   border: 1px solid #aaa;
305 |   -moz-border-radius-bottomright: 0;
306 |   border-bottom-right-radius: 0;
307 |   -moz-border-radius-bottomleft: 0;
308 |   border-bottom-left-radius: 0;
309 |   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
310 |   background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
311 |   background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
312 |   background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
313 |   background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
314 |   box-shadow: 0 1px 0 #fff inset;
315 | }
316 | .chosen-container-active.chosen-with-drop .chosen-single div {
317 |   border-left: none;
318 |   background: transparent;
319 | }
320 | .chosen-container-active.chosen-with-drop .chosen-single div b {
321 |   background-position: -18px 2px;
322 | }
323 | .chosen-container-active .chosen-choices {
324 |   border: 1px solid #5897fb;
325 |   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
326 | }
327 | .chosen-container-active .chosen-choices li.search-field input[type="text"] {
328 |   color: #111 !important;
329 | }
330 | 
331 | /* @end */
332 | /* @group Disabled Support */
333 | .chosen-disabled {
334 |   opacity: 0.5 !important;
335 |   cursor: default;
336 | }
337 | .chosen-disabled .chosen-single {
338 |   cursor: default;
339 | }
340 | .chosen-disabled .chosen-choices .search-choice .search-choice-close {
341 |   cursor: default;
342 | }
343 | 
344 | /* @end */
345 | /* @group Right to Left */
346 | .chosen-rtl {
347 |   text-align: right;
348 | }
349 | .chosen-rtl .chosen-single {
350 |   overflow: visible;
351 |   padding: 0 8px 0 0;
352 | }
353 | .chosen-rtl .chosen-single span {
354 |   margin-right: 0;
355 |   margin-left: 26px;
356 |   direction: rtl;
357 | }
358 | .chosen-rtl .chosen-single-with-deselect span {
359 |   margin-left: 38px;
360 | }
361 | .chosen-rtl .chosen-single div {
362 |   right: auto;
363 |   left: 3px;
364 | }
365 | .chosen-rtl .chosen-single abbr {
366 |   right: auto;
367 |   left: 26px;
368 | }
369 | .chosen-rtl .chosen-choices li {
370 |   float: right;
371 | }
372 | .chosen-rtl .chosen-choices li.search-field input[type="text"] {
373 |   direction: rtl;
374 | }
375 | .chosen-rtl .chosen-choices li.search-choice {
376 |   margin: 3px 5px 3px 0;
377 |   padding: 3px 5px 3px 19px;
378 | }
379 | .chosen-rtl .chosen-choices li.search-choice .search-choice-close {
380 |   right: auto;
381 |   left: 4px;
382 | }
383 | .chosen-rtl.chosen-container-single-nosearch .chosen-search,
384 | .chosen-rtl .chosen-drop {
385 |   left: 9999px;
386 | }
387 | .chosen-rtl.chosen-container-single .chosen-results {
388 |   margin: 0 0 4px 4px;
389 |   padding: 0 4px 0 0;
390 | }
391 | .chosen-rtl .chosen-results li.group-option {
392 |   padding-right: 15px;
393 |   padding-left: 0;
394 | }
395 | .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
396 |   border-right: none;
397 | }
398 | .chosen-rtl .chosen-search input[type="text"] {
399 |   padding: 4px 5px 4px 20px;
400 |   background: white url('chosen-sprite.png') no-repeat -30px -20px;
401 |   background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
402 |   background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
403 |   background: url('chosen-sprite.png') no-repeat -30px -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
404 |   background: url('chosen-sprite.png') no-repeat -30px -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
405 |   background: url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
406 |   direction: rtl;
407 | }
408 | .chosen-rtl.chosen-container-single .chosen-single div b {
409 |   background-position: 6px 2px;
410 | }
411 | .chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
412 |   background-position: -12px 2px;
413 | }
414 | 
415 | /* @end */
416 | /* @group Retina compatibility */
417 | @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
418 |   .chosen-rtl .chosen-search input[type="text"],
419 |   .chosen-container-single .chosen-single abbr,
420 |   .chosen-container-single .chosen-single div b,
421 |   .chosen-container-single .chosen-search input[type="text"],
422 |   .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
423 |   .chosen-container .chosen-results-scroll-down span,
424 |   .chosen-container .chosen-results-scroll-up span {
425 |     background-image: url('chosen-sprite@2x.png') !important;
426 |     background-size: 52px 37px !important;
427 |     background-repeat: no-repeat !important;
428 |   }
429 | }
430 | /* @end */
431 | 


--------------------------------------------------------------------------------
/dependencies/chosen/chosen.jquery.min.js:
--------------------------------------------------------------------------------
1 | /* Chosen v1.0.0 | (c) 2011-2013 by Harvest | MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md */
2 | !function(){var a,AbstractChosen,Chosen,SelectParser,b,c={}.hasOwnProperty,d=function(a,b){function d(){this.constructor=a}for(var e in b)c.call(b,e)&&(a[e]=b[e]);return d.prototype=b.prototype,a.prototype=new d,a.__super__=b.prototype,a};SelectParser=function(){function SelectParser(){this.options_index=0,this.parsed=[]}return SelectParser.prototype.add_node=function(a){return"OPTGROUP"===a.nodeName.toUpperCase()?this.add_group(a):this.add_option(a)},SelectParser.prototype.add_group=function(a){var b,c,d,e,f,g;for(b=this.parsed.length,this.parsed.push({array_index:b,group:!0,label:this.escapeExpression(a.label),children:0,disabled:a.disabled}),f=a.childNodes,g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push(this.add_option(c,b,a.disabled));return g},SelectParser.prototype.add_option=function(a,b,c){return"OPTION"===a.nodeName.toUpperCase()?(""!==a.text?(null!=b&&(this.parsed[b].children+=1),this.parsed.push({array_index:this.parsed.length,options_index:this.options_index,value:a.value,text:a.text,html:a.innerHTML,selected:a.selected,disabled:c===!0?c:a.disabled,group_array_index:b,classes:a.className,style:a.style.cssText})):this.parsed.push({array_index:this.parsed.length,options_index:this.options_index,empty:!0}),this.options_index+=1):void 0},SelectParser.prototype.escapeExpression=function(a){var b,c;return null==a||a===!1?"":/[\&\<\>\"\'\`]/.test(a)?(b={"<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;","`":"&#x60;"},c=/&(?!\w+;)|[\<\>\"\'\`]/g,a.replace(c,function(a){return b[a]||"&amp;"})):a},SelectParser}(),SelectParser.select_to_array=function(a){var b,c,d,e,f;for(c=new SelectParser,f=a.childNodes,d=0,e=f.length;e>d;d++)b=f[d],c.add_node(b);return c.parsed},AbstractChosen=function(){function AbstractChosen(a,b){this.form_field=a,this.options=null!=b?b:{},AbstractChosen.browser_is_supported()&&(this.is_multiple=this.form_field.multiple,this.set_default_text(),this.set_default_values(),this.setup(),this.set_up_html(),this.register_observers())}return AbstractChosen.prototype.set_default_values=function(){var a=this;return this.click_test_action=function(b){return a.test_active_click(b)},this.activate_action=function(b){return a.activate_field(b)},this.active_field=!1,this.mouse_on_container=!1,this.results_showing=!1,this.result_highlighted=null,this.result_single_selected=null,this.allow_single_deselect=null!=this.options.allow_single_deselect&&null!=this.form_field.options[0]&&""===this.form_field.options[0].text?this.options.allow_single_deselect:!1,this.disable_search_threshold=this.options.disable_search_threshold||0,this.disable_search=this.options.disable_search||!1,this.enable_split_word_search=null!=this.options.enable_split_word_search?this.options.enable_split_word_search:!0,this.group_search=null!=this.options.group_search?this.options.group_search:!0,this.search_contains=this.options.search_contains||!1,this.single_backstroke_delete=null!=this.options.single_backstroke_delete?this.options.single_backstroke_delete:!0,this.max_selected_options=this.options.max_selected_options||1/0,this.inherit_select_classes=this.options.inherit_select_classes||!1,this.display_selected_options=null!=this.options.display_selected_options?this.options.display_selected_options:!0,this.display_disabled_options=null!=this.options.display_disabled_options?this.options.display_disabled_options:!0},AbstractChosen.prototype.set_default_text=function(){return this.default_text=this.form_field.getAttribute("data-placeholder")?this.form_field.getAttribute("data-placeholder"):this.is_multiple?this.options.placeholder_text_multiple||this.options.placeholder_text||AbstractChosen.default_multiple_text:this.options.placeholder_text_single||this.options.placeholder_text||AbstractChosen.default_single_text,this.results_none_found=this.form_field.getAttribute("data-no_results_text")||this.options.no_results_text||AbstractChosen.default_no_result_text},AbstractChosen.prototype.mouse_enter=function(){return this.mouse_on_container=!0},AbstractChosen.prototype.mouse_leave=function(){return this.mouse_on_container=!1},AbstractChosen.prototype.input_focus=function(){var a=this;if(this.is_multiple){if(!this.active_field)return setTimeout(function(){return a.container_mousedown()},50)}else if(!this.active_field)return this.activate_field()},AbstractChosen.prototype.input_blur=function(){var a=this;return this.mouse_on_container?void 0:(this.active_field=!1,setTimeout(function(){return a.blur_test()},100))},AbstractChosen.prototype.results_option_build=function(a){var b,c,d,e,f;for(b="",f=this.results_data,d=0,e=f.length;e>d;d++)c=f[d],b+=c.group?this.result_add_group(c):this.result_add_option(c),(null!=a?a.first:void 0)&&(c.selected&&this.is_multiple?this.choice_build(c):c.selected&&!this.is_multiple&&this.single_set_selected_text(c.text));return b},AbstractChosen.prototype.result_add_option=function(a){var b,c;return a.search_match?this.include_option_in_results(a)?(b=[],a.disabled||a.selected&&this.is_multiple||b.push("active-result"),!a.disabled||a.selected&&this.is_multiple||b.push("disabled-result"),a.selected&&b.push("result-selected"),null!=a.group_array_index&&b.push("group-option"),""!==a.classes&&b.push(a.classes),c=""!==a.style.cssText?' style="'+a.style+'"':"",'<li class="'+b.join(" ")+'"'+c+' data-option-array-index="'+a.array_index+'">'+a.search_text+"</li>"):"":""},AbstractChosen.prototype.result_add_group=function(a){return a.search_match||a.group_match?a.active_options>0?'<li class="group-result">'+a.search_text+"</li>":"":""},AbstractChosen.prototype.results_update_field=function(){return this.set_default_text(),this.is_multiple||this.results_reset_cleanup(),this.result_clear_highlight(),this.result_single_selected=null,this.results_build(),this.results_showing?this.winnow_results():void 0},AbstractChosen.prototype.results_toggle=function(){return this.results_showing?this.results_hide():this.results_show()},AbstractChosen.prototype.results_search=function(){return this.results_showing?this.winnow_results():this.results_show()},AbstractChosen.prototype.winnow_results=function(){var a,b,c,d,e,f,g,h,i,j,k,l,m;for(this.no_results_clear(),e=0,g=this.get_search_text(),a=g.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&"),d=this.search_contains?"":"^",c=new RegExp(d+a,"i"),j=new RegExp(a,"i"),m=this.results_data,k=0,l=m.length;l>k;k++)b=m[k],b.search_match=!1,f=null,this.include_option_in_results(b)&&(b.group&&(b.group_match=!1,b.active_options=0),null!=b.group_array_index&&this.results_data[b.group_array_index]&&(f=this.results_data[b.group_array_index],0===f.active_options&&f.search_match&&(e+=1),f.active_options+=1),(!b.group||this.group_search)&&(b.search_text=b.group?b.label:b.html,b.search_match=this.search_string_match(b.search_text,c),b.search_match&&!b.group&&(e+=1),b.search_match?(g.length&&(h=b.search_text.search(j),i=b.search_text.substr(0,h+g.length)+"</em>"+b.search_text.substr(h+g.length),b.search_text=i.substr(0,h)+"<em>"+i.substr(h)),null!=f&&(f.group_match=!0)):null!=b.group_array_index&&this.results_data[b.group_array_index].search_match&&(b.search_match=!0)));return this.result_clear_highlight(),1>e&&g.length?(this.update_results_content(""),this.no_results(g)):(this.update_results_content(this.results_option_build()),this.winnow_results_set_highlight())},AbstractChosen.prototype.search_string_match=function(a,b){var c,d,e,f;if(b.test(a))return!0;if(this.enable_split_word_search&&(a.indexOf(" ")>=0||0===a.indexOf("["))&&(d=a.replace(/\[|\]/g,"").split(" "),d.length))for(e=0,f=d.length;f>e;e++)if(c=d[e],b.test(c))return!0},AbstractChosen.prototype.choices_count=function(){var a,b,c,d;if(null!=this.selected_option_count)return this.selected_option_count;for(this.selected_option_count=0,d=this.form_field.options,b=0,c=d.length;c>b;b++)a=d[b],a.selected&&(this.selected_option_count+=1);return this.selected_option_count},AbstractChosen.prototype.choices_click=function(a){return a.preventDefault(),this.results_showing||this.is_disabled?void 0:this.results_show()},AbstractChosen.prototype.keyup_checker=function(a){var b,c;switch(b=null!=(c=a.which)?c:a.keyCode,this.search_field_scale(),b){case 8:if(this.is_multiple&&this.backstroke_length<1&&this.choices_count()>0)return this.keydown_backstroke();if(!this.pending_backstroke)return this.result_clear_highlight(),this.results_search();break;case 13:if(a.preventDefault(),this.results_showing)return this.result_select(a);break;case 27:return this.results_showing&&this.results_hide(),!0;case 9:case 38:case 40:case 16:case 91:case 17:break;default:return this.results_search()}},AbstractChosen.prototype.container_width=function(){return null!=this.options.width?this.options.width:""+this.form_field.offsetWidth+"px"},AbstractChosen.prototype.include_option_in_results=function(a){return this.is_multiple&&!this.display_selected_options&&a.selected?!1:!this.display_disabled_options&&a.disabled?!1:a.empty?!1:!0},AbstractChosen.browser_is_supported=function(){return"Microsoft Internet Explorer"===window.navigator.appName?document.documentMode>=8:/iP(od|hone)/i.test(window.navigator.userAgent)?!1:/Android/i.test(window.navigator.userAgent)&&/Mobile/i.test(window.navigator.userAgent)?!1:!0},AbstractChosen.default_multiple_text="Select Some Options",AbstractChosen.default_single_text="Select an Option",AbstractChosen.default_no_result_text="No results match",AbstractChosen}(),a=jQuery,a.fn.extend({chosen:function(b){return AbstractChosen.browser_is_supported()?this.each(function(){var c,d;c=a(this),d=c.data("chosen"),"destroy"===b&&d?d.destroy():d||c.data("chosen",new Chosen(this,b))}):this}}),Chosen=function(c){function Chosen(){return b=Chosen.__super__.constructor.apply(this,arguments)}return d(Chosen,c),Chosen.prototype.setup=function(){return this.form_field_jq=a(this.form_field),this.current_selectedIndex=this.form_field.selectedIndex,this.is_rtl=this.form_field_jq.hasClass("chosen-rtl")},Chosen.prototype.set_up_html=function(){var b,c;return b=["chosen-container"],b.push("chosen-container-"+(this.is_multiple?"multi":"single")),this.inherit_select_classes&&this.form_field.className&&b.push(this.form_field.className),this.is_rtl&&b.push("chosen-rtl"),c={"class":b.join(" "),style:"width: "+this.container_width()+";",title:this.form_field.title},this.form_field.id.length&&(c.id=this.form_field.id.replace(/[^\w]/g,"_")+"_chosen"),this.container=a("<div />",c),this.is_multiple?this.container.html('<ul class="chosen-choices"><li class="search-field"><input type="text" value="'+this.default_text+'" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>'):this.container.html('<a class="chosen-single chosen-default" tabindex="-1"><span>'+this.default_text+'</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" /></div><ul class="chosen-results"></ul></div>'),this.form_field_jq.hide().after(this.container),this.dropdown=this.container.find("div.chosen-drop").first(),this.search_field=this.container.find("input").first(),this.search_results=this.container.find("ul.chosen-results").first(),this.search_field_scale(),this.search_no_results=this.container.find("li.no-results").first(),this.is_multiple?(this.search_choices=this.container.find("ul.chosen-choices").first(),this.search_container=this.container.find("li.search-field").first()):(this.search_container=this.container.find("div.chosen-search").first(),this.selected_item=this.container.find(".chosen-single").first()),this.results_build(),this.set_tab_index(),this.set_label_behavior(),this.form_field_jq.trigger("chosen:ready",{chosen:this})},Chosen.prototype.register_observers=function(){var a=this;return this.container.bind("mousedown.chosen",function(b){a.container_mousedown(b)}),this.container.bind("mouseup.chosen",function(b){a.container_mouseup(b)}),this.container.bind("mouseenter.chosen",function(b){a.mouse_enter(b)}),this.container.bind("mouseleave.chosen",function(b){a.mouse_leave(b)}),this.search_results.bind("mouseup.chosen",function(b){a.search_results_mouseup(b)}),this.search_results.bind("mouseover.chosen",function(b){a.search_results_mouseover(b)}),this.search_results.bind("mouseout.chosen",function(b){a.search_results_mouseout(b)}),this.search_results.bind("mousewheel.chosen DOMMouseScroll.chosen",function(b){a.search_results_mousewheel(b)}),this.form_field_jq.bind("chosen:updated.chosen",function(b){a.results_update_field(b)}),this.form_field_jq.bind("chosen:activate.chosen",function(b){a.activate_field(b)}),this.form_field_jq.bind("chosen:open.chosen",function(b){a.container_mousedown(b)}),this.search_field.bind("blur.chosen",function(b){a.input_blur(b)}),this.search_field.bind("keyup.chosen",function(b){a.keyup_checker(b)}),this.search_field.bind("keydown.chosen",function(b){a.keydown_checker(b)}),this.search_field.bind("focus.chosen",function(b){a.input_focus(b)}),this.is_multiple?this.search_choices.bind("click.chosen",function(b){a.choices_click(b)}):this.container.bind("click.chosen",function(a){a.preventDefault()})},Chosen.prototype.destroy=function(){return a(document).unbind("click.chosen",this.click_test_action),this.search_field[0].tabIndex&&(this.form_field_jq[0].tabIndex=this.search_field[0].tabIndex),this.container.remove(),this.form_field_jq.removeData("chosen"),this.form_field_jq.show()},Chosen.prototype.search_field_disabled=function(){return this.is_disabled=this.form_field_jq[0].disabled,this.is_disabled?(this.container.addClass("chosen-disabled"),this.search_field[0].disabled=!0,this.is_multiple||this.selected_item.unbind("focus.chosen",this.activate_action),this.close_field()):(this.container.removeClass("chosen-disabled"),this.search_field[0].disabled=!1,this.is_multiple?void 0:this.selected_item.bind("focus.chosen",this.activate_action))},Chosen.prototype.container_mousedown=function(b){return this.is_disabled||(b&&"mousedown"===b.type&&!this.results_showing&&b.preventDefault(),null!=b&&a(b.target).hasClass("search-choice-close"))?void 0:(this.active_field?this.is_multiple||!b||a(b.target)[0]!==this.selected_item[0]&&!a(b.target).parents("a.chosen-single").length||(b.preventDefault(),this.results_toggle()):(this.is_multiple&&this.search_field.val(""),a(document).bind("click.chosen",this.click_test_action),this.results_show()),this.activate_field())},Chosen.prototype.container_mouseup=function(a){return"ABBR"!==a.target.nodeName||this.is_disabled?void 0:this.results_reset(a)},Chosen.prototype.search_results_mousewheel=function(a){var b,c,d;return b=-(null!=(c=a.originalEvent)?c.wheelDelta:void 0)||(null!=(d=a.originialEvent)?d.detail:void 0),null!=b?(a.preventDefault(),"DOMMouseScroll"===a.type&&(b=40*b),this.search_results.scrollTop(b+this.search_results.scrollTop())):void 0},Chosen.prototype.blur_test=function(){return!this.active_field&&this.container.hasClass("chosen-container-active")?this.close_field():void 0},Chosen.prototype.close_field=function(){return a(document).unbind("click.chosen",this.click_test_action),this.active_field=!1,this.results_hide(),this.container.removeClass("chosen-container-active"),this.clear_backstroke(),this.show_search_field_default(),this.search_field_scale()},Chosen.prototype.activate_field=function(){return this.container.addClass("chosen-container-active"),this.active_field=!0,this.search_field.val(this.search_field.val()),this.search_field.focus()},Chosen.prototype.test_active_click=function(b){return this.container.is(a(b.target).closest(".chosen-container"))?this.active_field=!0:this.close_field()},Chosen.prototype.results_build=function(){return this.parsing=!0,this.selected_option_count=null,this.results_data=SelectParser.select_to_array(this.form_field),this.is_multiple?this.search_choices.find("li.search-choice").remove():this.is_multiple||(this.single_set_selected_text(),this.disable_search||this.form_field.options.length<=this.disable_search_threshold?(this.search_field[0].readOnly=!0,this.container.addClass("chosen-container-single-nosearch")):(this.search_field[0].readOnly=!1,this.container.removeClass("chosen-container-single-nosearch"))),this.update_results_content(this.results_option_build({first:!0})),this.search_field_disabled(),this.show_search_field_default(),this.search_field_scale(),this.parsing=!1},Chosen.prototype.result_do_highlight=function(a){var b,c,d,e,f;if(a.length){if(this.result_clear_highlight(),this.result_highlight=a,this.result_highlight.addClass("highlighted"),d=parseInt(this.search_results.css("maxHeight"),10),f=this.search_results.scrollTop(),e=d+f,c=this.result_highlight.position().top+this.search_results.scrollTop(),b=c+this.result_highlight.outerHeight(),b>=e)return this.search_results.scrollTop(b-d>0?b-d:0);if(f>c)return this.search_results.scrollTop(c)}},Chosen.prototype.result_clear_highlight=function(){return this.result_highlight&&this.result_highlight.removeClass("highlighted"),this.result_highlight=null},Chosen.prototype.results_show=function(){return this.is_multiple&&this.max_selected_options<=this.choices_count()?(this.form_field_jq.trigger("chosen:maxselected",{chosen:this}),!1):(this.container.addClass("chosen-with-drop"),this.form_field_jq.trigger("chosen:showing_dropdown",{chosen:this}),this.results_showing=!0,this.search_field.focus(),this.search_field.val(this.search_field.val()),this.winnow_results())},Chosen.prototype.update_results_content=function(a){return this.search_results.html(a)},Chosen.prototype.results_hide=function(){return this.results_showing&&(this.result_clear_highlight(),this.container.removeClass("chosen-with-drop"),this.form_field_jq.trigger("chosen:hiding_dropdown",{chosen:this})),this.results_showing=!1},Chosen.prototype.set_tab_index=function(){var a;return this.form_field.tabIndex?(a=this.form_field.tabIndex,this.form_field.tabIndex=-1,this.search_field[0].tabIndex=a):void 0},Chosen.prototype.set_label_behavior=function(){var b=this;return this.form_field_label=this.form_field_jq.parents("label"),!this.form_field_label.length&&this.form_field.id.length&&(this.form_field_label=a("label[for='"+this.form_field.id+"']")),this.form_field_label.length>0?this.form_field_label.bind("click.chosen",function(a){return b.is_multiple?b.container_mousedown(a):b.activate_field()}):void 0},Chosen.prototype.show_search_field_default=function(){return this.is_multiple&&this.choices_count()<1&&!this.active_field?(this.search_field.val(this.default_text),this.search_field.addClass("default")):(this.search_field.val(""),this.search_field.removeClass("default"))},Chosen.prototype.search_results_mouseup=function(b){var c;return c=a(b.target).hasClass("active-result")?a(b.target):a(b.target).parents(".active-result").first(),c.length?(this.result_highlight=c,this.result_select(b),this.search_field.focus()):void 0},Chosen.prototype.search_results_mouseover=function(b){var c;return c=a(b.target).hasClass("active-result")?a(b.target):a(b.target).parents(".active-result").first(),c?this.result_do_highlight(c):void 0},Chosen.prototype.search_results_mouseout=function(b){return a(b.target).hasClass("active-result")?this.result_clear_highlight():void 0},Chosen.prototype.choice_build=function(b){var c,d,e=this;return c=a("<li />",{"class":"search-choice"}).html("<span>"+b.html+"</span>"),b.disabled?c.addClass("search-choice-disabled"):(d=a("<a />",{"class":"search-choice-close","data-option-array-index":b.array_index}),d.bind("click.chosen",function(a){return e.choice_destroy_link_click(a)}),c.append(d)),this.search_container.before(c)},Chosen.prototype.choice_destroy_link_click=function(b){return b.preventDefault(),b.stopPropagation(),this.is_disabled?void 0:this.choice_destroy(a(b.target))},Chosen.prototype.choice_destroy=function(a){return this.result_deselect(a[0].getAttribute("data-option-array-index"))?(this.show_search_field_default(),this.is_multiple&&this.choices_count()>0&&this.search_field.val().length<1&&this.results_hide(),a.parents("li").first().remove(),this.search_field_scale()):void 0},Chosen.prototype.results_reset=function(){return this.form_field.options[0].selected=!0,this.selected_option_count=null,this.single_set_selected_text(),this.show_search_field_default(),this.results_reset_cleanup(),this.form_field_jq.trigger("change"),this.active_field?this.results_hide():void 0},Chosen.prototype.results_reset_cleanup=function(){return this.current_selectedIndex=this.form_field.selectedIndex,this.selected_item.find("abbr").remove()},Chosen.prototype.result_select=function(a){var b,c,d;return this.result_highlight?(b=this.result_highlight,this.result_clear_highlight(),this.is_multiple&&this.max_selected_options<=this.choices_count()?(this.form_field_jq.trigger("chosen:maxselected",{chosen:this}),!1):(this.is_multiple?b.removeClass("active-result"):(this.result_single_selected&&(this.result_single_selected.removeClass("result-selected"),d=this.result_single_selected[0].getAttribute("data-option-array-index"),this.results_data[d].selected=!1),this.result_single_selected=b),b.addClass("result-selected"),c=this.results_data[b[0].getAttribute("data-option-array-index")],c.selected=!0,this.form_field.options[c.options_index].selected=!0,this.selected_option_count=null,this.is_multiple?this.choice_build(c):this.single_set_selected_text(c.text),(a.metaKey||a.ctrlKey)&&this.is_multiple||this.results_hide(),this.search_field.val(""),(this.is_multiple||this.form_field.selectedIndex!==this.current_selectedIndex)&&this.form_field_jq.trigger("change",{selected:this.form_field.options[c.options_index].value}),this.current_selectedIndex=this.form_field.selectedIndex,this.search_field_scale())):void 0},Chosen.prototype.single_set_selected_text=function(a){return null==a&&(a=this.default_text),a===this.default_text?this.selected_item.addClass("chosen-default"):(this.single_deselect_control_build(),this.selected_item.removeClass("chosen-default")),this.selected_item.find("span").text(a)},Chosen.prototype.result_deselect=function(a){var b;return b=this.results_data[a],this.form_field.options[b.options_index].disabled?!1:(b.selected=!1,this.form_field.options[b.options_index].selected=!1,this.selected_option_count=null,this.result_clear_highlight(),this.results_showing&&this.winnow_results(),this.form_field_jq.trigger("change",{deselected:this.form_field.options[b.options_index].value}),this.search_field_scale(),!0)},Chosen.prototype.single_deselect_control_build=function(){return this.allow_single_deselect?(this.selected_item.find("abbr").length||this.selected_item.find("span").first().after('<abbr class="search-choice-close"></abbr>'),this.selected_item.addClass("chosen-single-with-deselect")):void 0},Chosen.prototype.get_search_text=function(){return this.search_field.val()===this.default_text?"":a("<div/>").text(a.trim(this.search_field.val())).html()},Chosen.prototype.winnow_results_set_highlight=function(){var a,b;return b=this.is_multiple?[]:this.search_results.find(".result-selected.active-result"),a=b.length?b.first():this.search_results.find(".active-result").first(),null!=a?this.result_do_highlight(a):void 0},Chosen.prototype.no_results=function(b){var c;return c=a('<li class="no-results">'+this.results_none_found+' "<span></span>"</li>'),c.find("span").first().html(b),this.search_results.append(c)},Chosen.prototype.no_results_clear=function(){return this.search_results.find(".no-results").remove()},Chosen.prototype.keydown_arrow=function(){var a;return this.results_showing&&this.result_highlight?(a=this.result_highlight.nextAll("li.active-result").first())?this.result_do_highlight(a):void 0:this.results_show()},Chosen.prototype.keyup_arrow=function(){var a;return this.results_showing||this.is_multiple?this.result_highlight?(a=this.result_highlight.prevAll("li.active-result"),a.length?this.result_do_highlight(a.first()):(this.choices_count()>0&&this.results_hide(),this.result_clear_highlight())):void 0:this.results_show()},Chosen.prototype.keydown_backstroke=function(){var a;return this.pending_backstroke?(this.choice_destroy(this.pending_backstroke.find("a").first()),this.clear_backstroke()):(a=this.search_container.siblings("li.search-choice").last(),a.length&&!a.hasClass("search-choice-disabled")?(this.pending_backstroke=a,this.single_backstroke_delete?this.keydown_backstroke():this.pending_backstroke.addClass("search-choice-focus")):void 0)},Chosen.prototype.clear_backstroke=function(){return this.pending_backstroke&&this.pending_backstroke.removeClass("search-choice-focus"),this.pending_backstroke=null},Chosen.prototype.keydown_checker=function(a){var b,c;switch(b=null!=(c=a.which)?c:a.keyCode,this.search_field_scale(),8!==b&&this.pending_backstroke&&this.clear_backstroke(),b){case 8:this.backstroke_length=this.search_field.val().length;break;case 9:this.results_showing&&!this.is_multiple&&this.result_select(a),this.mouse_on_container=!1;break;case 13:a.preventDefault();break;case 38:a.preventDefault(),this.keyup_arrow();break;case 40:a.preventDefault(),this.keydown_arrow()}},Chosen.prototype.search_field_scale=function(){var b,c,d,e,f,g,h,i,j;if(this.is_multiple){for(d=0,h=0,f="position:absolute; left: -1000px; top: -1000px; display:none;",g=["font-size","font-style","font-weight","font-family","line-height","text-transform","letter-spacing"],i=0,j=g.length;j>i;i++)e=g[i],f+=e+":"+this.search_field.css(e)+";";return b=a("<div />",{style:f}),b.text(this.search_field.val()),a("body").append(b),h=b.width()+25,b.remove(),c=this.container.outerWidth(),h>c-10&&(h=c-10),this.search_field.css({width:h+"px"})}},Chosen}(AbstractChosen)}.call(this);


--------------------------------------------------------------------------------
/dependencies/chosen/chosen.min.css:
--------------------------------------------------------------------------------
1 | /* Chosen v1.0.0 | (c) 2011-2013 by Harvest | MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md */
2 | 
3 | .chosen-container{position:relative;display:inline-block;vertical-align:middle;font-size:13px;zoom:1;*display:inline;-webkit-user-select:none;-moz-user-select:none;user-select:none}.chosen-container .chosen-drop{position:absolute;top:100%;left:-9999px;z-index:1010;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;border:1px solid #aaa;border-top:0;background:#fff;box-shadow:0 4px 5px rgba(0,0,0,.15)}.chosen-container.chosen-with-drop .chosen-drop{left:0}.chosen-container a{cursor:pointer}.chosen-container-single .chosen-single{position:relative;display:block;overflow:hidden;padding:0 0 0 8px;height:23px;border:1px solid #aaa;border-radius:5px;background-color:#fff;background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#fff),color-stop(50%,#f6f6f6),color-stop(52%,#eee),color-stop(100%,#f4f4f4));background:-webkit-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background:-moz-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background:-o-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background:linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background-clip:padding-box;box-shadow:0 0 3px #fff inset,0 1px 1px rgba(0,0,0,.1);color:#444;text-decoration:none;white-space:nowrap;line-height:24px}.chosen-container-single .chosen-default{color:#999}.chosen-container-single .chosen-single span{display:block;overflow:hidden;margin-right:26px;text-overflow:ellipsis;white-space:nowrap}.chosen-container-single .chosen-single-with-deselect span{margin-right:38px}.chosen-container-single .chosen-single abbr{position:absolute;top:6px;right:26px;display:block;width:12px;height:12px;background:url(chosen-sprite.png) -42px 1px no-repeat;font-size:1px}.chosen-container-single .chosen-single abbr:hover{background-position:-42px -10px}.chosen-container-single.chosen-disabled .chosen-single abbr:hover{background-position:-42px -10px}.chosen-container-single .chosen-single div{position:absolute;top:0;right:0;display:block;width:18px;height:100%}.chosen-container-single .chosen-single div b{display:block;width:100%;height:100%;background:url(chosen-sprite.png) no-repeat 0 2px}.chosen-container-single .chosen-search{position:relative;z-index:1010;margin:0;padding:3px 4px;white-space:nowrap}.chosen-container-single .chosen-search input[type=text]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:1px 0;padding:4px 20px 4px 5px;width:100%;height:auto;outline:0;border:1px solid #aaa;background:#fff url(chosen-sprite.png) no-repeat 100% -20px;background:url(chosen-sprite.png) no-repeat 100% -20px,-webkit-gradient(linear,50% 0,50% 100%,color-stop(1%,#eee),color-stop(15%,#fff));background:url(chosen-sprite.png) no-repeat 100% -20px,-webkit-linear-gradient(#eee 1%,#fff 15%);background:url(chosen-sprite.png) no-repeat 100% -20px,-moz-linear-gradient(#eee 1%,#fff 15%);background:url(chosen-sprite.png) no-repeat 100% -20px,-o-linear-gradient(#eee 1%,#fff 15%);background:url(chosen-sprite.png) no-repeat 100% -20px,linear-gradient(#eee 1%,#fff 15%);font-size:1em;font-family:sans-serif;line-height:normal;border-radius:0}.chosen-container-single .chosen-drop{margin-top:-1px;border-radius:0 0 4px 4px;background-clip:padding-box}.chosen-container-single.chosen-container-single-nosearch .chosen-search{position:absolute;left:-9999px}.chosen-container .chosen-results{position:relative;overflow-x:hidden;overflow-y:auto;margin:0 4px 4px 0;padding:0 0 0 4px;max-height:240px;-webkit-overflow-scrolling:touch}.chosen-container .chosen-results li{display:none;margin:0;padding:5px 6px;list-style:none;line-height:15px}.chosen-container .chosen-results li.active-result{display:list-item;cursor:pointer}.chosen-container .chosen-results li.disabled-result{display:list-item;color:#ccc;cursor:default}.chosen-container .chosen-results li.highlighted{background-color:#3875d7;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#3875d7),color-stop(90%,#2a62bc));background-image:-webkit-linear-gradient(#3875d7 20%,#2a62bc 90%);background-image:-moz-linear-gradient(#3875d7 20%,#2a62bc 90%);background-image:-o-linear-gradient(#3875d7 20%,#2a62bc 90%);background-image:linear-gradient(#3875d7 20%,#2a62bc 90%);color:#fff}.chosen-container .chosen-results li.no-results{display:list-item;background:#f4f4f4}.chosen-container .chosen-results li.group-result{display:list-item;font-weight:700;cursor:default}.chosen-container .chosen-results li.group-option{padding-left:15px}.chosen-container .chosen-results li em{font-style:normal;text-decoration:underline}.chosen-container-multi .chosen-choices{position:relative;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;width:100%;height:auto!important;height:1%;border:1px solid #aaa;background-color:#fff;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(1%,#eee),color-stop(15%,#fff));background-image:-webkit-linear-gradient(#eee 1%,#fff 15%);background-image:-moz-linear-gradient(#eee 1%,#fff 15%);background-image:-o-linear-gradient(#eee 1%,#fff 15%);background-image:linear-gradient(#eee 1%,#fff 15%);cursor:text}.chosen-container-multi .chosen-choices li{float:left;list-style:none}.chosen-container-multi .chosen-choices li.search-field{margin:0;padding:0;white-space:nowrap}.chosen-container-multi .chosen-choices li.search-field input[type=text]{margin:1px 0;padding:5px;height:15px;outline:0;border:0!important;background:transparent!important;box-shadow:none;color:#666;font-size:100%;font-family:sans-serif;line-height:normal;border-radius:0}.chosen-container-multi .chosen-choices li.search-field .default{color:#999}.chosen-container-multi .chosen-choices li.search-choice{position:relative;margin:3px 0 3px 5px;padding:3px 20px 3px 5px;border:1px solid #aaa;border-radius:3px;background-color:#e4e4e4;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eee));background-image:-webkit-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-moz-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-o-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-clip:padding-box;box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);color:#333;line-height:13px;cursor:default}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close{position:absolute;top:4px;right:3px;display:block;width:12px;height:12px;background:url(chosen-sprite.png) -42px 1px no-repeat;font-size:1px}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover{background-position:-42px -10px}.chosen-container-multi .chosen-choices li.search-choice-disabled{padding-right:5px;border:1px solid #ccc;background-color:#e4e4e4;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eee));background-image:-webkit-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-moz-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-o-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);color:#666}.chosen-container-multi .chosen-choices li.search-choice-focus{background:#d4d4d4}.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close{background-position:-42px -10px}.chosen-container-multi .chosen-results{margin:0;padding:0}.chosen-container-multi .chosen-drop .result-selected{display:list-item;color:#ccc;cursor:default}.chosen-container-active .chosen-single{border:1px solid #5897fb;box-shadow:0 0 5px rgba(0,0,0,.3)}.chosen-container-active.chosen-with-drop .chosen-single{border:1px solid #aaa;-moz-border-radius-bottomright:0;border-bottom-right-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#eee),color-stop(80%,#fff));background-image:-webkit-linear-gradient(#eee 20%,#fff 80%);background-image:-moz-linear-gradient(#eee 20%,#fff 80%);background-image:-o-linear-gradient(#eee 20%,#fff 80%);background-image:linear-gradient(#eee 20%,#fff 80%);box-shadow:0 1px 0 #fff inset}.chosen-container-active.chosen-with-drop .chosen-single div{border-left:0;background:transparent}.chosen-container-active.chosen-with-drop .chosen-single div b{background-position:-18px 2px}.chosen-container-active .chosen-choices{border:1px solid #5897fb;box-shadow:0 0 5px rgba(0,0,0,.3)}.chosen-container-active .chosen-choices li.search-field input[type=text]{color:#111!important}.chosen-disabled{opacity:.5!important;cursor:default}.chosen-disabled .chosen-single{cursor:default}.chosen-disabled .chosen-choices .search-choice .search-choice-close{cursor:default}.chosen-rtl{text-align:right}.chosen-rtl .chosen-single{overflow:visible;padding:0 8px 0 0}.chosen-rtl .chosen-single span{margin-right:0;margin-left:26px;direction:rtl}.chosen-rtl .chosen-single-with-deselect span{margin-left:38px}.chosen-rtl .chosen-single div{right:auto;left:3px}.chosen-rtl .chosen-single abbr{right:auto;left:26px}.chosen-rtl .chosen-choices li{float:right}.chosen-rtl .chosen-choices li.search-field input[type=text]{direction:rtl}.chosen-rtl .chosen-choices li.search-choice{margin:3px 5px 3px 0;padding:3px 5px 3px 19px}.chosen-rtl .chosen-choices li.search-choice .search-choice-close{right:auto;left:4px}.chosen-rtl.chosen-container-single-nosearch .chosen-search,.chosen-rtl .chosen-drop{left:9999px}.chosen-rtl.chosen-container-single .chosen-results{margin:0 0 4px 4px;padding:0 4px 0 0}.chosen-rtl .chosen-results li.group-option{padding-right:15px;padding-left:0}.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div{border-right:0}.chosen-rtl .chosen-search input[type=text]{padding:4px 5px 4px 20px;background:#fff url(chosen-sprite.png) no-repeat -30px -20px;background:url(chosen-sprite.png) no-repeat -30px -20px,-webkit-gradient(linear,50% 0,50% 100%,color-stop(1%,#eee),color-stop(15%,#fff));background:url(chosen-sprite.png) no-repeat -30px -20px,-webkit-linear-gradient(#eee 1%,#fff 15%);background:url(chosen-sprite.png) no-repeat -30px -20px,-moz-linear-gradient(#eee 1%,#fff 15%);background:url(chosen-sprite.png) no-repeat -30px -20px,-o-linear-gradient(#eee 1%,#fff 15%);background:url(chosen-sprite.png) no-repeat -30px -20px,linear-gradient(#eee 1%,#fff 15%);direction:rtl}.chosen-rtl.chosen-container-single .chosen-single div b{background-position:6px 2px}.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b{background-position:-12px 2px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:144dpi){.chosen-rtl .chosen-search input[type=text],.chosen-container-single .chosen-single abbr,.chosen-container-single .chosen-single div b,.chosen-container-single .chosen-search input[type=text],.chosen-container-multi .chosen-choices .search-choice .search-choice-close,.chosen-container .chosen-results-scroll-down span,.chosen-container .chosen-results-scroll-up span{background-image:url(chosen-sprite@2x.png)!important;background-size:52px 37px!important;background-repeat:no-repeat!important}}


--------------------------------------------------------------------------------
/dependencies/chosen/chosen.proto.min.js:
--------------------------------------------------------------------------------
1 | /* Chosen v1.0.0 | (c) 2011-2013 by Harvest | MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md */
2 | !function(){var AbstractChosen,SelectParser,a,b={}.hasOwnProperty,c=function(a,c){function d(){this.constructor=a}for(var e in c)b.call(c,e)&&(a[e]=c[e]);return d.prototype=c.prototype,a.prototype=new d,a.__super__=c.prototype,a};SelectParser=function(){function SelectParser(){this.options_index=0,this.parsed=[]}return SelectParser.prototype.add_node=function(a){return"OPTGROUP"===a.nodeName.toUpperCase()?this.add_group(a):this.add_option(a)},SelectParser.prototype.add_group=function(a){var b,c,d,e,f,g;for(b=this.parsed.length,this.parsed.push({array_index:b,group:!0,label:this.escapeExpression(a.label),children:0,disabled:a.disabled}),f=a.childNodes,g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push(this.add_option(c,b,a.disabled));return g},SelectParser.prototype.add_option=function(a,b,c){return"OPTION"===a.nodeName.toUpperCase()?(""!==a.text?(null!=b&&(this.parsed[b].children+=1),this.parsed.push({array_index:this.parsed.length,options_index:this.options_index,value:a.value,text:a.text,html:a.innerHTML,selected:a.selected,disabled:c===!0?c:a.disabled,group_array_index:b,classes:a.className,style:a.style.cssText})):this.parsed.push({array_index:this.parsed.length,options_index:this.options_index,empty:!0}),this.options_index+=1):void 0},SelectParser.prototype.escapeExpression=function(a){var b,c;return null==a||a===!1?"":/[\&\<\>\"\'\`]/.test(a)?(b={"<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;","`":"&#x60;"},c=/&(?!\w+;)|[\<\>\"\'\`]/g,a.replace(c,function(a){return b[a]||"&amp;"})):a},SelectParser}(),SelectParser.select_to_array=function(a){var b,c,d,e,f;for(c=new SelectParser,f=a.childNodes,d=0,e=f.length;e>d;d++)b=f[d],c.add_node(b);return c.parsed},AbstractChosen=function(){function AbstractChosen(a,b){this.form_field=a,this.options=null!=b?b:{},AbstractChosen.browser_is_supported()&&(this.is_multiple=this.form_field.multiple,this.set_default_text(),this.set_default_values(),this.setup(),this.set_up_html(),this.register_observers())}return AbstractChosen.prototype.set_default_values=function(){var a=this;return this.click_test_action=function(b){return a.test_active_click(b)},this.activate_action=function(b){return a.activate_field(b)},this.active_field=!1,this.mouse_on_container=!1,this.results_showing=!1,this.result_highlighted=null,this.result_single_selected=null,this.allow_single_deselect=null!=this.options.allow_single_deselect&&null!=this.form_field.options[0]&&""===this.form_field.options[0].text?this.options.allow_single_deselect:!1,this.disable_search_threshold=this.options.disable_search_threshold||0,this.disable_search=this.options.disable_search||!1,this.enable_split_word_search=null!=this.options.enable_split_word_search?this.options.enable_split_word_search:!0,this.group_search=null!=this.options.group_search?this.options.group_search:!0,this.search_contains=this.options.search_contains||!1,this.single_backstroke_delete=null!=this.options.single_backstroke_delete?this.options.single_backstroke_delete:!0,this.max_selected_options=this.options.max_selected_options||1/0,this.inherit_select_classes=this.options.inherit_select_classes||!1,this.display_selected_options=null!=this.options.display_selected_options?this.options.display_selected_options:!0,this.display_disabled_options=null!=this.options.display_disabled_options?this.options.display_disabled_options:!0},AbstractChosen.prototype.set_default_text=function(){return this.default_text=this.form_field.getAttribute("data-placeholder")?this.form_field.getAttribute("data-placeholder"):this.is_multiple?this.options.placeholder_text_multiple||this.options.placeholder_text||AbstractChosen.default_multiple_text:this.options.placeholder_text_single||this.options.placeholder_text||AbstractChosen.default_single_text,this.results_none_found=this.form_field.getAttribute("data-no_results_text")||this.options.no_results_text||AbstractChosen.default_no_result_text},AbstractChosen.prototype.mouse_enter=function(){return this.mouse_on_container=!0},AbstractChosen.prototype.mouse_leave=function(){return this.mouse_on_container=!1},AbstractChosen.prototype.input_focus=function(){var a=this;if(this.is_multiple){if(!this.active_field)return setTimeout(function(){return a.container_mousedown()},50)}else if(!this.active_field)return this.activate_field()},AbstractChosen.prototype.input_blur=function(){var a=this;return this.mouse_on_container?void 0:(this.active_field=!1,setTimeout(function(){return a.blur_test()},100))},AbstractChosen.prototype.results_option_build=function(a){var b,c,d,e,f;for(b="",f=this.results_data,d=0,e=f.length;e>d;d++)c=f[d],b+=c.group?this.result_add_group(c):this.result_add_option(c),(null!=a?a.first:void 0)&&(c.selected&&this.is_multiple?this.choice_build(c):c.selected&&!this.is_multiple&&this.single_set_selected_text(c.text));return b},AbstractChosen.prototype.result_add_option=function(a){var b,c;return a.search_match?this.include_option_in_results(a)?(b=[],a.disabled||a.selected&&this.is_multiple||b.push("active-result"),!a.disabled||a.selected&&this.is_multiple||b.push("disabled-result"),a.selected&&b.push("result-selected"),null!=a.group_array_index&&b.push("group-option"),""!==a.classes&&b.push(a.classes),c=""!==a.style.cssText?' style="'+a.style+'"':"",'<li class="'+b.join(" ")+'"'+c+' data-option-array-index="'+a.array_index+'">'+a.search_text+"</li>"):"":""},AbstractChosen.prototype.result_add_group=function(a){return a.search_match||a.group_match?a.active_options>0?'<li class="group-result">'+a.search_text+"</li>":"":""},AbstractChosen.prototype.results_update_field=function(){return this.set_default_text(),this.is_multiple||this.results_reset_cleanup(),this.result_clear_highlight(),this.result_single_selected=null,this.results_build(),this.results_showing?this.winnow_results():void 0},AbstractChosen.prototype.results_toggle=function(){return this.results_showing?this.results_hide():this.results_show()},AbstractChosen.prototype.results_search=function(){return this.results_showing?this.winnow_results():this.results_show()},AbstractChosen.prototype.winnow_results=function(){var a,b,c,d,e,f,g,h,i,j,k,l,m;for(this.no_results_clear(),e=0,g=this.get_search_text(),a=g.replace(/[-[\]{}()*+?.,\\^$|#\s]/g,"\\$&"),d=this.search_contains?"":"^",c=new RegExp(d+a,"i"),j=new RegExp(a,"i"),m=this.results_data,k=0,l=m.length;l>k;k++)b=m[k],b.search_match=!1,f=null,this.include_option_in_results(b)&&(b.group&&(b.group_match=!1,b.active_options=0),null!=b.group_array_index&&this.results_data[b.group_array_index]&&(f=this.results_data[b.group_array_index],0===f.active_options&&f.search_match&&(e+=1),f.active_options+=1),(!b.group||this.group_search)&&(b.search_text=b.group?b.label:b.html,b.search_match=this.search_string_match(b.search_text,c),b.search_match&&!b.group&&(e+=1),b.search_match?(g.length&&(h=b.search_text.search(j),i=b.search_text.substr(0,h+g.length)+"</em>"+b.search_text.substr(h+g.length),b.search_text=i.substr(0,h)+"<em>"+i.substr(h)),null!=f&&(f.group_match=!0)):null!=b.group_array_index&&this.results_data[b.group_array_index].search_match&&(b.search_match=!0)));return this.result_clear_highlight(),1>e&&g.length?(this.update_results_content(""),this.no_results(g)):(this.update_results_content(this.results_option_build()),this.winnow_results_set_highlight())},AbstractChosen.prototype.search_string_match=function(a,b){var c,d,e,f;if(b.test(a))return!0;if(this.enable_split_word_search&&(a.indexOf(" ")>=0||0===a.indexOf("["))&&(d=a.replace(/\[|\]/g,"").split(" "),d.length))for(e=0,f=d.length;f>e;e++)if(c=d[e],b.test(c))return!0},AbstractChosen.prototype.choices_count=function(){var a,b,c,d;if(null!=this.selected_option_count)return this.selected_option_count;for(this.selected_option_count=0,d=this.form_field.options,b=0,c=d.length;c>b;b++)a=d[b],a.selected&&(this.selected_option_count+=1);return this.selected_option_count},AbstractChosen.prototype.choices_click=function(a){return a.preventDefault(),this.results_showing||this.is_disabled?void 0:this.results_show()},AbstractChosen.prototype.keyup_checker=function(a){var b,c;switch(b=null!=(c=a.which)?c:a.keyCode,this.search_field_scale(),b){case 8:if(this.is_multiple&&this.backstroke_length<1&&this.choices_count()>0)return this.keydown_backstroke();if(!this.pending_backstroke)return this.result_clear_highlight(),this.results_search();break;case 13:if(a.preventDefault(),this.results_showing)return this.result_select(a);break;case 27:return this.results_showing&&this.results_hide(),!0;case 9:case 38:case 40:case 16:case 91:case 17:break;default:return this.results_search()}},AbstractChosen.prototype.container_width=function(){return null!=this.options.width?this.options.width:""+this.form_field.offsetWidth+"px"},AbstractChosen.prototype.include_option_in_results=function(a){return this.is_multiple&&!this.display_selected_options&&a.selected?!1:!this.display_disabled_options&&a.disabled?!1:a.empty?!1:!0},AbstractChosen.browser_is_supported=function(){return"Microsoft Internet Explorer"===window.navigator.appName?document.documentMode>=8:/iP(od|hone)/i.test(window.navigator.userAgent)?!1:/Android/i.test(window.navigator.userAgent)&&/Mobile/i.test(window.navigator.userAgent)?!1:!0},AbstractChosen.default_multiple_text="Select Some Options",AbstractChosen.default_single_text="Select an Option",AbstractChosen.default_no_result_text="No results match",AbstractChosen}(),this.Chosen=function(b){function Chosen(){return a=Chosen.__super__.constructor.apply(this,arguments)}return c(Chosen,b),Chosen.prototype.setup=function(){return this.current_selectedIndex=this.form_field.selectedIndex,this.is_rtl=this.form_field.hasClassName("chosen-rtl")},Chosen.prototype.set_default_values=function(){return Chosen.__super__.set_default_values.call(this),this.single_temp=new Template('<a class="chosen-single chosen-default" tabindex="-1"><span>#{default}</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" /></div><ul class="chosen-results"></ul></div>'),this.multi_temp=new Template('<ul class="chosen-choices"><li class="search-field"><input type="text" value="#{default}" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>'),this.no_results_temp=new Template('<li class="no-results">'+this.results_none_found+' "<span>#{terms}</span>"</li>')},Chosen.prototype.set_up_html=function(){var a,b;return a=["chosen-container"],a.push("chosen-container-"+(this.is_multiple?"multi":"single")),this.inherit_select_classes&&this.form_field.className&&a.push(this.form_field.className),this.is_rtl&&a.push("chosen-rtl"),b={"class":a.join(" "),style:"width: "+this.container_width()+";",title:this.form_field.title},this.form_field.id.length&&(b.id=this.form_field.id.replace(/[^\w]/g,"_")+"_chosen"),this.container=this.is_multiple?new Element("div",b).update(this.multi_temp.evaluate({"default":this.default_text})):new Element("div",b).update(this.single_temp.evaluate({"default":this.default_text})),this.form_field.hide().insert({after:this.container}),this.dropdown=this.container.down("div.chosen-drop"),this.search_field=this.container.down("input"),this.search_results=this.container.down("ul.chosen-results"),this.search_field_scale(),this.search_no_results=this.container.down("li.no-results"),this.is_multiple?(this.search_choices=this.container.down("ul.chosen-choices"),this.search_container=this.container.down("li.search-field")):(this.search_container=this.container.down("div.chosen-search"),this.selected_item=this.container.down(".chosen-single")),this.results_build(),this.set_tab_index(),this.set_label_behavior(),this.form_field.fire("chosen:ready",{chosen:this})},Chosen.prototype.register_observers=function(){var a=this;return this.container.observe("mousedown",function(b){return a.container_mousedown(b)}),this.container.observe("mouseup",function(b){return a.container_mouseup(b)}),this.container.observe("mouseenter",function(b){return a.mouse_enter(b)}),this.container.observe("mouseleave",function(b){return a.mouse_leave(b)}),this.search_results.observe("mouseup",function(b){return a.search_results_mouseup(b)}),this.search_results.observe("mouseover",function(b){return a.search_results_mouseover(b)}),this.search_results.observe("mouseout",function(b){return a.search_results_mouseout(b)}),this.search_results.observe("mousewheel",function(b){return a.search_results_mousewheel(b)}),this.search_results.observe("DOMMouseScroll",function(b){return a.search_results_mousewheel(b)}),this.form_field.observe("chosen:updated",function(b){return a.results_update_field(b)}),this.form_field.observe("chosen:activate",function(b){return a.activate_field(b)}),this.form_field.observe("chosen:open",function(b){return a.container_mousedown(b)}),this.search_field.observe("blur",function(b){return a.input_blur(b)}),this.search_field.observe("keyup",function(b){return a.keyup_checker(b)}),this.search_field.observe("keydown",function(b){return a.keydown_checker(b)}),this.search_field.observe("focus",function(b){return a.input_focus(b)}),this.is_multiple?this.search_choices.observe("click",function(b){return a.choices_click(b)}):this.container.observe("click",function(a){return a.preventDefault()})},Chosen.prototype.destroy=function(){return document.stopObserving("click",this.click_test_action),this.form_field.stopObserving(),this.container.stopObserving(),this.search_results.stopObserving(),this.search_field.stopObserving(),null!=this.form_field_label&&this.form_field_label.stopObserving(),this.is_multiple?(this.search_choices.stopObserving(),this.container.select(".search-choice-close").each(function(a){return a.stopObserving()})):this.selected_item.stopObserving(),this.search_field.tabIndex&&(this.form_field.tabIndex=this.search_field.tabIndex),this.container.remove(),this.form_field.show()},Chosen.prototype.search_field_disabled=function(){return this.is_disabled=this.form_field.disabled,this.is_disabled?(this.container.addClassName("chosen-disabled"),this.search_field.disabled=!0,this.is_multiple||this.selected_item.stopObserving("focus",this.activate_action),this.close_field()):(this.container.removeClassName("chosen-disabled"),this.search_field.disabled=!1,this.is_multiple?void 0:this.selected_item.observe("focus",this.activate_action))},Chosen.prototype.container_mousedown=function(a){return this.is_disabled||(a&&"mousedown"===a.type&&!this.results_showing&&a.stop(),null!=a&&a.target.hasClassName("search-choice-close"))?void 0:(this.active_field?this.is_multiple||!a||a.target!==this.selected_item&&!a.target.up("a.chosen-single")||this.results_toggle():(this.is_multiple&&this.search_field.clear(),document.observe("click",this.click_test_action),this.results_show()),this.activate_field())},Chosen.prototype.container_mouseup=function(a){return"ABBR"!==a.target.nodeName||this.is_disabled?void 0:this.results_reset(a)},Chosen.prototype.search_results_mousewheel=function(a){var b;return b=-a.wheelDelta||a.detail,null!=b?(a.preventDefault(),"DOMMouseScroll"===a.type&&(b=40*b),this.search_results.scrollTop=b+this.search_results.scrollTop):void 0},Chosen.prototype.blur_test=function(){return!this.active_field&&this.container.hasClassName("chosen-container-active")?this.close_field():void 0},Chosen.prototype.close_field=function(){return document.stopObserving("click",this.click_test_action),this.active_field=!1,this.results_hide(),this.container.removeClassName("chosen-container-active"),this.clear_backstroke(),this.show_search_field_default(),this.search_field_scale()},Chosen.prototype.activate_field=function(){return this.container.addClassName("chosen-container-active"),this.active_field=!0,this.search_field.value=this.search_field.value,this.search_field.focus()},Chosen.prototype.test_active_click=function(a){return a.target.up(".chosen-container")===this.container?this.active_field=!0:this.close_field()},Chosen.prototype.results_build=function(){return this.parsing=!0,this.selected_option_count=null,this.results_data=SelectParser.select_to_array(this.form_field),this.is_multiple?this.search_choices.select("li.search-choice").invoke("remove"):this.is_multiple||(this.single_set_selected_text(),this.disable_search||this.form_field.options.length<=this.disable_search_threshold?(this.search_field.readOnly=!0,this.container.addClassName("chosen-container-single-nosearch")):(this.search_field.readOnly=!1,this.container.removeClassName("chosen-container-single-nosearch"))),this.update_results_content(this.results_option_build({first:!0})),this.search_field_disabled(),this.show_search_field_default(),this.search_field_scale(),this.parsing=!1},Chosen.prototype.result_do_highlight=function(a){var b,c,d,e,f;return this.result_clear_highlight(),this.result_highlight=a,this.result_highlight.addClassName("highlighted"),d=parseInt(this.search_results.getStyle("maxHeight"),10),f=this.search_results.scrollTop,e=d+f,c=this.result_highlight.positionedOffset().top,b=c+this.result_highlight.getHeight(),b>=e?this.search_results.scrollTop=b-d>0?b-d:0:f>c?this.search_results.scrollTop=c:void 0},Chosen.prototype.result_clear_highlight=function(){return this.result_highlight&&this.result_highlight.removeClassName("highlighted"),this.result_highlight=null},Chosen.prototype.results_show=function(){return this.is_multiple&&this.max_selected_options<=this.choices_count()?(this.form_field.fire("chosen:maxselected",{chosen:this}),!1):(this.container.addClassName("chosen-with-drop"),this.form_field.fire("chosen:showing_dropdown",{chosen:this}),this.results_showing=!0,this.search_field.focus(),this.search_field.value=this.search_field.value,this.winnow_results())},Chosen.prototype.update_results_content=function(a){return this.search_results.update(a)},Chosen.prototype.results_hide=function(){return this.results_showing&&(this.result_clear_highlight(),this.container.removeClassName("chosen-with-drop"),this.form_field.fire("chosen:hiding_dropdown",{chosen:this})),this.results_showing=!1},Chosen.prototype.set_tab_index=function(){var a;return this.form_field.tabIndex?(a=this.form_field.tabIndex,this.form_field.tabIndex=-1,this.search_field.tabIndex=a):void 0},Chosen.prototype.set_label_behavior=function(){var a=this;return this.form_field_label=this.form_field.up("label"),null==this.form_field_label&&(this.form_field_label=$$("label[for='"+this.form_field.id+"']").first()),null!=this.form_field_label?this.form_field_label.observe("click",function(b){return a.is_multiple?a.container_mousedown(b):a.activate_field()}):void 0},Chosen.prototype.show_search_field_default=function(){return this.is_multiple&&this.choices_count()<1&&!this.active_field?(this.search_field.value=this.default_text,this.search_field.addClassName("default")):(this.search_field.value="",this.search_field.removeClassName("default"))},Chosen.prototype.search_results_mouseup=function(a){var b;return b=a.target.hasClassName("active-result")?a.target:a.target.up(".active-result"),b?(this.result_highlight=b,this.result_select(a),this.search_field.focus()):void 0},Chosen.prototype.search_results_mouseover=function(a){var b;return b=a.target.hasClassName("active-result")?a.target:a.target.up(".active-result"),b?this.result_do_highlight(b):void 0},Chosen.prototype.search_results_mouseout=function(a){return a.target.hasClassName("active-result")||a.target.up(".active-result")?this.result_clear_highlight():void 0},Chosen.prototype.choice_build=function(a){var b,c,d=this;return b=new Element("li",{"class":"search-choice"}).update("<span>"+a.html+"</span>"),a.disabled?b.addClassName("search-choice-disabled"):(c=new Element("a",{href:"#","class":"search-choice-close",rel:a.array_index}),c.observe("click",function(a){return d.choice_destroy_link_click(a)}),b.insert(c)),this.search_container.insert({before:b})},Chosen.prototype.choice_destroy_link_click=function(a){return a.preventDefault(),a.stopPropagation(),this.is_disabled?void 0:this.choice_destroy(a.target)},Chosen.prototype.choice_destroy=function(a){return this.result_deselect(a.readAttribute("rel"))?(this.show_search_field_default(),this.is_multiple&&this.choices_count()>0&&this.search_field.value.length<1&&this.results_hide(),a.up("li").remove(),this.search_field_scale()):void 0},Chosen.prototype.results_reset=function(){return this.form_field.options[0].selected=!0,this.selected_option_count=null,this.single_set_selected_text(),this.show_search_field_default(),this.results_reset_cleanup(),"function"==typeof Event.simulate&&this.form_field.simulate("change"),this.active_field?this.results_hide():void 0},Chosen.prototype.results_reset_cleanup=function(){var a;return this.current_selectedIndex=this.form_field.selectedIndex,a=this.selected_item.down("abbr"),a?a.remove():void 0},Chosen.prototype.result_select=function(a){var b,c,d;return this.result_highlight?(b=this.result_highlight,this.result_clear_highlight(),this.is_multiple&&this.max_selected_options<=this.choices_count()?(this.form_field.fire("chosen:maxselected",{chosen:this}),!1):(this.is_multiple?b.removeClassName("active-result"):(this.result_single_selected&&(this.result_single_selected.removeClassName("result-selected"),d=this.result_single_selected.getAttribute("data-option-array-index"),this.results_data[d].selected=!1),this.result_single_selected=b),b.addClassName("result-selected"),c=this.results_data[b.getAttribute("data-option-array-index")],c.selected=!0,this.form_field.options[c.options_index].selected=!0,this.selected_option_count=null,this.is_multiple?this.choice_build(c):this.single_set_selected_text(c.text),(a.metaKey||a.ctrlKey)&&this.is_multiple||this.results_hide(),this.search_field.value="","function"!=typeof Event.simulate||!this.is_multiple&&this.form_field.selectedIndex===this.current_selectedIndex||this.form_field.simulate("change"),this.current_selectedIndex=this.form_field.selectedIndex,this.search_field_scale())):void 0},Chosen.prototype.single_set_selected_text=function(a){return null==a&&(a=this.default_text),a===this.default_text?this.selected_item.addClassName("chosen-default"):(this.single_deselect_control_build(),this.selected_item.removeClassName("chosen-default")),this.selected_item.down("span").update(a)},Chosen.prototype.result_deselect=function(a){var b;return b=this.results_data[a],this.form_field.options[b.options_index].disabled?!1:(b.selected=!1,this.form_field.options[b.options_index].selected=!1,this.selected_option_count=null,this.result_clear_highlight(),this.results_showing&&this.winnow_results(),"function"==typeof Event.simulate&&this.form_field.simulate("change"),this.search_field_scale(),!0)},Chosen.prototype.single_deselect_control_build=function(){return this.allow_single_deselect?(this.selected_item.down("abbr")||this.selected_item.down("span").insert({after:'<abbr class="search-choice-close"></abbr>'}),this.selected_item.addClassName("chosen-single-with-deselect")):void 0},Chosen.prototype.get_search_text=function(){return this.search_field.value===this.default_text?"":this.search_field.value.strip().escapeHTML()},Chosen.prototype.winnow_results_set_highlight=function(){var a;return this.is_multiple||(a=this.search_results.down(".result-selected.active-result")),null==a&&(a=this.search_results.down(".active-result")),null!=a?this.result_do_highlight(a):void 0},Chosen.prototype.no_results=function(a){return this.search_results.insert(this.no_results_temp.evaluate({terms:a}))},Chosen.prototype.no_results_clear=function(){var a,b;for(a=null,b=[];a=this.search_results.down(".no-results");)b.push(a.remove());return b},Chosen.prototype.keydown_arrow=function(){var a;return this.results_showing&&this.result_highlight?(a=this.result_highlight.next(".active-result"))?this.result_do_highlight(a):void 0:this.results_show()},Chosen.prototype.keyup_arrow=function(){var a,b,c;return this.results_showing||this.is_multiple?this.result_highlight?(c=this.result_highlight.previousSiblings(),a=this.search_results.select("li.active-result"),b=c.intersect(a),b.length?this.result_do_highlight(b.first()):(this.choices_count()>0&&this.results_hide(),this.result_clear_highlight())):void 0:this.results_show()},Chosen.prototype.keydown_backstroke=function(){var a;return this.pending_backstroke?(this.choice_destroy(this.pending_backstroke.down("a")),this.clear_backstroke()):(a=this.search_container.siblings().last(),a&&a.hasClassName("search-choice")&&!a.hasClassName("search-choice-disabled")?(this.pending_backstroke=a,this.pending_backstroke&&this.pending_backstroke.addClassName("search-choice-focus"),this.single_backstroke_delete?this.keydown_backstroke():this.pending_backstroke.addClassName("search-choice-focus")):void 0)},Chosen.prototype.clear_backstroke=function(){return this.pending_backstroke&&this.pending_backstroke.removeClassName("search-choice-focus"),this.pending_backstroke=null},Chosen.prototype.keydown_checker=function(a){var b,c;switch(b=null!=(c=a.which)?c:a.keyCode,this.search_field_scale(),8!==b&&this.pending_backstroke&&this.clear_backstroke(),b){case 8:this.backstroke_length=this.search_field.value.length;break;case 9:this.results_showing&&!this.is_multiple&&this.result_select(a),this.mouse_on_container=!1;break;case 13:a.preventDefault();break;case 38:a.preventDefault(),this.keyup_arrow();break;case 40:a.preventDefault(),this.keydown_arrow()}},Chosen.prototype.search_field_scale=function(){var a,b,c,d,e,f,g,h,i;if(this.is_multiple){for(c=0,g=0,e="position:absolute; left: -1000px; top: -1000px; display:none;",f=["font-size","font-style","font-weight","font-family","line-height","text-transform","letter-spacing"],h=0,i=f.length;i>h;h++)d=f[h],e+=d+":"+this.search_field.getStyle(d)+";";return a=new Element("div",{style:e}).update(this.search_field.value.escapeHTML()),document.body.appendChild(a),g=Element.measure(a,"width")+25,a.remove(),b=this.container.getWidth(),g>b-10&&(g=b-10),this.search_field.setStyle({width:g+"px"})}},Chosen}(AbstractChosen)}.call(this);


--------------------------------------------------------------------------------
/dependencies/jscolor/arrow.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rukavina/live-css-editor/7f40d64708d85c1ec0708e677b48971fd28aba2b/dependencies/jscolor/arrow.gif


--------------------------------------------------------------------------------
/dependencies/jscolor/cross.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rukavina/live-css-editor/7f40d64708d85c1ec0708e677b48971fd28aba2b/dependencies/jscolor/cross.gif


--------------------------------------------------------------------------------
/dependencies/jscolor/hs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rukavina/live-css-editor/7f40d64708d85c1ec0708e677b48971fd28aba2b/dependencies/jscolor/hs.png


--------------------------------------------------------------------------------
/dependencies/jscolor/hv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rukavina/live-css-editor/7f40d64708d85c1ec0708e677b48971fd28aba2b/dependencies/jscolor/hv.png


--------------------------------------------------------------------------------
/dependencies/jscolor/jscolor.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * jscolor, JavaScript Color Picker
  3 |  *
  4 |  * @version 1.4.1
  5 |  * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
  6 |  * @author  Jan Odvarko, http://odvarko.cz
  7 |  * @created 2008-06-15
  8 |  * @updated 2013-04-08
  9 |  * @link    http://jscolor.com
 10 |  */
 11 | 
 12 | 
 13 | var jscolor = {
 14 | 
 15 | 
 16 | 	dir : '', // location of jscolor directory (leave empty to autodetect)
 17 | 	bindClass : 'color', // class name
 18 | 	binding : true, // automatic binding via <input class="...">
 19 | 	preloading : true, // use image preloading?
 20 | 
 21 | 
 22 | 	install : function() {
 23 | 		jscolor.addEvent(window, 'load', jscolor.init);
 24 | 	},
 25 | 
 26 | 
 27 | 	init : function() {
 28 | 		if(jscolor.binding) {
 29 | 			jscolor.bind();
 30 | 		}
 31 | 		if(jscolor.preloading) {
 32 | 			jscolor.preload();
 33 | 		}
 34 | 	},
 35 | 
 36 | 
 37 | 	getDir : function() {
 38 | 		if(!jscolor.dir) {
 39 | 			var detected = jscolor.detectDir();
 40 | 			jscolor.dir = detected!==false ? detected : 'jscolor/';
 41 | 		}
 42 | 		return jscolor.dir;
 43 | 	},
 44 | 
 45 | 
 46 | 	detectDir : function() {
 47 | 		var base = location.href;
 48 | 
 49 | 		var e = document.getElementsByTagName('base');
 50 | 		for(var i=0; i<e.length; i+=1) {
 51 | 			if(e[i].href) { base = e[i].href; }
 52 | 		}
 53 | 
 54 | 		var e = document.getElementsByTagName('script');
 55 | 		for(var i=0; i<e.length; i+=1) {
 56 | 			if(e[i].src && /(^|\/)jscolor\.js([?#].*)?$/i.test(e[i].src)) {
 57 | 				var src = new jscolor.URI(e[i].src);
 58 | 				var srcAbs = src.toAbsolute(base);
 59 | 				srcAbs.path = srcAbs.path.replace(/[^\/]+$/, ''); // remove filename
 60 | 				srcAbs.query = null;
 61 | 				srcAbs.fragment = null;
 62 | 				return srcAbs.toString();
 63 | 			}
 64 | 		}
 65 | 		return false;
 66 | 	},
 67 | 
 68 | 
 69 | 	bind : function() {
 70 | 		var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')\\s*(\\{[^}]*\\})?', 'i');
 71 | 		var e = document.getElementsByTagName('input');
 72 | 		for(var i=0; i<e.length; i+=1) {
 73 | 			var m;
 74 | 			if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) {
 75 | 				var prop = {};
 76 | 				if(m[3]) {
 77 | 					try {
 78 | 						prop = (new Function ('return (' + m[3] + ')'))();
 79 | 					} catch(eInvalidProp) {}
 80 | 				}
 81 | 				e[i].color = new jscolor.color(e[i], prop);
 82 | 			}
 83 | 		}
 84 | 	},
 85 | 
 86 | 
 87 | 	preload : function() {
 88 | 		for(var fn in jscolor.imgRequire) {
 89 | 			if(jscolor.imgRequire.hasOwnProperty(fn)) {
 90 | 				jscolor.loadImage(fn);
 91 | 			}
 92 | 		}
 93 | 	},
 94 | 
 95 | 
 96 | 	images : {
 97 | 		pad : [ 181, 101 ],
 98 | 		sld : [ 16, 101 ],
 99 | 		cross : [ 15, 15 ],
100 | 		arrow : [ 7, 11 ]
101 | 	},
102 | 
103 | 
104 | 	imgRequire : {},
105 | 	imgLoaded : {},
106 | 
107 | 
108 | 	requireImage : function(filename) {
109 | 		jscolor.imgRequire[filename] = true;
110 | 	},
111 | 
112 | 
113 | 	loadImage : function(filename) {
114 | 		if(!jscolor.imgLoaded[filename]) {
115 | 			jscolor.imgLoaded[filename] = new Image();
116 | 			jscolor.imgLoaded[filename].src = jscolor.getDir()+filename;
117 | 		}
118 | 	},
119 | 
120 | 
121 | 	fetchElement : function(mixed) {
122 | 		return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
123 | 	},
124 | 
125 | 
126 | 	addEvent : function(el, evnt, func) {
127 | 		if(el.addEventListener) {
128 | 			el.addEventListener(evnt, func, false);
129 | 		} else if(el.attachEvent) {
130 | 			el.attachEvent('on'+evnt, func);
131 | 		}
132 | 	},
133 | 
134 | 
135 | 	fireEvent : function(el, evnt) {
136 | 		if(!el) {
137 | 			return;
138 | 		}
139 | 		if(document.createEvent) {
140 | 			var ev = document.createEvent('HTMLEvents');
141 | 			ev.initEvent(evnt, true, true);
142 | 			el.dispatchEvent(ev);
143 | 		} else if(document.createEventObject) {
144 | 			var ev = document.createEventObject();
145 | 			el.fireEvent('on'+evnt, ev);
146 | 		} else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5)
147 | 			el['on'+evnt]();
148 | 		}
149 | 	},
150 | 
151 | 
152 | 	getElementPos : function(e) {
153 | 		var e1=e, e2=e;
154 | 		var x=0, y=0;
155 | 		if(e1.offsetParent) {
156 | 			do {
157 | 				x += e1.offsetLeft;
158 | 				y += e1.offsetTop;
159 | 			} while(e1 = e1.offsetParent);
160 | 		}
161 | 		while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
162 | 			x -= e2.scrollLeft;
163 | 			y -= e2.scrollTop;
164 | 		}
165 | 		return [x, y];
166 | 	},
167 | 
168 | 
169 | 	getElementSize : function(e) {
170 | 		return [e.offsetWidth, e.offsetHeight];
171 | 	},
172 | 
173 | 
174 | 	getRelMousePos : function(e) {
175 | 		var x = 0, y = 0;
176 | 		if (!e) { e = window.event; }
177 | 		if (typeof e.offsetX === 'number') {
178 | 			x = e.offsetX;
179 | 			y = e.offsetY;
180 | 		} else if (typeof e.layerX === 'number') {
181 | 			x = e.layerX;
182 | 			y = e.layerY;
183 | 		}
184 | 		return { x: x, y: y };
185 | 	},
186 | 
187 | 
188 | 	getViewPos : function() {
189 | 		if(typeof window.pageYOffset === 'number') {
190 | 			return [window.pageXOffset, window.pageYOffset];
191 | 		} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
192 | 			return [document.body.scrollLeft, document.body.scrollTop];
193 | 		} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
194 | 			return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
195 | 		} else {
196 | 			return [0, 0];
197 | 		}
198 | 	},
199 | 
200 | 
201 | 	getViewSize : function() {
202 | 		if(typeof window.innerWidth === 'number') {
203 | 			return [window.innerWidth, window.innerHeight];
204 | 		} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
205 | 			return [document.body.clientWidth, document.body.clientHeight];
206 | 		} else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
207 | 			return [document.documentElement.clientWidth, document.documentElement.clientHeight];
208 | 		} else {
209 | 			return [0, 0];
210 | 		}
211 | 	},
212 | 
213 | 
214 | 	URI : function(uri) { // See RFC3986
215 | 
216 | 		this.scheme = null;
217 | 		this.authority = null;
218 | 		this.path = '';
219 | 		this.query = null;
220 | 		this.fragment = null;
221 | 
222 | 		this.parse = function(uri) {
223 | 			var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/);
224 | 			this.scheme = m[3] ? m[2] : null;
225 | 			this.authority = m[5] ? m[6] : null;
226 | 			this.path = m[7];
227 | 			this.query = m[9] ? m[10] : null;
228 | 			this.fragment = m[12] ? m[13] : null;
229 | 			return this;
230 | 		};
231 | 
232 | 		this.toString = function() {
233 | 			var result = '';
234 | 			if(this.scheme !== null) { result = result + this.scheme + ':'; }
235 | 			if(this.authority !== null) { result = result + '//' + this.authority; }
236 | 			if(this.path !== null) { result = result + this.path; }
237 | 			if(this.query !== null) { result = result + '?' + this.query; }
238 | 			if(this.fragment !== null) { result = result + '#' + this.fragment; }
239 | 			return result;
240 | 		};
241 | 
242 | 		this.toAbsolute = function(base) {
243 | 			var base = new jscolor.URI(base);
244 | 			var r = this;
245 | 			var t = new jscolor.URI;
246 | 
247 | 			if(base.scheme === null) { return false; }
248 | 
249 | 			if(r.scheme !== null && r.scheme.toLowerCase() === base.scheme.toLowerCase()) {
250 | 				r.scheme = null;
251 | 			}
252 | 
253 | 			if(r.scheme !== null) {
254 | 				t.scheme = r.scheme;
255 | 				t.authority = r.authority;
256 | 				t.path = removeDotSegments(r.path);
257 | 				t.query = r.query;
258 | 			} else {
259 | 				if(r.authority !== null) {
260 | 					t.authority = r.authority;
261 | 					t.path = removeDotSegments(r.path);
262 | 					t.query = r.query;
263 | 				} else {
264 | 					if(r.path === '') {
265 | 						t.path = base.path;
266 | 						if(r.query !== null) {
267 | 							t.query = r.query;
268 | 						} else {
269 | 							t.query = base.query;
270 | 						}
271 | 					} else {
272 | 						if(r.path.substr(0,1) === '/') {
273 | 							t.path = removeDotSegments(r.path);
274 | 						} else {
275 | 							if(base.authority !== null && base.path === '') {
276 | 								t.path = '/'+r.path;
277 | 							} else {
278 | 								t.path = base.path.replace(/[^\/]+$/,'')+r.path;
279 | 							}
280 | 							t.path = removeDotSegments(t.path);
281 | 						}
282 | 						t.query = r.query;
283 | 					}
284 | 					t.authority = base.authority;
285 | 				}
286 | 				t.scheme = base.scheme;
287 | 			}
288 | 			t.fragment = r.fragment;
289 | 
290 | 			return t;
291 | 		};
292 | 
293 | 		function removeDotSegments(path) {
294 | 			var out = '';
295 | 			while(path) {
296 | 				if(path.substr(0,3)==='../' || path.substr(0,2)==='./') {
297 | 					path = path.replace(/^\.+/,'').substr(1);
298 | 				} else if(path.substr(0,3)==='/./' || path==='/.') {
299 | 					path = '/'+path.substr(3);
300 | 				} else if(path.substr(0,4)==='/../' || path==='/..') {
301 | 					path = '/'+path.substr(4);
302 | 					out = out.replace(/\/?[^\/]*$/, '');
303 | 				} else if(path==='.' || path==='..') {
304 | 					path = '';
305 | 				} else {
306 | 					var rm = path.match(/^\/?[^\/]*/)[0];
307 | 					path = path.substr(rm.length);
308 | 					out = out + rm;
309 | 				}
310 | 			}
311 | 			return out;
312 | 		}
313 | 
314 | 		if(uri) {
315 | 			this.parse(uri);
316 | 		}
317 | 
318 | 	},
319 | 
320 | 
321 | 	//
322 | 	// Usage example:
323 | 	// var myColor = new jscolor.color(myInputElement)
324 | 	//
325 | 
326 | 	color : function(target, prop) {
327 | 
328 | 
329 | 		this.required = true; // refuse empty values?
330 | 		this.adjust = true; // adjust value to uniform notation?
331 | 		this.hash = false; // prefix color with # symbol?
332 | 		this.caps = true; // uppercase?
333 | 		this.slider = true; // show the value/saturation slider?
334 | 		this.valueElement = target; // value holder
335 | 		this.styleElement = target; // where to reflect current color
336 | 		this.onImmediateChange = null; // onchange callback (can be either string or function)
337 | 		this.hsv = [0, 0, 1]; // read-only  0-6, 0-1, 0-1
338 | 		this.rgb = [1, 1, 1]; // read-only  0-1, 0-1, 0-1
339 | 		this.minH = 0; // read-only  0-6
340 | 		this.maxH = 6; // read-only  0-6
341 | 		this.minS = 0; // read-only  0-1
342 | 		this.maxS = 1; // read-only  0-1
343 | 		this.minV = 0; // read-only  0-1
344 | 		this.maxV = 1; // read-only  0-1
345 | 
346 | 		this.pickerOnfocus = true; // display picker on focus?
347 | 		this.pickerMode = 'HSV'; // HSV | HVS
348 | 		this.pickerPosition = 'bottom'; // left | right | top | bottom
349 | 		this.pickerSmartPosition = true; // automatically adjust picker position when necessary
350 | 		this.pickerButtonHeight = 20; // px
351 | 		this.pickerClosable = false;
352 | 		this.pickerCloseText = 'Close';
353 | 		this.pickerButtonColor = 'ButtonText'; // px
354 | 		this.pickerFace = 10; // px
355 | 		this.pickerFaceColor = 'ThreeDFace'; // CSS color
356 | 		this.pickerBorder = 1; // px
357 | 		this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight'; // CSS color
358 | 		this.pickerInset = 1; // px
359 | 		this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow'; // CSS color
360 | 		this.pickerZIndex = 10000;
361 | 
362 | 
363 | 		for(var p in prop) {
364 | 			if(prop.hasOwnProperty(p)) {
365 | 				this[p] = prop[p];
366 | 			}
367 | 		}
368 | 
369 | 
370 | 		this.hidePicker = function() {
371 | 			if(isPickerOwner()) {
372 | 				removePicker();
373 | 			}
374 | 		};
375 | 
376 | 
377 | 		this.showPicker = function() {
378 | 			if(!isPickerOwner()) {
379 | 				var tp = jscolor.getElementPos(target); // target pos
380 | 				var ts = jscolor.getElementSize(target); // target size
381 | 				var vp = jscolor.getViewPos(); // view pos
382 | 				var vs = jscolor.getViewSize(); // view size
383 | 				var ps = getPickerDims(this); // picker size
384 | 				var a, b, c;
385 | 				switch(this.pickerPosition.toLowerCase()) {
386 | 					case 'left': a=1; b=0; c=-1; break;
387 | 					case 'right':a=1; b=0; c=1; break;
388 | 					case 'top':  a=0; b=1; c=-1; break;
389 | 					default:     a=0; b=1; c=1; break;
390 | 				}
391 | 				var l = (ts[b]+ps[b])/2;
392 | 
393 | 				// picker pos
394 | 				if (!this.pickerSmartPosition) {
395 | 					var pp = [
396 | 						tp[a],
397 | 						tp[b]+ts[b]-l+l*c
398 | 					];
399 | 				} else {
400 | 					var pp = [
401 | 						-vp[a]+tp[a]+ps[a] > vs[a] ?
402 | 							(-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
403 | 							tp[a],
404 | 						-vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
405 | 							(-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
406 | 							(tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
407 | 					];
408 | 				}
409 | 				drawPicker(pp[a], pp[b]);
410 | 			}
411 | 		};
412 | 
413 | 
414 | 		this.importColor = function() {
415 | 			if(!valueElement) {
416 | 				this.exportColor();
417 | 			} else {
418 | 				if(!this.adjust) {
419 | 					if(!this.fromString(valueElement.value, leaveValue)) {
420 | 						styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
421 | 						styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
422 | 						styleElement.style.color = styleElement.jscStyle.color;
423 | 						this.exportColor(leaveValue | leaveStyle);
424 | 					}
425 | 				} else if(!this.required && /^\s*$/.test(valueElement.value)) {
426 | 					valueElement.value = '';
427 | 					styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
428 | 					styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
429 | 					styleElement.style.color = styleElement.jscStyle.color;
430 | 					this.exportColor(leaveValue | leaveStyle);
431 | 
432 | 				} else if(this.fromString(valueElement.value)) {
433 | 					// OK
434 | 				} else {
435 | 					this.exportColor();
436 | 				}
437 | 			}
438 | 		};
439 | 
440 | 
441 | 		this.exportColor = function(flags) {
442 | 			if(!(flags & leaveValue) && valueElement) {
443 | 				var value = this.toString();
444 | 				if(this.caps) { value = value.toUpperCase(); }
445 | 				if(this.hash) { value = '#'+value; }
446 | 				valueElement.value = value;
447 | 			}
448 | 			if(!(flags & leaveStyle) && styleElement) {
449 | 				styleElement.style.backgroundImage = "none";
450 | 				styleElement.style.backgroundColor =
451 | 					'#'+this.toString();
452 | 				styleElement.style.color =
453 | 					0.213 * this.rgb[0] +
454 | 					0.715 * this.rgb[1] +
455 | 					0.072 * this.rgb[2]
456 | 					< 0.5 ? '#FFF' : '#000';
457 | 			}
458 | 			if(!(flags & leavePad) && isPickerOwner()) {
459 | 				redrawPad();
460 | 			}
461 | 			if(!(flags & leaveSld) && isPickerOwner()) {
462 | 				redrawSld();
463 | 			}
464 | 		};
465 | 
466 | 
467 | 		this.fromHSV = function(h, s, v, flags) { // null = don't change
468 | 			if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
469 | 			if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
470 | 			if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
471 | 
472 | 			this.rgb = HSV_RGB(
473 | 				h===null ? this.hsv[0] : (this.hsv[0]=h),
474 | 				s===null ? this.hsv[1] : (this.hsv[1]=s),
475 | 				v===null ? this.hsv[2] : (this.hsv[2]=v)
476 | 			);
477 | 
478 | 			this.exportColor(flags);
479 | 		};
480 | 
481 | 
482 | 		this.fromRGB = function(r, g, b, flags) { // null = don't change
483 | 			if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
484 | 			if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
485 | 			if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
486 | 
487 | 			var hsv = RGB_HSV(
488 | 				r===null ? this.rgb[0] : r,
489 | 				g===null ? this.rgb[1] : g,
490 | 				b===null ? this.rgb[2] : b
491 | 			);
492 | 			if(hsv[0] !== null) {
493 | 				this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
494 | 			}
495 | 			if(hsv[2] !== 0) {
496 | 				this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
497 | 			}
498 | 			this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
499 | 
500 | 			// update RGB according to final HSV, as some values might be trimmed
501 | 			var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
502 | 			this.rgb[0] = rgb[0];
503 | 			this.rgb[1] = rgb[1];
504 | 			this.rgb[2] = rgb[2];
505 | 
506 | 			this.exportColor(flags);
507 | 		};
508 | 
509 | 
510 | 		this.fromString = function(hex, flags) {
511 | 			var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
512 | 			if(!m) {
513 | 				return false;
514 | 			} else {
515 | 				if(m[1].length === 6) { // 6-char notation
516 | 					this.fromRGB(
517 | 						parseInt(m[1].substr(0,2),16) / 255,
518 | 						parseInt(m[1].substr(2,2),16) / 255,
519 | 						parseInt(m[1].substr(4,2),16) / 255,
520 | 						flags
521 | 					);
522 | 				} else { // 3-char notation
523 | 					this.fromRGB(
524 | 						parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
525 | 						parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
526 | 						parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
527 | 						flags
528 | 					);
529 | 				}
530 | 				return true;
531 | 			}
532 | 		};
533 | 
534 | 
535 | 		this.toString = function() {
536 | 			return (
537 | 				(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
538 | 				(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
539 | 				(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
540 | 			);
541 | 		};
542 | 
543 | 
544 | 		function RGB_HSV(r, g, b) {
545 | 			var n = Math.min(Math.min(r,g),b);
546 | 			var v = Math.max(Math.max(r,g),b);
547 | 			var m = v - n;
548 | 			if(m === 0) { return [ null, 0, v ]; }
549 | 			var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
550 | 			return [ h===6?0:h, m/v, v ];
551 | 		}
552 | 
553 | 
554 | 		function HSV_RGB(h, s, v) {
555 | 			if(h === null) { return [ v, v, v ]; }
556 | 			var i = Math.floor(h);
557 | 			var f = i%2 ? h-i : 1-(h-i);
558 | 			var m = v * (1 - s);
559 | 			var n = v * (1 - s*f);
560 | 			switch(i) {
561 | 				case 6:
562 | 				case 0: return [v,n,m];
563 | 				case 1: return [n,v,m];
564 | 				case 2: return [m,v,n];
565 | 				case 3: return [m,n,v];
566 | 				case 4: return [n,m,v];
567 | 				case 5: return [v,m,n];
568 | 			}
569 | 		}
570 | 
571 | 
572 | 		function removePicker() {
573 | 			delete jscolor.picker.owner;
574 | 			document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
575 | 		}
576 | 
577 | 
578 | 		function drawPicker(x, y) {
579 | 			if(!jscolor.picker) {
580 | 				jscolor.picker = {
581 | 					box : document.createElement('div'),
582 | 					boxB : document.createElement('div'),
583 | 					pad : document.createElement('div'),
584 | 					padB : document.createElement('div'),
585 | 					padM : document.createElement('div'),
586 | 					sld : document.createElement('div'),
587 | 					sldB : document.createElement('div'),
588 | 					sldM : document.createElement('div'),
589 | 					btn : document.createElement('div'),
590 | 					btnS : document.createElement('span'),
591 | 					btnT : document.createTextNode(THIS.pickerCloseText)
592 | 				};
593 | 				for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) {
594 | 					var seg = document.createElement('div');
595 | 					seg.style.height = segSize+'px';
596 | 					seg.style.fontSize = '1px';
597 | 					seg.style.lineHeight = '0';
598 | 					jscolor.picker.sld.appendChild(seg);
599 | 				}
600 | 				jscolor.picker.sldB.appendChild(jscolor.picker.sld);
601 | 				jscolor.picker.box.appendChild(jscolor.picker.sldB);
602 | 				jscolor.picker.box.appendChild(jscolor.picker.sldM);
603 | 				jscolor.picker.padB.appendChild(jscolor.picker.pad);
604 | 				jscolor.picker.box.appendChild(jscolor.picker.padB);
605 | 				jscolor.picker.box.appendChild(jscolor.picker.padM);
606 | 				jscolor.picker.btnS.appendChild(jscolor.picker.btnT);
607 | 				jscolor.picker.btn.appendChild(jscolor.picker.btnS);
608 | 				jscolor.picker.box.appendChild(jscolor.picker.btn);
609 | 				jscolor.picker.boxB.appendChild(jscolor.picker.box);
610 | 			}
611 | 
612 | 			var p = jscolor.picker;
613 | 
614 | 			// controls interaction
615 | 			p.box.onmouseup =
616 | 			p.box.onmouseout = function() { target.focus(); };
617 | 			p.box.onmousedown = function() { abortBlur=true; };
618 | 			p.box.onmousemove = function(e) {
619 | 				if (holdPad || holdSld) {
620 | 					holdPad && setPad(e);
621 | 					holdSld && setSld(e);
622 | 					if (document.selection) {
623 | 						document.selection.empty();
624 | 					} else if (window.getSelection) {
625 | 						window.getSelection().removeAllRanges();
626 | 					}
627 | 					dispatchImmediateChange();
628 | 				}
629 | 			};
630 | 			if('ontouchstart' in window) { // if touch device
631 | 				p.box.addEventListener('touchmove', function(e) {
632 | 					var event={
633 | 						'offsetX': e.touches[0].pageX-touchOffset.X,
634 | 						'offsetY': e.touches[0].pageY-touchOffset.Y
635 | 					};
636 | 					if (holdPad || holdSld) {
637 | 						holdPad && setPad(event);
638 | 						holdSld && setSld(event);
639 | 						dispatchImmediateChange();
640 | 					}
641 | 					e.stopPropagation(); // prevent move "view" on broswer
642 | 					e.preventDefault(); // prevent Default - Android Fix (else android generated only 1-2 touchmove events)
643 | 				}, false);
644 | 			}
645 | 			p.padM.onmouseup =
646 | 			p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change'); } };
647 | 			p.padM.onmousedown = function(e) {
648 | 				// if the slider is at the bottom, move it up
649 | 				switch(modeID) {
650 | 					case 0: if (THIS.hsv[2] === 0) { THIS.fromHSV(null, null, 1.0); }; break;
651 | 					case 1: if (THIS.hsv[1] === 0) { THIS.fromHSV(null, 1.0, null); }; break;
652 | 				}
653 | 				holdSld=false;
654 | 				holdPad=true;
655 | 				setPad(e);
656 | 				dispatchImmediateChange();
657 | 			};
658 | 			if('ontouchstart' in window) {
659 | 				p.padM.addEventListener('touchstart', function(e) {
660 | 					touchOffset={
661 | 						'X': e.target.offsetParent.offsetLeft,
662 | 						'Y': e.target.offsetParent.offsetTop
663 | 					};
664 | 					this.onmousedown({
665 | 						'offsetX':e.touches[0].pageX-touchOffset.X,
666 | 						'offsetY':e.touches[0].pageY-touchOffset.Y
667 | 					});
668 | 				});
669 | 			}
670 | 			p.sldM.onmouseup =
671 | 			p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change'); } };
672 | 			p.sldM.onmousedown = function(e) {
673 | 				holdPad=false;
674 | 				holdSld=true;
675 | 				setSld(e);
676 | 				dispatchImmediateChange();
677 | 			};
678 | 			if('ontouchstart' in window) {
679 | 				p.sldM.addEventListener('touchstart', function(e) {
680 | 					touchOffset={
681 | 						'X': e.target.offsetParent.offsetLeft,
682 | 						'Y': e.target.offsetParent.offsetTop
683 | 					};
684 | 					this.onmousedown({
685 | 						'offsetX':e.touches[0].pageX-touchOffset.X,
686 | 						'offsetY':e.touches[0].pageY-touchOffset.Y
687 | 					});
688 | 				});
689 | 			}
690 | 
691 | 			// picker
692 | 			var dims = getPickerDims(THIS);
693 | 			p.box.style.width = dims[0] + 'px';
694 | 			p.box.style.height = dims[1] + 'px';
695 | 
696 | 			// picker border
697 | 			p.boxB.style.position = 'absolute';
698 | 			p.boxB.style.clear = 'both';
699 | 			p.boxB.style.left = x+'px';
700 | 			p.boxB.style.top = y+'px';
701 | 			p.boxB.style.zIndex = THIS.pickerZIndex;
702 | 			p.boxB.style.border = THIS.pickerBorder+'px solid';
703 | 			p.boxB.style.borderColor = THIS.pickerBorderColor;
704 | 			p.boxB.style.background = THIS.pickerFaceColor;
705 | 
706 | 			// pad image
707 | 			p.pad.style.width = jscolor.images.pad[0]+'px';
708 | 			p.pad.style.height = jscolor.images.pad[1]+'px';
709 | 
710 | 			// pad border
711 | 			p.padB.style.position = 'absolute';
712 | 			p.padB.style.left = THIS.pickerFace+'px';
713 | 			p.padB.style.top = THIS.pickerFace+'px';
714 | 			p.padB.style.border = THIS.pickerInset+'px solid';
715 | 			p.padB.style.borderColor = THIS.pickerInsetColor;
716 | 
717 | 			// pad mouse area
718 | 			p.padM.style.position = 'absolute';
719 | 			p.padM.style.left = '0';
720 | 			p.padM.style.top = '0';
721 | 			p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px';
722 | 			p.padM.style.height = p.box.style.height;
723 | 			p.padM.style.cursor = 'crosshair';
724 | 
725 | 			// slider image
726 | 			p.sld.style.overflow = 'hidden';
727 | 			p.sld.style.width = jscolor.images.sld[0]+'px';
728 | 			p.sld.style.height = jscolor.images.sld[1]+'px';
729 | 
730 | 			// slider border
731 | 			p.sldB.style.display = THIS.slider ? 'block' : 'none';
732 | 			p.sldB.style.position = 'absolute';
733 | 			p.sldB.style.right = THIS.pickerFace+'px';
734 | 			p.sldB.style.top = THIS.pickerFace+'px';
735 | 			p.sldB.style.border = THIS.pickerInset+'px solid';
736 | 			p.sldB.style.borderColor = THIS.pickerInsetColor;
737 | 
738 | 			// slider mouse area
739 | 			p.sldM.style.display = THIS.slider ? 'block' : 'none';
740 | 			p.sldM.style.position = 'absolute';
741 | 			p.sldM.style.right = '0';
742 | 			p.sldM.style.top = '0';
743 | 			p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px';
744 | 			p.sldM.style.height = p.box.style.height;
745 | 			try {
746 | 				p.sldM.style.cursor = 'pointer';
747 | 			} catch(eOldIE) {
748 | 				p.sldM.style.cursor = 'hand';
749 | 			}
750 | 
751 | 			// "close" button
752 | 			function setBtnBorder() {
753 | 				var insetColors = THIS.pickerInsetColor.split(/\s+/);
754 | 				var pickerOutsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
755 | 				p.btn.style.borderColor = pickerOutsetColor;
756 | 			}
757 | 			p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
758 | 			p.btn.style.position = 'absolute';
759 | 			p.btn.style.left = THIS.pickerFace + 'px';
760 | 			p.btn.style.bottom = THIS.pickerFace + 'px';
761 | 			p.btn.style.padding = '0 15px';
762 | 			p.btn.style.height = '18px';
763 | 			p.btn.style.border = THIS.pickerInset + 'px solid';
764 | 			setBtnBorder();
765 | 			p.btn.style.color = THIS.pickerButtonColor;
766 | 			p.btn.style.font = '12px sans-serif';
767 | 			p.btn.style.textAlign = 'center';
768 | 			try {
769 | 				p.btn.style.cursor = 'pointer';
770 | 			} catch(eOldIE) {
771 | 				p.btn.style.cursor = 'hand';
772 | 			}
773 | 			p.btn.onmousedown = function () {
774 | 				THIS.hidePicker();
775 | 			};
776 | 			p.btnS.style.lineHeight = p.btn.style.height;
777 | 
778 | 			// load images in optimal order
779 | 			switch(modeID) {
780 | 				case 0: var padImg = 'hs.png'; break;
781 | 				case 1: var padImg = 'hv.png'; break;
782 | 			}
783 | 			p.padM.style.backgroundImage = "url('"+jscolor.getDir()+"cross.gif')";
784 | 			p.padM.style.backgroundRepeat = "no-repeat";
785 | 			p.sldM.style.backgroundImage = "url('"+jscolor.getDir()+"arrow.gif')";
786 | 			p.sldM.style.backgroundRepeat = "no-repeat";
787 | 			p.pad.style.backgroundImage = "url('"+jscolor.getDir()+padImg+"')";
788 | 			p.pad.style.backgroundRepeat = "no-repeat";
789 | 			p.pad.style.backgroundPosition = "0 0";
790 | 
791 | 			// place pointers
792 | 			redrawPad();
793 | 			redrawSld();
794 | 
795 | 			jscolor.picker.owner = THIS;
796 | 			document.getElementsByTagName('body')[0].appendChild(p.boxB);
797 | 		}
798 | 
799 | 
800 | 		function getPickerDims(o) {
801 | 			var dims = [
802 | 				2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[0] +
803 | 					(o.slider ? 2*o.pickerInset + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
804 | 				o.pickerClosable ?
805 | 					4*o.pickerInset + 3*o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
806 | 					2*o.pickerInset + 2*o.pickerFace + jscolor.images.pad[1]
807 | 			];
808 | 			return dims;
809 | 		}
810 | 
811 | 
812 | 		function redrawPad() {
813 | 			// redraw the pad pointer
814 | 			switch(modeID) {
815 | 				case 0: var yComponent = 1; break;
816 | 				case 1: var yComponent = 2; break;
817 | 			}
818 | 			var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1));
819 | 			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1));
820 | 			jscolor.picker.padM.style.backgroundPosition =
821 | 				(THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' +
822 | 				(THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px';
823 | 
824 | 			// redraw the slider image
825 | 			var seg = jscolor.picker.sld.childNodes;
826 | 
827 | 			switch(modeID) {
828 | 				case 0:
829 | 					var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
830 | 					for(var i=0; i<seg.length; i+=1) {
831 | 						seg[i].style.backgroundColor = 'rgb('+
832 | 							(rgb[0]*(1-i/seg.length)*100)+'%,'+
833 | 							(rgb[1]*(1-i/seg.length)*100)+'%,'+
834 | 							(rgb[2]*(1-i/seg.length)*100)+'%)';
835 | 					}
836 | 					break;
837 | 				case 1:
838 | 					var rgb, s, c = [ THIS.hsv[2], 0, 0 ];
839 | 					var i = Math.floor(THIS.hsv[0]);
840 | 					var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i);
841 | 					switch(i) {
842 | 						case 6:
843 | 						case 0: rgb=[0,1,2]; break;
844 | 						case 1: rgb=[1,0,2]; break;
845 | 						case 2: rgb=[2,0,1]; break;
846 | 						case 3: rgb=[2,1,0]; break;
847 | 						case 4: rgb=[1,2,0]; break;
848 | 						case 5: rgb=[0,2,1]; break;
849 | 					}
850 | 					for(var i=0; i<seg.length; i+=1) {
851 | 						s = 1 - 1/(seg.length-1)*i;
852 | 						c[1] = c[0] * (1 - s*f);
853 | 						c[2] = c[0] * (1 - s);
854 | 						seg[i].style.backgroundColor = 'rgb('+
855 | 							(c[rgb[0]]*100)+'%,'+
856 | 							(c[rgb[1]]*100)+'%,'+
857 | 							(c[rgb[2]]*100)+'%)';
858 | 					}
859 | 					break;
860 | 			}
861 | 		}
862 | 
863 | 
864 | 		function redrawSld() {
865 | 			// redraw the slider pointer
866 | 			switch(modeID) {
867 | 				case 0: var yComponent = 2; break;
868 | 				case 1: var yComponent = 1; break;
869 | 			}
870 | 			var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1));
871 | 			jscolor.picker.sldM.style.backgroundPosition =
872 | 				'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px';
873 | 		}
874 | 
875 | 
876 | 		function isPickerOwner() {
877 | 			return jscolor.picker && jscolor.picker.owner === THIS;
878 | 		}
879 | 
880 | 
881 | 		function blurTarget() {
882 | 			if(valueElement === target) {
883 | 				THIS.importColor();
884 | 			}
885 | 			if(THIS.pickerOnfocus) {
886 | 				THIS.hidePicker();
887 | 			}
888 | 		}
889 | 
890 | 
891 | 		function blurValue() {
892 | 			if(valueElement !== target) {
893 | 				THIS.importColor();
894 | 			}
895 | 		}
896 | 
897 | 
898 | 		function setPad(e) {
899 | 			var mpos = jscolor.getRelMousePos(e);
900 | 			var x = mpos.x - THIS.pickerFace - THIS.pickerInset;
901 | 			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
902 | 			switch(modeID) {
903 | 				case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break;
904 | 				case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break;
905 | 			}
906 | 		}
907 | 
908 | 
909 | 		function setSld(e) {
910 | 			var mpos = jscolor.getRelMousePos(e);
911 | 			var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
912 | 			switch(modeID) {
913 | 				case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break;
914 | 				case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break;
915 | 			}
916 | 		}
917 | 
918 | 
919 | 		function dispatchImmediateChange() {
920 | 			if (THIS.onImmediateChange) {
921 | 				var callback;
922 | 				if (typeof THIS.onImmediateChange === 'string') {
923 | 					callback = new Function (THIS.onImmediateChange);
924 | 				} else {
925 | 					callback = THIS.onImmediateChange;
926 | 				}
927 | 				callback.call(THIS);
928 | 			}
929 | 		}
930 | 
931 | 
932 | 		var THIS = this;
933 | 		var modeID = this.pickerMode.toLowerCase()==='hvs' ? 1 : 0;
934 | 		var abortBlur = false;
935 | 		var
936 | 			valueElement = jscolor.fetchElement(this.valueElement),
937 | 			styleElement = jscolor.fetchElement(this.styleElement);
938 | 		var
939 | 			holdPad = false,
940 | 			holdSld = false,
941 | 			touchOffset = {};
942 | 		var
943 | 			leaveValue = 1<<0,
944 | 			leaveStyle = 1<<1,
945 | 			leavePad = 1<<2,
946 | 			leaveSld = 1<<3;
947 | 
948 | 		// target
949 | 		jscolor.addEvent(target, 'focus', function() {
950 | 			if(THIS.pickerOnfocus) { THIS.showPicker(); }
951 | 		});
952 | 		jscolor.addEvent(target, 'blur', function() {
953 | 			if(!abortBlur) {
954 | 				window.setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false; }, 0);
955 | 			} else {
956 | 				abortBlur = false;
957 | 			}
958 | 		});
959 | 
960 | 		// valueElement
961 | 		if(valueElement) {
962 | 			var updateField = function() {
963 | 				THIS.fromString(valueElement.value, leaveValue);
964 | 				dispatchImmediateChange();
965 | 			};
966 | 			jscolor.addEvent(valueElement, 'keyup', updateField);
967 | 			jscolor.addEvent(valueElement, 'input', updateField);
968 | 			jscolor.addEvent(valueElement, 'blur', blurValue);
969 | 			valueElement.setAttribute('autocomplete', 'off');
970 | 		}
971 | 
972 | 		// styleElement
973 | 		if(styleElement) {
974 | 			styleElement.jscStyle = {
975 | 				backgroundImage : styleElement.style.backgroundImage,
976 | 				backgroundColor : styleElement.style.backgroundColor,
977 | 				color : styleElement.style.color
978 | 			};
979 | 		}
980 | 
981 | 		// require images
982 | 		switch(modeID) {
983 | 			case 0: jscolor.requireImage('hs.png'); break;
984 | 			case 1: jscolor.requireImage('hv.png'); break;
985 | 		}
986 | 		jscolor.requireImage('cross.gif');
987 | 		jscolor.requireImage('arrow.gif');
988 | 
989 | 		this.importColor();
990 | 	}
991 | 
992 | };
993 | 
994 | 
995 | jscolor.install();
996 | 


--------------------------------------------------------------------------------
/dependencies/microtpl.js:
--------------------------------------------------------------------------------
 1 | // Simple JavaScript Templating
 2 | // John Resig - http://ejohn.org/ - MIT Licensed
 3 | (function() {
 4 |     var cache = {};
 5 | 
 6 |     this.tmpl = function tmpl(str, data) {
 7 |         // Figure out if we're getting a template, or if we need to
 8 |         // load the template - and be sure to cache the result.
 9 |         var fn = !/\W/.test(str) ?
10 |                 cache[str] = cache[str] ||
11 |                 tmpl(document.getElementById(str).innerHTML) :
12 |                 // Generate a reusable function that will serve as a template
13 |                 // generator (and which will be cached).
14 |                 new Function("obj",
15 |                 "var p=[],print=function(){p.push.apply(p,arguments);};" +
16 |                 // Introduce the data as local variables using with(){}
17 |                 "with(obj){p.push('" +
18 |                 // Convert the template into pure JavaScript
19 |                 str
20 |                 .replace(/[\r\t\n]/g, " ")
21 |                 .split("<%").join("\t")
22 |                 .replace(/((^|%>)[^\t]*)'/g, "$1\r")
23 |                 .replace(/\t=(.*?)%>/g, "',$1,'")
24 |                 .split("\t").join("');")
25 |                 .split("%>").join("p.push('")
26 |                 .split("\r").join("\\'")
27 |                 + "');}return p.join('');");
28 | 
29 |         // Provide some basic currying to the user
30 |         return data ? fn(data) : fn;
31 |     };
32 | })();


--------------------------------------------------------------------------------
/source/livecsseditor/editors/lceBackground.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Livecssditor Background editor
 3 |  * 
 4 |  *
 5 |  * @author Milan Rukavina
 6 |  * @version 2.0
 7 |  */
 8 | 
 9 | ;(function($){
10 | 
11 |     //attach image chooser
12 |     $.fn.livecsseditor.setPropertyEditor(['background-image'],function bgImageEditorCallback(customizer, vars, config){
13 |         var urls = config.urls;
14 |         var html = '<select class="form-control"></select>';
15 |         var value = vars.value.replace('url(','').replace(')','');
16 |         vars.container.html(html);
17 |         var $select = vars.container.find('select');
18 |         html = '';
19 |         for(var url in urls){
20 |             var selected = '', urlPath = url, urlName = urls[url];
21 |             if(urls instanceof Array){
22 |                 urlPath = urls[url];
23 |             }
24 |             if ($.trim(value).toLowerCase() == url.toLowerCase()) {
25 |                 selected = ' selected="selected"';
26 |             }
27 |             html += '<option value="' + urlPath + '"' + selected  + '>' + urlName + '</option>';
28 |         }
29 |         $select .html(html)
30 |                 .chosen({width: "95%"})
31 |                 .change(function(evt, params){
32 |                     vars.setValue('url("' + $(this).val() + '")');
33 |                 })
34 |                 .on('chosen:showing_dropdown', function(evt, chosen) {
35 |                     vars.container.parents('.panel').css('overflow','visible');
36 |                 });
37 |     });
38 |     
39 | })(jQuery);
40 | 


--------------------------------------------------------------------------------
/source/livecsseditor/editors/lceColor.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * livecsseditor Color editor
 3 |  * 
 4 |  *
 5 |  * @author Milan Rukavina
 6 |  * @version 2.0
 7 |  */
 8 | 
 9 | ;(function($){
10 |     var hexDigits = new Array
11 |     ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
12 | 
13 |     //Function to convert hex format to a rgb color
14 |     function rgb2hex(rgb) {
15 |         if(rgb.substr(0, 4).toLowerCase() == 'rgba'){
16 |             rgb = rgb.match(/^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+)\)$/);
17 |             return rgba2hex(parseInt(rgb[1],10),parseInt(rgb[2],10),parseInt(rgb[3],10),parseInt(rgb[4],10));
18 |         }
19 |         var rgbArr = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
20 |         if(!rgbArr){
21 |             return rgb;
22 |         }
23 |         return hex(rgbArr[1]) + hex(rgbArr[2]) + hex(rgbArr[3]);
24 |     }
25 | 
26 |     // convert RGBA color data to hex
27 |     function rgba2hex(r, g, b, a) {
28 |         if(r == g && g == b && b == a && a == 0){
29 |             return '';
30 |         }
31 |         if (r > 255 || g > 255 || b > 255 || a > 255)
32 |             throw "Invalid color component";
33 |         return (256 + r).toString(16).substr(1) +((1 << 24) + (g << 16) | (b << 8) | a).toString(16).substr(1);
34 |     }
35 |     
36 |     /**
37 |      * Convert to hex string
38 |      * 
39 |      * @param {Integer} x
40 |      * @returns {String}
41 |      */
42 |     function hex(x) {
43 |         return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
44 |     }
45 | 
46 |     //attach color editor
47 |     $.fn.livecsseditor.setPropertyEditor(['color','background-color'],function colorEditorCallback(customizer, vars, config){
48 |         var html = '<input type="text" class="form-control" value="" />';
49 |         vars.container.html(html);
50 |         // Checks if value exists
51 |         if(typeof vars.value == 'undefined'){
52 |         	vars.value = 'rgba(0,0,0,0)';
53 |         }
54 |         //convert to hex
55 |         if(vars.value.substr(0, 1) == '#'){
56 |             var hexValue = vars.value.substr(1);
57 |         }
58 |         else{
59 |             var hexValue = rgb2hex(vars.value);
60 |         }        
61 |         //create picker
62 |         var cPicker = new jscolor.color(vars.container.find('input').get(0), {});
63 |         cPicker.required = false;
64 |         cPicker.fromString(hexValue)        
65 |         //when value is changed
66 |         vars.container.find('input').val(hexValue).change(function(){
67 |             var color  = $(this).val();
68 |             if(color == ''){
69 |                 color = "rgba(0,0,0,0)";
70 |             }
71 |             else{
72 |                 color = '#' + color;
73 |             }
74 |             vars.setValue(color);
75 |         });
76 |     });    
77 | })(jQuery);
78 | 


--------------------------------------------------------------------------------
/source/livecsseditor/editors/lceFont.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * livecsseditor Font editor
 3 |  * 
 4 |  *
 5 |  * @author Milan Rukavina
 6 |  * @version 2.0
 7 |  */
 8 | 
 9 | ;(function($){
10 | 
11 |     //attach font editor
12 |     $.fn.livecsseditor.setPropertyEditor(['font-family'],function fontFamilyEditorCallback(customizer, vars, config){
13 |         var fonts = config.names;
14 |         if(typeof vars.value == 'undefined'){
15 |         	var fontNames = [];
16 |         }else{
17 |         	var fontNames = vars.value.split(",");
18 |         }
19 |         for(var i in fontNames){
20 |             fontNames[i] = $.trim(fontNames[i]).toLowerCase();
21 |         }
22 |         var html = '<select class="form-control" multiple="multiple"></select>';
23 |         vars.container.html(html);
24 |         var $select = vars.container.find('select');
25 |         html = '';
26 |         for(var i in fonts){
27 |             var font = fonts[i];
28 |             var selected = '';
29 |             $.each(fontNames, function(index, value) {
30 |                 if (selected == '' && $.trim(value).toLowerCase() == font.toLowerCase()) {
31 |                     selected = ' selected="selected"';
32 |                     return false;
33 |                 }
34 |             });           
35 |             html += '<option value="' + font.toLowerCase() + '"' + selected  + ' style="font-family:' + font + ';">' + font + '</option>';
36 |         }
37 |         //chosen plugin
38 |         $select .html(html)
39 |                 .chosen({width: "95%"})
40 |                 .change(function(evt, params){
41 |                     if(params.selected){
42 |                         fontNames.push(params.selected);
43 |                     }
44 |                     if(params.deselected){
45 |                         var index = $.inArray(params.deselected,fontNames);
46 |                         if(index >= 0){
47 |                             fontNames.splice(index,1);
48 |                         }
49 |                     }
50 |                     //fontNames keeps order of selected fonts
51 |                     if(fontNames){
52 |                         var val = fontNames.join(',');
53 |                     }
54 |                     else{
55 |                         var val = "";
56 |                     }
57 |                     vars.setValue(val);
58 |                 })
59 |                 .on('chosen:showing_dropdown', function(evt, chosen) {
60 |                     //hack to show chosen in accordion
61 |                     vars.container.parents('.panel').css('overflow','visible');
62 |                 });
63 |     });    
64 | })(jQuery);
65 | 


--------------------------------------------------------------------------------
/source/livecsseditor/editors/lcePosition.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * livecsseditor Position editor
 3 |  * 
 4 |  *
 5 |  * @author Milan Rukavina
 6 |  * @version 2.0
 7 |  */
 8 | 
 9 | ;(function($){ 
10 |     //position editor attach
11 |     $.fn.livecsseditor.setPropertyEditor(['left','top'],function positionEditorCallback(customizer, vars, config){
12 |         customizer.defaultEditorCallback(customizer, vars, config);        
13 |         var doc = customizer.getIFDoc();
14 |         if(!customizer.$preview.contents().find(vars.selector).data("hasPosEditor")){
15 |             customizer.jqueryUILoad(doc,function(){
16 |                 customizer.appendHead(null,doc,'js',null,'$("' + vars.selector + '").draggable({stop:function(event, ui){document.posCallbacks["' + vars.selector + '"].callback(event,ui);}});');
17 |             });           
18 |             doc.posCallbacks = doc.posCallbacks || {};
19 |             doc.posCallbacks[vars.selector] = {
20 |                 callback: function(event, ui){
21 |                     for(var i in doc.posCallbacks[vars.selector].listeners){
22 |                         doc.posCallbacks[vars.selector].listeners[i](event, ui);
23 |                     }
24 |                 },
25 |                 listeners:[]
26 |             };            
27 |         }
28 |         customizer.$preview.contents().find(vars.selector).data("hasPosEditor",true);
29 |         
30 |         doc.posCallbacks[vars.selector].listeners.push(function(event, ui){
31 |             var value = ui.position[vars.prop] + 'px';
32 |             vars.container.find('input').val(value);
33 |             vars.setValue(value);
34 |         });      
35 |     });    
36 | })(jQuery);
37 | 


--------------------------------------------------------------------------------
/source/livecsseditor/editors/lceSize.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * livecsseditor Size editors
 3 |  * 
 4 |  *
 5 |  * @author Milan Rukavina
 6 |  * @version 2.0
 7 |  */
 8 | 
 9 | ;(function($){
10 |     //size editor attach
11 |     $.fn.livecsseditor.setPropertyEditor(['width','height'],function sizeEditorCallback(customizer, vars, config){
12 |         customizer.defaultEditorCallback(customizer, vars, config);
13 |         var doc = customizer.getIFDoc();
14 |         if(!customizer.$preview.contents().find(vars.selector).data("hasSizeEditor")){
15 |             customizer.jqueryUILoad(doc,function(){
16 |                 customizer.appendHead(null,doc,'js',null,'$("' + vars.selector + '").resizable({stop:function(event, ui){document.sizeCallbacks["' + vars.selector + '"].callback(event,ui);}});');
17 |             });           
18 |             doc.sizeCallbacks = doc.sizeCallbacks || {};
19 |             doc.sizeCallbacks[vars.selector] = {
20 |                 callback: function(event, ui){
21 |                     for(var i in doc.sizeCallbacks[vars.selector].listeners){
22 |                         doc.sizeCallbacks[vars.selector].listeners[i](event, ui);
23 |                     }
24 |                 },
25 |                 listeners:[]
26 |             };            
27 |         }
28 |         customizer.$preview.contents().find(vars.selector).data("hasSizeEditor",true);
29 |         
30 |         doc.sizeCallbacks[vars.selector].listeners.push(function(event, ui){
31 |             var value = ui.size[vars.prop] + 'px';
32 |             vars.container.find('input').val(value);
33 |             vars.setValue(value);
34 |         });     
35 |     });
36 |     
37 | })(jQuery);
38 | 


--------------------------------------------------------------------------------
/source/livecsseditor/livecsseditor-2.0.css:
--------------------------------------------------------------------------------
  1 | #lcePreview{
  2 |     min-height: 500px;
  3 |     width: 100%;    
  4 | }
  5 | 
  6 | #lceProperties ul.property-list{
  7 |     list-style: none;
  8 |     padding: 0;
  9 |     margin: 0;
 10 | }
 11 | 
 12 | /* CHOSEN */
 13 | 
 14 | select{
 15 |     width: 80%;/* Only for example */
 16 | }
 17 | 
 18 | select.form-control + .chosen-container.chosen-container-single .chosen-single {
 19 |     display: block;
 20 |     width: 100%;
 21 |     height: 34px;
 22 |     padding: 6px 12px;
 23 |     font-size: 14px;
 24 |     line-height: 1.428571429;
 25 |     color: #555;
 26 |     vertical-align: middle;
 27 |     background-color: #fff;
 28 |     border: 1px solid #ccc;
 29 |     border-radius: 4px;
 30 |     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
 31 |     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
 32 |     -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
 33 |     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
 34 |     background-image:none;
 35 | }
 36 | 
 37 | select.form-control + .chosen-container.chosen-container-single .chosen-single div {
 38 |     top:4px;
 39 |     color:#000;
 40 | }
 41 | 
 42 | select.form-control + .chosen-container .chosen-drop {
 43 |     background-color: #FFF;
 44 |     border: 1px solid #CCC;
 45 |     border: 1px solid rgba(0, 0, 0, 0.15);
 46 |     border-radius: 4px;
 47 |     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 48 |     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 49 |     background-clip: padding-box;
 50 |     margin: 2px 0 0;
 51 | 
 52 | }
 53 | 
 54 | select.form-control + .chosen-container .chosen-search input[type=text] {
 55 |     display: block;
 56 |     width: 100%;
 57 |     height: 34px;
 58 |     padding: 6px 12px;
 59 |     font-size: 14px;
 60 |     line-height: 1.428571429;
 61 |     color: #555;
 62 |     vertical-align: middle;
 63 |     background-color: #FFF;
 64 |     border: 1px solid #CCC;
 65 |     border-radius: 4px;
 66 |     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 67 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 68 |     -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 69 |     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 70 |     background-image:none;
 71 | }
 72 | 
 73 | select.form-control + .chosen-container .chosen-results {
 74 |     margin: 2px 0 0;
 75 |     padding: 5px 0;
 76 |     font-size: 14px;
 77 |     list-style: none;
 78 |     background-color: #fff;
 79 |     margin-bottom: 5px;
 80 | }
 81 | 
 82 | select.form-control + .chosen-container .chosen-results li ,
 83 | select.form-control + .chosen-container .chosen-results li.active-result {
 84 |     display: block;
 85 |     padding: 3px 20px;
 86 |     clear: both;
 87 |     font-weight: normal;
 88 |     line-height: 1.428571429;
 89 |     color: #333;
 90 |     white-space: nowrap;
 91 |     background-image:none;
 92 | }
 93 | select.form-control + .chosen-container .chosen-results li:hover,
 94 | select.form-control + .chosen-container .chosen-results li.active-result:hover,
 95 | select.form-control + .chosen-container .chosen-results li.highlighted
 96 | {
 97 |     color: #FFF;
 98 |     text-decoration: none;
 99 |     background-color: #428BCA;
100 |     background-image:none;
101 | }
102 | 
103 | select.form-control + .chosen-container-multi .chosen-choices {
104 |     display: block;
105 |     width: 100%;
106 |     min-height: 34px;
107 |     padding: 6px;
108 |     font-size: 14px;
109 |     line-height: 1.428571429;
110 |     color: #555;
111 |     vertical-align: middle;
112 |     background-color: #FFF;
113 |     border: 1px solid #CCC;
114 |     border-radius: 4px;
115 |     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
116 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
117 |     -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
118 |     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
119 |     background-image:none;
120 | }
121 | 
122 | select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
123 |     height:auto;
124 |     padding:5px 0;
125 | }
126 | 
127 | select.form-control + .chosen-container-multi .chosen-choices li.search-choice {
128 | 
129 |     background-image: none;
130 |     padding: 3px 24px 3px 5px;
131 |     margin: 0 6px 0 0;
132 |     font-size: 14px;
133 |     font-weight: normal;
134 |     line-height: 1.428571429;
135 |     text-align: center;
136 |     white-space: nowrap;
137 |     vertical-align: middle;
138 |     cursor: pointer;
139 |     border: 1px solid #ccc;
140 |     border-radius: 4px;
141 |     color: #333;
142 |     background-color: #FFF;
143 |     border-color: #CCC;
144 | }
145 | 
146 | select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
147 |     top:8px;
148 |     right:6px;
149 | }
150 | 
151 | select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
152 | select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
153 | select.form-control + .chosen-container .chosen-search input[type=text]:focus{
154 |     border-color: #66AFE9;
155 |     outline: 0;
156 |     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
157 |     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
158 | }
159 | 
160 | select.form-control + .chosen-container-multi .chosen-results li.result-selected{
161 |     display: list-item;
162 |     color: #ccc;
163 |     cursor: default;
164 |     background-color: white;
165 | }
166 | 
167 | /* FONTS */
168 | 
169 | @font-face {
170 |   font-family: 'Glyphicons Halflings';
171 |   src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');
172 |   src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
173 | }
174 | 
175 | 


--------------------------------------------------------------------------------
/source/livecsseditor/livecsseditor-2.0.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Livecsseditor
  3 |  *
  4 |  * @author Milan Rukavina
  5 |  * @version 2.0
  6 |  */
  7 | 
  8 | ;
  9 | (function( $, window, document, undefined ){
 10 |     /**
 11 |      * Default optons values
 12 |      */
 13 |     /**
 14 |      * default options
 15 |      */
 16 |     var defaults =
 17 |     {
 18 |         layout_tpl:' \
 19 | <div class="row ">\
 20 |     <div class="col-md-9" id="lcePreviewPanel">\
 21 |         <div class="panel panel-primary">\
 22 |             <div class="panel-heading"><h3 class="panel-title">Preview</h3></div>\
 23 |             <div class="panel-body">\
 24 |                 <iframe id="lcePreview" src=""></iframe>\
 25 |             </div>\
 26 |         </div>\
 27 |     </div>\
 28 |     <div id="lceInspector" class="col-md-3">\
 29 |         <%\
 30 |         var pageCount = 0;\
 31 |         for (var pagePath in pages){pageCount++;}\
 32 |         if(pageCount > 1){%>\
 33 |         <div class="panel panel-primary">\
 34 |             <div class="panel-heading"><h3 class="panel-title">Pages</h3></div>\
 35 |             <div class="panel-body">\
 36 |                 <select class="form-control" id="lcePages">\
 37 |                     <% for (var pagePath in pages){%>\
 38 |                     <option value="<%=pagePath%>"><%=pages[pagePath].name%></option>\
 39 |                     <% } %>\
 40 |                 </select>\
 41 |             </div>\
 42 |         </div>\
 43 |         <% }%>\
 44 |         <div id="lceProperties">\
 45 |         </div>\
 46 |     </div>\
 47 | </div>',
 48 |         props_tpl:'\
 49 | <div class="panel-group" id="propAccordion">\
 50 | <%\
 51 | var selectorIndex = 0;\
 52 | for (var selector in properties){\
 53 |     var props = properties[selector].props;\
 54 | %>\
 55 |     <div class="panel panel-default <%="selector-index-" + selectorIndex%>">\
 56 |         <div class="panel-heading">\
 57 |             <h4 class="panel-title">\
 58 |             <% if(properties[selector].iconClass){ %>\
 59 |                 <span class="<%=properties[selector].iconClass %>"></span>\
 60 |             <% } %>\
 61 |                 <a class="accordion-toggle" data-selector="<%=selector%>" data-toggle="collapse" data-parent="#propAccordion" data-target="#<%="properties-" + selectorIndex%>" href="#<%="properties-" + selectorIndex%>"><%=properties[selector].name%></a>\
 62 |             </h4>\
 63 |         </div>\
 64 |         <div id="<%="properties-" + selectorIndex%>" class="panel-collapse collapse" data-selector="<%=selector%>">\
 65 |             <div class="panel-body">\
 66 |                     <% if(properties[selector].description){%> \
 67 |                     <div class="well well-sm"><%=properties[selector].description%></div>\
 68 |                     <% }%>\
 69 |                     <ul class="property-list">\
 70 |                     <% for (var propId in props){%>\
 71 |                         <li class="<%="prop-index-" + propId%> form-group" data-prop="<%=props[propId]%>">\
 72 |                             <% var propName = (properties[selector].labels && properties[selector].labels[propId])?properties[selector].labels[propId]:props[propId]; %>\
 73 |                             <label><%=propName%></label>\
 74 |                             <div class="lcePropValue"></div>\
 75 |                         </li>\
 76 |                     <% } %>\
 77 |                 </ul>\
 78 |             </div>\
 79 |         </div>\
 80 |     </div>\
 81 | <%\
 82 |     selectorIndex++;\
 83 | } %>\
 84 | </div>\
 85 | ',
 86 |         hoverColor: '#faf3ba',
 87 |         editorsConfig:{
 88 |             "background-position": {
 89 |                 "fixedValues": {
 90 |                     "original": "",
 91 |                     "bottom": "Bottom",
 92 |                     "left": "Left",
 93 |                     "right": "Right",
 94 |                     "center": "Center",
 95 |                     "top": "Top"
 96 |                 }
 97 |             },
 98 |             "display": {
 99 |                 "fixedValues": {
100 |                     "original": "",
101 |                     "block": "Block",
102 |                     "inline": "Inline",
103 |                     "none": "None"
104 |                 }
105 |             },
106 |             "float": {
107 |                 "fixedValues": {
108 |                     "original": "",
109 |                     "left": "Left",
110 |                     "right": "Right",
111 |                     "none": "None"
112 |                 }
113 |             },
114 |             "font-family": {
115 |                 "names": ["Arial", "Times New Roman"]
116 |             },
117 |             "font-weight": {
118 |                 "fixedValues": {
119 |                     "original": "",
120 |                     "bold": "Bold",
121 |                     "normal": "Normal"
122 |                 }
123 |             },
124 |             "font-style": {
125 |                 "fixedValues": {
126 |                     "original": "",
127 |                     "italic": "Italic",
128 |                     "normal": "Normal",
129 |                     "oblique": "Oblique"
130 |                 }
131 |             },
132 |             "text-decoration": {
133 |                 "fixedValues": {
134 |                     "original": "",
135 |                     "none": "None",
136 |                     "underline": "Underline"
137 |                 }
138 |             },
139 |             "text-align": {
140 |                 "fixedValues": {
141 |                     "original": "",
142 |                     "left": "Left",
143 |                     "right": "Right",
144 |                     "center": "Center",
145 |                     "justify": "Justify"
146 |                 }
147 |             },
148 |             "vertical-align": {
149 |                 "fixedValues": {
150 |                     "original": "",
151 |                     "auto": "Auto",
152 |                     "top": "Top",
153 |                     "middle": "Middle",
154 |                     "bottom": "Bottom",
155 |                     "baseline": "Baseline"
156 |                 }
157 |             }
158 |         }
159 |     };
160 | 
161 |     var propEditors = {};
162 | 
163 |     /**
164 |      * Livecsseditor constructor
165 |      *
166 |      * @param {object} elem
167 |      * @param {object} options
168 |      * @return {Livecsseditor}
169 |      */
170 |     var Livecsseditor = function( elem, options ){
171 |         this.elem = elem;
172 |         this.$elem = $(elem);
173 |         this.options = options;
174 |         this.metadata = this.$elem.data("Livecsseditor-options" );
175 |         this.config = $.extend({}, defaults, this.options);
176 |         this.pageDef = {};
177 |         this.pagePath = null;
178 |         this.init();
179 |         this.$elem.data("Livecsseditor-instance",this);
180 |     };
181 | 
182 |     /**
183 |      * Init plugin - update dom, set properties
184 |      */
185 |     Livecsseditor.prototype.init = function(){
186 |         var self = this;
187 | 
188 | 
189 |         this.$elem.html(tmpl(this.config.layout_tpl,{'pages':this.config.pages}));
190 |         this.previewId = 'lcePreview';
191 |         this.$preview = this.$elem.find('#' + this.previewId);
192 |         this.$inspector = this.$elem.find('#lceInspector');
193 |         this.$properties = this.$elem.find('#lceProperties');
194 |         //get first page
195 |         for(var pagePath in self.config.pages){break;}
196 |         //load page
197 |         this.loadPage(pagePath);
198 |         //on change page
199 |         this.$inspector.find('#lcePages').change(function(){
200 |             self.loadPage($(this).val())
201 |         });
202 |         //set default editor
203 |         $.fn.livecsseditor.setPropertyEditor('default', this.defaultEditorCallback);
204 |     }
205 |     
206 | 
207 |     /**
208 |      * Get css or json custimization - for all pages or just pagePath
209 |      *
210 |      * @param {string} pagePath
211 |      * @param {boolean} returnJson
212 |      * @return {string|object}
213 |      */
214 |     Livecsseditor.prototype.getCss = function(pagePath, returnJson){
215 |         var self = this, css = '', json = {};
216 |         //get css for a page
217 |         var cssForPage = function cssForPage(props){
218 |             var css = '', json = {};
219 |             for(var propSelector in props){
220 |                 var selectorCss = '', selectorJson = {};
221 |                 props[propSelector].values = props[propSelector].values || {};
222 |                 for(var i = 0; i < props[propSelector].props.length; i++){
223 |                     var prop = props[propSelector].props[i];
224 |                     if(props[propSelector].values[prop]){
225 |                         selectorCss += prop + ':' + props[propSelector].values[prop] + '; ';
226 |                         selectorJson[prop] = props[propSelector].values[prop];
227 |                     }
228 |                 }
229 |                 if(selectorCss != ''){
230 |                     css += propSelector + '{' + selectorCss + "}\n";
231 |                     json[propSelector] = selectorJson;
232 |                 }
233 |             }
234 |             if(returnJson){
235 |                 return json;
236 |             }
237 |             else{
238 |                 return css;
239 |             }            
240 |         }
241 |         //single page
242 |         if(pagePath){
243 |             if(returnJson){
244 |                 json[pagePath] = cssForPage(self.config.pages[pagePath].def);
245 |             }
246 |             else{
247 |                 css += cssForPage(self.config.pages[pagePath].def);
248 |             }            
249 |             
250 |         }
251 |         //all pages
252 |         else{
253 |             for(var currPagePath in self.config.pages){
254 |                 if(returnJson){
255 |                     json[pagePath] = cssForPage(self.config.pages[currPagePath].def);
256 |                 }
257 |                 else{
258 |                     css += cssForPage(self.config.pages[currPagePath].def);
259 |                 }
260 |             }
261 |         }
262 |         if(returnJson){
263 |             return json;
264 |         }
265 |         else{
266 |             return css;
267 |         }
268 |     }
269 |     
270 |     /**
271 |      * Load json object
272 |      * 
273 |      * @param {object} json
274 |      */
275 |     Livecsseditor.prototype.setJson = function(json){
276 |         var self = this;
277 |         for(var pagePath in json){
278 |             var pageDef = self.config.pages[pagePath].def;
279 |             for(var propSelector in json[pagePath]){
280 |                 pageDef[propSelector] = pageDef[propSelector] || {};
281 |                 pageDef[propSelector].values = pageDef[propSelector].values || {};
282 |                 for(var prop in json[pagePath][propSelector]){
283 |                     pageDef[propSelector].values[prop] = json[pagePath][propSelector][prop];
284 |                 }
285 |             }
286 |         }
287 |         //reload page path
288 |         if(this.pagePath){
289 |             this.loadPage(this.pagePath);
290 |         }
291 |     }
292 | 
293 |     /**
294 |      * Assign editor to a property
295 |      *
296 |      */
297 |     /**
298 |      * Get css or json custimization - for all pages or just pagePath
299 |      *
300 |      * @param {string} propSelector current css selector
301 |      * @param {string} prop css property
302 |      * @param {jQuery} valueContainer dom container
303 |      * @param {function} editor editor function
304 |      * @param {integer} selectorIndex selector index
305 |      * @param {integer} propertyIndex property index
306 |      * @param {object} editorConfig
307 |      */    
308 |     Livecsseditor.prototype.assignEditor = function(propSelector, prop, valueContainer, editor, selectorIndex, propertyIndex, editorConfig){
309 |         var self = this;
310 |         this.pageDef[propSelector].editors[prop] = editor(self, {
311 |             'id': 'editor-' + selectorIndex + '-' + propertyIndex,
312 |             'container': valueContainer,
313 |             'selector': propSelector,
314 |             'prop': prop,
315 |             'value': this.pageDef[propSelector].values[prop],
316 |             'setValue': function(value){
317 |                 var $element = self.$preview.contents().find(propSelector);
318 |                 if(!$element.data('original-' + prop)){
319 |                     $element.data('original-' + prop,$element.css(prop));
320 |                 }
321 |                 if(value == 'original'){
322 |                     value = $element.data('original-' + prop);
323 |                 }
324 |                 self.pageDef[propSelector].values[prop] = value;
325 |                 $element.css(prop,value);
326 |             }
327 |         }, editorConfig);        
328 |     }
329 | 
330 |     /**
331 |      * Load page
332 |      * 
333 |      * @param {string} pagePath page url
334 |      */
335 |     Livecsseditor.prototype.loadPage = function(pagePath){
336 |         var self = this, currEditor;
337 |         this.pagePath = pagePath;
338 |         this.pageDef = self.config.pages[pagePath].def;
339 |         //load iframe
340 |         self.$preview.attr("src", pagePath);
341 |         self.$preview.load(function(){
342 |             self.$properties.html(tmpl(self.config.props_tpl,{'properties':self.pageDef}));
343 |             //set editors, read values
344 |             var selectorIndex = 0;
345 |             for(var propSelector in self.pageDef){
346 |                 self.pageDef[propSelector].editors = self.pageDef[propSelector].editors || {};
347 |                 self.pageDef[propSelector].editorsConfig = self.pageDef[propSelector].editorsConfig || {};
348 |                 self.pageDef[propSelector].values = self.pageDef[propSelector].values || {};
349 |                 for(var i = 0; i < self.pageDef[propSelector].props.length; i++){
350 |                     var prop = self.pageDef[propSelector].props[i];
351 |                     //if values are not empty - we might come back from previous page
352 |                     //so we need to re-apply style
353 |                     if(self.pageDef[propSelector].values[prop]){
354 |                         self.$preview.contents().find(propSelector).css(prop,self.pageDef[propSelector].values[prop]);
355 |                     }
356 |                     else{
357 |                         //read value
358 |                         self.pageDef[propSelector].values[prop] = self.$preview.contents().find(propSelector).css(prop);
359 |                     }
360 |                     var query = '#properties-' + selectorIndex + ' li.prop-index-' + i + ' > div.lcePropValue';
361 |                     var valueContainer = self.$properties.find(query).first();
362 |                     currEditor = (propEditors[prop])?propEditors[prop]:propEditors['default'];
363 |                     //editor config for current selector
364 |                     var editorConfig = self.pageDef[propSelector].editorsConfig[prop];
365 |                     if(!editorConfig){
366 |                         //global config for editor
367 |                         editorConfig = self.config.editorsConfig[prop];
368 |                     }
369 |                     if(!editorConfig){
370 |                         editorConfig = {};
371 |                     }
372 |                     self.assignEditor(propSelector, prop, valueContainer, currEditor, selectorIndex, i, editorConfig);
373 |                 }
374 |                 self.$preview.contents().find(propSelector).data('selectorIndex',selectorIndex)
375 |                 .css('cursor','pointer')
376 |                 .hover(
377 |                     function() {
378 |                         if(!$(this).data('orig-color')){
379 |                             $(this).data('orig-color',$(this).css('background-color'));
380 |                         }
381 |                         $(this).css('background-color',self.config.hoverColor);
382 |                         //self.$properties.find('.panel-collapse').removeClass('in');
383 |                         //self.$properties.find('#properties-' + $(this).data('selectorIndex')).addClass('in');
384 |                         //console.log($(this).data('selectorIndex'));
385 |                     }, function() {
386 |                         $(this).css('background-color',$(this).data('orig-color'));
387 |                     }
388 |                 )
389 |                 .click(function(){
390 |                     //self.$properties.find('.panel-collapse').collapse('hide');
391 |                     var $properties = self.$properties.find('#properties-' + $(this).data('selectorIndex'));
392 |                     if(!$properties.hasClass('in')){
393 |                         self.$properties.find('#properties-' + $(this).data('selectorIndex')).collapse('toggle');
394 |                     }
395 |                 });
396 |                 selectorIndex++;
397 |             }
398 |             //mark selected selector
399 |             self.$properties.find('.panel-collapse').on('show.bs.collapse', function () {                
400 |                 var selected = self.$preview.contents().find($(this).data('selector'));
401 |                 if(!selected.data('orig-color')){
402 |                     selected.data('orig-color',selected.css('background-color'));
403 |                 }
404 | 
405 |                 selected.animate({'background-color':self.config.hoverColor},500,function(){
406 |                     $(this).css('background-color',selected.data('orig-color'));
407 |                 });
408 |             });            
409 |         })
410 |     }
411 | 
412 |     /**
413 |      * Default/fallback editor
414 |      * 
415 |      * @param {Livecsseditor} customizer
416 |      * @param {object} vars
417 |      * @param {object} config
418 |      */
419 |     Livecsseditor.prototype.defaultEditorCallback = function(customizer, vars, config){
420 |         if(config && config.fixedValues){
421 |             return customizer.genericOptionsEditor(config.fixedValues, vars);
422 |         }
423 |         var html = '<input type="text" class="form-control" value="" />';
424 |         vars.container.html(html);
425 |         vars.container.find('input').val(vars.value).change(function(){
426 |             vars.setValue($(this).val());
427 |         });
428 |     }
429 |     
430 |     /**
431 |      * Generic options editor
432 |      * 
433 |      * @param {object} options
434 |      * @param {object} vars
435 |      * @param {object} style
436 |      */
437 |     Livecsseditor.prototype.genericOptionsEditor = function(options,vars,styles){
438 |         var html = '<select class="form-control"></select>';
439 |         vars.container.html(html);
440 |         var $select = vars.container.find('select');
441 |         html = '';
442 |         var isArray = options instanceof Array;
443 |         for(var value in options){
444 |             var selected = '';
445 |             var currValue = value;
446 |             if(isArray){
447 |                 currValue = options[value];
448 |             }
449 |             if (vars.value == currValue) {
450 |                 selected = ' selected="selected"';
451 |             }
452 |             var style = '';
453 |             if(styles && styles[currValue]){
454 |                 style = ' style="' + styles[currValue] + '"';
455 |             }
456 |             html += '<option value="' + currValue + '"' + selected  + '">' + options[value] + '</option>';
457 |         }
458 |         $select.html(html).change(function(){
459 |             vars.setValue($(this).val());
460 |         });
461 |     }    
462 | 
463 |     /**
464 |      * Append script or style in document's head
465 |      * 
466 |      * @param {string} filename url
467 |      * @param {document} doc DOM document
468 |      * @param {string} ext js or css
469 |      * @param {string} id
470 |      * @param {string} content optional script content
471 |      */
472 |     Livecsseditor.prototype.appendHead = function(filename,doc,ext,id,content){
473 |         if (ext == "js"){ //if filename is a external JavaScript file
474 |             var fileref=doc.createElement('script');
475 |             fileref.setAttribute("type","text/javascript");
476 |             if(id){
477 |                 fileref.setAttribute("id", id);
478 |             }
479 |             if(!filename && content){
480 |                 fileref.innerHTML = content;
481 |             }else{
482 |                 fileref.setAttribute("src", filename);
483 |             }
484 |         }
485 |         else if (ext=="css"){ //if filename is an external CSS file
486 |             var fileref = doc.createElement("link");
487 |             fileref.setAttribute("rel", "stylesheet");
488 |             fileref.setAttribute("type", "text/css");
489 |             fileref.setAttribute("href", filename);
490 |         }
491 |         if (typeof fileref!="undefined"){
492 |             doc.getElementsByTagName("head")[0].appendChild(fileref);
493 |         }
494 |     }
495 |     
496 |     /**
497 |      * Get IFrame document object
498 |      * @returns {document}
499 |      *
500 |      */
501 |     Livecsseditor.prototype.getIFDoc = function(){
502 |         var iframe = document.getElementById(this.previewId);
503 |         var doc = iframe.contentWindow || iframe.contentDocument;
504 |         if (doc.document) {
505 |             doc = doc.document;
506 |         }
507 |         return doc;
508 |     }
509 |     
510 |     /**
511 |      * Load jquery and UI in preview IFrame
512 |      * 
513 |      * @param {document} doc
514 |      * @param {function} onLoad
515 |      */
516 |     Livecsseditor.prototype.jqueryUILoad = function(doc,onLoad){
517 |         if(!this.queryUiIncluded){
518 |             this.appendHead('http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',doc,'js','jquery');
519 |             this.appendHead('http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css',doc,'css');
520 |             this.appendHead('http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',doc,'js','jqueryui');
521 |         }
522 |         this.queryUiIncluded = true;
523 |         this.$preview.contents().find('#jqueryui').load(function(){
524 |             onLoad();
525 |         });
526 |     }
527 | 
528 |     /**
529 |      * Jquery entry function
530 |      * 
531 |      * @param {object} options
532 |      * @param {object} params
533 |      * @return {jQuery}
534 |      */
535 |     $.fn.livecsseditor = function(options, params) {        
536 |         //just call existing instance
537 |         if(options === 'getCss' || options === 'getJson' || options === 'setJson'){
538 |             var customizer = $(this).data("Livecsseditor-instance");
539 |             if(customizer){
540 |                 if(options === 'setJson'){
541 |                     return customizer.setJson(params);
542 |                 }
543 |                 else{
544 |                     var pagePath = null;
545 |                     return customizer.getCss(params, options == 'getJson');
546 |                 }
547 |             }
548 |         }        
549 |         else{
550 |             this.each(function() {
551 |                 return new Livecsseditor(this, options);
552 |             });
553 |         }
554 |     };
555 | 
556 |     /**
557 |      * Attach custom editor for a property
558 |      * 
559 |      * @param {string} property
560 |      * @param {function} editorCallback
561 |      */
562 |     $.fn.livecsseditor.setPropertyEditor = function setPropertyEditor(property,editorCallback){
563 |         if(property instanceof Array){
564 |             for(var i = 0; i < property.length; i++){
565 |                 propEditors[property[i]] = editorCallback;
566 |             }
567 |         }
568 |         else{
569 |             propEditors[property] = editorCallback;
570 |         }
571 |     }
572 |     
573 | })( jQuery, window , document );   // pass the jQuery object to this function
574 | 


--------------------------------------------------------------------------------