// lightwindow.js v2.0 // // Copyright (c) 2007 stickmanlabs // Author: Kevin P Miller | http://www.stickmanlabs.com // // LightWindow is freely distributable under the terms of an MIT-style license. // // I don't care what you think about the file size... // Be a pro: // http://www.thinkvitamin.com/features/webapps/serving-javascript-fast // http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files // /*-----------------------------------------------------------------------------------------------*/ if(typeof Effect == 'undefined') throw("lightwindow.js requires including script.aculo.us' effects.js library!"); // This will stop image flickering in IE6 when elements with images are moved try { document.execCommand("BackgroundImageCache", false, true); } catch(e) {} var lightwindow = Class.create(); lightwindow.prototype = { // // Setup Variables // element : null, contentToFetch : null, windowActive : false, dataEffects : [], dimensions : { cruft : null, container : null, viewport : { height : null, width : null, offsetTop : null, offsetLeft : null } }, pagePosition : { x : 0, y : 0 }, pageDimensions : { width : null, height : null }, preloadImage : [], preloadedImage : [], scrollbarOffset : 18, containerChange : { height : 0, width : 0 }, // // Initialize the lightwindow. // initialize : function(options) { this.options = Object.extend({ contentOffset : { height : 20, width : 20 }, dimensions : { image : {height : 533, width : 800}, external : {height : 350, width : 650}, titleHeight : 25 }, classNames : { standard : 'lightwindow', action : 'lightwindow_action' }, fileTypes : { page : ['jsp', 'htm', 'html', 'shtml', 'txt'], image : ['bmp', 'gif', 'jpg', 'png', 'tiff'] }, mimeTypes : { gif : 'image/gif', bmp : 'image/bmp', jpeg : 'image/jpeg', png : 'image/png', tiff : 'image/tiff' }, classids : { }, codebases : { }, viewportPadding : 10, overlay : { opacity : 0.5, image : staticHostHapping + '/img/black.png', presetImage : staticHostHapping + '/img/black-70.png' }, skin : { main : '
'+ '
' + '
'+ '
'+ '
'+ ''+ ''+ '
'+ '
'+ '
'+ '
'+ '
', loading : '
'+ 'loading'+ 'Loading or Cancel'+ ''+ '
', iframe : ''+ ''+ ''+ '{body_replace}'+ ''+ '', gallery : { top : '
'+ '

{gallery_title_replace}

'+ ''+ '
' } }, formMethod : 'get', hideFlash : true, showTitleBar : true, navigationHandler : false, finalAnimationHandler : false, formHandler : false }, options || {}); this.duration = 0; this._getScroll(); this._getPageDimensions(); this._browserDimensions(); this._addLightWindowMarkup(false); this._setupDimensions(); }, // // Turn off the window // deactivate : function(){ // The window is not active this.windowActive = false; // Kill the animation this.animating = false; // Clear our element this.element = null; // hide the window. this._displayLightWindow('none', 'visible'); // Clear out the window Contents this._clearWindowContents(false); // Undo the setup this._prepareIE(false); // this._setupDimensions(); this._toggleTroubleElements('visible', false); //this._toggleTroubleElements('block', false); this._monitorKeyboard(false); }, // // Open a Window from a hash of attributes // activateWindow : function(options) { this.element = Object.extend({ href : null, title : null, top : null, left : null, type : 'external', showImages : null, height : null, width : null, form : null }, options || {}); // esto no estaba en el LIGHTWINDOW original, solo lo hacia en el initialize this._getPageDimensions(); $('lightwindow_overlay').setStyle( { height: this.pageDimensions.height+'px' } ); // Set the window type this.contentToFetch = this.element.href; this.windowType = this.element.type; // Clear out the window Contents this._clearWindowContents(true); // Setup everything this._getScroll(); this._browserDimensions(); this._setupDimensions(); this._toggleTroubleElements('hidden', false); this._setStatus(true); this._monitorKeyboard(true); this._prepareIE(true); this._loadWindow(); }, // // Add the markup to the page. // _addLightWindowMarkup : function(rebuild) { var overlay = Element.extend(document.createElement('div')); overlay.setAttribute('id', 'lightwindow_overlay'); // FF Mac has a problem with putting Flash above a layer without a 100% opacity background, so we need to use a pre-made if (Prototype.Browser.Gecko) { overlay.setStyle({ backgroundImage: 'url('+this.options.overlay.presetImage+')', backgroundRepeat: 'repeat', height: this.pageDimensions.height+'px' }); } else { // no va en IE7 if (Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) > 7) { overlay.setStyle({ opacity: this.options.overlay.opacity, backgroundImage: 'url('+this.options.overlay.image+')', backgroundRepeat: 'repeat', height: this.pageDimensions.height+'px' }); } } var lw = document.createElement('div'); lw.setAttribute('id', 'lightwindow'); lw.innerHTML = this.options.skin.main; var body = document.getElementsByTagName('body')[0]; body.appendChild(overlay); body.appendChild(lw); if ($('lightwindow_title_bar_close_link')) { Event.observe('lightwindow_title_bar_close_link', 'click', this.deactivate.bindAsEventListener(this)); $('lightwindow_title_bar_close_link').onclick = function() {return false;}; } // Because we use position absolute, kill the scroll Wheel on animations if (Prototype.Browser.IE) { Event.observe(document, 'mousewheel', this._stopScrolling.bindAsEventListener(this), false); } else { Event.observe(window, 'DOMMouseScroll', this._stopScrolling.bindAsEventListener(this), false); } //Event.observe(overlay, 'click', this.deactivate.bindAsEventListener(this), false); //overlay.onclick = function() {return false;}; }, // // Clear the window contents out // _clearWindowContents : function(contents) { // If there is an iframe, its got to go if ($('lightwindow_iframe')) { Element.remove($('lightwindow_iframe')); } if (contents) { // Empty the contents $('lightwindow_contents_inner').innerHTML = ''; // Reset the scroll bars $('lightwindow_contents').setStyle({ overflow: 'hidden' }); if (!this.windowActive) { $('lightwindow_title_bar_title').innerHTML = ''; } } }, // // Set the status of our animation to keep things from getting clunky // _setStatus : function(status) { this.animating = status; if (!(/MSIE 6./i.test(navigator.userAgent))) { //ASH De momento funciona bien sin esto this._fixedWindow(status); } if (status) { Element.show('lightwindow_loading'); } }, // // Make this window Fixed // _fixedWindow : function(status) { if (status) { if (this.windowActive) { this._getScroll(); $('lightwindow').setStyle({ position: 'absolute', top: parseFloat($('lightwindow').getStyle('top'))+this.pagePosition.y+'px', left: parseFloat($('lightwindow').getStyle('left'))+this.pagePosition.x+'px' }); } else { $('lightwindow').setStyle({ position: 'absolute' }); } } else { if (this.windowActive) { this._getScroll(); $('lightwindow').setStyle({ position: 'fixed', top: parseFloat($('lightwindow').getStyle('top'))-this.pagePosition.y+'px', left: parseFloat($('lightwindow').getStyle('left'))-this.pagePosition.x+'px' }); } else { if ($('lightwindow_iframe')) { // Ideally here we would set a 50% value for top and left, but Safari rears it ugly head again and we need to do it by pixels this._browserDimensions(); } // ASH: This is a bug of FF in Linux, with position:fixed, it will be fix in FF 3.6 var ua = navigator.userAgent.toLowerCase(); if (!(Prototype.Browser.Gecko && ua.indexOf('linux') > -1)) { $('lightwindow').setStyle({ position: 'fixed', top: (parseFloat(this._getParameter('lightwindow_top')) ? parseFloat(this._getParameter('lightwindow_top'))+'px' : this.dimensions.viewport.height/2+'px'), left: (parseFloat(this._getParameter('lightwindow_left')) ? parseFloat(this._getParameter('lightwindow_left'))+'px' : this.dimensions.viewport.width/2+'px') }); } } } }, // // Prepare the window for IE. // _prepareIE : function(setup) { if (Prototype.Browser.IE) { var height, overflowX, overflowY; if (setup) { var height = '100%'; } else { var height = 'auto'; } var body = document.getElementsByTagName('body')[0]; var html = document.getElementsByTagName('html')[0]; html.style.height = body.style.height = height; } }, _stopScrolling : function(e) { if (this.animating) { if (e.preventDefault) { e.preventDefault(); } e.returnValue = false; } }, // // Get the scroll for the page. // _getScroll : function(){ if(typeof(window.pageYOffset) == 'number') { this.pagePosition.x = window.pageXOffset; this.pagePosition.y = window.pageYOffset; } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { this.pagePosition.x = document.body.scrollLeft; this.pagePosition.y = document.body.scrollTop; } else if(document.documentElement) { this.pagePosition.x = document.documentElement.scrollLeft; this.pagePosition.y = document.documentElement.scrollTop; } }, // // Reset the scroll. // _setScroll : function(x, y) { document.documentElement.scrollLeft = x; document.documentElement.scrollTop = y; }, // // Hide Selects from the page because of IE. // We could use iframe shims instead here but why add all the extra markup for one browser when this is much easier and cleaner // _toggleTroubleElements : function(visibility, content){ if (content) { var selects = $('lightwindow_contents').getElementsByTagName('select'); } else { var selects = document.getElementsByTagName('select'); } for(var i = 0; i < selects.length; i++) { selects[i].style.visibility = visibility; } if (!content) { if( this.options.hideFlash ){ var objects = document.getElementsByTagName('object'); var object; for( var i = 0; i != objects.length; i++ ){ object = $( objects[i] ); if( Prototype.Browser.IE ){ // si es IE, no ocultar, simplemente manejar el ancho y alto var ancho = object.getWidth(); var alto = object.getHeight(); if( visibility == 'hidden' ){ if( parseInt(ancho) > 0 ){ object.setAttribute( "ex_ancho", ancho ); } if( parseInt(alto) > 0 ){ object.setAttribute( "ex_alto", alto ); } } object.style.width = visibility == 'hidden' ? "0px" : object.getAttribute( "ex_ancho" ); object.style.height = visibility == 'hidden' ? "0px" : object.getAttribute( "ex_alto" ); } else { object.style.visibility = visibility; } } var embeds = document.getElementsByTagName('embed'); for( var i = 0; i != embeds.length; i++ ){ embeds[i].style.visibility = visibility; } } var iframes = document.getElementsByTagName('iframe'); for (i = 0; i != iframes.length; i++) { iframes[i].style.visibility = visibility; } } }, // // Get the actual page size // _getPageDimensions : function() { 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){ xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } if(yScroll < windowHeight){ this.pageDimensions.height = windowHeight; } else { this.pageDimensions.height = yScroll; } if(xScroll < windowWidth){ this.pageDimensions.width = windowWidth; } else { this.pageDimensions.width = xScroll; } }, // // Display the lightWindow. // _displayLightWindow : function(display, visibility) { $('lightwindow_overlay').style.display = $('lightwindow').style.display = $('lightwindow_container').style.display = display; $('lightwindow_overlay').style.visibility = $('lightwindow').style.visibility = $('lightwindow_container').style.visibility = visibility; if (visibility=="visible") { lwContainer.render($('lightwindow_container_shadow')); } }, // // Setup Dimensions of lightwindow. // _setupDimensions : function() { var originalHeight, originalWidth; switch (this.windowType) { case 'external' : // originalHeight = this.options.dimensions.external.height; // originalWidth = this.options.dimensions.external.width; originalHeight = parseFloat(this._getParameter('lightwindow_height')); originalWidth = parseFloat(this._getParameter('lightwindow_width')); break; } if (typeof(originalHeight)!="undefined") { var offsetHeight = this._getParameter('lightwindow_top') ? parseFloat(this._getParameter('lightwindow_top'))+this.pagePosition.y : this.dimensions.viewport.height/2+this.pagePosition.y; var offsetWidth = this._getParameter('lightwindow_left') ? parseFloat(this._getParameter('lightwindow_left'))+this.pagePosition.x : this.dimensions.viewport.width/2+this.pagePosition.x; // So if a theme has say shadowed edges, they should be consistant and take care of in the contentOffset $('lightwindow').setStyle({ top: (offsetHeight - parseFloat(originalHeight/2))+'px', left: (offsetWidth - parseFloat(originalWidth/2))+'px' }); $('lightwindow_container').setStyle({ height: originalHeight+'px', width: originalWidth+'px' }); if ($('lightwindow_loading')) { $('lightwindow_loading').setStyle({ top: '5px', left: '5px', height: (originalHeight - this.options.dimensions.titleHeight + 10)+'px', width: (originalWidth-10)+'px' }); } $('lightwindow_contents').setStyle({ height: (originalHeight - this.options.dimensions.titleHeight - 20) +'px', width: originalWidth+'px' }); $('lightwindow_contents_inner').setStyle({ height: (originalHeight - this.options.dimensions.titleHeight - 40) +'px', width: (originalWidth-30)+'px' }); } }, // // Monitor the keyboard while this lightwindow is up // _monitorKeyboard : function(status) { if (status) document.onkeydown = this._eventKeypress.bind(this); else document.onkeydown = ''; return; }, // // Perform keyboard actions // _eventKeypress : function(e) { if (e == null) { var keycode = event.keyCode; } else { var keycode = e.which; } switch (keycode) { case 27: this.deactivate(); break; case 13: return false; default: break; } // Gotta stop those quick fingers if (this.animating) { return false; } return false; }, // // Get the value from the params attribute string. // _getParameter : function(parameter, parameters) { if (!this.element) return false; if (parameter == 'lightwindow_top' && this.element.top) { return unescape(this.element.top); } else if (parameter == 'lightwindow_left' && this.element.left) { return unescape(this.element.left); } else if (parameter == 'lightwindow_type' && this.element.type) { return unescape(this.element.type); } else if (parameter == 'lightwindow_show_images' && this.element.showImages) { return unescape(this.element.showImages); } else if (parameter == 'lightwindow_height' && this.element.height) { return unescape(this.element.height); } else if (parameter == 'lightwindow_width' && this.element.width) { return unescape(this.element.width); } else if (parameter == 'lightwindow_form' && this.element.form) { return unescape(this.element.form); } else { if (!parameters) { if (this.element.params) parameters = this.element.params; else return false; } var value; var parameterArray = parameters.split(','); var compareString = parameter+'='; var compareLength = compareString.length; for (var i = 0; i < parameterArray.length; i++) { if (parameterArray[i].substr(0, compareLength) == compareString) { var currentParameter = parameterArray[i].split('='); value = currentParameter[1]; break; } } if (!value) return false; else return unescape(value); } }, // // Get the Browser Viewport Dimensions // _browserDimensions : function() { if (Prototype.Browser.IE) { this.dimensions.viewport.height = document.documentElement.clientHeight; this.dimensions.viewport.width = document.documentElement.clientWidth; } else { this.dimensions.viewport.height = window.innerHeight; this.dimensions.viewport.width = document.width || document.body.offsetWidth; } return; }, // // Get the outer HTML of an object CROSS BROWSER // _outerHTML : function(object) { if (Prototype.Browser.IE) { return object.outerHTML; } else { var clone = object.cloneNode(true); var cloneDiv = document.createElement('div'); cloneDiv.appendChild(clone); return cloneDiv.innerHTML; } }, // // Convert an object to markup // _convertToMarkup : function(object, closeTag) { var markup = this._outerHTML(object).replace('', ''); if (Prototype.Browser.IE) { for (var i = 0; i < object.childNodes.length; i++){ markup += this._outerHTML(object.childNodes[i]); } markup += ''; } return markup; }, // // Depending what type of browser it is we have to append the object differently... DAMN YOU IE!! // _appendObject : function(object, closeTag, appendTo) { if (Prototype.Browser.IE) { appendTo.innerHTML += this._convertToMarkup(object, closeTag); } else { appendTo.appendChild(object); } }, // // Add in iframe // _appendIframe : function(scroll) { var iframe = document.createElement('iframe'); iframe.setAttribute('id', 'lightwindow_iframe'); iframe.setAttribute('name', 'lightwindow_iframe'); iframe.setAttribute('src', this.contentToFetch); iframe.setAttribute('height', '100%'); iframe.setAttribute('width', '100%'); iframe.setAttribute('frameborder', '0'); iframe.setAttribute('marginwidth', '0'); iframe.setAttribute('marginheight', '0'); iframe.setAttribute('allowtransparency','true'); //iframe.setAttribute('scrolling', scroll); iframe.setAttribute('scrolling', 'no'); this._appendObject(iframe, 'iframe', $('lightwindow_contents_inner')); // ASH: Now it has to wait until the iframe is totally loaded // object = $('lightwindow_iframe') Event.observe($('lightwindow_iframe'), 'load', function(){ myLightWindow._defaultfinalWindowAnimationHandler(); } ); }, // // Load the window Information // _loadWindow : function() { switch (this.windowType) { case 'external' : this._appendIframe('auto'); this._processWindow(); break; default : throw("Page Type could not be determined, please amend this lightwindow URL "+this.contentToFetch); break; } }, // // Process the Window // _processWindow : function() { if (this.element.title != 'null') { $('lightwindow_title_bar_title').innerHTML = this.element.title; } else { $('lightwindow_title_bar_title').innerHTML = ''; } // We are ready, lets show this puppy off! this._displayLightWindow('block', 'visible'); }, windowReload : function() { window.location.reload(); }, // // Finish up Window Animation // _defaultfinalWindowAnimationHandler : function() { // Because of major flickering with the overlay we just hide it in this case Element.hide('lightwindow_loading'); this._setStatus(false); // ASH: We need this to bind a close button inside the iframe var lightwindow_iframe_elm = $('lightwindow_iframe'); if (lightwindow_iframe_elm) { // With custom document.domain, it may happen that // the iframe is not yet available, resulting in "Access Denied" try { var close_button_elm= lightwindow_iframe_elm.contentWindow.document.getElementById('lightwindow_close_button'); if (close_button_elm) { Event.observe(close_button_elm, 'click', this.deactivate.bindAsEventListener(this)); close_button_elm.onclick = function() {return false;}; } // Bind a reload parent event "hook" inside the iframe var reload_button_elm= lightwindow_iframe_elm.contentWindow.document.getElementById('lightwindow_parent_reload'); if (reload_button_elm) { Event.observe(reload_button_elm, 'click', this.windowReload.bindAsEventListener(this), false); } } catch (e) { // cross siting problem } } } }; var myLightWindow; Event.observe( window,'load', function(){ myLightWindow = (myLightWindow || new lightwindow() ); });