1//Title: Custom DropDown plugin by PC 2//Documentation: http://designwithpc.com/Plugins/ddslick 3//Author: PC 4//Website: http://designwithpc.com 5//Twitter: http://twitter.com/chaudharyp 6 7(function ($) { 8 9 $.fn.ddslick = function (method) { 10 if (methods[method]) { 11 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 12 } else if (typeof method === 'object' || !method) { 13 return methods.init.apply(this, arguments); 14 } else { 15 $.error('Method ' + method + ' does not exists.'); 16 } 17 }; 18 19 var methods = {}, 20 21 //Set defauls for the control 22 defaults = { 23 data: [], 24 keepJSONItemsOnTop: false, 25 width: 260, 26 height: null, 27 background: "#eee", 28 selectText: "", 29 defaultSelectedIndex: null, 30 truncateDescription: true, 31 imagePosition: "left", 32 showSelectedHTML: true, 33 clickOffToClose: true, 34 embedCSS: true, 35 onSelected: function () { } 36 }, 37 38 ddSelectHtml = '<div class="geotdd-select"><input class="geotdd-selected-value" type="hidden" /><a class="geotdd-selected"></a><span class="geotdd-pointer geotdd-pointer-down"></span></div>', 39 ddOptionsHtml = '<ul class="geotdd-options"></ul>'; 40 41 42 //Public methods 43 methods.init = function (userOptions) { 44 //Preserve the original defaults by passing an empty object as the target 45 //The object is used to get global flags like embedCSS. 46 var options = $.extend({}, defaults, userOptions); 47 48 //Apply on all selected elements 49 return this.each(function () { 50 //Preserve the original defaults by passing an empty object as the target 51 //The object is used to save drop-down's corresponding settings and data. 52 var options = $.extend({}, defaults, userOptions); 53 54 var obj = $(this), 55 data = obj.data('ddslick'); 56 //If the plugin has not been initialized yet 57 if (!data) { 58 59 var ddSelect = [], ddJson = options.data; 60 61 //Get data from HTML select options 62 obj.find('option').each(function () { 63 var $this = $(this), thisData = $this.data(); 64 ddSelect.push({ 65 text: $.trim($this.text()), 66 value: $this.val(), 67 selected: $this.is(':selected'), 68 f: $this.is(':selected'), 69 description: thisData.description, 70 imageSrc: thisData.imagesrc //keep it lowercase for HTML5 data-attributes 71 }); 72 }); 73 74 //Update Plugin data merging both HTML select data and JSON data for the dropdown 75 if (options.keepJSONItemsOnTop) 76 $.merge(options.data, ddSelect); 77 else options.data = $.merge(ddSelect, options.data); 78 79 //Replace HTML select with empty placeholder, keep the original 80 var original = obj, placeholder =$('<div id="' + obj.attr('id') +'-geotdd-placeholder"></div>'); 81 obj.replaceWith(placeholder); 82 obj = placeholder; 83 84 //Add classes and append ddSelectHtml & ddOptionsHtml to the container 85 obj.addClass('geotdd-container').append(ddSelectHtml).append(ddOptionsHtml); 86 87 // Inherit name attribute from original element 88 obj.find("input.geotdd-selected-value") 89 .attr("id", $(original).attr("id")) 90 .attr("name", $(original).attr("name")); 91 92 //Get newly created ddOptions and ddSelect to manipulate 93 var ddSelect = obj.find('.geotdd-select'), 94 ddOptions = obj.find('.geotdd-options'); 95 96 //Set widths 97 obj.css({ "max-width": options.width }); 98 99 //Set height 100 if (options.height != null) 101 ddOptions.css({ height: options.height, overflow: 'auto' }); 102 103 //Add ddOptions to the container. Replace with template engine later. 104 $.each(options.data, function (index, item) { 105 if (item.f) options.defaultSelectedIndex = index; 106 ddOptions.append('<li>' + 107 '<a class="geotdd-option">' + 108 (item.value ? ' <input class="geotdd-option-value" type="hidden" value="' + item.value + '" />' : '') + 109 (item.imageSrc ? ' <span class="' + item.imageSrc + ' geotdd-option-image' + (options.imagePosition == "right" ? ' geotdd-image-right' : '') + '"></span>' : '') + 110 (item.text ? ' <label class="geotdd-option-text">' + item.text + '</label>' : '') +
111 (item.description ? ' <small class="geotdd-option-description geotdd-desc">' + item.description + '</small>' : '') + 112 '</a>' + 113 '</li>'); 114 }); 115 116 //Save plugin data. 117 var pluginData = { 118 settings: options, 119 original: original, 120 selectedIndex: -1, 121 selectedItem: null, 122 selectedData: null 123 } 124 obj.data('ddslick', pluginData); 125 126 //Check if needs to show the select text, otherwise show selected or default selection 127 if (options.selectText.length > 0 && options.defaultSelectedIndex == null) { 128 obj.find('.geotdd-selected').html(options.selectText); 129 } 130 else { 131 var index = (options.defaultSelectedIndex != null && options.defaultSelectedIndex >= 0 && options.defaultSelectedIndex < options.data.length) 132 ? options.defaultSelectedIndex 133 : 0; 134 selectIndex(obj, index, false); 135 } 136 137 //EVENTS 138 //Displaying options 139 obj.find('.geotdd-select').on('click.ddslick', function () { 140 open(obj); 141 }); 142 143 //Selecting an option 144 obj.find('.geotdd-option').on('click.ddslick', function () { 145 selectIndex(obj, $(this).closest('li').index()); 146 }); 147 148 //Click anywhere to close 149 if (options.clickOffToClose) { 150 ddOptions.addClass('geotdd-click-off-close'); 151 obj.on('click.ddslick', function (e) { e.stopPropagation(); }); 152 $('body').on('click', function () { 153 $('.geotdd-open').removeClass('geotdd-open'); 154 $('.geotdd-click-off-close').slideUp(50).siblings('.geotdd-select').find('.geotdd-pointer').removeClass('geotdd-pointer-up'); 155 }); 156 } 157 } 158 }); 159 }; 160 161 //Public method to select an option by its index 162 methods.select = function (options) { 163 return this.each(function () { 164 if (options.index!==undefined) 165 selectIndex($(this), options.index); 166 if (options.id) 167 selectId($(this), options.id); 168 }); 169 } 170 171 //Public method to open drop down 172 methods.open = function () { 173 return this.each(function () { 174 var $this = $(this), 175 pluginData = $this.data('ddslick'); 176 177 //Check if plugin is initialized 178 if (pluginData) 179 open($this); 180 }); 181 }; 182 183 //Public method to close drop down 184 methods.close = function () { 185 return this.each(function () { 186 var $this = $(this), 187 pluginData = $this.data('ddslick'); 188 189 //Check if plugin is initialized 190 if (pluginData) 191 close($this); 192 }); 193 }; 194 195 //Public method to destroy. Unbind all events and restore the original Html select/options 196 methods.destroy = function () { 197 return this.each(function () { 198 var $this = $(this), 199 pluginData = $this.data('ddslick'); 200 201 //Check if already destroyed 202 if (pluginData) { 203 var originalElement = pluginData.original; 204 $this.removeData('ddslick').unbind('.ddslick').replaceWith(originalElement); 205 } 206 }); 207 } 208 209 //Private: Select id 210 function selectId(obj, id) { 211 212 var index = obj.find(".geotdd-option-value[value= '" + id + "']").parents("li").prevAll().length; 213 selectIndex(obj, index); 214 215 } 216 217 //Private: Select index 218 function selectIndex(obj, index, doCallback) { 219 // If true, fire the onSelected callback; true by if not specified 220 if (typeof doCallback === 'undefined') { 221 doCallback = true; 222 } 223 //Get plugin data 224 var pluginData = obj.data('ddslick'); 225 226 //Get required elements 227 var ddSelected = obj.find('.geotdd-selected'), 228 ddSelectedValue = ddSelected.siblings('.geotdd-selected-value'), 229 ddOptions = obj.find('.geotdd-options'), 230 ddPointer = ddSelected.siblings('.geotdd-pointer'), 231 selectedOption = obj.find('.geotdd-option').eq(index), 232 selectedLiItem = selectedOption.closest('li'), 233 settings = pluginData.settings, 234 selectedData = pluginData.settings.data[index]; 235 236 //Highlight selected option 237 obj.find('.geotdd-option').removeClass('geotdd-option-selected'); 238 selectedOption.addClass('geotdd-option-selected'); 239 240 //Update or Set plugin data with new selection 241 pluginData.selectedIndex = index; 242 pluginData.selectedItem = selectedLiItem; 243 pluginData.selectedData = selectedData; 244 245 //If set to display to full html, add html 246 if (settings.showSelectedHTML) { 247 ddSelected.html( 248 (selectedData.imageSrc ? '<span class="' + selectedData.imageSrc + ' geotdd-selected-image' + (settings.imagePosition == "right" ? ' geotdd-image-right' : '') + '"></span>' : '') + 249 (selectedData.text ? '<label class="geotdd-selected-text">' + selectedData.text + '</label>' : '') + 250 (selectedData.description ? '<small class="geotdd-selected-description geotdd-desc' + (settings.truncateDescription ? ' geotdd-selected-description-truncated' : '') + '" >' + selectedData.description + '</small>' : '') 251 ); 252 253 } 254 //Else only display text as selection 255 else ddSelected.html(selectedData.text); 256 257 //Updating selected option value 258 ddSelectedValue.val(selectedData.value); 259 260 //BONUS! Update the original element attribute with the new selection 261 pluginData.original.val(selectedData.value); 262 obj.data('ddslick', pluginData); 263 264 //Close options on selection 265 close(obj); 266 267 //Adjust appearence for selected option 268 adjustSelectedHeight(obj); 269 270 //Callback function on selection 271 if (doCallback && typeof settings.onSelected == 'function') { 272 settings.onSelected.call(this, pluginData); 273 } 274 } 275
276 //Private: Close the drop down options 277 function open(obj) { 278 279 var $this = obj.find('.geotdd-select'), 280 ddOptions = $this.siblings('.geotdd-options'), 281 ddPointer = $this.find('.geotdd-pointer'), 282 wasOpen = ddOptions.is(':visible'); 283 284 //Close all open options (multiple plugins) on the page 285 $('.geotdd-click-off-close').not(ddOptions).slideUp(50); 286 $('.geotdd-pointer').removeClass('geotdd-pointer-up'); 287 $this.removeClass('geotdd-open'); 288 289 if (wasOpen) { 290 ddOptions.slideUp('fast'); 291 ddPointer.removeClass('geotdd-pointer-up'); 292 $this.removeClass('geotdd-open'); 293 } 294 else { 295 $this.addClass('geotdd-open'); 296 ddOptions.slideDown('fast'); 297 ddPointer.addClass('geotdd-pointer-up'); 298 } 299 300 //Fix text height (i.e. display title in center), if there is no description 301 adjustOptionsHeight(obj); 302 } 303 304 //Private: Close the drop down options 305 function close(obj) { 306 //Close drop down and adjust pointer direction 307 obj.find('.geotdd-select').removeClass('geotdd-open'); 308 obj.find('.geotdd-options').slideUp(50); 309 obj.find('.geotdd-pointer').removeClass('geotdd-pointer-up').removeClass('geotdd-pointer-up'); 310 } 311 312 //Private: Adjust appearence for selected option (move title to middle), when no desripction 313 function adjustSelectedHeight(obj) { 314 315 //Get height of geotdd-selected 316 var lSHeight = obj.find('.geotdd-select').css('height'); 317 318 //Check if there is selected description 319 var descriptionSelected = obj.find('.geotdd-selected-description'); 320 var imgSelected = obj.find('.geotdd-selected-image'); 321 322 } 323 324 //Private: Adjust appearence for drop down options (move title to middle), when no desripction 325 function adjustOptionsHeight(obj) { 326 obj.find('.geotdd-option').each(function () { 327 var $this = $(this); 328 var lOHeight = $this.css('height'); 329 var descriptionOption = $this.find('.geotdd-option-description'); 330 var imgOption = obj.find('.geotdd-option-image'); 331 332 }); 333 } 334 335})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.