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 &lt;span&gt;)
      
      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