├── .eslintrc
├── .gitignore
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── bower.json
├── demo
    └── index.html
├── dist
    └── jquery.ddslick.min.js
├── gulpfile.js
├── jquery.ddslick.js
├── jquery.ddslick.min.js
├── package.json
└── src
    └── jquery.ddslick.js


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "rules": {
 3 |         "indent": [2],
 4 |         "quotes": [2, "double"],
 5 |         "linebreak-style": [2, "unix"],
 6 |         "semi": [2, "always"]
 7 |     },
 8 |     "globals": {
 9 |         "define" : true,
10 |         "module" : true,
11 |         "require" : true
12 |     },
13 |     "env": {
14 |         "browser": true,
15 |         "jquery": true
16 |     },
17 |     "extends": "eslint:recommended"
18 | }
19 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | bower_components/
3 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## 1.0.0
 2 | 
 3 | - Adds a license, code linting, bower.json, package.json, and a build process.
 4 | 
 5 | ## 1.0.2
 6 | 
 7 | - AMD and Node/CommonJS module support.
 8 | - Prevents listener from firing when initializing drop down.
 9 | - Adds the close drop down listener only once.
10 | - Ability to customize animation time.
11 | - Respecting the drop down holder id.
12 | 
13 | ## 1.0.3
14 | 
15 | - jQuery dependency updated, <3.0 has XSS vulnerabilities
16 | - Demo file included for integration testing
17 | - Accessibility improvements
18 | - Use <button> instead of <a> to ensure focus from keyboard navigation.
19 | - Improve z-index to ensure focus ring is not hidden behind other elements.
20 | - Maintain focus after selecting an item from dropdown.
21 | - Use aria-haspopup='listbox' for dropdown and remove conflicting <a> tags from options.
22 | - Use aria-hidden and aria-expanded to notify browser of widget state.
23 | - Handle keyboard navigation between options when listbox is expanded.


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
  1 | Mozilla Public License Version 2.0
  2 | ==================================
  3 | 
  4 | ### 1. Definitions
  5 | 
  6 | **1.1. “Contributor”**  
  7 |     means each individual or legal entity that creates, contributes to
  8 |     the creation of, or owns Covered Software.
  9 | 
 10 | **1.2. “Contributor Version”**  
 11 |     means the combination of the Contributions of others (if any) used
 12 |     by a Contributor and that particular Contributor's Contribution.
 13 | 
 14 | **1.3. “Contribution”**  
 15 |     means Covered Software of a particular Contributor.
 16 | 
 17 | **1.4. “Covered Software”**  
 18 |     means Source Code Form to which the initial Contributor has attached
 19 |     the notice in Exhibit A, the Executable Form of such Source Code
 20 |     Form, and Modifications of such Source Code Form, in each case
 21 |     including portions thereof.
 22 | 
 23 | **1.5. “Incompatible With Secondary Licenses”**  
 24 |     means
 25 | 
 26 | * **(a)** that the initial Contributor has attached the notice described
 27 |     in Exhibit B to the Covered Software; or
 28 | * **(b)** that the Covered Software was made available under the terms of
 29 |     version 1.1 or earlier of the License, but not also under the
 30 |     terms of a Secondary License.
 31 | 
 32 | **1.6. “Executable Form”**  
 33 |     means any form of the work other than Source Code Form.
 34 | 
 35 | **1.7. “Larger Work”**  
 36 |     means a work that combines Covered Software with other material, in 
 37 |     a separate file or files, that is not Covered Software.
 38 | 
 39 | **1.8. “License”**  
 40 |     means this document.
 41 | 
 42 | **1.9. “Licensable”**  
 43 |     means having the right to grant, to the maximum extent possible,
 44 |     whether at the time of the initial grant or subsequently, any and
 45 |     all of the rights conveyed by this License.
 46 | 
 47 | **1.10. “Modifications”**  
 48 |     means any of the following:
 49 | 
 50 | * **(a)** any file in Source Code Form that results from an addition to,
 51 |     deletion from, or modification of the contents of Covered
 52 |     Software; or
 53 | * **(b)** any new file in Source Code Form that contains any Covered
 54 |     Software.
 55 | 
 56 | **1.11. “Patent Claims” of a Contributor**  
 57 |     means any patent claim(s), including without limitation, method,
 58 |     process, and apparatus claims, in any patent Licensable by such
 59 |     Contributor that would be infringed, but for the grant of the
 60 |     License, by the making, using, selling, offering for sale, having
 61 |     made, import, or transfer of either its Contributions or its
 62 |     Contributor Version.
 63 | 
 64 | **1.12. “Secondary License”**  
 65 |     means either the GNU General Public License, Version 2.0, the GNU
 66 |     Lesser General Public License, Version 2.1, the GNU Affero General
 67 |     Public License, Version 3.0, or any later versions of those
 68 |     licenses.
 69 | 
 70 | **1.13. “Source Code Form”**  
 71 |     means the form of the work preferred for making modifications.
 72 | 
 73 | **1.14. “You” (or “Your”)**  
 74 |     means an individual or a legal entity exercising rights under this
 75 |     License. For legal entities, “You” includes any entity that
 76 |     controls, is controlled by, or is under common control with You. For
 77 |     purposes of this definition, “control” means **(a)** the power, direct
 78 |     or indirect, to cause the direction or management of such entity,
 79 |     whether by contract or otherwise, or **(b)** ownership of more than
 80 |     fifty percent (50%) of the outstanding shares or beneficial
 81 |     ownership of such entity.
 82 | 
 83 | 
 84 | ### 2. License Grants and Conditions
 85 | 
 86 | #### 2.1. Grants
 87 | 
 88 | Each Contributor hereby grants You a world-wide, royalty-free,
 89 | non-exclusive license:
 90 | 
 91 | * **(a)** under intellectual property rights (other than patent or trademark)
 92 |     Licensable by such Contributor to use, reproduce, make available,
 93 |     modify, display, perform, distribute, and otherwise exploit its
 94 |     Contributions, either on an unmodified basis, with Modifications, or
 95 |     as part of a Larger Work; and
 96 | * **(b)** under Patent Claims of such Contributor to make, use, sell, offer
 97 |     for sale, have made, import, and otherwise transfer either its
 98 |     Contributions or its Contributor Version.
 99 | 
100 | #### 2.2. Effective Date
101 | 
102 | The licenses granted in Section 2.1 with respect to any Contribution
103 | become effective for each Contribution on the date the Contributor first
104 | distributes such Contribution.
105 | 
106 | #### 2.3. Limitations on Grant Scope
107 | 
108 | The licenses granted in this Section 2 are the only rights granted under
109 | this License. No additional rights or licenses will be implied from the
110 | distribution or licensing of Covered Software under this License.
111 | Notwithstanding Section 2.1(b) above, no patent license is granted by a
112 | Contributor:
113 | 
114 | * **(a)** for any code that a Contributor has removed from Covered Software;
115 |     or
116 | * **(b)** for infringements caused by: **(i)** Your and any other third party's
117 |     modifications of Covered Software, or **(ii)** the combination of its
118 |     Contributions with other software (except as part of its Contributor
119 |     Version); or
120 | * **(c)** under Patent Claims infringed by Covered Software in the absence of
121 |     its Contributions.
122 | 
123 | This License does not grant any rights in the trademarks, service marks,
124 | or logos of any Contributor (except as may be necessary to comply with
125 | the notice requirements in Section 3.4).
126 | 
127 | #### 2.4. Subsequent Licenses
128 | 
129 | No Contributor makes additional grants as a result of Your choice to
130 | distribute the Covered Software under a subsequent version of this
131 | License (see Section 10.2) or under the terms of a Secondary License (if
132 | permitted under the terms of Section 3.3).
133 | 
134 | #### 2.5. Representation
135 | 
136 | Each Contributor represents that the Contributor believes its
137 | Contributions are its original creation(s) or it has sufficient rights
138 | to grant the rights to its Contributions conveyed by this License.
139 | 
140 | #### 2.6. Fair Use
141 | 
142 | This License is not intended to limit any rights You have under
143 | applicable copyright doctrines of fair use, fair dealing, or other
144 | equivalents.
145 | 
146 | #### 2.7. Conditions
147 | 
148 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
149 | in Section 2.1.
150 | 
151 | 
152 | ### 3. Responsibilities
153 | 
154 | #### 3.1. Distribution of Source Form
155 | 
156 | All distribution of Covered Software in Source Code Form, including any
157 | Modifications that You create or to which You contribute, must be under
158 | the terms of this License. You must inform recipients that the Source
159 | Code Form of the Covered Software is governed by the terms of this
160 | License, and how they can obtain a copy of this License. You may not
161 | attempt to alter or restrict the recipients' rights in the Source Code
162 | Form.
163 | 
164 | #### 3.2. Distribution of Executable Form
165 | 
166 | If You distribute Covered Software in Executable Form then:
167 | 
168 | * **(a)** such Covered Software must also be made available in Source Code
169 |     Form, as described in Section 3.1, and You must inform recipients of
170 |     the Executable Form how they can obtain a copy of such Source Code
171 |     Form by reasonable means in a timely manner, at a charge no more
172 |     than the cost of distribution to the recipient; and
173 | 
174 | * **(b)** You may distribute such Executable Form under the terms of this
175 |     License, or sublicense it under different terms, provided that the
176 |     license for the Executable Form does not attempt to limit or alter
177 |     the recipients' rights in the Source Code Form under this License.
178 | 
179 | #### 3.3. Distribution of a Larger Work
180 | 
181 | You may create and distribute a Larger Work under terms of Your choice,
182 | provided that You also comply with the requirements of this License for
183 | the Covered Software. If the Larger Work is a combination of Covered
184 | Software with a work governed by one or more Secondary Licenses, and the
185 | Covered Software is not Incompatible With Secondary Licenses, this
186 | License permits You to additionally distribute such Covered Software
187 | under the terms of such Secondary License(s), so that the recipient of
188 | the Larger Work may, at their option, further distribute the Covered
189 | Software under the terms of either this License or such Secondary
190 | License(s).
191 | 
192 | #### 3.4. Notices
193 | 
194 | You may not remove or alter the substance of any license notices
195 | (including copyright notices, patent notices, disclaimers of warranty,
196 | or limitations of liability) contained within the Source Code Form of
197 | the Covered Software, except that You may alter any license notices to
198 | the extent required to remedy known factual inaccuracies.
199 | 
200 | #### 3.5. Application of Additional Terms
201 | 
202 | You may choose to offer, and to charge a fee for, warranty, support,
203 | indemnity or liability obligations to one or more recipients of Covered
204 | Software. However, You may do so only on Your own behalf, and not on
205 | behalf of any Contributor. You must make it absolutely clear that any
206 | such warranty, support, indemnity, or liability obligation is offered by
207 | You alone, and You hereby agree to indemnify every Contributor for any
208 | liability incurred by such Contributor as a result of warranty, support,
209 | indemnity or liability terms You offer. You may include additional
210 | disclaimers of warranty and limitations of liability specific to any
211 | jurisdiction.
212 | 
213 | 
214 | ### 4. Inability to Comply Due to Statute or Regulation
215 | 
216 | If it is impossible for You to comply with any of the terms of this
217 | License with respect to some or all of the Covered Software due to
218 | statute, judicial order, or regulation then You must: **(a)** comply with
219 | the terms of this License to the maximum extent possible; and **(b)**
220 | describe the limitations and the code they affect. Such description must
221 | be placed in a text file included with all distributions of the Covered
222 | Software under this License. Except to the extent prohibited by statute
223 | or regulation, such description must be sufficiently detailed for a
224 | recipient of ordinary skill to be able to understand it.
225 | 
226 | 
227 | ### 5. Termination
228 | 
229 | **5.1.** The rights granted under this License will terminate automatically
230 | if You fail to comply with any of its terms. However, if You become
231 | compliant, then the rights granted under this License from a particular
232 | Contributor are reinstated **(a)** provisionally, unless and until such
233 | Contributor explicitly and finally terminates Your grants, and **(b)** on an
234 | ongoing basis, if such Contributor fails to notify You of the
235 | non-compliance by some reasonable means prior to 60 days after You have
236 | come back into compliance. Moreover, Your grants from a particular
237 | Contributor are reinstated on an ongoing basis if such Contributor
238 | notifies You of the non-compliance by some reasonable means, this is the
239 | first time You have received notice of non-compliance with this License
240 | from such Contributor, and You become compliant prior to 30 days after
241 | Your receipt of the notice.
242 | 
243 | **5.2.** If You initiate litigation against any entity by asserting a patent
244 | infringement claim (excluding declaratory judgment actions,
245 | counter-claims, and cross-claims) alleging that a Contributor Version
246 | directly or indirectly infringes any patent, then the rights granted to
247 | You by any and all Contributors for the Covered Software under Section
248 | 2.1 of this License shall terminate.
249 | 
250 | **5.3.** In the event of termination under Sections 5.1 or 5.2 above, all
251 | end user license agreements (excluding distributors and resellers) which
252 | have been validly granted by You or Your distributors under this License
253 | prior to termination shall survive termination.
254 | 
255 | 
256 | ### 6. Disclaimer of Warranty
257 | 
258 | > Covered Software is provided under this License on an “as is”
259 | > basis, without warranty of any kind, either expressed, implied, or
260 | > statutory, including, without limitation, warranties that the
261 | > Covered Software is free of defects, merchantable, fit for a
262 | > particular purpose or non-infringing. The entire risk as to the
263 | > quality and performance of the Covered Software is with You.
264 | > Should any Covered Software prove defective in any respect, You
265 | > (not any Contributor) assume the cost of any necessary servicing,
266 | > repair, or correction. This disclaimer of warranty constitutes an
267 | > essential part of this License. No use of any Covered Software is
268 | > authorized under this License except under this disclaimer.
269 | 
270 | ### 7. Limitation of Liability
271 | 
272 | > Under no circumstances and under no legal theory, whether tort
273 | > (including negligence), contract, or otherwise, shall any
274 | > Contributor, or anyone who distributes Covered Software as
275 | > permitted above, be liable to You for any direct, indirect,
276 | > special, incidental, or consequential damages of any character
277 | > including, without limitation, damages for lost profits, loss of
278 | > goodwill, work stoppage, computer failure or malfunction, or any
279 | > and all other commercial damages or losses, even if such party
280 | > shall have been informed of the possibility of such damages. This
281 | > limitation of liability shall not apply to liability for death or
282 | > personal injury resulting from such party's negligence to the
283 | > extent applicable law prohibits such limitation. Some
284 | > jurisdictions do not allow the exclusion or limitation of
285 | > incidental or consequential damages, so this exclusion and
286 | > limitation may not apply to You.
287 | 
288 | 
289 | ### 8. Litigation
290 | 
291 | Any litigation relating to this License may be brought only in the
292 | courts of a jurisdiction where the defendant maintains its principal
293 | place of business and such litigation shall be governed by laws of that
294 | jurisdiction, without reference to its conflict-of-law provisions.
295 | Nothing in this Section shall prevent a party's ability to bring
296 | cross-claims or counter-claims.
297 | 
298 | 
299 | ### 9. Miscellaneous
300 | 
301 | This License represents the complete agreement concerning the subject
302 | matter hereof. If any provision of this License is held to be
303 | unenforceable, such provision shall be reformed only to the extent
304 | necessary to make it enforceable. Any law or regulation which provides
305 | that the language of a contract shall be construed against the drafter
306 | shall not be used to construe this License against a Contributor.
307 | 
308 | 
309 | ### 10. Versions of the License
310 | 
311 | #### 10.1. New Versions
312 | 
313 | Mozilla Foundation is the license steward. Except as provided in Section
314 | 10.3, no one other than the license steward has the right to modify or
315 | publish new versions of this License. Each version will be given a
316 | distinguishing version number.
317 | 
318 | #### 10.2. Effect of New Versions
319 | 
320 | You may distribute the Covered Software under the terms of the version
321 | of the License under which You originally received the Covered Software,
322 | or under the terms of any subsequent version published by the license
323 | steward.
324 | 
325 | #### 10.3. Modified Versions
326 | 
327 | If you create software not governed by this License, and you want to
328 | create a new license for such software, you may create and use a
329 | modified version of this License if you rename the license and remove
330 | any references to the name of the license steward (except to note that
331 | such modified license differs from this License).
332 | 
333 | #### 10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses
334 | 
335 | If You choose to distribute Source Code Form that is Incompatible With
336 | Secondary Licenses under the terms of this version of the License, the
337 | notice described in Exhibit B of this License must be attached.
338 | 
339 | ## Exhibit A - Source Code Form License Notice
340 | 
341 |     This Source Code Form is subject to the terms of the Mozilla Public
342 |     License, v. 2.0. If a copy of the MPL was not distributed with this
343 |     file, You can obtain one at http://mozilla.org/MPL/2.0/.
344 | 
345 | If it is not possible or desirable to put the notice in a particular
346 | file, then You may include the notice in a location (such as a LICENSE
347 | file in a relevant directory) where a recipient would be likely to look
348 | for such a notice.
349 | 
350 | You may add additional accurate notices of copyright ownership.
351 | 
352 | ## Exhibit B - “Incompatible With Secondary Licenses” Notice
353 | 
354 |     This Source Code Form is "Incompatible With Secondary Licenses", as
355 |     defined by the Mozilla Public License, v. 2.0.
356 | 
357 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ddSlick
 2 | 
 3 | > A free light weight jQuery plugin that allows you to create a custom drop down with images and description.
 4 | 
 5 | [![Build Status](https://semaphoreci.com/api/v1/projects/b60c2732-c9e4-4fcf-b335-2b7ad6dcb4e8/628732/badge.svg)](https://semaphoreci.com/jsmodules/ddslick)
 6 | [![npm](https://img.shields.io/npm/v/ddslick.svg?style=flat-square)](https://www.npmjs.com/package/ddslick)
 7 | [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/ddslick/badge)](https://www.jsdelivr.com/package/npm/ddslick)
 8 | 
 9 | About this plug-in:
10 | 
11 | - Adds images and description to html `select` elements
12 | - Allows JSON to populate the drop down options
13 | - Converts your HTML select element to ddSlick
14 | - Uses minimal CSS, no external stylesheets to download.
15 | - Supports callback functions on selection
16 | - Works without images or description
17 | 
18 | With traditional drop downs i.e. using `<select><option></option></select>` you
19 | are limited to only text and value. But with this easily configurable jQuery
20 | plug-in, you can now create a custom drop down that can very well include
21 | images, a short description, along with your usual text and value.
22 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ddslick",
 3 |   "homepage": "https://github.com/jsmodules/ddslick",
 4 |   "authors": [
 5 |     "Prashant Chaudhary (http://designwithpc.com)",
 6 |     "Brad Berger <brad@bradb.net> (https://bradb.net)",
 7 |     "Oier Izulain <oizulain@gmail.com> (https://github.com/oizulain)"
 8 |   ],
 9 |   "description": "A free light weight jQuery plugin that allows you to create a custom drop down with images and description.",
10 |   "main": "jquery.ddslick.min.js",
11 |   "moduleType": [],
12 |   "license": "MPL-2.0",
13 |   "ignore": [
14 |     "**/.*",
15 |     "node_modules",
16 |     "bower_components",
17 |     "test",
18 |     "tests"
19 |   ],
20 |   "dependencies": {
21 |     "jquery": "~3.0.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html>
   3 | <head>
   4 | <meta charset="utf-8" />
   5 | <title>ddSlick demos</title>
   6 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
   7 | <!-- <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script> -->
   8 | <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
   9 | <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
  10 | <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold&amp;v1" rel="stylesheet">
  11 | 
  12 | <style>
  13 |     html, body {
  14 |         font-family: sans-serif;
  15 |         font-size: 14px;
  16 |     }
  17 | 
  18 |     body {
  19 |         background: #eee;
  20 |         margin: 0;
  21 |         padding: 0;
  22 |         color: #222;
  23 |     }
  24 | 
  25 |     input, textarea, select, button {
  26 |         font-size: 1rem;
  27 |     }
  28 | 
  29 |     section, article {
  30 |         display: block;
  31 |     }
  32 | 
  33 |     section {
  34 |         padding: 15px 0;
  35 |         line-height: 1.6em;
  36 |         text-shadow: 0 1px 0.5px #fff;
  37 |     }
  38 | 
  39 |     h1, h2, h3, h4, h5 {
  40 |         font-family: "PT Sans Narrow", sans-serif;
  41 |     }
  42 | 
  43 |     h1 {
  44 |         font-size: 60px;
  45 |         text-align: center;
  46 |     }
  47 | 
  48 |     h2 {
  49 |         font-size: 34px;
  50 |     }
  51 | 
  52 |     h3 {
  53 |         font-size: 28px;
  54 |     }
  55 | 
  56 |     code {
  57 |         background: #CCDCE6;
  58 |         padding: 1px;
  59 |     }
  60 | 
  61 |     small {
  62 |         color: #777;
  63 |     }
  64 | 
  65 |     a {
  66 |         color: #2A9933;
  67 |     }
  68 | 
  69 |     #showSampleData, #showSampleSelectList {
  70 |         text-decoration: underline;
  71 |         cursor: pointer;
  72 |     }
  73 | 
  74 |     .wrapper {
  75 |         width: 960px;
  76 |         margin: 0 auto;
  77 |     }
  78 | 
  79 |     .spacer {
  80 |         height: 20px;
  81 |         width: 100%;
  82 |         clear: both;
  83 |     }
  84 | 
  85 |     .button-basic {
  86 |         border: solid 1px #888 !important;
  87 |         background: #eee;
  88 |         background: -moz-linear-gradient(center top, #fff, #ddd) repeat scroll 0 0 transparent;
  89 |         background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
  90 |         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#dddddd");
  91 |         border-radius: 3px;
  92 |         cursor: pointer;
  93 |         padding: 10px;
  94 |         text-decoration: none;
  95 |         color: #333;
  96 |         font-size: 1rem;
  97 |     }
  98 | 
  99 |     .button-basic:active {
 100 |         background: #bbb;
 101 |         background: -moz-linear-gradient(center top, #ccc, #eee) repeat scroll 0 0 transparent;
 102 |         background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#eee));
 103 |         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#eeeeee");
 104 |     }
 105 | 
 106 |     .button-basic:hover {
 107 |         border-color: #333 !important;
 108 |     }
 109 | 
 110 |     .demo-content {
 111 |         width: 100%;
 112 |         background: #dadada;
 113 |         border: solid 2px #ddd;
 114 |         font-size: 1rem;
 115 |     }
 116 | 
 117 |     .demo-live {
 118 |         padding: 20px;
 119 |         background: #fff;
 120 |         line-height: 1.4em;
 121 |         min-height: 260px;
 122 |     }
 123 | 
 124 |     article {
 125 |         margin: 20px 0 30px;
 126 |     }
 127 | 
 128 |     article.half-l {
 129 |         width: 48%;
 130 |         float: left;
 131 |         margin-right: 2%;
 132 |     }
 133 | 
 134 |     article.half-r {
 135 |         width: 48%;
 136 |         float: left;
 137 |         margin-left: 2%;
 138 |     }
 139 | 
 140 |     article.full {
 141 |         float: left;
 142 |         width: 100%;
 143 |     }
 144 | 
 145 |     article h3 {
 146 |         margin: 0;
 147 |         padding: 0 0 15px 0;
 148 |     }
 149 | 
 150 |     .demo-index {
 151 |         color: #fff;
 152 |         background: #459644;
 153 |         padding: 10px;
 154 |         margin-right: 10px;
 155 |         border-radius: 30px;
 156 |         float: left;
 157 |         height: 20px;
 158 |         width: 20px;
 159 |         text-align: center;
 160 |         font-size: 24px;
 161 |         text-shadow: 0 1px 1px #333;
 162 |         margin-top: -10px;
 163 |     }
 164 | 
 165 |     .weak {
 166 |         color: #888;
 167 |     }
 168 | 
 169 |     #options .weak {
 170 |         font-style: italic;
 171 |     }
 172 | 
 173 |     #options li {
 174 |         padding: 7px 0;
 175 |     }
 176 | 
 177 |     .clearfix {
 178 |         clear: both;
 179 |     }
 180 | 
 181 |     li.separator {
 182 |         list-style: none;
 183 |         color: maroon;
 184 |     }
 185 | 
 186 |     .dd-selected {
 187 |         color: #000000;
 188 |     }
 189 | 
 190 |     #dd-display-data {
 191 |         height: 230px;
 192 |         overflow: auto;
 193 |     }
 194 | 
 195 |     #dd-modal {
 196 |         display: none;
 197 |         position: fixed;
 198 |         top: 50%;
 199 |         left: 50%;
 200 |         height: 280px;
 201 |         width: 500px;
 202 |         margin-top: -140px;
 203 |         margin-left: -250px;
 204 |         background: #303030;
 205 |         border: solid 15px rgba(0,0,0,0.4);
 206 |         background-clip: padding-box;
 207 |         border-radius: 5px;
 208 |         z-index: 20000;
 209 |         padding: 20px;
 210 |         color: #fff;
 211 |         text-shadow: none;
 212 |         line-height: 1.5em;
 213 |     }
 214 | 
 215 |     #close-modal {
 216 |         margin-left: 200px;
 217 |         width: 100px;
 218 |         padding: 5px;
 219 |     }
 220 | 
 221 |     #top-share {
 222 |         float: right;
 223 |     }
 224 |     /* Pretty printing styles. Used with prettify.js. */
 225 |     /* Vim sunburst theme by David Leibovic */
 226 | 
 227 |     pre .str, code .str {
 228 |         color: #65B042;
 229 |     }
 230 |     /* string  - green */
 231 |     pre .kwd, code .kwd {
 232 |         color: #E28964;
 233 |     }
 234 |     /* keyword - dark pink */
 235 |     pre .com, code .com {
 236 |         color: #AEAEAE;
 237 |         font-style: italic;
 238 |     }
 239 |     /* comment - gray */
 240 |     pre .typ, code .typ {
 241 |         color: #89bdff;
 242 |     }
 243 |     /* type - light blue */
 244 |     pre .lit, code .lit {
 245 |         color: #3387CC;
 246 |     }
 247 |     /* literal - blue */
 248 |     pre .pun, code .pun {
 249 |         color: #fff;
 250 |     }
 251 |     /* punctuation - white */
 252 |     pre .pln, code .pln {
 253 |         color: #fff;
 254 |     }
 255 |     /* plaintext - white */
 256 |     pre .tag, code .tag {
 257 |         color: #89bdff;
 258 |     }
 259 |     /* html/xml tag    - light blue */
 260 |     pre .atn, code .atn {
 261 |         color: #bdb76b;
 262 |     }
 263 |     /* html/xml attribute name  - khaki */
 264 |     pre .atv, code .atv {
 265 |         color: #65B042;
 266 |     }
 267 |     /* html/xml attribute value - green */
 268 |     pre .dec, code .dec {
 269 |         color: #3387CC;
 270 |     }
 271 |     /* decimal - blue */
 272 | 
 273 |     pre.prettyprint, code.prettyprint {
 274 |         background-color: #444;
 275 |         text-shadow: none;
 276 |         font-size: 1rem;
 277 |         line-height: 1.6em;
 278 |         border-radius: 3px;
 279 |     }
 280 | 
 281 |     pre.prettyprint {
 282 |         width: 95%;
 283 |         margin: 16px auto;
 284 |         padding: 1em;
 285 |         white-space: pre-wrap;
 286 |     }
 287 | 
 288 |     /* Specify class=linenums on a pre to get line numbering */
 289 |     ol.linenums {
 290 |         margin-top: 0;
 291 |         margin-bottom: 0;
 292 |         color: #AEAEAE;
 293 |     }
 294 |     /* IE indents via margin-left */
 295 |     li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
 296 |         list-style-type: none;
 297 |     }
 298 |     /* Alternate shading for lines */
 299 |     li.L1, li.L3, li.L5, li.L7, li.L9 {
 300 |     }
 301 | 
 302 |     @media print {
 303 |         pre .str, code .str {
 304 |             color: #060;
 305 |         }
 306 | 
 307 |         pre .kwd, code .kwd {
 308 |             color: #006;
 309 |             font-weight: bold;
 310 |         }
 311 | 
 312 |         pre .com, code .com {
 313 |             color: #600;
 314 |             font-style: italic;
 315 |         }
 316 | 
 317 |         pre .typ, code .typ {
 318 |             color: #404;
 319 |             font-weight: bold;
 320 |         }
 321 | 
 322 |         pre .lit, code .lit {
 323 |             color: #044;
 324 |         }
 325 | 
 326 |         pre .pun, code .pun {
 327 |             color: #440;
 328 |         }
 329 | 
 330 |         pre .pln, code .pln {
 331 |             color: #000;
 332 |         }
 333 | 
 334 |         pre .tag, code .tag {
 335 |             color: #006;
 336 |             font-weight: bold;
 337 |         }
 338 | 
 339 |         pre .atn, code .atn {
 340 |             color: #404;
 341 |         }
 342 | 
 343 |         pre .atv, code .atv {
 344 |             color: #060;
 345 |         }
 346 |     }
 347 | </style>
 348 | 
 349 | </head>
 350 | <body onload="prettyPrint();">
 351 |     <section class="wrapper">
 352 |         <section>
 353 |             <h1>
 354 |                 ddSlick demos
 355 |             </h1>
 356 |             <article class="half-l">
 357 |                 <h3>
 358 |                     <span class="demo-index">1</span>
 359 |                     Basic dropdown using JSON
 360 |                 </h3>
 361 |                 <div class="demo-content">
 362 |                     <div class="demo-live">
 363 |                         <div id="demoBasic">
 364 |                         </div>
 365 |                         <div class="spacer">
 366 |                         </div>
 367 |                     </div>
 368 |                 </div>
 369 |             </article>
 370 |             <article class="half-r">
 371 |                 Source:
 372 | <pre class="prettyprint">
 373 | $("#demoBasic").ddslick({
 374 |     data: ddData,
 375 |     width: 300,
 376 |     imagePosition: "left",
 377 |     selectText: "Select your favorite social network",
 378 |     onSelected: function (data) {
 379 |         console.log(data);
 380 |     }
 381 | });
 382 | </pre>
 383 |                 <p>
 384 |                     When using JSON to populate, the plugin requires the specific data format.<a id="showSampleData">
 385 |                         Click here to see the sample JSON data for the plugin.
 386 |                     </a>
 387 |                 </p>
 388 |             </article>
 389 |             <div class="clearfix">
 390 |             </div>
 391 |             <article class="half-l">
 392 |                 <h3>
 393 |                     <span class="demo-index">2</span>
 394 |                     Render from HTML select options
 395 |                 </h3>
 396 |                 <div class="demo-content">
 397 |                     <div class="demo-live">
 398 |                         <select id="demo-htmlselect">
 399 |                             <option value="0" data-imagesrc="http://i.imgur.com/XkuTj3B.png" data-description="Description with Facebook">Facebook</option>
 400 |                             <option value="1" data-imagesrc="http://i.imgur.com/8ScLNnk.png" data-description="Description with Twitter">Twitter</option>
 401 |                             <option value="2" data-imagesrc="http://i.imgur.com/aDNdibj.png" data-description="Description with LinkedIn">LinkedIn</option>
 402 |                             <option value="3" data-imagesrc="http://i.imgur.com/kFAk2DX.png" data-description="Description with Foursquare">Foursquare</option>
 403 |                         </select>
 404 |                         <div class="spacer">
 405 |                         </div>
 406 |                         <button id="make-it-slick">
 407 |                             Make it slick!
 408 |                         </button>
 409 |                         <button id="restore">
 410 |                             Restore to Original
 411 |                         </button>
 412 |                     </div>
 413 |                 </div>
 414 |             </article>
 415 |             <article class="half-r">
 416 |                 Source:
 417 | <pre class="prettyprint">
 418 | //Make it slick!
 419 | $("#make-it-slick").on("click", function(){
 420 |     $("#demo-htmlselect").ddslick();
 421 | });
 422 | //Restore Original
 423 | $("#restore").on("click", function(){
 424 |     $("#demo-htmlselect").ddslick("destroy");
 425 | });
 426 | </pre>
 427 |                 <p>
 428 |                     Use HTML5 data attributes <code>data-imagesrc</code> and <code>data-description</code>
 429 |                     with your regular HTML select elements to add images and description. The plugin
 430 |                     will retrieve <code>text</code>, <code>value</code>, and <code>selected</code> attributes
 431 |                     from the elements itself.<br />
 432 |                     <a id="showSampleSelectList">Click here to see the HTML select element for this example.</a>
 433 |                 </p>
 434 |             </article>
 435 |             <div class="clearfix">
 436 |             </div>
 437 |             <article class="half-l">
 438 |                 <h3>
 439 |                     <span class="demo-index">3</span>
 440 |                     GET selected dropdown option
 441 |                 </h3>
 442 |                 <div class="demo-content">
 443 |                     <div class="demo-live">
 444 |                         <div id="demoShowSelected">
 445 |                         </div>
 446 |                         <div class="spacer">
 447 |                         </div>
 448 |                         <button id="showSelectedData">
 449 |                             Get Selection
 450 |                         </button>
 451 |                     </div>
 452 |                 </div>
 453 |             </article>
 454 |             <article class="half-r">
 455 |                 Source:
 456 | <pre class="prettyprint">
 457 | $("#demoShowSelected").ddslick({
 458 |     data: ddData,
 459 |     selectText: "Select your favorite social network",
 460 | });
 461 | $("#showSelectedData").on("click", function () {
 462 |     var ddData = $("#demoShowSelected").data("ddslick");
 463 |     displaySelectedData("2: Getting Selected Dropdown Data" , ddData);
 464 | });
 465 | </pre>
 466 |                 <p>
 467 |                     You may use jquery .data() with your selector to get data from plugin. <code>$("#demoShowSelected").data("ddslick");</code>
 468 |                     will return a js object that contains:
 469 |                 </p>
 470 |                 <ul>
 471 |                     <li>selectedIndex <span class="weak">(0 based),</span></li>
 472 |                     <li>selectedItem <span class="weak">(HTML "li" element),</span></li>
 473 |                     <li>selectedData <span class="weak">(nested object with text, value, description, imageSrc)</span></li>
 474 |                 </ul>
 475 |             </article>
 476 |             <div class="clearfix">
 477 |             </div>
 478 |             <article class="half-l">
 479 |                 <h3>
 480 |                     <span class="demo-index">4</span>
 481 |                     SET selected dropdown option
 482 |                 </h3>
 483 |                 <div class="demo-content">
 484 |                     <div class="demo-live">
 485 |                         <p id="setIndexMsg">
 486 |                             Try an index between 0 to 3
 487 |                         </p>
 488 |                         <input type="text" id="setIndex" value="3" />
 489 |                         <button id="btnSetSelected">
 490 |                             Set Selection
 491 |                         </button>
 492 |                         <div class="spacer">
 493 |                         </div>
 494 |                         <div id="demoSetSelected">
 495 |                         </div>
 496 |                     </div>
 497 |                 </div>
 498 |             </article>
 499 |             <article class="half-r">
 500 |                 Source:
 501 | <pre class="prettyprint">
 502 | $("#demoSetSelected").ddslick({
 503 |     data: ddData,
 504 |     selectText: "Select your favorite social network"
 505 | });
 506 | $("#btnSetSelected").on("click", function () {
 507 |     var i = $("#setIndex").val();
 508 |     if(i &gt;= 0 &amp;&amp; i &lt;5)
 509 |        $("#demoSetSelected").ddslick("select", {index: i });
 510 |     else
 511 |        $("#setIndexMsg").effect("highlight",2400);
 512 | });
 513 | </pre>
 514 |                 <p>
 515 |                     You may use plugin’s select method like <code>
 516 |                         $("#demoSetSelected").ddslick("select",
 517 |                         {index: i });
 518 |                     </code><br />
 519 |                     to select a particular index.
 520 |                 </p>
 521 | 
 522 |             </article>
 523 |             <div class="clearfix">
 524 |             </div>
 525 |             <article class="half-l">
 526 |                 <h3>
 527 |                     <span class="demo-index">5</span>
 528 |                     onSelected callback function
 529 |                 </h3>
 530 |                 <div class="demo-content">
 531 |                     <div class="demo-live">
 532 |                         <div id="demoCallback">
 533 |                         </div>
 534 |                     </div>
 535 |                 </div>
 536 |             </article>
 537 |             <article class="half-r">
 538 |                 Source:
 539 | <pre class="prettyprint">
 540 | $("#demoCallback").ddslick({
 541 |     data: ddData,
 542 |     selectText: "Select your favorite social network",
 543 |     onSelected: function(data){
 544 |         displaySelectedData("3: Callback Function on Dropdown Selection" , data);
 545 |     }
 546 | });
 547 | </pre>
 548 |                 <p>
 549 |                     Use plugin’s <code>onSelected</code> callback function on selecting one of the drop
 550 |                     down options. The callback data will include:
 551 |                 </p>
 552 |                 <ul>
 553 |                     <li>selectedIndex <span class="weak">(0 based),</span></li>
 554 |                     <li>selectedItem <span class="weak">(HTML "li" element),</span></li>
 555 |                     <li>selectedData <span class="weak">(nested object with text, value, description, imageSrc)</span></li>
 556 |                 </ul>
 557 |             </article>
 558 |             <div class="clearfix">
 559 |             </div>
 560 |             <article class="half-l">
 561 |                 <h3>
 562 |                     <span class="demo-index">6</span>
 563 |                     Dropdown with default selection
 564 |                 </h3>
 565 |                 <div class="demo-content">
 566 |                     <div class="demo-live">
 567 |                         <div id="demoDefaultSelection">
 568 |                         </div>
 569 |                     </div>
 570 |                 </div>
 571 |             </article>
 572 |             <article class="half-r">
 573 |                 Source:
 574 | <pre class="prettyprint">
 575 | $("#demoDefaultSelection").ddslick({
 576 |     data: ddData,
 577 |     defaultSelectedIndex:2
 578 | });
 579 | </pre>
 580 |                 <p>
 581 |                     Use Zero based plugin option
 582 |                     <code>defaultSelectedIndex</code> to set up plugin
 583 |                     to pre select the index, when first initializing.
 584 |                     <br />
 585 |                     <strong>Note:</strong> When there is no <code>selectText</code> the plugin selects
 586 |                     the first item index[0] from dropdown options.
 587 |                 </p>
 588 |             </article>
 589 |             <div class="clearfix">
 590 |             </div>
 591 |             <article class="half-l">
 592 |                 <h3>
 593 |                     <span class="demo-index">7</span>
 594 |                     Dropdown with image on right
 595 |                 </h3>
 596 |                 <div class="demo-content">
 597 |                     <div class="demo-live">
 598 |                         <div id="demoImageRight">
 599 |                         </div>
 600 |                     </div>
 601 |                 </div>
 602 |             </article>
 603 |             <article class="half-r">
 604 |                 Source:
 605 | <pre class="prettyprint">
 606 | $("#demoImageRight").ddslick({
 607 |     data: ddData,
 608 |     imagePosition:"right",
 609 |     selectText: "Select your favorite social network"
 610 | });
 611 | </pre>
 612 |                 <p>
 613 |                     You have the flexibility to position image either on left or right using <code>imagePosition</code>,
 614 |                     depending on your preference.
 615 |                     <br />
 616 |                     Also you can add your own styles to these images by modifying their CSS class <code>
 617 |                         .dd-option-image, .dd-selected-image
 618 |                     </code> on your page. For e.g. plugin sets
 619 |                     the default max-width for images to 64px, that you can overwrite by adding these
 620 |                     classes to your page and overwriting max-width style.
 621 |                 </p>
 622 |             </article>
 623 |             <div class="clearfix">
 624 |             </div>
 625 |             <article class="half-l">
 626 |                 <h3>
 627 |                     <span class="demo-index">8</span>
 628 |                     Dropdown with truncated description
 629 |                 </h3>
 630 |                 <div class="demo-content">
 631 |                     <div class="demo-live">
 632 |                         <div id="demoTruncated">
 633 |                         </div>
 634 |                     </div>
 635 |                 </div>
 636 |             </article>
 637 |             <article class="half-r">
 638 |                 Source:
 639 | <pre class="prettyprint">
 640 | $("#demoTruncated").ddslick({
 641 |     data: ddDataLongDescription,
 642 |     selectText: "Select your favorite social network",
 643 |     truncateDescription: true,
 644 |     onSelected: function(data){
 645 |         displaySelectedData("5: Dropdown with truncated description", data);
 646 |     }
 647 | });
 648 | </pre>
 649 |                 <p>
 650 |                     By default plugin will truncate the description in selected view if it overflows.
 651 |                     You may however turn the default behavior by setting <code>truncateDescription:false</code>
 652 |                     to show the complete description. Either way you still get the complete description
 653 |                     with returned selected data. Also use <code>.dd-desc</code> to add your own styles
 654 |                     to description.
 655 |                 </p>
 656 |             </article>
 657 |             <div class="clearfix">
 658 |             </div>
 659 |             <article class="half-l">
 660 |                 <h3>
 661 |                     <span class="demo-index">9</span>
 662 |                     Dropdown with no image or description
 663 |                 </h3>
 664 |                 <div class="demo-content">
 665 |                     <div class="demo-live">
 666 |                         <div id="divNoImage">
 667 |                         </div>
 668 |                     </div>
 669 |                 </div>
 670 |             </article>
 671 |             <article class="half-r">
 672 |                 Source:
 673 | <pre class="prettyprint">
 674 | var ddBasic = [
 675 |     { text: "Facebook", value: 1, },
 676 |     { text: "Twitter", value: 2, },
 677 |     { text: "LinkedIn", value: 3, },
 678 |     { text: "Foursquare", value: 4, }
 679 | ];
 680 | $("#divNoImage").ddslick({
 681 |     data: ddBasic,
 682 |     selectText: "Select your favorite social network"
 683 | });
 684 | </pre>
 685 |                 <p>
 686 |                     The plugin is built to work as beautiful even without images!
 687 |                 </p>
 688 |             </article>
 689 |             <div class="clearfix">
 690 |             </div>
 691 |         </section>
 692 |     <div class="clearfix"></div>
 693 |     <div id="dd-modal">
 694 |         <div id="dd-display-data"></div>
 695 |         <br />
 696 |         <button id="close-modal" class="button-basic">
 697 |             Close
 698 |         </button>
 699 |     </div>
 700 | 
 701 |     <!-- USAGE Section -->
 702 | 
 703 |     <section>
 704 | 
 705 |         <article>
 706 |             <h2>How to use with JSON data</h2>
 707 |             <ol>
 708 |                 <li>
 709 |                     Include the plugin javascript file along with jquery:
 710 | <pre class="prettyprint">
 711 | &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"&gt;&lt;/script&gt;
 712 | &lt;script type="text/javascript" src="https://cdn.rawgit.com/jsmodules/ddslick/master/dist/jquery.ddslick.min.js" &gt;&lt;/script&gt;
 713 | </pre>
 714 |                 </li>
 715 |                 <li>
 716 |                     Create an empty placeholder for the custom dropdown: eg:
 717 | <pre class="prettyprint">
 718 | &lt;div id="myDropdown"&gt;&lt;/div&gt;
 719 | </pre>
 720 |                 </li>
 721 |                 <li>
 722 |                     Get the dropdown options (JSON Data) to be binded to plugin:
 723 | <pre class="prettyprint" id="JSONData">
 724 | //Dropdown plugin data
 725 | var ddData = [
 726 |     {
 727 |         text: "Facebook",
 728 |         value: 1,
 729 |         selected: false,
 730 |         description: "Description with Facebook",
 731 |         imageSrc: "http://i.imgur.com/XkuTj3B.png"
 732 |     },
 733 |     {
 734 |         text: "Twitter",
 735 |         value: 2,
 736 |         selected: false,
 737 |         description: "Description with Twitter",
 738 |         imageSrc: "http://i.imgur.com/8ScLNnk.png"
 739 |     },
 740 |     {
 741 |         text: "LinkedIn",
 742 |         value: 3,
 743 |         selected: true,
 744 |         description: "Description with LinkedIn",
 745 |         imageSrc: "http://i.imgur.com/aDNdibj.png"
 746 |     },
 747 |     {
 748 |         text: "Foursquare",
 749 |         value: 4,
 750 |         selected: false,
 751 |         description: "Description with Foursquare",
 752 |         imageSrc: "http://i.imgur.com/kFAk2DX.png"
 753 |     }
 754 | ];
 755 | </pre>
 756 |                 </li>
 757 |                 <li>
 758 |                     Attach plugin to this placeholder like:
 759 | <pre class="prettyprint">
 760 | $("#myDropdown").ddslick({
 761 |     data:ddData,
 762 |     width:300,
 763 |     selectText: "Select your preferred social network",
 764 |     imagePosition:"right",
 765 |     onSelected: function(selectedData){
 766 |         //callback function: do something with selectedData;
 767 |     }
 768 | });
 769 | </pre>
 770 |                     Note: Use onSelected callback function to do something after the dropdown option is selected. The selectedData will contain the selected text, value, description, imageSrc.
 771 |                 </li>
 772 |             </ol>
 773 |         </article>
 774 |         <div class="spacer"></div>
 775 |         <article>
 776 |             <h2>How to use with HTML &lt;select&gt; and &lt;option&gt;</h2>
 777 |             <ol>
 778 |                 <li>
 779 |                     Include the plugin javascript file along with jquery:
 780 | <pre class="prettyprint">
 781 | &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"&gt;&lt;/script&gt;
 782 | &lt;script type="text/javascript" src="https://cdn.rawgit.com/jsmodules/ddslick/master/dist/jquery.ddslick.min.js" &gt;&lt;/script&gt;
 783 | </pre>
 784 |                 </li>
 785 |                 <li>
 786 |                     Add HTML5 data attributes to your select elements: eg:
 787 | <pre class="prettyprint" id="sampleHtmlSelect">
 788 | &lt;select id="demo-htmlselect"&gt;
 789 |     &lt;option value="0" data-imagesrc="http://i.imgur.com/XkuTj3B.png"
 790 |         data-description="Description with Facebook"&gt;Facebook&lt;/option&gt;
 791 |     &lt;option value="1" data-imagesrc="http://i.imgur.com/8ScLNnk.png"
 792 |         data-description="Description with Twitter"&gt;Twitter&lt;/option&gt;
 793 |     &lt;option value="2" selected="selected" data-imagesrc="http://i.imgur.com/aDNdibj.png"
 794 |         data-description="Description with LinkedIn"&gt;LinkedIn&lt;/option&gt;
 795 |     &lt;option value="3" data-imagesrc="http://i.imgur.com/kFAk2DX.png"
 796 |         data-description="Description with Foursquare"&gt;Foursquare&lt;/option&gt;
 797 | &lt;/select&gt;
 798 | </pre>
 799 |                 </li>
 800 |                 <li>
 801 |                     Attach plugin to this HTML select element:
 802 | <pre class="prettyprint">
 803 | $("#myDropdown").ddslick({
 804 |     onSelected: function(selectedData){
 805 |         //callback function: do something with selectedData;
 806 |     }
 807 | });
 808 | </pre>
 809 |                 </li>
 810 |             </ol>
 811 |             <div class="spacer"></div>
 812 |         </article>
 813 | 
 814 |         <!-- Plugin Options -->
 815 | 
 816 |         <article>
 817 |             <h2>Plugin Options:</h2>
 818 |             <ul id="options">
 819 |                 <li><strong>data</strong> <span class="weak">default value "[]"</span><br /> JSON data to populate dropdown plugin options</li>
 820 |                 <li><strong>width</strong> <span class="weak">default value "260"</span><br /> Width in px for the dropdown plugin i.e. 400, or "400px".</li>
 821 |                 <li><strong>height</strong> <span class="weak">default value "null"</span><br /> Height in px for the dropdown options i.e. 300, or "300px". The scroller will automatically be added if options overflows the height.</li>
 822 |                 <li><strong>background</strong> <span class="weak">default value "#eee"</span><br /> Background for your dropdown. You can use the css shorthand notation for setting backgrounds<br /> i.e. <code>background: #CCCCCC;</code> or <code>background: transparent url("your-background-image.jpg") no-repeat 0 0 scroll</code></li>
 823 |                 <li><strong>selectText</strong> <span class="weak">default value "Select..."</span><br /> Set default text to display when no option is selected.</li>
 824 |                 <li><strong>imagePosition</strong> <span class="weak">default value "left"</span><br /> Set positioning of image in your dropdown, left or right. See demo 5 above.</li>
 825 |                 <li><strong>showSelectedHTML</strong> <span class="weak">default value "true"</span><br /> Set what to be displayed as selected. Setting false will only display title. Setting true displays title, description and image.</li>
 826 |                 <li><strong>defaultSelectedIndex</strong> <span class="weak">default value "null"</span><br /> Set the default index to be selected when initializing plugin. If not provided then <code>selectText</code> will be displayed. See demo 4 above.</li>
 827 |                 <li><strong>truncateDescription</strong> <span class="weak">default value "true"</span><br /> Truncate the long description when selected. Options however display the full text. The plugin still returns complete description on selection. See demo 6 above.</li>
 828 |                 <li><strong>onSelected</strong> <span class="weak">default value "function () { }"</span><br /> Callback function when an option is selected in the dropdown. See demo 3 above.</li>
 829 |                 <li><strong>keepJSONItemsOnTop</strong> <span class="weak">default value "false"</span><br /> You can use both HTML select elements and JSON data to populate your dropdown. By default JSON items are added in dropdown after the select options.</li>
 830 |             </ul>
 831 |             <h2>Plugin Methods:</h2>
 832 |             <ul>
 833 |                 <li><strong>select</strong><br /> You may use plugin’s select method like <code>$("#demoSetSelected").ddslick("select", {index: i });</code><br /> to select a particular index. See demo 3 above.</li>
 834 |                 <li><strong>select</strong><br /> You may use plugin’s open method like <code>$("#demoSetSelected").ddslick("open");</code><br /> to open dropdown options.</li>
 835 |                 <li><strong>close</strong><br /> You may use plugin’s close method like <code>$("#demoSetSelected").ddslick("close");</code><br /> to close dropdown options.</li>
 836 |                 <li><strong>destroy</strong><br /> You may use plugin’s destroy method to restore to original element like <code>$("#demoSetSelected").ddslick("destroy");</code><br /> If you had selected an option with ddSlick, the <code>selected</code> attribute will be passed to the original HTML select, so you don’t loose the selection. This will also unbind any event handlers attached by plugin to this control. See demo 2 above.</li>
 837 |             </ul>
 838 |         </article>
 839 |     </section>
 840 | </section>
 841 | 
 842 | <script>
 843 | $(document).ready(function () {
 844 | 
 845 |     //Show or hide source for the demo
 846 |     $("#close-modal").on("click", function () {
 847 |         $("#dd-modal").effect("drop");
 848 |     });
 849 | 
 850 |     //Dropdown plugin data
 851 |     var ddData = [
 852 |         {
 853 |             text: "Facebook",
 854 |             value: "FB",
 855 |             description: "Description with Facebook",
 856 |             imageSrc: "http://i.imgur.com/XkuTj3B.png"
 857 |         },
 858 |         {
 859 |             text: "Twitter",
 860 |             value: "TWT",
 861 |             description: "Description with Twitter",
 862 |             imageSrc: "http://i.imgur.com/8ScLNnk.png"
 863 |         },
 864 |         {
 865 |             text: "LinkedIn",
 866 |             value: "LI",
 867 |             description: "Description with LinkedIn",
 868 |             imageSrc: "http://i.imgur.com/aDNdibj.png"
 869 |         },
 870 |         {
 871 |             text: "Foursquare",
 872 |             value: "FSQ",
 873 |             description: "Description with Foursquare",
 874 |             imageSrc: "http://i.imgur.com/kFAk2DX.png"
 875 |         }
 876 |     ];
 877 | 
 878 |     //Demo 1---------------------
 879 |     $("#demoBasic").ddslick({
 880 |         data: ddData,
 881 |         selectText: "Select your favorite social network"
 882 |     });
 883 | 
 884 |     //Make it slick!
 885 |     $("#make-it-slick").on("click", function () {
 886 |         $("#demo-htmlselect").ddslick();
 887 |     });
 888 | 
 889 |     //Restore Original
 890 |     $("#restore").on("click", function () {
 891 |         $("#demo-htmlselect").ddslick("destroy");
 892 |     });
 893 | 
 894 |     //Demo 2----------------------
 895 |     $("#demoShowSelected").ddslick({
 896 |         data: ddData,
 897 |         selectText: "Select your favorite social network"
 898 |     });
 899 | 
 900 |     $("#showSelectedData").on("click", function () {
 901 |         var ddData = $("#demoShowSelected").data("ddslick");
 902 |         displaySelectedData("2: Getting Selected Dropdown Data", ddData);
 903 |     });
 904 | 
 905 |     //Demo 3 -------------------------
 906 |     $("#demoSetSelected").ddslick({
 907 |         data: ddData,
 908 |         selectText: "Select your favorite social network"
 909 |     });
 910 | 
 911 |     $("#btnSetSelected").on("click", function () {
 912 |         var i = $("#setIndex").val();
 913 |         if (i >= 0 && i < 5)
 914 |             $("#demoSetSelected").ddslick("select", { index: i });
 915 |         else
 916 |             $("#setIndexMsg").effect("highlight", 2400);
 917 |     });
 918 | 
 919 |     //Demo 4--------------------------
 920 |     $("#demoCallback").ddslick({
 921 |         data: ddData,
 922 |         selectText: "Select your favorite social network",
 923 |         onSelected: function (data) {
 924 |             displaySelectedData("3: Callback Function on Dropdown Selection", data);
 925 |         }
 926 |     });
 927 | 
 928 |     //Demo 5 -------------------------
 929 |     $("#demoDefaultSelection").ddslick({
 930 |         data: ddData,
 931 |         defaultSelectedIndex: 2
 932 |     });
 933 | 
 934 |     //Demo 6---------------------------
 935 |     $("#demoImageRight").ddslick({
 936 |         data: ddData,
 937 |         imagePosition: "right",
 938 |         selectText: "Select your favorite social network"
 939 |     });
 940 | 
 941 |     //Demo 7--------------------------
 942 | 
 943 |     //Dropdown plugin data
 944 |     var ddDataLongDescription = [
 945 |         {
 946 |             text: "Facebook",
 947 |             value: 1,
 948 |             description: "Description with Facebook",
 949 |             imageSrc: "http://i.imgur.com/XkuTj3B.png"
 950 |         },
 951 |         {
 952 |             text: "Twitter",
 953 |             value: 2,
 954 |             description: "Twitter is an online social networking service and microblogging service that enables its users to send and read text-based posts of up to 140 characters, known as 'tweets'. It was created in March 2006 by Jack Dorsey and launched that July.",
 955 |             imageSrc: "http://i.imgur.com/8ScLNnk.png"
 956 |         },
 957 |         {
 958 |             text: "LinkedIn",
 959 |             value: 3,
 960 |             description: "Description with LinkedIn",
 961 |             imageSrc: "http://i.imgur.com/aDNdibj.png"
 962 |         },
 963 |         {
 964 |             text: "Foursquare",
 965 |             value: 4,
 966 |             description: "Description with Foursquare",
 967 |             imageSrc: "http://i.imgur.com/kFAk2DX.png"
 968 |         }
 969 |     ];
 970 | 
 971 |     $("#demoTruncated").ddslick({
 972 |         data: ddDataLongDescription,
 973 |         selectText: "Select your favorite social network",
 974 |         truncateDescription: true,
 975 |         onSelected: function (data) {
 976 |             displaySelectedData("5: Dropdown with truncated description", data);
 977 |         }
 978 |     });
 979 | 
 980 |     //Demo 8-------------------------
 981 | 
 982 |     var ddBasic = [
 983 |         { text: "Facebook", value: 1, },
 984 |         { text: "Twitter", value: 2, },
 985 |         { text: "LinkedIn", value: 3, },
 986 |         { text: "Foursquare", value: 4, }
 987 |     ];
 988 | 
 989 |     $("#divNoImage").ddslick({
 990 |         data: ddBasic,
 991 |         selectText: "Select your favorite social network"
 992 |     });
 993 | 
 994 |     //Callback function:
 995 |     function displaySelectedData(demoIndex, ddData) {
 996 |         $("#dd-display-data").html("<h3>Data from demo " + demoIndex + "</h3>");
 997 |         $("#dd-display-data").append("<strong>selectedIndex:</strong> " + ddData.selectedIndex + "<br/><strong>selectedItem:</strong> Check your browser console for selected 'li' html element");
 998 | 
 999 |         if (ddData.selectedData) {
1000 |             $("#dd-display-data").append(
1001 |                 "<br/><br/><strong>selectedData:</strong><br/><strong>Text:</strong> " + ddData.selectedData.text +
1002 |                 "<br/><strong>Value:</strong>  " + ddData.selectedData.value +
1003 |                 "<br/><strong>Description:</strong>  " + ddData.selectedData.description +
1004 |                 "<br/><strong>ImageSrc:</strong>  " + ddData.selectedData.imageSrc)
1005 |         }
1006 |         $("#dd-modal").fadeIn();
1007 |     }
1008 | 
1009 |     $("#showSampleData").on("click", function () {
1010 |         $("#dd-display-data").html("<pre>" + $("#JSONData").html() + "</pre>");
1011 |         $("#dd-modal").fadeIn();
1012 |     });
1013 | 
1014 |     $("#showSampleSelectList").on("click", function () {
1015 |         $("#dd-display-data").html("<pre>" + $("#sampleHtmlSelect").html() + "</pre>");
1016 |         $("#dd-modal").fadeIn();
1017 |     });
1018 | 
1019 | });
1020 | </script>
1021 | 
1022 | <!-- <script src="https://cdn.rawgit.com/jsmodules/ddslick/master/dist/jquery.ddslick.min.js"></script> -->
1023 | <!-- <script src="../jquery.ddslick.min.js"></script> -->
1024 | <script src="../jquery.ddslick.js"></script>
1025 | </body>
1026 | </html>
1027 | 


--------------------------------------------------------------------------------
/dist/jquery.ddslick.min.js:
--------------------------------------------------------------------------------
1 | !function(e){"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof module&&module.exports?module.exports=e(require("jquery")):e(window.jQuery)}(function(e){function d(e,d){var i=e.find(".dd-option-value[value= '"+d+"']").parents("li").prevAll().length;t(e,i)}function t(d,t,i){var o=d.data("ddslick"),s=d.find(".dd-selected"),l=d.find(".dd-options"),r=s.siblings(".dd-selected-value"),c=d.find(".dd-option").eq(t),p=o.settings,f=o.settings.data[t];if(d.find(".dd-option").removeClass("dd-option-selected"),c.addClass("dd-option-selected"),l.attr("aria-activedescendant",c.attr("id")),o.selectedIndex=t,o.selectedItem=c,o.selectedData=f,p.showSelectedHTML){var u=e("<div>");f.imageSrc&&u.append(e("<img>").addClass("dd-selected-image"+("right"===p.imagePosition?" dd-image-right":"")).attr("src",f.imageSrc)),f.text&&u.append(e("<label>").addClass("dd-selected-text").text(f.text)),f.description&&u.append(e("<small>").addClass("dd-selected-description dd-desc"+(p.truncateDescription?" dd-selected-description-truncated":"")).text(f.description)),s.html(u.html())}else s.html(f.text);r.val(f.value),o.original.val(f.value),d.data("ddslick",o),n(d),d.find(".dd-selected").focus(),a(d),i&&"function"==typeof p.onSelected&&p.onSelected.call(this,o)}function i(d){var t=d.find(".dd-select"),i=d.find(".dd-selected"),n=t.siblings(".dd-options"),a=t.find(".dd-pointer"),s=n.is(":visible"),r=l[d.attr("data-settings-id")];e(".dd-click-off-close").not(n).slideUp(r.animationTime),e(".dd-pointer").removeClass("dd-pointer-up"),t.removeClass("dd-open"),i.attr("aria-expanded","false"),n.attr("aria-hidden","true"),s?(n.slideUp(r.animationTime),a.removeClass("dd-pointer-up"),t.removeClass("dd-open"),i.attr("aria-expanded","false"),n.attr("aria-hidden","true")):(t.addClass("dd-open"),n.slideDown(r.animationTime),a.addClass("dd-pointer-up"),i.attr("aria-expanded","true"),n.attr("aria-hidden","false").focus()),o(d)}function n(e){var d=l[e.attr("data-settings-id")];e.find(".dd-select").removeClass("dd-open"),e.find(".dd-selected").attr("aria-expanded","false"),e.find(".dd-options").slideUp(d.animationTime).attr("aria-hidden","true"),e.find(".dd-pointer").removeClass("dd-pointer-up").removeClass("dd-pointer-up")}function a(e){var d=e.find(".dd-select").css("height"),t=e.find(".dd-selected-description"),i=e.find(".dd-selected-image");t.length<=0&&i.length>0&&e.find(".dd-selected-text").css("lineHeight",d)}function o(d){d.find(".dd-option").each(function(){var t=e(this),i=t.css("height"),n=t.find(".dd-option-description"),a=d.find(".dd-option-image");n.length<=0&&a.length>0&&t.find(".dd-option-text").css("lineHeight",i)})}e.fn.ddslick=function(d){return s[d]?s[d].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof d&&d?void e.error("Method "+d+" does not exists."):s.init.apply(this,arguments)};var s={},l={},r={data:[],keepJSONItemsOnTop:!1,animationTime:50,width:260,height:null,background:"#eee",selectText:"",defaultSelectedIndex:null,truncateDescription:!0,imagePosition:"left",showSelectedHTML:!0,clickOffToClose:!0,embedCSS:!0,onSelected:function(){}},c=!1,p="<div class='dd-select'><input class='dd-selected-value' type='hidden' /><button type='button' class='dd-selected'></button><span class='dd-pointer dd-pointer-down'></span></div>",f="<ul class='dd-options'></ul>",u="<style id='css-ddslick' type='text/css'>.dd-select{ border-radius:2px; border:solid 1px #ccc; position:relative; cursor:pointer;}.dd-desc { color:#aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; }.dd-selected{ position:relative; overflow:hidden; display:block; padding:10px; font-weight:bold; width:100%; text-align:left;}.dd-selected:focus { z-index:2001; }.dd-pointer{ width:0; height:0; position:absolute; right:10px; top:50%; margin-top:-3px;}.dd-selected:focus + .dd-pointer{ z-index:2002; }.dd-pointer-down{ border:solid 5px transparent; border-top:solid 5px #000; }.dd-pointer-up{border:solid 5px transparent !important; border-bottom:solid 5px #000 !important; margin-top:-8px;}.dd-options{ border:solid 1px #ccc; border-top:none; list-style:none; box-shadow:0px 1px 5px #ddd; display:none; position:absolute; z-index:2000; margin:0; padding:0;background:#fff; overflow:visible;}.dd-options:focus{ outline:0; }.dd-option{ padding:10px; display:block; width:100%; text-align:left; border-bottom:solid 1px #ddd; overflow:visible; text-decoration:none; color:#333; cursor:pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out; box-sizing:border-box;}.dd-options > .dd-option:last-child { border-bottom:none;}.dd-option:hover, .dd-option:active, .dd-option:focus{ background:#f3f3f3; color:#000; z-index:2001;}.dd-selected-description-truncated { text-overflow: ellipsis; white-space:nowrap; }.dd-option-selected { background:#f6f6f6; }.dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px;}.dd-image-right { float:right; margin-right:15px; margin-left:5px;}.dd-container{ position:relative;}​ .dd-selected-text { font-weight:bold}​</style>";s.init=function(d){var a=e.extend({},r,d);return e("#css-ddslick").length<=0&&a.embedCSS&&e(u).appendTo("head"),this.each(function(){var a=e.extend({},r,d),o=e(this),s=o.data("ddslick");if(!s){var u=[];o.find("option").each(function(){var d=e(this),t=d.data();u.push({text:e.trim(d.text()),value:d.val(),selected:d.is(":selected"),description:t.description,imageSrc:t.imagesrc})}),a.keepJSONItemsOnTop?e.merge(a.data,u):a.data=e.merge(u,a.data);var h=o,g=e("<div>").attr("id",o.attr("id"));o.replaceWith(g),o=g;var m="ID_"+(new Date).getTime();e(o).attr("data-settings-id",m),l[m]={},e.extend(l[m],a),o.addClass("dd-container").append(p).append(f),o.find("input.dd-selected-value").attr("id",e(h).attr("id")).attr("name",e(h).attr("name"));var v=o.find(".dd-options");u=o.find(".dd-select");var x=o.find(".dd-selected");x.attr("aria-haspopup","listbox"),x.attr("aria-expanded","false"),x.attr("aria-controls","dd-options-"+m),v.attr("id","dd-options-"+m),v.attr("role","listbox"),v.attr("tabindex","-1"),v.attr("aria-label","select options"),v.attr("aria-hidden","true"),v.css({width:a.width}),u.css({width:a.width,background:a.background}),o.css({width:a.width}),null!==a.height&&v.css({height:a.height,overflow:"auto"}),e.each(a.data,function(d,t){t.selected&&(a.defaultSelectedIndex=d);var i=e("<li role='option'>").addClass("dd-option").attr("id","dd-option-"+m+"-"+d);t.value&&i.append(e("<input>").addClass("dd-option-value").attr("type","hidden").val(t.value)),t.imageSrc&&i.append(e("<img>").attr("src",t.imageSrc).addClass("dd-option-image"+("right"===a.imagePosition?" dd-image-right":""))),t.text&&i.append(e("<label>").addClass("dd-option-text").text(t.text)),t.description&&i.append(e("<small>").addClass("dd-option-description dd-desc").text(t.description)),v.append(i)}),v.keydown(function(d){var i=e(this);if("false"==i.attr("aria-hidden")){var a="dd-option-selected",s=[],l=e("."+a,i);switch(d.key){case"ArrowLeft":case"ArrowUp":return l.length?l.is(":first-child")||(s=l.removeClass(a).prev().addClass(a),i.attr("aria-activedescendant",s.attr("id"))):(s=e(".dd-option:first-child"),s.addClass(a),i.attr("aria-activedescendant",s.attr("id"))),!1;case"ArrowRight":case"ArrowDown":return l.length?l.is(":last-child")||(s=l.removeClass(a).next().addClass(a),i.attr("aria-activedescendant",s.attr("id"))):(s=e(".dd-option:first-child"),s.addClass(a),i.attr("aria-activedescendant",s.attr("id"))),!1;case"Enter":case" ":return l.length&&t(o,l.index(),!0),n(o),x.focus(),!1;case"Escape":return n(o),x.focus(),!1}}});var b={settings:a,original:h,selectedIndex:-1,selectedItem:null,selectedData:null};if(o.data("ddslick",b),a.selectText.length>0&&null===a.defaultSelectedIndex)o.find(".dd-selected").html(a.selectText);else{var k=null!=a.defaultSelectedIndex&&a.defaultSelectedIndex>=0&&a.defaultSelectedIndex<a.data.length?a.defaultSelectedIndex:0;t(o,k,!1)}o.find(".dd-select").on("click.ddslick",function(){i(o)}),o.find(".dd-option").on("click.ddslick",function(){t(o,e(this).index(),!0)}),o.find(".dd-options").on("focusout.ddslick",function(){setTimeout(function(){0==o.find(".dd-options").has(document.activeElement).length&&n(o)},50)}),a.clickOffToClose&&(v.addClass("dd-click-off-close"),o.on("click.ddslick",function(e){e.stopPropagation()}),c||(c=!0,e("body").on("click",function(){e(".dd-open").removeClass("dd-open"),e(".dd-selected").attr("aria-expanded","false"),e(".dd-click-off-close").slideUp(a.animationTime).attr("aria-hidden","true").siblings(".dd-select").find(".dd-pointer").removeClass("dd-pointer-up")})))}})},s.select=function(i){return this.each(function(){void 0!==i.index&&t(e(this),i.index),void 0!==i.value&&d(e(this),i.value),void 0!==i.id&&d(e(this),i.id)})},s.open=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");t&&i(d)})},s.close=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");t&&n(d)})},s.destroy=function(){return this.each(function(){var d=e(this),t=d.data("ddslick");if(t){var i=t.original;d.removeData("ddslick").unbind(".ddslick").replaceWith(i)}})}});


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | 
 3 | var gulp = require("gulp");
 4 | var rename = require("gulp-rename");
 5 | var uglify = require("gulp-uglify");
 6 | var eslint = require("gulp-eslint");
 7 | 
 8 | gulp.task("uglify", ["lint:tdd"], function() {
 9 |     return gulp
10 |         .src(__dirname + "/src/jquery.ddslick.js")
11 |         .pipe(uglify())
12 |         .pipe(rename("jquery.ddslick.min.js"))
13 |         .pipe(gulp.dest(__dirname + "/dist"));
14 | });
15 | 
16 | gulp.task("lint:tdd", function() {
17 |     return gulp
18 |         .src(__dirname + "/src/jquery.ddslick.js")
19 |         .pipe(eslint())
20 |         .pipe(eslint.format());
21 | });
22 | 
23 | gulp.task("lint", function() {
24 |     return gulp
25 |         .src(__dirname + "/src/jquery.ddslick.js")
26 |         .pipe(eslint())
27 |         .pipe(eslint.format())
28 |         .pipe(eslint.failAfterError());
29 | });
30 | 
31 | gulp.task("watch", function() {
32 |     gulp.watch(__dirname + "/src/**/*.js", ["uglify"]);
33 | });
34 | 
35 | gulp.task("build", ["uglify"]);
36 | gulp.task("test", ["lint"]);
37 | gulp.task("default", ["watch"]);
38 | 


--------------------------------------------------------------------------------
/jquery.ddslick.js:
--------------------------------------------------------------------------------
1 | src/jquery.ddslick.js


--------------------------------------------------------------------------------
/jquery.ddslick.min.js:
--------------------------------------------------------------------------------
1 | dist/jquery.ddslick.min.js


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ddslick",
 3 |   "version": "1.0.3",
 4 |   "description": "A free light weight jQuery plugin that allows you to create a custom drop down with images and description.",
 5 |   "main": "jquery.ddslick.js",
 6 |   "scripts": {
 7 |     "test": "gulp test"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/jsmodules/ddslick.git"
12 |   },
13 |   "author": "Brad Berger <brad@bradb.net>",
14 |   "contributors": [
15 |     "Oier Izulain <oizulain@gmail.com> (https://github.com/oizulain)"
16 |   ],
17 |   "license": "MPL-2.0",
18 |   "bugs": {
19 |     "url": "https://github.com/jsmodules/ddslick/issues"
20 |   },
21 |   "homepage": "https://github.com/jsmodules/ddslick#readme",
22 |   "devDependencies": {
23 |     "gulp": "^3.9.0",
24 |     "gulp-eslint": "^1.1.1",
25 |     "gulp-rename": "^1.2.2",
26 |     "gulp-uglify": "^1.5.1"
27 |   },
28 |   "dependencies": {
29 |     "jquery": "^3.0.0"
30 |   },
31 |   "keywords": ["jquery", "ddslick", "custom", "dropdown", "plugin", "image"]
32 | }
33 | 


--------------------------------------------------------------------------------
/src/jquery.ddslick.js:
--------------------------------------------------------------------------------
  1 | (function (factory) {
  2 | 
  3 |     if (typeof define === "function" && define.amd) {
  4 |         /** AMD. Register as an anonymous module. */
  5 |         define(["jquery"], factory);
  6 |     } else if (typeof module === "object" && module.exports) {
  7 |         /** Node/CommonJS */
  8 |         module.exports = factory(require("jquery"));
  9 |     } else {
 10 |         /** Browser globals */
 11 |         factory(window.jQuery);
 12 |     }
 13 | 
 14 | }(function ($) {
 15 | 
 16 |     $.fn.ddslick = function (method) {
 17 |         if (methods[method]) {
 18 |             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 19 |         } else if (typeof method === "object" || !method) {
 20 |             return methods.init.apply(this, arguments);
 21 |         } else {
 22 |             $.error("Method " + method + " does not exists.");
 23 |         }
 24 |     };
 25 | 
 26 |     var methods = {};
 27 |     var settingsMap = {};
 28 |     var defaults = {
 29 |         data: [],
 30 |         keepJSONItemsOnTop: false,
 31 |         animationTime: 50,
 32 |         width: "20em",
 33 |         height: null,
 34 |         background: "#eee",
 35 |         selectText: "",
 36 |         defaultSelectedIndex: null,
 37 |         truncateDescription: true,
 38 |         imagePosition: "left",
 39 |         showSelectedHTML: true,
 40 |         clickOffToClose: true,
 41 |         embedCSS: true,
 42 |         onSelected: function() { }
 43 |     };
 44 | 
 45 |     var closeListenerInitialized = false;
 46 |     var ddSelectHtml = "<div class='dd-select'><input class='dd-selected-value' type='hidden' /><button name='dd-selected-button' type='button' class='dd-selected'></button><span class='dd-pointer dd-pointer-down'></span></div>";
 47 |     var ddOptionsHtml = "<ul class='dd-options'></ul>";
 48 | 
 49 |     //CSS for ddSlick
 50 |     var ddslickCSS = "<style id='css-ddslick' type='text/css'>" +
 51 |         ".dd-select{ border-radius:2px; border:solid 1px #ccc; position:relative; cursor:pointer;}" +
 52 |         ".dd-desc { color:#aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; }" +
 53 |         ".dd-selected{ position:relative; overflow:hidden; display:block; padding:10px; font-weight:bold; width:100%; text-align:left;}" +
 54 |         ".dd-selected:focus { z-index:2001; }" +
 55 |         ".dd-pointer{ width:0; height:0; position:absolute; right:10px; top:50%; margin-top:-3px;}" +
 56 |         ".dd-selected:focus + .dd-pointer{ z-index:2002; }" +
 57 |         ".dd-pointer-down{ border:solid 5px transparent; border-top:solid 5px #000; }" +
 58 |         ".dd-pointer-up{border:solid 5px transparent !important; border-bottom:solid 5px #000 !important; margin-top:-8px;}" +
 59 |         ".dd-options{ border:solid 1px #ccc; border-top:none; list-style:none; box-shadow:0px 1px 5px #ddd; display:none; position:absolute; z-index:2000; margin:0; padding:0;background:#fff; overflow:visible;}" +
 60 |         ".dd-options:focus{ outline:0; }" +
 61 |         ".dd-option{ padding:10px; display:block; width:100%; text-align:left; border-bottom:solid 1px #ddd; overflow:visible; text-decoration:none; color:#333; cursor:pointer;-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out; box-sizing:border-box;}" +
 62 |         ".dd-options > .dd-option:last-child { border-bottom:none;}" +
 63 |         ".dd-option:hover, .dd-option:active, .dd-option:focus{ background:#f3f3f3; color:#000; z-index:2001;}" +
 64 |         ".dd-selected-description-truncated { text-overflow: ellipsis; white-space:nowrap; }" +
 65 |         ".dd-option-selected { background:#f6f6f6; }" +
 66 |         ".dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px;}" +
 67 |         ".dd-image-right { float:right; margin-right:15px; margin-left:5px;}" +
 68 |         ".dd-container{ position:relative;} .dd-selected-text { font-weight:bold}</style>";
 69 | 
 70 |     //Public methods
 71 |     methods.init = function (userOptions) {
 72 |         //Preserve the original defaults by passing an empty object as the target
 73 |         //The object is used to get global flags like embedCSS.
 74 |         var options = $.extend({}, defaults, userOptions);
 75 | 
 76 |         //CSS styles are only added once.
 77 |         if ($("#css-ddslick").length <= 0 && options.embedCSS) {
 78 |             $(ddslickCSS).appendTo("head");
 79 |         }
 80 | 
 81 |         //Apply on all selected elements
 82 |         return this.each(function() {
 83 |             //Preserve the original defaults by passing an empty object as the target
 84 |             //The object is used to save drop-down"s corresponding settings and data.
 85 |             var options = $.extend({}, defaults, userOptions);
 86 | 
 87 |             var obj = $(this),
 88 |                 data = obj.data("ddslick");
 89 |             //If the plugin has not been initialized yet
 90 |             if (!data) {
 91 | 
 92 |                 var ddSelect = [];
 93 | 
 94 |                 //Get data from HTML select options
 95 |                 obj.find("option").each(function() {
 96 |                     var $this = $(this), thisData = $this.data();
 97 |                     ddSelect.push({
 98 |                         text: $.trim($this.text()),
 99 |                         value: $this.val(),
100 |                         selected: $this.is(":selected"),
101 |                         description: thisData.description,
102 |                         imageSrc: thisData.imagesrc //keep it lowercase for HTML5 data-attributes
103 |                     });
104 |                 });
105 | 
106 |                 //Update Plugin data merging both HTML select data and JSON data for the dropdown
107 |                 if (options.keepJSONItemsOnTop)
108 |                     $.merge(options.data, ddSelect);
109 |                 else options.data = $.merge(ddSelect, options.data);
110 | 
111 |                 //Replace HTML select with empty placeholder, keep the original
112 |                 var original = obj, placeholder = $("<div>").attr("id", obj.attr("id"));
113 |                 obj.replaceWith(placeholder);
114 |                 obj = placeholder;
115 | 
116 |                 // Save options
117 |                 var settingsId = "ID_" + (new Date()).getTime();
118 |                 $(obj).attr("data-settings-id", settingsId);
119 |                 settingsMap[settingsId] = {};
120 |                 $.extend(settingsMap[settingsId], options);
121 | 
122 |                 //Add classes and append ddSelectHtml & ddOptionsHtml to the container
123 |                 obj.addClass("dd-container").append(ddSelectHtml).append(ddOptionsHtml);
124 | 
125 |                 // Inherit name attribute from original element
126 |                 obj.find("input.dd-selected-value")
127 |                     .attr("id", $(original).attr("id"))
128 |                     .attr("name", $(original).attr("name"));
129 | 
130 |                 //Get newly created ddOptions and ddSelect to manipulate
131 |                 var ddOptions = obj.find(".dd-options");
132 |                 ddSelect = obj.find(".dd-select");
133 |                 var ddSelected = obj.find(".dd-selected");
134 | 
135 |                 // Add accessibility controls.
136 |                 ddSelected.attr("aria-haspopup", "listbox");
137 |                 ddSelected.attr("aria-expanded", "false");
138 |                 ddSelected.attr("aria-controls", "dd-options-" + settingsId);
139 |                 ddOptions.attr("id", "dd-options-" + settingsId);
140 |                 ddOptions.attr("role", "listbox");
141 |                 ddOptions.attr("tabindex", "-1");
142 |                 ddOptions.attr("aria-label", "select options");
143 |                 ddOptions.attr("aria-hidden", "true");
144 | 
145 |                 //Set widths
146 |                 ddOptions.css({ width: options.width });
147 |                 ddSelect.css({ width: options.width, background: options.background });
148 |                 obj.css({ width: options.width });
149 | 
150 |                 //Set height
151 |                 if (options.height !== null)
152 |                     ddOptions.css({ height: options.height, overflow: "auto" });
153 | 
154 |                 //Add ddOptions to the container. Replace with template engine later.
155 |                 $.each(options.data, function (index, item) {
156 |                     if (item.selected) options.defaultSelectedIndex = index;
157 |                     var ddOption = $("<li role='option'>").addClass("dd-option").attr("id", "dd-option-" + settingsId + "-" + index);
158 |                     if(item.value) ddOption.append($("<input>").addClass("dd-option-value").attr("type", "hidden").val(item.value));
159 |                     if(item.imageSrc) ddOption.append($("<img>").attr("src", item.imageSrc).addClass("dd-option-image" + (options.imagePosition === "right" ? " dd-image-right" : "")));
160 |                     if(item.text) ddOption.append($("<label>").addClass("dd-option-text").text(item.text));
161 |                     if(item.description) ddOption.append($("<small>").addClass("dd-option-description dd-desc").text(item.description));
162 |                     ddOptions.append(ddOption);
163 |                 });
164 | 
165 |                 // Watch for and handle keypress when popup options list is open.
166 |                 ddOptions.keydown(function(event) {
167 |                     var ddOptions = $(this);
168 |                     if (ddOptions.attr("aria-hidden") != "false") {
169 |                         return;
170 |                     }
171 |                     var selectedClass = "dd-option-selected",
172 |                         selectedLi = [],
173 |                         currentLi = $("." + selectedClass, ddOptions);
174 |                     switch(event.key) {
175 | 
176 |                     // Up or left arrow moves to the previous option.
177 |                     case "ArrowLeft":
178 |                     case "ArrowUp":
179 |                         if (!currentLi.length) {
180 |                             selectedLi = $(".dd-option:first-child");
181 |                             selectedLi.addClass(selectedClass);
182 |                             ddOptions.attr("aria-activedescendant", selectedLi.attr("id"));
183 |                         }
184 |                         else if (!currentLi.is(":first-child")) {
185 |                             selectedLi = currentLi
186 |                                 .removeClass(selectedClass)
187 |                                 .prev()
188 |                                 .addClass(selectedClass);
189 |                             ddOptions.attr("aria-activedescendant", selectedLi.attr("id"));
190 |                         }
191 |                         return false;
192 | 
193 |                     // Down or right arrow moves to the next option.
194 |                     case "ArrowRight":
195 |                     case "ArrowDown":
196 |                         if (!currentLi.length) {
197 |                             selectedLi = $(".dd-option:first-child");
198 |                             selectedLi.addClass(selectedClass);
199 |                             ddOptions.attr("aria-activedescendant", selectedLi.attr("id"));
200 |                         }
201 |                         else if (!currentLi.is(":last-child")) {
202 |                             selectedLi = currentLi
203 |                                 .removeClass(selectedClass)
204 |                                 .next()
205 |                                 .addClass(selectedClass);
206 |                             ddOptions.attr("aria-activedescendant", selectedLi.attr("id"));
207 |                         }
208 |                         return false;
209 | 
210 |                     // Enter or spacebar selects the current item and closes the popup.
211 |                     case "Enter":
212 |                     case " ":
213 |                         if (currentLi.length) {
214 |                             selectIndex(obj, currentLi.index(), true);
215 |                         }
216 |                         close(obj);
217 |                         ddSelected.focus();
218 |                         return false;
219 | 
220 |                     // Escape closes the popup without modifying the selection.
221 |                     case "Escape":
222 |                         close(obj);
223 |                         ddSelected.focus();
224 |                         return false;
225 |                     }
226 | 
227 |                     // All other keys fall through.
228 |                     return;
229 |                 });
230 | 
231 |                 //Save plugin data.
232 |                 var pluginData = {
233 |                     settings: options,
234 |                     original: original,
235 |                     selectedIndex: -1,
236 |                     selectedItem: null,
237 |                     selectedData: null
238 |                 };
239 | 
240 |                 obj.data("ddslick", pluginData);
241 | 
242 |                 //Check if needs to show the select text, otherwise show selected or default selection
243 |                 if (options.selectText.length > 0 && options.defaultSelectedIndex === null) {
244 |                     obj.find(".dd-selected").html(options.selectText);
245 |                 }
246 |                 else {
247 |                     var index = (options.defaultSelectedIndex != null && options.defaultSelectedIndex >= 0 && options.defaultSelectedIndex < options.data.length)
248 |                                 ? options.defaultSelectedIndex
249 |                                 : 0;
250 |                     selectIndex(obj, index, false);
251 |                 }
252 | 
253 |                 //EVENTS
254 |                 //Displaying options
255 |                 obj.find(".dd-select").on("click.ddslick", function() {
256 |                     open(obj);
257 |                 });
258 | 
259 |                 //Selecting an option
260 |                 obj.find(".dd-option").on("click.ddslick", function() {
261 |                     selectIndex(obj, $(this).index(), true);
262 |                 });
263 | 
264 |                 // Keyboard navigating away from the widget.
265 |                 obj.find(".dd-options").on("focusout.ddslick", function() {
266 |                     setTimeout( function() {
267 |                         if (obj.find(".dd-options").has(document.activeElement).length == 0) {
268 |                             close(obj);
269 |                         }
270 |                     }, 50);
271 |                 });
272 | 
273 |                 //Click anywhere to close
274 |                 if (options.clickOffToClose) {
275 |                     ddOptions.addClass("dd-click-off-close");
276 |                     obj.on("click.ddslick", function (e) { e.stopPropagation(); });
277 |                     // Close listener needs to be added only once
278 |                     if(!closeListenerInitialized) {
279 |                         closeListenerInitialized = true;
280 |                         $("body").on("click", function () {
281 |                             $(".dd-open").removeClass("dd-open");
282 |                             $(".dd-selected").attr("aria-expanded", "false");
283 |                             $(".dd-click-off-close").slideUp(options.animationTime).attr("aria-hidden", "true").siblings(".dd-select").find(".dd-pointer").removeClass("dd-pointer-up");
284 |                         });
285 |                     }
286 |                 }
287 |             }
288 |         });
289 |     };
290 | 
291 |     //Public method to select an option by its index
292 |     methods.select = function (options) {
293 |         return this.each(function() {
294 |             if (options.index !== undefined)
295 |                 selectIndex($(this), options.index);
296 |             if (options.value !== undefined)
297 |                 selectValue($(this), options.value);
298 |             if (options.id !== undefined)
299 |                 selectValue($(this), options.id);
300 |         });
301 |     };
302 | 
303 |     //Public method to open drop down
304 |     methods.open = function() {
305 |         return this.each(function() {
306 |             var $this = $(this),
307 |                 pluginData = $this.data("ddslick");
308 | 
309 |             //Check if plugin is initialized
310 |             if (pluginData)
311 |                 open($this);
312 |         });
313 |     };
314 | 
315 |     //Public method to close drop down
316 |     methods.close = function() {
317 |         return this.each(function() {
318 |             var $this = $(this),
319 |                 pluginData = $this.data("ddslick");
320 | 
321 |             //Check if plugin is initialized
322 |             if (pluginData)
323 |                 close($this);
324 |         });
325 |     };
326 | 
327 |     //Public method to destroy. Unbind all events and restore the original Html select/options
328 |     methods.destroy = function() {
329 |         return this.each(function() {
330 |             var $this = $(this),
331 |                 pluginData = $this.data("ddslick");
332 | 
333 |             //Check if already destroyed
334 |             if (pluginData) {
335 |                 var originalElement = pluginData.original;
336 |                 $this.removeData("ddslick").unbind(".ddslick").replaceWith(originalElement);
337 |             }
338 |         });
339 |     };
340 | 
341 |     //Private: Select by value
342 |     function selectValue(obj, value) {
343 |         var index = obj.find(".dd-option-value[value= '" + value + "']").parents("li").prevAll().length;
344 |         selectIndex(obj, index);
345 |     }
346 | 
347 |     //Private: Select index
348 |     function selectIndex(obj, index, callbackOnSelection) {
349 | 
350 |         //Get plugin data
351 |         var pluginData = obj.data("ddslick");
352 | 
353 |         //Get required elements
354 |         var ddSelected = obj.find(".dd-selected"),
355 |             ddOptions = obj.find(".dd-options"),
356 |             ddSelectedValue = ddSelected.siblings(".dd-selected-value"),
357 |             selectedOption = obj.find(".dd-option").eq(index),
358 |             settings = pluginData.settings,
359 |             selectedData = pluginData.settings.data[index];
360 | 
361 |         //Highlight selected option
362 |         obj.find(".dd-option").removeClass("dd-option-selected");
363 |         selectedOption.addClass("dd-option-selected");
364 |         ddOptions.attr("aria-activedescendant", selectedOption.attr("id"));
365 | 
366 |         //Update or Set plugin data with new selection
367 |         pluginData.selectedIndex = index;
368 |         pluginData.selectedItem = selectedOption;
369 |         pluginData.selectedData = selectedData;
370 | 
371 |         //If set to display to full html, add html
372 |         if (settings.showSelectedHTML) {
373 |             var ddSelectedData = $("<div>");
374 |             if(selectedData.imageSrc) ddSelectedData.append($("<img>").addClass("dd-selected-image" + (settings.imagePosition === "right" ? " dd-image-right" : "")).attr("src", selectedData.imageSrc).attr("alt", "dd-selected-image"));
375 |             if(selectedData.text) ddSelectedData.append($("<label>").addClass("dd-selected-text").text(selectedData.text));
376 |             if(selectedData.description) ddSelectedData.append($("<small>").addClass("dd-selected-description dd-desc" + (settings.truncateDescription ? " dd-selected-description-truncated" : "")).text(selectedData.description));
377 |             ddSelected.html(ddSelectedData.html());
378 |         }
379 |         //Else only display text as selection
380 |         else ddSelected.html(selectedData.text);
381 | 
382 |         //Updating selected option value
383 |         ddSelectedValue.val(selectedData.value);
384 | 
385 |         //BONUS! Update the original element attribute with the new selection
386 |         pluginData.original.val(selectedData.value);
387 |         obj.data("ddslick", pluginData);
388 | 
389 |         //Close options on selection
390 |         close(obj);
391 | 
392 |         // Re-focus on selected item.
393 |         obj.find(".dd-selected").focus();
394 | 
395 |         //Adjust appearence for selected option
396 |         adjustSelectedHeight(obj);
397 | 
398 |         //Callback function on selection
399 |         if (callbackOnSelection && typeof settings.onSelected == "function") {
400 |             settings.onSelected.call(this, pluginData);
401 |         }
402 |     }
403 | 
404 |     //Private: Close the drop down options
405 |     function open(obj) {
406 | 
407 |         var $this = obj.find(".dd-select"),
408 |             ddSelected = obj.find(".dd-selected"),
409 |             ddOptions = $this.siblings(".dd-options"),
410 |             ddPointer = $this.find(".dd-pointer"),
411 |             wasOpen = ddOptions.is(":visible"),
412 |             settings = settingsMap[obj.attr("data-settings-id")];
413 | 
414 |         //Close all open options (multiple plugins) on the page
415 |         $(".dd-click-off-close").not(ddOptions).slideUp(settings.animationTime);
416 |         $(".dd-pointer").removeClass("dd-pointer-up");
417 |         $this.removeClass("dd-open");
418 |         ddSelected.attr("aria-expanded", "false");
419 |         ddOptions.attr("aria-hidden", "true");
420 | 
421 |         if (wasOpen) {
422 |             ddOptions.slideUp(settings.animationTime);
423 |             ddPointer.removeClass("dd-pointer-up");
424 |             $this.removeClass("dd-open");
425 |             ddSelected.attr("aria-expanded", "false");
426 |             ddOptions.attr("aria-hidden", "true");
427 |         }
428 |         else {
429 |             $this.addClass("dd-open");
430 |             ddOptions.slideDown(settings.animationTime);
431 |             ddPointer.addClass("dd-pointer-up");
432 |             ddSelected.attr("aria-expanded", "true");
433 |             ddOptions.attr("aria-hidden", "false").focus();
434 |         }
435 | 
436 |         //Fix text height (i.e. display title in center), if there is no description
437 |         adjustOptionsHeight(obj);
438 |     }
439 | 
440 |     //Private: Close the drop down options
441 |     function close(obj) {
442 |         //Close drop down and adjust pointer direction
443 |         var settings = settingsMap[obj.attr("data-settings-id")];
444 |         obj.find(".dd-select").removeClass("dd-open");
445 |         obj.find(".dd-selected").attr("aria-expanded", "false");
446 |         obj.find(".dd-options").slideUp(settings.animationTime).attr("aria-hidden", "true");
447 |         obj.find(".dd-pointer").removeClass("dd-pointer-up").removeClass("dd-pointer-up");
448 |     }
449 | 
450 |     //Private: Adjust appearence for selected option (move title to middle), when no desripction
451 |     function adjustSelectedHeight(obj) {
452 | 
453 |         //Get height of dd-selected
454 |         var lSHeight = obj.find(".dd-select").css("height");
455 | 
456 |         //Check if there is selected description
457 |         var descriptionSelected = obj.find(".dd-selected-description");
458 |         var imgSelected = obj.find(".dd-selected-image");
459 |         if (descriptionSelected.length <= 0 && imgSelected.length > 0) {
460 |             obj.find(".dd-selected-text").css("lineHeight", lSHeight);
461 |         }
462 |     }
463 | 
464 |     //Private: Adjust appearence for drop down options (move title to middle), when no desripction
465 |     function adjustOptionsHeight(obj) {
466 |         obj.find(".dd-option").each(function() {
467 |             var $this = $(this);
468 |             var lOHeight = $this.css("height");
469 |             var descriptionOption = $this.find(".dd-option-description");
470 |             var imgOption = obj.find(".dd-option-image");
471 |             if (descriptionOption.length <= 0 && imgOption.length > 0) {
472 |                 $this.find(".dd-option-text").css("lineHeight", lOHeight);
473 |             }
474 |         });
475 |     }
476 | 
477 | }));
478 | 


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