/** * 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 { try { el.style[camel] = value; } catch (e) { } } } 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; } } }; } ();