+++ /dev/null
-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("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:"<div dojoAttachPoint=\"outerNode\" class=\"thumbOuter\">\n\t<div dojoAttachPoint=\"navPrev\" class=\"thumbNav thumbClickable\">\n\t <img src=\"\" dojoAttachPoint=\"navPrevImg\"/> \n\t</div>\n\t<div dojoAttachPoint=\"thumbScroller\" class=\"thumbScroller\">\n\t <div dojoAttachPoint=\"thumbsNode\" class=\"thumbWrapper\"></div>\n\t</div>\n\t<div dojoAttachPoint=\"navNext\" class=\"thumbNav thumbClickable\">\n\t <img src=\"\" dojoAttachPoint=\"navNextImg\"/> \n\t</div>\n</div>\n",
- tempImgPath: dojo.moduleUrl("dojo", "resources/blank.gif"),
-
- // 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.isScrollable) {
- // FIXME: does this break builds or anything?
- dojo.require("dojox.fx.scroll");
- dojo.require("dojox.fx.easing");
- }
- 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);
-
- this.navNextImg.setAttribute("src", this.tempImgPath);
- this.navPrevImg.setAttribute("src", this.tempImgPath);
-
- 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;
-
- 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){
- // dojo.event.browser.clean(img);
- if(img.parentNode){
- img.parentNode.removeChild(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);
- },
-
- _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){
- 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:dojox.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 ++;}
-
- //Define the function to call when the items have been
- //returned from the data store.
- var complete = function(items, request){
- 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.debug("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){
- var url = this.imageStore.getValue(data,this.imageThumbAttr);
- var img = document.createElement("img");
- var imgContainer = document.createElement("div");
- imgContainer.setAttribute("id","img_" + this.widgetid+"_"+index);
- imgContainer.appendChild(img);
- img._index = index;
- img._data = data;
-
- this._thumbs[index] = imgContainer;
- var loadingDiv;
- if(this.useLoadNotifier){
- loadingDiv = document.createElement("div");
- loadingDiv.setAttribute("id","loadingDiv_" + this.widgetid+"_"+index);
-
- //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");
-
- imgContainer.appendChild(loadingDiv);
- }
- 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, function(){
- var realSize = dojo.marginBox(img)[sizeParam];
- this._totalSize += (Number(realSize) + 4);
- dojo.style(this.thumbsNode, this._sizeProperty, this._totalSize + "px");
-
- if(this.useLoadNotifier){dojo.style(loadingDiv, "width", (img.width - 4) + "px"); }
- callback();
- 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);
- }
-});
-
-}
projects / eow / blobdiff