diff options
Diffstat (limited to 'includes/js/dojox/image/Lightbox.js')
| -rw-r--r-- | includes/js/dojox/image/Lightbox.js | 451 |
1 files changed, 0 insertions, 451 deletions
diff --git a/includes/js/dojox/image/Lightbox.js b/includes/js/dojox/image/Lightbox.js deleted file mode 100644 index 79056d3..0000000 --- a/includes/js/dojox/image/Lightbox.js +++ /dev/null @@ -1,451 +0,0 @@ -if(!dojo._hasResource["dojox.image.Lightbox"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. -dojo._hasResource["dojox.image.Lightbox"] = true; -dojo.provide("dojox.image.Lightbox"); -dojo.experimental("dojox.image.Lightbox"); - -dojo.require("dijit.Dialog"); -dojo.require("dojox.fx._base"); - -dojo.declare("dojox.image.Lightbox", - dijit._Widget,{ - // summary: - // A dojo-based Lightbox implementation. - // - // description: - // An Elegant, keyboard accessible, markup and store capable Lightbox widget to show images - // in a modal dialog-esque format. Can show individual images as Modal dialog, or can group - // images with multiple entry points, all using a single "master" Dialog for visualization - // - // key controls: - // ESC - close - // Down Arrow / Rt Arrow / N - Next Image - // Up Arrow / Lf Arrow / P - Previous Image - // - // example: - // | <a href="image1.jpg" dojoType="dojox.image.Lightbox">show lightbox</a> - // - // example: - // | <a href="image2.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a> - // | <a href="image3.jpg" dojoType="dojox.image.Lightbox" group="one">show group lightbox</a> - // - // example: - // | not implemented fully yet, though works with basic datastore access. need to manually call - // | widget._attachedDialog.addImage(item,"fromStore") for each item in a store result set. - // | <div dojoType="dojox.image.Lightbox" group="fromStore" store="storeName"></div> - // - // group: String - // Grouping images in a page with similar tags will provide a 'slideshow' like grouping of images - group: "", - - // title: String - // A string of text to be shown in the Lightbox beneath the image (empty if using a store) - title: "", - - // href; String - // Link to image to use for this Lightbox node (empty if using a store). - href: "", - - // duration: Integer - // Generic time in MS to adjust the feel of widget. could possibly add various - // durations for the various actions (dialog fadein, sizeing, img fadein ...) - duration: 500, - - // _allowPassthru: Boolean - // Privately set this to disable/enable natural link of anchor tags - _allowPassthru: false, - - // _attachedDialg: dojox.image._LightboxDialog - // The pointer to the global lightbox dialog for this widget - _attachedDialog: null, // try to share a single underlay per page? - - startup: function(){ - this.inherited(arguments); - // setup an attachment to the masterDialog (or create the masterDialog) - var tmp = dijit.byId('dojoxLightboxDialog'); - if(tmp){ - this._attachedDialog = tmp; - }else{ - // this is the first instance to start, so we make the masterDialog - this._attachedDialog = new dojox.image._LightboxDialog({ id: "dojoxLightboxDialog" }); - this._attachedDialog.startup(); - } - if(!this.store){ - // FIXME: full store support lacking, have to manually call this._attachedDialog.addImage(imgage,group) as it stands - this._addSelf(); - this.connect(this.domNode, "onclick", "_handleClick"); - } - }, - - _addSelf: function(){ - // summary: Add this instance to the master LightBoxDialog - this._attachedDialog.addImage({ - href: this.href, - title: this.title - },this.group||null); - }, - - _handleClick: function(/* Event */e){ - // summary: Handle the click on the link - if(!this._allowPassthru){ e.preventDefault(); } - else{ return; } - this.show(); - }, - - show: function(){ - // summary: Show the Lightbox with this instance as the starting point - this._attachedDialog.show(this); - }, - - disable: function(){ - // summary: Disables event clobbering and dialog, and follows natural link - this._allowPassthru = true; - }, - - enable: function(){ - // summary: Enables the dialog (prevents default link) - this._allowPassthru = false; - } - -}); - -dojo.declare("dojox.image._LightboxDialog", - dijit.Dialog,{ - // summary: - // The "dialog" shared between any Lightbox instances on the page - // - // description: - // - // A widget that intercepts anchor links (typically around images) - // and displays a modal Dialog. this is the actual Dialog, which you can - // create and populate manually, though should use simple Lightbox's - // unless you need to direct access. - // - // There should only be one of these on a page, so all dojox.image.Lightbox's will us it - // (the first instance of a Lightbox to be show()'n will create me If i do not exist) - // - // title: String - // The current title, read from object passed to show() - title: "", - - // FIXME: implement titleTemplate - - // inGroup: Array - // Array of objects. this is populated by from the JSON object _groups, and - // should not be populate manually. it is a placeholder for the currently - // showing group of images in this master dialog - inGroup: null, - - // imgUrl: String - // The src="" attribute of our imageNode (can be null at statup) - imgUrl: "", - - // errorMessage: String - // The text to display when an unreachable image is linked - errorMessage: "Image not found.", - - // adjust: Boolean - // If true, ensure the image always stays within the viewport - // more difficult than necessary to disable, but enabled by default - // seems sane in most use cases. - adjust: true, - - // an object of arrays, each array (of objects) being a unique 'group' - _groups: { XnoGroupX: [] }, - - // errorImg: Url - // Path to the image used when a 404 is encountered - errorImg: dojo.moduleUrl("dojox.image","resources/images/warning.png"), - - // privates: - _imageReady: false, - _blankImg: dojo.moduleUrl("dojo","resources/blank.gif"), - _clone: null, // the "untained" image - _wasStyled: null, // indicating taint on the imgNode - - // animation holders: - _loadingAnim:null, - _showImageAnim: null, - _showNavAnim: null, - _animConnects: [], - - templateString:"<div class=\"dojoxLightbox\" dojoAttachPoint=\"containerNode\">\n\t<div style=\"position:relative\">\n\t\t<div dojoAttachPoint=\"imageContainer\" class=\"dojoxLightboxContainer\">\n\t\t\t<img dojoAttachPoint=\"imgNode\" src=\"${imgUrl}\" class=\"dojoxLightboxImage\" alt=\"${title}\">\n\t\t\t<div class=\"dojoxLightboxFooter\" dojoAttachPoint=\"titleNode\">\n\t\t\t\t<div class=\"dijitInline LightboxClose\" dojoAttachPoint=\"closeNode\"></div>\n\t\t\t\t<div class=\"dijitInline LightboxNext\" dojoAttachPoint=\"nextNode\"></div>\t\n\t\t\t\t<div class=\"dijitInline LightboxPrev\" dojoAttachPoint=\"prevNode\"></div>\n\n\t\t\t\t<div class=\"dojoxLightboxText\"><span dojoAttachPoint=\"textNode\">${title}</span><span dojoAttachPoint=\"groupCount\" class=\"dojoxLightboxGroupText\"></span></div>\n\t\t\t</div>\n\t\t</div>\t\n\t\t\n\t</div>\n</div>\n", - - startup: function(){ - // summary: Add some extra event handlers, and startup our superclass. - - this.inherited(arguments); - this._clone = dojo.clone(this.imgNode); - this.connect(document.documentElement,"onkeypress","_handleKey"); - this.connect(window,"onresize","_position"); - this.connect(this.nextNode, "onclick", "_nextImage"); - this.connect(this.prevNode, "onclick", "_prevImage"); - this.connect(this.closeNode, "onclick", "hide"); - this._makeAnims(); - this._vp = dijit.getViewport(); - - }, - - show: function(/* Object */groupData){ - // summary: Show the Master Dialog. Starts the chain of events to show - // an image in the dialog, including showing the dialog if it is - // not already visible - // - // groupData: Object - // needs href and title attributes. the values for this image. - - var _t = this; // size - - // we only need to call dijit.Dialog.show() if we're not already open. - if(!_t.open){ _t.inherited(arguments); } - - if(this._wasStyled){ - // ugly fix for IE being stupid: - dojo._destroyElement(_t.imgNode); - _t.imgNode = dojo.clone(_t._clone); - dojo.place(_t.imgNode,_t.imageContainer,"first"); - _t._makeAnims(); - _t._wasStyled = false; - } - - dojo.style(_t.imgNode,"opacity","0"); - dojo.style(_t.titleNode,"opacity","0"); - - _t._imageReady = false; - _t.imgNode.src = groupData.href; - - if((groupData.group && groupData !== "XnoGroupX") || _t.inGroup){ - if(!_t.inGroup){ - _t.inGroup = _t._groups[(groupData.group)]; - // determine where we were or are in the show - dojo.forEach(_t.inGroup,function(g,i){ - if(g.href == groupData.href){ - _t._positionIndex = i; - } - },_t); - } - if(!_t._positionIndex){ - _t._positionIndex=0; - _t.imgNode.src = _t.inGroup[_t._positionIndex].href; - } - // FIXME: implement titleTemplate - _t.groupCount.innerHTML = " (" +(_t._positionIndex+1) +" of "+_t.inGroup.length+")"; - _t.prevNode.style.visibility = "visible"; - _t.nextNode.style.visibility = "visible"; - }else{ - // single images don't have buttons, or counters: - _t.groupCount.innerHTML = ""; - _t.prevNode.style.visibility = "hidden"; - _t.nextNode.style.visibility = "hidden"; - } - _t.textNode.innerHTML = groupData.title; - - if(!_t._imageReady || _t.imgNode.complete === true){ - // connect to the onload of the image - _t._imgConnect = dojo.connect(_t.imgNode, "onload", _t, function(){ - _t._imageReady = true; - _t.resizeTo({ - w: _t.imgNode.width, - h: _t.imgNode.height, - duration:_t.duration - }); - // cleanup - dojo.disconnect(_t._imgConnect); - if(_t._imgError){ dojo.disconnect(_t._imgError); } - }); - - // listen for 404's: - _t._imgError = dojo.connect(_t.imgNode, "onerror", _t, function(){ - dojo.disconnect(_t._imgError); - // trigger the above onload with a new src: - _t.imgNode.src = _t.errorImg; - _t._imageReady = true; - _t.textNode.innerHTML = _t.errorMessage; - }); - - // onload doesn't fire in IE if you connect before you set the src. - // hack to re-set the src after onload connection made: - if(dojo.isIE){ _t.imgNode.src = _t.imgNode.src; } - - }else{ - // do it quickly. kind of a hack, but image is ready now - _t.resizeTo({ w: _t.imgNode.width, h: _t.imgNode.height, duration: 1 }); - } - - }, - - _nextImage: function(){ - // summary: Load next image in group - if(!this.inGroup){ return; } - if(this._positionIndex+1<this.inGroup.length){ - this._positionIndex++; - }else{ - this._positionIndex = 0; - } - this._loadImage(); - }, - - _prevImage: function(){ - // summary: Load previous image in group - - if(this.inGroup){ - if(this._positionIndex == 0){ - this._positionIndex = this.inGroup.length - 1; - }else{ - this._positionIndex--; - } - this._loadImage(); - } - }, - - _loadImage: function(){ - // summary: Do the prep work before we can show another image - this._loadingAnim.play(1); - }, - - _prepNodes: function(){ - // summary: A localized hook to accompany _loadImage - this._imageReady = false; - this.show({ - href: this.inGroup[this._positionIndex].href, - title: this.inGroup[this._positionIndex].title - }); - }, - - resizeTo: function(/* Object */size){ - // summary: Resize our dialog container, and fire _showImage - - if(this.adjust && (size.h + 80 > this._vp.h || size.w + 50 > this._vp.w)){ - size = this._scaleToFit(size); - } - - var _sizeAnim = dojox.fx.sizeTo({ - node: this.containerNode, - duration: size.duration||this.duration, - width: size.w, - height: size.h + 30 - }); - this.connect(_sizeAnim,"onEnd","_showImage"); - _sizeAnim.play(15); - }, - - _showImage: function(){ - // summary: Fade in the image, and fire showNav - this._showImageAnim.play(1); - }, - - _showNav: function(){ - // summary: Fade in the footer, and setup our connections. - this._showNavAnim.play(1); - }, - - hide: function(){ - // summary: Hide the Master Lightbox - dojo.fadeOut({node:this.titleNode, duration:200, - onEnd: dojo.hitch(this,function(){ - // refs #5112 - if you _don't_ change the .src, safari will _never_ fire onload for this image - this.imgNode.src = this._blankImg; - }) - }).play(5); - this.inherited(arguments); - this.inGroup = null; - this._positionIndex = null; - }, - - addImage: function(child, group){ - // summary: Add an image to this Master Lightbox - // - // child: Object - // The image information to add. - // href: String - link to image (required) - // title: String - title to display - // - // group: String? - // attach to group of similar tag or null for individual image instance - var g = group; - if(!child.href){ return; } - if(g){ - if(!this._groups[g]){ - this._groups[g] = []; - } - this._groups[g].push(child); - }else{ this._groups["XnoGroupX"].push(child); } - }, - - _handleKey: function(/* Event */e){ - // summary: Handle keyboard navigation internally - if(!this.open){ return; } - - var dk = dojo.keys; - var key = (e.charCode == dk.SPACE ? dk.SPACE : e.keyCode); - switch(key){ - - case dk.ESCAPE: this.hide(); break; - - case dk.DOWN_ARROW: - case dk.RIGHT_ARROW: - case 78: // key "n" - this._nextImage(); break; - - case dk.UP_ARROW: - case dk.LEFT_ARROW: - case 80: // key "p" - this._prevImage(); break; - } - }, - - _scaleToFit: function(/* Object */size){ - // summary: resize an image to fit within the bounds of the viewport - // size: Object - // The 'size' object passed around for this image - var ns = {}; - - // one of the dimensions is too big, go with the smaller viewport edge: - if(this._vp.h > this._vp.w){ - // don't actually touch the edges: - ns.w = this._vp.w - 70; - ns.h = ns.w * (size.h / size.w); - }else{ - // give a little room for the titlenode, too: - ns.h = this._vp.h - 80; - ns.w = ns.h * (size.w / size.h); - } - - // trigger the nasty width="auto" workaround in show() - this._wasStyled = true; - - // we actually have to style this image, it's too big - var s = this.imgNode.style; - s.height = ns.h + "px"; - s.width = ns.w + "px"; - - ns.duration = size.duration; - return ns; // Object - - }, - - _position: function(/* Event */e){ - // summary: we want to know the viewport size any time it changes - this.inherited(arguments); - this._vp = dijit.getViewport(); - }, - - _makeAnims: function(){ - // summary: make and cleanup animation and animation connections - - dojo.forEach(this._animConnects,dojo.disconnect); - this._animConnects = []; - this._showImageAnim = dojo.fadeIn({ - node: this.imgNode, - duration: this.duration - }); - this._animConnects.push(dojo.connect(this._showImageAnim, "onEnd", this, "_showNav")); - this._loadingAnim = dojo.fx.combine([ - dojo.fadeOut({ node:this.imgNode, duration:175 }), - dojo.fadeOut({ node:this.titleNode, duration:175 }) - ]); - this._animConnects.push(dojo.connect(this._loadingAnim, "onEnd", this, "_prepNodes")); - this._showNavAnim = dojo.fadeIn({ node: this.titleNode, duration:225 }); - } -}); - -} |