diff options
Diffstat (limited to 'js/dojo-1.6/dojox/image')
43 files changed, 6864 insertions, 0 deletions
diff --git a/js/dojo-1.6/dojox/image/Badge.js b/js/dojo-1.6/dojox/image/Badge.js new file mode 100644 index 0000000..9daec89 --- /dev/null +++ b/js/dojo-1.6/dojox/image/Badge.js @@ -0,0 +1,237 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image.Badge"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Badge"] = true;
+dojo.provide("dojox.image.Badge");
+dojo.experimental("dojox.image.Badge");
+
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dojo.fx.easing");
+
+dojo.declare("dojox.image.Badge", [dijit._Widget, dijit._Templated], {
+ // 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)
+
+ }
+
+});
+
+}
diff --git a/js/dojo-1.6/dojox/image/Badge.xd.js b/js/dojo-1.6/dojox/image/Badge.xd.js new file mode 100644 index 0000000..eb2bac3 --- /dev/null +++ b/js/dojo-1.6/dojox/image/Badge.xd.js @@ -0,0 +1,244 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image.Badge"],
+["require", "dijit._Widget"],
+["require", "dijit._Templated"],
+["require", "dojo.fx.easing"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image.Badge"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Badge"] = true;
+dojo.provide("dojox.image.Badge");
+dojo.experimental("dojox.image.Badge");
+
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dojo.fx.easing");
+
+dojo.declare("dojox.image.Badge", [dijit._Widget, dijit._Templated], {
+ // 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)
+
+ }
+
+});
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/FlickrBadge.js b/js/dojo-1.6/dojox/image/FlickrBadge.js new file mode 100644 index 0000000..e4462c1 --- /dev/null +++ b/js/dojo-1.6/dojox/image/FlickrBadge.js @@ -0,0 +1,116 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image.FlickrBadge"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.FlickrBadge"] = true;
+dojo.provide("dojox.image.FlickrBadge");
+
+dojo.require("dojox.image.Badge");
+dojo.require("dojox.data.FlickrRestStore");
+
+dojo.declare("dojox.image.FlickrBadge", dojox.image.Badge, {
+ children: "a.flickrImage",
+
+ // userid: String
+ // If you know your Flickr userid, you can set it to prevent a call to fetch the id
+ userid: "",
+
+ // username: String
+ // Your Flickr username
+ username: "",
+
+ // setid: String
+ // The id of the set to display
+ setid: "",
+
+ // tags: String|Array
+ // A comma separated list of tags or an array of tags to grab from Flickr
+ tags: "",
+
+ // searchText: String
+ // Free text search. Photos who's title, description, or tags contain the text will be displayed
+ searchText: "",
+
+ // target: String
+ // Where to display the pictures when clicked on. Valid values are the same as the target attribute
+ // of the A tag.
+ target: "",
+
+ apikey: "8c6803164dbc395fb7131c9d54843627",
+ _store: null,
+
+ postCreate: function(){
+ if(this.username && !this.userid){
+ var def = dojo.io.script.get({
+ url: "http://www.flickr.com/services/rest/",
+ preventCache: true,
+ content: {
+ format: "json",
+ method: "flickr.people.findByUsername",
+ api_key: this.apikey,
+ username: this.username
+ },
+ callbackParamName: "jsoncallback"
+ });
+ def.addCallback(this, function(data){
+ if(data.user && data.user.nsid){
+ this.userid = data.user.nsid;
+ if(!this._started){
+ this.startup();
+ }
+ }
+ });
+ }
+ },
+
+ startup: function(){
+ if(this._started){ return; }
+ if(this.userid){
+ var query = {
+ userid: this.userid
+ };
+ if(this.setid){
+ query["setid"] = this.setid;
+ }
+ if(this.tags){
+ query.tags = this.tags;
+ }
+ if(this.searchText){
+ query.text = this.searchText;
+ }
+ var args = arguments;
+ this._store = new dojox.data.FlickrRestStore({ apikey: this.apikey });
+ this._store.fetch({
+ count: this.cols * this.rows,
+ query: query,
+ onComplete: dojo.hitch(this, function(items){
+ dojo.forEach(items, function(item){
+ var a = dojo.doc.createElement("a");
+ dojo.addClass(a, "flickrImage");
+ a.href = this._store.getValue(item, "link");
+ if(this.target){
+ a.target = this.target;
+ }
+
+ var img = dojo.doc.createElement("img");
+ img.src = this._store.getValue(item, "imageUrlThumb");
+ dojo.style(img, {
+ width: "100%",
+ height: "100%"
+ });
+
+ a.appendChild(img);
+ this.domNode.appendChild(a);
+ }, this);
+ dojox.image.Badge.prototype.startup.call(this, args);
+ })
+ });
+ }
+ }
+});
+
+}
diff --git a/js/dojo-1.6/dojox/image/FlickrBadge.xd.js b/js/dojo-1.6/dojox/image/FlickrBadge.xd.js new file mode 100644 index 0000000..8b5df10 --- /dev/null +++ b/js/dojo-1.6/dojox/image/FlickrBadge.xd.js @@ -0,0 +1,122 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image.FlickrBadge"],
+["require", "dojox.image.Badge"],
+["require", "dojox.data.FlickrRestStore"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image.FlickrBadge"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.FlickrBadge"] = true;
+dojo.provide("dojox.image.FlickrBadge");
+
+dojo.require("dojox.image.Badge");
+dojo.require("dojox.data.FlickrRestStore");
+
+dojo.declare("dojox.image.FlickrBadge", dojox.image.Badge, {
+ children: "a.flickrImage",
+
+ // userid: String
+ // If you know your Flickr userid, you can set it to prevent a call to fetch the id
+ userid: "",
+
+ // username: String
+ // Your Flickr username
+ username: "",
+
+ // setid: String
+ // The id of the set to display
+ setid: "",
+
+ // tags: String|Array
+ // A comma separated list of tags or an array of tags to grab from Flickr
+ tags: "",
+
+ // searchText: String
+ // Free text search. Photos who's title, description, or tags contain the text will be displayed
+ searchText: "",
+
+ // target: String
+ // Where to display the pictures when clicked on. Valid values are the same as the target attribute
+ // of the A tag.
+ target: "",
+
+ apikey: "8c6803164dbc395fb7131c9d54843627",
+ _store: null,
+
+ postCreate: function(){
+ if(this.username && !this.userid){
+ var def = dojo.io.script.get({
+ url: "http://www.flickr.com/services/rest/",
+ preventCache: true,
+ content: {
+ format: "json",
+ method: "flickr.people.findByUsername",
+ api_key: this.apikey,
+ username: this.username
+ },
+ callbackParamName: "jsoncallback"
+ });
+ def.addCallback(this, function(data){
+ if(data.user && data.user.nsid){
+ this.userid = data.user.nsid;
+ if(!this._started){
+ this.startup();
+ }
+ }
+ });
+ }
+ },
+
+ startup: function(){
+ if(this._started){ return; }
+ if(this.userid){
+ var query = {
+ userid: this.userid
+ };
+ if(this.setid){
+ query["setid"] = this.setid;
+ }
+ if(this.tags){
+ query.tags = this.tags;
+ }
+ if(this.searchText){
+ query.text = this.searchText;
+ }
+ var args = arguments;
+ this._store = new dojox.data.FlickrRestStore({ apikey: this.apikey });
+ this._store.fetch({
+ count: this.cols * this.rows,
+ query: query,
+ onComplete: dojo.hitch(this, function(items){
+ dojo.forEach(items, function(item){
+ var a = dojo.doc.createElement("a");
+ dojo.addClass(a, "flickrImage");
+ a.href = this._store.getValue(item, "link");
+ if(this.target){
+ a.target = this.target;
+ }
+
+ var img = dojo.doc.createElement("img");
+ img.src = this._store.getValue(item, "imageUrlThumb");
+ dojo.style(img, {
+ width: "100%",
+ height: "100%"
+ });
+
+ a.appendChild(img);
+ this.domNode.appendChild(a);
+ }, this);
+ dojox.image.Badge.prototype.startup.call(this, args);
+ })
+ });
+ }
+ }
+});
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/Gallery.js b/js/dojo-1.6/dojox/image/Gallery.js new file mode 100644 index 0000000..56c9fe6 --- /dev/null +++ b/js/dojo-1.6/dojox/image/Gallery.js @@ -0,0 +1,201 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image.Gallery"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Gallery"] = true;
+dojo.provide("dojox.image.Gallery");
+dojo.experimental("dojox.image.Gallery");
+//
+// dojox.image.Gallery courtesy Shane O Sullivan, licensed under a Dojo CLA
+// @author Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
+//
+// For a sample usage, see http://www.skynet.ie/~sos/photos.php
+//
+// TODO: Make public, document params and privitize non-API conformant methods.
+// document topics.
+
+dojo.require("dojo.fx");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dojox.image.ThumbnailPicker");
+dojo.require("dojox.image.SlideShow");
+
+dojo.declare("dojox.image.Gallery",
+ [dijit._Widget, dijit._Templated],
+ {
+ // summary:
+ // Gallery widget that wraps a dojox.image.ThumbnailPicker and dojox.image.SlideShow widget
+ //
+ // imageHeight: Number
+ // Maximum height of an image in the SlideShow widget
+ imageHeight: 375,
+
+ // imageWidth: Number
+ // Maximum width of an image in the SlideShow widget
+ imageWidth: 500,
+
+ // pageSize: Number
+ // The number of records to retrieve from the data store per request.
+ pageSize: dojox.image.SlideShow.prototype.pageSize,
+
+ // autoLoad: Boolean
+ // If true, images are loaded before the user views them. If false, an
+ // image is loaded when the user displays it.
+ autoLoad: true,
+
+ // linkAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to link to from an image, if any.
+ linkAttr: "link",
+
+ // imageThumbAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to the thumbnail image.
+ imageThumbAttr: "imageUrlThumb",
+
+ // imageLargeAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to the image.
+ imageLargeAttr: "imageUrl",
+
+ // titleAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // title of the picture, if any.
+ titleAttr: "title",
+
+ // slideshowInterval: Integer
+ // Time, in seconds, between image changes in the slide show.
+ slideshowInterval: 3,
+
+ templateString: dojo.cache("dojox.image", "resources/Gallery.html", "<div dojoAttachPoint=\"outerNode\" class=\"imageGalleryWrapper\">\r\n\t<div dojoAttachPoint=\"thumbPickerNode\"></div>\r\n\t<div dojoAttachPoint=\"slideShowNode\"></div>\r\n</div>\r\n"),
+
+ postCreate: function(){
+ // summary:
+ // Initializes the widget, creates the ThumbnailPicker and SlideShow widgets
+ this.widgetid = this.id;
+ this.inherited(arguments)
+
+ this.thumbPicker = new dojox.image.ThumbnailPicker({
+ linkAttr: this.linkAttr,
+ imageLargeAttr: this.imageLargeAttr,
+ imageThumbAttr: this.imageThumbAttr,
+ titleAttr: this.titleAttr,
+ useLoadNotifier: true,
+ size: this.imageWidth
+ }, this.thumbPickerNode);
+
+
+ this.slideShow = new dojox.image.SlideShow({
+ imageHeight: this.imageHeight,
+ imageWidth: this.imageWidth,
+ autoLoad: this.autoLoad,
+ linkAttr: this.linkAttr,
+ imageLargeAttr: this.imageLargeAttr,
+ titleAttr: this.titleAttr,
+ slideshowInterval: this.slideshowInterval,
+ pageSize: this.pageSize
+ }, this.slideShowNode);
+
+ var _this = this;
+ //When an image is shown in the Slideshow, make sure it is visible
+ //in the ThumbnailPicker
+ dojo.subscribe(this.slideShow.getShowTopicName(), function(packet){
+ _this.thumbPicker._showThumbs(packet.index);
+ });
+ //When the user clicks a thumbnail, show that image
+ dojo.subscribe(this.thumbPicker.getClickTopicName(), function(evt){
+ _this.slideShow.showImage(evt.index);
+ });
+ //When the ThumbnailPicker moves to show a new set of pictures,
+ //make the Slideshow start loading those pictures first.
+ dojo.subscribe(this.thumbPicker.getShowTopicName(), function(evt){
+ _this.slideShow.moveImageLoadingPointer(evt.index);
+ });
+ //When an image finished loading in the slideshow, update the loading
+ //notification in the ThumbnailPicker
+ dojo.subscribe(this.slideShow.getLoadTopicName(), function(index){
+ _this.thumbPicker.markImageLoaded(index);
+ });
+ this._centerChildren();
+ },
+
+ setDataStore: function(dataStore, request, /*optional*/paramNames){
+ // summary:
+ // Sets the data store and request objects to read data from.
+ // dataStore:
+ // An implementation of the dojo.data.api.Read API. This accesses the image
+ // data.
+ // request:
+ // An implementation of the dojo.data.api.Request API. This specifies the
+ // query and paging information to be used by the data store
+ // paramNames:
+ // An object defining the names of the item attributes to fetch from the
+ // data store. The four attributes allowed are 'linkAttr', 'imageLargeAttr',
+ // 'imageThumbAttr' and 'titleAttr'
+ this.thumbPicker.setDataStore(dataStore, request, paramNames);
+ this.slideShow.setDataStore(dataStore, request, paramNames);
+ },
+
+ reset: function(){
+ // summary:
+ // Resets the widget to its initial state
+ this.slideShow.reset();
+ this.thumbPicker.reset();
+ },
+
+ showNextImage: function(inTimer){
+ // summary:
+ // Changes the image being displayed in the SlideShow to the next
+ // image in the data store
+ // inTimer: Boolean
+ // If true, a slideshow is active, otherwise the slideshow is inactive.
+ this.slideShow.showNextImage();
+ },
+
+ toggleSlideshow: function(){
+ dojo.deprecated("dojox.widget.Gallery.toggleSlideshow is deprecated. Use toggleSlideShow instead.", "", "2.0");
+ this.toggleSlideShow();
+ },
+
+ toggleSlideShow: function(){
+ // summary:
+ // Switches the slideshow mode on and off.
+ this.slideShow.toggleSlideShow();
+ },
+
+ showImage: function(index, /*optional*/callback){
+ // summary:
+ // Shows the image at index 'idx'.
+ // idx: Number
+ // The position of the image in the data store to display
+ // callback: Function
+ // Optional callback function to call when the image has finished displaying.
+ this.slideShow.showImage(index, callback);
+ },
+
+ resize: function(dim){
+ this.thumbPicker.resize(dim);
+ },
+
+ _centerChildren: function() {
+ // summary:
+ // Ensures that the ThumbnailPicker and the SlideShow widgets
+ // are centered.
+ var thumbSize = dojo.marginBox(this.thumbPicker.outerNode);
+ var slideSize = dojo.marginBox(this.slideShow.outerNode);
+
+ var diff = (thumbSize.w - slideSize.w) / 2;
+
+ if(diff > 0) {
+ dojo.style(this.slideShow.outerNode, "marginLeft", diff + "px");
+ } else if(diff < 0) {
+ dojo.style(this.thumbPicker.outerNode, "marginLeft", (diff * -1) + "px");
+ }
+ }
+});
+
+}
diff --git a/js/dojo-1.6/dojox/image/Gallery.xd.js b/js/dojo-1.6/dojox/image/Gallery.xd.js new file mode 100644 index 0000000..9e8e3a3 --- /dev/null +++ b/js/dojo-1.6/dojox/image/Gallery.xd.js @@ -0,0 +1,210 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image.Gallery"],
+["require", "dojo.fx"],
+["require", "dijit._Widget"],
+["require", "dijit._Templated"],
+["require", "dojox.image.ThumbnailPicker"],
+["require", "dojox.image.SlideShow"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image.Gallery"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Gallery"] = true;
+dojo.provide("dojox.image.Gallery");
+dojo.experimental("dojox.image.Gallery");
+//
+// dojox.image.Gallery courtesy Shane O Sullivan, licensed under a Dojo CLA
+// @author Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
+//
+// For a sample usage, see http://www.skynet.ie/~sos/photos.php
+//
+// TODO: Make public, document params and privitize non-API conformant methods.
+// document topics.
+
+dojo.require("dojo.fx");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dojox.image.ThumbnailPicker");
+dojo.require("dojox.image.SlideShow");
+
+dojo.declare("dojox.image.Gallery",
+ [dijit._Widget, dijit._Templated],
+ {
+ // summary:
+ // Gallery widget that wraps a dojox.image.ThumbnailPicker and dojox.image.SlideShow widget
+ //
+ // imageHeight: Number
+ // Maximum height of an image in the SlideShow widget
+ imageHeight: 375,
+
+ // imageWidth: Number
+ // Maximum width of an image in the SlideShow widget
+ imageWidth: 500,
+
+ // pageSize: Number
+ // The number of records to retrieve from the data store per request.
+ pageSize: dojox.image.SlideShow.prototype.pageSize,
+
+ // autoLoad: Boolean
+ // If true, images are loaded before the user views them. If false, an
+ // image is loaded when the user displays it.
+ autoLoad: true,
+
+ // linkAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to link to from an image, if any.
+ linkAttr: "link",
+
+ // imageThumbAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to the thumbnail image.
+ imageThumbAttr: "imageUrlThumb",
+
+ // imageLargeAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to the image.
+ imageLargeAttr: "imageUrl",
+
+ // titleAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // title of the picture, if any.
+ titleAttr: "title",
+
+ // slideshowInterval: Integer
+ // Time, in seconds, between image changes in the slide show.
+ slideshowInterval: 3,
+
+ templateString: dojo.cache("dojox.image", "resources/Gallery.html", "<div dojoAttachPoint=\"outerNode\" class=\"imageGalleryWrapper\">\r\n\t<div dojoAttachPoint=\"thumbPickerNode\"></div>\r\n\t<div dojoAttachPoint=\"slideShowNode\"></div>\r\n</div>\r\n"),
+
+ postCreate: function(){
+ // summary:
+ // Initializes the widget, creates the ThumbnailPicker and SlideShow widgets
+ this.widgetid = this.id;
+ this.inherited(arguments)
+
+ this.thumbPicker = new dojox.image.ThumbnailPicker({
+ linkAttr: this.linkAttr,
+ imageLargeAttr: this.imageLargeAttr,
+ imageThumbAttr: this.imageThumbAttr,
+ titleAttr: this.titleAttr,
+ useLoadNotifier: true,
+ size: this.imageWidth
+ }, this.thumbPickerNode);
+
+
+ this.slideShow = new dojox.image.SlideShow({
+ imageHeight: this.imageHeight,
+ imageWidth: this.imageWidth,
+ autoLoad: this.autoLoad,
+ linkAttr: this.linkAttr,
+ imageLargeAttr: this.imageLargeAttr,
+ titleAttr: this.titleAttr,
+ slideshowInterval: this.slideshowInterval,
+ pageSize: this.pageSize
+ }, this.slideShowNode);
+
+ var _this = this;
+ //When an image is shown in the Slideshow, make sure it is visible
+ //in the ThumbnailPicker
+ dojo.subscribe(this.slideShow.getShowTopicName(), function(packet){
+ _this.thumbPicker._showThumbs(packet.index);
+ });
+ //When the user clicks a thumbnail, show that image
+ dojo.subscribe(this.thumbPicker.getClickTopicName(), function(evt){
+ _this.slideShow.showImage(evt.index);
+ });
+ //When the ThumbnailPicker moves to show a new set of pictures,
+ //make the Slideshow start loading those pictures first.
+ dojo.subscribe(this.thumbPicker.getShowTopicName(), function(evt){
+ _this.slideShow.moveImageLoadingPointer(evt.index);
+ });
+ //When an image finished loading in the slideshow, update the loading
+ //notification in the ThumbnailPicker
+ dojo.subscribe(this.slideShow.getLoadTopicName(), function(index){
+ _this.thumbPicker.markImageLoaded(index);
+ });
+ this._centerChildren();
+ },
+
+ setDataStore: function(dataStore, request, /*optional*/paramNames){
+ // summary:
+ // Sets the data store and request objects to read data from.
+ // dataStore:
+ // An implementation of the dojo.data.api.Read API. This accesses the image
+ // data.
+ // request:
+ // An implementation of the dojo.data.api.Request API. This specifies the
+ // query and paging information to be used by the data store
+ // paramNames:
+ // An object defining the names of the item attributes to fetch from the
+ // data store. The four attributes allowed are 'linkAttr', 'imageLargeAttr',
+ // 'imageThumbAttr' and 'titleAttr'
+ this.thumbPicker.setDataStore(dataStore, request, paramNames);
+ this.slideShow.setDataStore(dataStore, request, paramNames);
+ },
+
+ reset: function(){
+ // summary:
+ // Resets the widget to its initial state
+ this.slideShow.reset();
+ this.thumbPicker.reset();
+ },
+
+ showNextImage: function(inTimer){
+ // summary:
+ // Changes the image being displayed in the SlideShow to the next
+ // image in the data store
+ // inTimer: Boolean
+ // If true, a slideshow is active, otherwise the slideshow is inactive.
+ this.slideShow.showNextImage();
+ },
+
+ toggleSlideshow: function(){
+ dojo.deprecated("dojox.widget.Gallery.toggleSlideshow is deprecated. Use toggleSlideShow instead.", "", "2.0");
+ this.toggleSlideShow();
+ },
+
+ toggleSlideShow: function(){
+ // summary:
+ // Switches the slideshow mode on and off.
+ this.slideShow.toggleSlideShow();
+ },
+
+ showImage: function(index, /*optional*/callback){
+ // summary:
+ // Shows the image at index 'idx'.
+ // idx: Number
+ // The position of the image in the data store to display
+ // callback: Function
+ // Optional callback function to call when the image has finished displaying.
+ this.slideShow.showImage(index, callback);
+ },
+
+ resize: function(dim){
+ this.thumbPicker.resize(dim);
+ },
+
+ _centerChildren: function() {
+ // summary:
+ // Ensures that the ThumbnailPicker and the SlideShow widgets
+ // are centered.
+ var thumbSize = dojo.marginBox(this.thumbPicker.outerNode);
+ var slideSize = dojo.marginBox(this.slideShow.outerNode);
+
+ var diff = (thumbSize.w - slideSize.w) / 2;
+
+ if(diff > 0) {
+ dojo.style(this.slideShow.outerNode, "marginLeft", diff + "px");
+ } else if(diff < 0) {
+ dojo.style(this.thumbPicker.outerNode, "marginLeft", (diff * -1) + "px");
+ }
+ }
+});
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/Lightbox.js b/js/dojo-1.6/dojox/image/Lightbox.js new file mode 100644 index 0000000..916ea70 --- /dev/null +++ b/js/dojo-1.6/dojox/image/Lightbox.js @@ -0,0 +1,612 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image.Lightbox"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Lightbox"] = true;
+dojo.provide("dojox.image.Lightbox");
+dojo.experimental("dojox.image.Lightbox");
+
+dojo.require("dojo.window");
+dojo.require("dijit.Dialog");
+dojo.require("dojox.fx._base");
+
+dojo.declare("dojox.image.Lightbox",
+ dijit._Widget, {
+ // 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>
+ //
+ // group: String
+ // Grouping images in a page with similar tags will provide a 'slideshow' like grouping of images
+ group: "",
+
+ // title: String
+ // A string of text to be shown in the Lightbox beneath the image (empty if using a store)
+ title: "",
+
+ // href; String
+ // Link to image to use for this Lightbox node (empty if using a store).
+ href: "",
+
+ // duration: Integer
+ // Generic time in MS to adjust the feel of widget. could possibly add various
+ // durations for the various actions (dialog fadein, sizeing, img fadein ...)
+ duration: 500,
+
+ // modal: Boolean
+ // 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)
+ modal: false,
+
+ // _allowPassthru: Boolean
+ // Privately set this to disable/enable natural link of anchor tags
+ _allowPassthru: false,
+
+ // _attachedDialg: dojox.image._LightboxDialog
+ // The pointer to the global lightbox dialog for this widget
+ _attachedDialog: null, // try to share a single underlay per page?
+
+ startup: function(){
+ 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");
+ }
+
+ },
+
+ _addSelf: function(){
+ // summary: Add this instance to the master LightBoxDialog
+ this._attachedDialog.addImage({
+ href: this.href,
+ title: this.title
+ }, this.group || null);
+ },
+
+ _handleClick: function(/* Event */e){
+ // summary: Handle the click on the link
+ if(!this._allowPassthru){ e.preventDefault(); }
+ else{ return; }
+ this.show();
+ },
+
+ show: function(){
+ // summary: Show the Lightbox with this instance as the starting point
+ this._attachedDialog.show(this);
+ },
+
+ hide: function(){
+ // summary: Hide the Lightbox currently showing
+ this._attachedDialog.hide();
+ },
+
+ // FIXME: switch to .attr, deprecate eventually.
+ disable: function(){
+ // summary: Disables event clobbering and dialog, and follows natural link
+ this._allowPassthru = true;
+ },
+
+ enable: function(){
+ // summary: Enables the dialog (prevents default link)
+ this._allowPassthru = false;
+ },
+
+ onClick: function(){
+ // summary:
+ // Stub fired when the image in the lightbox is clicked.
+ },
+
+ destroy: function(){
+ this._attachedDialog.removeImage(this);
+ this.inherited(arguments);
+ }
+
+});
+
+dojo.declare("dojox.image.LightboxDialog",
+ dijit.Dialog, {
+ // 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"});
+ //
+ // title: String
+ // The current title, read from object passed to show()
+ title: "",
+
+ // FIXME: implement titleTemplate
+
+ // inGroup: Array
+ // 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
+ inGroup: null,
+
+ // imgUrl: String
+ // The src="" attribute of our imageNode (can be null at statup)
+ imgUrl: dijit._Widget.prototype._blankGif,
+
+ // errorMessage: String
+ // The text to display when an unreachable image is linked
+ errorMessage: "Image not found.",
+
+ // adjust: Boolean
+ // 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.
+ adjust: true,
+
+ // modal: Boolean
+ // 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)
+ modal: false,
+
+/*=====
+ // _groups: Object
+ // an object of arrays, each array (of objects) being a unique 'group'
+ _groups: { XnoGroupX: [] },
+
+=====*/
+
+ // errorImg: Url
+ // Path to the image used when a 404 is encountered
+ errorImg: dojo.moduleUrl("dojox.image","resources/images/warning.png"),
+
+ templateString: dojo.cache("dojox.image", "resources/Lightbox.html", "<div class=\"dojoxLightbox\" dojoAttachPoint=\"containerNode\">\r\n\t<div style=\"position:relative\">\r\n\t\t<div dojoAttachPoint=\"imageContainer\" class=\"dojoxLightboxContainer\" dojoAttachEvent=\"onclick: _onImageClick\">\r\n\t\t\t<img dojoAttachPoint=\"imgNode\" src=\"${imgUrl}\" class=\"dojoxLightboxImage\" alt=\"${title}\">\r\n\t\t\t<div class=\"dojoxLightboxFooter\" dojoAttachPoint=\"titleNode\">\r\n\t\t\t\t<div class=\"dijitInline LightboxClose\" dojoAttachPoint=\"closeButtonNode\"></div>\r\n\t\t\t\t<div class=\"dijitInline LightboxNext\" dojoAttachPoint=\"nextButtonNode\"></div>\t\r\n\t\t\t\t<div class=\"dijitInline LightboxPrev\" dojoAttachPoint=\"prevButtonNode\"></div>\r\n\t\t\t\t<div class=\"dojoxLightboxText\" dojoAttachPoint=\"titleTextNode\"><span dojoAttachPoint=\"textNode\">${title}</span><span dojoAttachPoint=\"groupCount\" class=\"dojoxLightboxGroupText\"></span></div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n"),
+ constructor: function(args){
+ this._groups = this._groups || (args && args._groups) || { XnoGroupX:[] };
+ },
+
+ startup: function(){
+ // summary: Add some extra event handlers, and startup our superclass.
+ //
+ // returns: dijit._Widget
+ // Perhaps the only `dijit._Widget` that returns itself to allow
+ // 'chaining' or var referencing with .startup()
+
+ 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;
+ },
+
+ show: function(/* Object */groupData){
+ // 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
+ //
+ // groupData: Object
+ // needs href and title attributes. the values for this image.
+ //
+ //
+ 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);
+ },
+
+ _ready: function(src){
+ // summary: A function to trigger all 'real' showing of some src
+
+ 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;
+ },
+
+ _nextImage: function(){
+ // summary: Load next image in group
+ if(!this.inGroup){ return; }
+ if(this._index + 1 < this.inGroup.length){
+ this._index++;
+ }else{
+ this._index = 0;
+ }
+ this._loadImage();
+ },
+
+ _prevImage: function(){
+ // summary: Load previous image in group
+ if(this.inGroup){
+ if(this._index == 0){
+ this._index = this.inGroup.length - 1;
+ }else{
+ this._index--;
+ }
+ this._loadImage();
+ }
+ },
+
+ _loadImage: function(){
+ // summary: Do the prep work before we can show another image
+ this._loadingAnim.play(1);
+ },
+
+ _prepNodes: function(){
+ // summary: A localized hook to accompany _loadImage
+ 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
+ });
+ }
+
+ },
+
+ _calcTitleSize: function(){
+ var sizes = dojo.map(dojo.query("> *", this.titleNode).position(), function(s){ return s.h; });
+ return { h: Math.max.apply(Math, sizes) };
+ },
+
+ resizeTo: function(/* Object */size, forceTitle){
+ // summary: Resize our dialog container, and fire _showImage
+
+ 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);
+ },
+
+ _scaleToFit: function(/* Object */size){
+ // summary: resize an image to fit within the bounds of the viewport
+ // size: Object
+ // The 'size' object passed around for this image
+
+ 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
+ },
+
+ _setImageSize: function(size){
+ // summary: Reset the image size to some actual size.
+ var s = this.imgNode;
+ s.height = size.h;
+ s.width = size.w;
+ },
+
+ // clobber inherited function, it is useless.
+ _size: function(){},
+
+ _position: function(/* Event */e){
+ // summary: we want to know the viewport size any time it changes
+ 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
+ });
+ }
+ }
+ }
+ },
+
+ _showImage: function(){
+ // summary: Fade in the image, and fire showNav
+ this._showImageAnim.play(1);
+ },
+
+ _showNav: function(){
+ // summary: Fade in the footer, and setup our connections.
+ 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);
+ }
+ },
+
+ hide: function(){
+ // summary: Hide the Master Lightbox
+ 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;
+ },
+
+ addImage: function(child, group){
+ // summary: Add an image to this Master Lightbox
+ //
+ // child: Object
+ // The image information to add.
+ // href: String - link to image (required)
+ // title: String - title to display
+ //
+ // group: String?
+ // attach to group of similar tag or null for individual image instance
+ 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); }
+ },
+
+ removeImage: function(/* Widget */child){
+ // summary: Remove an image instance from this LightboxDialog.
+ // child: 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.
+
+ 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;
+ });
+ },
+
+ removeGroup: function(group){
+ // summary: Remove all images in a passed group
+ if(this._groups[group]){ this._groups[group] = []; }
+ },
+
+ _handleKey: function(/* Event */e){
+ // summary: Handle keyboard navigation internally
+ 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;
+ }
+ },
+
+ _makeAnims: function(){
+ // summary: make and cleanup animation and animation connections
+
+ 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 });
+ },
+
+ onClick: function(groupData){
+ // summary: a stub function, called with the currently displayed image as the only argument
+ },
+
+ _onImageClick: function(e){
+ 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);
+ }
+ }
+ }
+});
+
+}
diff --git a/js/dojo-1.6/dojox/image/Lightbox.xd.js b/js/dojo-1.6/dojox/image/Lightbox.xd.js new file mode 100644 index 0000000..4b7c9a5 --- /dev/null +++ b/js/dojo-1.6/dojox/image/Lightbox.xd.js @@ -0,0 +1,619 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image.Lightbox"],
+["require", "dojo.window"],
+["require", "dijit.Dialog"],
+["require", "dojox.fx._base"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image.Lightbox"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Lightbox"] = true;
+dojo.provide("dojox.image.Lightbox");
+dojo.experimental("dojox.image.Lightbox");
+
+dojo.require("dojo.window");
+dojo.require("dijit.Dialog");
+dojo.require("dojox.fx._base");
+
+dojo.declare("dojox.image.Lightbox",
+ dijit._Widget, {
+ // 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>
+ //
+ // group: String
+ // Grouping images in a page with similar tags will provide a 'slideshow' like grouping of images
+ group: "",
+
+ // title: String
+ // A string of text to be shown in the Lightbox beneath the image (empty if using a store)
+ title: "",
+
+ // href; String
+ // Link to image to use for this Lightbox node (empty if using a store).
+ href: "",
+
+ // duration: Integer
+ // Generic time in MS to adjust the feel of widget. could possibly add various
+ // durations for the various actions (dialog fadein, sizeing, img fadein ...)
+ duration: 500,
+
+ // modal: Boolean
+ // 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)
+ modal: false,
+
+ // _allowPassthru: Boolean
+ // Privately set this to disable/enable natural link of anchor tags
+ _allowPassthru: false,
+
+ // _attachedDialg: dojox.image._LightboxDialog
+ // The pointer to the global lightbox dialog for this widget
+ _attachedDialog: null, // try to share a single underlay per page?
+
+ startup: function(){
+ 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");
+ }
+
+ },
+
+ _addSelf: function(){
+ // summary: Add this instance to the master LightBoxDialog
+ this._attachedDialog.addImage({
+ href: this.href,
+ title: this.title
+ }, this.group || null);
+ },
+
+ _handleClick: function(/* Event */e){
+ // summary: Handle the click on the link
+ if(!this._allowPassthru){ e.preventDefault(); }
+ else{ return; }
+ this.show();
+ },
+
+ show: function(){
+ // summary: Show the Lightbox with this instance as the starting point
+ this._attachedDialog.show(this);
+ },
+
+ hide: function(){
+ // summary: Hide the Lightbox currently showing
+ this._attachedDialog.hide();
+ },
+
+ // FIXME: switch to .attr, deprecate eventually.
+ disable: function(){
+ // summary: Disables event clobbering and dialog, and follows natural link
+ this._allowPassthru = true;
+ },
+
+ enable: function(){
+ // summary: Enables the dialog (prevents default link)
+ this._allowPassthru = false;
+ },
+
+ onClick: function(){
+ // summary:
+ // Stub fired when the image in the lightbox is clicked.
+ },
+
+ destroy: function(){
+ this._attachedDialog.removeImage(this);
+ this.inherited(arguments);
+ }
+
+});
+
+dojo.declare("dojox.image.LightboxDialog",
+ dijit.Dialog, {
+ // 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"});
+ //
+ // title: String
+ // The current title, read from object passed to show()
+ title: "",
+
+ // FIXME: implement titleTemplate
+
+ // inGroup: Array
+ // 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
+ inGroup: null,
+
+ // imgUrl: String
+ // The src="" attribute of our imageNode (can be null at statup)
+ imgUrl: dijit._Widget.prototype._blankGif,
+
+ // errorMessage: String
+ // The text to display when an unreachable image is linked
+ errorMessage: "Image not found.",
+
+ // adjust: Boolean
+ // 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.
+ adjust: true,
+
+ // modal: Boolean
+ // 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)
+ modal: false,
+
+/*=====
+ // _groups: Object
+ // an object of arrays, each array (of objects) being a unique 'group'
+ _groups: { XnoGroupX: [] },
+
+=====*/
+
+ // errorImg: Url
+ // Path to the image used when a 404 is encountered
+ errorImg: dojo.moduleUrl("dojox.image","resources/images/warning.png"),
+
+ templateString: dojo.cache("dojox.image", "resources/Lightbox.html", "<div class=\"dojoxLightbox\" dojoAttachPoint=\"containerNode\">\r\n\t<div style=\"position:relative\">\r\n\t\t<div dojoAttachPoint=\"imageContainer\" class=\"dojoxLightboxContainer\" dojoAttachEvent=\"onclick: _onImageClick\">\r\n\t\t\t<img dojoAttachPoint=\"imgNode\" src=\"${imgUrl}\" class=\"dojoxLightboxImage\" alt=\"${title}\">\r\n\t\t\t<div class=\"dojoxLightboxFooter\" dojoAttachPoint=\"titleNode\">\r\n\t\t\t\t<div class=\"dijitInline LightboxClose\" dojoAttachPoint=\"closeButtonNode\"></div>\r\n\t\t\t\t<div class=\"dijitInline LightboxNext\" dojoAttachPoint=\"nextButtonNode\"></div>\t\r\n\t\t\t\t<div class=\"dijitInline LightboxPrev\" dojoAttachPoint=\"prevButtonNode\"></div>\r\n\t\t\t\t<div class=\"dojoxLightboxText\" dojoAttachPoint=\"titleTextNode\"><span dojoAttachPoint=\"textNode\">${title}</span><span dojoAttachPoint=\"groupCount\" class=\"dojoxLightboxGroupText\"></span></div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n"),
+ constructor: function(args){
+ this._groups = this._groups || (args && args._groups) || { XnoGroupX:[] };
+ },
+
+ startup: function(){
+ // summary: Add some extra event handlers, and startup our superclass.
+ //
+ // returns: dijit._Widget
+ // Perhaps the only `dijit._Widget` that returns itself to allow
+ // 'chaining' or var referencing with .startup()
+
+ 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;
+ },
+
+ show: function(/* Object */groupData){
+ // 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
+ //
+ // groupData: Object
+ // needs href and title attributes. the values for this image.
+ //
+ //
+ 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);
+ },
+
+ _ready: function(src){
+ // summary: A function to trigger all 'real' showing of some src
+
+ 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;
+ },
+
+ _nextImage: function(){
+ // summary: Load next image in group
+ if(!this.inGroup){ return; }
+ if(this._index + 1 < this.inGroup.length){
+ this._index++;
+ }else{
+ this._index = 0;
+ }
+ this._loadImage();
+ },
+
+ _prevImage: function(){
+ // summary: Load previous image in group
+ if(this.inGroup){
+ if(this._index == 0){
+ this._index = this.inGroup.length - 1;
+ }else{
+ this._index--;
+ }
+ this._loadImage();
+ }
+ },
+
+ _loadImage: function(){
+ // summary: Do the prep work before we can show another image
+ this._loadingAnim.play(1);
+ },
+
+ _prepNodes: function(){
+ // summary: A localized hook to accompany _loadImage
+ 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
+ });
+ }
+
+ },
+
+ _calcTitleSize: function(){
+ var sizes = dojo.map(dojo.query("> *", this.titleNode).position(), function(s){ return s.h; });
+ return { h: Math.max.apply(Math, sizes) };
+ },
+
+ resizeTo: function(/* Object */size, forceTitle){
+ // summary: Resize our dialog container, and fire _showImage
+
+ 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);
+ },
+
+ _scaleToFit: function(/* Object */size){
+ // summary: resize an image to fit within the bounds of the viewport
+ // size: Object
+ // The 'size' object passed around for this image
+
+ 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
+ },
+
+ _setImageSize: function(size){
+ // summary: Reset the image size to some actual size.
+ var s = this.imgNode;
+ s.height = size.h;
+ s.width = size.w;
+ },
+
+ // clobber inherited function, it is useless.
+ _size: function(){},
+
+ _position: function(/* Event */e){
+ // summary: we want to know the viewport size any time it changes
+ 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
+ });
+ }
+ }
+ }
+ },
+
+ _showImage: function(){
+ // summary: Fade in the image, and fire showNav
+ this._showImageAnim.play(1);
+ },
+
+ _showNav: function(){
+ // summary: Fade in the footer, and setup our connections.
+ 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);
+ }
+ },
+
+ hide: function(){
+ // summary: Hide the Master Lightbox
+ 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;
+ },
+
+ addImage: function(child, group){
+ // summary: Add an image to this Master Lightbox
+ //
+ // child: Object
+ // The image information to add.
+ // href: String - link to image (required)
+ // title: String - title to display
+ //
+ // group: String?
+ // attach to group of similar tag or null for individual image instance
+ 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); }
+ },
+
+ removeImage: function(/* Widget */child){
+ // summary: Remove an image instance from this LightboxDialog.
+ // child: 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.
+
+ 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;
+ });
+ },
+
+ removeGroup: function(group){
+ // summary: Remove all images in a passed group
+ if(this._groups[group]){ this._groups[group] = []; }
+ },
+
+ _handleKey: function(/* Event */e){
+ // summary: Handle keyboard navigation internally
+ 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;
+ }
+ },
+
+ _makeAnims: function(){
+ // summary: make and cleanup animation and animation connections
+
+ 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 });
+ },
+
+ onClick: function(groupData){
+ // summary: a stub function, called with the currently displayed image as the only argument
+ },
+
+ _onImageClick: function(e){
+ 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);
+ }
+ }
+ }
+});
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/LightboxNano.js b/js/dojo-1.6/dojox/image/LightboxNano.js new file mode 100644 index 0000000..509f3e6 --- /dev/null +++ b/js/dojo-1.6/dojox/image/LightboxNano.js @@ -0,0 +1,321 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image.LightboxNano"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.LightboxNano"] = true;
+dojo.provide("dojox.image.LightboxNano");
+dojo.require("dojo.fx");
+
+
+
+ var abs = "absolute",
+ vis = "visibility",
+ getViewport = function(){
+ // summary: Returns the dimensions and scroll position of the viewable area of a browser window
+ var scrollRoot = (dojo.doc.compatMode == "BackCompat") ? dojo.body() : dojo.doc.documentElement,
+ scroll = dojo._docScroll();
+ return { w: scrollRoot.clientWidth, h: scrollRoot.clientHeight, l: scroll.x, t: scroll.y };
+ }
+ ;
+
+ dojo.declare("dojox.image.LightboxNano", null, {
+ // summary:
+ // A simple "nano" version of the lightbox.
+ //
+ // description:
+ // Very lightweight lightbox which only displays a larger image. There is
+ // no support for a caption or description. The lightbox can be closed by
+ // clicking any where or pressing any key. This widget is intended to be
+ // used on <a> and <img> tags. Upon creation, if the domNode is <img> tag,
+ // then it is wrapped in an <a> tag, then a <div class="enlarge"> is placed
+ // inside the <a> and can be styled to display an icon that the original
+ // can be enlarged.
+ //
+ // example:
+ // | <a dojoType="dojox.image.LightboxNano" href="/path/to/largeimage.jpg"><img src="/path/to/thumbnail.jpg"></a>
+ //
+ // example:
+ // | <img dojoType="dojox.image.LightboxNano" src="/path/to/thumbnail.jpg" href="/path/to/largeimage.jpg">
+
+ // href: string
+ // URL to the large image to show in the lightbox.
+ href: "",
+
+ // duration: int
+ // The delay in milliseconds of the LightboxNano open and close animation.
+ duration: 500,
+
+ // preloadDelay: int
+ // The delay in milliseconds after the LightboxNano is created before preloading the larger image.
+ preloadDelay: 5000,
+
+ constructor: function(/*Object?*/p, /*DomNode?*/n){
+ // summary: Initializes the DOM node and connect onload event
+ var _this = this;
+
+ dojo.mixin(_this, p);
+ n = _this._node = dojo.byId(n);
+
+ // if we have a origin node, then prepare it to show the LightboxNano
+ if(n){
+ if(!/a/i.test(n.tagName)){
+ var a = dojo.create("a", { href: _this.href, "class": n.className }, n, "after");
+ n.className = "";
+ a.appendChild(n);
+ n = a;
+ }
+
+ dojo.style(n, "position", "relative");
+ _this._createDiv("dojoxEnlarge", n);
+ dojo.setSelectable(n, false);
+ _this._onClickEvt = dojo.connect(n, "onclick", _this, "_load");
+ }
+
+ if(_this.href){
+ setTimeout(function(){
+ (new Image()).src = _this.href;
+ _this._hideLoading();
+ }, _this.preloadDelay);
+ }
+ },
+
+ destroy: function(){
+ // summary: Destroys the LightboxNano and it's DOM node
+ var a = this._connects || [];
+ a.push(this._onClickEvt);
+ dojo.forEach(a, dojo.disconnect);
+ dojo.destroy(this._node);
+ },
+
+ _createDiv: function(/*String*/cssClass, /*DomNode*/refNode, /*boolean*/display){
+ // summary: Creates a div for the enlarge icon and loading indicator layers
+ return dojo.create("div", { // DomNode
+ "class": cssClass,
+ style: {
+ position: abs,
+ display: display ? "" : "none"
+ }
+ }, refNode);
+ },
+
+ _load: function(/*Event*/e){
+ // summary: Creates the large image and begins to show it
+ var _this = this;
+
+ e && dojo.stopEvent(e);
+
+ if(!_this._loading){
+ _this._loading = true;
+ _this._reset();
+
+ var i = _this._img = dojo.create("img", {
+ style: {
+ visibility: "hidden",
+ cursor: "pointer",
+ position: abs,
+ top: 0,
+ left: 0,
+ zIndex: 9999999
+ }
+ }, dojo.body()),
+ ln = _this._loadingNode,
+ n = dojo.query("img", _this._node)[0] || _this._node,
+ a = dojo.position(n, true),
+ c = dojo.contentBox(n),
+ b = dojo._getBorderExtents(n)
+ ;
+
+ if(ln == null){
+ _this._loadingNode = ln = _this._createDiv("dojoxLoading", _this._node, true);
+ var l = dojo.marginBox(ln);
+ dojo.style(ln, {
+ left: parseInt((c.w - l.w) / 2) + "px",
+ top: parseInt((c.h - l.h) / 2) + "px"
+ });
+ }
+
+ c.x = a.x - 10 + b.l;
+ c.y = a.y - 10 + b.t;
+ _this._start = c;
+
+ _this._connects = [dojo.connect(i, "onload", _this, "_show")];
+
+ i.src = _this.href;
+ }
+ },
+
+ _hideLoading: function(){
+ // summary: Hides the animated loading indicator
+ if(this._loadingNode){
+ dojo.style(this._loadingNode, "display", "none");
+ }
+ this._loadingNode = false;
+ },
+
+ _show: function(){
+ // summary: The image is now loaded, calculate size and display
+ var _this = this,
+ vp = getViewport(),
+ w = _this._img.width,
+ h = _this._img.height,
+ vpw = parseInt((vp.w - 20) * 0.9),
+ vph = parseInt((vp.h - 20) * 0.9),
+ dd = dojo.doc,
+ bg = _this._bg = dojo.create("div", {
+ style: {
+ backgroundColor: "#000",
+ opacity: 0.0,
+ position: abs,
+ zIndex: 9999998
+ }
+ }, dojo.body()),
+ ln = _this._loadingNode
+ ;
+
+ if(_this._loadingNode){
+ _this._hideLoading();
+ }
+ dojo.style(_this._img, {
+ border: "10px solid #fff",
+ visibility: "visible"
+ });
+ dojo.style(_this._node, vis, "hidden");
+
+ _this._loading = false;
+
+ _this._connects = _this._connects.concat([
+ dojo.connect(dd, "onmousedown", _this, "_hide"),
+ dojo.connect(dd, "onkeypress", _this, "_key"),
+ dojo.connect(window, "onresize", _this, "_sizeBg")
+ ]);
+
+ if(w > vpw){
+ h = h * vpw / w;
+ w = vpw;
+ }
+ if(h > vph){
+ w = w * vph / h;
+ h = vph;
+ }
+
+ _this._end = {
+ x: (vp.w - 20 - w) / 2 + vp.l,
+ y: (vp.h - 20 - h) / 2 + vp.t,
+ w: w,
+ h: h
+ };
+
+ _this._sizeBg();
+
+ dojo.fx.combine([
+ _this._anim(_this._img, _this._coords(_this._start, _this._end)),
+ _this._anim(bg, { opacity: 0.5 })
+ ]).play();
+ },
+
+ _sizeBg: function(){
+ // summary: Resize the background to fill the page
+ var dd = dojo.doc.documentElement;
+ dojo.style(this._bg, {
+ top: 0,
+ left: 0,
+ width: dd.scrollWidth + "px",
+ height: dd.scrollHeight + "px"
+ });
+ },
+
+ _key: function(/*Event*/e){
+ // summary: A key was pressed, so hide the lightbox
+ dojo.stopEvent(e);
+ this._hide();
+ },
+
+ _coords: function(/*Object*/s, /*Object*/e){
+ // summary: Returns animation parameters with the start and end coords
+ return { // Object
+ left: { start: s.x, end: e.x },
+ top: { start: s.y, end: e.y },
+ width: { start: s.w, end: e.w },
+ height: { start: s.h, end: e.h }
+ };
+ },
+
+ _hide: function(){
+ // summary: Closes the lightbox
+ var _this = this;
+ dojo.forEach(_this._connects, dojo.disconnect);
+ _this._connects = [];
+ dojo.fx.combine([
+ _this._anim(_this._img, _this._coords(_this._end, _this._start), "_reset"),
+ _this._anim(_this._bg, {opacity:0})
+ ]).play();
+ },
+
+ _reset: function(){
+ // summary: Destroys the lightbox
+ dojo.style(this._node, vis, "visible");
+ dojo.destroy(this._img);
+ dojo.destroy(this._bg);
+ this._img = this._bg = null;
+ this._node.focus();
+ },
+
+ _anim: function(/*DomNode*/node, /*Object*/args, /*Function*/onEnd){
+ // summary: Creates the lightbox open/close and background fadein/out animations
+ return dojo.animateProperty({ // dojo.Animation
+ node: node,
+ duration: this.duration,
+ properties: args,
+ onEnd: onEnd ? dojo.hitch(this, onEnd) : null
+ });
+ },
+
+ show: function(/*Object?*/args){
+ // summary:
+ // Shows this LightboxNano programatically. Allows passing a new href and
+ // a programatic origin.
+ //
+ // args: Object?
+ // An object with optional members of `href` and `origin`.
+ // `origin` can be be a String|Id of a DomNode to use when
+ // animating the openeing of the image (the 'box' effect starts
+ // from this origin point. eg: { origin: e.target })
+ // If there's no origin, it will use the center of the viewport.
+ // The `href` member is a string URL for the image to be
+ // displayed. Omiting either of these members will revert to
+ // the default href (which could be absent in some cases) and
+ // the original srcNodeRef for the widget.
+ args = args || {};
+ this.href = args.href || this.href;
+
+ var n = dojo.byId(args.origin),
+ vp = getViewport();
+
+ // if we don't have a valid origin node, then create one as a reference
+ // that is centered in the viewport
+ this._node = n || dojo.create("div", {
+ style: {
+ position: abs,
+ width: 0,
+ hieght: 0,
+ left: (vp.l + (vp.w / 2)) + "px",
+ top: (vp.t + (vp.h / 2)) + "px"
+ }
+ }, dojo.body())
+ ;
+
+ this._load();
+
+ // if we don't have a valid origin node, then destroy the centered reference
+ // node since load() has already been called and it's not needed anymore.
+ if(!n){
+ dojo.destroy(this._node);
+ }
+ }
+ });
+
+}
diff --git a/js/dojo-1.6/dojox/image/LightboxNano.xd.js b/js/dojo-1.6/dojox/image/LightboxNano.xd.js new file mode 100644 index 0000000..e1e3c43 --- /dev/null +++ b/js/dojo-1.6/dojox/image/LightboxNano.xd.js @@ -0,0 +1,326 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image.LightboxNano"],
+["require", "dojo.fx"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image.LightboxNano"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.LightboxNano"] = true;
+dojo.provide("dojox.image.LightboxNano");
+dojo.require("dojo.fx");
+
+
+
+ var abs = "absolute",
+ vis = "visibility",
+ getViewport = function(){
+ // summary: Returns the dimensions and scroll position of the viewable area of a browser window
+ var scrollRoot = (dojo.doc.compatMode == "BackCompat") ? dojo.body() : dojo.doc.documentElement,
+ scroll = dojo._docScroll();
+ return { w: scrollRoot.clientWidth, h: scrollRoot.clientHeight, l: scroll.x, t: scroll.y };
+ }
+ ;
+
+ dojo.declare("dojox.image.LightboxNano", null, {
+ // summary:
+ // A simple "nano" version of the lightbox.
+ //
+ // description:
+ // Very lightweight lightbox which only displays a larger image. There is
+ // no support for a caption or description. The lightbox can be closed by
+ // clicking any where or pressing any key. This widget is intended to be
+ // used on <a> and <img> tags. Upon creation, if the domNode is <img> tag,
+ // then it is wrapped in an <a> tag, then a <div class="enlarge"> is placed
+ // inside the <a> and can be styled to display an icon that the original
+ // can be enlarged.
+ //
+ // example:
+ // | <a dojoType="dojox.image.LightboxNano" href="/path/to/largeimage.jpg"><img src="/path/to/thumbnail.jpg"></a>
+ //
+ // example:
+ // | <img dojoType="dojox.image.LightboxNano" src="/path/to/thumbnail.jpg" href="/path/to/largeimage.jpg">
+
+ // href: string
+ // URL to the large image to show in the lightbox.
+ href: "",
+
+ // duration: int
+ // The delay in milliseconds of the LightboxNano open and close animation.
+ duration: 500,
+
+ // preloadDelay: int
+ // The delay in milliseconds after the LightboxNano is created before preloading the larger image.
+ preloadDelay: 5000,
+
+ constructor: function(/*Object?*/p, /*DomNode?*/n){
+ // summary: Initializes the DOM node and connect onload event
+ var _this = this;
+
+ dojo.mixin(_this, p);
+ n = _this._node = dojo.byId(n);
+
+ // if we have a origin node, then prepare it to show the LightboxNano
+ if(n){
+ if(!/a/i.test(n.tagName)){
+ var a = dojo.create("a", { href: _this.href, "class": n.className }, n, "after");
+ n.className = "";
+ a.appendChild(n);
+ n = a;
+ }
+
+ dojo.style(n, "position", "relative");
+ _this._createDiv("dojoxEnlarge", n);
+ dojo.setSelectable(n, false);
+ _this._onClickEvt = dojo.connect(n, "onclick", _this, "_load");
+ }
+
+ if(_this.href){
+ setTimeout(function(){
+ (new Image()).src = _this.href;
+ _this._hideLoading();
+ }, _this.preloadDelay);
+ }
+ },
+
+ destroy: function(){
+ // summary: Destroys the LightboxNano and it's DOM node
+ var a = this._connects || [];
+ a.push(this._onClickEvt);
+ dojo.forEach(a, dojo.disconnect);
+ dojo.destroy(this._node);
+ },
+
+ _createDiv: function(/*String*/cssClass, /*DomNode*/refNode, /*boolean*/display){
+ // summary: Creates a div for the enlarge icon and loading indicator layers
+ return dojo.create("div", { // DomNode
+ "class": cssClass,
+ style: {
+ position: abs,
+ display: display ? "" : "none"
+ }
+ }, refNode);
+ },
+
+ _load: function(/*Event*/e){
+ // summary: Creates the large image and begins to show it
+ var _this = this;
+
+ e && dojo.stopEvent(e);
+
+ if(!_this._loading){
+ _this._loading = true;
+ _this._reset();
+
+ var i = _this._img = dojo.create("img", {
+ style: {
+ visibility: "hidden",
+ cursor: "pointer",
+ position: abs,
+ top: 0,
+ left: 0,
+ zIndex: 9999999
+ }
+ }, dojo.body()),
+ ln = _this._loadingNode,
+ n = dojo.query("img", _this._node)[0] || _this._node,
+ a = dojo.position(n, true),
+ c = dojo.contentBox(n),
+ b = dojo._getBorderExtents(n)
+ ;
+
+ if(ln == null){
+ _this._loadingNode = ln = _this._createDiv("dojoxLoading", _this._node, true);
+ var l = dojo.marginBox(ln);
+ dojo.style(ln, {
+ left: parseInt((c.w - l.w) / 2) + "px",
+ top: parseInt((c.h - l.h) / 2) + "px"
+ });
+ }
+
+ c.x = a.x - 10 + b.l;
+ c.y = a.y - 10 + b.t;
+ _this._start = c;
+
+ _this._connects = [dojo.connect(i, "onload", _this, "_show")];
+
+ i.src = _this.href;
+ }
+ },
+
+ _hideLoading: function(){
+ // summary: Hides the animated loading indicator
+ if(this._loadingNode){
+ dojo.style(this._loadingNode, "display", "none");
+ }
+ this._loadingNode = false;
+ },
+
+ _show: function(){
+ // summary: The image is now loaded, calculate size and display
+ var _this = this,
+ vp = getViewport(),
+ w = _this._img.width,
+ h = _this._img.height,
+ vpw = parseInt((vp.w - 20) * 0.9),
+ vph = parseInt((vp.h - 20) * 0.9),
+ dd = dojo.doc,
+ bg = _this._bg = dojo.create("div", {
+ style: {
+ backgroundColor: "#000",
+ opacity: 0.0,
+ position: abs,
+ zIndex: 9999998
+ }
+ }, dojo.body()),
+ ln = _this._loadingNode
+ ;
+
+ if(_this._loadingNode){
+ _this._hideLoading();
+ }
+ dojo.style(_this._img, {
+ border: "10px solid #fff",
+ visibility: "visible"
+ });
+ dojo.style(_this._node, vis, "hidden");
+
+ _this._loading = false;
+
+ _this._connects = _this._connects.concat([
+ dojo.connect(dd, "onmousedown", _this, "_hide"),
+ dojo.connect(dd, "onkeypress", _this, "_key"),
+ dojo.connect(window, "onresize", _this, "_sizeBg")
+ ]);
+
+ if(w > vpw){
+ h = h * vpw / w;
+ w = vpw;
+ }
+ if(h > vph){
+ w = w * vph / h;
+ h = vph;
+ }
+
+ _this._end = {
+ x: (vp.w - 20 - w) / 2 + vp.l,
+ y: (vp.h - 20 - h) / 2 + vp.t,
+ w: w,
+ h: h
+ };
+
+ _this._sizeBg();
+
+ dojo.fx.combine([
+ _this._anim(_this._img, _this._coords(_this._start, _this._end)),
+ _this._anim(bg, { opacity: 0.5 })
+ ]).play();
+ },
+
+ _sizeBg: function(){
+ // summary: Resize the background to fill the page
+ var dd = dojo.doc.documentElement;
+ dojo.style(this._bg, {
+ top: 0,
+ left: 0,
+ width: dd.scrollWidth + "px",
+ height: dd.scrollHeight + "px"
+ });
+ },
+
+ _key: function(/*Event*/e){
+ // summary: A key was pressed, so hide the lightbox
+ dojo.stopEvent(e);
+ this._hide();
+ },
+
+ _coords: function(/*Object*/s, /*Object*/e){
+ // summary: Returns animation parameters with the start and end coords
+ return { // Object
+ left: { start: s.x, end: e.x },
+ top: { start: s.y, end: e.y },
+ width: { start: s.w, end: e.w },
+ height: { start: s.h, end: e.h }
+ };
+ },
+
+ _hide: function(){
+ // summary: Closes the lightbox
+ var _this = this;
+ dojo.forEach(_this._connects, dojo.disconnect);
+ _this._connects = [];
+ dojo.fx.combine([
+ _this._anim(_this._img, _this._coords(_this._end, _this._start), "_reset"),
+ _this._anim(_this._bg, {opacity:0})
+ ]).play();
+ },
+
+ _reset: function(){
+ // summary: Destroys the lightbox
+ dojo.style(this._node, vis, "visible");
+ dojo.destroy(this._img);
+ dojo.destroy(this._bg);
+ this._img = this._bg = null;
+ this._node.focus();
+ },
+
+ _anim: function(/*DomNode*/node, /*Object*/args, /*Function*/onEnd){
+ // summary: Creates the lightbox open/close and background fadein/out animations
+ return dojo.animateProperty({ // dojo.Animation
+ node: node,
+ duration: this.duration,
+ properties: args,
+ onEnd: onEnd ? dojo.hitch(this, onEnd) : null
+ });
+ },
+
+ show: function(/*Object?*/args){
+ // summary:
+ // Shows this LightboxNano programatically. Allows passing a new href and
+ // a programatic origin.
+ //
+ // args: Object?
+ // An object with optional members of `href` and `origin`.
+ // `origin` can be be a String|Id of a DomNode to use when
+ // animating the openeing of the image (the 'box' effect starts
+ // from this origin point. eg: { origin: e.target })
+ // If there's no origin, it will use the center of the viewport.
+ // The `href` member is a string URL for the image to be
+ // displayed. Omiting either of these members will revert to
+ // the default href (which could be absent in some cases) and
+ // the original srcNodeRef for the widget.
+ args = args || {};
+ this.href = args.href || this.href;
+
+ var n = dojo.byId(args.origin),
+ vp = getViewport();
+
+ // if we don't have a valid origin node, then create one as a reference
+ // that is centered in the viewport
+ this._node = n || dojo.create("div", {
+ style: {
+ position: abs,
+ width: 0,
+ hieght: 0,
+ left: (vp.l + (vp.w / 2)) + "px",
+ top: (vp.t + (vp.h / 2)) + "px"
+ }
+ }, dojo.body())
+ ;
+
+ this._load();
+
+ // if we don't have a valid origin node, then destroy the centered reference
+ // node since load() has already been called and it's not needed anymore.
+ if(!n){
+ dojo.destroy(this._node);
+ }
+ }
+ });
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/Magnifier.js b/js/dojo-1.6/dojox/image/Magnifier.js new file mode 100644 index 0000000..dc6c506 --- /dev/null +++ b/js/dojo-1.6/dojox/image/Magnifier.js @@ -0,0 +1,84 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image.Magnifier"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Magnifier"] = true;
+dojo.provide("dojox.image.Magnifier");
+
+dojo.require("dojox.gfx");
+dojo.require("dojox.image.MagnifierLite");
+
+dojo.declare("dojox.image.Magnifier",
+ dojox.image.MagnifierLite,{
+ // summary:
+ // Adds magnification on a portion of an image element, using `dojox.gfx`
+ //
+ // description:
+ // An unobtrusive way to add an unstyled overlay
+ // above the srcNode image element. The overlay/glass is a
+ // scaled version of the src image (so larger images sized down
+ // are clearer).
+ //
+ // over-ride the _createGlass method to create your custom surface,
+ // being sure to create an img node on that surface.
+
+ _createGlass: function(){
+ // summary: create the glassNode, and an img on a dojox.gfx surface
+
+ // images are hard to make into workable templates, so just add outer overlay
+ // and skip using dijit._Templated
+ this.glassNode = dojo.create('div', {
+ style:{
+ height: this.glassSize + "px",
+ width: this.glassSize + "px"
+ },
+ "className":"glassNode"
+ }, dojo.body());
+ this.surfaceNode = dojo.create('div', null, this.glassNode);
+
+ this.surface = dojox.gfx.createSurface(this.surfaceNode, this.glassSize, this.glassSize);
+ this.img = this.surface.createImage({
+ src: this.domNode.src,
+ width: this._zoomSize.w,
+ height: this._zoomSize.h
+ });
+
+ },
+
+ _placeGlass: function(e){
+ // summary: position the overlay centered under the cursor
+ var x = e.pageX - 2,
+ y = e.pageY - 2,
+ xMax = this.offset.x + this.offset.w + 2,
+ yMax = this.offset.y + this.offset.h + 2
+ ;
+
+ // with svg, our mouseout connection to the image surface doesn't
+ // fire, so we'r have to manually calculate offsets
+ if(x < this.offset.x || y < this.offset.y || x > xMax || y > yMax){
+ this._hideGlass();
+ }else{
+ this.inherited(arguments);
+ }
+ },
+
+ _setImage: function(e){
+ // summary: set the image's offset in the clipping window relative to the mouse position
+
+ var xOff = (e.pageX - this.offset.l) / this.offset.w,
+ yOff = (e.pageY - this.offset.t) / this.offset.h,
+ x = (this._zoomSize.w * xOff * -1)+(this.glassSize*xOff),
+ y = (this._zoomSize.h * yOff * -1)+(this.glassSize*yOff)
+ ;
+ // set the image offset
+ this.img.setShape({ x: x, y: y });
+
+ }
+
+});
+
+}
diff --git a/js/dojo-1.6/dojox/image/Magnifier.xd.js b/js/dojo-1.6/dojox/image/Magnifier.xd.js new file mode 100644 index 0000000..7899658 --- /dev/null +++ b/js/dojo-1.6/dojox/image/Magnifier.xd.js @@ -0,0 +1,90 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image.Magnifier"],
+["require", "dojox.gfx"],
+["require", "dojox.image.MagnifierLite"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image.Magnifier"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.Magnifier"] = true;
+dojo.provide("dojox.image.Magnifier");
+
+dojo.require("dojox.gfx");
+dojo.require("dojox.image.MagnifierLite");
+
+dojo.declare("dojox.image.Magnifier",
+ dojox.image.MagnifierLite,{
+ // summary:
+ // Adds magnification on a portion of an image element, using `dojox.gfx`
+ //
+ // description:
+ // An unobtrusive way to add an unstyled overlay
+ // above the srcNode image element. The overlay/glass is a
+ // scaled version of the src image (so larger images sized down
+ // are clearer).
+ //
+ // over-ride the _createGlass method to create your custom surface,
+ // being sure to create an img node on that surface.
+
+ _createGlass: function(){
+ // summary: create the glassNode, and an img on a dojox.gfx surface
+
+ // images are hard to make into workable templates, so just add outer overlay
+ // and skip using dijit._Templated
+ this.glassNode = dojo.create('div', {
+ style:{
+ height: this.glassSize + "px",
+ width: this.glassSize + "px"
+ },
+ "className":"glassNode"
+ }, dojo.body());
+ this.surfaceNode = dojo.create('div', null, this.glassNode);
+
+ this.surface = dojox.gfx.createSurface(this.surfaceNode, this.glassSize, this.glassSize);
+ this.img = this.surface.createImage({
+ src: this.domNode.src,
+ width: this._zoomSize.w,
+ height: this._zoomSize.h
+ });
+
+ },
+
+ _placeGlass: function(e){
+ // summary: position the overlay centered under the cursor
+ var x = e.pageX - 2,
+ y = e.pageY - 2,
+ xMax = this.offset.x + this.offset.w + 2,
+ yMax = this.offset.y + this.offset.h + 2
+ ;
+
+ // with svg, our mouseout connection to the image surface doesn't
+ // fire, so we'r have to manually calculate offsets
+ if(x < this.offset.x || y < this.offset.y || x > xMax || y > yMax){
+ this._hideGlass();
+ }else{
+ this.inherited(arguments);
+ }
+ },
+
+ _setImage: function(e){
+ // summary: set the image's offset in the clipping window relative to the mouse position
+
+ var xOff = (e.pageX - this.offset.l) / this.offset.w,
+ yOff = (e.pageY - this.offset.t) / this.offset.h,
+ x = (this._zoomSize.w * xOff * -1)+(this.glassSize*xOff),
+ y = (this._zoomSize.h * yOff * -1)+(this.glassSize*yOff)
+ ;
+ // set the image offset
+ this.img.setShape({ x: x, y: y });
+
+ }
+
+});
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/MagnifierLite.js b/js/dojo-1.6/dojox/image/MagnifierLite.js new file mode 100644 index 0000000..c1b4d84 --- /dev/null +++ b/js/dojo-1.6/dojox/image/MagnifierLite.js @@ -0,0 +1,141 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image.MagnifierLite"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.MagnifierLite"] = true;
+dojo.provide("dojox.image.MagnifierLite");
+dojo.experimental("dojox.image.MagnifierLite");
+
+dojo.require("dijit._Widget");
+
+dojo.declare("dojox.image.MagnifierLite", dijit._Widget,
+ {
+ // summary: Adds magnification on a portion of an image element
+ //
+ // description: An unobtrusive way to add an unstyled overlay
+ // above the srcNode image element. The overlay/glass is a
+ // scaled version of the src image (so larger images sized down
+ // are clearer).
+ //
+ // The logic behind requiring the src image to be large is
+ // "it's going to be downloaded, anyway" so this method avoids
+ // having to make thumbnails and 2 http requests among other things.
+ //
+ // glassSize: Int
+ // the width and height of the bounding box
+ glassSize: 125,
+
+ // scale: Decimal
+ // the multiplier of the Mangification.
+ scale: 6,
+
+ postCreate: function(){
+ this.inherited(arguments);
+
+ // images are hard to make into workable templates, so just add outer overlay
+ // and skip using dijit._Templated
+ this._adjustScale();
+ this._createGlass();
+
+ this.connect(this.domNode,"onmouseenter","_showGlass");
+ this.connect(this.glassNode,"onmousemove","_placeGlass");
+ this.connect(this.img,"onmouseout","_hideGlass");
+
+ // when position of domNode changes, _adjustScale needs to run.
+ // window.resize isn't it always, FIXME:
+ this.connect(window,"onresize","_adjustScale");
+
+ },
+
+ _createGlass: function(){
+ // summary: make img and glassNode elements as children of the body
+
+ var node = this.glassNode = dojo.create('div', {
+ style:{
+ height: this.glassSize + "px",
+ width: this.glassSize + "px"
+ },
+ className:"glassNode"
+ }, dojo.body());
+
+ this.surfaceNode = node.appendChild(dojo.create('div'));
+
+ this.img = dojo.place(dojo.clone(this.domNode), node);
+ // float the image around inside the .glassNode
+ dojo.style(this.img, {
+ position: "relative",
+ top: 0, left: 0,
+ width: this._zoomSize.w + "px",
+ height: this._zoomSize.h + "px"
+ });
+
+ },
+
+ _adjustScale: function(){
+ // summary: update the calculations should this.scale change
+
+ this.offset = dojo.coords(this.domNode, true);
+ this._imageSize = { w: this.offset.w, h:this.offset.h };
+ this._zoomSize = {
+ w: this._imageSize.w * this.scale,
+ h: this._imageSize.h * this.scale
+ };
+ },
+
+ _showGlass: function(e){
+ // summary: show the overlay
+ this._placeGlass(e);
+ dojo.style(this.glassNode, {
+ visibility: "visible",
+ display:""
+ });
+
+ },
+
+ _hideGlass: function(e){
+ // summary: hide the overlay
+ dojo.style(this.glassNode, {
+ visibility: "hidden",
+ display:"none"
+ });
+ },
+
+ _placeGlass: function(e){
+ // summary: position the overlay centered under the cursor
+
+ this._setImage(e);
+ var sub = Math.floor(this.glassSize / 2);
+ dojo.style(this.glassNode,{
+ top: Math.floor(e.pageY - sub) + "px",
+ left:Math.floor(e.pageX - sub) + "px"
+ });
+
+ },
+
+ _setImage: function(e){
+ // summary: set the image's offset in the clipping window relative to the mouse position
+
+ var xOff = (e.pageX - this.offset.l) / this.offset.w,
+ yOff = (e.pageY - this.offset.t) / this.offset.h,
+ x = (this._zoomSize.w * xOff * -1) + (this.glassSize * xOff),
+ y = (this._zoomSize.h * yOff * -1) + (this.glassSize * yOff);
+
+ dojo.style(this.img, {
+ top: y + "px",
+ left: x + "px"
+ });
+
+ },
+
+ destroy: function(finalize){
+ dojo.destroy(this.glassNode);
+ this.inherited(arguments);
+ }
+
+});
+
+}
diff --git a/js/dojo-1.6/dojox/image/MagnifierLite.xd.js b/js/dojo-1.6/dojox/image/MagnifierLite.xd.js new file mode 100644 index 0000000..ba4a414 --- /dev/null +++ b/js/dojo-1.6/dojox/image/MagnifierLite.xd.js @@ -0,0 +1,146 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image.MagnifierLite"],
+["require", "dijit._Widget"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image.MagnifierLite"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.MagnifierLite"] = true;
+dojo.provide("dojox.image.MagnifierLite");
+dojo.experimental("dojox.image.MagnifierLite");
+
+dojo.require("dijit._Widget");
+
+dojo.declare("dojox.image.MagnifierLite", dijit._Widget,
+ {
+ // summary: Adds magnification on a portion of an image element
+ //
+ // description: An unobtrusive way to add an unstyled overlay
+ // above the srcNode image element. The overlay/glass is a
+ // scaled version of the src image (so larger images sized down
+ // are clearer).
+ //
+ // The logic behind requiring the src image to be large is
+ // "it's going to be downloaded, anyway" so this method avoids
+ // having to make thumbnails and 2 http requests among other things.
+ //
+ // glassSize: Int
+ // the width and height of the bounding box
+ glassSize: 125,
+
+ // scale: Decimal
+ // the multiplier of the Mangification.
+ scale: 6,
+
+ postCreate: function(){
+ this.inherited(arguments);
+
+ // images are hard to make into workable templates, so just add outer overlay
+ // and skip using dijit._Templated
+ this._adjustScale();
+ this._createGlass();
+
+ this.connect(this.domNode,"onmouseenter","_showGlass");
+ this.connect(this.glassNode,"onmousemove","_placeGlass");
+ this.connect(this.img,"onmouseout","_hideGlass");
+
+ // when position of domNode changes, _adjustScale needs to run.
+ // window.resize isn't it always, FIXME:
+ this.connect(window,"onresize","_adjustScale");
+
+ },
+
+ _createGlass: function(){
+ // summary: make img and glassNode elements as children of the body
+
+ var node = this.glassNode = dojo.create('div', {
+ style:{
+ height: this.glassSize + "px",
+ width: this.glassSize + "px"
+ },
+ className:"glassNode"
+ }, dojo.body());
+
+ this.surfaceNode = node.appendChild(dojo.create('div'));
+
+ this.img = dojo.place(dojo.clone(this.domNode), node);
+ // float the image around inside the .glassNode
+ dojo.style(this.img, {
+ position: "relative",
+ top: 0, left: 0,
+ width: this._zoomSize.w + "px",
+ height: this._zoomSize.h + "px"
+ });
+
+ },
+
+ _adjustScale: function(){
+ // summary: update the calculations should this.scale change
+
+ this.offset = dojo.coords(this.domNode, true);
+ this._imageSize = { w: this.offset.w, h:this.offset.h };
+ this._zoomSize = {
+ w: this._imageSize.w * this.scale,
+ h: this._imageSize.h * this.scale
+ };
+ },
+
+ _showGlass: function(e){
+ // summary: show the overlay
+ this._placeGlass(e);
+ dojo.style(this.glassNode, {
+ visibility: "visible",
+ display:""
+ });
+
+ },
+
+ _hideGlass: function(e){
+ // summary: hide the overlay
+ dojo.style(this.glassNode, {
+ visibility: "hidden",
+ display:"none"
+ });
+ },
+
+ _placeGlass: function(e){
+ // summary: position the overlay centered under the cursor
+
+ this._setImage(e);
+ var sub = Math.floor(this.glassSize / 2);
+ dojo.style(this.glassNode,{
+ top: Math.floor(e.pageY - sub) + "px",
+ left:Math.floor(e.pageX - sub) + "px"
+ });
+
+ },
+
+ _setImage: function(e){
+ // summary: set the image's offset in the clipping window relative to the mouse position
+
+ var xOff = (e.pageX - this.offset.l) / this.offset.w,
+ yOff = (e.pageY - this.offset.t) / this.offset.h,
+ x = (this._zoomSize.w * xOff * -1) + (this.glassSize * xOff),
+ y = (this._zoomSize.h * yOff * -1) + (this.glassSize * yOff);
+
+ dojo.style(this.img, {
+ top: y + "px",
+ left: x + "px"
+ });
+
+ },
+
+ destroy: function(finalize){
+ dojo.destroy(this.glassNode);
+ this.inherited(arguments);
+ }
+
+});
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/README b/js/dojo-1.6/dojox/image/README new file mode 100644 index 0000000..cbe32f3 --- /dev/null +++ b/js/dojo-1.6/dojox/image/README @@ -0,0 +1,88 @@ +------------------------------------------------------------------------------- +dojox.image - Image Related Widgets and Components +------------------------------------------------------------------------------- +Version 1.0 +Release date: 10/31/07 +------------------------------------------------------------------------------- +Project state: + +[Badge] experimental +[FlickrBadge] experimental +[Gallery] experimental +[Lightbox] beta +[Magnifier] experimental +[MagnifierLite] experimental +[SlideShow] experimental +[ThumbnailPicker] experimental + +------------------------------------------------------------------------------- +Credits + +[Badge] Peter Higgins (dante) +[FlickrBadge] Bryan Forbes (BryanForbes) +[Gallery] Shane O'Sullivan (sos) +[Lightbox] Peter Higgins (dante) +[Magnifier] Peter Higgins (dante) +[MagnifierLite] Peter Higgins (dante) +[SlideShow] Shane O'Sullivan (sos) +[ThumbnailPicker] Shane O'Sullivan (sos) + +------------------------------------------------------------------------------- +Project description + + A class to provide a common API for images, and home for image + related Widgets. + +------------------------------------------------------------------------------- +Dependencies: + + LightBox: dojo core, dojox.fx and optionally dojox.data. uses + either tundra or soria theme, no standalone icons. + + SlideShow: dojo core, dojo.fx, and dojo.data (optional + dojox.data store implementations apply) + + ThumbNailPicker: dojo core, dojo.fx and dojo.data. Combined + with a SlideShow, creates a sample Gallery app. + + Gallery: core, dojox.image.SlideShow, dojox.image.ThumbNailPicker + + Magnifier: (prototype) dojo core, dijit._Widget, dojox.gfx + + Badge: (prototype) dojo core, dijit._Widget + _Templated + +------------------------------------------------------------------------------- +Documentation + +------------------------------------------------------------------------------- +Installation instructions + +Grab the following from the Dojo SVN Repository: +http://svn.dojotoolkit.org/dojo/dojox/trunk/image/* + +Install into the following directory structure: +/dojox/image/ + +...which should be at the same level as your Dojo checkout. +------------------------------------------------------------------------------- +Additional Notes + + LightBox: currently works as individual items, and grouped items, + but usage of dojo.data is broken (atm). the API is subject to + change, and is marked accordingly. + + Hoping to implement: Carossel, and Reflect using + a common API provided by dojox.image.Pane (?) + + SlideShow: Shows an image, one by one, from a datastore. Acts + as standing ImagePane implementation, + + Gallery: A combination Thumbnail view and SlideShow, using + a datastore, and providing navigation, and common API. + + Magnifier: Unobtrusive way to attach a hovering window window + when moving the mouse over an image. The window shows a a zoomed + version of the original source. (prototype) + + Badge: (prototype) A Javascript version of a FlickrBadge thingr, + which loops through and sizes children in a loop. diff --git a/js/dojo-1.6/dojox/image/SlideShow.js b/js/dojo-1.6/dojox/image/SlideShow.js new file mode 100644 index 0000000..2cb52b1 --- /dev/null +++ b/js/dojo-1.6/dojox/image/SlideShow.js @@ -0,0 +1,687 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image.SlideShow"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.SlideShow"] = true;
+dojo.provide("dojox.image.SlideShow");
+//
+// dojox.image.SlideShow courtesy Shane O Sullivan, licensed under a Dojo CLA
+// For a sample usage, see http://www.skynet.ie/~sos/photos.php
+//
+// @author Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
+//
+// TODO: more cleanups
+//
+dojo.require("dojo.string");
+dojo.require("dojo.fx");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dojox.image.SlideShow",
+ [dijit._Widget, dijit._Templated],
+ {
+ // summary:
+ // A Slideshow Widget
+
+ // imageHeight: Number
+ // The maximum height of an image
+ imageHeight: 375,
+
+ // imageWidth: Number
+ // The maximum width of an image.
+ imageWidth: 500,
+
+ // title: String
+ // The initial title of the SlideShow
+ title: "",
+
+ // titleTemplate: String
+ // 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?
+ titleTemplate: '${title} <span class="slideShowCounterText">(${current} of ${total})</span>',
+
+ // noLink: Boolean
+ // 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
+ noLink: false,
+
+ // loop: Boolean
+ // true/false - make the slideshow loop
+ loop: true,
+
+ // hasNav: Boolean
+ // toggle to enable/disable the visual navigation controls
+ hasNav: true,
+
+ // images: Array
+ // Contains the DOM nodes that individual images are stored in when loaded or loading.
+ images: [],
+
+ // pageSize: Number
+ // The number of images to request each time.
+ pageSize: 20,
+
+ // autoLoad: Boolean
+ // 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.
+ autoLoad: true,
+
+ // autoStart: Boolean
+ // If true, the SlideShow begins playing immediately
+ autoStart: false,
+
+ // fixedHeight: Boolean
+ // If true, the widget does not resize itself to fix the displayed image.
+ fixedHeight: false,
+
+ // imageStore: Object
+ // Implementation of the dojo.data.api.Read API, which provides data on the images
+ // to be displayed.
+ imageStore: null,
+
+ // linkAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to link to from an image, if any.
+ linkAttr: "link",
+
+ // imageLargeAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to the image.
+ imageLargeAttr: "imageUrl",
+
+ // titleAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // title of the picture, if any.
+ titleAttr: "title",
+
+ // slideshowInterval: Number
+ // Time, in seconds, between image transitions during a slideshow.
+ slideshowInterval: 3,
+
+ templateString: dojo.cache("dojox.image", "resources/SlideShow.html", "<div dojoAttachPoint=\"outerNode\" class=\"slideShowWrapper\">\r\n\t<div style=\"position:relative;\" dojoAttachPoint=\"innerWrapper\">\r\n\t\t<div class=\"slideShowNav\" dojoAttachEvent=\"onclick: _handleClick\">\r\n\t\t\t<div class=\"dijitInline slideShowTitle\" dojoAttachPoint=\"titleNode\">${title}</div>\r\n\t\t</div>\r\n\t\t<div dojoAttachPoint=\"navNode\" class=\"slideShowCtrl\" dojoAttachEvent=\"onclick: _handleClick\">\r\n\t\t\t<span dojoAttachPoint=\"navPrev\" class=\"slideShowCtrlPrev\"></span>\r\n\t\t\t<span dojoAttachPoint=\"navPlay\" class=\"slideShowCtrlPlay\"></span>\r\n\t\t\t<span dojoAttachPoint=\"navNext\" class=\"slideShowCtrlNext\"></span>\r\n\t\t</div>\r\n\t\t<div dojoAttachPoint=\"largeNode\" class=\"slideShowImageWrapper\"></div>\t\t\r\n\t\t<div dojoAttachPoint=\"hiddenNode\" class=\"slideShowHidden\"></div>\r\n\t</div>\r\n</div>\r\n"),
+
+ // _imageCounter: Number
+ // A counter to keep track of which index image is to be loaded next
+ _imageCounter: 0,
+
+ // _tmpImage: DomNode
+ // The temporary image to show when a picture is loading.
+ _tmpImage: null,
+
+ // _request: Object
+ // Implementation of the dojo.data.api.Request API, which defines the query
+ // parameters for accessing the store.
+ _request: null,
+
+ postCreate: function(){
+ // summary: Initilizes the widget, sets up listeners and shows the first image
+ 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();
+ },
+
+ setDataStore: function(dataStore, request, /*optional*/paramNames){
+ // summary:
+ // Sets the data store and request objects to read data from.
+ // dataStore:
+ // An implementation of the dojo.data.api.Read API. This accesses the image
+ // data.
+ // request:
+ // An implementation of the dojo.data.api.Request API. This specifies the
+ // query and paging information to be used by the data store
+ // paramNames:
+ // An object defining the names of the item attributes to fetch from the
+ // data store. The three attributes allowed are 'linkAttr', 'imageLargeAttr' and 'titleAttr'
+ 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);
+ },
+
+ reset: function(){
+ // summary:
+ // Resets the widget to its initial state
+ // description:
+ // Removes all previously loaded images, and clears all caches.
+ 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;
+ },
+
+ isImageLoaded: function(index){
+ // summary:
+ // Returns true if image at the specified index is loaded, false otherwise.
+ // index:
+ // The number index in the data store to check if it is loaded.
+ return this.images && this.images.length > index && this.images[index];
+ },
+
+ moveImageLoadingPointer: function(index){
+ // summary:
+ // If 'autoload' is true, this tells the widget to start loading
+ // images from the specified pointer.
+ // index:
+ // The number index in the data store to start loading images from.
+ this._imageCounter = index;
+ },
+
+ destroy: function(){
+ // summary:
+ // Cleans up the widget when it is being destroyed
+ if(this._slideId) { this._stop(); }
+ this.inherited(arguments);
+ },
+
+ showNextImage: function(inTimer, forceLoop){
+ // summary:
+ // Changes the image being displayed to the next image in the data store
+ // inTimer: Boolean
+ // If true, a slideshow is active, otherwise the slideshow is inactive.
+ 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;
+ },
+
+ toggleSlideShow: function(){
+ // summary:
+ // Switches the slideshow mode on and off.
+
+ // If the slideshow is already running, stop it.
+ 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: ""}]);
+ }
+ }
+ },
+
+ getShowTopicName: function(){
+ // summary:
+ // Returns the topic id published to when an image is shown
+ // description:
+ // The information published is: index, title and url
+ return (this.widgetId || this.id) + "/imageShow";
+ },
+
+ getLoadTopicName: function(){
+ // summary:
+ // Returns the topic id published to when an image finishes loading.
+ // description:
+ // The information published is the index position of the image loaded.
+ return (this.widgetId ? this.widgetId : this.id) + "/imageLoad";
+ },
+
+ showImage: function(index, /* Function? */callback){
+ // summary:
+ // Shows the image at index 'index'.
+ // index: Number
+ // The position of the image in the data store to display
+ // callback: Function
+ // Optional callback function to call when the image has finished displaying.
+
+ 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();
+ }
+ },
+
+ _fitSize: function(force){
+ // summary:
+ // Fits the widget size to the size of the image being shown,
+ // or centers the image, depending on the value of 'fixedHeight'
+ // force: Boolean
+ // If true, the widget is always resized, regardless of the value of 'fixedHeight'
+ 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");
+ },
+
+ _getTopPadding: function(){
+ // summary:
+ // Returns the padding to place at the top of the image to center it vertically.
+ if(!this.fixedHeight){ return 0; }
+ return (this.imageHeight - this._currentImage.height) / 2;
+ },
+
+ _loadNextImage: function(){
+ // summary:
+ // Load the next unloaded image.
+
+ if(!this.autoLoad){
+ return;
+ }
+ while(this.images.length >= this._imageCounter && this.images[this._imageCounter]){
+ this._imageCounter++;
+ }
+ this._loadImage(this._imageCounter);
+ },
+
+ _loadImage: function(index, callbackFn){
+ // 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.
+ // index:
+ // The position in the data store to load an image from.
+ // callbackFn:
+ // An optional function to execute when the image has finished loading.
+
+ 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);
+ },
+
+ _stop: function(){
+ // summary:
+ // Stops a running slide show.
+ if(this._slideId){ clearTimeout(this._slideId); }
+ this._slideId = null;
+ this._timerCancelled = true;
+ dojo.removeClass(this.domNode,"slideShowPaused");
+ },
+
+ _prev: function(){
+ // summary:
+ // Show the previous image.
+ // FIXME: either pull code from showNext/prev, or call it here
+ if(this.imageIndex < 1){ return; }
+ this.showImage(this.imageIndex - 1);
+ },
+
+ _next: function(){
+ // summary:
+ // Show the next image
+ this.showNextImage();
+ },
+
+ _startTimer: function(){
+ // summary:
+ // Starts a timeout to show the next image when a slide show is active
+ var id = this.id;
+ this._slideId = setTimeout(function(){
+ dijit.byId(id).showNextImage(true);
+ }, this.slideshowInterval * 1000);
+ },
+
+ _calcNavDimensions: function() {
+ // summary:
+ // Calculates the dimensions of the navigation controls
+ 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: ""});
+ },
+
+ _setTitle: function(title){
+ // summary:
+ // Sets the title to the image being displayed
+ // title: String
+ // The String title of the image
+
+ this.titleNode.innerHTML = dojo.string.substitute(this.titleTemplate,{
+ title: title,
+ current: 1 + this.imageIndex,
+ total: this.maxPhotos || ""
+ });
+ },
+
+ _fitImage: function(img) {
+ // summary:
+ // Ensures that the image width and height do not exceed the maximum.
+ // img: Node
+ // The image DOM node to optionally resize
+ 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;
+ }
+ },
+
+ _handleClick: function(/* Event */e){
+ // summary:
+ // Performs navigation on the images based on users mouse clicks
+ // e:
+ // An Event object
+ switch(e.target){
+ case this.navNext: this._next(); break;
+ case this.navPrev: this._prev(); break;
+ case this.navPlay: this.toggleSlideShow(); break;
+ }
+ },
+
+ _showNav: function(force){
+ // summary:
+ // Shows the navigation controls
+ // force: Boolean
+ // If true, the navigation controls are repositioned even if they are
+ // currently visible.
+ 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;
+ },
+
+ _hideNav: function(/* Event */e){
+ // summary:
+ // Hides the navigation controls
+ // e: Event
+ // The DOM Event that triggered this function
+ 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;
+ }
+ },
+
+ _overElement: function(/*DomNode*/element, /*Event*/e){
+ // 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.
+ 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
+ }
+});
+
+}
diff --git a/js/dojo-1.6/dojox/image/SlideShow.xd.js b/js/dojo-1.6/dojox/image/SlideShow.xd.js new file mode 100644 index 0000000..af6a113 --- /dev/null +++ b/js/dojo-1.6/dojox/image/SlideShow.xd.js @@ -0,0 +1,695 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image.SlideShow"],
+["require", "dojo.string"],
+["require", "dojo.fx"],
+["require", "dijit._Widget"],
+["require", "dijit._Templated"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image.SlideShow"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.SlideShow"] = true;
+dojo.provide("dojox.image.SlideShow");
+//
+// dojox.image.SlideShow courtesy Shane O Sullivan, licensed under a Dojo CLA
+// For a sample usage, see http://www.skynet.ie/~sos/photos.php
+//
+// @author Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
+//
+// TODO: more cleanups
+//
+dojo.require("dojo.string");
+dojo.require("dojo.fx");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dojox.image.SlideShow",
+ [dijit._Widget, dijit._Templated],
+ {
+ // summary:
+ // A Slideshow Widget
+
+ // imageHeight: Number
+ // The maximum height of an image
+ imageHeight: 375,
+
+ // imageWidth: Number
+ // The maximum width of an image.
+ imageWidth: 500,
+
+ // title: String
+ // The initial title of the SlideShow
+ title: "",
+
+ // titleTemplate: String
+ // 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?
+ titleTemplate: '${title} <span class="slideShowCounterText">(${current} of ${total})</span>',
+
+ // noLink: Boolean
+ // 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
+ noLink: false,
+
+ // loop: Boolean
+ // true/false - make the slideshow loop
+ loop: true,
+
+ // hasNav: Boolean
+ // toggle to enable/disable the visual navigation controls
+ hasNav: true,
+
+ // images: Array
+ // Contains the DOM nodes that individual images are stored in when loaded or loading.
+ images: [],
+
+ // pageSize: Number
+ // The number of images to request each time.
+ pageSize: 20,
+
+ // autoLoad: Boolean
+ // 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.
+ autoLoad: true,
+
+ // autoStart: Boolean
+ // If true, the SlideShow begins playing immediately
+ autoStart: false,
+
+ // fixedHeight: Boolean
+ // If true, the widget does not resize itself to fix the displayed image.
+ fixedHeight: false,
+
+ // imageStore: Object
+ // Implementation of the dojo.data.api.Read API, which provides data on the images
+ // to be displayed.
+ imageStore: null,
+
+ // linkAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to link to from an image, if any.
+ linkAttr: "link",
+
+ // imageLargeAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // URL to the image.
+ imageLargeAttr: "imageUrl",
+
+ // titleAttr: String
+ // Defines the name of the attribute to request from the store to retrieve the
+ // title of the picture, if any.
+ titleAttr: "title",
+
+ // slideshowInterval: Number
+ // Time, in seconds, between image transitions during a slideshow.
+ slideshowInterval: 3,
+
+ templateString: dojo.cache("dojox.image", "resources/SlideShow.html", "<div dojoAttachPoint=\"outerNode\" class=\"slideShowWrapper\">\r\n\t<div style=\"position:relative;\" dojoAttachPoint=\"innerWrapper\">\r\n\t\t<div class=\"slideShowNav\" dojoAttachEvent=\"onclick: _handleClick\">\r\n\t\t\t<div class=\"dijitInline slideShowTitle\" dojoAttachPoint=\"titleNode\">${title}</div>\r\n\t\t</div>\r\n\t\t<div dojoAttachPoint=\"navNode\" class=\"slideShowCtrl\" dojoAttachEvent=\"onclick: _handleClick\">\r\n\t\t\t<span dojoAttachPoint=\"navPrev\" class=\"slideShowCtrlPrev\"></span>\r\n\t\t\t<span dojoAttachPoint=\"navPlay\" class=\"slideShowCtrlPlay\"></span>\r\n\t\t\t<span dojoAttachPoint=\"navNext\" class=\"slideShowCtrlNext\"></span>\r\n\t\t</div>\r\n\t\t<div dojoAttachPoint=\"largeNode\" class=\"slideShowImageWrapper\"></div>\t\t\r\n\t\t<div dojoAttachPoint=\"hiddenNode\" class=\"slideShowHidden\"></div>\r\n\t</div>\r\n</div>\r\n"),
+
+ // _imageCounter: Number
+ // A counter to keep track of which index image is to be loaded next
+ _imageCounter: 0,
+
+ // _tmpImage: DomNode
+ // The temporary image to show when a picture is loading.
+ _tmpImage: null,
+
+ // _request: Object
+ // Implementation of the dojo.data.api.Request API, which defines the query
+ // parameters for accessing the store.
+ _request: null,
+
+ postCreate: function(){
+ // summary: Initilizes the widget, sets up listeners and shows the first image
+ 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();
+ },
+
+ setDataStore: function(dataStore, request, /*optional*/paramNames){
+ // summary:
+ // Sets the data store and request objects to read data from.
+ // dataStore:
+ // An implementation of the dojo.data.api.Read API. This accesses the image
+ // data.
+ // request:
+ // An implementation of the dojo.data.api.Request API. This specifies the
+ // query and paging information to be used by the data store
+ // paramNames:
+ // An object defining the names of the item attributes to fetch from the
+ // data store. The three attributes allowed are 'linkAttr', 'imageLargeAttr' and 'titleAttr'
+ 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);
+ },
+
+ reset: function(){
+ // summary:
+ // Resets the widget to its initial state
+ // description:
+ // Removes all previously loaded images, and clears all caches.
+ 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;
+ },
+
+ isImageLoaded: function(index){
+ // summary:
+ // Returns true if image at the specified index is loaded, false otherwise.
+ // index:
+ // The number index in the data store to check if it is loaded.
+ return this.images && this.images.length > index && this.images[index];
+ },
+
+ moveImageLoadingPointer: function(index){
+ // summary:
+ // If 'autoload' is true, this tells the widget to start loading
+ // images from the specified pointer.
+ // index:
+ // The number index in the data store to start loading images from.
+ this._imageCounter = index;
+ },
+
+ destroy: function(){
+ // summary:
+ // Cleans up the widget when it is being destroyed
+ if(this._slideId) { this._stop(); }
+ this.inherited(arguments);
+ },
+
+ showNextImage: function(inTimer, forceLoop){
+ // summary:
+ // Changes the image being displayed to the next image in the data store
+ // inTimer: Boolean
+ // If true, a slideshow is active, otherwise the slideshow is inactive.
+ 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;
+ },
+
+ toggleSlideShow: function(){
+ // summary:
+ // Switches the slideshow mode on and off.
+
+ // If the slideshow is already running, stop it.
+ 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: ""}]);
+ }
+ }
+ },
+
+ getShowTopicName: function(){
+ // summary:
+ // Returns the topic id published to when an image is shown
+ // description:
+ // The information published is: index, title and url
+ return (this.widgetId || this.id) + "/imageShow";
+ },
+
+ getLoadTopicName: function(){
+ // summary:
+ // Returns the topic id published to when an image finishes loading.
+ // description:
+ // The information published is the index position of the image loaded.
+ return (this.widgetId ? this.widgetId : this.id) + "/imageLoad";
+ },
+
+ showImage: function(index, /* Function? */callback){
+ // summary:
+ // Shows the image at index 'index'.
+ // index: Number
+ // The position of the image in the data store to display
+ // callback: Function
+ // Optional callback function to call when the image has finished displaying.
+
+ 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();
+ }
+ },
+
+ _fitSize: function(force){
+ // summary:
+ // Fits the widget size to the size of the image being shown,
+ // or centers the image, depending on the value of 'fixedHeight'
+ // force: Boolean
+ // If true, the widget is always resized, regardless of the value of 'fixedHeight'
+ 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");
+ },
+
+ _getTopPadding: function(){
+ // summary:
+ // Returns the padding to place at the top of the image to center it vertically.
+ if(!this.fixedHeight){ return 0; }
+ return (this.imageHeight - this._currentImage.height) / 2;
+ },
+
+ _loadNextImage: function(){
+ // summary:
+ // Load the next unloaded image.
+
+ if(!this.autoLoad){
+ return;
+ }
+ while(this.images.length >= this._imageCounter && this.images[this._imageCounter]){
+ this._imageCounter++;
+ }
+ this._loadImage(this._imageCounter);
+ },
+
+ _loadImage: function(index, callbackFn){
+ // 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.
+ // index:
+ // The position in the data store to load an image from.
+ // callbackFn:
+ // An optional function to execute when the image has finished loading.
+
+ 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);
+ },
+
+ _stop: function(){
+ // summary:
+ // Stops a running slide show.
+ if(this._slideId){ clearTimeout(this._slideId); }
+ this._slideId = null;
+ this._timerCancelled = true;
+ dojo.removeClass(this.domNode,"slideShowPaused");
+ },
+
+ _prev: function(){
+ // summary:
+ // Show the previous image.
+ // FIXME: either pull code from showNext/prev, or call it here
+ if(this.imageIndex < 1){ return; }
+ this.showImage(this.imageIndex - 1);
+ },
+
+ _next: function(){
+ // summary:
+ // Show the next image
+ this.showNextImage();
+ },
+
+ _startTimer: function(){
+ // summary:
+ // Starts a timeout to show the next image when a slide show is active
+ var id = this.id;
+ this._slideId = setTimeout(function(){
+ dijit.byId(id).showNextImage(true);
+ }, this.slideshowInterval * 1000);
+ },
+
+ _calcNavDimensions: function() {
+ // summary:
+ // Calculates the dimensions of the navigation controls
+ 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: ""});
+ },
+
+ _setTitle: function(title){
+ // summary:
+ // Sets the title to the image being displayed
+ // title: String
+ // The String title of the image
+
+ this.titleNode.innerHTML = dojo.string.substitute(this.titleTemplate,{
+ title: title,
+ current: 1 + this.imageIndex,
+ total: this.maxPhotos || ""
+ });
+ },
+
+ _fitImage: function(img) {
+ // summary:
+ // Ensures that the image width and height do not exceed the maximum.
+ // img: Node
+ // The image DOM node to optionally resize
+ 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;
+ }
+ },
+
+ _handleClick: function(/* Event */e){
+ // summary:
+ // Performs navigation on the images based on users mouse clicks
+ // e:
+ // An Event object
+ switch(e.target){
+ case this.navNext: this._next(); break;
+ case this.navPrev: this._prev(); break;
+ case this.navPlay: this.toggleSlideShow(); break;
+ }
+ },
+
+ _showNav: function(force){
+ // summary:
+ // Shows the navigation controls
+ // force: Boolean
+ // If true, the navigation controls are repositioned even if they are
+ // currently visible.
+ 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;
+ },
+
+ _hideNav: function(/* Event */e){
+ // summary:
+ // Hides the navigation controls
+ // e: Event
+ // The DOM Event that triggered this function
+ 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;
+ }
+ },
+
+ _overElement: function(/*DomNode*/element, /*Event*/e){
+ // 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.
+ 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
+ }
+});
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/ThumbnailPicker.js b/js/dojo-1.6/dojox/image/ThumbnailPicker.js new file mode 100644 index 0000000..b4681e2 --- /dev/null +++ b/js/dojo-1.6/dojox/image/ThumbnailPicker.js @@ -0,0 +1,594 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image.ThumbnailPicker"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.ThumbnailPicker"] = true;
+dojo.provide("dojox.image.ThumbnailPicker");
+dojo.experimental("dojox.image.ThumbnailPicker");
+//
+// dojox.image.ThumbnailPicker courtesy Shane O Sullivan, licensed under a Dojo CLA
+// @author Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
+//
+// For a sample usage, see http://www.skynet.ie/~sos/photos.php
+//
+// document topics.
+
+dojo.require("dojox.fx.scroll"); // is optional, but don't want to dojo[require] it
+dojo.require("dojo.fx.easing");
+
+dojo.require("dojo.fx");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dojox.image.ThumbnailPicker",
+ [dijit._Widget, dijit._Templated],
+ {
+ // summary: A scrolling Thumbnail Picker widget
+ //
+ // imageStore: Object
+ // A data store that implements the dojo.data Read API.
+ imageStore: null,
+
+ // request: Object
+ // A dojo.data Read API Request object.
+ request: null,
+
+ // size: Number
+ // Width or height in pixels, depending if horizontal or vertical.
+ size: 500, //FIXME: use CSS?
+
+ // thumbHeight: Number
+ // Default height of a thumbnail image
+ thumbHeight: 75, // FIXME: use CSS?
+
+ // thumbWidth: Number
+ // Default width of an image
+ thumbWidth: 100, // FIXME: use CSS?
+
+ // useLoadNotifier: Boolean
+ // Setting useLoadNotifier to true makes a colored DIV appear under each
+ // thumbnail image, which is used to display the loading status of each
+ // image in the data store.
+ useLoadNotifier: false,
+
+ // useHyperlink: boolean
+ // Setting useHyperlink to true causes a click on a thumbnail to open a link.
+ useHyperlink: false,
+
+ // hyperlinkTarget: String
+ // If hyperlinkTarget is set to "new", clicking on a thumb will open a new window
+ // If it is set to anything else, clicking a thumbnail will open the url in the
+ // current window.
+ hyperlinkTarget: "new",
+
+ // isClickable: Boolean
+ // When set to true, the cursor over a thumbnail changes.
+ isClickable: true,
+
+ // isScrollable: Boolean
+ // When true, uses smoothScroll to move between pages
+ isScrollable: true,
+
+ // isHorizontal: Boolean
+ // If true, the thumbnails are displayed horizontally. Otherwise they are displayed
+ // vertically
+ isHorizontal: true,
+
+ //autoLoad: Boolean
+ autoLoad: true,
+
+ // linkAttr: String
+ // The attribute name for accessing the url from the data store
+ linkAttr: "link",
+
+ // imageThumbAttr: String
+ // The attribute name for accessing the thumbnail image url from the data store
+ imageThumbAttr: "imageUrlThumb",
+
+ // imageLargeAttr: String
+ // The attribute name for accessing the large image url from the data store
+ imageLargeAttr: "imageUrl",
+
+ // pageSize: Number
+ // The number of images to request each time.
+ pageSize: 20,
+
+ // titleAttr: String
+ // The attribute name for accessing the title from the data store
+ titleAttr: "title",
+
+ templateString: dojo.cache("dojox.image", "resources/ThumbnailPicker.html", "<div dojoAttachPoint=\"outerNode\" class=\"thumbOuter\">\r\n\t<div dojoAttachPoint=\"navPrev\" class=\"thumbNav thumbClickable\">\r\n\t <img src=\"\" dojoAttachPoint=\"navPrevImg\"/> \r\n\t</div>\r\n\t<div dojoAttachPoint=\"thumbScroller\" class=\"thumbScroller\">\r\n\t <div dojoAttachPoint=\"thumbsNode\" class=\"thumbWrapper\"></div>\r\n\t</div>\r\n\t<div dojoAttachPoint=\"navNext\" class=\"thumbNav thumbClickable\">\r\n\t <img src=\"\" dojoAttachPoint=\"navNextImg\"/> \r\n\t</div>\r\n</div>\r\n"),
+
+ // thumbs: Array
+ // Stores the image nodes for the thumbnails.
+ _thumbs: [],
+
+ // _thumbIndex: Number
+ // The index of the first thumbnail shown
+ _thumbIndex: 0,
+
+ // _maxPhotos: Number
+ // The total number of photos in the image store
+ _maxPhotos: 0,
+
+ // _loadedImages: Object
+ // Stores the indices of images that have been marked as loaded using the
+ // markImageLoaded function.
+ _loadedImages: {},
+
+ postCreate: function(){
+ // summary:
+ // Initializes styles and listeners
+ this.widgetid = this.id;
+ this.inherited(arguments);
+ this.pageSize = Number(this.pageSize);
+
+ this._scrollerSize = this.size - (51 * 2);
+
+ var sizeProp = this._sizeProperty = this.isHorizontal ? "width" : "height";
+
+ // FIXME: do this via css? calculate the correct width for the widget
+ dojo.style(this.outerNode, "textAlign","center");
+ dojo.style(this.outerNode, sizeProp, this.size+"px");
+
+ dojo.style(this.thumbScroller, sizeProp, this._scrollerSize + "px");
+
+ //If useHyperlink is true, then listen for a click on a thumbnail, and
+ //open the link
+ if(this.useHyperlink){
+ dojo.subscribe(this.getClickTopicName(), this, function(packet){
+ var index = packet.index;
+ var url = this.imageStore.getValue(packet.data,this.linkAttr);
+
+ //If the data item doesn't contain a URL, do nothing
+ if(!url){return;}
+
+ if(this.hyperlinkTarget == "new"){
+ window.open(url);
+ }else{
+ window.location = url;
+ }
+ });
+ }
+
+ if(this.isClickable){
+ dojo.addClass(this.thumbsNode, "thumbClickable");
+ }
+ this._totalSize = 0;
+ this.init();
+ },
+
+ init: function(){
+ // summary:
+ // Creates DOM nodes for thumbnail images and initializes their listeners
+ if(this.isInitialized) {return false;}
+
+ var classExt = this.isHorizontal ? "Horiz" : "Vert";
+
+ // FIXME: can we setup a listener around the whole element and determine based on e.target?
+ dojo.addClass(this.navPrev, "prev" + classExt);
+ dojo.addClass(this.navNext, "next" + classExt);
+ dojo.addClass(this.thumbsNode, "thumb"+classExt);
+ dojo.addClass(this.outerNode, "thumb"+classExt);
+
+ dojo.attr(this.navNextImg, "src", this._blankGif);
+ dojo.attr(this.navPrevImg, "src", this._blankGif);
+
+ this.connect(this.navPrev, "onclick", "_prev");
+ this.connect(this.navNext, "onclick", "_next");
+ this.isInitialized = true;
+
+ if(this.isHorizontal){
+ this._offsetAttr = "offsetLeft";
+ this._sizeAttr = "offsetWidth";
+ this._scrollAttr = "scrollLeft";
+ }else{
+ this._offsetAttr = "offsetTop";
+ this._sizeAttr = "offsetHeight";
+ this._scrollAttr = "scrollTop";
+ }
+
+ this._updateNavControls();
+ if(this.imageStore && this.request){this._loadNextPage();}
+ return true;
+ },
+
+ getClickTopicName: function(){
+ // summary:
+ // Returns the name of the dojo topic that can be
+ // subscribed to in order to receive notifications on
+ // which thumbnail was selected.
+ return (this.widgetId || this.id) + "/select"; // String
+ },
+
+ getShowTopicName: function(){
+ // summary:
+ // Returns the name of the dojo topic that can be
+ // subscribed to in order to receive notifications on
+ // which thumbnail is now visible
+ return (this.widgetId || this.id) + "/show"; // String
+ },
+
+ setDataStore: function(dataStore, request, /*optional*/paramNames){
+ // summary:
+ // Sets the data store and request objects to read data from.
+ // dataStore:
+ // An implementation of the dojo.data.api.Read API. This accesses the image
+ // data.
+ // request:
+ // An implementation of the dojo.data.api.Request API. This specifies the
+ // query and paging information to be used by the data store
+ // paramNames:
+ // An object defining the names of the item attributes to fetch from the
+ // data store. The four attributes allowed are 'linkAttr', 'imageLargeAttr',
+ // 'imageThumbAttr' and 'titleAttr'
+ this.reset();
+
+ this.request = {
+ query: {},
+ start: request.start || 0,
+ count: request.count || 10,
+ onBegin: dojo.hitch(this, function(total){
+ this._maxPhotos = total;
+ })
+ };
+
+ if(request.query){ dojo.mixin(this.request.query, request.query);}
+
+ if(paramNames){
+ dojo.forEach(["imageThumbAttr", "imageLargeAttr", "linkAttr", "titleAttr"], function(attrName){
+ if(paramNames[attrName]){ this[attrName] = paramNames[attrName]; }
+ }, this);
+ }
+
+ this.request.start = 0;
+ this.request.count = this.pageSize;
+ this.imageStore = dataStore;
+ this._loadInProgress = false;
+ if(!this.init()){this._loadNextPage();}
+ },
+
+ reset: function(){
+ // summary:
+ // Resets the widget back to its original state.
+ this._loadedImages = {};
+ dojo.forEach(this._thumbs, function(img){
+ if(img && img.parentNode){
+ dojo.destroy(img);
+ }
+ });
+
+ this._thumbs = [];
+ this.isInitialized = false;
+ this._noImages = true;
+ },
+
+ isVisible: function(index) {
+ // summary:
+ // Returns true if the image at the specified index is currently visible. False otherwise.
+ var img = this._thumbs[index];
+ if(!img){return false;}
+ var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
+ var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+ var scrollAttr = this.isHorizontal ? "scrollLeft" : "scrollTop";
+ var offset = img[pos] - this.thumbsNode[pos];
+ return (offset >= this.thumbScroller[scrollAttr]
+ && offset + img[size] <= this.thumbScroller[scrollAttr] + this._scrollerSize);
+ },
+
+ resize: function(dim){
+ var sizeParam = this.isHorizontal ? "w": "h";
+
+ var total = 0;
+
+ if(this._thumbs.length > 0 && dojo.marginBox(this._thumbs[0]).w == 0){
+ // Skip the resize if the widget is not visible
+ return;
+ }
+
+ // Calculate the complete size of the thumbnails
+ dojo.forEach(this._thumbs, dojo.hitch(this, function(imgContainer){
+ var mb = dojo.marginBox(imgContainer.firstChild);
+ var size = mb[sizeParam];
+ total += (Number(size) + 10);
+
+ if(this.useLoadNotifier && mb.w > 0){
+ dojo.style(imgContainer.lastChild, "width", (mb.w - 4) + "px");
+ }
+ dojo.style(imgContainer, "width", mb.w + "px");
+ }));
+
+ dojo.style(this.thumbsNode, this._sizeProperty, total + "px");
+ this._updateNavControls();
+ },
+
+ _next: function() {
+ // summary:
+ // Displays the next page of images
+ var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
+ var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+ var baseOffset = this.thumbsNode[pos];
+ var firstThumb = this._thumbs[this._thumbIndex];
+ var origOffset = firstThumb[pos] - baseOffset;
+
+ var index = -1, img;
+
+ for(var i = this._thumbIndex + 1; i < this._thumbs.length; i++){
+ img = this._thumbs[i];
+ if(img[pos] - baseOffset + img[size] - origOffset > this._scrollerSize){
+ this._showThumbs(i);
+ return;
+ }
+ }
+ },
+
+ _prev: function(){
+ // summary:
+ // Displays the next page of images
+ if(this.thumbScroller[this.isHorizontal ? "scrollLeft" : "scrollTop"] == 0){return;}
+ var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
+ var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+
+ var firstThumb = this._thumbs[this._thumbIndex];
+ var origOffset = firstThumb[pos] - this.thumbsNode[pos];
+
+ var index = -1, img;
+
+ for(var i = this._thumbIndex - 1; i > -1; i--) {
+ img = this._thumbs[i];
+ if(origOffset - img[pos] > this._scrollerSize){
+ this._showThumbs(i + 1);
+ return;
+ }
+ }
+ this._showThumbs(0);
+ },
+
+ _checkLoad: function(img, index){
+ // summary:
+ // Checks if an image is loaded.
+ dojo.publish(this.getShowTopicName(), [{index:index}]);
+ this._updateNavControls();
+ this._loadingImages = {};
+
+ this._thumbIndex = index;
+
+ //If we have not already requested the data from the store, do so.
+ if(this.thumbsNode.offsetWidth - img.offsetLeft < (this._scrollerSize * 2)){
+ this._loadNextPage();
+ }
+ },
+
+ _showThumbs: function(index){
+ // summary:
+ // Displays thumbnail images, starting at position 'index'
+ // index: Number
+ // The index of the first thumbnail
+
+//FIXME: When is this be called with an invalid index? Do we need this check at all?
+// if(typeof index != "number"){ index = this._thumbIndex; }
+ index = Math.min(Math.max(index, 0), this._maxPhotos);
+
+ if(index >= this._maxPhotos){ return; }
+
+ var img = this._thumbs[index];
+ if(!img){ return; }
+
+ var left = img.offsetLeft - this.thumbsNode.offsetLeft;
+ var top = img.offsetTop - this.thumbsNode.offsetTop;
+ var offset = this.isHorizontal ? left : top;
+
+ if( (offset >= this.thumbScroller[this._scrollAttr]) &&
+ (offset + img[this._sizeAttr] <= this.thumbScroller[this._scrollAttr] + this._scrollerSize)
+ ){
+ // FIXME: WTF is this checking for?
+ return;
+ }
+
+
+ if(this.isScrollable){
+ var target = this.isHorizontal ? {x: left, y: 0} : { x:0, y:top};
+ dojox.fx.smoothScroll({
+ target: target,
+ win: this.thumbScroller,
+ duration:300,
+ easing:dojo.fx.easing.easeOut,
+ onEnd: dojo.hitch(this, "_checkLoad", img, index)
+ }).play(10);
+ }else{
+ if(this.isHorizontal){
+ this.thumbScroller.scrollLeft = left;
+ }else{
+ this.thumbScroller.scrollTop = top;
+ }
+ this._checkLoad(img, index);
+ }
+ },
+
+ markImageLoaded: function(index){
+ // summary:
+ // Changes a visual cue to show the image is loaded
+ // description:
+ // If 'useLoadNotifier' is set to true, then a visual cue is
+ // given to state whether the image is loaded or not. Calling this function
+ // marks an image as loaded.
+ var thumbNotifier = dojo.byId("loadingDiv_"+this.widgetid+"_"+index);
+ if(thumbNotifier){this._setThumbClass(thumbNotifier, "thumbLoaded");}
+ this._loadedImages[index] = true;
+ },
+
+ _setThumbClass: function(thumb, className){
+ // summary:
+ // Adds a CSS class to a thumbnail, only if 'autoLoad' is true
+ // thumb: DomNode
+ // The thumbnail DOM node to set the class on
+ // className: String
+ // The CSS class to add to the DOM node.
+ if(!this.autoLoad){ return; }
+ dojo.addClass(thumb, className);
+ },
+
+ _loadNextPage: function(){
+ // summary:
+ // Loads the next page of thumbnail images
+ if(this._loadInProgress){return;}
+ this._loadInProgress = true;
+ var start = this.request.start + (this._noImages ? 0 : this.pageSize);
+
+ var pos = start;
+ while(pos < this._thumbs.length && this._thumbs[pos]){pos ++;}
+
+ var store = this.imageStore;
+
+ //Define the function to call when the items have been
+ //returned from the data store.
+ var complete = function(items, request){
+ if(store != this.imageStore){
+ // If the store has been changed, ignore this callback.
+ return;
+ }
+ if(items && items.length){
+ var itemCounter = 0;
+ var loadNext = dojo.hitch(this, function(){
+ if(itemCounter >= items.length){
+ this._loadInProgress = false;
+ return;
+ }
+ var counter = itemCounter++;
+
+ this._loadImage(items[counter], pos + counter, loadNext);
+ });
+ loadNext();
+
+ //Show or hide the navigation arrows on the thumbnails,
+ //depending on whether or not the widget is at the start,
+ //end, or middle of the list of images.
+ this._updateNavControls();
+ }else{
+ this._loadInProgress = false;
+ }
+ };
+
+ //Define the function to call if the store reports an error.
+ var error = function(){
+ this._loadInProgress = false;
+ console.log("Error getting items");
+ };
+
+ this.request.onComplete = dojo.hitch(this, complete);
+ this.request.onError = dojo.hitch(this, error);
+
+ //Increment the start parameter. This is the dojo.data API's
+ //version of paging.
+ this.request.start = start;
+ this._noImages = false;
+
+ //Execute the request for data.
+ this.imageStore.fetch(this.request);
+
+ },
+
+ _loadImage: function(data, index, callback){
+ // summary:
+ // Loads an image.
+
+ var store = this.imageStore;
+ var url = store.getValue(data,this.imageThumbAttr);
+
+ var imgContainer = dojo.create("div", {
+ id: "img_" + this.widgetid + "_" + index
+ });
+ var img = dojo.create("img", {}, imgContainer);
+ img._index = index;
+ img._data = data;
+
+ this._thumbs[index] = imgContainer;
+ var loadingDiv;
+ if(this.useLoadNotifier){
+ loadingDiv = dojo.create("div", {
+ id: "loadingDiv_" + this.widgetid+"_" + index
+ }, imgContainer);
+
+ //If this widget was previously told that the main image for this
+ //thumb has been loaded, make the loading indicator transparent.
+ this._setThumbClass(loadingDiv,
+ this._loadedImages[index] ? "thumbLoaded":"thumbNotifier");
+ }
+ var size = dojo.marginBox(this.thumbsNode);
+ var defaultSize;
+ var sizeParam;
+ if(this.isHorizontal){
+ defaultSize = this.thumbWidth;
+ sizeParam = 'w';
+ } else{
+ defaultSize = this.thumbHeight;
+ sizeParam = 'h';
+ }
+ size = size[sizeParam];
+ var sl = this.thumbScroller.scrollLeft, st = this.thumbScroller.scrollTop;
+
+ dojo.style(this.thumbsNode, this._sizeProperty, (size + defaultSize + 20) + "px");
+
+ //Remember the scroll values, as changing the size can alter them
+ this.thumbScroller.scrollLeft = sl;
+ this.thumbScroller.scrollTop = st;
+ this.thumbsNode.appendChild(imgContainer);
+
+ dojo.connect(img, "onload", this, dojo.hitch(this, function(){
+ if(store != this.imageStore){
+ // If the store has changed, ignore this load event
+ return false;
+ }
+ this.resize();
+
+ // Have to use a timeout here to prevent a call stack that gets
+ // so deep that IE throws stack overflow errors
+ setTimeout(callback, 0);
+ return false;
+ }));
+
+ dojo.connect(img, "onclick", this, function(evt){
+ dojo.publish(this.getClickTopicName(), [{
+ index: evt.target._index,
+ data: evt.target._data,
+ url: img.getAttribute("src"),
+ largeUrl: this.imageStore.getValue(data,this.imageLargeAttr),
+ title: this.imageStore.getValue(data,this.titleAttr),
+ link: this.imageStore.getValue(data,this.linkAttr)
+ }]);
+ return false;
+ });
+ dojo.addClass(img, "imageGalleryThumb");
+ img.setAttribute("src", url);
+ var title = this.imageStore.getValue(data, this.titleAttr);
+ if(title){ img.setAttribute("title",title); }
+ this._updateNavControls();
+
+ },
+
+ _updateNavControls: function(){
+ // summary:
+ // Updates the navigation controls to hide/show them when at
+ // the first or last images.
+ var cells = [];
+ var change = function(node, add){
+ var fn = add ? "addClass" : "removeClass";
+ dojo[fn](node,"enabled");
+ dojo[fn](node,"thumbClickable");
+ };
+
+ var pos = this.isHorizontal ? "scrollLeft" : "scrollTop";
+ var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+ change(this.navPrev, (this.thumbScroller[pos] > 0));
+
+ var last = this._thumbs[this._thumbs.length - 1];
+ var addClass = (this.thumbScroller[pos] + this._scrollerSize < this.thumbsNode[size]);
+ change(this.navNext, addClass);
+ }
+});
+
+}
diff --git a/js/dojo-1.6/dojox/image/ThumbnailPicker.xd.js b/js/dojo-1.6/dojox/image/ThumbnailPicker.xd.js new file mode 100644 index 0000000..58402f2 --- /dev/null +++ b/js/dojo-1.6/dojox/image/ThumbnailPicker.xd.js @@ -0,0 +1,603 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image.ThumbnailPicker"],
+["require", "dojox.fx.scroll"],
+["require", "dojo.fx.easing"],
+["require", "dojo.fx"],
+["require", "dijit._Widget"],
+["require", "dijit._Templated"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image.ThumbnailPicker"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image.ThumbnailPicker"] = true;
+dojo.provide("dojox.image.ThumbnailPicker");
+dojo.experimental("dojox.image.ThumbnailPicker");
+//
+// dojox.image.ThumbnailPicker courtesy Shane O Sullivan, licensed under a Dojo CLA
+// @author Copyright 2007 Shane O Sullivan (shaneosullivan1@gmail.com)
+//
+// For a sample usage, see http://www.skynet.ie/~sos/photos.php
+//
+// document topics.
+
+dojo.require("dojox.fx.scroll"); // is optional, but don't want to dojo[require] it
+dojo.require("dojo.fx.easing");
+
+dojo.require("dojo.fx");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dojox.image.ThumbnailPicker",
+ [dijit._Widget, dijit._Templated],
+ {
+ // summary: A scrolling Thumbnail Picker widget
+ //
+ // imageStore: Object
+ // A data store that implements the dojo.data Read API.
+ imageStore: null,
+
+ // request: Object
+ // A dojo.data Read API Request object.
+ request: null,
+
+ // size: Number
+ // Width or height in pixels, depending if horizontal or vertical.
+ size: 500, //FIXME: use CSS?
+
+ // thumbHeight: Number
+ // Default height of a thumbnail image
+ thumbHeight: 75, // FIXME: use CSS?
+
+ // thumbWidth: Number
+ // Default width of an image
+ thumbWidth: 100, // FIXME: use CSS?
+
+ // useLoadNotifier: Boolean
+ // Setting useLoadNotifier to true makes a colored DIV appear under each
+ // thumbnail image, which is used to display the loading status of each
+ // image in the data store.
+ useLoadNotifier: false,
+
+ // useHyperlink: boolean
+ // Setting useHyperlink to true causes a click on a thumbnail to open a link.
+ useHyperlink: false,
+
+ // hyperlinkTarget: String
+ // If hyperlinkTarget is set to "new", clicking on a thumb will open a new window
+ // If it is set to anything else, clicking a thumbnail will open the url in the
+ // current window.
+ hyperlinkTarget: "new",
+
+ // isClickable: Boolean
+ // When set to true, the cursor over a thumbnail changes.
+ isClickable: true,
+
+ // isScrollable: Boolean
+ // When true, uses smoothScroll to move between pages
+ isScrollable: true,
+
+ // isHorizontal: Boolean
+ // If true, the thumbnails are displayed horizontally. Otherwise they are displayed
+ // vertically
+ isHorizontal: true,
+
+ //autoLoad: Boolean
+ autoLoad: true,
+
+ // linkAttr: String
+ // The attribute name for accessing the url from the data store
+ linkAttr: "link",
+
+ // imageThumbAttr: String
+ // The attribute name for accessing the thumbnail image url from the data store
+ imageThumbAttr: "imageUrlThumb",
+
+ // imageLargeAttr: String
+ // The attribute name for accessing the large image url from the data store
+ imageLargeAttr: "imageUrl",
+
+ // pageSize: Number
+ // The number of images to request each time.
+ pageSize: 20,
+
+ // titleAttr: String
+ // The attribute name for accessing the title from the data store
+ titleAttr: "title",
+
+ templateString: dojo.cache("dojox.image", "resources/ThumbnailPicker.html", "<div dojoAttachPoint=\"outerNode\" class=\"thumbOuter\">\r\n\t<div dojoAttachPoint=\"navPrev\" class=\"thumbNav thumbClickable\">\r\n\t <img src=\"\" dojoAttachPoint=\"navPrevImg\"/> \r\n\t</div>\r\n\t<div dojoAttachPoint=\"thumbScroller\" class=\"thumbScroller\">\r\n\t <div dojoAttachPoint=\"thumbsNode\" class=\"thumbWrapper\"></div>\r\n\t</div>\r\n\t<div dojoAttachPoint=\"navNext\" class=\"thumbNav thumbClickable\">\r\n\t <img src=\"\" dojoAttachPoint=\"navNextImg\"/> \r\n\t</div>\r\n</div>\r\n"),
+
+ // thumbs: Array
+ // Stores the image nodes for the thumbnails.
+ _thumbs: [],
+
+ // _thumbIndex: Number
+ // The index of the first thumbnail shown
+ _thumbIndex: 0,
+
+ // _maxPhotos: Number
+ // The total number of photos in the image store
+ _maxPhotos: 0,
+
+ // _loadedImages: Object
+ // Stores the indices of images that have been marked as loaded using the
+ // markImageLoaded function.
+ _loadedImages: {},
+
+ postCreate: function(){
+ // summary:
+ // Initializes styles and listeners
+ this.widgetid = this.id;
+ this.inherited(arguments);
+ this.pageSize = Number(this.pageSize);
+
+ this._scrollerSize = this.size - (51 * 2);
+
+ var sizeProp = this._sizeProperty = this.isHorizontal ? "width" : "height";
+
+ // FIXME: do this via css? calculate the correct width for the widget
+ dojo.style(this.outerNode, "textAlign","center");
+ dojo.style(this.outerNode, sizeProp, this.size+"px");
+
+ dojo.style(this.thumbScroller, sizeProp, this._scrollerSize + "px");
+
+ //If useHyperlink is true, then listen for a click on a thumbnail, and
+ //open the link
+ if(this.useHyperlink){
+ dojo.subscribe(this.getClickTopicName(), this, function(packet){
+ var index = packet.index;
+ var url = this.imageStore.getValue(packet.data,this.linkAttr);
+
+ //If the data item doesn't contain a URL, do nothing
+ if(!url){return;}
+
+ if(this.hyperlinkTarget == "new"){
+ window.open(url);
+ }else{
+ window.location = url;
+ }
+ });
+ }
+
+ if(this.isClickable){
+ dojo.addClass(this.thumbsNode, "thumbClickable");
+ }
+ this._totalSize = 0;
+ this.init();
+ },
+
+ init: function(){
+ // summary:
+ // Creates DOM nodes for thumbnail images and initializes their listeners
+ if(this.isInitialized) {return false;}
+
+ var classExt = this.isHorizontal ? "Horiz" : "Vert";
+
+ // FIXME: can we setup a listener around the whole element and determine based on e.target?
+ dojo.addClass(this.navPrev, "prev" + classExt);
+ dojo.addClass(this.navNext, "next" + classExt);
+ dojo.addClass(this.thumbsNode, "thumb"+classExt);
+ dojo.addClass(this.outerNode, "thumb"+classExt);
+
+ dojo.attr(this.navNextImg, "src", this._blankGif);
+ dojo.attr(this.navPrevImg, "src", this._blankGif);
+
+ this.connect(this.navPrev, "onclick", "_prev");
+ this.connect(this.navNext, "onclick", "_next");
+ this.isInitialized = true;
+
+ if(this.isHorizontal){
+ this._offsetAttr = "offsetLeft";
+ this._sizeAttr = "offsetWidth";
+ this._scrollAttr = "scrollLeft";
+ }else{
+ this._offsetAttr = "offsetTop";
+ this._sizeAttr = "offsetHeight";
+ this._scrollAttr = "scrollTop";
+ }
+
+ this._updateNavControls();
+ if(this.imageStore && this.request){this._loadNextPage();}
+ return true;
+ },
+
+ getClickTopicName: function(){
+ // summary:
+ // Returns the name of the dojo topic that can be
+ // subscribed to in order to receive notifications on
+ // which thumbnail was selected.
+ return (this.widgetId || this.id) + "/select"; // String
+ },
+
+ getShowTopicName: function(){
+ // summary:
+ // Returns the name of the dojo topic that can be
+ // subscribed to in order to receive notifications on
+ // which thumbnail is now visible
+ return (this.widgetId || this.id) + "/show"; // String
+ },
+
+ setDataStore: function(dataStore, request, /*optional*/paramNames){
+ // summary:
+ // Sets the data store and request objects to read data from.
+ // dataStore:
+ // An implementation of the dojo.data.api.Read API. This accesses the image
+ // data.
+ // request:
+ // An implementation of the dojo.data.api.Request API. This specifies the
+ // query and paging information to be used by the data store
+ // paramNames:
+ // An object defining the names of the item attributes to fetch from the
+ // data store. The four attributes allowed are 'linkAttr', 'imageLargeAttr',
+ // 'imageThumbAttr' and 'titleAttr'
+ this.reset();
+
+ this.request = {
+ query: {},
+ start: request.start || 0,
+ count: request.count || 10,
+ onBegin: dojo.hitch(this, function(total){
+ this._maxPhotos = total;
+ })
+ };
+
+ if(request.query){ dojo.mixin(this.request.query, request.query);}
+
+ if(paramNames){
+ dojo.forEach(["imageThumbAttr", "imageLargeAttr", "linkAttr", "titleAttr"], function(attrName){
+ if(paramNames[attrName]){ this[attrName] = paramNames[attrName]; }
+ }, this);
+ }
+
+ this.request.start = 0;
+ this.request.count = this.pageSize;
+ this.imageStore = dataStore;
+ this._loadInProgress = false;
+ if(!this.init()){this._loadNextPage();}
+ },
+
+ reset: function(){
+ // summary:
+ // Resets the widget back to its original state.
+ this._loadedImages = {};
+ dojo.forEach(this._thumbs, function(img){
+ if(img && img.parentNode){
+ dojo.destroy(img);
+ }
+ });
+
+ this._thumbs = [];
+ this.isInitialized = false;
+ this._noImages = true;
+ },
+
+ isVisible: function(index) {
+ // summary:
+ // Returns true if the image at the specified index is currently visible. False otherwise.
+ var img = this._thumbs[index];
+ if(!img){return false;}
+ var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
+ var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+ var scrollAttr = this.isHorizontal ? "scrollLeft" : "scrollTop";
+ var offset = img[pos] - this.thumbsNode[pos];
+ return (offset >= this.thumbScroller[scrollAttr]
+ && offset + img[size] <= this.thumbScroller[scrollAttr] + this._scrollerSize);
+ },
+
+ resize: function(dim){
+ var sizeParam = this.isHorizontal ? "w": "h";
+
+ var total = 0;
+
+ if(this._thumbs.length > 0 && dojo.marginBox(this._thumbs[0]).w == 0){
+ // Skip the resize if the widget is not visible
+ return;
+ }
+
+ // Calculate the complete size of the thumbnails
+ dojo.forEach(this._thumbs, dojo.hitch(this, function(imgContainer){
+ var mb = dojo.marginBox(imgContainer.firstChild);
+ var size = mb[sizeParam];
+ total += (Number(size) + 10);
+
+ if(this.useLoadNotifier && mb.w > 0){
+ dojo.style(imgContainer.lastChild, "width", (mb.w - 4) + "px");
+ }
+ dojo.style(imgContainer, "width", mb.w + "px");
+ }));
+
+ dojo.style(this.thumbsNode, this._sizeProperty, total + "px");
+ this._updateNavControls();
+ },
+
+ _next: function() {
+ // summary:
+ // Displays the next page of images
+ var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
+ var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+ var baseOffset = this.thumbsNode[pos];
+ var firstThumb = this._thumbs[this._thumbIndex];
+ var origOffset = firstThumb[pos] - baseOffset;
+
+ var index = -1, img;
+
+ for(var i = this._thumbIndex + 1; i < this._thumbs.length; i++){
+ img = this._thumbs[i];
+ if(img[pos] - baseOffset + img[size] - origOffset > this._scrollerSize){
+ this._showThumbs(i);
+ return;
+ }
+ }
+ },
+
+ _prev: function(){
+ // summary:
+ // Displays the next page of images
+ if(this.thumbScroller[this.isHorizontal ? "scrollLeft" : "scrollTop"] == 0){return;}
+ var pos = this.isHorizontal ? "offsetLeft" : "offsetTop";
+ var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+
+ var firstThumb = this._thumbs[this._thumbIndex];
+ var origOffset = firstThumb[pos] - this.thumbsNode[pos];
+
+ var index = -1, img;
+
+ for(var i = this._thumbIndex - 1; i > -1; i--) {
+ img = this._thumbs[i];
+ if(origOffset - img[pos] > this._scrollerSize){
+ this._showThumbs(i + 1);
+ return;
+ }
+ }
+ this._showThumbs(0);
+ },
+
+ _checkLoad: function(img, index){
+ // summary:
+ // Checks if an image is loaded.
+ dojo.publish(this.getShowTopicName(), [{index:index}]);
+ this._updateNavControls();
+ this._loadingImages = {};
+
+ this._thumbIndex = index;
+
+ //If we have not already requested the data from the store, do so.
+ if(this.thumbsNode.offsetWidth - img.offsetLeft < (this._scrollerSize * 2)){
+ this._loadNextPage();
+ }
+ },
+
+ _showThumbs: function(index){
+ // summary:
+ // Displays thumbnail images, starting at position 'index'
+ // index: Number
+ // The index of the first thumbnail
+
+//FIXME: When is this be called with an invalid index? Do we need this check at all?
+// if(typeof index != "number"){ index = this._thumbIndex; }
+ index = Math.min(Math.max(index, 0), this._maxPhotos);
+
+ if(index >= this._maxPhotos){ return; }
+
+ var img = this._thumbs[index];
+ if(!img){ return; }
+
+ var left = img.offsetLeft - this.thumbsNode.offsetLeft;
+ var top = img.offsetTop - this.thumbsNode.offsetTop;
+ var offset = this.isHorizontal ? left : top;
+
+ if( (offset >= this.thumbScroller[this._scrollAttr]) &&
+ (offset + img[this._sizeAttr] <= this.thumbScroller[this._scrollAttr] + this._scrollerSize)
+ ){
+ // FIXME: WTF is this checking for?
+ return;
+ }
+
+
+ if(this.isScrollable){
+ var target = this.isHorizontal ? {x: left, y: 0} : { x:0, y:top};
+ dojox.fx.smoothScroll({
+ target: target,
+ win: this.thumbScroller,
+ duration:300,
+ easing:dojo.fx.easing.easeOut,
+ onEnd: dojo.hitch(this, "_checkLoad", img, index)
+ }).play(10);
+ }else{
+ if(this.isHorizontal){
+ this.thumbScroller.scrollLeft = left;
+ }else{
+ this.thumbScroller.scrollTop = top;
+ }
+ this._checkLoad(img, index);
+ }
+ },
+
+ markImageLoaded: function(index){
+ // summary:
+ // Changes a visual cue to show the image is loaded
+ // description:
+ // If 'useLoadNotifier' is set to true, then a visual cue is
+ // given to state whether the image is loaded or not. Calling this function
+ // marks an image as loaded.
+ var thumbNotifier = dojo.byId("loadingDiv_"+this.widgetid+"_"+index);
+ if(thumbNotifier){this._setThumbClass(thumbNotifier, "thumbLoaded");}
+ this._loadedImages[index] = true;
+ },
+
+ _setThumbClass: function(thumb, className){
+ // summary:
+ // Adds a CSS class to a thumbnail, only if 'autoLoad' is true
+ // thumb: DomNode
+ // The thumbnail DOM node to set the class on
+ // className: String
+ // The CSS class to add to the DOM node.
+ if(!this.autoLoad){ return; }
+ dojo.addClass(thumb, className);
+ },
+
+ _loadNextPage: function(){
+ // summary:
+ // Loads the next page of thumbnail images
+ if(this._loadInProgress){return;}
+ this._loadInProgress = true;
+ var start = this.request.start + (this._noImages ? 0 : this.pageSize);
+
+ var pos = start;
+ while(pos < this._thumbs.length && this._thumbs[pos]){pos ++;}
+
+ var store = this.imageStore;
+
+ //Define the function to call when the items have been
+ //returned from the data store.
+ var complete = function(items, request){
+ if(store != this.imageStore){
+ // If the store has been changed, ignore this callback.
+ return;
+ }
+ if(items && items.length){
+ var itemCounter = 0;
+ var loadNext = dojo.hitch(this, function(){
+ if(itemCounter >= items.length){
+ this._loadInProgress = false;
+ return;
+ }
+ var counter = itemCounter++;
+
+ this._loadImage(items[counter], pos + counter, loadNext);
+ });
+ loadNext();
+
+ //Show or hide the navigation arrows on the thumbnails,
+ //depending on whether or not the widget is at the start,
+ //end, or middle of the list of images.
+ this._updateNavControls();
+ }else{
+ this._loadInProgress = false;
+ }
+ };
+
+ //Define the function to call if the store reports an error.
+ var error = function(){
+ this._loadInProgress = false;
+ console.log("Error getting items");
+ };
+
+ this.request.onComplete = dojo.hitch(this, complete);
+ this.request.onError = dojo.hitch(this, error);
+
+ //Increment the start parameter. This is the dojo.data API's
+ //version of paging.
+ this.request.start = start;
+ this._noImages = false;
+
+ //Execute the request for data.
+ this.imageStore.fetch(this.request);
+
+ },
+
+ _loadImage: function(data, index, callback){
+ // summary:
+ // Loads an image.
+
+ var store = this.imageStore;
+ var url = store.getValue(data,this.imageThumbAttr);
+
+ var imgContainer = dojo.create("div", {
+ id: "img_" + this.widgetid + "_" + index
+ });
+ var img = dojo.create("img", {}, imgContainer);
+ img._index = index;
+ img._data = data;
+
+ this._thumbs[index] = imgContainer;
+ var loadingDiv;
+ if(this.useLoadNotifier){
+ loadingDiv = dojo.create("div", {
+ id: "loadingDiv_" + this.widgetid+"_" + index
+ }, imgContainer);
+
+ //If this widget was previously told that the main image for this
+ //thumb has been loaded, make the loading indicator transparent.
+ this._setThumbClass(loadingDiv,
+ this._loadedImages[index] ? "thumbLoaded":"thumbNotifier");
+ }
+ var size = dojo.marginBox(this.thumbsNode);
+ var defaultSize;
+ var sizeParam;
+ if(this.isHorizontal){
+ defaultSize = this.thumbWidth;
+ sizeParam = 'w';
+ } else{
+ defaultSize = this.thumbHeight;
+ sizeParam = 'h';
+ }
+ size = size[sizeParam];
+ var sl = this.thumbScroller.scrollLeft, st = this.thumbScroller.scrollTop;
+
+ dojo.style(this.thumbsNode, this._sizeProperty, (size + defaultSize + 20) + "px");
+
+ //Remember the scroll values, as changing the size can alter them
+ this.thumbScroller.scrollLeft = sl;
+ this.thumbScroller.scrollTop = st;
+ this.thumbsNode.appendChild(imgContainer);
+
+ dojo.connect(img, "onload", this, dojo.hitch(this, function(){
+ if(store != this.imageStore){
+ // If the store has changed, ignore this load event
+ return false;
+ }
+ this.resize();
+
+ // Have to use a timeout here to prevent a call stack that gets
+ // so deep that IE throws stack overflow errors
+ setTimeout(callback, 0);
+ return false;
+ }));
+
+ dojo.connect(img, "onclick", this, function(evt){
+ dojo.publish(this.getClickTopicName(), [{
+ index: evt.target._index,
+ data: evt.target._data,
+ url: img.getAttribute("src"),
+ largeUrl: this.imageStore.getValue(data,this.imageLargeAttr),
+ title: this.imageStore.getValue(data,this.titleAttr),
+ link: this.imageStore.getValue(data,this.linkAttr)
+ }]);
+ return false;
+ });
+ dojo.addClass(img, "imageGalleryThumb");
+ img.setAttribute("src", url);
+ var title = this.imageStore.getValue(data, this.titleAttr);
+ if(title){ img.setAttribute("title",title); }
+ this._updateNavControls();
+
+ },
+
+ _updateNavControls: function(){
+ // summary:
+ // Updates the navigation controls to hide/show them when at
+ // the first or last images.
+ var cells = [];
+ var change = function(node, add){
+ var fn = add ? "addClass" : "removeClass";
+ dojo[fn](node,"enabled");
+ dojo[fn](node,"thumbClickable");
+ };
+
+ var pos = this.isHorizontal ? "scrollLeft" : "scrollTop";
+ var size = this.isHorizontal ? "offsetWidth" : "offsetHeight";
+ change(this.navPrev, (this.thumbScroller[pos] > 0));
+
+ var last = this._thumbs[this._thumbs.length - 1];
+ var addClass = (this.thumbScroller[pos] + this._scrollerSize < this.thumbsNode[size]);
+ change(this.navNext, addClass);
+ }
+});
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/_base.js b/js/dojo-1.6/dojox/image/_base.js new file mode 100644 index 0000000..78c4530 --- /dev/null +++ b/js/dojo-1.6/dojox/image/_base.js @@ -0,0 +1,125 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+if(!dojo._hasResource["dojox.image._base"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image._base"] = true;
+dojo.provide("dojox.image._base");
+
+// summary: Core Image-related functionality
+;(function(d){
+
+ var cacheNode;
+ dojox.image.preload = function(/* Array */urls){
+ // summary: Preload a list of images in the dom.
+ //
+ // urls: Array
+ // The list of urls to load. Can be any valid .src attribute.
+ //
+ // example:
+ // Load two images into cache:
+ // | dojox.image.preload(["foo.png", "bar.gif"]);
+ //
+ // example:
+ // Using djConfig:
+ // | var djConfig = {
+ // | preloadImages:["bar.png", "baz.png", "http://example.com/icon.gif"]
+ // | };
+ //
+ // returns: Array
+ // An Array of DomNodes that have been cached.
+
+ if(!cacheNode){
+ cacheNode = d.create("div", {
+ style:{ position:"absolute", top:"-9999px", height:"1px", overflow:"hidden" }
+ }, d.body());
+ }
+
+ // place them in the hidden cachenode
+ return d.map(urls, function(url){
+ return d.create("img", { src: url }, cacheNode);
+ });
+
+ };
+
+ /*=====
+ dojo.mixin(djConfig, {
+ // preloadImages: Array?
+ // An optional array of urls to preload immediately upon
+ // page load. Uses `dojox.image`, and is unused if not present.
+ preloadImages: []
+ })
+ =====*/
+ if(d.config.preloadImages){
+ d.addOnLoad(function(){
+ dojox.image.preload(d.config.preloadImages);
+ });
+ }
+
+// dojo.declare("dojox.image.Image", dijit._Widget, {
+// // summary: an Image widget
+// //
+// // example:
+// // | new dojox.Image({ src:"foo.png", id:"bar" });
+//
+// alt: "",
+// src: dojo._blankGif,
+// title: "",
+//
+// onLoad: function(e){
+// // summary: Stub fired when this image is really ready.
+// },
+//
+// _onLoad: function(e){
+// // summary: private function to normalize `onLoad` for this
+// // instance.
+// this.onLoad(e);
+// },
+//
+// _setSrcAttr: function(newSrc){
+// // summary: Function so widget.attr('src', someUrl) works
+//
+// var ts = this.domNode, os = td.src;
+// if(os !== newSrc){
+// td.src = newSrc;
+// }
+// },
+//
+// /* Sugar Functions: */
+//
+// crossFade: function(newSrc){
+// // summary: Set this Image to a new src with crossfading
+// //
+// // example:
+// // dijit.byId("bar").crossFade("/images/newImage.png");
+// //
+//
+// d.fadeOut({
+// node: this.domNode,
+// onEnd: d.hitch(this, function(){
+// this.attr('src', newSrc);
+// d.fadeIn({
+// node: this.domNode,
+// delay: 75
+// }).play();
+// })
+// }).play();
+// },
+//
+// /* Overrides */
+//
+// buildRendering: function(){
+// // override buildrendering to create a real "img" instead of a div
+// // when no srcNodeRef is passed. also wire up single onload.
+// this.domNode = this.srcNodeRef || d.create('img');
+// this.connect(this.domNode, "onload", "_onload");
+// }
+//
+// });
+
+})(dojo);
+
+}
diff --git a/js/dojo-1.6/dojox/image/_base.xd.js b/js/dojo-1.6/dojox/image/_base.xd.js new file mode 100644 index 0000000..a8e9e0d --- /dev/null +++ b/js/dojo-1.6/dojox/image/_base.xd.js @@ -0,0 +1,129 @@ +/*
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
+ Available via Academic Free License >= 2.1 OR the modified BSD license.
+ see: http://dojotoolkit.org/license for details
+*/
+
+
+dojo._xdResourceLoaded(function(dojo, dijit, dojox){
+return {depends: [["provide", "dojox.image._base"]],
+defineResource: function(dojo, dijit, dojox){if(!dojo._hasResource["dojox.image._base"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.image._base"] = true;
+dojo.provide("dojox.image._base");
+
+// summary: Core Image-related functionality
+;(function(d){
+
+ var cacheNode;
+ dojox.image.preload = function(/* Array */urls){
+ // summary: Preload a list of images in the dom.
+ //
+ // urls: Array
+ // The list of urls to load. Can be any valid .src attribute.
+ //
+ // example:
+ // Load two images into cache:
+ // | dojox.image.preload(["foo.png", "bar.gif"]);
+ //
+ // example:
+ // Using djConfig:
+ // | var djConfig = {
+ // | preloadImages:["bar.png", "baz.png", "http://example.com/icon.gif"]
+ // | };
+ //
+ // returns: Array
+ // An Array of DomNodes that have been cached.
+
+ if(!cacheNode){
+ cacheNode = d.create("div", {
+ style:{ position:"absolute", top:"-9999px", height:"1px", overflow:"hidden" }
+ }, d.body());
+ }
+
+ // place them in the hidden cachenode
+ return d.map(urls, function(url){
+ return d.create("img", { src: url }, cacheNode);
+ });
+
+ };
+
+ /*=====
+ dojo.mixin(djConfig, {
+ // preloadImages: Array?
+ // An optional array of urls to preload immediately upon
+ // page load. Uses `dojox.image`, and is unused if not present.
+ preloadImages: []
+ })
+ =====*/
+ if(d.config.preloadImages){
+ d.addOnLoad(function(){
+ dojox.image.preload(d.config.preloadImages);
+ });
+ }
+
+// dojo.declare("dojox.image.Image", dijit._Widget, {
+// // summary: an Image widget
+// //
+// // example:
+// // | new dojox.Image({ src:"foo.png", id:"bar" });
+//
+// alt: "",
+// src: dojo._blankGif,
+// title: "",
+//
+// onLoad: function(e){
+// // summary: Stub fired when this image is really ready.
+// },
+//
+// _onLoad: function(e){
+// // summary: private function to normalize `onLoad` for this
+// // instance.
+// this.onLoad(e);
+// },
+//
+// _setSrcAttr: function(newSrc){
+// // summary: Function so widget.attr('src', someUrl) works
+//
+// var ts = this.domNode, os = td.src;
+// if(os !== newSrc){
+// td.src = newSrc;
+// }
+// },
+//
+// /* Sugar Functions: */
+//
+// crossFade: function(newSrc){
+// // summary: Set this Image to a new src with crossfading
+// //
+// // example:
+// // dijit.byId("bar").crossFade("/images/newImage.png");
+// //
+//
+// d.fadeOut({
+// node: this.domNode,
+// onEnd: d.hitch(this, function(){
+// this.attr('src', newSrc);
+// d.fadeIn({
+// node: this.domNode,
+// delay: 75
+// }).play();
+// })
+// }).play();
+// },
+//
+// /* Overrides */
+//
+// buildRendering: function(){
+// // override buildrendering to create a real "img" instead of a div
+// // when no srcNodeRef is passed. also wire up single onload.
+// this.domNode = this.srcNodeRef || d.create('img');
+// this.connect(this.domNode, "onload", "_onload");
+// }
+//
+// });
+
+})(dojo);
+
+}
+
+}};});
diff --git a/js/dojo-1.6/dojox/image/resources/Badge.css b/js/dojo-1.6/dojox/image/resources/Badge.css new file mode 100644 index 0000000..482ffa2 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/Badge.css @@ -0,0 +1,37 @@ +/* dojox.image.Badge definitions */ + +.dojoxBadge { + position:relative; +} + +.dojoxBadge .dojoxBadgeImage { + position:absolute; + top:0; left:0; + margin:0; + padding:0; +} + +.dojoxBadge { + margin:0; padding:0; + border:1px solid #eee; +/* background:#fff; */ +} + +.dojoxBadge .dojoxBadgeImage { + overflow:hidden; + margin-left:1px; + margin-top:1px; + background:#ededed; + z-index:90; +} + +.dojoxBadge .dojoxBadgeSeen { + background-color:#dedede; +} +.dojoxBadge .dojoxBadgeOver { + background-color:green !important; +} + +.dojoxBadge .dojoxBadgeTop { + z-index:99; +} diff --git a/js/dojo-1.6/dojox/image/resources/Gallery.css b/js/dojo-1.6/dojox/image/resources/Gallery.css new file mode 100644 index 0000000..8e4fd90 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/Gallery.css @@ -0,0 +1,6 @@ +/* dojox.image.Gallery - too small to be it's own file? */ + +.imageGalleryWrapper { + padding-bottom: 20px; + text-align: center; +} diff --git a/js/dojo-1.6/dojox/image/resources/Gallery.html b/js/dojo-1.6/dojox/image/resources/Gallery.html new file mode 100644 index 0000000..571dc4f --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/Gallery.html @@ -0,0 +1,4 @@ +<div dojoAttachPoint="outerNode" class="imageGalleryWrapper"> + <div dojoAttachPoint="thumbPickerNode"></div> + <div dojoAttachPoint="slideShowNode"></div> +</div>
\ No newline at end of file diff --git a/js/dojo-1.6/dojox/image/resources/Lightbox.css b/js/dojo-1.6/dojox/image/resources/Lightbox.css new file mode 100644 index 0000000..22faf48 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/Lightbox.css @@ -0,0 +1,128 @@ + +/* dojox.image.Lightbox:base */ +/* FIXME: should be be doing this? I want a black underlay, but this sets ALL dialogs to black, + but because it's decendant of body, i can't set this color any other way ... */ +.tundra .dijitDialogUnderlay, +.nihilo .dijitDialogUnderlay, +.soria .dijitDialogUnderlay { + background-color:#000; +} + +.claro .dojoxLightbox .dijitDialogCloseIconHover, +.nihilo .dojoxLightbox .dijitDialogCloseIconHover, +.tundra .dojoxLightbox .dijitDialogCloseIconHover, +.tundra .dojoxLightbox .dijitDialogCloseIconActive, +.nihilo .dojoxLightbox .dijitDialogCloseIconActive, +.claro .dojoxLightbox .dijitDialogCloseIconActive { + background:url('images/close.png') no-repeat 0 0; +} + +/* more specific to override .theme .dijitDialog name. might try baseClass="dojoxLightbox" + but that would require additional overriden CSS on top of the original Dialog.css */ +.claro .dojoxLightbox, +.soria .dojoxLightbox, +.nihilo .dojoxLightbox, +.tundra .dojoxLightbox { + position:absolute; + z-index:999; + overflow:hidden; + width:100px; + height:100px; + border:11px solid #fff !important; /* not happy, but all themes overwrite this to 1px */ + background:#fff url('images/loading.gif') no-repeat center center; + + /* special safari + FF specific rounding + shadows */ + -webkit-box-shadow: 0px 6px 10px #636363; /* #adadad; */ + -webkit-border-radius: 3px; + -moz-border-radius:4px; + border-radius: 4px; +} + +.dojoxLightboxContainer { + position:absolute; + top:0; left:0; + background-color:#fff; +} + +.dojoxLightboxFooter { + padding-bottom:5px; + position:relative; + bottom:0; + left:0; + margin-top:8px; + color:#333; + z-index:1000; + font-size:10pt; +} + +.dojoxLightboxGroupText { + color:#666; + font-size:8pt; +} + +.LightboxNext, +.LightboxPrev, +.LightboxClose { + float:right; + width:16px; + height:16px; + cursor:pointer; +} + +/* dojox.image.Lightbox:tundra:nihilo */ + +.claro .LightboxClose, +.nihilo .LightboxClose, +.tundra .LightboxClose { + background:url('images/close.png') no-repeat center center; +} + +.di_ie6 .claro .LightboxClose, +.di_ie6 .nihilo .LightboxClose, +.dj_ie6 .tundra .LightboxClose { + background:url('images/close.gif') no-repeat center center; +} + +.claro .LightboxNext, +.nihilo .LightboxNext, +.tundra .LightboxNext { + background:url('images/right.png') no-repeat center center; +} + +.dj_ie6 .claro .LightboxNext, +.dj_ie6 .nihilo .LightboxNext, +.dj_ie6 .tundra .LightboxNext { + background:url('images/right.gif') no-repeat center center; +} + +.claro .LightboxPrev, +.nihilo .LightboxPrev, +.tundra .LightboxPrev { + background:url('images/left.png') no-repeat center center; +} + +.dj_ie6 .claro .LightboxPrev, +.dj_ie6 .nihilo .LightboxPrev, +.dj_ie6 .tundra .LightboxPrev { + background:url('images/left.gif') no-repeat center center; +} + +/* dojox.image.Lightbox:soria */ +.soria .LightboxClose, +.soria .LightboxNext, +.soria .LightboxPrev { + width:15px; + height:15px; + background:url('../../../dijit/themes/soria/images/spriteRoundedIconsSmall.png') no-repeat center center; + background-position:-60px; +} +.soria .LightboxNext { + background-position:-30px 0; +} +.soria .LightboxPrev { + background-position:0 0; +} + +.dojoxLightboxText { + margin:0; padding:0; +} diff --git a/js/dojo-1.6/dojox/image/resources/Lightbox.html b/js/dojo-1.6/dojox/image/resources/Lightbox.html new file mode 100644 index 0000000..aca14ee --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/Lightbox.html @@ -0,0 +1,13 @@ +<div class="dojoxLightbox" dojoAttachPoint="containerNode"> + <div style="position:relative"> + <div dojoAttachPoint="imageContainer" class="dojoxLightboxContainer" dojoAttachEvent="onclick: _onImageClick"> + <img dojoAttachPoint="imgNode" src="${imgUrl}" class="dojoxLightboxImage" alt="${title}"> + <div class="dojoxLightboxFooter" dojoAttachPoint="titleNode"> + <div class="dijitInline LightboxClose" dojoAttachPoint="closeButtonNode"></div> + <div class="dijitInline LightboxNext" dojoAttachPoint="nextButtonNode"></div> + <div class="dijitInline LightboxPrev" dojoAttachPoint="prevButtonNode"></div> + <div class="dojoxLightboxText" dojoAttachPoint="titleTextNode"><span dojoAttachPoint="textNode">${title}</span><span dojoAttachPoint="groupCount" class="dojoxLightboxGroupText"></span></div> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/js/dojo-1.6/dojox/image/resources/Magnifier.css b/js/dojo-1.6/dojox/image/resources/Magnifier.css new file mode 100644 index 0000000..85eba72 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/Magnifier.css @@ -0,0 +1,5 @@ +.glassNode { + overflow:hidden; + position:absolute; + visibility:hidden; +} diff --git a/js/dojo-1.6/dojox/image/resources/SlideShow.css b/js/dojo-1.6/dojox/image/resources/SlideShow.css new file mode 100644 index 0000000..d1d76e7 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/SlideShow.css @@ -0,0 +1,111 @@ +/* dojox.image.SlideShow */ + +.slideShowWrapper { + position:relative; + background:#fff; + padding:8px; + border:1px solid #333; + padding-bottom:20px; + overflow:hidden; + -moz-border-radius:3pt; + -webkit-border-radius:4pt; + -webkit-drop-shadow:#ccc 4pt; +} +.slideShowNav { + position:absolute; + bottom:-18px; + left:0px; + padding:0px 3px 2px 0px; + background-color:#fff; + width:100%; +} +.slideShowNavWrapper { float:right; } +.slideShowTitle { + float:left; + color:#333; + font-size:10pt; +} +.slideShowTitle .slideShowCounterText { + font-size:6pt; color:#666; +} +.slideShowHidden { + position:absolute; + display: none; + height: 1px; + width: 1px; +} +.slideShowImageWrapper { + position:relative; + text-align: center; + margin-top: -42px; + float: left; + width: 100%; +} +.slideShowImageWrapper img { + border: 0px none; +} +.slideShowNotifier { + background-color: red; + width: 100px; + height: 5px; + font-size: 1%;/*IE hack to get around the Empty-Div bug*/ +} +.slideShowSlideShow { + position:absolute; + top:30px; + padding: 0 5px; + border: 0px; + text-decoration: none; + color: #2e6ab1; +} +.slideShowLoading { background-color: #fad66a; } +.slideShowLoaded { background-color: transparent; } +/* +.sprite-arrowbottom { background-position: 0 -30px; } +.sprite-arrowtop { background-position: 0 -430px; } +*/ +.slideShowCtrlPrev { + background-position: -96px 0px; + float: left; +} +.slideShowCtrlNext { + background-position: -144px 0px; + float: right; +} +.slideShowCtrlPlay { + background-position: -190px 0px; + position: absolute; +} +.slideShowPaused .slideShowCtrlPlay { + background-position: -236px 0px; + position: absolute; +} +.slideShowCtrl span.slideShowCtrlHide { + background-image: url("../../../dojo/resources/blank.gif"); + cursor: auto; +} + +.slideShowCtrl { + height: 50px; + width: 100%; + position: relative; + z-index:999; + float: left; +} +.slideShowCtrl span { + width: 50px; + height: 100%; + background-image: url("images/buttons.png"); + cursor: pointer; +} +.dj_ie .slideShowCtrl span { + background-image: url("images/buttons.gif"); +} + +.dj_ie6 .slideShowPager li.currentpage, +.dj_ie6 .pagination li.disablepage{ + /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/ + margin-right: 5px; + padding-right: 0; +} + diff --git a/js/dojo-1.6/dojox/image/resources/SlideShow.html b/js/dojo-1.6/dojox/image/resources/SlideShow.html new file mode 100644 index 0000000..fa4aca6 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/SlideShow.html @@ -0,0 +1,14 @@ +<div dojoAttachPoint="outerNode" class="slideShowWrapper"> + <div style="position:relative;" dojoAttachPoint="innerWrapper"> + <div class="slideShowNav" dojoAttachEvent="onclick: _handleClick"> + <div class="dijitInline slideShowTitle" dojoAttachPoint="titleNode">${title}</div> + </div> + <div dojoAttachPoint="navNode" class="slideShowCtrl" dojoAttachEvent="onclick: _handleClick"> + <span dojoAttachPoint="navPrev" class="slideShowCtrlPrev"></span> + <span dojoAttachPoint="navPlay" class="slideShowCtrlPlay"></span> + <span dojoAttachPoint="navNext" class="slideShowCtrlNext"></span> + </div> + <div dojoAttachPoint="largeNode" class="slideShowImageWrapper"></div> + <div dojoAttachPoint="hiddenNode" class="slideShowHidden"></div> + </div> +</div>
\ No newline at end of file diff --git a/js/dojo-1.6/dojox/image/resources/ThumbnailPicker.css b/js/dojo-1.6/dojox/image/resources/ThumbnailPicker.css new file mode 100644 index 0000000..54ace0b --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/ThumbnailPicker.css @@ -0,0 +1,129 @@ +/* dojox.image.ThumbnailPicker */ + +.thumbWrapper .thumbNav { + background-repeat: no-repeat; + background-position: center; + padding-top: 1px; + width: 30px; + height: 100%; +} + +.thumbOuter { + padding-bottom: 2px; +} + +.thumbOuter.thumbHoriz { + width: 500px; + height: 85px; +} + +.thumbOuter.thumbVert { + width: 100px; + height: 400px; +} + +.thumbOuter .enabled { + background: transparent url("images/buttons.png") no-repeat center center; +} +.dj_ie6 .thumbOuter .enabled { background-image: url("images/buttons.gif"); } + +.thumbOuter .thumbNav img { + width: 48px; + height: 75px; +} +.thumbOuter .thumbClickable div { + cursor: pointer; +} +.thumbOuter .prevHoriz { + background-position: -96px 12px; + position: relative; + float: left; + height: 100%; +} + +.thumbOuter .nextHoriz { + background-position: -144px 12px; + position: relative; + float: right; + height: 100%; +/* margin-top: -85px;*/ +} +.thumbOuter .prevVert { + background-position: 0px 0px; + height: 48px; + width:48px; + margin-left:24px; +} + +.thumbOuter .nextVert { + background-position: -48px 0px; + height: 48px; + width:48px; + margin-left:24px; +} + +.thumbWrapper img { + height: 75px; + max-width: 100px; + width: expression(this.width > 100 ? 100: true);/*IE Hack*/ +} + +.thumbWrapper .thumbNav .imageGalleryThumb { + height: 50px; +} + +.thumbWrapper .thumbNotifier { + background-color: red; + width: 0px; + margin-left: 2px; + height: 5px; + font-size: 1%;/*IE hack to get around the Empty-Div bug*/ +} + +.thumbWrapper .thumbLoaded { + background-color: transparent; +} + +.thumbScroller { + overflow-x: hidden; + overflow-y: hidden; + text-align: center; +} + +.thumbHoriz .thumbScroller { + width: 500px; + height: 85px; + float: left; +} + +.thumbVert .thumbScroller { + height: 500px; + width: 100px; +} + +.thumbWrapper { + float: left; +} + +.thumbVert .thumbWrapper { + width: 100px; + height: 10px; +} +.thumbHoriz .thumbWapper { + height:85px; + width: 10px; +} + +.thumbWrapper.thumbHoriz div { + float: left; + padding-right: 2px; +} + +.thumbWrapper.thumbVert { + width: 100px; +} + +.thumbWrapper.thumbVert div { + padding-bottom: 2px; +} + diff --git a/js/dojo-1.6/dojox/image/resources/ThumbnailPicker.html b/js/dojo-1.6/dojox/image/resources/ThumbnailPicker.html new file mode 100644 index 0000000..561ce2d --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/ThumbnailPicker.html @@ -0,0 +1,11 @@ +<div dojoAttachPoint="outerNode" class="thumbOuter"> + <div dojoAttachPoint="navPrev" class="thumbNav thumbClickable"> + <img src="" dojoAttachPoint="navPrevImg"/> + </div> + <div dojoAttachPoint="thumbScroller" class="thumbScroller"> + <div dojoAttachPoint="thumbsNode" class="thumbWrapper"></div> + </div> + <div dojoAttachPoint="navNext" class="thumbNav thumbClickable"> + <img src="" dojoAttachPoint="navNextImg"/> + </div> +</div>
\ No newline at end of file diff --git a/js/dojo-1.6/dojox/image/resources/image.css b/js/dojo-1.6/dojox/image/resources/image.css new file mode 100644 index 0000000..c4ea0a2 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/image.css @@ -0,0 +1,16 @@ +/* + This is the master CSS file for the dojox.image project, and provides all + needed definitions for the DojoX Image Project + + Before build, the files are individual. You can use image.css as a cacheable + single-file rollup, or link only the individual css you need (based on componenet + name) + +*/ +@import "Lightbox.css"; +@import "SlideShow.css"; +@import "ThumbnailPicker.css"; +@import "Gallery.css"; +@import "Badge.css"; +@import "Magnifier.css"; + diff --git a/js/dojo-1.6/dojox/image/resources/images/buttons.gif b/js/dojo-1.6/dojox/image/resources/images/buttons.gif Binary files differnew file mode 100644 index 0000000..5f9081f --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/buttons.gif diff --git a/js/dojo-1.6/dojox/image/resources/images/buttons.png b/js/dojo-1.6/dojox/image/resources/images/buttons.png Binary files differnew file mode 100644 index 0000000..306e2f8 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/buttons.png diff --git a/js/dojo-1.6/dojox/image/resources/images/close.gif b/js/dojo-1.6/dojox/image/resources/images/close.gif Binary files differnew file mode 100644 index 0000000..ca97265 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/close.gif diff --git a/js/dojo-1.6/dojox/image/resources/images/close.png b/js/dojo-1.6/dojox/image/resources/images/close.png Binary files differnew file mode 100644 index 0000000..1ac9d10 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/close.png diff --git a/js/dojo-1.6/dojox/image/resources/images/close_dark.png b/js/dojo-1.6/dojox/image/resources/images/close_dark.png Binary files differnew file mode 100644 index 0000000..105fe55 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/close_dark.png diff --git a/js/dojo-1.6/dojox/image/resources/images/left.gif b/js/dojo-1.6/dojox/image/resources/images/left.gif Binary files differnew file mode 100644 index 0000000..8db89c4 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/left.gif diff --git a/js/dojo-1.6/dojox/image/resources/images/left.png b/js/dojo-1.6/dojox/image/resources/images/left.png Binary files differnew file mode 100644 index 0000000..0848dba --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/left.png diff --git a/js/dojo-1.6/dojox/image/resources/images/loading.gif b/js/dojo-1.6/dojox/image/resources/images/loading.gif Binary files differnew file mode 100644 index 0000000..e4ab783 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/loading.gif diff --git a/js/dojo-1.6/dojox/image/resources/images/right.gif b/js/dojo-1.6/dojox/image/resources/images/right.gif Binary files differnew file mode 100644 index 0000000..adfc443 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/right.gif diff --git a/js/dojo-1.6/dojox/image/resources/images/right.png b/js/dojo-1.6/dojox/image/resources/images/right.png Binary files differnew file mode 100644 index 0000000..7cab686 --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/right.png diff --git a/js/dojo-1.6/dojox/image/resources/images/warning.png b/js/dojo-1.6/dojox/image/resources/images/warning.png Binary files differnew file mode 100644 index 0000000..a52a55f --- /dev/null +++ b/js/dojo-1.6/dojox/image/resources/images/warning.png |
