diff options
Diffstat (limited to 'js/dojo-1.7.2/dojox/image/Badge.js')
| -rw-r--r-- | js/dojo-1.7.2/dojox/image/Badge.js | 229 |
1 files changed, 229 insertions, 0 deletions
diff --git a/js/dojo-1.7.2/dojox/image/Badge.js b/js/dojo-1.7.2/dojox/image/Badge.js new file mode 100644 index 0000000..3a84ada --- /dev/null +++ b/js/dojo-1.7.2/dojox/image/Badge.js @@ -0,0 +1,229 @@ +//>>built +define("dojox/image/Badge", ["dojo", "dijit", "dojox/main", "dijit/_Widget", "dijit/_TemplatedMixin", "dojo/fx/easing"], function(dojo, dijit, dojox){ + + dojo.experimental("dojox.image.Badge"); + dojo.getObject("image", true, dojox); + + dojo.declare("dojox.image.Badge", [dijit._Widget, dijit._TemplatedMixin], { + // summary: A simple grid of Images that loops through thumbnails + // + + baseClass: "dojoxBadge", + + templateString:'<div class="dojoxBadge" dojoAttachPoint="containerNode"></div>', + + // children: String + // A CSS3 Selector that determines the node to become a child + children: "div.dojoxBadgeImage", + + // rows: Integer + // Number of Rows to display + rows: 4, + + // cols: Integer + // Number of Columns to display + cols: 5, + + // cellSize: Integer + // Size in PX of each thumbnail + cellSize: 50, + + // cellMargin: Integer + // Size in PX to adjust for cell margins + cellMargin: 1, + + // delay: Integer + // Time (in ms) to show the image before sizing down again + delay: 2000, + + // threads: Integer + // how many cycles will be going "simultaneously" (>2 not reccommended) + threads: 1, + + // easing: Function|String + // An easing function to use when showing the node (does not apply to shrinking) + easing: "dojo.fx.easing.backOut", + + startup: function(){ + if(this._started){ return; } + if(dojo.isString(this.easing)){ + this.easing = dojo.getObject(this.easing); + } + this.inherited(arguments); + this._init(); + }, + + _init: function(){ + // summary: Setup and layout the images + + 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); + } + + }, + + _getCell: function(/* DomNode */ n){ + // summary: Return information about the position for a given node + 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; + } + }, + + _getImage: function(){ + // summary: Returns the next image in the list, or the first one if not available + return "url('')"; + }, + + _enbiggen: function(/* Event|DomNode */ e){ + // summary: Show the passed node in the picker + 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(); + + } + }, + + _loadUnder: function(info, props){ + // summary: figure out which three images are being covered, and + // determine if they need loaded or not + + 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); + + }, + + _disenbiggen: function(info, props){ + // summary: Hide the passed node (info.n), passing along properties + // received. + + 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); + }, + + _cycle: function(info, props){ + // summary: Select an un-viewed image from the list, and show it + + 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) + + } + + }); + + return dojox.image.Badge; +}) + |