dojox/image/SlideShow.js

• Provides:

  • dojox.image.SlideShow

• Requires:

  • dojo.string in common in project dojo
  • dojo.fx in common in project dojo
  • dijit._Widget in common in project dijit
  • dijit._Templated in common in project dijit

• dojox.image.SlideShow

  • type

    Function

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

    A Slideshow Widget

• dojox.image.SlideShow.imageHeight

  • type

    Number

  • summary

    The maximum height of an image

• dojox.image.SlideShow.imageWidth

  • type

    Number

  • summary

    The maximum width of an image.

• dojox.image.SlideShow.title

  • type

    String

  • summary

    The initial title of the SlideShow

• dojox.image.SlideShow.titleTemplate

  • type

    String

  • summary

    a way to customize the wording in the title. supported parameters to be populated are:
    ${title} = the passed title of the image
    ${current} = the current index of the image
    ${total} = the total number of images in the SlideShow
    
    should add more?

• dojox.image.SlideShow.noLink

  • type

    Boolean

  • summary

    Prevents the slideshow from putting an anchor link around the displayed image
    enables if true, though still will not link in absence of a url to link to

• dojox.image.SlideShow.loop

  • type

    Boolean

  • summary

    true/false - make the slideshow loop

• dojox.image.SlideShow.hasNav

  • type

    Boolean

  • summary

    toggle to enable/disable the visual navigation controls

• dojox.image.SlideShow.images

  • type

    Array

  • summary

    Contains the DOM nodes that individual images are stored in when loaded or loading.

• dojox.image.SlideShow.pageSize

  • type

    Number

  • summary

    The number of images to request each time.

• dojox.image.SlideShow.autoLoad

  • type

    Boolean

  • summary

    If true, then images are preloaded, before the user navigates to view them.
    If false, an image is not loaded until the user views it.

• dojox.image.SlideShow.autoStart

  • type

    Boolean

  • summary

    If true, the SlideShow begins playing immediately

• dojox.image.SlideShow.fixedHeight

  • type

    Boolean

  • summary

    If true, the widget does not resize itself to fix the displayed image.

• dojox.image.SlideShow.imageStore

  • type

    Object

  • summary

    Implementation of the dojo.data.api.Read API, which provides data on the images
    to be displayed.

• dojox.image.SlideShow.linkAttr

  • type

    String

  • summary

    Defines the name of the attribute to request from the store to retrieve the
    URL to link to from an image, if any.

• dojox.image.SlideShow.imageLargeAttr

  • type

    String

  • summary

    Defines the name of the attribute to request from the store to retrieve the
    URL to the image.

• dojox.image.SlideShow.titleAttr

  • type

    String

  • summary

    Defines the name of the attribute to request from the store to retrieve the
    title of the picture, if any.

• dojox.image.SlideShow.slideshowInterval

  • type

    Number

  • summary

    Time, in seconds, between image transitions during a slideshow.

• dojox.image.SlideShow.templateString

  • summary

• dojox.image.SlideShow._imageCounter

  • type

    Number

  • summary

    A counter to keep track of which index image is to be loaded next

• dojox.image.SlideShow._tmpImage

  • type

    DomNode

  • summary

    The temporary image to show when a picture is loading.

• dojox.image.SlideShow._request

  • type

    Object

  • summary

    Implementation of the dojo.data.api.Request API, which defines the query
    parameters for accessing the store.

• dojox.image.SlideShow.postCreate

  • type

    Function

  • source: [view]
      this.inherited(arguments);
      var img = document.createElement("img");
    
    
      // FIXME: should API be to normalize an image to fit in the specified height/width?
      img.setAttribute("width", this.imageWidth);
      img.setAttribute("height", this.imageHeight);
    
    
      if(this.hasNav){
       dojo.connect(this.outerNode, "onmouseover", this, function(evt){
        try{ this._showNav();}
        catch(e){} //TODO: remove try/catch
       });
       dojo.connect(this.outerNode, "onmouseout", this, function(evt){
        try{ this._hideNav(evt);}
        catch(e){} //TODO: remove try/catch
       });
      }
    
      
      this.outerNode.style.width = this.imageWidth + "px";
    
    
      img.setAttribute("src", this._blankGif);
      var _this = this;
    
      
      this.largeNode.appendChild(img);
      this._tmpImage = this._currentImage = img;
      this._fitSize(true);
    
      
      this._loadImage(0, dojo.hitch(this, "showImage", 0));
      this._calcNavDimensions();
  • summary

    Initilizes the widget, sets up listeners and shows the first image

• dojox.image.SlideShow.setDataStore

  • type

    Function

  • parameters:
    • dataStore: (typeof An)

      implementation of the dojo.data.api.Read API. This accesses the image
      data.

    • request: (typeof An)

      implementation of the dojo.data.api.Request API. This specifies the
      query and paging information to be used by the data store

    • paramNames: (typeof optional)

      An object defining the names of the item attributes to fetch from the
      data store.  The three attributes allowed are 'linkAttr', 'imageLargeAttr' and 'titleAttr'

  • source: [view]
      this.reset();
      var _this = this;
    
    
      this._request = {
       query: {},
       start: request.start || 0,
       count: request.count || this.pageSize,
       onBegin: function(count, request){
        // FIXME: fires too often?!?
        _this.maxPhotos = count;
       }
      };
      if(request.query){
       dojo.mixin(this._request.query, request.query);
      }
      if(paramNames){
       dojo.forEach(["imageLargeAttr", "linkAttr", "titleAttr"], function(attrName){
        if(paramNames[attrName]){
         this[attrName] = paramNames[attrName];
        }
       }, this);
      }
    
     
      var _complete = function(items){
       // FIXME: onBegin above used to work for maxPhotos:
       _this.maxPhotos = items.length;
       _this._request.onComplete = null;
       if(_this.autoStart){
        _this.imageIndex = -1;
        _this.toggleSlideShow();
       } else {
        _this.showImage(0);
       }
    
       
      };
    
    
      this.imageStore = dataStore;
      this._request.onComplete = _complete;
      this._request.start = 0;
      this.imageStore.fetch(this._request);
  • summary

    Sets the data store and request objects to read data from.

• dojox.image.SlideShow.reset

  • type

    Function

  • source: [view]
      dojo.query("> *", this.largeNode).orphan();
      this.largeNode.appendChild(this._tmpImage);
    
      
      dojo.query("> *", this.hiddenNode).orphan();
      dojo.forEach(this.images, function(img){
       if(img && img.parentNode){ img.parentNode.removeChild(img); }
      });
      this.images = [];
      this.isInitialized = false;
      this._imageCounter = 0;
  • summary

    Resets the widget to its initial state

  • description

    Removes all previously loaded images, and clears all caches.

• dojox.image.SlideShow.isImageLoaded

  • type

    Function

  • parameters:
    • index: (typeof The)

      number index in the data store to check if it is loaded.

  • source: [view]
      return this.images && this.images.length > index && this.images[index];
  • summary

    Returns true if image at the specified index is loaded, false otherwise.

• dojox.image.SlideShow.moveImageLoadingPointer

  • type

    Function

  • parameters:
    • index: (typeof The)

      number index in the data store to start loading images from.

  • source: [view]
      this._imageCounter = index;
  • summary

    If 'autoload' is true, this tells the widget to start loading
    images from the specified pointer.

• dojox.image.SlideShow.destroy

  • type

    Function

  • source: [view]
      if(this._slideId) { this._stop(); }
      this.inherited(arguments);
  • summary

    Cleans up the widget when it is being destroyed

• dojox.image.SlideShow.showNextImage

  • type

    Function

  • parameters:
    • inTimer: (typeof Boolean)

      If true, a slideshow is active, otherwise the slideshow is inactive.

    • forceLoop: (typeof )
  • source: [view]
      if(inTimer && this._timerCancelled){ return false; }
    
      
      if(this.imageIndex + 1 >= this.maxPhotos){
       if(inTimer && (this.loop || forceLoop)){
        this.imageIndex = -1;
       }else{
        if(this._slideId){ this._stop(); }
        return false;
       }
      }
    
    
      this.showImage(this.imageIndex + 1, dojo.hitch(this,function(){
       if(inTimer){ this._startTimer(); }
      }));
      return true;
  • summary

    Changes the image being displayed to the next image in the data store

• dojox.image.SlideShow.toggleSlideShow

  • type

    Function

  • source: [view]
      if(this._slideId){
       this._stop();
      }else{
       dojo.toggleClass(this.domNode,"slideShowPaused");
       this._timerCancelled = false;
       var idx = this.imageIndex;
    
    
       if(idx < 0 || (this.images[idx] && this.images[idx]._img.complete)){
        var success = this.showNextImage(true, true);
    
    
        if(!success){
         this._stop();
        }
       }else{
        var handle = dojo.subscribe(this.getShowTopicName(), dojo.hitch(this, function(info){
         setTimeout(dojo.hitch(this, function(){
          if(info.index == idx){
           var success = this.showNextImage(true, true);
           if(!success){
            this._stop();
           }
           dojo.unsubscribe(handle);
          }}),
          this.slideshowInterval * 1000);
        }));
        dojo.publish(this.getShowTopicName(),
         [{index: idx, title: "", url: ""}]);
       }
      }
  • summary

    Switches the slideshow mode on and off.
    
    If the slideshow is already running, stop it.

• dojox.image.SlideShow.getShowTopicName

  • type

    Function

  • source: [view]
      return (this.widgetId || this.id) + "/imageShow";
  • summary

    Returns the topic id published to when an image is shown

  • description

    The information published is: index, title and url

• dojox.image.SlideShow.getLoadTopicName

  • type

    Function

  • source: [view]
      return (this.widgetId ? this.widgetId : this.id) + "/imageLoad";
  • summary

    Returns the topic id published to when an image finishes loading.

  • description

    The information published is the index position of the image loaded.

• dojox.image.SlideShow.showImage

  • type

    Function

  • parameters:
    • index: (typeof Number)

      The position of the image in the data store to display

    • callback: (typeof Function)

      Optional callback function to call when the image has finished displaying.

  • source: [view]
      if(!callback && this._slideId){
       this.toggleSlideShow();
      }
      var _this = this;
      var current = this.largeNode.getElementsByTagName("div");
      this.imageIndex = index;
    
    
      var showOrLoadIt = function() {
       //If the image is already loaded, then show it.
       if(_this.images[index]){
        while(_this.largeNode.firstChild){
         _this.largeNode.removeChild(_this.largeNode.firstChild);
        }
        dojo.style(_this.images[index],"opacity", 0);
        _this.largeNode.appendChild(_this.images[index]);
        _this._currentImage = _this.images[index]._img;
        _this._fitSize();
    
            
        var onEnd = function(a,b,c){
    
    
         var img = _this.images[index].firstChild;
         if(img.tagName.toLowerCase() != "img"){ img = img.firstChild; }
         var title = img.getAttribute("title") || "";
         if(_this._navShowing){
          _this._showNav(true);
         }
         dojo.publish(_this.getShowTopicName(), [{
          index: index,
          title: title,
          url: img.getAttribute("src")
         }]);
    
    
        if(callback) {
         callback(a,b,c);
        }
         _this._setTitle(title);
        };
    
        
        dojo.fadeIn({
         node: _this.images[index],
         duration: 300,
         onEnd: onEnd
        }).play();
    
        
       }else{
        //If the image is not loaded yet, load it first, then show it.
        _this._loadImage(index, function(){
         _this.showImage(index, callback);
        });
       }
      };
    
    
      //If an image is currently showing, fade it out, then show
      //the new image. Otherwise, just show the new image.
      if(current && current.length > 0){
       dojo.fadeOut({
        node: current[0],
        duration: 300,
        onEnd: function(){
         _this.hiddenNode.appendChild(current[0]);
         showOrLoadIt();
        }
       }).play();
      }else{
       showOrLoadIt();
      }
  • summary

    Shows the image at index 'index'.

• dojox.image.SlideShow._fitSize

  • type

    Function

  • parameters:
    • force: (typeof Boolean)

      If true, the widget is always resized, regardless of the value of 'fixedHeight'

  • source: [view]
      if(!this.fixedHeight || force){
       var height = (this._currentImage.height + (this.hasNav ? 20:0));
       dojo.style(this.innerWrapper, "height", height + "px");
       return;
      }
      dojo.style(this.largeNode, "paddingTop", this._getTopPadding() + "px");
  • summary

    Fits the widget size to the size of the image being shown,
    or centers the image, depending on the value of 'fixedHeight'

• dojox.image.SlideShow._getTopPadding

  • type

    Function

  • source: [view]
      if(!this.fixedHeight){ return 0; }
      return (this.imageHeight - this._currentImage.height) / 2;
  • summary

    Returns the padding to place at the top of the image to center it vertically.

• dojox.image.SlideShow._loadNextImage

  • type

    Function

  • source: [view]
      if(!this.autoLoad){
       return;
      }
      while(this.images.length >= this._imageCounter && this.images[this._imageCounter]){
       this._imageCounter++;
      }
      this._loadImage(this._imageCounter);
  • summary

    Load the next unloaded image.

• dojox.image.SlideShow._loadImage

  • type

    Function

  • parameters:
    • index: (typeof The)

      position in the data store to load an image from.

    • callbackFn: (typeof An)

      optional function to execute when the image has finished loading.

  • source: [view]
      if(this.images[index] || !this._request) {
       return;
      }
    
      
      var pageStart = index - (index % (this._request.count || this.pageSize));
    
    
      this._request.start = pageStart;
    
    
      this._request.onComplete = function(items){
       var diff = index - pageStart;
    
       
       if(items && items.length > diff){
        loadIt(items[diff]);
       }else{ /* Squelch - console.log("Got an empty set of items"); */ }
      }
    
    
      var _this = this;
      var store = this.imageStore;
      var loadIt = function(item){
       var url = _this.imageStore.getValue(item, _this.imageLargeAttr);
    
       
       var img = new Image(); // when creating img with "createElement" IE doesnt has width and height, so use the Image object
       var div = dojo.create("div", {
        id: _this.id + "_imageDiv" + index
       });
       div._img = img;
    
    
       var link = _this.imageStore.getValue(item,_this.linkAttr);
       if(!link || _this.noLink){
        div.appendChild(img);
       }else{
        var a = dojo.create("a", {
         "href": link,
         "target": "_blank"
        }, div);
        a.appendChild(img);
       }
    
    
       dojo.connect(img, "onload", function(){
        if(store != _this.imageStore){
         // If the store has changed, ignore this load event.
         return;
        }
        _this._fitImage(img);
        dojo.attr(div, {"width": _this.imageWidth, "height": _this.imageHeight});
    
        
        // make a short timeout to prevent IE6/7 stack overflow at line 0 ~ still occuring though for first image
        dojo.publish(_this.getLoadTopicName(), [index]);
    
    
        setTimeout(function(){_this._loadNextImage();}, 1);
        if(callbackFn){ callbackFn(); }
       });
       _this.hiddenNode.appendChild(div);
    
    
       var titleDiv = dojo.create("div", {
        className: "slideShowTitle"
       }, div);
    
    
       _this.images[index] = div;
       dojo.attr(img, "src", url);
    
       
       var title = _this.imageStore.getValue(item, _this.titleAttr);
       if(title){ dojo.attr(img, "title", title); }
      }
      this.imageStore.fetch(this._request);
  • summary

    Load image at specified index

  • description

    This function loads the image at position 'index' into the
    internal cache of images.  This does not cause the image to be displayed.

• dojox.image.SlideShow._stop

  • type

    Function

  • source: [view]
      if(this._slideId){ clearTimeout(this._slideId); }
      this._slideId = null;
      this._timerCancelled = true;
      dojo.removeClass(this.domNode,"slideShowPaused");
  • summary

    Stops a running slide show.

• dojox.image.SlideShow._prev

  • type

    Function

  • source: [view]
      if(this.imageIndex < 1){ return; }
      this.showImage(this.imageIndex - 1);
  • summary

    Show the previous image.
    FIXME: either pull code from showNext/prev, or call it here

• dojox.image.SlideShow._next

  • type

    Function

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

    Show the next image

• dojox.image.SlideShow._startTimer

  • type

    Function

  • source: [view]
      var id = this.id;
      this._slideId = setTimeout(function(){
       dijit.byId(id).showNextImage(true);
      }, this.slideshowInterval * 1000);
  • summary

    Starts a timeout to show the next image when a slide show is active

• dojox.image.SlideShow._calcNavDimensions

  • type

    Function

  • source: [view]
      dojo.style(this.navNode, "position", "absolute");
    
      
      //Place the navigation controls far off screen
      dojo.style(this.navNode, "top", "-10000px");
    
      
      //Make the navigation controls visible
      dojo._setOpacity(this.navNode, 1);
    
      
      this.navPlay._size = dojo.marginBox(this.navPlay);
      this.navPrev._size = dojo.marginBox(this.navPrev);
      this.navNext._size = dojo.marginBox(this.navNext);
    
      
      dojo._setOpacity(this.navNode, 0);
    
      
      dojo.style(this.navNode, {"position": "", top: ""});
  • summary

    Calculates the dimensions of the navigation controls

• dojox.image.SlideShow._setTitle

  • type

    Function

  • parameters:
    • title: (typeof String)

      The String title of the image

  • source: [view]
      this.titleNode.innerHTML = dojo.string.substitute(this.titleTemplate,{
       title: title,
       current: 1 + this.imageIndex,
       total: this.maxPhotos || ""
      });
  • summary

    Sets the title to the image being displayed

• dojox.image.SlideShow._fitImage

  • type

    Function

  • parameters:
    • img: (typeof Node)

      The image DOM node to optionally resize

  • source: [view]
      var width = img.width;
      var height = img.height;
    
      
      if(width > this.imageWidth){
       height = Math.floor(height * (this.imageWidth / width));
       img.height = height;
       img.width = width = this.imageWidth;
      }
      if(height > this.imageHeight){
       width = Math.floor(width * (this.imageHeight / height));
       img.height = this.imageHeight;
       img.width = width;
      }
  • summary

    Ensures that the image width and height do not exceed the maximum.

• dojox.image.SlideShow._handleClick

  • type

    Function

  • parameters:
    • e: (typeof Event)

      An Event object

  • source: [view]
      switch(e.target){
       case this.navNext: this._next(); break;
       case this.navPrev: this._prev(); break;
       case this.navPlay: this.toggleSlideShow(); break;
      }
  • summary

    Performs navigation on the images based on users mouse clicks

• dojox.image.SlideShow._showNav

  • type

    Function

  • parameters:
    • force: (typeof Boolean)

      If true, the navigation controls are repositioned even if they are
      currently visible.

  • source: [view]
      if(this._navShowing && !force){return;}
      dojo.style(this.navNode, "marginTop", "0px");
    
      
      var navPlayPos = dojo.style(this.navNode, "width")/2 - this.navPlay._size.w/2 - this.navPrev._size.w;
    
      
      dojo.style(this.navPlay, "marginLeft", navPlayPos + "px");
      var wrapperSize = dojo.marginBox(this.outerNode);
    
      
      var margin = this._currentImage.height - this.navPlay._size.h - 10 + this._getTopPadding();
    
      
      if(margin > this._currentImage.height){margin += 10;}
      dojo[this.imageIndex < 1 ? "addClass":"removeClass"](this.navPrev, "slideShowCtrlHide");
      dojo[this.imageIndex + 1 >= this.maxPhotos ? "addClass":"removeClass"](this.navNext, "slideShowCtrlHide");
    
     
      var _this = this;
      if(this._navAnim) {
       this._navAnim.stop();
      }
      if(this._navShowing){ return; }
      this._navAnim = dojo.fadeIn({
       node: this.navNode,
       duration: 300,
       onEnd: function(){ _this._navAnim = null; }
      });
      this._navAnim.play();
      this._navShowing = true;
  • summary

    Shows the navigation controls

• dojox.image.SlideShow._hideNav

  • type

    Function

  • parameters:
    • e: (typeof Event)

      The DOM Event that triggered this function

  • source: [view]
      if(!e || !this._overElement(this.outerNode, e)){
       var _this = this;
       if(this._navAnim){
        this._navAnim.stop();
       }
       this._navAnim = dojo.fadeOut({
        node: this.navNode,
        duration:300,
        onEnd: function(){ _this._navAnim = null; }
       });
       this._navAnim.play();
       this._navShowing = false;
      }
  • summary

    Hides the navigation controls

• dojox.image.SlideShow._overElement

  • type

    Function

  • parameters:
    • element: (typeof DomNode)
    • e: (typeof Event)
  • source: [view]
      if(typeof(dojo) == "undefined"){ return false; }
      element = dojo.byId(element);
      var m = { x: e.pageX, y: e.pageY };
      var bb = dojo._getBorderBox(element);
      var absl = dojo.coords(element, true);
      var left = absl.x;
    
    
      return (m.x >= left
       && m.x <= (left + bb.w)
       && m.y >= absl.y
       && m.y <= (top + bb.h)
      ); // boolean
  • summary

    Returns whether the mouse is over the passed element.
    Element must be display:block (ie, not a <span>)
    
    When the page is unloading, if this method runs it will throw an
    exception.

• dojox.image.SlideShow.outerNode.style.width

  • summary

• dojox.image.SlideShow._request.onComplete

  • summary

• dojox.image.SlideShow._request.start

  • summary

• dojox.image.SlideShow.isInitialized

  • summary

• dojox.image.SlideShow.imageIndex

  • summary

• dojox.image.SlideShow._timerCancelled

  • summary

• dojox.image.SlideShow._loadImage._request.onComplete

  • type

    Function

  • parameters:
    • items: (typeof )
  • source: [view]
       var diff = index - pageStart;
    
       
       if(items && items.length > diff){
        loadIt(items[diff]);
       }else{ /* Squelch - console.log("Got an empty set of items"); */ }
  • summary

• dojox.image.SlideShow._slideId

  • summary

• dojox.image.SlideShow.navPlay._size

  • summary

• dojox.image.SlideShow.navPrev._size

  • summary

• dojox.image.SlideShow.navNext._size

  • summary

• dojox.image.SlideShow.titleNode.innerHTML

  • summary

• dojox.image.SlideShow._navAnim

  • summary

• dojox.image.SlideShow._navShowing

  • summary

• this._request.query

  • mixins:
    • request.query: (normal)
  • summary

• dojox.image

  • type

    Object

  • summary

• dojox

  • type

    Object

  • summary