1/* 2 3 (Early beta) jQuery UI CoverFlow 2.2 App for jQueryUI 1.8.9 / core 1.6.2 4 Copyright Addy Osmani 2011. 5 6 With contributions from Paul Bakhaus, Nicolas Bonnicci 7 8*/ 9(function ($) { 10 $.app = function (options) { 11 var coverflowApp = coverflowApp || {}; 12 13 coverflowApp = { 14 defaultItem: 1, 15 //default set item to be centered on 16 defaultDuration: 1200, 17 //animation duration 18 html: $('#demo-frame div.wrapper').html(), 19 imageCaption: $('.demo #imageCaption'), 20 sliderCtrl: $('.demo #slider'), 21 coverflowCtrl: $('.demo #coverflow'), 22 coverflowImages: $('.demo #coverflow').find('img'), 23 coverflowItems: $('.demo .coverflowItem'), 24 sliderVertical: $('.demo #slider-vertical'), 25 origSliderHeight: '', 26 sliderHeight: '', 27 sliderMargin: '', 28 difference: '', 29 proportion: '', 30 handleHeight: '', 31 listContent: '', 32 autoPlay: '', 33 interval: '', 34 artist: '', 35 album: '', 36 sortable: $('#sortable'), 37 scrollPane: $('#scroll-pane'), 38 39 setDefault: function () { 40 this.defaultItem -= 1; 41 $('.coverflowItem').eq(this.defaultItem).addClass('ui-selected'); 42 }, 43 44 setCaption: function (title, description) { 45 this.imageCaption.html('<div class="title">'+title+'</div><div class="description">'+description+'</div>'); 46 }, 47 48 setOpacity: function (index) { 49 $('#'+options.jsn_themeflow_id+' .demo #coverflow').find('.imageItem').css('opacity', options.jsn_themeflow_transparency/100); 50 $('#'+options.jsn_themeflow_id+' .demo #coverflow').find('.imageItem').eq(index).css('opacity', 1); 51 $('#'+options.jsn_themeflow_id+' .demo #coverflow').css('opacity', '1'); 52 }, 53 54 addInterval: function () { 55 return setInterval(function () { 56 var current = coverflowApp.sliderCtrl.slider('value'); 57 current++; 58 if (current == coverflowApp.sliderCtrl.slider('option', 'max') + 1) 59 current = 0; 60 coverflowApp.skipTo(current); 61 62 }, options.jsn_themeflow_play_duration * 1000); 63 }, 64 65 init_coverflow: function (elem) { 66 //if (jsn_themeflow_animation_duration) 67 coverflowApp.coverflowCtrl = $('#'+options.jsn_themeflow_id+' .demo #coverflow'); 68 coverflowApp.sliderCtrl = $('#'+options.jsn_themeflow_id+' .demo #slider'); 69 coverflowApp.defaultDuration = 1000; 70 this.setDefault(); 71 this.setOpacity(coverflowApp.defaultItem); 72 this.coverflowCtrl.coverflow({ 73 item: coverflowApp.defaultItem, 74 duration: coverflowApp.defaultDuration, 75 select: function(event, sky) { 76 coverflowApp.setOpacity(sky.value); 77 coverflowApp.skipTo(sky.value); 78 } 79 }); 80 81 // Listen to resize event to reinitialize CoverFlow. 82 /*$(window).on('resize', function() { 83 coverflowApp.resizeUpdateTimer && clearTimeout(coverflowApp.resizeUpdateTimer); 84 85 coverflowApp.resizeUpdateTimer = setTimeout(function() { 86 // Destroy the current CoverFlow instance. 87 coverflowApp.coverflowCtrl.coverflow('destroy'); 88 89 // Reset container styles. 90 coverflowApp.coverflowCtrl[0].style.left = null; 91 coverflowApp.coverflowCtrl[0].style.opacity = null; 92 93 // Reset item styles. 94 coverflowApp.coverflowCtrl.find('img').each(function(i, e) { 95 var cs = window.getComputedStyle(e), item = $(e).closest('.imageItem')[0]; 96 97 e.setAttribute('width', parseInt(cs.getPropertyValue('width'))); 98 e.setAttribute('height', parseInt(cs.getPropertyValue('height'))); 99 100 item.style.left = null; 101 item.style.opacity = null; 102 item.style.transform = null; 103 item.style.zIndex = null; 104 }); 105 106 // Reinitialize CoverFlow. 107 coverflowApp.coverflowCtrl.coverflow({ 108 item: coverflowApp.defaultItem, 109 duration: coverflowApp.defaultDuration, 110 select: function(event, sky) { 111 coverflowApp.setOpacity(sky.value); 112 coverflowApp.skipTo(sky.value); 113 } 114 }); 115 }, 100); 116 });*/ 117 118 // 119 this.coverflowImages.each(function (index, value) { 120 var current = $(this); 121 try { 122 coverflowApp.listContent += "<li class='ui-state-default coverflowItem' data-itemlink='" + (index) + "' data-description='" + current.data('album') + "'>" + current.data('artist') + "</li>"; 123 } catch (e) {} 124 }); 125 126 //Skip all controls to the current default item 127 this.coverflowItems = this.getItems(); 128 this.sortable.html(this.listContent); 129 this.skipTo(this.defaultItem); 130 131 // 132 this.init_slider(this.sliderCtrl, 'horizontal'); 133 //this.init_slider($("#slider-vertical"), 'vertical'); 134 //change the main div to overflow-hidden as we can use the slider now 135 this.scrollPane.css('overflow', 'hidden'); 136 137 //calculate the height that the scrollbar handle should be 138 this.difference = this.sortable.height() - this.scrollPane.height(); //eg it's 200px longer 139 this.proportion = this.difference / this.sortable.height(); //eg 200px/500px 140 this.handleHeight = Math.round((1 - this.proportion) * this.scrollPane.height()); //set the proportional height 141 /// 142 this.setScrollPositions(this.defaultItem); 143 144 // 145 this.origSliderHeight = this.sliderVertical.height(); 146 this.sliderHeight = this.origSliderHeight - this.handleHeight; 147 this.sliderMargin = (this.origSliderHeight - this.sliderHeight) * 0.5; 148 149 // 150 this.init_mousewheel(); 151 this.init_keyboard(); 152 153 this.sortable.selectable({ 154 stop: function () { 155 var result = $("#select-result").empty(); 156 $(".ui-selected", this).each(function () { 157 var index = $("#sortable li").index(this); 158 coverflowApp.skipTo(index); 159 }); 160 } 161 }); 162 }, 163 164 init_slider: function (elem, direction) { 165 if (direction == 'horizontal') { 166 elem.slider({ 167 min: 0, 168 max: $('#coverflow > *').length - 1, 169 value: coverflowApp.defaultItem, 170 slide: function (event, ui) { 171 var current = $('.coverflowItem'); 172 coverflowApp.coverflowCtrl.coverflow('select', ui.value, true); 173 current.removeClass('ui-selected'); 174 current.eq(ui.value).addClass('ui-selected'); 175 coverflowApp.setCaption(current.eq(ui.value).html(), current.eq(ui.value).data('description')); 176 }, 177 stop: function (event, ui) { 178 $('#'+options.jsn_themeflow_id+' .demo #coverflow').find('.imageItem').css('opacity', options.jsn_themeflow_transparency/100); 179 $('#'+options.jsn_themeflow_id+' .demo #coverflow').find('.imageItem').eq(ui.value).css('opacity', 1); 180 $('#'+options.jsn_themeflow_id+' .demo #coverflow').css('opacity', '1'); 181 } 182 }) 183 } else { 184 if (direction == 'vertical') { 185 elem.slider({ 186 orientation: direction, 187 range: "max", 188 min: 0, 189 max: 100, 190 value: 0, 191 slide: function (event, ui) { 192 var topValue = -((100 - ui.value) * coverflowApp.difference / 100); 193 coverflowApp.sortable.css({ 194 top: topValue 195 }); 196 }, 197 stop: function (event, ui) { 198 $('#'+options.jsn_themeflow_id+' .demo #coverflow').find('.imageItem').css('opacity', options.jsn_themeflow_transparency/100); 199 $('#'+options.jsn_themeflow_id+' .demo #coverflow').find('.imageItem').eq(ui.value).css('opacity', 1); 200 $('#'+options.jsn_themeflow_id+' .demo #coverflow').css('opacity', '1'); 201 } 202 }) 203 } 204 } 205 }, 206 207 getItems: function () { 208 var refreshedItems = $('.demo .coverflowItem'); 209 return refreshedItems; 210 }, 211 212 skipTo: function (itemNumber) { 213 var items = $('.coverflowItem'); 214 this.sliderCtrl.slider("option", "value", itemNumber); 215 this.coverflowCtrl.coverflow('select', itemNumber, true); 216 items.removeClass('ui-selected'); 217 items.eq(itemNumber).addClass('ui-selected'); 218 this.setCaption(items.eq(itemNumber).html(), items.eq(itemNumber).data('description')); 219 this.setOpacity(itemNumber); 220 $('#'+options.jsn_themeflow_id+' .demo #coverflow').find('.imageItem').removeClass('openLink'); 221 $('#'+options.jsn_themeflow_id+' .demo #coverflow').find('.imageItem').eq(itemNumber).addClass('openLink'); 222 if (options.jsn_themeflow_click_action == 'open_image_link') { 223 $('#coverflow .imageItem a').attr('onclick', 'return false;'); 224 $('#coverflow .imageItem.openLink a').removeAttr('onclick'); 225 } else { 226 $('#coverflow .imageItem a').attr('onclick', 'return false;'); 227 } 228 229 if (options.jsn_themeflow_click_action == 'show_original_image') { 230 jQuery('#coverflow .imageItem a').unbind('click.fb'); 231 jQuery('#coverflow .imageItem.openLink a').fancybox({ 232 'titlePosition' : 'over', 233 'titleFormat' : function(title, currentArray, currentIndex, currentOpts){ 234 return '<div class="gallery-info-'+options.jsn_themeflow_id+'">'+title+ '</div>'; 235 } 236 }); 237 } 238 }, 239 240 init_mousewheel: function () { 241 if (options.jsn_themeflow_enable_mouse_wheel == 'yes') { 242 $('#'+options.jsn_themeflow_id+' .wrapper').mousewheel(function (event, delta) { 243 244 var speed = 1, 245 sliderVal = coverflowApp.sliderCtrl.slider("value"), 246 coverflowItem = 0, 247 cflowlength = $('#coverflow > *').length - 1, 248 leftValue = 0; 249 250 //check the deltas to find out if the user has scrolled up or down 251 if (delta > 0 && sliderVal > 0) { 252 sliderVal -= 1; 253 } else { 254 if (delta < 0 && sliderVal < cflowlength) { 255 sliderVal += 1; 256 } 257 } 258 259 leftValue = -((100 - sliderVal) * coverflowApp.difference / 100); //calculate the content top from the slider position 260 if (leftValue > 0) leftValue = 0; //stop the content scrolling down too much 261 if (Math.abs(leftValue) > coverflowApp.difference) leftValue = (-1) * coverflowApp.difference; //stop the content scrolling up beyond point desired 262 coverflowItem = Math.floor(sliderVal); 263 coverflowApp.skipTo(coverflowItem); 264 265 }); 266 } 267 }, 268 269 init_keyboard: function () { 270 if (options.jsn_themeflow_enable_keyboard_action == 'yes') { 271 $(document).keydown(function (e) { 272 var current = coverflowApp.sliderCtrl.slider('value'); 273 if (e.keyCode == 37) { 274 if (current > 0) { 275 current--; 276 coverflowApp.skipTo(current); 277 } 278 } else { 279 if (e.keyCode == 39) { 280 if (current < $('#coverflow > *').length - 1) { 281 current++; 282 coverflowApp.skipTo(current); 283 } 284 } 285 } 286 }) 287 } 288 }, 289 290 generateList: function () { 291 this.coverflowImages.each(function (index, value) { 292 var t = $(this); 293 try { 294 listContent += "<li class='ui-state-default coverflowItem' data-itemlink='" + (index) + "' data-description='" + t.data('album') + "'>" + t.data('artist') + "</li>"; 295 } catch (e) {} 296 }) 297 }, 298 299 setScrollPositions: function () { 300 $('#slider-vertical').slider('value', this.item * 5); 301 this.sortable.css('top', -this.item * 5 + 20); 302 }, 303 304 handleScrollpane: function () { 305 this.scrollPane.css('overflow', 'hidden'); 306 307 //calculate the height that the scrollbar handle should be 308 difference = this.sortable.height() - this.scrollPane.height(); //eg it's 200px longer 309 proportion = difference / this.sortable.height(); //eg 200px/500px 310 handleHeight = Math.round((1 - proportion) * this.scrollPane.height()); //set the proportional height 311 } 312 }; 313 coverflowApp.init_coverflow(); 314 315 if (options.jsn_themeflow_auto_play == 'yes') { 316 coverflowApp.interval = coverflowApp.addInterval(); 317 } 318 319 if (options.jsn_themeflow_auto_play == 'yes' && options.jsn_themeflow_pause_over == 'yes') { 320 $('#'+options.jsn_themeflow_id).mouseenter(function () { 321 options.jsn_themeflow_auto_play = 'no'; 322 window.clearInterval(coverflowApp.interval); 323 324 }); 325 $('#'+options.jsn_themeflow_id).mouseleave(function () { 326 options.jsn_themeflow_auto_play = 'yes'; 327 coverflowApp.interval = coverflowApp.addInterval(); 328 }); 329 } 330 } 331})(jsnThemeFlowjQuery);
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.