dojox/image/Badge.js

• Provides:

  • dojox.image.Badge

• Requires:

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

• dojox.image.Badge

  • type

    Function

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

    A simple grid of Images that loops through thumbnails

• dojox.image.Badge.baseClass

  • summary

• dojox.image.Badge.templateString

  • summary

• dojox.image.Badge.children

  • type

    String

  • summary

    A CSS3 Selector that determines the node to become a child

• dojox.image.Badge.rows

  • type

    Integer

  • summary

    Number of Rows to display

• dojox.image.Badge.cols

  • type

    Integer

  • summary

    Number of Columns to display

• dojox.image.Badge.cellSize

  • type

    Integer

  • summary

    Size in PX of each thumbnail

• dojox.image.Badge.cellMargin

  • type

    Integer

  • summary

    Size in PX to adjust for cell margins

• dojox.image.Badge.delay

  • type

    Integer

  • summary

    Time (in ms) to show the image before sizing down again

• dojox.image.Badge.threads

  • type

    Integer

  • summary

    how many cycles will be going "simultaneously" (>2 not reccommended)

• dojox.image.Badge.easing

  • type

    Function|String

  • summary

    An easing function to use when showing the node (does not apply to shrinking)

• dojox.image.Badge.startup

  • type

    Function

  • source: [view]
      if(this._started){ return; }
      if(dojo.isString(this.easing)){
       this.easing = dojo.getObject(this.easing);
      }
      this.inherited(arguments);
      this._init();
  • summary

• dojox.image.Badge._init

  • type

    Function

  • source: [view]
      var _row = 0,
       _w = this.cellSize;
    
    
      dojo.style(this.domNode, {
       width: _w * this.cols + "px",
       height: _w * this.rows + "px"
      });
    
    
      this._nl = dojo.query(this.children, this.containerNode)
       .forEach(function(n, _idx){
    
    
        var _col = _idx % this.cols,
         t = _row * _w,
         l = _col * _w,
         m = this.cellMargin * 2;
    
       
        dojo.style(n, {
          top: t + "px",
          left: l + "px",
         width: _w - m + "px",
         height: _w - m + "px"
         });
    
    
        if(_col == this.cols - 1){ _row++; }
        dojo.addClass(n, this.baseClass + "Image");
    
        
       }, this)
      ;
    
      
      var l = this._nl.length;
      while(this.threads--){
       var s = Math.floor(Math.random() * l);
       setTimeout(dojo.hitch(this, "_enbiggen", {
        target: this._nl[s]
       }), this.delay * this.threads);
      }
  • summary

    Setup and layout the images

• dojox.image.Badge._getCell

  • type

    Function

  • parameters:
    • n: (typeof DomNode)
  • source: [view]
      var _pos = this._nl.indexOf(n);
      if(_pos >= 0){
       var _col = _pos % this.cols;
       var _row = Math.floor(_pos / this.cols);
       return { x: _col, y: _row, n: this._nl[_pos], io: _pos };
      }else{
       return undefined;
      }
  • summary

    Return information about the position for a given node

• dojox.image.Badge._getImage

  • type

    Function

  • source: [view]
      return "url('')";
  • summary

    Returns the next image in the list, or the first one if not available

• dojox.image.Badge._enbiggen

  • type

    Function

  • parameters:
    • e: (typeof Event|DomNode)
  • source: [view]
      var _pos = this._getCell(e.target || e);
    
    
      if (_pos){
       // we have a node, and know where it is
    
    
       var m = this.cellMargin,
        _cc = (this.cellSize * 2) - (m * 2),
        props = {
         height: _cc,
         width: _cc
        }
       ;
    
       
       var _tehDecider = function(){
        // if we have room, we'll want to decide which direction to go
        // let "teh decider" decide.
        return Math.round(Math.random());
       };
    
       
       if(_pos.x == this.cols - 1 || (_pos.x > 0 && _tehDecider() )){
        // we have to go left, at right edge (or we want to and not on left edge)
        props.left = this.cellSize * (_pos.x - m);
       }
    
       
       if(_pos.y == this.rows - 1 || (_pos.y > 0 && _tehDecider() )){
        // we have to go up, at bottom edge (or we want to and not at top)
        props.top = this.cellSize * (_pos.y - m);
       }
    
    
       var bc = this.baseClass;
       dojo.addClass(_pos.n, bc + "Top");
       dojo.addClass(_pos.n, bc + "Seen");
    
    
       dojo.animateProperty({ node: _pos.n, properties: props,
        onEnd: dojo.hitch(this, "_loadUnder", _pos, props),
        easing: this.easing
       }).play();
    
       
      }
  • summary

    Show the passed node in the picker

• dojox.image.Badge._loadUnder

  • type

    Function

  • parameters:
    • info: (typeof )
    • props: (typeof )
  • source: [view]
      var idx = info.io;
      var nodes = [];
    
    
      var isLeft = (props.left >= 0);
      var isUp = (props.top >= 0);
    
      
      var c = this.cols,
       // the three node index's we're allegedly over:
       e = idx + (isLeft ? -1 : 1),
       f = idx + (isUp ? -c : c),
       // don't ask:
       g = (isUp ? (isLeft ? e - c : f + 1) : (isLeft ? f - 1 : e + c)),
    
    
       bc = this.baseClass;
    
      
      dojo.forEach([e, f, g], function(x){
       var n = this._nl[x];
       if(n){
        if(dojo.hasClass(n, bc + "Seen")){
         // change the background image out?
         dojo.removeClass(n, bc + "Seen");
        }
       }
      },this);
    
      
      setTimeout(dojo.hitch(this, "_disenbiggen", info, props), this.delay * 1.25);
  • summary

    figure out which three images are being covered, and
    determine if they need loaded or not

• dojox.image.Badge._disenbiggen

  • type

    Function

  • parameters:
    • info: (typeof )
    • props: (typeof )
  • source: [view]
      if(props.top >= 0){
       props.top += this.cellSize;
      }
      if(props.left >= 0){
       props.left += this.cellSize;
      }
      var _cc = this.cellSize - (this.cellMargin * 2);
      dojo.animateProperty({
       node: info.n,
       properties: dojo.mixin(props, {
        width:_cc,
        height:_cc
       }),
       onEnd: dojo.hitch(this, "_cycle", info, props)
      }).play(5);
  • summary

    Hide the passed node (info.n), passing along properties
    received.

• dojox.image.Badge._cycle

  • type

    Function

  • parameters:
    • info: (typeof )
    • props: (typeof )
  • source: [view]
      var bc = this.baseClass;
      dojo.removeClass(info.n, bc + "Top");
      var ns = this._nl.filter(function(n){
       return !dojo.hasClass(n, bc + "Seen")
      });
      var c = ns[Math.floor(Math.random() * ns.length)];
      setTimeout(dojo.hitch(this,"_enbiggen", { target: c }), this.delay / 2)
  • summary

    Select an un-viewed image from the list, and show it

• dojox.image.Badge._nl

  • summary

• props.width

  • summary

• props.height

  • summary

• dojox.image

  • type

    Object

  • summary

• dojox

  • type

    Object

  • summary