dojox/image/Lightbox.js

• Provides:

  • dojox.image.Lightbox

• Requires:

  • dojo.window in common in project dojo
  • dijit.Dialog in common in project dijit
  • dojox.fx._base in common

• dojox.image.Lightbox

  • type

    Function

  • chains:
    • dijit._Widget: (prototype)
    • dijit._Widget: (call)
  • summary

    A dojo-based Lightbox implementation.

  • description

    An Elegant, keyboard accessible, markup and store capable Lightbox widget to show images
    in a modal dialog-esque format. Can show individual images as Modal dialog, or can group
    images with multiple entry points, all using a single "master" Dialog for visualization
    
    key controls:
    ESC - close
    Down Arrow / Rt Arrow / N - Next Image
    Up Arrow / Lf Arrow / P - Previous Image

  • example

    
    	<a href="image1.jpg" dojoType="dojox.image.Lightbox">show lightbox</a>

  • example

    
    	<a href="image2.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a>
    	<a href="image3.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a>

  • example

    
    	not implemented fully yet, though works with basic datastore access. need to manually call
    	widget._attachedDialog.addImage(item,"fromStore") for each item in a store result set.
    	<div dojoType="dojox.image.Lightbox" group="fromStore" store="storeName"></div>

• dojox.image.Lightbox.group

  • type

    String

  • summary

    Grouping images in a page with similar tags will provide a 'slideshow' like grouping of images

• dojox.image.Lightbox.title

  • type

    String

  • summary

    A string of text to be shown in the Lightbox beneath the image (empty if using a store)

• dojox.image.Lightbox.href

  • summary

• dojox.image.Lightbox.duration

  • type

    Integer

  • summary

    Generic time in MS to adjust the feel of widget. could possibly add various
    durations for the various actions (dialog fadein, sizeing, img fadein ...)

• dojox.image.Lightbox.modal

  • type

    Boolean

  • summary

    If true, this Dialog instance will be truly modal and prevent closing until
    explicitly told to by calling hide() or clicking the (x) - Defaults to false
    to preserve previous behaviors. (aka: enable click-to-click on the underlay)

• dojox.image.Lightbox._allowPassthru

  • type

    Boolean

  • summary

    Privately set this to disable/enable natural link of anchor tags
    
    
    _attachedDialg: dojox.image._LightboxDialog
    The pointer to the global lightbox dialog for this widget

• dojox.image.Lightbox._attachedDialog

  • summary

• dojox.image.Lightbox.startup

  • type

    Function

  • source: [view]
      this.inherited(arguments);
      // setup an attachment to the masterDialog (or create the masterDialog)
      var tmp = dijit.byId('dojoxLightboxDialog');
      if(tmp){
       this._attachedDialog = tmp;
      }else{
       // this is the first instance to start, so we make the masterDialog
       this._attachedDialog = new dojox.image.LightboxDialog({ id: "dojoxLightboxDialog" });
       this._attachedDialog.startup();
      }
      if(!this.store){
       // FIXME: full store support lacking, have to manually call this._attachedDialog.addImage(imgage,group) as it stands
       this._addSelf();
       this.connect(this.domNode, "onclick", "_handleClick");
      }
  • summary

• dojox.image.Lightbox._addSelf

  • type

    Function

  • source: [view]
      this._attachedDialog.addImage({
       href: this.href,
       title: this.title
      }, this.group || null);
  • summary

    Add this instance to the master LightBoxDialog

• dojox.image.Lightbox._handleClick

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
      if(!this._allowPassthru){ e.preventDefault(); }
      else{ return; }
      this.show();
  • summary

    Handle the click on the link

• dojox.image.Lightbox.show

  • type

    Function

  • source: [view]
      this._attachedDialog.show(this);
  • summary

    Show the Lightbox with this instance as the starting point

• dojox.image.Lightbox.hide

  • type

    Function

  • source: [view]
      this._attachedDialog.hide();
  • summary

    Hide the Lightbox currently showing

• dojox.image.Lightbox.disable

  • type

    Function

  • source: [view]
      this._allowPassthru = true;
  • summary

    Disables event clobbering and dialog, and follows natural link

• dojox.image.Lightbox.enable

  • type

    Function

  • source: [view]
      this._allowPassthru = false;
  • summary

    Enables the dialog (prevents default link)

• dojox.image.Lightbox.onClick

  • type

    Function

  • source: [view]
      // summary:
      //  Stub fired when the image in the lightbox is clicked.
  • summary

    Stub fired when the image in the lightbox is clicked.

• dojox.image.Lightbox.destroy

  • type

    Function

  • source: [view]
      this._attachedDialog.removeImage(this);
      this.inherited(arguments);
  • summary

• dojox.image.LightboxDialog

  • type

    Function

  • chains:
    • dijit.Dialog: (prototype)
    • dijit.Dialog: (call)
  • summary

    The "dialog" shared	 between any Lightbox instances on the page, publically available
    for programatic manipulation.

  • description

    A widget that intercepts anchor links (typically around images)
    and displays a modal Dialog. this is the actual Dialog, which you can
    create and populate manually, though should use simple Lightbox's
    unless you need the direct access.
    
    There should only be one of these on a page, so all dojox.image.Lightbox's will us it
    (the first instance of a Lightbox to be show()'n will create me If i do not exist)

  • example

    
    	// show a single image from a url
    	var url = "http://dojotoolkit.org/logo.png";
    	var dialog = new dojox.image.LightboxDialog().startup();
    	dialog.show({ href: url, title:"My Remote Image"});

  • parameters:
    • args: (typeof )
  • source: [view]
      this._groups = this._groups || (args && args._groups) || { XnoGroupX:[] };

• dojox.image.LightboxDialog.title

  • type

    String

  • summary

    The current title, read from object passed to show()

• dojox.image.LightboxDialog.inGroup

  • type

    Array

  • summary

    Array of objects. this is populated by from the JSON object _groups, and
    should not be populate manually. it is a placeholder for the currently
    showing group of images in this master dialog

• dojox.image.LightboxDialog.imgUrl

  • type

    String

  • summary

    The src="" attribute of our imageNode (can be null at statup)

• dojox.image.LightboxDialog.errorMessage

  • type

    String

  • summary

    The text to display when an unreachable image is linked

• dojox.image.LightboxDialog.adjust

  • type

    Boolean

  • summary

    If true, ensure the image always stays within the viewport
    more difficult than necessary to disable, but enabled by default
    seems sane in most use cases.

• dojox.image.LightboxDialog.modal

  • type

    Boolean

  • summary

    If true, this Dialog instance will be truly modal and prevent closing until
    explicitly told to by calling hide() or clicking the (x) - Defaults to false
    to preserve previous behaviors. (aka: enable click-to-click on the underlay)

• dojox.image.LightboxDialog._groups

  • type

    Object

  • summary

• dojox.image.LightboxDialog.errorImg

  • type

    Url

  • summary

    Path to the image used when a 404 is encountered

• dojox.image.LightboxDialog.templateString

  • summary

• dojox.image.LightboxDialog.startup

  • type

    Function

  • source: [view]
      this.inherited(arguments);
    
      
      this._animConnects = [];
      this.connect(this.nextButtonNode, "onclick", "_nextImage");
      this.connect(this.prevButtonNode, "onclick", "_prevImage");
      this.connect(this.closeButtonNode, "onclick", "hide");
      this._makeAnims();
      this._vp = dojo.window.getBox();
      return this;
  • summary

    Add some extra event handlers, and startup our superclass.

  • return_summary

    dijit._Widget
    Perhaps the only `dijit._Widget` that returns itself to allow
    'chaining' or var referencing with .startup()

• dojox.image.LightboxDialog.show

  • type

    Function

  • parameters:
    • groupData: (typeof Object)

      needs href and title attributes. the values for this image.

  • source: [view]
      var _t = this; // size
      this._lastGroup = groupData;
    
      
      // we only need to call dijit.Dialog.show() if we're not already open.
      if(!_t.open){
       _t.inherited(arguments);
       _t._modalconnects.push(
        dojo.connect(dojo.global, "onscroll", this, "_position"),
        dojo.connect(dojo.global, "onresize", this, "_position"),
        dojo.connect(dojo.body(), "onkeypress", this, "_handleKey")
       );
       if(!groupData.modal){
        _t._modalconnects.push(
         dojo.connect(dijit._underlay.domNode, "onclick", this, "onCancel")
        );
       }
      }
    
      
      if(this._wasStyled){
       // ugly fix for IE being stupid. place the new image relative to the old
       // image to allow for overriden templates to adjust the location of the
       // titlebar. DOM will remain "unchanged" between views.
       var tmpImg = dojo.create("img", null, _t.imgNode, "after");
       dojo.destroy(_t.imgNode);
       _t.imgNode = tmpImg;
       _t._makeAnims();
       _t._wasStyled = false;
      }
    
      
      dojo.style(_t.imgNode,"opacity","0");
      dojo.style(_t.titleNode,"opacity","0");
    
      
      var src = groupData.href;
    
      
      if((groupData.group && groupData !== "XnoGroupX") || _t.inGroup){
       if(!_t.inGroup){
        _t.inGroup = _t._groups[(groupData.group)];
        // determine where we were or are in the show
        dojo.forEach(_t.inGroup, function(g, i){
         if(g.href == groupData.href){
          _t._index = i;
          //return false;
         }
         //return true;
        });
       }
       if(!_t._index){
        _t._index = 0;
        var sr = _t.inGroup[_t._index];
        src = (sr && sr.href) || _t.errorImg;
       }
       // FIXME: implement titleTemplate
       _t.groupCount.innerHTML = " (" + (_t._index + 1) + " of " + Math.max(1, _t.inGroup.length) + ")";
       _t.prevButtonNode.style.visibility = "visible";
       _t.nextButtonNode.style.visibility = "visible";
      }else{
       // single images don't have buttons, or counters:
       _t.groupCount.innerHTML = "";
       _t.prevButtonNode.style.visibility = "hidden";
       _t.nextButtonNode.style.visibility = "hidden";
      }
      if(!groupData.leaveTitle){
       _t.textNode.innerHTML = groupData.title;
      }
      _t._ready(src);
  • summary

    Show the Master Dialog. Starts the chain of events to show
    an image in the dialog, including showing the dialog if it is
    not already visible

• dojox.image.LightboxDialog._ready

  • type

    Function

  • parameters:
    • src: (typeof )
  • source: [view]
      var _t = this;
    
      
      // listen for 404's:
      _t._imgError = dojo.connect(_t.imgNode, "error", _t, function(){
       dojo.disconnect(_t._imgError);
       // trigger the above onload with a new src:
       _t.imgNode.src = _t.errorImg;
       _t.textNode.innerHTML = _t.errorMessage;
      });
    
      
      // connect to the onload of the image
      _t._imgConnect = dojo.connect(_t.imgNode, "load", _t, function(e){
       _t.resizeTo({
        w: _t.imgNode.width,
        h: _t.imgNode.height,
        duration:_t.duration
       });
       // cleanup
       dojo.disconnect(_t._imgConnect);
       if(_t._imgError){
        dojo.disconnect(_t._imgError);
       }
      });
    
      
      _t.imgNode.src = src;
  • summary

    A function to trigger all 'real' showing of some src

• dojox.image.LightboxDialog._nextImage

  • type

    Function

  • source: [view]
      if(!this.inGroup){ return; }
      if(this._index + 1 < this.inGroup.length){
       this._index++;
      }else{
       this._index = 0;
      }
      this._loadImage();
  • summary

    Load next image in group

• dojox.image.LightboxDialog._prevImage

  • type

    Function

  • source: [view]
      if(this.inGroup){
       if(this._index == 0){
        this._index = this.inGroup.length - 1;
       }else{
        this._index--;
       }
       this._loadImage();
      }
  • summary

    Load previous image in group

• dojox.image.LightboxDialog._loadImage

  • type

    Function

  • source: [view]
      this._loadingAnim.play(1);
  • summary

    Do the prep work before we can show another image

• dojox.image.LightboxDialog._prepNodes

  • type

    Function

  • source: [view]
      this._imageReady = false;
      if(this.inGroup && this.inGroup[this._index]){
       this.show({
        href: this.inGroup[this._index].href,
        title: this.inGroup[this._index].title
       });
      }else{
       this.show({
        title: this.errorMessage,
        href: this.errorImg
       });
      }
  • summary

    A localized hook to accompany _loadImage

• dojox.image.LightboxDialog._calcTitleSize

  • type

    Function

  • source: [view]
      var sizes = dojo.map(dojo.query("> *", this.titleNode).position(), function(s){ return s.h; });
      return { h: Math.max.apply(Math, sizes) };
  • chains:
    • Math.max: (call)
  • summary

• dojox.image.LightboxDialog.resizeTo

  • type

    Function

  • parameters:
    • size: (typeof Object)
    • forceTitle: (typeof )
  • source: [view]
      var adjustSize = dojo.boxModel == "border-box" ?
       dojo._getBorderExtents(this.domNode).w : 0,
       titleSize = forceTitle || this._calcTitleSize()
      ;
    
      
      this._lastTitleSize = titleSize;
    
      
      if(this.adjust &&
       (size.h + titleSize.h + adjustSize + 80 > this._vp.h ||
        size.w + adjustSize + 60 > this._vp.w
       )
      ){
       this._lastSize = size;
       size = this._scaleToFit(size);
      }
      this._currentSize = size;
    
      
      var _sizeAnim = dojox.fx.sizeTo({
       node: this.containerNode,
       duration: size.duration||this.duration,
       width: size.w + adjustSize,
       height: size.h + titleSize.h + adjustSize
      });
      this.connect(_sizeAnim, "onEnd", "_showImage");
      _sizeAnim.play(15);
  • summary

    Resize our dialog container, and fire _showImage

• dojox.image.LightboxDialog._scaleToFit

  • type

    Function

  • parameters:
    • size: (typeof Object)

      The 'size' object passed around for this image

  • source: [view]
      var ns = {}, // New size
       nvp = {
        w: this._vp.w - 80,
        h: this._vp.h - 60 - this._lastTitleSize.h
       }; // New viewport
    
    
      // Calculate aspect ratio
      var viewportAspect = nvp.w / nvp.h,
       imageAspect = size.w / size.h;
    
    
      // Calculate new image size
      if(imageAspect >= viewportAspect){
       ns.h = nvp.w / imageAspect;
       ns.w = nvp.w;
      }else{
       ns.w = imageAspect * nvp.h;
       ns.h = nvp.h;
      }
    
    
      // we actually have to style this image, it's too big
      this._wasStyled = true;
      this._setImageSize(ns);
    
    
      ns.duration = size.duration;
      return ns; // Object
  • summary

    resize an image to fit within the bounds of the viewport

  • returns

    Object

• dojox.image.LightboxDialog._setImageSize

  • type

    Function

  • parameters:
    • size: (typeof )
  • source: [view]
      var s = this.imgNode;
      s.height = size.h;
      s.width = size.w;
  • summary

    Reset the image size to some actual size.

• dojox.image.LightboxDialog._size

  • type

    Function

  • source: [view]
    }
  • summary

• dojox.image.LightboxDialog._position

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
      this._vp = dojo.window.getBox();
      this.inherited(arguments);
    
      
      // determine if we need to scale up or down, if at all.
      if(e && e.type == "resize"){
       if(this._wasStyled){
        this._setImageSize(this._lastSize);
        this.resizeTo(this._lastSize);
       }else{
        if(this.imgNode.height + 80 > this._vp.h || this.imgNode.width + 60 > this._vp.h){
         this.resizeTo({
          w: this.imgNode.width, h: this.imgNode.height
         });
        }
       }
      }
  • summary

    we want to know the viewport size any time it changes

• dojox.image.LightboxDialog._showImage

  • type

    Function

  • source: [view]
      this._showImageAnim.play(1);
  • summary

    Fade in the image, and fire showNav

• dojox.image.LightboxDialog._showNav

  • type

    Function

  • source: [view]
      var titleSizeNow = dojo.marginBox(this.titleNode);
      if(titleSizeNow.h > this._lastTitleSize.h){
       this.resizeTo(this._wasStyled ? this._lastSize : this._currentSize, titleSizeNow);
      }else{
       this._showNavAnim.play(1);
      }
  • summary

    Fade in the footer, and setup our connections.

• dojox.image.LightboxDialog.hide

  • type

    Function

  • source: [view]
      dojo.fadeOut({
       node: this.titleNode,
       duration: 200,
       // #5112 - if you _don't_ change the .src, safari will
       // _never_ fire onload for this image
       onEnd: dojo.hitch(this, function(){
        this.imgNode.src = this._blankGif;
       })
      }).play(5);
    
    
      this.inherited(arguments);
    
    
      this.inGroup = null;
      this._index = null;
  • summary

    Hide the Master Lightbox

• dojox.image.LightboxDialog.addImage

  • type

    Function

  • parameters:
    • child: (typeof Object)

      The image information to add.
      href: String - link to image (required)
      title: String - title to display

    • group: (typeof String)

      attach to group of similar tag or null for individual image instance

  • source: [view]
      var g = group;
      if(!child.href){ return; }
      if(g){
       if(!this._groups[g]){
        this._groups[g] = [];
       }
       this._groups[g].push(child);
      }else{ this._groups["XnoGroupX"].push(child); }
  • summary

    Add an image to this Master Lightbox

• dojox.image.LightboxDialog.removeImage

  • type

    Function

  • parameters:
    • child: (typeof Widget)

      Object
      A reference to the Lightbox child that was added (or an object literal)
      only the .href member is compared for uniqueness. The object may contain
      a .group member as well.

  • source: [view]
      var g = child.group || "XnoGroupX";
      dojo.every(this._groups[g], function(item, i, ar){
       if(item.href == child.href){
        ar.splice(i, 1);
        return false;
       }
       return true;
      });
  • summary

    Remove an image instance from this LightboxDialog.

• dojox.image.LightboxDialog.removeGroup

  • type

    Function

  • parameters:
    • group: (typeof )
  • source: [view]
      if(this._groups[group]){ this._groups[group] = []; }
  • summary

    Remove all images in a passed group

• dojox.image.LightboxDialog._handleKey

  • type

    Function

  • parameters:
    • e: (typeof Event)
  • source: [view]
      if(!this.open){ return; }
    
    
      var dk = dojo.keys;
      switch(e.charOrCode){
    
       
       case dk.ESCAPE:
        this.hide();
        break;
    
    
       case dk.DOWN_ARROW:
       case dk.RIGHT_ARROW:
       case 78: // key "n"
        this._nextImage();
        break;
    
    
       case dk.UP_ARROW:
       case dk.LEFT_ARROW:
       case 80: // key "p"
        this._prevImage();
        break;
      }
  • summary

    Handle keyboard navigation internally

• dojox.image.LightboxDialog._makeAnims

  • type

    Function

  • source: [view]
      dojo.forEach(this._animConnects, dojo.disconnect);
      this._animConnects = [];
      this._showImageAnim = dojo.fadeIn({
        node: this.imgNode,
        duration: this.duration
       });
      this._animConnects.push(dojo.connect(this._showImageAnim, "onEnd", this, "_showNav"));
      this._loadingAnim = dojo.fx.combine([
        dojo.fadeOut({ node:this.imgNode, duration:175 }),
        dojo.fadeOut({ node:this.titleNode, duration:175 })
       ]);
      this._animConnects.push(dojo.connect(this._loadingAnim, "onEnd", this, "_prepNodes"));
      this._showNavAnim = dojo.fadeIn({ node: this.titleNode, duration:225 });
  • summary

    make and cleanup animation and animation connections

• dojox.image.LightboxDialog.onClick

  • type

    Function

  • parameters:
    • groupData: (typeof )
  • source: [view]
      // summary: a stub function, called with the currently displayed image as the only argument
  • summary

    a stub function, called with the currently displayed image as the only argument

• dojox.image.LightboxDialog._onImageClick

  • type

    Function

  • parameters:
    • e: (typeof )
  • source: [view]
      if(e && e.target == this.imgNode){
       this.onClick(this._lastGroup);
       // also fire the onclick for the Lightbox widget which triggered, if you
       // aren't working directly with the LBDialog
       if(this._lastGroup.declaredClass){
        this._lastGroup.onClick(this._lastGroup);
       }
      }
  • summary

• dojox.image.LightboxDialog._groups.XnoGroupX

  • summary

• dojox.image.LightboxDialog._animConnects

  • summary

• dojox.image.LightboxDialog._vp

  • summary

• dojox.image.LightboxDialog._lastGroup

  • summary

• dojox.image.LightboxDialog._index

  • summary

• dojox.image.LightboxDialog._imageReady

  • summary

• dojox.image.LightboxDialog._lastTitleSize

  • summary

• dojox.image.LightboxDialog._lastSize

  • summary

• dojox.image.LightboxDialog._currentSize

  • summary

• dojox.image.LightboxDialog._wasStyled

  • summary

• dojox.image.LightboxDialog.imgNode.src

  • summary

• dojox.image.LightboxDialog._showImageAnim

  • summary

• dojox.image.LightboxDialog._loadingAnim

  • summary

• dojox.image.LightboxDialog._showNavAnim

  • summary

• dojox.image

  • type

    Object

  • summary

• dojox

  • type

    Object

  • summary