/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" |
} |
]} |