Subversion Repositories Applications.papyrus

Compare Revisions

No changes between revisions

Ignore whitespace Rev 2149 → Rev 2150

/trunk/api/js/dojo1.0/dojox/image/Gallery.js
New file
0,0 → 1,181
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("postCreate",arguments)
this.thumbPicker = new dojox.image.ThumbnailPicker({
linkAttr: this.linkAttr,
imageLargeAttr: this.imageLargeAttr,
titleAttr: this.titleAttr,
useLoadNotifier: true
}, 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");
}
}
});
 
}
/trunk/api/js/dojo1.0/dojox/image/resources/Gallery.html
New file
0,0 → 1,4
<div dojoAttachPoint="outerNode" class="imageGalleryWrapper">
<div dojoAttachPoint="thumbPickerNode"></div>
<div dojoAttachPoint="slideShowNode"></div>
</div>
/trunk/api/js/dojo1.0/dojox/image/resources/Lightbox.html
New file
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>
/trunk/api/js/dojo1.0/dojox/image/resources/SlideShow.html
New file
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>
/trunk/api/js/dojo1.0/dojox/image/resources/ThumbnailPicker.html
New file
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>
/trunk/api/js/dojo1.0/dojox/image/resources/images/1pixel.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/image/resources/images/1pixel.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/image/resources/images/buttons.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/image/resources/images/buttons.png
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/image/resources/images/loading.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/image/resources/images/loading.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/image/resources/images/buttons.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/image/resources/images/buttons.gif
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/image/resources/image.css
New file
0,0 → 1,337
/*
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 */
.tundra .LightboxClose {
background:url('../../../dijit/themes/tundra/images/tabClose.png') no-repeat center center;
}
.tundra .LightboxNext {
background:url('../../../dijit/themes/tundra/images/arrowRight.png') no-repeat center center;
}
.tundra .LightboxPrev {
background:url('../../../dijit/themes/tundra/images/arrowLeft.png') no-repeat center center;
}
 
/* dojox.image.Lightbox:soria */
.soria .LightboxNext,
.soria .LightboxPrev,
.soria .LightboxClose {
background:url('../../../dijit/themes/soria/images/arrows.png') no-repeat center center;
background-position:-65px 0;
}
.soria .LightboxNext {
background-position:-48px 0;
}
.soria .LightboxPrev {
background-position:-16px 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("images/1pixel.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;
}
/trunk/api/js/dojo1.0/dojox/image/Lightbox.js
New file
0,0 → 1,312
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");
 
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
//
// examples:
//
// <a href="image1.jpg" dojoType="dojox.image.Lightbox">show lightbox</a>
// <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>
//
// FIXME: 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,
_attachedDialog: null, // try to share a single underlay per page?
 
startup: function(){
this.inherited("startup", 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(){
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(){
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,{
//
// Description:
//
// a widget that intercepts anchor links (typically around images)
// and displays a modal Dialog. this is the actual Popup, and should
// not be created directly.
//
// there will 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)
//
// note: the could be the ImagePane i was talking about?
 
// title: String
// the current title
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="" attrib of our imageNode (can be null at statup)
imgUrl: "",
 
// an array of objects, each object being a unique 'group'
_groups: { XnoGroupX: [] },
_imageReady: false,
 
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("startup", arguments);
 
// FIXME: these are supposed to be available in dijit.Dialog already,
// but aren't making it over.
dojo.connect(document.documentElement,"onkeypress",this,"_handleKey");
this.connect(window,"onresize","_position");
 
this.connect(this.nextNode, "onclick", "_nextImage");
this.connect(this.prevNode, "onclick", "_prevImage");
this.connect(this.closeNode, "onclick", "hide");
},
 
show: function(/* Object */groupData){
// summary: starts the chain of events to show an image in the dialog, including showing the dialog
// if it is not already visible
 
dojo.style(this.imgNode,"opacity","0");
dojo.style(this.titleNode,"opacity","0");
 
// we only need to call dijit.Dialog.show() if we're not already open.
if(!this.open){ this.inherited("show", arguments); }
this._imageReady = false;
this.imgNode.src = groupData.href;
if((groupData.group && !(groupData == "XnoGroupX")) || this.inGroup){
if(!this.inGroup){
this.inGroup = this._groups[(groupData.group)];
var i = 0;
// determine where we were or are in the show
dojo.forEach(this.inGroup,function(g){
if (g.href == groupData.href){
this._positionIndex = i;
}
i++;
},this);
}
if(!this._positionIndex){ this._positionIndex=0; this.imgNode.src = this.inGroup[this._positionIndex].href; }
this.groupCount.innerHTML = " (" +(this._positionIndex+1) +" of "+this.inGroup.length+")";
this.prevNode.style.visibility = "visible";
this.nextNode.style.visibility = "visible";
}else{
this.groupCount.innerHTML = "";
this.prevNode.style.visibility = "hidden";
this.nextNode.style.visibility = "hidden";
}
this.textNode.innerHTML = groupData.title;
if(!this._imageReady || this.imgNode.complete === true){
this._imgConnect = dojo.connect(this.imgNode,"onload", this, function(){
this._imageReady = true;
this.resizeTo({ w: this.imgNode.width, h:this.imgNode.height, duration:this.duration });
dojo.disconnect(this._imgConnect);
});
// 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){ this.imgNode.src = this.imgNode.src; }
}else{
// do it quickly. kind of a hack, but image is ready now
this.resizeTo({ w: this.imgNode.width, h:this.imgNode.height, duration:1 });
}
},
 
_nextImage: function(){
// summary: load next image in group
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._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
var _loading = dojo.fx.combine([
dojo.fadeOut({ node:this.imgNode, duration:(this.duration/2) }),
dojo.fadeOut({ node:this.titleNode, duration:(this.duration/2) })
]);
this.connect(_loading,"onEnd","_prepNodes");
_loading.play(10);
},
 
_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
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(this.duration);
},
 
_showImage: function(){
// summary: fade in the image, and fire showNav
dojo.fadeIn({ node: this.imgNode, duration:this.duration,
onEnd: dojo.hitch(this,"_showNav")
}).play(75);
},
 
_showNav: function(){
// summary: fade in the footer, and setup our connections.
dojo.fadeIn({ node: this.titleNode, duration:200 }).play(25);
},
 
hide: function(){
// summary: close the Lightbox
dojo.fadeOut({node:this.titleNode, duration:200 }).play(25);
this.inherited("hide", arguments);
this.inGroup = null;
this._positionIndex = null;
},
 
addImage: function(/* object */child,/* String? */group){
// summary: add an image to this master dialog
//
// child.href: String - link to image (required)
// child.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)].push(child);
}else{
this._groups[(g)] = [(child)];
}
}else{ this._groups["XnoGroupX"].push(child); }
},
 
_handleKey: function(/* Event */e){
// summary: handle keyboard navigation
if(!this.open){ return; }
var key = (e.charCode == dojo.keys.SPACE ? dojo.keys.SPACE : e.keyCode);
switch(key){
case dojo.keys.ESCAPE: this.hide(); break;
 
case dojo.keys.DOWN_ARROW:
case dojo.keys.RIGHT_ARROW:
case 78: // key "n"
this._nextImage(); break;
 
case dojo.keys.UP_ARROW:
case dojo.keys.LEFT_ARROW:
case 80: // key "p"
this._prevImage(); break;
}
}
});
 
}
/trunk/api/js/dojo1.0/dojox/image/SlideShow.js
New file
0,0 → 1,590
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)
// @license Licensed under the Academic Free License 3.0 http://www.opensource.org/licenses/afl-3.0.php
//
// TODO: more cleanups
//
dojo.require("dojo.fx");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
 
dojo.declare("dojox.image.SlideShow",
[dijit._Widget, dijit._Templated],
{
// 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 tags 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,
// 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("dojox.image", "resources/images/1pixel.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("postCreate",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){}
});
dojo.connect(this.outerNode, "onmouseout", function(evt){
try{_this._hideNav(evt);}
catch(e){}
});
}
this.outerNode.style.width = this.imageWidth + "px";
 
img.setAttribute("src", this._tempImgPath);
var _this = this;
this.largeNode.appendChild(img);
this._tmpImage = img;
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) ? request.start : 0),
count: ((request.count) ? request.count : this.pageSize),
onBegin: function(count, request){
_this.maxPhotos = count;
}
};
if(request.query){ dojo.mixin(this._request.query, request.query); }
if(paramNames && paramNames.imageLargeAttr){
this.imageLargeAttr = paramNames.imageLargeAttr;
}
var _this = this;
var _complete = function(items){
_this.showImage(0);
_this._request.onComplete = null;
};
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);
}
var img;
for(var pos = 0; pos < this.images.length; pos++){
img = this.images[pos];
if(img && img.parentNode){ img.parentNode.removeChild(img); }
}
this.images = [];
this.isInitialized = false;
this._imageCounter = 0;
},
 
isImageLoaded: function(idx){
// summary: Returns true if image at the specified index is loaded, false otherwise.
// idx:
// The number index in the data store to check if it is loaded.
return this.images && this.images.length > index && this.images[idx];
},
 
moveImageLoadingPointer: function(idx){
// summary: If 'autoload' is true, this tells the widget to start loading
// images from the specified pointer.
// idx:
// The number index in the data store to start loading images from.
this._imageCounter = idx;
},
destroy: function(){
// summary: Cleans up the widget when it is being destroyed
if(this._slideId) { this._stop(); }
this.inherited("destroy",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.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(idx, /* Function? */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.
if(!callback && this._slideId){ this.toggleSlideShow(); }
var _this = this;
var current = this.largeNode.getElementsByTagName("div");
this.imageIndex = idx;
 
var showOrLoadIt = function() {
//If the image is already loaded, then show it.
if(_this.images[idx]){
while(_this.largeNode.firstChild){
_this.largeNode.removeChild(_this.largeNode.firstChild);
}
_this.images[idx].style.opacity = 0;
_this.largeNode.appendChild(_this.images[idx]);
_this._currentImage = _this.images[idx]._img;
_this._fitSize();
var onEnd = function(a,b,c) {
var img = _this.images[idx].firstChild;
if(img.tagName.toLowerCase() != "img"){img = img.firstChild;}
title = img.getAttribute("title");
if(_this._navShowing){
_this._showNav(true);
}
dojo.publish(_this.getShowTopicName(), [{
index: idx,
title: title,
url: img.getAttribute("src")
}]);
if(callback) { callback(a,b,c); }
_this._setTitle(title);
};
dojo.fadeIn({
node: _this.images[idx],
duration: 300,
onEnd: onEnd
}).play();
}else{
//If the image is not loaded yet, load it first, then show it.
_this._loadImage(idx, function(){
dojo.publish(_this.getLoadTopicName(), [idx]);
_this.showImage(idx, 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(idx, callbackFn){
// summary: Load image at specified index
// description:
// This function loads the image at position 'idx' into the
// internal cache of images. This does not cause the image to be displayed.
// idx:
// 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[idx] || !this._request) { return; }
var pageStart = idx - (idx % this.pageSize);
 
this._request.start = pageStart;
 
this._request.onComplete = function(items){
var diff = idx - 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" + idx);
dojo.connect(img, "onload", function(){
_this._fitImage(img);
div.setAttribute("width",_this.imageWidth);
div.setAttribute("height",_this.imageHeight);
dojo.publish(_this.getLoadTopicName(), [idx]);
_this._loadNextImage();
if(callbackFn){ callbackFn(); }
});
_this.hiddenNode.appendChild(div);
 
var titleDiv = document.createElement("div");
dojo.addClass(titleDiv, "slideShowTitle");
div.appendChild(titleDiv);
_this.images[idx] = 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
this._slideId = setTimeout("dijit.byId('"+this.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, "left", "-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, "left", "");
},
 
_setTitle: function(title){
// summary: Sets the title of the image to be displayed
// title: String
// The String title of the image
this.titleNode.innerHTML = this.titleTemplate.replace('@title',title)
.replace('@current', String(Number(this.imageIndex) + 1))
.replace('@total',String(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
}
});
 
}
/trunk/api/js/dojo1.0/dojox/image/ThumbnailPicker.js
New file
0,0 → 1,538
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,
 
// thumbHeight: Number
// Default height of a thumbnail image
thumbHeight: 75,
 
// thumbWidth: Number
// Default width of an image
thumbWidth: 100,
 
// 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("dojox.image", "resources/images/1pixel.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("postCreate",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) {
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);
dojo.connect(this.navPrev, "onclick", this, "_prev");
dojo.connect(this.navNext, "onclick", this, "_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.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.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 ? request.start : 0,
count: request.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 && paramNames.imageThumbAttr){
var attrNames = ["imageThumbAttr", "imageLargeAttr", "linkAttr", "titleAttr"];
for(var i = 0; i< attrNames.length; i++){
if(paramNames[attrNames[i]]){this[attrNames[i]] = paramNames[attrNames[i]];}
}
}
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 = {};
var img;
for(var pos = 0; pos < this._thumbs.length; pos++){
img = this._thumbs[pos];
if(img){
// dojo.event.browser.clean(img);
if(img.parentNode){
img.parentNode.removeChild(img);
}
}
}
this._thumbs = [];
this.isInitialized = false;
this._noImages = true;
},
isVisible: function(idx) {
// summary: Returns true if the image at the specified index is currently visible. False otherwise.
var img = this._thumbs[idx];;
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 idx = -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 idx = -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, idx){
dojo.publish(this.getShowTopicName(), [{index:idx}]);
this._updateNavControls();
this._loadingImages = {};
this._thumbIndex = idx;
//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(idx){
// summary: Displays thumbnail images, starting at position 'idx'
// idx: Number
// The index of the first thumbnail
var _this = this;
var idx = arguments.length == 0 ? this._thumbIndex : arguments[0];
idx = Math.min(Math.max(idx, 0), this._maxPhotos);
if(idx >= this._maxPhotos){ return; }
var img = this._thumbs[idx];
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, idx)
}).play(10);
}else{
if(this.isHorizontal){
this.thumbScroller.scrollLeft = left;
}else{
this.thumbScroller.scrollTop = top;
}
this._checkLoad(img, idx);
}
},
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 == true ? 0 : this.pageSize);
var pos = start;
while(pos < this._thumbs.length && this._thumbs[pos]){pos ++;}
var _this = this;
//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 = 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 = complete;
this.request.onError = 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);
}
});
 
}
/trunk/api/js/dojo1.0/dojox/image/README
New file
0,0 → 1,60
-------------------------------------------------------------------------------
dojox.image
-------------------------------------------------------------------------------
Version 1.0
Release date: 10/31/07
-------------------------------------------------------------------------------
Project state:
prototype | expermental
-------------------------------------------------------------------------------
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
 
-------------------------------------------------------------------------------
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.
/trunk/api/js/dojo1.0/dojox/image/tests/test_Gallery.html
New file
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" numberThumbs="4"></div>
 
<!--
<h2>From ItemFileReadStore:</h2>
<div id="gallery2" dojoType="dojox.image.Gallery"></div>
-->
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/image/tests/test_Lightbox.html
New file
0,0 → 1,101
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Lightbox Tests</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
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 class="tundra">
 
<div style="padding:20px;">
<h1 class="testTitle">Dojo-base 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>
</p>
 
<h3>Grouped:</h3>
<p>
<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group1" title="Amterdamn 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>
</p>
 
<h3>Alternate Group:</h3>
<p>
<a href="images/imageHoriz2.jpg" dojoType="dojox.image.Lightbox" group="group2" title="Amterdamn 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>
/trunk/api/js/dojo1.0/dojox/image/tests/test_SlideShow.html
New file
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>
/trunk/api/js/dojo1.0/dojox/image/tests/test_ThumbnailPicker.html
New file
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>
/trunk/api/js/dojo1.0/dojox/image/tests/images/extraWide.jpg
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/image/tests/images/extraWide.jpg
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/image/tests/images/imageHoriz.jpg
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/image/tests/images/imageHoriz.jpg
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/image/tests/images/imageHoriz2.jpg
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/image/tests/images/imageHoriz2.jpg
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/image/tests/images/square.jpg
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/image/tests/images/square.jpg
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/image/tests/images/imageVert.jpg
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
/trunk/api/js/dojo1.0/dojox/image/tests/images/imageVert.jpg
New file
Property changes:
Added: svn:mime-type
+application/octet-stream
\ No newline at end of property
/trunk/api/js/dojo1.0/dojox/image/tests/images.json
New file
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"
}
]}