diff options
Diffstat (limited to 'dogtag/tps-ui/shared/docroot/esc/sow/js/lightbox.js')
| -rwxr-xr-x | dogtag/tps-ui/shared/docroot/esc/sow/js/lightbox.js | 689 |
1 files changed, 0 insertions, 689 deletions
diff --git a/dogtag/tps-ui/shared/docroot/esc/sow/js/lightbox.js b/dogtag/tps-ui/shared/docroot/esc/sow/js/lightbox.js deleted file mode 100755 index 11856b208..000000000 --- a/dogtag/tps-ui/shared/docroot/esc/sow/js/lightbox.js +++ /dev/null @@ -1,689 +0,0 @@ -// -----------------------------------------------------------------------------------
-//
-// Lightbox v2.02
-// by Lokesh Dhakar - http://www.huddletogether.com
-// 3/31/06
-//
-// For more information on this script, visit:
-// http://huddletogether.com/projects/lightbox2/
-//
-// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
-//
-// Credit also due to those who have helped, inspired, and made their code available to the public.
-// Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
-//
-//
-// -----------------------------------------------------------------------------------
-/*
-
- Table of Contents
- -----------------
- Configuration
- Global Variables
-
- Extending Built-in Objects
- - Object.extend(Element)
- - Array.prototype.removeDuplicates()
- - Array.prototype.empty()
-
- Lightbox Class Declaration
- - initialize()
- - start()
- - changeImage()
- - resizeImageContainer()
- - showImage()
- - updateDetails()
- - updateNav()
- - enableKeyboardNav()
- - disableKeyboardNav()
- - keyboardAction()
- - preloadNeighborImages()
- - end()
-
- Miscellaneous Functions
- - getPageScroll()
- - getPageSize()
- - getKey()
- - listenKey()
- - showSelectBoxes()
- - hideSelectBoxes()
- - pause()
- - initLightbox()
-
- Function Calls
- - addLoadEvent(initLightbox)
-
-*/
-// -----------------------------------------------------------------------------------
-
-//
-// Configuration
-//
-var fileLoadingImage = "/sow/images/loading.gif";
-var fileBottomNavCloseImage = "/sow/images/closelabel.gif";
-
-var resizeSpeed = 7; // controls the speed of the image resizing (1=slowest and 10=fastest)
-
-var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable
-
-// -----------------------------------------------------------------------------------
-
-//
-// Global Variables
-//
-var imageArray = new Array;
-var activeImage;
-
-if(resizeSpeed > 10){ resizeSpeed = 10;}
-if(resizeSpeed < 1){ resizeSpeed = 1;}
-resizeDuration = (11 - resizeSpeed) * 0.15;
-
-// -----------------------------------------------------------------------------------
-
-//
-// Additional methods for Element added by SU, Couloir
-// - further additions by Lokesh Dhakar (huddletogether.com)
-//
-Object.extend(Element, {
- getWidth: function(element) {
- element = $(element);
- return element.offsetWidth;
- },
- setWidth: function(element,w) {
- element = $(element);
- element.style.width = w +"px";
- },
- setHeight: function(element,h) {
- element = $(element);
- element.style.height = h +"px";
- },
- setTop: function(element,t) {
- element = $(element);
- element.style.top = t +"px";
- },
- setSrc: function(element,src) {
- element = $(element);
- element.src = src;
- },
- setHref: function(element,href) {
- element = $(element);
- element.href = href;
- },
- setInnerHTML: function(element,content) {
- element = $(element);
- element.innerHTML = content;
- }
-});
-
-// -----------------------------------------------------------------------------------
-
-//
-// Extending built-in Array object
-// - array.removeDuplicates()
-// - array.empty()
-//
-Array.prototype.removeDuplicates = function () {
- for(i = 1; i < this.length; i++){
- if(this[i][0] == this[i-1][0]){
- this.splice(i,1);
- }
- }
-}
-
-// -----------------------------------------------------------------------------------
-
-Array.prototype.empty = function () {
- for(i = 0; i <= this.length; i++){
- this.shift();
- }
-}
-
-// -----------------------------------------------------------------------------------
-
-//
-// Lightbox Class Declaration
-// - initialize()
-// - start()
-// - changeImage()
-// - resizeImageContainer()
-// - showImage()
-// - updateDetails()
-// - updateNav()
-// - enableKeyboardNav()
-// - disableKeyboardNav()
-// - keyboardNavAction()
-// - preloadNeighborImages()
-// - end()
-//
-// Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
-//
-var Lightbox = Class.create();
-
-Lightbox.prototype = {
-
- // initialize()
- // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
- // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
- // the function inserts html at the bottom of the page which is used to display the shadow
- // overlay and the image container.
- //
- initialize: function() {
- if (!document.getElementsByTagName){ return; }
- var anchors = document.getElementsByTagName('a');
-
- // loop through all anchor tags
- for (var i=0; i<anchors.length; i++){
- var anchor = anchors[i];
-
- var relAttribute = String(anchor.getAttribute('rel'));
-
- // use the string.match() method to catch 'lightbox' references in the rel attribute
- if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
- anchor.onclick = function () {myLightbox.start(this); return false;}
- }
- }
-
- // The rest of this code inserts html at the bottom of the page that looks similar to this:
- //
- // <div id="overlay"></div>
- // <div id="lightbox">
- // <div id="outerImageContainer">
- // <div id="imageContainer">
- // <img id="lightboxImage">
- // <div style="" id="hoverNav">
- // <a href="#" id="prevLink"></a>
- // <a href="#" id="nextLink"></a>
- // </div>
- // <div id="loading">
- // <a href="#" id="loadingLink">
- // <img src="images/loading.gif">
- // </a>
- // </div>
- // </div>
- // </div>
- // <div id="imageDataContainer">
- // <div id="imageData">
- // <div id="imageDetails">
- // <span id="caption"></span>
- // <span id="numberDisplay"></span>
- // </div>
- // <div id="bottomNav">
- // <a href="#" id="bottomNavClose">
- // <img src="images/close.gif">
- // </a>
- // </div>
- // </div>
- // </div>
- // </div>
-
-
- var objBody = document.getElementsByTagName("body").item(0);
-
- var objOverlay = document.createElement("div");
- objOverlay.setAttribute('id','overlay');
- objOverlay.style.display = 'none';
- objOverlay.onclick = function() { myLightbox.end(); return false; }
- objBody.appendChild(objOverlay);
-
- var objLightbox = document.createElement("div");
- objLightbox.setAttribute('id','lightbox');
- objLightbox.style.display = 'none';
- objBody.appendChild(objLightbox);
-
- var objOuterImageContainer = document.createElement("div");
- objOuterImageContainer.setAttribute('id','outerImageContainer');
- objLightbox.appendChild(objOuterImageContainer);
-
- var objImageContainer = document.createElement("div");
- objImageContainer.setAttribute('id','imageContainer');
- objOuterImageContainer.appendChild(objImageContainer);
-
- var objLightboxImage = document.createElement("img");
- objLightboxImage.setAttribute('id','lightboxImage');
- objImageContainer.appendChild(objLightboxImage);
-
- var objHoverNav = document.createElement("div");
- objHoverNav.setAttribute('id','hoverNav');
- objImageContainer.appendChild(objHoverNav);
-
- var objPrevLink = document.createElement("a");
- objPrevLink.setAttribute('id','prevLink');
- objPrevLink.setAttribute('href','#');
- objHoverNav.appendChild(objPrevLink);
-
- var objNextLink = document.createElement("a");
- objNextLink.setAttribute('id','nextLink');
- objNextLink.setAttribute('href','#');
- objHoverNav.appendChild(objNextLink);
-
- var objLoading = document.createElement("div");
- objLoading.setAttribute('id','loading');
- objImageContainer.appendChild(objLoading);
-
- var objLoadingLink = document.createElement("a");
- objLoadingLink.setAttribute('id','loadingLink');
- objLoadingLink.setAttribute('href','#');
- objLoadingLink.onclick = function() { myLightbox.end(); return false; }
- objLoading.appendChild(objLoadingLink);
-
- var objLoadingImage = document.createElement("img");
- objLoadingImage.setAttribute('src', fileLoadingImage);
- objLoadingLink.appendChild(objLoadingImage);
-
- var objImageDataContainer = document.createElement("div");
- objImageDataContainer.setAttribute('id','imageDataContainer');
- objImageDataContainer.className = 'clearfix';
- objLightbox.appendChild(objImageDataContainer);
-
- var objImageData = document.createElement("div");
- objImageData.setAttribute('id','imageData');
- objImageDataContainer.appendChild(objImageData);
-
- var objImageDetails = document.createElement("div");
- objImageDetails.setAttribute('id','imageDetails');
- objImageData.appendChild(objImageDetails);
-
- var objCaption = document.createElement("span");
- objCaption.setAttribute('id','caption');
- objImageDetails.appendChild(objCaption);
-
- var objNumberDisplay = document.createElement("span");
- objNumberDisplay.setAttribute('id','numberDisplay');
- objImageDetails.appendChild(objNumberDisplay);
-
- var objBottomNav = document.createElement("div");
- objBottomNav.setAttribute('id','bottomNav');
- objImageData.appendChild(objBottomNav);
-
- var objBottomNavCloseLink = document.createElement("a");
- objBottomNavCloseLink.setAttribute('id','bottomNavClose');
- objBottomNavCloseLink.setAttribute('href','#');
- objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
- objBottomNav.appendChild(objBottomNavCloseLink);
-
- var objBottomNavCloseImage = document.createElement("img");
- objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
- objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
- },
-
- //
- // start()
- // Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
- //
- start: function(imageLink) {
-
- hideSelectBoxes();
-
- // stretch overlay to fill page and fade in
- var arrayPageSize = getPageSize();
- Element.setHeight('overlay', arrayPageSize[1]);
- new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
-
- imageArray = [];
- imageNum = 0;
-
- if (!document.getElementsByTagName){ return; }
- var anchors = document.getElementsByTagName('a');
-
- // if image is NOT part of a set..
- if((imageLink.getAttribute('rel') == 'lightbox')){
- // add single image to imageArray
- imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
- } else {
- // if image is part of a set..
-
- // loop through anchors, find other images in set, and add them to imageArray
- for (var i=0; i<anchors.length; i++){
- var anchor = anchors[i];
- if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
- imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
- }
- }
- imageArray.removeDuplicates();
- while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
- }
-
- // calculate top offset for the lightbox and display
- var arrayPageSize = getPageSize();
- var arrayPageScroll = getPageScroll();
- var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
-
- Element.setTop('lightbox', lightboxTop);
- Element.show('lightbox');
-
- this.changeImage(imageNum);
- },
-
- //
- // changeImage()
- // Hide most elements and preload image in preparation for resizing image container.
- //
- changeImage: function(imageNum) {
-
- activeImage = imageNum; // update global var
-
- // hide elements during transition
- Element.show('loading');
- Element.hide('lightboxImage');
- Element.hide('hoverNav');
- Element.hide('prevLink');
- Element.hide('nextLink');
- Element.hide('imageDataContainer');
- Element.hide('numberDisplay');
-
- imgPreloader = new Image();
-
- // once image is preloaded, resize image container
- imgPreloader.onload=function(){
- Element.setSrc('lightboxImage', imageArray[activeImage][0]);
- myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
- }
- imgPreloader.src = imageArray[activeImage][0];
- },
-
- //
- // resizeImageContainer()
- //
- resizeImageContainer: function( imgWidth, imgHeight) {
-
- // get current height and width
- this.wCur = Element.getWidth('outerImageContainer');
- this.hCur = Element.getHeight('outerImageContainer');
-
- // scalars based on change from old to new
- this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100;
- this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100;
-
- // calculate size difference between new and old image, and resize if necessary
- wDiff = (this.wCur - borderSize * 2) - imgWidth;
- hDiff = (this.hCur - borderSize * 2) - imgHeight;
-
- if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
- if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
-
- // if new and old image are same size and no scaling transition is necessary,
- // do a quick pause to prevent image flicker.
- if((hDiff == 0) && (wDiff == 0)){
- if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);}
- }
-
- Element.setHeight('prevLink', imgHeight);
- Element.setHeight('nextLink', imgHeight);
- Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));
-
- this.showImage();
- },
-
- //
- // showImage()
- // Display image and begin preloading neighbors.
- //
- showImage: function(){
- Element.hide('loading');
- new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });
- this.preloadNeighborImages();
- },
-
- //
- // updateDetails()
- // Display caption, image number, and bottom nav.
- //
- updateDetails: function() {
-
- Element.show('caption');
- Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
-
- // if image is part of set display 'Image x of x'
- if(imageArray.length > 1){
- Element.show('numberDisplay');
- Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
- }
-
- new Effect.Parallel(
- [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }),
- new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ],
- { duration: 0.65, afterFinish: function() { myLightbox.updateNav();} }
- );
- },
-
- //
- // updateNav()
- // Display appropriate previous and next hover navigation.
- //
- updateNav: function() {
-
- Element.show('hoverNav');
-
- // if not first image in set, display prev image button
- if(activeImage != 0){
- Element.show('prevLink');
- document.getElementById('prevLink').onclick = function() {
- myLightbox.changeImage(activeImage - 1); return false;
- }
- }
-
- // if not last image in set, display next image button
- if(activeImage != (imageArray.length - 1)){
- Element.show('nextLink');
- document.getElementById('nextLink').onclick = function() {
- myLightbox.changeImage(activeImage + 1); return false;
- }
- }
-
- this.enableKeyboardNav();
- },
-
- //
- // enableKeyboardNav()
- //
- enableKeyboardNav: function() {
- document.onkeydown = this.keyboardAction;
- },
-
- //
- // disableKeyboardNav()
- //
- disableKeyboardNav: function() {
- document.onkeydown = '';
- },
-
- //
- // keyboardAction()
- //
- keyboardAction: function(e) {
- if (e == null) { // ie
- keycode = event.keyCode;
- } else { // mozilla
- keycode = e.which;
- }
-
- key = String.fromCharCode(keycode).toLowerCase();
-
- if((key == 'x') || (key == 'o') || (key == 'c')){ // close lightbox
- myLightbox.end();
- } else if(key == 'p'){ // display previous image
- if(activeImage != 0){
- myLightbox.disableKeyboardNav();
- myLightbox.changeImage(activeImage - 1);
- }
- } else if(key == 'n'){ // display next image
- if(activeImage != (imageArray.length - 1)){
- myLightbox.disableKeyboardNav();
- myLightbox.changeImage(activeImage + 1);
- }
- }
-
-
- },
-
- //
- // preloadNeighborImages()
- // Preload previous and next images.
- //
- preloadNeighborImages: function(){
-
- if((imageArray.length - 1) > activeImage){
- preloadNextImage = new Image();
- preloadNextImage.src = imageArray[activeImage + 1][0];
- }
- if(activeImage > 0){
- preloadPrevImage = new Image();
- preloadPrevImage.src = imageArray[activeImage - 1][0];
- }
-
- },
-
- //
- // end()
- //
- end: function() {
- this.disableKeyboardNav();
- Element.hide('lightbox');
- new Effect.Fade('overlay', { duration: 0.2});
- showSelectBoxes();
- }
-}
-
-// -----------------------------------------------------------------------------------
-
-//
-// getPageScroll()
-// Returns array with x,y page scroll values.
-// Core code from - quirksmode.org
-//
-function getPageScroll(){
-
- var yScroll;
-
- if (self.pageYOffset) {
- yScroll = self.pageYOffset;
- } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
- yScroll = document.documentElement.scrollTop;
- } else if (document.body) {// all other Explorers
- yScroll = document.body.scrollTop;
- }
-
- arrayPageScroll = new Array('',yScroll)
- return arrayPageScroll;
-}
-
-// -----------------------------------------------------------------------------------
-
-//
-// getPageSize()
-// Returns array with page width, height and window width, height
-// Core code from - quirksmode.org
-// Edit for Firefox by pHaez
-//
-function getPageSize(){
-
- var xScroll, yScroll;
-
- if (window.innerHeight && window.scrollMaxY) {
- xScroll = document.body.scrollWidth;
- yScroll = window.innerHeight + window.scrollMaxY;
- } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
- xScroll = document.body.scrollWidth;
- yScroll = document.body.scrollHeight;
- } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
- xScroll = document.body.offsetWidth;
- yScroll = document.body.offsetHeight;
- }
-
- var windowWidth, windowHeight;
- if (self.innerHeight) { // all except Explorer
- windowWidth = self.innerWidth;
- windowHeight = self.innerHeight;
- } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
- windowWidth = document.documentElement.clientWidth;
- windowHeight = document.documentElement.clientHeight;
- } else if (document.body) { // other Explorers
- windowWidth = document.body.clientWidth;
- windowHeight = document.body.clientHeight;
- }
-
- // for small pages with total height less then height of the viewport
- if(yScroll < windowHeight){
- pageHeight = windowHeight;
- } else {
- pageHeight = yScroll;
- }
-
- // for small pages with total width less then width of the viewport
- if(xScroll < windowWidth){
- pageWidth = windowWidth;
- } else {
- pageWidth = xScroll;
- }
-
-
- arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
- return arrayPageSize;
-}
-
-// -----------------------------------------------------------------------------------
-
-//
-// getKey(key)
-// Gets keycode. If 'x' is pressed then it hides the lightbox.
-//
-function getKey(e){
- if (e == null) { // ie
- keycode = event.keyCode;
- } else { // mozilla
- keycode = e.which;
- }
- key = String.fromCharCode(keycode).toLowerCase();
-
- if(key == 'x'){
- }
-}
-
-// -----------------------------------------------------------------------------------
-
-//
-// listenKey()
-//
-function listenKey () { document.onkeypress = getKey; }
-
-// ---------------------------------------------------
-
-function showSelectBoxes(){
- selects = document.getElementsByTagName("select");
- for (i = 0; i != selects.length; i++) {
- selects[i].style.visibility = "visible";
- }
-}
-
-// ---------------------------------------------------
-
-function hideSelectBoxes(){
- selects = document.getElementsByTagName("select");
- for (i = 0; i != selects.length; i++) {
- selects[i].style.visibility = "hidden";
- }
-}
-
-// ---------------------------------------------------
-
-//
-// pause(numberMillis)
-// Pauses code execution for specified time. Uses busy code, not good.
-// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
-//
-function pause(numberMillis) {
- var now = new Date();
- var exitTime = now.getTime() + numberMillis;
- while (true) {
- now = new Date();
- if (now.getTime() > exitTime)
- return;
- }
-}
-
-// ---------------------------------------------------
-
-
-
-function initLightbox() { myLightbox = new Lightbox(); }
-Event.observe(window, 'load', initLightbox, false);
|