/** * A base library for Shadowbox used as a standalone (without another base * library/adapter combination). * * This file is part of Shadowbox. * * Shadowbox is an online media viewer application that supports all of the * web's most popular media publishing formats. Shadowbox is written entirely * in JavaScript and CSS and is highly customizable. Using Shadowbox, website * authors can showcase a wide assortment of media in all major browsers without * navigating users away from the linking page. * * Shadowbox is released under version 3.0 of the Creative Commons Attribution- * Noncommercial-Share Alike license. This means that it is absolutely free * for personal, noncommercial use provided that you 1) make attribution to the * author and 2) release any derivative work under the same or a similar * license. * * If you wish to use Shadowbox for commercial purposes, licensing information * can be found at http://mjijackson.com/shadowbox/. * * @author Michael J. I. Jackson * @copyright 2007-2008 Michael J. I. Jackson * @license http://creativecommons.org/licenses/by-nc-sa/3.0/ * @version SVN: $Id: shadowbox-base.js 103 2008-06-27 06:19:21Z mjijackson $ */ // create the Shadowbox object first var Shadowbox = {}; Shadowbox.lib = function(){ // local style camelizing for speed var styleCache = {}; var camelRe = /(-[a-z])/gi; var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); }; var toCamel = function(style){ var camel; if(!(camel = styleCache[style])){ camel = styleCache[style] = style.replace(camelRe, camelFn); } return camel; }; var view = document.defaultView; var alphaRe = /alpha\([^\)]*\)/gi; /** * Sets the opacity of the given element to the specified level. * * @param {HTMLElement} el The element * @param {Number} opacity The opacity to use * @return void * @private * @static */ var setOpacity = function(el, opacity){ var s = el.style; if(window.ActiveXObject){ // IE s.zoom = 1; // give "layout" s.filter = (s.filter || '').replace(alphaRe, '') + (opacity == 1 ? '' : ' alpha(opacity=' + (opacity * 100) + ')'); }else{ s.opacity = opacity; } }; return { adapter: 'standalone', /** * Gets the value of the style on the given element. This function * adapted from Ext.Element.getStyle(). * * @param {HTMLElement} el The DOM element * @param {String} style The name of the style (e.g. margin-top) * @return {mixed} The value of the given style * @public * @static */ getStyle: function(){ return view && view.getComputedStyle ? function(el, style){ var v, cs, camel; if(style == 'float') style = 'cssFloat'; if(v = el.style[style]) return v; if(cs = view.getComputedStyle(el, '')){ return cs[toCamel(style)]; } return null; } : function(el, style){ var v, cs, camel; if(style == 'opacity'){ if(typeof el.style.filter == 'string'){ var m = el.style.filter.match(/alpha\(opacity=(.+)\)/i); if(m){ var fv = parseFloat(m[1]); if(!isNaN(fv)) return (fv ? fv / 100 : 0); } } return 1; }else if(style == 'float'){ style = 'styleFloat'; } var camel = toCamel(style); if(v = el.style[camel]) return v; if(cs = el.currentStyle) return cs[camel]; return null; }; }(), /** * Sets the style on the given element to the given value. May be an * object to specify multiple values. This function adapted from * Ext.Element.setStyle(). * * @param {HTMLElement} el The DOM element * @param {String/Object} style The name of the style to set if a * string, or an object of name => * value pairs * @param {String} value The value to set the given style to * @return void * @public * @static */ setStyle: function(el, style, value){ if(typeof style == 'string'){ var camel = toCamel(style); if(camel == 'opacity'){ setOpacity(el, value); }else{ el.style[camel] = value; } }else{ for(var s in style){ this.setStyle(el, s, style[s]); } } }, /** * Gets a reference to the given element. * * @param {String/HTMLElement} el The element to fetch * @return {HTMLElement} A reference to the element * @public * @static */ get: function(el){ return typeof el == 'string' ? document.getElementById(el) : el; }, /** * Removes an element from the DOM. * * @param {HTMLElement} el The element to remove * @return void * @public * @static */ remove: function(el){ el.parentNode.removeChild(el); }, /** * Gets the target of the given event. The event object passed will be * the same object that is passed to listeners registered with * addEvent(). * * @param {mixed} e The event object * @return {HTMLElement} The event's target element * @public * @static */ getTarget: function(e){ var t = e.target ? e.target : e.srcElement; return t.nodeType == 3 ? t.parentNode : t; }, /** * Gets the page X/Y coordinates of the mouse event in an [x, y] array. * The page coordinates should be relative to the document, and not the * viewport. The event object provided here will be the same object that * is passed to listeners registered with addEvent(). * * @param {mixed} e The event object * @return {Array} The page X/Y coordinates * @public * @static */ getPageXY: function(e){ var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return [x, y]; }, /** * Prevents the event's default behavior. The event object here will * be the same object that is passed to listeners registered with * addEvent(). * * @param {mixed} e The event object * @return void * @public * @static */ preventDefault: function(e){ if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } }, /** * Gets the key code of the given event object (keydown). The event * object here will be the same object that is passed to listeners * registered with addEvent(). * * @param {mixed} e The event object * @return {Number} The key code of the event * @public * @static */ keyCode: function(e){ return e.which ? e.which : e.keyCode; }, /** * Adds an event listener to the given element. It is expected that this * function will be passed the event as its first argument. * * @param {HTMLElement} el The DOM element to listen to * @param {String} name The name of the event to register * (i.e. 'click', 'scroll', etc.) * @param {Function} handler The event handler function * @return void * @public * @static */ addEvent: function(el, name, handler){ if(el.addEventListener){ el.addEventListener(name, handler, false); }else if(el.attachEvent){ el.attachEvent('on' + name, handler); } }, /** * Removes an event listener from the given element. * * @param {HTMLElement} el The DOM element to stop listening to * @param {String} name The name of the event to stop * listening for (i.e. 'click') * @param {Function} handler The event handler function * @return void * @public * @static */ removeEvent: function(el, name, handler){ if(el.removeEventListener){ el.removeEventListener(name, handler, false); }else if(el.detachEvent){ el.detachEvent('on' + name, handler); } }, /** * Appends an HTML fragment to the given element. * * @param {HTMLElement} el The element to append to * @param {String} html The HTML fragment to use * @return void * @public * @static */ append: function(el, html){ if(el.insertAdjacentHTML){ el.insertAdjacentHTML('BeforeEnd', html); }else if(el.lastChild){ var range = el.ownerDocument.createRange(); range.setStartAfter(el.lastChild); var frag = range.createContextualFragment(html); el.appendChild(frag); }else{ el.innerHTML = html; } } }; }();