https://www.ocr.org.uk/js/dropdown.js

1/*jslint browser: true*/
2/*global $, jQuery*/
3// JavaScript Document
4jQuery(document).ready(function () {
5    "use strict";
6    jQuery('select.jsDropdown').each(function () {
7        var dropdown = this;
8        setTimeout(function () {
9            new GenericDropdown(dropdown);
10        }, 1);
11    });
12});
13
14// GENERIC DROPDOWNS
15GenericDropdown = function (element) {
16    "use strict";
17    var self = this,
18        name = jQuery(this.element).attr('name'),
19        /* get name */
20        attributes = this.element.attributes,
21        x,
22        events = jQuery.data(this.element, 'events') ? jQuery.data(this.element, 'events')['change'] : null,
23        /* copy over events */
24        tmp = jQuery('<div class="jsDropdownMenu" style="position:static"><ul><li style="display:inline; padding:0"></li></ul></div>'),
25        handler,
26        y;
27
28    //this.element = this.element ? this.element : element;
29    this.element = this.element || element;
30    this.field = {};
31    this.ddelement = null;
32    //this.options = this.options ? this.options : [];
33    this.options = this.options || [];
34    this.selectedIndex = 0;
35    this.width = 0;
36    this.position = [];
37    this.change = [];
38    this.attributes = {};
39    //this.className = this.className ? this.className : 'jsDropdown';
40    this.className = this.className || 'jsDropdown';
41    this.value = null;
42    this.keySelected = 0;
43
44    //this.eventOpen = this.eventOpen ? this.eventOpen : function (e) {
45    this.eventOpen = this.eventOpen ||
46        function (e) {
47            self.open(e);
48        };
49    //this.eventSelect = this.eventSelect ? this.eventSelect : function (e) {
50    this.eventSelect = this.eventSelect ||
51        function (e) {
52            self.select(e);
53        };
54    //this.eventKeydown = this.eventKeydown ? this.eventKeydown : function (e) {
55    this.eventKeydown = this.eventKeydown ||
56        function (e) {
57            self.keydown(e);
58        };
59    //this.eventChange = this.eventChange ? this.eventChange : function (e) {
60    this.eventChange = this.eventChange ||
61        function (e) {
62            self.change(e);
63        };
64    //this.eventClose = this.eventClose ? this.eventClose : function (e) {
65    this.eventClose = this.eventClose ||
66        function (e) {
67            self.close(e);
68        };
69    //this.eventCancel = this.eventCancel ? this.eventCancel : function (e) {
70    this.eventCancel = this.eventCancel ||
71        function (e) {
72            self.cancel(e);
73        };
74
75    if (this.element) {
76        // save options data
77        jQuery(this.element).find('option').each(function (i) {
78            if (!self.options[i]) {
79                self.options[i] = [];
80                self.options[i][0] = jQuery(this).val();
81                self.options[i][1] = jQuery(this).text();
82                self.options[i][2] = jQuery(this).attr('class');
83            }
84            if (this.selected) {
85                self.selectedIndex = i;
86            }
87        });
88
89        // save attributes
90        for (x = 0; x < attributes.length; x += 1) {
91            this.attributes[attributes[x].nodeName] = attributes[x].nodeValue;
92        }
93
94        // save class names
95        this.className = this.className + ' ' + this.element.className.replace(this.className, '');
96        //console.log(events);
97        if (events) {
98            for (handler in events) {
99                if (!!events[handler].handler) {
100                    this.change.push(events[handler].handler);
101                }
102            }
103        }
104        //console.log(this.change)
105        // calculate max width
106        jQuery('body').append(tmp);
107        for (y = 0; y < this.options.length; y += 1) {
108            tmp.find('li').text(this.options[y][1]);
109            if (tmp.find('li')[0].offsetWidth > this.width) {
110                this.width = tmp.find('li')[0].offsetWidth;
111            }
112        }
113        tmp.remove();
114
115        // draw styled dropdown
116        this.draw();
117
118        // save reference to object in jQuery
119        this.element.data('jDropdown', self);
120
121        // create hidden field with data
122        this.field = jQuery('<input type="hidden" name="' + name + '" value="' + this.options[this.selectedIndex][0] + '" />');
123        this.element.after(this.field);
124
125        // save data into jQuery
126        this.element.data('name', name);
127        this.element.data('value', this.options[this.selectedIndex][0]);
128        this.element.val(this.options[this.selectedIndex][0]);
129
130        // save selected value
131        this.value = this.options[this.selectedIndex][0];
132
133        // bind window close event to replace normal selects for server data
134        // jQuery( window ).bind( 'beforeunload', unload );
135    }
136};
137
138GenericDropdown.prototype.draw = function () {
139    "use strict";
140    var self = this,

141        id = (this.element.id) || null,
142        widthFactor = jQuery('#selectCatFAQ').length ? 0 : 27,
143        width = (jQuery(this.element).css('width') !== 'auto') ? (parseInt(jQuery(this.element).css('width'), 10) > this.width) ? parseInt(jQuery(this.element).css('width'), 10) - widthFactor : this.width + 5 : this.width + 5,
144        dropdown = jQuery('<a href="#" class="' + this.className + '"><span>' + this.options[this.selectedIndex][1] + '</span></a>'),
145        spanwidth = width,
146        select = jQuery(this.element);
147
148    // get id if there is one
149    //var id = (this.element.id) ? this.element.id : null;
150    // setting max width for the dropdowns
151    width = width > 340 ? 340 : width;
152
153    // bind events
154    //dropdown.width( width );
155    dropdown.bind('click', self.eventOpen);
156    dropdown.bind('keydown', self.eventKeydown);
157    dropdown.bind('change', self.eventChange);
158    //spanwidth=width-17;
159    //alert(spanwidth+"\n"+width);
160    dropdown.find('span').css({
161        width: spanwidth + 'px'
162    });
163    if (id) {
164        dropdown.attr('id', id);
165    }
166
167    // replace existing dropdown with styled one
168    this.element = jQuery(dropdown);
169    select.replaceWith(this.element);
170    // custom width set for accordion
171};
172
173GenericDropdown.prototype.unload = function () {
174    "use strict";
175    var select = jQuery('<select></select>').css({
176        visibility: 'hidden'
177    });
178
179    // copy back attributes
180    jQuery.each(this.attributes, function (key, value) {
181        select[0].setAttribute(key, value);
182    });
183
184    // add in options
185    jQuery.each(this.options, function () {
186        select.append(jQuery('<option value="' + this[0] + '">' + this[1] + '</option>'));
187    });
188
189    // set selected option
190    select.find('option')[this.selectedIndex].selected = 'selected';
191
192    // replace jsDropdown
193    this.element.replaceWith(select.removeClass('jsDropdown'));
194    this.element = select;
195};
196
197GenericDropdown.prototype.open = function (e) {
198    "use strict";
199    var self = this,
200        inPopup = this.element.parents('#Popup').length ? true : false,
201        jqueryOffset = this.element.offset(),
202        width = (this.element.innerWidth() > this.width) ? this.element.innerWidth() : this.width,
203        top = this.position[1],
204        dd = this.ddelement,
205        item = jQuery('<li><span>' + this.options[x][1] + '</span></li>'),
206        x;
207
208    if (this.element.attr('disabled') !== 'disabled') {
209        // get position for dropdown
210        // This line is not working with jquery 1.4 so removing border and padding paramaters
211        //var jquery_offset = this.element.offset( { border:true, padding:true } );
212        //this.position = [ jquery_offset.left+2, jquery_offset.top + this.element.outerHeight()-3 ];
213        this.position = [jqueryOffset.left, jqueryOffset.top + this.element.outerHeight()];
214        if (inPopup && !(jQuery.browser.msie && jQuery.browser.version < 7)) {
215            top = top - jQuery(document).scrollTop();
216        }
217
218        // create dropdown
219        this.ddelement = jQuery('<div class="jsDropdownMenu"><div class="top-content"><ul class="content"></ul></div></div>').css({
220            width: width - 6
221        });
222        this.ddelement = jQuery('<div class="jsDropdownMenu"><div class="top-content"><ul class="content"></ul></div></div>');
223        this.ddelement.css({
224            top: top,
225            left: this.position[0] + 'px'
226        });
227        if (inPopup && !(jQuery.browser.msie && jQuery.browser.version < 7)) {
228            this.ddelement.css({
229                position: 'fixed'
230            });
231        }
232        if (jQuery.browser.msie && jQuery.browser.version < 7 && inPopup) {
233            jQuery(window).bind('scroll', function () {
234                dd.css({
235                    top: top + jQuery(document).scrollTop()
236                });
237            });
238        }
239        for (x = 0; x < this.options.length; x += 1) {
240
241            if (x === this.selectedIndex) {
242                item.addClass('selected');
243            }
244
245            if (this.options[x][2]) {
246                item.addClass(this.options[x][2]);
247            }
248
249            item.bind('click', self.eventSelect);
250            item.bind('mouseover', function () {
251                self.ddelement.find('li.selected').removeClass('selected');
252                jQuery(this).addClass('selected');
253
254                self.keySelected = self.ddelement.find('li').index(this);
255            });
256
257            this.ddelement.find('ul.content').append(item);
258        }
259
260        // append dropdown to container
261        jQuery('body').append(this.ddelement);
262
263        // remove open event and add cancel event
264        this.element.unbind('click', self.eventOpen);
265        this.element.bind('click', self.eventCancel);
266
267        // add close event
268        setTimeout(function () {
269            jQuery('body').bind('click', self.eventClose);
270        }, 1);
271
272        //jQuery('.jsDropdownMenu .first span').append(this.options[this.selectedIndex][1])
273    }
274
275    //  e.stopPropagation();
276    e.preventDefault();
277};
278
279GenericDropdown.prototype.keydown = function (e) {
280    "use strict";
281    var z,
282        x;
283
284    if (e.keyCode === 32) { // space
285        if (!this.ddelement) {
286            this.keySelected = this.selectedIndex;
287            this.open(e);
288        } else {
289            this.ddelement.find('li.selected').click();
290            e.preventDefault();
291        }
292    } else if (e.keyCode === 40) { // down
293        if (++this.keySelected > this.options.length - 1) {
294            this.keySelected = 0;
295        }
296
297        if (this.ddelement) {
298            this.ddelement.find('li.selected').removeClass('selected');
299            this.ddelement.find('li:eq(' + this.keySelected + ')').addClass('selected');
300        } else {
301            this.selectedIndex = this.keySelected;
302
303            // set text dropdown
304            this.element.find('span').text(this.options[this.selectedIndex][1]);
305
306            // save value in jQuery
307            this.element.data('value', this.options[this.selectedIndex][0]);
308
309            // save selected value
310            this.value = this.options[this.selectedIndex][0];
311            this.element.val(this.options[this.selectedIndex][0]);
312            this.field.val(this.options[this.selectedIndex][0]);
313
314            // perform custom event listeners if they exist
315            e.target = this.element[0];
316            if (this.change.length) {
317                for (z = 0; z < this.change.length; z += 1) {
318                    this.change[z].call(this, e);
319                }
320            }
321        }
322
323        e.preventDefault();
324    } else if (e.keyCode === 38) { // up
325        if (--this.keySelected < 0) {
326            this.keySelected = this.options.length - 1;
327        }
328
329        if (this.ddelement) {
330            this.ddelement.find('li.selected').removeClass('selected');
331            this.ddelement.find('li:eq(' + this.keySelected + ')').addClass('selected');
332        } else {
333            this.selectedIndex = this.keySelected;
334
335            // set text dropdown
336            this.element.find('span').text(this.options[this.selectedIndex][1]);
337
338            // save value in jQuery
339            this.element.data('value', this.options[this.selectedIndex][0]);
340
341            // save selected value
342            this.value = this.options[this.selectedIndex][0];
343            this.element.val(this.options[this.selectedIndex][0]);
344            this.field.val(this.options[this.selectedIndex][0]);
345
346            // perform custom event listeners if they exist
347            e.target = this.element[0];
348            if (this.change.length) {
349                for (x = 0; x < this.change.length; x += 1) {
350                    this.change[x].call(this, e);
351                }
352            }
353        }
354
355        e.preventDefault();
356    } else if (e.keyCode === 13) { // return
357        this.ddelement.find('li:eq(' + this.keySelected + ')').click();
358        e.preventDefault();
359    } else if (e.keyCode === 9 && this.ddelement) { // tab
360        this.ddelement.find('li:eq(' + this.keySelected + ')').click();
361    }
362};
363
364GenericDropdown.prototype.select = function (e) {
365    "use strict";
366    // get index of selected item
367    var newSelection = -1,
368        targetLi = e.target,
369        listItems = this.ddelement.find('li'),
370        w,
371        x;
372
373    if (targetLi.nodeName !== 'LI') {
374        targetLi = jQuery(targetLi).parents('li')[0];
375    }
376    for (w = 0; w < listItems.length; w += 1) {
377        if (listItems[w] === targetLi) {
378            newSelection = w;
379            break;
380        }
381    }
382    if (newSelection !== this.selectedIndex) {
383        this.selectedIndex = newSelection;
384        // set text dropdown
385        this.element.find('span').html(this.options[this.selectedIndex][1]);
386
387        // save value in jQuery
388        this.element.data('value', this.options[this.selectedIndex][0]);
389
390        // save selected value
391        this.value = this.options[this.selectedIndex][0];
392        this.element.val(this.options[this.selectedIndex][0]);
393        this.field.val(this.options[this.selectedIndex][0]);
394
395        // perform custom event listeners if they exist
396        e.target = this.element[0];
397        //alert(this.change.length);
398        if (this.change.length) {
399            for (x = 0; x < this.change.length; x += 1) {
400                //alert(this.change[0].toString());
401                //this.change[x].call(this, e);
402                this.change[x].call(this, e);
403            }
404        }
405    }
406
407    this.eventClose(e);
408
409    e.stopPropagation();
410    e.preventDefault();
411};
412
413GenericDropdown.prototype.close = function (e) {
414    "use strict";
415    var self = this;
416
417    this.ddelement.remove();
418    delete this.ddelement;
419
420    // remove close event
421    jQuery('body').unbind('click', self.eventClose);
422
423    // add open event and remove cancel event
424    setTimeout(function () {
425        self.element.bind('click', self.eventOpen);
426    }, 1);
427    this.element.unbind('click', self.eventCancel);
428
429    if (e) {
430        e.preventDefault();
431    }
432};
433
434GenericDropdown.prototype.cancel = function (e) {
435    "use strict";
436    this.eventClose(e);
437
438    e.stopPropagation();
439};
440
441GenericDropdown.prototype.reset = function (dropdown) {
442    "use strict";
443    var select = jQuery('<select></select>');
444
445    // copy back attributes
446    jQuery.each(this.attributes, function (key, value) {
447        select[0].setAttribute(key, value);
448    });

449    if (dropdown.id) {
450        select[0].id = dropdown.id;
451    }
452
453    // add in options
454    jQuery.each(this.options, function () {
455        select.append(jQuery('<option value="' + this[0] + '">' + this[1] + '</option>'));
456    });
457
458    // set selected option
459    select.find('option')[this.selectedIndex].selected = 'selected';
460
461    // replace jsDropdown
462    jQuery(dropdown).replaceWith(select.removeClass('jsDropdown'));
463
464    // remove adjacent hidden field
465    select.next('input[type=hidden]').remove();
466
467    return select[0];
468};