diff options
Diffstat (limited to 'includes/js/dojox/image')
37 files changed, 3310 insertions, 0 deletions
diff --git a/includes/js/dojox/image/Gallery.js b/includes/js/dojox/image/Gallery.js new file mode 100644 index 0000000..d29ae22 --- /dev/null +++ b/includes/js/dojox/image/Gallery.js @@ -0,0 +1,182 @@ +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:"<div dojoAttachPoint=\"outerNode\" class=\"imageGalleryWrapper\">\n\t<div dojoAttachPoint=\"thumbPickerNode\"></div>\n\t<div dojoAttachPoint=\"slideShowNode\"></div>\n</div>\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, + 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){ + //if(packet.index < _this.thumbPicker._thumbIndex + // || packet.index > _this.thumbPicker._thumbIndex + _this.thumbPicker.numberThumbs -1){ + //if(!_this.thumbPicker.isVisible(packet.index)){ + //var index = packet.index - (packet.index % _this.thumbPicker.numberThumbs); + _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(){ + // 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); + }, + + _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/includes/js/dojox/image/Lightbox.js b/includes/js/dojox/image/Lightbox.js new file mode 100644 index 0000000..79056d3 --- /dev/null +++ b/includes/js/dojox/image/Lightbox.js @@ -0,0 +1,451 @@ +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("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, + + // _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); + }, + + 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; + } + +}); + +dojo.declare("dojox.image._LightboxDialog", + dijit.Dialog,{ + // summary: + // The "dialog" shared between any Lightbox instances on the page + // + // 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 to 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) + // + // 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: "", + + // 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, + + // 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"), + + // privates: + _imageReady: false, + _blankImg: dojo.moduleUrl("dojo","resources/blank.gif"), + _clone: null, // the "untained" image + _wasStyled: null, // indicating taint on the imgNode + + // animation holders: + _loadingAnim:null, + _showImageAnim: null, + _showNavAnim: null, + _animConnects: [], + + templateString:"<div class=\"dojoxLightbox\" dojoAttachPoint=\"containerNode\">\n\t<div style=\"position:relative\">\n\t\t<div dojoAttachPoint=\"imageContainer\" class=\"dojoxLightboxContainer\">\n\t\t\t<img dojoAttachPoint=\"imgNode\" src=\"${imgUrl}\" class=\"dojoxLightboxImage\" alt=\"${title}\">\n\t\t\t<div class=\"dojoxLightboxFooter\" dojoAttachPoint=\"titleNode\">\n\t\t\t\t<div class=\"dijitInline LightboxClose\" dojoAttachPoint=\"closeNode\"></div>\n\t\t\t\t<div class=\"dijitInline LightboxNext\" dojoAttachPoint=\"nextNode\"></div>\t\n\t\t\t\t<div class=\"dijitInline LightboxPrev\" dojoAttachPoint=\"prevNode\"></div>\n\n\t\t\t\t<div class=\"dojoxLightboxText\"><span dojoAttachPoint=\"textNode\">${title}</span><span dojoAttachPoint=\"groupCount\" class=\"dojoxLightboxGroupText\"></span></div>\n\t\t\t</div>\n\t\t</div>\t\n\t\t\n\t</div>\n</div>\n", + + startup: function(){ + // summary: Add some extra event handlers, and startup our superclass. + + this.inherited(arguments); + this._clone = dojo.clone(this.imgNode); + this.connect(document.documentElement,"onkeypress","_handleKey"); + this.connect(window,"onresize","_position"); + this.connect(this.nextNode, "onclick", "_nextImage"); + this.connect(this.prevNode, "onclick", "_prevImage"); + this.connect(this.closeNode, "onclick", "hide"); + this._makeAnims(); + this._vp = dijit.getViewport(); + + }, + + 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 + + // we only need to call dijit.Dialog.show() if we're not already open. + if(!_t.open){ _t.inherited(arguments); } + + if(this._wasStyled){ + // ugly fix for IE being stupid: + dojo._destroyElement(_t.imgNode); + _t.imgNode = dojo.clone(_t._clone); + dojo.place(_t.imgNode,_t.imageContainer,"first"); + _t._makeAnims(); + _t._wasStyled = false; + } + + dojo.style(_t.imgNode,"opacity","0"); + dojo.style(_t.titleNode,"opacity","0"); + + _t._imageReady = false; + _t.imgNode.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._positionIndex = i; + } + },_t); + } + if(!_t._positionIndex){ + _t._positionIndex=0; + _t.imgNode.src = _t.inGroup[_t._positionIndex].href; + } + // FIXME: implement titleTemplate + _t.groupCount.innerHTML = " (" +(_t._positionIndex+1) +" of "+_t.inGroup.length+")"; + _t.prevNode.style.visibility = "visible"; + _t.nextNode.style.visibility = "visible"; + }else{ + // single images don't have buttons, or counters: + _t.groupCount.innerHTML = ""; + _t.prevNode.style.visibility = "hidden"; + _t.nextNode.style.visibility = "hidden"; + } + _t.textNode.innerHTML = groupData.title; + + if(!_t._imageReady || _t.imgNode.complete === true){ + // connect to the onload of the image + _t._imgConnect = dojo.connect(_t.imgNode, "onload", _t, function(){ + _t._imageReady = true; + _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); } + }); + + // listen for 404's: + _t._imgError = dojo.connect(_t.imgNode, "onerror", _t, function(){ + dojo.disconnect(_t._imgError); + // trigger the above onload with a new src: + _t.imgNode.src = _t.errorImg; + _t._imageReady = true; + _t.textNode.innerHTML = _t.errorMessage; + }); + + // onload doesn't fire in IE if you connect before you set the src. + // hack to re-set the src after onload connection made: + if(dojo.isIE){ _t.imgNode.src = _t.imgNode.src; } + + }else{ + // do it quickly. kind of a hack, but image is ready now + _t.resizeTo({ w: _t.imgNode.width, h: _t.imgNode.height, duration: 1 }); + } + + }, + + _nextImage: function(){ + // summary: Load next image in group + if(!this.inGroup){ return; } + if(this._positionIndex+1<this.inGroup.length){ + this._positionIndex++; + }else{ + this._positionIndex = 0; + } + this._loadImage(); + }, + + _prevImage: function(){ + // summary: Load previous image in group + + if(this.inGroup){ + if(this._positionIndex == 0){ + this._positionIndex = this.inGroup.length - 1; + }else{ + this._positionIndex--; + } + 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; + this.show({ + href: this.inGroup[this._positionIndex].href, + title: this.inGroup[this._positionIndex].title + }); + }, + + resizeTo: function(/* Object */size){ + // summary: Resize our dialog container, and fire _showImage + + if(this.adjust && (size.h + 80 > this._vp.h || size.w + 50 > this._vp.w)){ + size = this._scaleToFit(size); + } + + var _sizeAnim = dojox.fx.sizeTo({ + node: this.containerNode, + duration: size.duration||this.duration, + width: size.w, + height: size.h + 30 + }); + this.connect(_sizeAnim,"onEnd","_showImage"); + _sizeAnim.play(15); + }, + + _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. + this._showNavAnim.play(1); + }, + + hide: function(){ + // summary: Hide the Master Lightbox + dojo.fadeOut({node:this.titleNode, duration:200, + onEnd: dojo.hitch(this,function(){ + // refs #5112 - if you _don't_ change the .src, safari will _never_ fire onload for this image + this.imgNode.src = this._blankImg; + }) + }).play(5); + this.inherited(arguments); + this.inGroup = null; + this._positionIndex = 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); } + }, + + _handleKey: function(/* Event */e){ + // summary: Handle keyboard navigation internally + if(!this.open){ return; } + + var dk = dojo.keys; + var key = (e.charCode == dk.SPACE ? dk.SPACE : e.keyCode); + switch(key){ + + 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; + } + }, + + _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 = {}; + + // one of the dimensions is too big, go with the smaller viewport edge: + if(this._vp.h > this._vp.w){ + // don't actually touch the edges: + ns.w = this._vp.w - 70; + ns.h = ns.w * (size.h / size.w); + }else{ + // give a little room for the titlenode, too: + ns.h = this._vp.h - 80; + ns.w = ns.h * (size.w / size.h); + } + + // trigger the nasty width="auto" workaround in show() + this._wasStyled = true; + + // we actually have to style this image, it's too big + var s = this.imgNode.style; + s.height = ns.h + "px"; + s.width = ns.w + "px"; + + ns.duration = size.duration; + return ns; // Object + + }, + + _position: function(/* Event */e){ + // summary: we want to know the viewport size any time it changes + this.inherited(arguments); + this._vp = dijit.getViewport(); + }, + + _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 }); + } +}); + +} diff --git a/includes/js/dojox/image/Magnifier.js b/includes/js/dojox/image/Magnifier.js new file mode 100644 index 0000000..b6a3923 --- /dev/null +++ b/includes/js/dojox/image/Magnifier.js @@ -0,0 +1,75 @@ +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.doc.createElement('div'); + this.surfaceNode = this.glassNode.appendChild(dojo.doc.createElement('div')); + + dojo.addClass(this.glassNode,"glassNode"); + dojo.body().appendChild(this.glassNode); + + with(this.glassNode.style){ + height = this.glassSize + "px"; + width = this.glassSize + "px"; + } + + 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; + var y = e.pageY - 2 ; + var xMax = this.offset.x + this.offset.w + 2; + var 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; + var yOff = (e.pageY - this.offset.t) / this.offset.h; + var x = (this._zoomSize.w * xOff * -1)+(this.glassSize*xOff); + var y = (this._zoomSize.h * yOff * -1)+(this.glassSize*yOff); + // set the image offset + this.img.setShape({ x: x, y:y }); + + } + +}); + +} diff --git a/includes/js/dojox/image/MagnifierLite.js b/includes/js/dojox/image/MagnifierLite.js new file mode 100644 index 0000000..2e37340 --- /dev/null +++ b/includes/js/dojox/image/MagnifierLite.js @@ -0,0 +1,126 @@ +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 + + this.glassNode = dojo.doc.createElement('div'); + this.surfaceNode = this.glassNode.appendChild(dojo.doc.createElement('div')); + dojo.addClass(this.glassNode,"glassNode"); + dojo.body().appendChild(this.glassNode); + with(this.glassNode.style){ + height = this.glassSize + "px"; + width = this.glassSize + "px"; + } + + this.img = dojo.doc.createElement('img'); + this.glassNode.appendChild(this.img); + this.img.src = this.domNode.src; + // float the image around inside the .glassNode + with(this.img.style){ + 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); + with(this.glassNode.style){ + visibility = "visible"; + display = ""; + } + + }, + + _hideGlass: function(e){ + // summary: hide the overlay + this.glassNode.style.visibility = "hidden"; + this.glassNode.style.display = "none"; + }, + + _placeGlass: function(e){ + // summary: position the overlay centered under the cursor + + this._setImage(e); + var t = Math.floor(e.pageY - (this.glassSize/2)); + var l = Math.floor(e.pageX - (this.glassSize/2)); + dojo.style(this.glassNode,"top",t); + dojo.style(this.glassNode,"left",l); + + }, + + _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; + var yOff = (e.pageY - this.offset.t) / this.offset.h; + var x = (this._zoomSize.w * xOff * -1)+(this.glassSize*xOff); + var y = (this._zoomSize.h * yOff * -1)+(this.glassSize*yOff); + with(this.img.style){ + top = y+"px"; + left = x+"px"; + } + + } + +}); + +} diff --git a/includes/js/dojox/image/README b/includes/js/dojox/image/README new file mode 100644 index 0000000..38e9c3d --- /dev/null +++ b/includes/js/dojox/image/README @@ -0,0 +1,66 @@ +------------------------------------------------------------------------------- +dojox.image +------------------------------------------------------------------------------- +Version 1.0 +Release date: 10/31/07 +------------------------------------------------------------------------------- +Project state: +prototype | experimental +------------------------------------------------------------------------------- +Credits + Peter Higgins (dante) + Shane O'Sullivan (shaneosullivan1@gmail.com) +------------------------------------------------------------------------------- +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: dojo core, dijit._Widget, dojox.gfx + +------------------------------------------------------------------------------- +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. (experimental) diff --git a/includes/js/dojox/image/SlideShow.js b/includes/js/dojox/image/SlideShow.js new file mode 100644 index 0000000..4767cf1 --- /dev/null +++ b/includes/js/dojox/image/SlideShow.js @@ -0,0 +1,598 @@ +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:"<div dojoAttachPoint=\"outerNode\" class=\"slideShowWrapper\">\n\t<div style=\"position:relative;\" dojoAttachPoint=\"innerWrapper\">\n\t\t<div class=\"slideShowNav\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<div class=\"dijitInline slideShowTitle\" dojoAttachPoint=\"titleNode\">${title}</div>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"navNode\" class=\"slideShowCtrl\" dojoAttachEvent=\"onclick: _handleClick\">\n\t\t\t<span dojoAttachPoint=\"navPrev\" class=\"slideShowCtrlPrev\"></span>\n\t\t\t<span dojoAttachPoint=\"navPlay\" class=\"slideShowCtrlPlay\"></span>\n\t\t\t<span dojoAttachPoint=\"navNext\" class=\"slideShowCtrlNext\"></span>\n\t\t</div>\n\t\t<div dojoAttachPoint=\"largeNode\" class=\"slideShowImageWrapper\"></div>\t\t\n\t\t<div dojoAttachPoint=\"hiddenNode\" class=\"slideShowHidden\"></div>\n\t</div>\n</div>\n", + + // _tempImgPath: URL + // URL to the image to display when an image is not yet fully loaded. + _tempImgPath: dojo.moduleUrl("dojo", "resources/blank.gif"), + + // _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", function(evt){ + try{_this._showNav();} + catch(e){} //TODO: remove try/catch + }); + dojo.connect(this.outerNode, "onmouseout", function(evt){ + try{_this._hideNav(evt);} + catch(e){} //TODO: remove try/catch + }); + } + + this.outerNode.style.width = this.imageWidth + "px"; + + img.setAttribute("src", this._tempImgPath); + var _this = this; + + this.largeNode.appendChild(img); + this._tmpImage = this._currentImage = img; + this._fitSize(true); + + this._loadImage(0, function(){ + _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){ + _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){ + _this.showImage(0); + _this._request.onComplete = null; + if(_this.autoStart){ + _this.toggleSlideShow(); + } + }; + + 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. + while(this.largeNode.firstChild){ + this.largeNode.removeChild(this.largeNode.firstChild); + } + this.largeNode.appendChild(this._tmpImage); + while(this.hiddenNode.firstChild){ + this.hiddenNode.removeChild(this.hiddenNode.firstChild); + } + 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; + } + } + var _this = this; + this.showImage(this.imageIndex + 1, function(){ + if(inTimer){ _this._startTimer(); } + }); + return true; + }, + + toggleSlideShow: function(){ + // summary: Switches the slideshow mode on and off. + if(this._slideId){ + this._stop(); + }else{ + dojo.toggleClass(this.domNode,"slideShowPaused"); + this._timerCancelled = false; + var success = this.showNextImage(true, true); + if(!success){ + this._stop(); + } + } + }, + + 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); + } + _this.images[index].style.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;} + 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(){ + dojo.publish(_this.getLoadTopicName(), [index]); + _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(){ + if(!this.fixedHeight){return 0;} + // summary: Returns the padding to place at the top of the image to center it vertically. + 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.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 loadIt = function(item){ + var url = _this.imageStore.getValue(item, _this.imageLargeAttr); + var img = document.createElement("img"); + var div = document.createElement("div"); + div._img = img; + + var link = _this.imageStore.getValue(item,_this.linkAttr); + if(!link || _this.noLink){ div.appendChild(img); + }else{ + var a = document.createElement("a"); + a.setAttribute("href", link); + a.setAttribute("target","_blank"); + div.appendChild(a); + a.appendChild(img); + } + + div.setAttribute("id",_this.id + "_imageDiv" + index); + dojo.connect(img, "onload", function(){ + _this._fitImage(img); + div.setAttribute("width",_this.imageWidth); + div.setAttribute("height",_this.imageHeight); + + dojo.publish(_this.getLoadTopicName(), [index]); + _this._loadNextImage(); + if(callbackFn){ callbackFn(); } + }); + _this.hiddenNode.appendChild(div); + + var titleDiv = document.createElement("div"); + dojo.addClass(titleDiv, "slideShowTitle"); + div.appendChild(titleDiv); + + _this.images[index] = div; + img.setAttribute("src", url); + + var title = _this.imageStore.getValue(item,_this.titleAttr); + if(title){ img.setAttribute("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, 99); + + 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", ""); + dojo.style(this.navNode, "top", ""); + }, + + _setTitle: function(title){ + // summary: Sets the title of the image to be 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.setAttribute("height", height + "px"); + img.setAttribute("width", this.imageWidth + "px"); + } + if(height > this.imageHeight){ + width = Math.floor(width * (this.imageHeight / height)); + img.setAttribute("height", this.imageHeight + "px"); + img.setAttribute("width", width + "px"); + } + }, + + _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"); + dojo.style(this.navPlay, "marginLeft", "0px"); + 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/includes/js/dojox/image/ThumbnailPicker.js b/includes/js/dojox/image/ThumbnailPicker.js new file mode 100644 index 0000000..42f9862 --- /dev/null +++ b/includes/js/dojox/image/ThumbnailPicker.js @@ -0,0 +1,535 @@ +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); + } +}); + +} diff --git a/includes/js/dojox/image/resources/Gallery.html b/includes/js/dojox/image/resources/Gallery.html new file mode 100644 index 0000000..571dc4f --- /dev/null +++ b/includes/js/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/includes/js/dojox/image/resources/Lightbox.html b/includes/js/dojox/image/resources/Lightbox.html new file mode 100644 index 0000000..1eb292f --- /dev/null +++ b/includes/js/dojox/image/resources/Lightbox.html @@ -0,0 +1,15 @@ +<div class="dojoxLightbox" dojoAttachPoint="containerNode"> + <div style="position:relative"> + <div dojoAttachPoint="imageContainer" class="dojoxLightboxContainer"> + <img dojoAttachPoint="imgNode" src="${imgUrl}" class="dojoxLightboxImage" alt="${title}"> + <div class="dojoxLightboxFooter" dojoAttachPoint="titleNode"> + <div class="dijitInline LightboxClose" dojoAttachPoint="closeNode"></div> + <div class="dijitInline LightboxNext" dojoAttachPoint="nextNode"></div> + <div class="dijitInline LightboxPrev" dojoAttachPoint="prevNode"></div> + + <div class="dojoxLightboxText"><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/includes/js/dojox/image/resources/Magnifier.css b/includes/js/dojox/image/resources/Magnifier.css new file mode 100644 index 0000000..85eba72 --- /dev/null +++ b/includes/js/dojox/image/resources/Magnifier.css @@ -0,0 +1,5 @@ +.glassNode { + overflow:hidden; + position:absolute; + visibility:hidden; +} diff --git a/includes/js/dojox/image/resources/Magnifier.css.commented.css b/includes/js/dojox/image/resources/Magnifier.css.commented.css new file mode 100644 index 0000000..85eba72 --- /dev/null +++ b/includes/js/dojox/image/resources/Magnifier.css.commented.css @@ -0,0 +1,5 @@ +.glassNode { + overflow:hidden; + position:absolute; + visibility:hidden; +} diff --git a/includes/js/dojox/image/resources/SlideShow.html b/includes/js/dojox/image/resources/SlideShow.html new file mode 100644 index 0000000..fa4aca6 --- /dev/null +++ b/includes/js/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/includes/js/dojox/image/resources/ThumbnailPicker.html b/includes/js/dojox/image/resources/ThumbnailPicker.html new file mode 100644 index 0000000..561ce2d --- /dev/null +++ b/includes/js/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/includes/js/dojox/image/resources/image.css b/includes/js/dojox/image/resources/image.css new file mode 100644 index 0000000..e626e0f --- /dev/null +++ b/includes/js/dojox/image/resources/image.css @@ -0,0 +1,283 @@ + +.dijitDialogUnderlay { + background-color:#000; +} +.dojoxLightbox { + position:absolute; + z-index:999; + overflow:hidden; + width:100px; + height:100px; + border:11px solid #fff; + background:#fff url('images/loading.gif') no-repeat center center; + + -webkit-box-shadow: 0px 6px 10px #636363; + -webkit-border-radius: 3px; + -moz-border-radius:4px; +} +.dojoxLightboxContainer { + position:absolute; + top:0; left:0; +} +.dojoxLightboxFooter { + height:50px; + 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; +} +.nihilo .LightboxClose, +.tundra .LightboxClose { + background:url('images/close.png') no-repeat center center; +} +.nihilo .LightboxNext, +.tundra .LightboxNext { + background:url('images/right.png') no-repeat center center; +} +.nihilo .LightboxPrev, +.tundra .LightboxPrev { + background:url('images/left.png') no-repeat center center; +} +.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; +} +.slideShowWrapper { + position:relative; + background:#fff; + padding:8px; + border:1px solid #333; + padding-bottom:20px; + overflow:hidden; + text-align: center; + -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%; +} +.slideShowSlideShow { + position:absolute; + top:30px; + padding: 0 5px; + border: 0px; + text-decoration: none; + color: #2e6ab1; +} +.slideShowLoading { background-color: #fad66a; } +.slideShowLoaded { background-color: transparent; } +.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_ie6 .slideShowCtrl span { + background-image: url("images/buttons.gif"); +} +.dj_ie6 .slideShowPager li.currentpage, +.dj_ie6 .pagination li.disablepage{ + + margin-right: 5px; + padding-right: 0; +} +.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%; +} +.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); +} +.thumbWrapper .thumbNav .imageGalleryThumb { + height: 50px; +} +.thumbWrapper .thumbNotifier { + background-color: red; + width: 0px; + margin-left: 2px; + height: 5px; + font-size: 1%; +} +.thumbWrapper .thumbLoaded { + background-color: transparent; +} +.thumbScroller { + overflow-x: hidden; + overflow-y: hidden; + white-space: nowrap; + 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; +} +.imageGalleryWrapper { + padding-bottom: 20px; + text-align: center; +} diff --git a/includes/js/dojox/image/resources/image.css.commented.css b/includes/js/dojox/image/resources/image.css.commented.css new file mode 100644 index 0000000..3539a71 --- /dev/null +++ b/includes/js/dojox/image/resources/image.css.commented.css @@ -0,0 +1,345 @@ +/* + This is the master CSS file for the dojox.image project, and provides all + needed definitions for: + + dojox.image.Lightbox + dojox.image.Gallery [which is a combination of:] + dojox.image.SlideShow + dojox.image.ThumbNailPicker + +*/ + + +/* 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 ... */ +.dijitDialogUnderlay { + background-color:#000; +} + +.dojoxLightbox { + position:absolute; + z-index:999; + overflow:hidden; + width:100px; + height:100px; + border:11px solid #fff; + 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; +} + +.dojoxLightboxContainer { + position:absolute; + top:0; left:0; +} + +.dojoxLightboxFooter { + height:50px; + 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 */ + +.nihilo .LightboxClose, +.tundra .LightboxClose { + background:url('images/close.png') no-repeat center center; +} +.nihilo .LightboxNext, +.tundra .LightboxNext { + background:url('images/right.png') no-repeat center center; +} +.nihilo .LightboxPrev, +.tundra .LightboxPrev { + background:url('images/left.png') 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; +} + + + +/* dojox.image.SlideShow */ + +.slideShowWrapper { + position:relative; + background:#fff; + padding:8px; + border:1px solid #333; + padding-bottom:20px; + overflow:hidden; + text-align: center; + -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_ie6 .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; +} + +/* 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; + white-space: nowrap; + 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; +} + +/* dojox.image.Gallery */ + +.imageGalleryWrapper { + padding-bottom: 20px; + text-align: center; +} diff --git a/includes/js/dojox/image/resources/images/buttons.gif b/includes/js/dojox/image/resources/images/buttons.gif Binary files differnew file mode 100644 index 0000000..5f9081f --- /dev/null +++ b/includes/js/dojox/image/resources/images/buttons.gif diff --git a/includes/js/dojox/image/resources/images/buttons.png b/includes/js/dojox/image/resources/images/buttons.png Binary files differnew file mode 100644 index 0000000..306e2f8 --- /dev/null +++ b/includes/js/dojox/image/resources/images/buttons.png diff --git a/includes/js/dojox/image/resources/images/close.png b/includes/js/dojox/image/resources/images/close.png Binary files differnew file mode 100644 index 0000000..1ac9d10 --- /dev/null +++ b/includes/js/dojox/image/resources/images/close.png diff --git a/includes/js/dojox/image/resources/images/close_dark.png b/includes/js/dojox/image/resources/images/close_dark.png Binary files differnew file mode 100644 index 0000000..105fe55 --- /dev/null +++ b/includes/js/dojox/image/resources/images/close_dark.png diff --git a/includes/js/dojox/image/resources/images/left.png b/includes/js/dojox/image/resources/images/left.png Binary files differnew file mode 100644 index 0000000..0848dba --- /dev/null +++ b/includes/js/dojox/image/resources/images/left.png diff --git a/includes/js/dojox/image/resources/images/loading.gif b/includes/js/dojox/image/resources/images/loading.gif Binary files differnew file mode 100644 index 0000000..e4ab783 --- /dev/null +++ b/includes/js/dojox/image/resources/images/loading.gif diff --git a/includes/js/dojox/image/resources/images/right.png b/includes/js/dojox/image/resources/images/right.png Binary files differnew file mode 100644 index 0000000..7cab686 --- /dev/null +++ b/includes/js/dojox/image/resources/images/right.png diff --git a/includes/js/dojox/image/resources/images/warning.png b/includes/js/dojox/image/resources/images/warning.png Binary files differnew file mode 100644 index 0000000..a52a55f --- /dev/null +++ b/includes/js/dojox/image/resources/images/warning.png diff --git a/includes/js/dojox/image/tests/images.json b/includes/js/dojox/image/tests/images.json new file mode 100644 index 0000000..bd0cf96 --- /dev/null +++ b/includes/js/dojox/image/tests/images.json @@ -0,0 +1,32 @@ +{ items: [ + { + "thumb":"images/extraWide.jpg", + "large":"images/extraWide.jpg", + "title":"I'm wide, me", + "link":"http://www.flickr.com/photos/44153025@N00/748348847" + }, + { + "thumb":"images/imageHoriz.jpg", + "large":"images/imageHoriz.jpg", + "title":"I'm a horizontal picture", + "link":"http://www.flickr.com/photos/44153025@N00/735656038" + }, + { + "thumb":"images/imageHoriz2.jpg", + "large":"images/imageHoriz2.jpg", + "title":"I'm another horizontal picture", + "link":"http://www.flickr.com/photos/44153025@N00/714540483" + }, + { + "thumb":"images/imageVert.jpg", + "large":"images/imageVert.jpg", + "title":"I'm a vertical picture", + "link":"http://www.flickr.com/photos/44153025@N00/715392758" + }, + { + "large":"images/square.jpg", + "thumb":"images/square.jpg", + "link" :"images/square.jpg", + "title":"1:1 aspect ratio" + } +]}
\ No newline at end of file diff --git a/includes/js/dojox/image/tests/images/extraWide.jpg b/includes/js/dojox/image/tests/images/extraWide.jpg Binary files differnew file mode 100644 index 0000000..2161825 --- /dev/null +++ b/includes/js/dojox/image/tests/images/extraWide.jpg diff --git a/includes/js/dojox/image/tests/images/huuuge.png b/includes/js/dojox/image/tests/images/huuuge.png Binary files differnew file mode 100644 index 0000000..ee98a39 --- /dev/null +++ b/includes/js/dojox/image/tests/images/huuuge.png diff --git a/includes/js/dojox/image/tests/images/imageHoriz.jpg b/includes/js/dojox/image/tests/images/imageHoriz.jpg Binary files differnew file mode 100644 index 0000000..3948416 --- /dev/null +++ b/includes/js/dojox/image/tests/images/imageHoriz.jpg diff --git a/includes/js/dojox/image/tests/images/imageHoriz2.jpg b/includes/js/dojox/image/tests/images/imageHoriz2.jpg Binary files differnew file mode 100644 index 0000000..fbbf404 --- /dev/null +++ b/includes/js/dojox/image/tests/images/imageHoriz2.jpg diff --git a/includes/js/dojox/image/tests/images/imageVert.jpg b/includes/js/dojox/image/tests/images/imageVert.jpg Binary files differnew file mode 100644 index 0000000..1652338 --- /dev/null +++ b/includes/js/dojox/image/tests/images/imageVert.jpg diff --git a/includes/js/dojox/image/tests/images/spanke.jpg b/includes/js/dojox/image/tests/images/spanke.jpg Binary files differnew file mode 100644 index 0000000..ec95fb0 --- /dev/null +++ b/includes/js/dojox/image/tests/images/spanke.jpg diff --git a/includes/js/dojox/image/tests/images/square.jpg b/includes/js/dojox/image/tests/images/square.jpg Binary files differnew file mode 100644 index 0000000..9094d5a --- /dev/null +++ b/includes/js/dojox/image/tests/images/square.jpg diff --git a/includes/js/dojox/image/tests/test_Gallery.html b/includes/js/dojox/image/tests/test_Gallery.html new file mode 100644 index 0000000..320c481 --- /dev/null +++ b/includes/js/dojox/image/tests/test_Gallery.html @@ -0,0 +1,67 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> + <title>Testing the Image Gallery</title> + + <style type="text/css"> + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../resources/image.css"; + </style> + + + <script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../ThumbnailPicker.js"></script> + <script type="text/javascript" src="../SlideShow.js"></script> + <script type="text/javascript" src="../Gallery.js"></script> + <script type="text/javascript" src="../../../dojo/data/util/simpleFetch.js"></script> + <script type="text/javascript" src="../../data/FlickrStore.js"></script> + <script type="text/javascript" src="../../data/FlickrRestStore.js"></script> + <script type="text/javascript" src="../../../dojo/data/ItemFileReadStore.js"></script> + + <script type="text/javascript"> + // dojo.require("dojox.image.Gallery"); + dojo.require("dojox.data.FlickrRestStore"); + dojo.require("dojo.parser"); // find widgets + + dojo.addOnLoad(function(){ + var flickrRestStore = new dojox.data.FlickrRestStore(); + var req = { + query: { + userid: "44153025@N00", + apikey: "8c6803164dbc395fb7131c9d54843627", + sort: [ + { + attribute: "interestingness", + descending: true + } + ], + // tags: ["superhorse", "redbones", "beachvolleyball"], + tag_mode: "any" + }, + count: 20 + }; + dijit.byId('gallery1').setDataStore(flickrRestStore, req); +/* + dijit.byId('gallery2').setDataStore(imageItemStore,{ count:20 },{ + imageThumbAttr: "thumb", + imageLargeAttr: "large" + }); +*/ + }); + </script> +</head> +<body> + <h1 class="testTitle">dojox.image.Gallery</h1> + + <h2>From FlickrRestStore:</h2> + <div id="gallery1" dojoType="dojox.image.Gallery" imageWidth="700" imageHeight="500"></div> + +<!-- + <h2>From ItemFileReadStore:</h2> + <div id="gallery2" dojoType="dojox.image.Gallery"></div> +--> + +</body> +</html> diff --git a/includes/js/dojox/image/tests/test_Lightbox.html b/includes/js/dojox/image/tests/test_Lightbox.html new file mode 100644 index 0000000..15b34c8 --- /dev/null +++ b/includes/js/dojox/image/tests/test_Lightbox.html @@ -0,0 +1,105 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.image.Lightbox Tests | The Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../Lightbox.js"></script> + <script type="text/javascript"> + // dojo.require("dojox.image.Lightbox"); // un-comment when not debugging + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + dojo.require("dojox.data.FlickrStore"); + </script> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + + /* you need this file */ + @import "../resources/image.css"; + + body, html { width:100%; height:100%; margin:0; padding:0; } + + </style> + + <script type="text/javascript"> + // programatic flickrstore implementation [basic] + function onComplete(items,request){ + if (items.length>0){ + dojo.forEach(items,function(item){ + var part = { + title: flickrStore.getValue(item,"title"), + href: flickrStore.getValue(item,"imageUrl") + }; + // FIXME: make addImage more accessible, or do this internally + // _attachedDialog is dijit.byId("dojoxLightboxDialog"), and the + // is only one per page. + dijit.byId('fromStore')._attachedDialog.addImage(part,"flickrStore"); + }); + dojo.byId('flickrButton').disabled = false; + } + } + + function onError(error,request){ + console.warn(error,request); + } + + function init(){ + var flickrRequest = { + query: {}, + onComplete: onComplete, + onError: onError, + userid: "jetstreet", + tags: "jetstreet", + count: 10 + }; + flickrStore.fetch(flickrRequest); + } + dojo.addOnLoad(init); + </script> + + +</head> +<body> + +<div style="padding:20px;"> + <h1 class="testTitle">a Dojo based Lightbox implementation:</h1> + + <h3>Individual</h3> + <p> + <a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" title="More Guatemala...">tall</a> + <a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" title="Antigua, Guatemala">4:3 image</a> + <a href="images/broken.jpg" dojoType="dojox.image.Lightbox" title="broken href example">Broken link</a> + <a href="images/huuuge.png" dojoType="dojox.image.Lightbox" title="a large image">large than viewport?</a> + </p> + + <h3>Grouped:</h3> + <p> + <a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Amsterdam Train Depot">wide image</a> + <a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group1" title="1:1 aspect">square</a> + <a href="images/extraWide.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Greeneville, TN">wide image</a> + <a href="images/broken.jpg" dojoType="dojox.image.Lightbox" group="group1" title="broken href example">Broken link</a> + </p> + + <h3>Alternate Group:</h3> + <p> + <a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Amsterdam Train Depot">wide image</a> + <a href="images/square.jpg" dojoType="dojox.image.Lightbox" group="group2" title="1:1 aspect">square</a> + <a href="images/imageHoriz.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Antigua, Guatemala">4:3 image</a> + <a href="images/imageVert.jpg" dojoType="dojox.image.Lightbox" group="group2" title="More Guatemala...">tall</a> + </p> + + <h3>From dojox.data.FlickrStore:</h3> + + <div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div> + <div id="fromStore" dojoType="dojox.image.Lightbox" store="flickrStore" group="flickrStore"></div> + + <input id="flickrButton" type="button" onclick="dijit.byId('fromStore').show()" value="show flickr lightbox" disabled="disabled"> + +</div> + +</body> +</html> diff --git a/includes/js/dojox/image/tests/test_Magnifier.html b/includes/js/dojox/image/tests/test_Magnifier.html new file mode 100644 index 0000000..fef1ddd --- /dev/null +++ b/includes/js/dojox/image/tests/test_Magnifier.html @@ -0,0 +1,98 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> + <title>Testing image</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + /* needed for glass overlay: */ + @import "../resources/Magnifier.css"; + + p { padding:20px; border:1px solid #ededed; } + #testImage { border:2px solid #000; } + + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad:true"></script> + <!-- for debugging --> + <script type="text/javascript" src="../MagnifierLite.js"></script> + <script type="text/javascript" src="../Magnifier.js"></script> + + <script type="text/javascript"> + dojo.require("dojox.image.Magnifier"); + dojo.require("dijit.form.Button"); + </script> + +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.image.Magnifier test page</h1> + + <p>They are just images. It's entirely unobtrusive to add magnification to an image, and style it accordingly.</p> + <p>This widget is based on <a href="test_MagnifierLite.html">dojox.image.MagnifierLite</a>, an image-only variant on this dojox.gfx + based Widget. The idea was/is to include addational surfaces in some kind of _Templated GFX widget, based on _Widget.</p> + <p> + Scale= 2.34, 5.67, and 8.90: <br> + <img id="testImage" dojoType="dojox.image.Magnifier" src="images/spanke.jpg" + style="width:200px; height:130px;" scale="2.34" /> + <img id="testImage4" dojoType="dojox.image.Magnifier" src="images/spanke.jpg" + style="width:200px; height:130px;" scale="5.67" /> + + <img id="testImage5" dojoType="dojox.image.Magnifier" src="images/spanke.jpg" + style="width:200px; height:130px;" scale="8.90" /> + </p> + + <p> + <img id="testImage2" dojoType="dojox.image.Magnifier" src="images/spanke.jpg" + style="width:200px; height:130px; padding-right:20px; float:left" /> + I Am Some inline text.<br>lorem ipsum.<br style="clear:both"> + </p> + + <p>A Transparent .png:<br> + + <img style="width:400px; height:260px" id="test3" + dojoType="dojox.image.Magnifier" glassSize="215" scale="3" + src="../../../util/resources/logo/positive/dojo.logo.big.png" /> + </p> + + <p>Programatic:<br> + + <button dojoType="dijit.form.Button" id="foob"> + Make It + <script type="dojo/method" event="onClick"> + this.setAttribute("disabled",true); + dijit.byId("foobd").setAttribute("disabled",false); + new dojox.image.Magnifier({ scale:4.2, glassSize:200 },"foobar"); + </script> + </button> + + <button dojoType="dijit.form.Button" id="foobd" disabled="disabled"> + Destroy It + <script type="dojo/method" event="onClick"> + this.setAttribute("disabled",true); + dijit.byId("foobar").destroy(); + console.log('layout changed:'); + dijit.byId("after1")._adjustScale(); + dijit.byId("after2")._adjustScale(); + </script> + </button> + + <br /><!-- srcNodeRef : --> + <img id="foobar" style="width:300px; height:195px;" src="images/spanke.jpg" /> + </p> + + <p>Remote file (GTA:LCS/psp map):<br> + <img id='after1' style="width:167px; height:240px; border:4px solid #333;" + src="http://img.qj.net/uploads/articles_module/66700/stauntonhpackages_qjpreviewth.png" + scale="6" glassSize="150" dojoType="dojox.image.Magnifier" + /> + + <br>Everybody loves Zelda, right?<br> + <img id='after2' style="width:585px; height:201px" scale="7" glassSize="185" dojoType="dojox.image.Magnifier" src="http://www.zelda-infinite.com/games/zelda1/overworld.png" /> + </p> + + <p id="programaticContainer"> + <!-- not yet? --> + </p> + +</body> +</html> diff --git a/includes/js/dojox/image/tests/test_MagnifierLite.html b/includes/js/dojox/image/tests/test_MagnifierLite.html new file mode 100644 index 0000000..6e6ccd7 --- /dev/null +++ b/includes/js/dojox/image/tests/test_MagnifierLite.html @@ -0,0 +1,91 @@ +<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > +<head> + <title>Testing image</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../resources/Magnifier.css"; + + p { padding:20px; border:1px solid #ededed; } + #testImage { border:2px solid #000; } + + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad:true"></script> + <script type="text/javascript" src="../MagnifierLite.js"></script> + <script type="text/javascript"> + dojo.require("dojox.image.MagnifierLite"); + dojo.require("dijit.form.Button"); + </script> + +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.image.MagnifierLite test page</h1> + + <p>They are just images. It's entirely unobtrusive to add magnification to an image, and style it accordingly.</p> + + <p>This is the base class for <a href="test_Magnifier.html">dojox.image.Magnifier</a>, a dojox.gfx-based extension + this portion does not require the dojox.gfx package, but is limited to CSS-based styling. + </p> + + <p> + Scale= 2.34, 5.67, and 8.90: <br> + <img id="testImage" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg" + style="width:200px; height:130px;" scale="2.34" /> + <img id="testImage4" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg" + style="width:200px; height:130px;" scale="5.67" /> + + <img id="testImage5" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg" + style="width:200px; height:130px;" scale="8.90" /> + </p> + + <p> + <img id="testImage2" dojoType="dojox.image.MagnifierLite" src="images/spanke.jpg" + style="width:200px; height:130px; padding-right:20px; float:left" /> + I Am Some inline text.<br>lorem ipsum.<br style="clear:both"> + </p> + + <p>A Transparent .png: (url unavailable in release versions, need build-utils package, or svn)<br> + + <img style="width:400px; height:260px" id="test3" + dojoType="dojox.image.MagnifierLite" glassSize="215" scale="3" + src="../../../util/resources/logo/positive/dojo.logo.big.png" /> + </p> + + <p>Programatic: (destroy() removes this.domNode)<br> + + <button dojoType="dijit.form.Button" id="foob"> + Make It + <script type="dojo/method" event="onClick"> + this.setAttribute("disabled",true); + dijit.byId("foobd").setAttribute("disabled",false); + new dojox.image.MagnifierLite({ scale:4.2, glassSize:200 },"foobar"); + </script> + </button> + + <button dojoType="dijit.form.Button" id="foobd" disabled="disabled"> + Destroy It + <script type="dojo/method" event="onClick"> + this.setAttribute("disabled",true); + dijit.byId("foobar").destroy(); + </script> + </button> + + <br /><!-- srcNodeRef : --> + <img id="foobar" style="width:300px; height:195px;" src="images/spanke.jpg" /> + </p> + + <p>Remote file (GTA:LCS/psp map):<br> + <img style="width:167px; height:240px; border:4px solid #333;" + src="http://img.qj.net/uploads/articles_module/66700/stauntonhpackages_qjpreviewth.png" + scale="6" glassSize="150" dojoType="dojox.image.MagnifierLite" + /> + + <br>Everybody loves Zelda:<br> + <img style="width:585px; height:201px" scale="7" glassSize="185" dojoType="dojox.image.MagnifierLite" src="http://www.zelda-infinite.com/games/zelda1/overworld.png" /> + </p> + +</body> +</html> diff --git a/includes/js/dojox/image/tests/test_SlideShow.html b/includes/js/dojox/image/tests/test_SlideShow.html new file mode 100644 index 0000000..9200c4b --- /dev/null +++ b/includes/js/dojox/image/tests/test_SlideShow.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> + <title>Testing dojox.image.SlideShow</title> + + <style type="text/css"> + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../resources/image.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:false, isDebug: true, defaultTestTheme: 'soria'"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../SlideShow.js"></script> + <script type="text/javascript" src="../../../dojo/data/ItemFileReadStore.js"></script> + <script type="text/javascript" src="../../data/FlickrRestStore.js"></script> + + <script type="text/javascript"> + // dojo.require("dojox.image.SlideShow"); + // dojo.require("dojox.data.FlickrRestStore"); + // dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dojo.parser"); // find widgets + + dojo.addOnLoad(function(){ + //Initialize the first SlideShow with an ItemFileReadStore + dojo.parser.parse(dojo.body()); + dijit.byId('slideshow1').setDataStore(imageItemStore, + { query: {}, count:20 }, + { + imageThumbAttr: "thumb", + imageLargeAttr: "large" + } + ); + + //INitialize the second store with a FlickrRestStore + var flickrRestStore = new dojox.data.FlickrRestStore(); + var req = { + query: { + userid: "44153025@N00", + apikey: "8c6803164dbc395fb7131c9d54843627" + }, + count: 20 + }; + dijit.byId('slideshow2').setDataStore(flickrRestStore, req); + }); + + </script> +</head> +<body> + <h1 class="testTitle">dojox.image.SlideShow</h1> + + <h2>from dojo.data.ItemFileReadStore</h2> + <div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div> + + This SlideShow should display five photos, and loop. It should also + open a URL when the image is clicked. The widget should also resize to + fit the image. + <div id="slideshow1" dojoType="dojox.image.SlideShow"></div> + + <h2>from dojox.data.FlickrRestStore</h2> + This SlideShow should display five photos, and not loop. It should also not + open a URL when the image is clicked. AutoLoading of images is also disabled. + The time between images in a SlideShow is 1 second. The widget should not resize to fit the image + <div id="slideshow2" dojoType="dojox.image.SlideShow" noLink="true" loop="false" autoLoad="false" + slideshowInterval="1" fixedHeight="true"></div> + +</body> +</html> diff --git a/includes/js/dojox/image/tests/test_ThumbnailPicker.html b/includes/js/dojox/image/tests/test_ThumbnailPicker.html new file mode 100644 index 0000000..90cdf2e --- /dev/null +++ b/includes/js/dojox/image/tests/test_ThumbnailPicker.html @@ -0,0 +1,134 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> + <title>Testing the ThumbnailPicker</title> + + <style type="text/css"> + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../resources/image.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djconfig="parseOnLoad:true, isDebug: true, defaultTestTheme:'soria'"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../ThumbnailPicker.js"></script> + + <script type="text/javascript"> + // dojo.require("dojox.image.Gallery"); + dojo.require("dojox.data.FlickrRestStore"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dojo.parser"); // find widgets + + /* + Initializes the ThumbnailPicker with a data store that + reads from the Flickr REST APIs. + */ + function initFlickrGallery() { + var flickrRestStore = new dojox.data.FlickrRestStore(); + var req = { + query: { + userid: "44153025@N00",//The Flickr user id to use + apikey: "8c6803164dbc395fb7131c9d54843627",//An API key is required. + sort: [ + { + descending: true //Use descending sort order, ascending is default. + } + ], + tags: ["superhorse", "redbones", "beachvolleyball","dublin","croatia"], + tag_mode: "any" //Match any of the tags + }, + count: 20 + }; + + //Set the flickr data store on two of the dojox.image.ThumbnailPicker widgets + dijit.byId('thumbPicker1').setDataStore(flickrRestStore, req); + dijit.byId('thumbPicker3').setDataStore(flickrRestStore, req); + } + + /* + Initializes the second ThumbnailPicker widget with a data store that + reads information from a JSON URL. This also tells the ThumbnailPicker + the name of the JSON attributes to read from each data item retrieved + from the JSON URL. + */ + function initItemStoreGallery(){ + var itemRequest = { + query: {}, + count: 20 + }; + var itemNameMap = { + imageThumbAttr: "thumb", + imageLargeAttr: "large" + }; + + //Set the dojo.data.ItemFileReadStore on two of the dojox.image.ThumbnailPicker widgets + //Note the use of the 'itemNameMap', which tells the widget what attributes to + //read from the store. Look in the 'images.json' file in the same folder as this + //file to see the data being read by the widget. + dijit.byId('thumbPicker2').setDataStore(imageItemStore, itemRequest, itemNameMap); + dijit.byId('thumbPicker4').setDataStore(imageItemStore, itemRequest, itemNameMap); + } + + //Subscribe to clicks on the thumbnails, and print out the information provided + function doSubscribe(){ + function updateDiv(packet){ + dojo.byId('PublishedData').innerHTML = "You selected the thumbnail:" + + "<br/><b>Index:</b> " + packet.index + + "<br/><b>Url:</b> " + packet.url + + "<br/><b>Large Url:</b> " + packet.largeUrl + + "<br/><b>Title:</b> " + packet.title + + "<br/><b>Link:</b> " + packet.link + ; + }; + + //When an image in the ThumbnailPicker is clicked on, it publishes + //information on the image to a topic, whose name is found by calling + //the 'getTopicName' function on the widget. + dojo.subscribe(dijit.byId('thumbPicker1').getClickTopicName(), updateDiv); + dojo.subscribe(dijit.byId('thumbPicker2').getClickTopicName(), updateDiv); + } + + dojo.addOnLoad(initFlickrGallery); + dojo.addOnLoad(initItemStoreGallery); + dojo.addOnLoad(doSubscribe); + </script> +</head> +<body> + <h1 class="testTitle">dojox.image.ThumbnailPicker</h1> + + <div id="PublishedData" style="background-color:light-grey"> + When you click on a thumbnail image, it's information is placed here + </div> + + <h2>From FlickrRestStore:</h2> + This ThumbnailPicker should have 8 thumbnails, with each of them linking + to a URL when clicked on. The cursor should also change when over an image. + <div id="thumbPicker1" dojoType="dojox.image.ThumbnailPicker" size="500" + useHyperlink="true" ></div> + + <h2>From ItemFileReadStore:</h2> + This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT + open a URL, and the cursor should not change when over an image that is not an arrow. + + <div id="thumbPicker2" dojoType="dojox.image.ThumbnailPicker" size="400" + isClickable="false"></div> + <div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="images.json"></div> + + <h2>From FlickrRestStore:</h2> + This ThumbnailPicker should have 6 thumbnails, with each of them linking + to a URL when clicked on. The cursor should also change when over an image. + Unlike the ThumbnailPicker above, when these links are clicked on, this page + changes, instead of a popup window. + + <div id="thumbPicker3" dojoType="dojox.image.ThumbnailPicker" size="600" + useHyperLink="true" hyperlinkTarget="this"></div> + + <h2>From ItemFileReadStore, and vertical:</h2> + This ThumbnailPicker should have 5 thumbnails. Clicking on a thumbnail should NOT + open a URL, and the cursor should not change when over an image that is not an arrow. + The thumbnails should also be aligned vertically. + <div id="thumbPicker4" dojoType="dojox.image.ThumbnailPicker" size="300" + isClickable="false" isHorizontal="false"></div> + +</body> +</html> |
