/* rsBrightBox v1.0 - Bright Box for Loading Dynamic Content into a Box-Window - Copyright (c) 1995-2008 EDge Interactive. All rights reserved. - Script Author - Robert J. Secord, B.Sc. - Dependancies: - Mootools v1.2 or later. - rsOverlay v2.0 - Custom Screen Overlay Control - Tested Browsers: - Windows: IE 6, IE 7, Firefox 2+, Opera 9+, Netscape 8+, Google Chrome 0.4 - TODO: - Add Ajax Content - Add Image Gallery Content */ // ----------------------------------------------------------------------------------------------------------------- // rsBrightBoxThemes Collection var rsBrightBoxThemes = { // Common (Silver) Theme Common: { GraphicsSubPath: 'silver/', CssClass: { Container: 'rsBrightBox-Container', HeaderContainer: 'rsBrightBox-Header', HeaderCTL: 'rsBrightBox-Header-CTL', HeaderCTR: 'rsBrightBox-Header-CTR', HeaderText: 'rsBrightBox-Header-Text', BodyContainer: 'rsBrightBox-Body', BodyOuter: 'rsBrightBox-Body-Outer', BodyInner: 'rsBrightBox-Body-Inner', BodyIFrame: 'rsBrightBox-Body-IFrame', BodyLoading: 'rsBrightBox-Body-Loading', FooterContainer: 'rsBrightBox-Footer', FooterCBL: 'rsBrightBox-Footer-CBL', FooterCBR: 'rsBrightBox-Footer-CBR', FooterText: 'rsBrightBox-Footer-Text', ButtonClose: 'rsBrightBox-Button-Close', ButtonCloseHover: 'rsBrightBox-Button-Close-Hover' }, Styles: { Container: 'background:transparent;', HeaderContainer: 'height:30px; background:transparent;', HeaderCTL: 'position:absolute; top:0; left:0; width:10px; height:30px; background:transparent url([GFX-PATH]corner_tl.gif) no-repeat top left;', HeaderCTR: 'position:absolute; top:0; right:0; width:10px; height:30px; background:transparent url([GFX-PATH]corner_tr.gif) no-repeat top right;', HeaderText: 'position:relative; height:30px; line-height:30px; font-size:1.1em; font-weight:bold; background:#FFF; margin:0 10px; padding:0 15px;', BodyContainer: 'background:#FFF;', BodyOuter: 'background:#FFF;', BodyInner: 'background:transparent;', BodyIFrame: '', BodyLoading: 'background:transparent url([GFX-PATH]loading.gif) no-repeat center;', FooterContainer: 'height:30px; background:transparent;', FooterCBL: 'position:absolute; bottom:0; left:0; width:10px; height:30px; background:transparent url([GFX-PATH]corner_bl.gif) no-repeat bottom left;', FooterCBR: 'position:absolute; bottom:0; right:0; width:10px; height:30px; background:transparent url([GFX-PATH]corner_br.gif) no-repeat bottom right;', FooterText: 'height:30px; background:#FFF; margin:0 10px; padding:0 15px;', ButtonClose: 'position:absolute; top:5px; right:5px; width:45px; height:15px; line-height:1px; font-size:1px; cursor:pointer; background:transparent url([GFX-PATH]close.gif) no-repeat top left;', ButtonCloseHover: 'background-position:bottom left;' } } }; // ----------------------------------------------------------------------------------------------------------------- // rsBrightBox Class Definition var rsBrightBox = new Class( { Implements: [Events, Options], Extends: rsOverlay, // Requires rsOverlay v2.0 - Custom Screen Overlay Control // ------------------------------------------------------------------------------------------------------------- // Member Variables options: { BrightBox: { // Required Settings: GraphicsPath: '', UseSpecialFX: true, // Optional Initial Size: InitialSize: {x: 150, y: 150}, // Optional Defaults: Defaults: { Size: {x: 400, y: 300}, Header: 'Bright Box', Footer: '', Content: 'No Content', IFrameUrl: '', AjaxUrl: '', ImageGallery: [] }, // Optional Theme: Theme: rsBrightBoxThemes.Common, // Optional Developer Use: DebugMode: false } }, // ------------------------------------------------------------------------------------------------------------- // Class Constructor (options = JSON Object) initialize: function( options ) { // Internal; Set Parent Options this.options.onClickOverlay = this.HideBrightBox.bind(this); // Call Base Constructor, pass options to be set this.parent( options ); // State Flags this.bValidControl = true; this.bInTransition = false; // Check for Required Settings for Object Instantiation if( this.options.BrightBox.GraphicsPath.length < 1 ) return this.ErrorAlert('Object Construction Failed - Invalid GraphicsPath Supplied!'); // Merge Custom Theme with Common Theme this.options.BrightBox.Theme = $merge(rsBrightBoxThemes.Common, this.options.BrightBox.Theme); // Ensure Theme Styles have Proper Graphics Path var szGfxPath = '' + this.options.BrightBox.GraphicsPath + this.options.BrightBox.Theme.GraphicsSubPath; $each(this.options.BrightBox.Theme.Styles, function(szStyle, szKey){ this.options.BrightBox.Theme.Styles[szKey] = szStyle.replace(/\[GFX-PATH\]/i, szGfxPath); }.bind(this)); // Flag for Open State this.bBrightBoxOpen = false; // Attach Window Events window.addEvents( { 'domready': this.OnBBDomReady.bind(this), 'resize': this.RepositionBrightBox.bind(this) }); }, // ------------------------------------------------------------------------------------------------------------- // Internal Routine: DOM Ready Event (before OnLoad) OnBBDomReady: function() { // Insert Required CSS; Invalidates rsAlert on Fail this.InsertCSS(); // Build Hidden Alert Box this.BuildBrightBox(); }, // ------------------------------------------------------------------------------------------------------------- // Internal Routine: Builds Alert Box Control (Hidden by Default) BuildBrightBox: function() { if( !this.bValidControl ) return; // Build Bright Box Container this.oBrightBoxContainer = new Element('div', { 'class': this.options.BrightBox.Theme.CssClass.Container, 'styles': { 'top': -1000, 'left': -1000, 'z-index': (this.options.Overlay.zIndex + 10) } }).inject(document.body); // Build Bright Box Container Effects Object if( this.options.BrightBox.UseSpecialFX ) this.oBrightBoxContainerFx = new Fx.Morph(this.oBrightBoxContainer, {duration:1000, wait:false}); // , transition:Fx.Transitions.Back.easeOut}); // Build Header Elements this.oBrightBoxHeader = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.HeaderContainer}).inject(this.oBrightBoxContainer); var oHeaderCTL = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.HeaderCTL, 'html': ' '}).inject(this.oBrightBoxHeader); this.oBrightBoxHeaderText = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.HeaderText, 'html': ' '}).inject(this.oBrightBoxHeader); var oHeaderCTR = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.HeaderCTR, 'html': ' '}).inject(this.oBrightBoxHeader); // Build Body Elements var oBrightBoxBodyDiv = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.BodyContainer}).inject(this.oBrightBoxContainer); this.oBrightBoxBodyOuterDiv = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.BodyOuter}).inject(oBrightBoxBodyDiv); this.oBrightBoxBodyInnerDiv = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.BodyInner, 'html': '

'}).inject(this.oBrightBoxBodyOuterDiv); // Build Footer Elements this.oBrightBoxFooter = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.FooterContainer}).inject(this.oBrightBoxContainer); var oFooterCBL = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.FooterCBL, 'html': ' '}).inject(this.oBrightBoxFooter); this.oBrightBoxFooterText = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.FooterText, 'html': ' '}).inject(this.oBrightBoxFooter); var oFooterCBR = new Element('div', {'class': this.options.BrightBox.Theme.CssClass.FooterCBR, 'html': ' '}).inject(this.oBrightBoxFooter); // Build Close Icon this.oBrightBoxCloseIcon = new Element('span', { 'class': this.options.BrightBox.Theme.CssClass.ButtonClose, 'html': ' ', 'title': 'Close', 'events': { 'click': this.HideBrightBox.bind(this), 'mouseenter': function(){ this.oBrightBoxCloseIcon.addClass(this.options.BrightBox.Theme.CssClass.ButtonCloseHover); }.bind(this), 'mouseleave': function(){ this.oBrightBoxCloseIcon.removeClass(this.options.BrightBox.Theme.CssClass.ButtonCloseHover); }.bind(this) } }).inject(this.oBrightBoxContainer); // Make Container Movable //this.oAlertContainer.makeDraggable({handle: oHeaderDiv}); }, // ------------------------------------------------------------------------------------------------------------- // Internal Routine: Show Alert (overrides default alert() function) ShowBrightBox: function( oParams ) // oParams = {Size: {}, Header: '', Footer: '', Content: '', IFrameUrl: '', AjaxUrl: '', ImageGallery: []} { // Extra Parameters this.oBrightBoxParams = null; this.oBrightBoxParams = $merge(this.options.BrightBox.Defaults, ($type(oParams) == 'object') ? oParams : {}); // Prepare Bright Box Contents this.oBrightBoxHeaderText.empty().set('html', this.oBrightBoxParams.Header); this.oBrightBoxFooterText.empty().set('html', this.oBrightBoxParams.Footer); this.oBrightBoxBodyOuterDiv.addClass(this.options.BrightBox.Theme.CssClass.BodyLoading); this.oBrightBoxBodyInnerDiv.empty().setStyle('display', 'block'); // Determine Content Type this.szUpdateContent = ''; if( this.oBrightBoxParams.AjaxUrl.length ) // Content from Ajax Request { } else if( this.oBrightBoxParams.IFrameUrl.length ) // Content from IFrame { this.oBrightBoxBodyIFrame = new Element('iframe', { 'class': this.options.BrightBox.Theme.CssClass.BodyIFrame, 'src': this.oBrightBoxParams.IFrameUrl, 'frameborder': 0 }); // Fix Scrolling Content of Outer Div this.oBrightBoxBodyOuterDiv.setStyle('overflow', 'visible'); } else if( this.oBrightBoxParams.ImageGallery.length ) // Content from Image Gallery { } else { this.szUpdateContent = this.oBrightBoxParams.Content; } // Show Screen Overlay this.ShowOverlay(); // Reposition Bright Box this.bBrightBoxOpen = true; this.RepositionBrightBox(); }, // ------------------------------------------------------------------------------------------------------------- // Internal Routine: Hide Alert HideBrightBox: function() { if( !this.bValidControl ) return; // Reset Bright Box Container if( this.oBrightBoxBodyIFrame ) this.oBrightBoxBodyIFrame.dispose(); this.oBrightBoxContainer.setStyles({'top': -1000, 'left': -1000}); this.bBrightBoxOpen = false; // Hide Overlay this.HideOverlay(); }, // ------------------------------------------------------------------------------------------------------------- // Internal Routine: Repositions Alert Box to Center of Screen RepositionBrightBox: function() { if( !this.bValidControl || this.bInTransition || !this.bBrightBoxOpen ) return; (function() { if( !this.bValidControl || this.bInTransition || !this.bBrightBoxOpen ) return; // Get Height of Header/Footer var iHeaderHeight = this.oBrightBoxHeader.getSize().y, iFooterHeight = this.oBrightBoxFooter.getSize().y; // Calculate Bright Box Positions var iInitialTop = (this.oScreenSize.y / 2) - (this.options.BrightBox.InitialSize.y / 2) + window.getScrollTop(); var iInitialLeft = (this.oScreenSize.x / 2) - (this.options.BrightBox.InitialSize.x / 2) + window.getScrollLeft(); var iFinalTop = (this.oScreenSize.y / 2) - (this.oBrightBoxParams.Size.y / 2) + window.getScrollTop(); var iFinalLeft = (this.oScreenSize.x / 2) - (this.oBrightBoxParams.Size.x / 2) + window.getScrollLeft(); // Reposition Bright Box if( this.options.BrightBox.UseSpecialFX ) { this.bInTransition = true; this.oBrightBoxBodyOuterDiv.setStyles({'height': this.oBrightBoxParams.Size.y - iHeaderHeight - iFooterHeight}); this.oBrightBoxContainerFx.set( { 'top': iInitialTop, 'left': iInitialLeft, 'width': this.options.BrightBox.InitialSize.x, 'height': this.options.BrightBox.InitialSize.y }) .start( { 'top': iFinalTop, 'left': iFinalLeft, 'width': this.oBrightBoxParams.Size.x, 'height': this.oBrightBoxParams.Size.y }) .chain(function() { this.oBrightBoxBodyOuterDiv.removeClass(this.options.BrightBox.Theme.CssClass.BodyLoading); if( this.oBrightBoxParams.IFrameUrl.length ) // Content from IFrame { this.oBrightBoxBodyInnerDiv.setStyle('display', 'none'); this.oBrightBoxBodyOuterDiv.adopt( this.oBrightBoxBodyIFrame ); } else if( this.oBrightBoxParams.ImageGallery.length ) // Content from Image Gallery { } else { this.oBrightBoxBodyInnerDiv.set('html', this.szUpdateContent); } this.bInTransition = false; }.bind(this)); } else { this.oBrightBoxContainer.setStyles({'top': iFinalTop, 'left': iFinalLeft, 'width': this.oBrightBoxParams.Size.x, 'height': this.oBrightBoxParams.Size.y}); this.oBrightBoxBodyOuterDiv.setStyles({'height': this.oBrightBoxParams.Size.y}).removeClass(this.options.BrightBox.Theme.CssClass.BodyLoading); if( this.oBrightBoxParams.IFrameUrl.length ) // Content from IFrame { this.oBrightBoxBodyInnerDiv.setStyle('display', 'none'); this.oBrightBoxBodyOuterDiv.adopt( this.oBrightBoxBodyIFrame ); } else if( this.oBrightBoxParams.ImageGallery.length ) // Content from Image Gallery { } else { this.oBrightBoxBodyInnerDiv.set('html', this.szUpdateContent); } } }).delay(100, this); }, // ------------------------------------------------------------------------------------------------------------- // Insert Required Elements // ~~~~~~~~~~~~~~~~~~~~~~~~ // ------------------------------------------------------------------------------------------------------------- // Internal Routine: Insert CSS Display Styles InsertCSS: function() { if( $(this.ClassName + 'RequiredCSS') ) return; // CSS Already Inserted var bDebug = this.options.BrightBox.DebugMode; var crlf = bDebug ? '\n' : '', tab = bDebug ? ' ' : ''; var szCSS = '' + crlf + '.' + this.options.BrightBox.Theme.CssClass.Container + crlf + '{' + crlf + tab + 'position: absolute;' + crlf + tab + 'overflow: hidden;' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.Container + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.HeaderContainer + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.HeaderContainer + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.HeaderContainer + ' .' + this.options.BrightBox.Theme.CssClass.HeaderCTL + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.HeaderCTL + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.HeaderContainer + ' .' + this.options.BrightBox.Theme.CssClass.HeaderCTR + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.HeaderCTR + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.HeaderContainer + ' .' + this.options.BrightBox.Theme.CssClass.HeaderText + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.HeaderText + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.BodyContainer + crlf + '{' + crlf + tab + 'overflow: hidden;' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.BodyContainer + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.BodyContainer + ' .' + this.options.BrightBox.Theme.CssClass.BodyOuter + crlf + '{' + crlf + tab + 'overflow: auto;' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.BodyOuter + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.BodyContainer + ' .' + this.options.BrightBox.Theme.CssClass.BodyInner + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.BodyInner + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.BodyContainer + ' .' + this.options.BrightBox.Theme.CssClass.BodyIFrame + crlf + '{' + crlf + tab + 'width: 100%; height: 100%;' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.BodyIFrame + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.BodyContainer + ' .' + this.options.BrightBox.Theme.CssClass.BodyLoading + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.BodyLoading + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.FooterContainer + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.FooterContainer + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.FooterContainer + ' .' + this.options.BrightBox.Theme.CssClass.FooterCBL + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.FooterCBL + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.FooterContainer + ' .' + this.options.BrightBox.Theme.CssClass.FooterCBR + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.FooterCBR + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.FooterContainer + ' .' + this.options.BrightBox.Theme.CssClass.FooterText + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.FooterText + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.ButtonClose + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.ButtonClose + crlf + '}' + crlf + '.' + this.options.BrightBox.Theme.CssClass.ButtonCloseHover + crlf + '{' + crlf + tab + 'margin: 0; padding: 0;' + crlf + tab + this.options.BrightBox.Theme.Styles.ButtonCloseHover + crlf + '}'; try { // Create Style Element var oCSS = new Element('style', {'type': 'text/css', 'media': 'all', 'id': this.ClassName + 'RequiredCSS'}).inject( document.head, 'top' ); // Append CSS Text to Style Element if( Browser.Engine.trident ) document.styleSheets[document.styleSheets.length-1].cssText = szCSS; else oCSS.appendText( szCSS ); // Insert Succesful return true; } catch( szError ) { // Insert Failed return this.ErrorAlert(true, 'InsertCSS Failed:\n' + szError); } }, // ------------------------------------------------------------------------------------------------------------- // Standard Class Data // ~~~~~~~~~~~~~~~~~~~ // ------------------------------------------------------------------------------------------------------------- // Internal Routine: Debug-Mode Error Alerts ErrorAlert: function( bInvalidate, szErrorMsg ) { // Invalidate Control if( bInvalidate ) this.bValidControl = false; // Debug Alert Message if( this.options.BrightBox.DebugMode ) alert('[' + this.ClassName + ' ' + this.ClassVersion + '] -- DEV-ERROR --\n\n' + szErrorMsg); return false; }, // ------------------------------------------------------------------------------------------------------------- // Class Name, Version, Author ClassName: 'rsBrightBox', ClassVersion: '1.0', ClassAuthor: 'Robert J. Secord, B.Sc.' });