1/*--------------------------------------------------------------------------------------------- 2 3@author Constantin Saguin - @brutaldesign 4@link http://csag.co 5@github http://github.com/brutaldesign/swipebox 6@version 1.2.1 7@license MIT License 8 9----------------------------------------------------------------------------------------------*/ 10 11;(function (window, document, $, undefined) { 12 13 $.swipebox = function(elem, options) { 14 15 var defaults = { 16 useCSS : true, 17 hideBarsDelay : 3000, 18 videoMaxWidth : 1140, 19 vimeoColor : 'CCCCCC', 20 beforeOpen: null, 21 afterClose: null 22 }, 23 24 plugin = this, 25 elements = [], // slides array [{href:'...', title:'...'}, ...], 26 elem = elem, 27 selector = elem.selector, 28 $selector = $(selector), 29 isTouch = document.createTouch !== undefined || ('ontouchstart' in window) || ('onmsgesturechange' in window) || navigator.msMaxTouchPoints, 30 supportSVG = false, //!!(window.SVGSVGElement), 31 winWidth = window.innerWidth ? window.innerWidth : $(window).width(), 32 winHeight = window.innerHeight ? window.innerHeight : $(window).height(), 33 html = '<div id="swipebox-overlay">\ 34 <div id="swipebox-slider"></div>\ 35 <div id="swipebox-caption"></div>\ 36 <div id="swipebox-action">\ 37 <a id="swipebox-close"></a>\ 38 <a id="swipebox-prev"></a>\ 39 <a id="swipebox-next"></a>\ 40 </div>\ 41 </div>'; 42 43 plugin.settings = {} 44 45 plugin.init = function(){ 46 47 plugin.settings = $.extend({}, defaults, options); 48 49 if ($.isArray(elem)) { 50 51 elements = elem; 52 ui.target = $(window); 53 ui.init(0); 54 55 }else{ 56 57 $selector.click(function(e){ 58 elements = []; 59 var index , relType, relVal; 60 61 if (!relVal) { 62 relType = 'rel'; 63 relVal = $(this).attr(relType); 64 } 65 66 if (relVal && relVal !== '' && relVal !== 'nofollow') { 67 $elem = $selector.filter('[' + relType + '="' + relVal + '"]'); 68 }else{ 69 $elem = $(selector); 70 } 71 72 $elem.each(function(){ 73 74 var title = null, href = null; 75 76 if( $(this).attr('title') ) 77 title = $(this).attr('title'); 78 79 if( $(this).attr('href') ) 80 href = $(this).attr('href'); 81 82 elements.push({ 83 href: href, 84 title: title 85 }); 86 }); 87 88 index = $elem.index($(this)); 89 e.preventDefault(); 90 e.stopPropagation(); 91 ui.target = $(e.target); 92 ui.init(index); 93 }); 94 } 95 } 96 97 plugin.refresh = function() { 98 if (!$.isArray(elem)) { 99 ui.destroy(); 100 $elem = $(selector); 101 ui.actions(); 102 } 103 } 104 105 var ui = { 106 107 init : function(index){ 108 if (plugin.settings.beforeOpen) 109 plugin.settings.beforeOpen(); 110 this.target.trigger('swipebox-start'); 111 $.swipebox.isOpen = true; 112 this.build(); 113 this.openSlide(index); 114 this.openMedia(index); 115 this.preloadMedia(index+1); 116 this.preloadMedia(index-1); 117 }, 118 119 build : function(){ 120 var $this = this; 121 122 $('body').append(html); 123 124 if($this.doCssTrans()){ 125 $('#swipebox-slider').css({ 126 '-webkit-transition' : 'left 0.4s ease', 127 '-moz-transition' : 'left 0.4s ease', 128 '-o-transition' : 'left 0.4s ease', 129 '-khtml-transition' : 'left 0.4s ease', 130 'transition' : 'left 0.4s ease' 131 }); 132 $('#swipebox-overlay').css({ 133 '-webkit-transition' : 'opacity 1s ease', 134 '-moz-transition' : 'opacity 1s ease', 135 '-o-transition' : 'opacity 1s ease', 136 '-khtml-transition' : 'opacity 1s ease', 137 'transition' : 'opacity 1s ease' 138 }); 139 $('#swipebox-action, #swipebox-caption').css({ 140 '-webkit-transition' : '0.5s', 141 '-moz-transition' : '0.5s', 142 '-o-transition' : '0.5s', 143 '-khtml-transition' : '0.5s', 144 'transition' : '0.5s' 145 }); 146 } 147 148 149 if(supportSVG){ 150 var bg = $('#swipebox-action #swipebox-close').css('background-image'); 151 bg = bg.replace('png', 'svg'); 152 $('#swipebox-action #swipebox-prev,#swipebox-action #swipebox-next,#swipebox-action #swipebox-close').css({ 153 'background-image' : bg 154 }); 155 } 156 157 $.each( elements, function(){ 158 $('#swipebox-slider').append('<div class="slide"></div>'); 159 }); 160 161 $this.setDim(); 162 $this.actions(); 163 $this.keyboard(); 164 $this.gesture(); 165 $this.animBars(); 166 $this.resize(); 167 168 }, 169 170 setDim : function(){ 171 172 var width, height, sliderCss = {}; 173 174 if( "onorientationchange" in window ){ 175 176 window.addEventListener("orientationchange", function() { 177 if( window.orientation == 0 ){ 178 width = winWidth; 179 height = winHeight; 180 }else if( window.orientation == 90 || window.orientation == -90 ){ 181 width = winHeight; 182 height = winWidth; 183 } 184 }, false); 185 186 187 }else{ 188 189 width = window.innerWidth ? window.innerWidth : $(window).width(); 190 height = window.innerHeight ? window.innerHeight : $(window).height(); 191 } 192 193 sliderCss = { 194 width : width, 195 height : height 196 } 197 198 199 $('#swipebox-overlay').css(sliderCss); 200 201 }, 202 203 resize : function (){ 204 var $this = this; 205 206 $(window).resize(function() { 207 $this.setDim(); 208 }).resize(); 209 }, 210 211 supportTransition : function() { 212 var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split(' '); 213 for(var i = 0; i < prefixes.length; i++) { 214 if(document.createElement('div').style[prefixes[i]] !== undefined) { 215 return prefixes[i]; 216 } 217 } 218 return false;
219 }, 220 221 doCssTrans : function(){ 222 if(plugin.settings.useCSS && this.supportTransition() ){ 223 return true; 224 } 225 }, 226 227 gesture : function(){ 228 if ( isTouch ){ 229 var $this = this, 230 distance = null, 231 swipMinDistance = 10, 232 startCoords = {}, 233 endCoords = {}; 234 var bars = $('#swipebox-caption, #swipebox-action'); 235 236 bars.addClass('visible-bars'); 237 $this.setTimeout(); 238 239 $('body').bind('touchstart', function(e){ 240 241 $(this).addClass('touching'); 242 243 endCoords = e.originalEvent.targetTouches[0]; 244 startCoords.pageX = e.originalEvent.targetTouches[0].pageX; 245 246 $('.touching').bind('touchmove',function(e){ 247 e.preventDefault(); 248 e.stopPropagation(); 249 endCoords = e.originalEvent.targetTouches[0]; 250 251 }); 252 253 return false; 254 255 }).bind('touchend',function(e){ 256 e.preventDefault(); 257 e.stopPropagation(); 258 259 distance = endCoords.pageX - startCoords.pageX; 260 261 if( distance >= swipMinDistance ){ 262 263 // swipeLeft 264 $this.getPrev(); 265 266 }else if( distance <= - swipMinDistance ){ 267 268 // swipeRight 269 $this.getNext(); 270 271 }else{ 272 // tap 273 if(!bars.hasClass('visible-bars')){ 274 $this.showBars(); 275 $this.setTimeout(); 276 }else{ 277 $this.clearTimeout(); 278 $this.hideBars(); 279 } 280 281 } 282 283 $('.touching').off('touchmove').removeClass('touching'); 284 285 }); 286 287 } 288 }, 289 290 setTimeout: function(){ 291 if(plugin.settings.hideBarsDelay > 0){ 292 var $this = this; 293 $this.clearTimeout(); 294 $this.timeout = window.setTimeout( function(){ 295 $this.hideBars() }, 296 plugin.settings.hideBarsDelay 297 ); 298 } 299 }, 300 301 clearTimeout: function(){ 302 window.clearTimeout(this.timeout); 303 this.timeout = null; 304 }, 305 306 showBars : function(){ 307 var bars = $('#swipebox-caption, #swipebox-action'); 308 if(this.doCssTrans()){ 309 bars.addClass('visible-bars'); 310 }else{ 311 $('#swipebox-caption').animate({ top : 0 }, 500); 312 $('#swipebox-action').animate({ bottom : 0 }, 500); 313 setTimeout(function(){ 314 bars.addClass('visible-bars'); 315 }, 1000); 316 } 317 }, 318 319 hideBars : function(){ 320 var bars = $('#swipebox-caption, #swipebox-action'); 321 if(this.doCssTrans()){ 322 bars.removeClass('visible-bars'); 323 }else{ 324 $('#swipebox-caption').animate({ top : '-50px' }, 500); 325 $('#swipebox-action').animate({ bottom : '-50px' }, 500); 326 setTimeout(function(){ 327 bars.removeClass('visible-bars'); 328 }, 1000); 329 } 330 }, 331 332 animBars : function(){ 333 var $this = this; 334 var bars = $('#swipebox-caption, #swipebox-action'); 335 336 bars.addClass('visible-bars'); 337 $this.setTimeout(); 338 339 $('#swipebox-slider').click(function(e){ 340 if(!bars.hasClass('visible-bars')){ 341 $this.showBars(); 342 $this.setTimeout(); 343 } 344 }); 345 346 $('#swipebox-action').hover(function() { 347 $this.showBars(); 348 bars.addClass('force-visible-bars'); 349 $this.clearTimeout(); 350 351 },function() { 352 bars.removeClass('force-visible-bars'); 353 $this.setTimeout(); 354 355 }); 356 }, 357 358 keyboard : function(){ 359 var $this = this; 360 $(window).bind('keyup', function(e){ 361 e.preventDefault(); 362 e.stopPropagation(); 363 if (e.keyCode == 37){ 364 $this.getPrev(); 365 } 366 else if (e.keyCode==39){ 367 $this.getNext(); 368 } 369 else if (e.keyCode == 27) { 370 $this.closeSlide(); 371 } 372 }); 373 }, 374 375 actions : function(){ 376 var $this = this; 377 378 if( elements.length < 2 ){ 379 $('#swipebox-prev, #swipebox-next').hide(); 380 }else{ 381 $('#swipebox-prev').bind('click touchend', function(e){ 382 e.preventDefault(); 383 e.stopPropagation(); 384 $this.getPrev(); 385 $this.setTimeout(); 386 }); 387 388 $('#swipebox-next').bind('click touchend', function(e){ 389 e.preventDefault(); 390 e.stopPropagation(); 391 $this.getNext(); 392 $this.setTimeout(); 393 }); 394 } 395 396 $('#swipebox-close').bind('click touchend', function(e){ 397 $this.closeSlide(); 398 }); 399 }, 400 401 setSlide : function (index, isFirst){ 402 isFirst = isFirst || false; 403 404 var slider = $('#swipebox-slider'); 405 406 if(this.doCssTrans()){ 407 slider.css({ left : (-index*100)+'%' }); 408 }else{ 409 slider.animate({ left : (-index*100)+'%' }); 410 } 411 412 $('#swipebox-slider .slide').removeClass('current'); 413 $('#swipebox-slider .slide').eq(index).addClass('current'); 414 this.setTitle(index); 415 416 if( isFirst ){ 417 slider.fadeIn(); 418 } 419 420 $('#swipebox-prev, #swipebox-next').removeClass('disabled'); 421 if(index == 0){ 422 $('#swipebox-prev').addClass('disabled'); 423 }else if( index == elements.length - 1 ){ 424 $('#swipebox-next').addClass('disabled'); 425 } 426 }, 427 428 openSlide : function (index){ 429 $('html').addClass('swipebox'); 430 $(window).trigger('resize'); // fix scroll bar visibility on desktop 431 this.setSlide(index, true); 432 }, 433 434 preloadMedia : function (index){ 435 var $this = this, src = null; 436 437 if( elements[index] !== undefined ) 438 src = elements[index].href; 439 440 if( !$this.isVideo(src) ){ 441 setTimeout(function(){ 442 $this.openMedia(index); 443 }, 1000); 444 }else{ 445 $this.openMedia(index); 446 } 447 }, 448 449 openMedia : function (index){ 450 var $this = this, src = null; 451 452 if( elements[index] !== undefined ) 453 src = elements[index].href; 454 455 if(index < 0 || index >= elements.length){ 456 return false;
457 } 458 459 if( !$this.isVideo(src) ){ 460 $this.loadMedia(src, function(){ 461 $('#swipebox-slider .slide').eq(index).html(this); 462 }); 463 }else{ 464 $('#swipebox-slider .slide').eq(index).html($this.getVideo(src)); 465 } 466 467 }, 468 469 setTitle : function (index, isFirst){ 470 var title = null; 471 472 $('#swipebox-caption').empty(); 473 474 if( elements[index] !== undefined ) 475 title = elements[index].title; 476 477 if(title){ 478 $('#swipebox-caption').append(title); 479 } 480 }, 481 482 isVideo : function (src){ 483 484 if( src ){ 485 if( 486 src.match(/youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/) 487 || src.match(/vimeo\.com\/([0-9]*)/) 488 ){ 489 return true; 490 } 491 } 492 493 }, 494 495 getVideo : function(url){ 496 var iframe = ''; 497 var output = ''; 498 var youtubeUrl = url.match(/watch\?v=([a-zA-Z0-9\-_]+)/); 499 var vimeoUrl = url.match(/vimeo\.com\/([0-9]*)/); 500 if( youtubeUrl ){ 501 502 iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/'+youtubeUrl[1]+'" frameborder="0" allowfullscreen></iframe>'; 503 504 }else if(vimeoUrl){ 505 506 iframe = '<iframe width="560" height="315" src="http://player.vimeo.com/video/'+vimeoUrl[1]+'?byline=0&portrait=0&color='+plugin.settings.vimeoColor+'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'; 507 508 } 509 510 return '<div class="swipebox-video-container" style="max-width:'+plugin.settings.videomaxWidth+'px"><div class="swipebox-video">'+iframe+'</div></div>'; 511 }, 512 513 loadMedia : function (src, callback){ 514 if( !this.isVideo(src) ){ 515 var img = $('<img>').on('load', function(){ 516 callback.call(img); 517 }); 518 519 img.attr('src',src); 520 } 521 }, 522 523 getNext : function (){ 524 var $this = this; 525 index = $('#swipebox-slider .slide').index($('#swipebox-slider .slide.current')); 526 if(index+1 < elements.length){ 527 index++; 528 $this.setSlide(index); 529 $this.preloadMedia(index+1); 530 } 531 else{ 532 533 $('#swipebox-slider').addClass('rightSpring'); 534 setTimeout(function(){ 535 $('#swipebox-slider').removeClass('rightSpring'); 536 },500); 537 } 538 }, 539 540 getPrev : function (){ 541 index = $('#swipebox-slider .slide').index($('#swipebox-slider .slide.current')); 542 if(index > 0){ 543 index--; 544 this.setSlide(index); 545 this.preloadMedia(index-1); 546 } 547 else{ 548 549 $('#swipebox-slider').addClass('leftSpring'); 550 setTimeout(function(){ 551 $('#swipebox-slider').removeClass('leftSpring'); 552 },500); 553 } 554 }, 555 556 557 closeSlide : function (){ 558 $('html').removeClass('swipebox'); 559 $(window).trigger('resize'); 560 this.destroy(); 561 }, 562 563 destroy : function(){ 564 $(window).unbind('keyup'); 565 $('body').unbind('touchstart'); 566 $('body').unbind('touchmove'); 567 $('body').unbind('touchend'); 568 $('#swipebox-slider').unbind(); 569 $('#swipebox-overlay').remove(); 570 if (!$.isArray(elem)) 571 elem.removeData('_swipebox'); 572 if ( this.target ) 573 this.target.trigger('swipebox-destroy'); 574 $.swipebox.isOpen = false; 575 if (plugin.settings.afterClose) 576 plugin.settings.afterClose(); 577 } 578 579 }; 580 581 plugin.init(); 582 583 }; 584 585 $.fn.swipebox = function(options){ 586 if (!$.data(this, "_swipebox")) { 587 var swipebox = new $.swipebox(this, options); 588 this.data('_swipebox', swipebox); 589 } 590 return this.data('_swipebox'); 591 } 592 593}(window, document, 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.