git.roojs.org Git - roojs1/blob - ux/Lightbox.js

   1 /* <script type="text/javascript">
   2 // -----------------------------------------------------------------------------------
   3 // Roo lightbox - based on..
   4 //
   5 //      Lightbox v2.04
   6 //      by Lokesh Dhakar - http://www.lokeshdhakar.com
   7 //      Last Modification: 2/9/08
   8 //
   9 //      For more information, visit:
  10 //      http://lokeshdhakar.com/projects/lightbox2/
  11 //
  12 //      Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
  13 //      - Free for use in both personal and commercial projects
  14 //              - Attribution requires leaving author name, author link, and the license info intact.
  15 //
  16 //  Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
  17 //              Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.
  18 //
  19 // -----------------------------------------------------------------------------------
  20 /*
  21
  22     Table of Contents
  23     -----------------
  24     Configuration
  25
  26     Lightbox Class Declaration
  27     - initialize()
  28     - updateImageList()
  29     - start()
  30     - changeImage()
  31     - resizeImageContainer()
  32     - showImage()
  33     - updateDetails()
  34     - updateNav()
  35     - enableKeyboardNav()
  36     - disableKeyboardNav()
  37     - keyboardAction()
  38     - preloadNeighborImages()
  39     - end()
  40
  41     Function Calls
  42     - document.observe()
  43
  44 */
  45 Roo.namespace('Roo.ux');
  46
  47 Roo.ux.Lightbox = function(cfg) {
  48     Roo.apply(this,cfg);
  49     this.initialize();
  50 }
  51
  52 Roo.apply(Roo.ux.Lightbox.prototype,
  53 {
  54     // optiosn..
  55     /**
  56      * @cfg fileLoadingImage {string} loading image
  57      */
  58     fileLoadingImage:        '/lightbox/images/loading.gif',
  59     /**
  60      * @cfg fileBottomNavCloseImage {string} close image
  61      */
  62     fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',
  63     /**
  64      * @cfg overlayOpacity {number} controls transparency of shadow overlay
  65      */
  66     overlayOpacity: 0.8,
  67     /**
  68      * @cfg fileLoadingImage {boolean} toggles resizing animations
  69      */
  70     animate: true,
  71     /**
  72      * @cfg resizeSpeed {number} controls the speed of the image
  73      * resizing animations (1=slowest and 10=fastest)
  74      */
  75     resizeSpeed: 9,
  76     /**
  77      * @cfg borderSize {number} if you adjust the padding in the CSS,
  78      * you will need to update this variable
  79      */
  80     borderSize: 10,
  81     /**
  82      * @cfg labelImage {string} When grouping images this is used to write: Image # of #.
  83      * Change it for non-english localization
  84      */
  85         labelImage: "Image",
  86         /**
  87      * @cfg labelOf {string}  When grouping images this is used to write: Image # of #.
  88      */
  89     labelOf: "of",
  90
  91
  92
  93
  94     /**
  95      * List of images
  96      */
  97     imageArray: [],
  98
  99     /**
 100      * Current image.
 101      *
 102      */
 103
 104     activeImage: undefined,
 105
 106     /**
 107      * initialize()
 108      *  Constructor runs on completion of the DOM loading. Calls updateImageList and then
 109      * the function inserts html at the bottom of the page which is used to display the shadow
 110      *  overlay and the image container.
 111      *
 112      *
 113      */
 114     initialize: function() {
 115
 116         this.updateImageList();
 117
 118         // TBD this.keyboardAction = this.keyboardAction.bindAsEventListener(this);
 119         this.resizeSpeed  = Math.min(this.resizeSpeed, 10);
 120         this.resizeSpeed  = Math.max(this.resizeSpeed, 1);
 121
 122             this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
 123             this.overlayDuration = this.animate ? 0.2 : 0;  // shadow fade in/out duration
 124
 125         // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
 126         // If animations are turned off, it will be hidden as to prevent a flicker of a
 127         // white 250 by 250 box.
 128         var size = (this.animate ? 250 : 1) + 'px';
 129         var dh = Roo.DomHelper;
 130         this.el = dh.append(document.body, {
 131                 html:
 132                //   '<div id="overlay"></div>' +
 133                   '<div id="lightbox">' +
 134                   '   <div id="outerImageContainer">' +
 135                   '       <div id="imageContainer">' +
 136                   '           <img id="lightboxImage">' +
 137                   '           <div style="" id="hoverNav">' +
 138                   '               <a href="#" id="prevLink"></a>' +
 139                   '               <a href="#" id="nextLink"></a>' +
 140                   '           </div>' +
 141                   '           <div id="loading">' +
 142                   '               <a href="#" id="loadingLink">&nbsp;</a>' +
 143                   '           </div>' +
 144                   '       </div>' +
 145                   '   </div>' +
 146                   '   <div id="imageDataContainer">' +
 147                   '       <div id="imageData">' +
 148                   '           <div id="imageDetails">' +
 149                   '               <span id="caption"></span>' +
 150                   '               <span id="numberDisplay"></span>' +
 151                   '           </div>' +
 152                   '           <div id="bottomNav">' +
 153                   '               <div href="#" id="bottomNavClose"></div>' +
 154                   '           </div>' +
 155                   '       </div>' +
 156                   '   </div>' +
 157                  '</div>'
 158             }, true);
 159
 160
 161
 162         var th = this;
 163
 164         var ids =
 165             'lightbox outerImageContainer imageContainer ' +
 166             'lightboxImage hoverNav prevLink nextLink loading loadingLink ' +
 167             'imageDataContainer imageData imageDetails caption numberDisplay '
 168             'bottomNav bottomNavClose';
 169
 170         Roo.each(ids.split(' '),
 171             function(id){
 172
 173                 th[id] = Roo.get(id);
 174                 if (!th[id]) {
 175                     return;
 176                    }
 177                 th[id].setVisibilityMode(Roo.Element.DISPLAY);
 178             });
 179
 180
 181                 //Roo.get('overlay').hide();
 182         //Roo.get('overlay').on('click', this.end, this);
 183                 Roo.get('lightbox').hide();
 184         Roo.get('lightbox').on('click',  function(event) {
 185                 if (event.getTarget().id == 'lightbox') {
 186                     this.end();
 187                 }
 188             }, this);
 189
 190                 Roo.get('outerImageContainer').setStyle({ width: size, height: size });
 191
 192                 Roo.get('prevLink').on('click',
 193             function(event) {
 194                 event.stopEvent();
 195                 this.changeImage(this.activeImage - 1);
 196             }, this);
 197
 198                 Roo.get('nextLink').on('click',
 199             function(event) {
 200                 event.stopEvent();
 201                 this.changeImage(this.activeImage + 1);
 202             },this);
 203
 204                 Roo.get('loadingLink').on('click',
 205             function(event) {
 206                 event.stopEvent();
 207                 this.end();
 208             }, this);
 209
 210                 Roo.get('bottomNavClose').on('click',
 211             function(event) {
 212                 event.stopEvent();
 213                 this.end();
 214             }, this);
 215
 216
 217     },
 218
 219     /**
 220      * updateImageList()
 221      * Loops through anchor tags looking for 'lightbox' references and applies onclick
 222      * events to appropriate links. You can rerun after dynamically adding images w/ajax.
 223      *
 224      */
 225     updateImageList: function() {
 226         this.updateImageList = Roo.emptyFn;
 227
 228         Roo.each(Roo.DomQuery.select('a[rel^=lightbox]'), function(e) {
 229             this.imageArray.push(Roo.get(e));
 230             Roo.get(e).on('click', (function(event, tg, tga) {
 231                 console.log(tg, tga);
 232                 event.stopEvent();
 233                 this.start(tg);
 234             }).createDelegate(this, e, true));
 235         }, this)
 236
 237     },
 238
 239     /**
 240     * start()
 241     *  Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
 242     */
 243     start: function(imageLink) {
 244         /*
 245         // hide all the objects that cause problems..
 246         $$('select', 'object', 'embed').each(
 247             function(node){
 248             node.style.visibility = 'hidden' }
 249         );
 250         */
 251         // stretch overlay to fill page and fade in
 252         //var arrayPageSize = this.getPageSize();
 253         Roo.get(document.body).mask(false);
 254         Roo.get(document.body)._mask.setHeight(Roo.lib.Dom.getDocumentHeight())
 255         //new Effect.Appear(this.overlay,
 256         //    { duration: this.overlayDuration, from: 0.0, to: this.overlayOpacity });
 257
 258         //this.imageArray = [];
 259         var imageNum = 0;
 260
 261         if (imageLink) {
 262             imageLink = Roo.get(imageLink);
 263             console.log(imageLink.id);
 264             Roo.each(this.imageArray, function (e, i) {
 265                 console.log(e.id);
 266                 if (e.id == imageLink.id) {
 267                     imageNum = i;
 268                 }
 269             });
 270         }
 271
 272         // let's assume the constructor sorts out the list of images..
 273         /*
 274         if ((imageLink.rel == 'lightbox')){
 275             // if image is NOT part of a set, add single image to imageArray
 276             this.imageArray.push([imageLink.href, imageLink.title]);
 277         } else {
 278             // if image is part of a set..
 279             this.imageArray =
 280                 $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
 281                 collect(function(anchor){ return [anchor.href, anchor.title]; }).
 282                 uniq();
 283
 284             while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
 285         }
 286         */
 287         var s = Roo.get(document).getScroll();
 288
 289         // calculate top and left offset for the lightbox
 290         // weird.. why / 10?
 291         var lightboxTop = s.top + (Roo.lib.Dom.getViewHeight() / 10);
 292         var lightboxLeft = s.left
 293         this.lightbox.setStyle({
 294             top: lightboxTop + 'px',
 295             left: lightboxLeft + 'px' ,
 296             zIndex : Roo.get(document.body)._mask.getStyle('zIndex') * 1.1
 297         })
 298         //console.log("show lightbox");
 299         this.lightbox.show();
 300
 301
 302
 303         this.changeImage(imageNum);
 304     },
 305
 306     //
 307     //  changeImage()
 308     //  Hide most elements and preload image in preparation for resizing image container.
 309     //
 310     changeImage: function(imageNum) {
 311
 312         this.activeImage = imageNum; // update global var
 313
 314         // hide elements during transition
 315         if (this.animate) {
 316             this.loading.setStyle({
 317                 zIndex : Roo.get(document.body)._mask.getStyle('zIndex') * 1.2
 318             });
 319             this.loading.show();
 320             this.loadingLink.setX( (Roo.lib.Dom.getViewWidth() / 2) - 16);
 321             //this.loadingLink.show();
 322             // center the loading?
 323
 324         }
 325
 326         this.hoverNav.hide();
 327         this.prevLink.hide();
 328         this.nextLink.hide();
 329                 // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
 330         this.imageDataContainer.setStyle({opacity: .0001});
 331         this.numberDisplay.hide();
 332
 333         var imgPreloader =  Roo.DomHelper.append(document.body, { tag: 'img' } , true);
 334         // once image is preloaded, resize image container
 335
 336
 337         imgPreloader.on('load', function() {
 338             this.lightboxImage.dom.src = this.imageArray[this.activeImage].dom.href;
 339
 340             this.resizeImageContainer(imgPreloader.getWidth(), imgPreloader.getHeight());
 341             imgPreloader.remove();
 342         }, this);
 343         imgPreloader.dom.src = this.imageArray[this.activeImage].dom.href;
 344     },
 345
 346     //
 347     //  resizeImageContainer()
 348     //
 349     resizeImageContainer: function(imgWidth, imgHeight) {
 350
 351         // make sure we have some sensible sizes..
 352         imgWidth = Math.max(50, imgWidth);
 353         imgHeight = Math.max(50, imgHeight);
 354
 355         // get current width and height
 356         var widthCurrent  = this.outerImageContainer.getWidth();
 357         var heightCurrent = this.outerImageContainer.getHeight();
 358
 359         //fixme need better calcs.
 360         var w = window;
 361         var ww = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
 362         var wh = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
 363
 364         ww -= 150;
 365         wh -= 150;
 366         // get new width and height
 367         var bs =  this.borderSize * 2;
 368
 369         var widthNew  =  imgWidth  + bs;
 370         var heightNew =  imgHeight + bs;
 371
 372         if (widthNew > ww || heightNew > wh) {
 373             // bigger than window.
 374             // scale here... - bit nasty..
 375             var rescale = 1.1 * Math.max( widthNew / ww , heightNew  / wh);
 376              //console.log(rescale);
 377             imgWidth = Math.floor(imgWidth / rescale);
 378             imgHeight = Math.floor(imgHeight / rescale);
 379             widthNew  =  imgWidth  + bs;
 380             heightNew =  imgHeight + bs;
 381
 382
 383         }
 384
 385         this.lightboxImage.set( { width : imgWidth, height : imgHeight });
 386
 387
 388         // scalars based on change from old to new
 389         var xScale = (widthNew  / widthCurrent)  * 100;
 390         var yScale = (heightNew / heightCurrent) * 100;
 391
 392         // calculate size difference between new and old image, and resize if necessary
 393         var wDiff = widthCurrent - widthNew;
 394         var hDiff = heightCurrent - heightNew;
 395
 396
 397         this.outerImageContainer.animate(
 398             { width: {to: widthNew}, height: {to: heightNew} },
 399             this.resizeDuration,
 400             null, // on complete
 401             'easeOut', // easing
 402             'run' // effect
 403
 404         )
 405
 406
 407         // if new and old image are same size and no scaling transition is necessary,
 408         // do a quick pause to prevent image flicker.
 409         var timeout = 0;
 410         if ((hDiff == 0) && (wDiff == 0)){
 411             timeout = 100;
 412             if (Roo.isIE) timeout = 250;
 413         }
 414
 415         (function(){
 416             this.prevLink.setStyle({ height: imgHeight + 'px' });
 417             this.nextLink.setStyle({ height: imgHeight + 'px' });
 418             this.imageDataContainer.setStyle({ width: widthNew + 'px',}); // the text area..
 419             this.showImage();
 420         }).defer(timeout / 1000, this);
 421     },
 422
 423     //
 424     //  showImage()
 425     //  Display image and begin preloading neighbors.
 426     //
 427     showImage: function(){
 428
 429         this.loading.hide();
 430         //this.loadingLink.hide();
 431         var _this=  this;
 432         this.lightboxImage.animate(
 433             {
 434                 opacity : {  to: 1.0 }
 435             },
 436             this.resizeDuration,
 437             function(){
 438                 _this.updateDetails();
 439             }
 440
 441         );
 442         this.preloadNeighborImages();
 443     },
 444
 445     //
 446     //  updateDetails()
 447     //  Display caption, image number, and bottom nav.
 448     //
 449     updateDetails: function() {
 450
 451         // if caption is not null
 452         if (this.imageArray[this.activeImage].dom.title  != ""){
 453             this.caption.update(this.imageArray[this.activeImage].dom.title);
 454             this.caption.show();
 455         }
 456
 457         // if image is part of set display 'Image x of x'
 458         if (this.imageArray.length > 1){
 459             this.numberDisplay.update(
 460                 this.labelImage + ' ' + (this.activeImage + 1) + ' ' + this.labelOf + '  ' + this.imageArray.length)
 461             this.numberDisplay.show();
 462         }
 463         var _this = this;
 464         this.imageDataContainer.animate(
 465             {
 466                 //slide down ?: , from: 0.0, to: 1.0
 467                 opacity :  {  to: 1.0 }
 468             },
 469             this.resizeDuration,
 470             function() {
 471                         // update overlay size and update nav
 472                         //var arrayPageSize = this.getPageSize();
 473                         //this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
 474                         _this.updateNav();
 475             }
 476
 477         );
 478     },
 479
 480     //
 481     //  updateNav()
 482     //  Display appropriate previous and next hover navigation.
 483     //
 484     updateNav: function() {
 485
 486         this.hoverNav.show();
 487
 488         // if not first image in set, display prev image button
 489         if (this.activeImage > 0) this.prevLink.show();
 490
 491         // if not last image in set, display next image button
 492         if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show();
 493
 494         this.enableKeyboardNav();
 495     },
 496
 497     //
 498     //  enableKeyboardNav()
 499     //
 500     enableKeyboardNav: function() {
 501         Roo.get(document.body).on('keydown', this.keyboardAction, this);
 502     },
 503
 504     //
 505     //  disableKeyboardNav()
 506     //
 507     disableKeyboardNav: function() {
 508         Roo.get(document.body).un('keydown', this.keyboardAction, this);
 509     },
 510
 511     //
 512     //  keyboardAction()
 513     //
 514     keyboardAction: function(event) {
 515         var keycode = event.keyCode;
 516
 517         var escapeKey;
 518         if (event.DOM_VK_ESCAPE) {  // mozilla
 519             escapeKey = event.DOM_VK_ESCAPE;
 520         } else { // ie
 521             escapeKey = 27;
 522         }
 523
 524         var key = String.fromCharCode(keycode).toLowerCase();
 525
 526         if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox
 527             this.end();
 528         } else if ((key == 'p') || (keycode == 37)){ // display previous image
 529             if (this.activeImage != 0){
 530                 this.disableKeyboardNav();
 531                 this.changeImage(this.activeImage - 1);
 532             }
 533         } else if ((key == 'n') || (keycode == 39)){ // display next image
 534             if (this.activeImage != (this.imageArray.length - 1)){
 535                 this.disableKeyboardNav();
 536                 this.changeImage(this.activeImage + 1);
 537             }
 538         }
 539     },
 540
 541     //
 542     //  preloadNeighborImages()
 543     //  Preload previous and next images.
 544     //
 545     preloadNeighborImages: function(){
 546         var preloadNextImage, preloadPrevImage;
 547         if (this.imageArray.length > this.activeImage + 1){
 548             preloadNextImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
 549             preloadNextImage.on('load', function() { preloadNextImage.remove() });
 550             preloadNextImage.dom.src = this.imageArray[this.activeImage + 1].dom.href;
 551         }
 552         if (this.activeImage > 0){
 553             preloadPrevImage = Roo.DomHelper.append(document.body, { tag: 'img' } , true);
 554             preloadNextImage.on('load', function() { preloadNextImage.remove() });
 555
 556         }
 557
 558     },
 559
 560     //
 561     //  end()
 562     //
 563     end: function() {
 564         this.disableKeyboardNav();
 565         //console.log('lightbox hide');
 566         this.lightbox.hide();
 567         this.loading.hide();
 568         Roo.get(document.body).unmask();
 569         // show all the objects that cause problems..
 570         //$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
 571     }
 572
 573
 574 });
 575