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 onSelected: function () { } 35 }, 36 37 ddSelectHtml = '<div class="dd-select"><input class="dd-selected-value" type="hidden" /><a class="dd-selected"></a><span class="dd-pointer dd-pointer-down"></span></div>', 38 ddOptionsHtml = '<ul class="dd-options"></ul>', 39 40 //CSS for ddSlick 41 ddslickCSS = '<style id="css-ddslick" type="text/css">' + 42 '.dd-select{ border-radius:2px; border:solid 1px #ccc; position:relative; cursor:pointer;}' + 43 '.dd-desc { color:#aaa; display:block; overflow: hidden; font-weight:normal; line-height: 1.4em; }' + 44 '.dd-selected{ overflow:hidden; display:block; padding:10px; font-weight:bold;}' + 45 '.dd-pointer{ width:0; height:0; position:absolute; right:10px; top:50%; margin-top:-3px;}' + 46 '.dd-pointer-down{ border:solid 5px transparent; border-top:solid 5px #000; }' + 47 '.dd-pointer-up{border:solid 5px transparent !important; border-bottom:solid 5px #000 !important; margin-top:-8px;}' + 48 '.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:auto;}' + 49 '.dd-option{ padding:10px; display:block; border-bottom:solid 1px #ddd; overflow:hidden; 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; }' + 50 '.dd-options > li:last-child > .dd-option{ border-bottom:none;}' + 51 '.dd-option:hover{ background:#f3f3f3; color:#000;}' + 52 '.dd-selected-description-truncated { text-overflow: ellipsis; white-space:nowrap; }' + 53 '.dd-option-selected { background:#f6f6f6; }' + 54 '.dd-option-image, .dd-selected-image { vertical-align:middle; float:left; margin-right:5px; max-width:64px;}' + 55 '.dd-image-right { float:right; margin-right:15px; margin-left:5px;}' + 56 '.dd-container{ position:relative;}â .dd-selected-text { font-weight:bold}â</style>'; 57 58 //CSS styles are only added once. 59 if ($('#css-ddslick').length <= 0) { 60 $(ddslickCSS).appendTo('head'); 61 } 62 63 //Public methods 64 methods.init = function (options) { 65 //Preserve the original defaults by passing an empty object as the target 66 var options = $.extend({}, defaults, options); 67 68 //Apply on all selected elements 69 return this.each(function () { 70 var obj = $(this), 71 data = obj.data('ddslick'); 72 //If the plugin has not been initialized yet 73 if (!data) { 74 75 var ddSelect = [], ddJson = options.data; 76 77 //Get data from HTML select options 78 obj.find('option').each(function () { 79 var $this = $(this), thisData = $this.data(); 80 ddSelect.push({ 81 text: $.trim($this.text()), 82 value: $this.val(), 83 selected: $this.is(':selected'), 84 description: thisData.description, 85 imageSrc: thisData.imagesrc //keep it lowercase for HTML5 data-attributes 86 }); 87 }); 88 89 //Update Plugin data merging both HTML select data and JSON data for the dropdown 90 if (options.keepJSONItemsOnTop) 91 $.merge(options.data, ddSelect); 92 else options.data = $.merge(ddSelect, options.data); 93 94 //Replace HTML select with empty placeholder, keep the original
95 var original = obj, placeholder = $('<div id="' + obj.attr('id') + '"></div>'); 96 obj.replaceWith(placeholder); 97 obj = placeholder; 98 99 //Add classes and append ddSelectHtml & ddOptionsHtml to the container 100 obj.addClass('dd-container').append(ddSelectHtml).append(ddOptionsHtml); 101 102 //Get newly created ddOptions and ddSelect to manipulate 103 var ddSelect = obj.find('.dd-select'), 104 ddOptions = obj.find('.dd-options'); 105 106 //Set widths 107 ddOptions.css({ width: options.width }); 108 ddSelect.css({ width: options.width, background: options.background }); 109 obj.css({ width: options.width }); 110 111 //Set height 112 if (options.height != null) 113 ddOptions.css({ height: options.height, overflow: 'auto' }); 114 115 //Add ddOptions to the container. Replace with template engine later. 116 $.each(options.data, function (index, item) { 117 if (item.selected) options.defaultSelectedIndex = index; 118 ddOptions.append('<li>' + 119 '<a class="dd-option">' + 120 (item.value ? ' <input class="dd-option-value" type="hidden" value="' + item.value + '" />' : '') + 121 (item.imageSrc ? ' <img class="dd-option-image' + (options.imagePosition == "right" ? ' dd-image-right' : '') + '" src="' + item.imageSrc + '" />' : '') + 122 (item.text ? ' <label class="dd-option-text">' + item.text + '</label>' : '') + 123 (item.description ? ' <small class="dd-option-description dd-desc">' + item.description + '</small>' : '') + 124 '</a>' + 125 '</li>'); 126 }); 127 128 //Save plugin data. 129 var pluginData = { 130 settings: options, 131 original: original, 132 selectedIndex: -1, 133 selectedItem: null, 134 selectedData: null 135 } 136 obj.data('ddslick', pluginData); 137 138 //Check if needs to show the select text, otherwise show selected or default selection 139 if (options.selectText.length > 0 && options.defaultSelectedIndex == null) { 140 obj.find('.dd-selected').html(options.selectText); 141 } 142 else { 143 var index = (options.defaultSelectedIndex != null && options.defaultSelectedIndex >= 0 && options.defaultSelectedIndex < options.data.length) 144 ? options.defaultSelectedIndex 145 : 0; 146 selectIndex(obj, index); 147 } 148 149 //EVENTS 150 //Displaying options 151 obj.find('.dd-select').on('click.ddslick', function () { 152 open(obj); 153 }); 154 155 //Selecting an option 156 obj.find('.dd-option').on('click.ddslick', function () { 157 selectIndex(obj, $(this).closest('li').index()); 158 }); 159 160 //Click anywhere to close 161 if (options.clickOffToClose) { 162 ddOptions.addClass('dd-click-off-close'); 163 obj.on('click.ddslick', function (e) { e.stopPropagation(); }); 164 $('body').on('click', function () { 165 $('.dd-click-off-close').slideUp(50).siblings('.dd-select').find('.dd-pointer').removeClass('dd-pointer-up'); 166 }); 167 } 168 } 169 }); 170 }; 171 172 //Public method to select an option by its index 173 methods.select = function (options) { 174 return this.each(function () { 175 if (options.index) 176 selectIndex($(this), options.index); 177 }); 178 } 179 180 //Public method to open drop down 181 methods.open = function () { 182 return this.each(function () { 183 var $this = $(this), 184 pluginData = $this.data('ddslick'); 185 186 //Check if plugin is initialized 187 if (pluginData) 188 open($this); 189 }); 190 }; 191 192 //Public method to close drop down 193 methods.close = function () { 194 return this.each(function () { 195 var $this = $(this), 196 pluginData = $this.data('ddslick'); 197 198 //Check if plugin is initialized 199 if (pluginData) 200 close($this); 201 }); 202 }; 203 204 //Public method to destroy. Unbind all events and restore the original Html select/options 205 methods.destroy = function () { 206 return this.each(function () { 207 var $this = $(this), 208 pluginData = $this.data('ddslick'); 209 210 //Check if already destroyed 211 if (pluginData) { 212 var originalElement = pluginData.original; 213 $this.removeData('ddslick').unbind('.ddslick').replaceWith(originalElement); 214 } 215 }); 216 } 217
218 //Private: Select index 219 function selectIndex(obj, index) { 220 221 //Get plugin data 222 var pluginData = obj.data('ddslick'); 223 224 //Get required elements 225 var ddSelected = obj.find('.dd-selected'), 226 ddSelectedValue = ddSelected.siblings('.dd-selected-value'), 227 ddOptions = obj.find('.dd-options'), 228 ddPointer = ddSelected.siblings('.dd-pointer'), 229 selectedOption = obj.find('.dd-option').eq(index), 230 selectedLiItem = selectedOption.closest('li'), 231 settings = pluginData.settings, 232 selectedData = pluginData.settings.data[index]; 233 234 //Highlight selected option 235 obj.find('.dd-option').removeClass('dd-option-selected'); 236 selectedOption.addClass('dd-option-selected'); 237 238 //Update or Set plugin data with new selection 239 pluginData.selectedIndex = index; 240 pluginData.selectedItem = selectedLiItem; 241 pluginData.selectedData = selectedData; 242 243 //If set to display to full html, add html 244 if (settings.showSelectedHTML) { 245 ddSelected.html( 246 (selectedData.imageSrc ? '<img class="dd-selected-image' + (settings.imagePosition == "right" ? ' dd-image-right' : '') + '" src="' + selectedData.imageSrc + '" />' : '') + 247 (selectedData.text ? '<label class="dd-selected-text">' + selectedData.text + '</label>' : '') + 248 (selectedData.description ? '<small class="dd-selected-description dd-desc' + (settings.truncateDescription ? ' dd-selected-description-truncated' : '') + '" >' + selectedData.description + '</small>' : '') 249 ); 250 251 } 252 //Else only display text as selection 253 else ddSelected.html(selectedData.text); 254 255 //Updating selected option value 256 ddSelectedValue.val(selectedData.value); 257 258 //BONUS! Update the original element attribute with the new selection 259 pluginData.original.val(selectedData.value); 260 obj.data('ddslick', pluginData); 261 262 //Close options on selection 263 close(obj); 264 265 //Adjust appearence for selected option 266 adjustSelectedHeight(obj); 267 268 //Callback function on selection 269 if (typeof settings.onSelected == 'function') { 270 settings.onSelected.call(this, pluginData); 271 } 272 } 273 274 //Private: Close the drop down options 275 function open(obj) { 276 277 var $this = obj.find('.dd-select'), 278 ddOptions = $this.siblings('.dd-options'), 279 ddPointer = $this.find('.dd-pointer'), 280 wasOpen = ddOptions.is(':visible'); 281 282 //Close all open options (multiple plugins) on the page 283 $('.dd-click-off-close').not(ddOptions).slideUp(50); 284 $('.dd-pointer').removeClass('dd-pointer-up'); 285 286 if (wasOpen) { 287 ddOptions.slideUp('fast'); 288 ddPointer.removeClass('dd-pointer-up'); 289 } 290 else { 291 ddOptions.slideDown('fast'); 292 ddPointer.addClass('dd-pointer-up'); 293 } 294 295 //Fix text height (i.e. display title in center), if there is no description 296 adjustOptionsHeight(obj); 297 } 298 299 //Private: Close the drop down options 300 function close(obj) { 301 //Close drop down and adjust pointer direction 302 obj.find('.dd-options').slideUp(50); 303 obj.find('.dd-pointer').removeClass('dd-pointer-up').removeClass('dd-pointer-up'); 304 } 305 306 //Private: Adjust appearence for selected option (move title to middle), when no desripction 307 function adjustSelectedHeight(obj) { 308 309 //Get height of dd-selected 310 var lSHeight = obj.find('.dd-select').css('height'); 311 312 //Check if there is selected description 313 var descriptionSelected = obj.find('.dd-selected-description'); 314 var imgSelected = obj.find('.dd-selected-image'); 315 if (descriptionSelected.length <= 0 && imgSelected.length > 0) { 316 obj.find('.dd-selected-text').css('lineHeight', lSHeight); 317 } 318 } 319 320 //Private: Adjust appearence for drop down options (move title to middle), when no desripction 321 function adjustOptionsHeight(obj) { 322 obj.find('.dd-option').each(function () { 323 var $this = $(this); 324 var lOHeight = $this.css('height'); 325 var descriptionOption = $this.find('.dd-option-description'); 326 var imgOption = obj.find('.dd-option-image'); 327 if (descriptionOption.length <= 0 && imgOption.length > 0) { 328 $this.find('.dd-option-text').css('lineHeight', lOHeight); 329 } 330 }); 331 } 332 333})(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.