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:480; 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" id="'+item.quality+'">' + 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 //alert($(this).html()); 159 }); 160 161 //Click anywhere to close 162 if (options.clickOffToClose) { 163 ddOptions.addClass('dd-click-off-close'); 164 obj.on('click.ddslick', function (e) { e.stopPropagation(); }); 165 $('body').on('click', function () { 166 $('.dd-click-off-close').slideUp(50).siblings('.dd-select').find('.dd-pointer').removeClass('dd-pointer-up'); 167 }); 168 } 169 } 170 }); 171 }; 172 173 //Public method to select an option by its index 174 methods.select = function (options) { 175 return this.each(function () { 176 if (options.index) 177 selectIndex($(this), options.index); 178 }); 179 } 180 181 //Public method to open drop down 182 methods.open = function () { 183 return this.each(function () { 184 var $this = $(this), 185 pluginData = $this.data('ddslick'); 186 187 //Check if plugin is initialized 188 if (pluginData) 189 open($this); 190 }); 191 }; 192 193 //Public method to close drop down 194 methods.close = function () { 195 return this.each(function () { 196 var $this = $(this), 197 pluginData = $this.data('ddslick'); 198 199 //Check if plugin is initialized 200 if (pluginData) 201 close($this); 202 }); 203 }; 204 205 //Public method to destroy. Unbind all events and restore the original Html select/options 206 methods.destroy = function () { 207 return this.each(function () { 208 var $this = $(this), 209 pluginData = $this.data('ddslick'); 210 211 //Check if already destroyed 212 if (pluginData) { 213 var originalElement = pluginData.original; 214 $this.removeData('ddslick').unbind('.ddslick').replaceWith(originalElement); 215 } 216 }); 217 } 218
219 //Private: Select index 220 function selectIndex(obj, index) { 221 222 //Get plugin data 223 var pluginData = obj.data('ddslick'); 224 225 //Get required elements 226 var ddSelected = obj.find('.dd-selected'), 227 ddSelectedValue = ddSelected.siblings('.dd-selected-value'), 228 ddOptions = obj.find('.dd-options'), 229 ddPointer = ddSelected.siblings('.dd-pointer'), 230 selectedOption = obj.find('.dd-option').eq(index), 231 selectedLiItem = selectedOption.closest('li'), 232 settings = pluginData.settings, 233 selectedData = pluginData.settings.data[index]; 234 235 //Highlight selected option 236 obj.find('.dd-option').removeClass('dd-option-selected'); 237 selectedOption.addClass('dd-option-selected'); 238 239 //Update or Set plugin data with new selection 240 pluginData.selectedIndex = index; 241 pluginData.selectedItem = selectedLiItem; 242 pluginData.selectedData = selectedData; 243 244 //If set to display to full html, add html 245 if (settings.showSelectedHTML) { 246 ddSelected.html( 247 (selectedData.imageSrc ? '<img class="dd-selected-image' + (settings.imagePosition == "right" ? ' dd-image-right' : '') + '" src="' + selectedData.imageSrc + '" />' : '') + 248 (selectedData.text ? '<label downloadquality="'+selectedData.quality+'" class="dd-selected-text">' + selectedData.text + '</label>' : '') + 249 (selectedData.description ? '<small class="dd-selected-description dd-desc' + (settings.truncateDescription ? ' dd-selected-description-truncated' : '') + '" >' + selectedData.description + '</small>' : '') 250 ); 251 252 } 253 //Else only display text as selection 254 else ddSelected.html(selectedData.text); 255 256 //Updating selected option value 257 ddSelectedValue.val(selectedData.value); 258 259 //BONUS! Update the original element attribute with the new selection 260 pluginData.original.val(selectedData.value); 261 obj.data('ddslick', pluginData); 262 263 //Close options on selection 264 close(obj); 265 266 //Adjust appearence for selected option 267 adjustSelectedHeight(obj); 268 269 //Callback function on selection 270 if (typeof settings.onSelected == 'function') { 271 settings.onSelected.call(this, pluginData); 272 } 273 } 274 275 //Private: Close the drop down options 276 function open(obj) { 277 278 var $this = obj.find('.dd-select'), 279 ddOptions = $this.siblings('.dd-options'), 280 ddPointer = $this.find('.dd-pointer'), 281 wasOpen = ddOptions.is(':visible'); 282 283 //Close all open options (multiple plugins) on the page 284 $('.dd-click-off-close').not(ddOptions).slideUp(50); 285 $('.dd-pointer').removeClass('dd-pointer-up'); 286 287 if (wasOpen) { 288 ddOptions.slideUp('fast'); 289 ddPointer.removeClass('dd-pointer-up'); 290 } 291 else { 292 ddOptions.slideDown('fast'); 293 ddPointer.addClass('dd-pointer-up'); 294 } 295 296 //Fix text height (i.e. display title in center), if there is no description 297 adjustOptionsHeight(obj); 298 } 299 300 //Private: Close the drop down options 301 function close(obj) { 302 //Close drop down and adjust pointer direction 303 obj.find('.dd-options').slideUp(50); 304 obj.find('.dd-pointer').removeClass('dd-pointer-up').removeClass('dd-pointer-up'); 305 } 306 307 //Private: Adjust appearence for selected option (move title to middle), when no desripction 308 function adjustSelectedHeight(obj) { 309 310 //Get height of dd-selected 311 var lSHeight = obj.find('.dd-select').css('height'); 312 313 //Check if there is selected description 314 var descriptionSelected = obj.find('.dd-selected-description'); 315 var imgSelected = obj.find('.dd-selected-image'); 316 if (descriptionSelected.length <= 0 && imgSelected.length > 0) { 317 obj.find('.dd-selected-text').css('lineHeight', lSHeight); 318 } 319 } 320 321 //Private: Adjust appearence for drop down options (move title to middle), when no desripction 322 function adjustOptionsHeight(obj) { 323 obj.find('.dd-option').each(function () { 324 var $this = $(this); 325 var lOHeight = $this.css('height'); 326 var descriptionOption = $this.find('.dd-option-description'); 327 var imgOption = obj.find('.dd-option-image'); 328 if (descriptionOption.length <= 0 && imgOption.length > 0) { 329 $this.find('.dd-option-text').css('lineHeight', lOHeight); 330 } 331 }); 332 } 333 334})(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.