// MooTools: the javascript framework. // Load this file's selection again by visiting: http://mootools.net/more/7e9cfe21bf09bec4128667fed05296a8 // Or build this file again with packager using: packager build More/Mask /* --- script: More.js name: More description: MooTools More license: MIT-style license authors: - Guillermo Rauch - Thomas Aylott - Scott Kyle - Arian Stolwijk - Tim Wienk - Christoph Pojer - Aaron Newton - Jacob Thornton requires: - Core/MooTools provides: [MooTools.More] ... */ MooTools.More = { 'version': '1.3.2.1', 'build': 'e586bcd2496e9b22acfde32e12f84d49ce09e59d' }; /* --- script: Class.Binds.js name: Class.Binds description: Automagically binds specified methods in a class to the instance of the class. license: MIT-style license authors: - Aaron Newton requires: - Core/Class - /MooTools.More provides: [Class.Binds] ... */ Class.Mutators.Binds = function(binds){ if (!this.prototype.initialize) this.implement('initialize', function(){}); return Array.from(binds).concat(this.prototype.Binds || []); }; Class.Mutators.initialize = function(initialize){ return function(){ Array.from(this.Binds).each(function(name){ var original = this[name]; if (original) this[name] = original.bind(this); }, this); return initialize.apply(this, arguments); }; }; /* --- script: Element.Measure.js name: Element.Measure description: Extends the Element native object to include methods useful in measuring dimensions. credits: "Element.measure / .expose methods by Daniel Steigerwald License: MIT-style license. Copyright: Copyright (c) 2008 Daniel Steigerwald, daniel.steigerwald.cz" license: MIT-style license authors: - Aaron Newton requires: - Core/Element.Style - Core/Element.Dimensions - /MooTools.More provides: [Element.Measure] ... */ (function(){ var getStylesList = function(styles, planes){ var list = []; Object.each(planes, function(directions){ Object.each(directions, function(edge){ styles.each(function(style){ list.push(style + '-' + edge + (style == 'border' ? '-width' : '')); }); }); }); return list; }; var calculateEdgeSize = function(edge, styles){ var total = 0; Object.each(styles, function(value, style){ if (style.test(edge)) total = total + value.toInt(); }); return total; }; var isVisible = function(el){ return !!(!el || el.offsetHeight || el.offsetWidth); }; Element.implement({ measure: function(fn){ if (isVisible(this)) return fn.call(this); var parent = this.getParent(), toMeasure = []; while (!isVisible(parent) && parent != document.body){ toMeasure.push(parent.expose()); parent = parent.getParent(); } var restore = this.expose(), result = fn.call(this); restore(); toMeasure.each(function(restore){ restore(); }); return result; }, expose: function(){ if (this.getStyle('display') != 'none') return function(){}; var before = this.style.cssText; this.setStyles({ display: 'block', position: 'absolute', visibility: 'hidden' }); return function(){ this.style.cssText = before; }.bind(this); }, getDimensions: function(options){ options = Object.merge({computeSize: false}, options); var dim = {x: 0, y: 0}; var getSize = function(el, options){ return (options.computeSize) ? el.getComputedSize(options) : el.getSize(); }; var parent = this.getParent('body'); if (parent && this.getStyle('display') == 'none'){ dim = this.measure(function(){ return getSize(this, options); }); } else if (parent){ try { //safari sometimes crashes here, so catch it dim = getSize(this, options); }catch(e){} } return Object.append(dim, (dim.x || dim.x === 0) ? { width: dim.x, height: dim.y } : { x: dim.width, y: dim.height } ); }, getComputedSize: function(options){ //<1.2compat> //legacy support for my stupid spelling error if (options && options.plains) options.planes = options.plains; // options = Object.merge({ styles: ['padding','border'], planes: { height: ['top','bottom'], width: ['left','right'] }, mode: 'both' }, options); var styles = {}, size = {width: 0, height: 0}, dimensions; if (options.mode == 'vertical'){ delete size.width; delete options.planes.width; } else if (options.mode == 'horizontal'){ delete size.height; delete options.planes.height; } getStylesList(options.styles, options.planes).each(function(style){ styles[style] = this.getStyle(style).toInt(); }, this); Object.each(options.planes, function(edges, plane){ var capitalized = plane.capitalize(), style = this.getStyle(plane); if (style == 'auto' && !dimensions) dimensions = this.getDimensions(); style = styles[plane] = (style == 'auto') ? dimensions[plane] : style.toInt(); size['total' + capitalized] = style; edges.each(function(edge){ var edgesize = calculateEdgeSize(edge, styles); size['computed' + edge.capitalize()] = edgesize; size['total' + capitalized] += edgesize; }); }, this); return Object.append(size, styles); } }); })(); /* --- script: Element.Position.js name: Element.Position description: Extends the Element native object to include methods useful positioning elements relative to others. license: MIT-style license authors: - Aaron Newton - Jacob Thornton requires: - Core/Options - Core/Element.Dimensions - Element.Measure provides: [Element.Position] ... */ (function(original){ var local = Element.Position = { options: {/* edge: false, returnPos: false, minimum: {x: 0, y: 0}, maximum: {x: 0, y: 0}, relFixedPosition: false, ignoreMargins: false, ignoreScroll: false, allowNegative: false,*/ relativeTo: document.body, position: { x: 'center', //left, center, right y: 'center' //top, center, bottom }, offset: {x: 0, y: 0} }, getOptions: function(element, options){ options = Object.merge({}, local.options, options); local.setPositionOption(options); local.setEdgeOption(options); local.setOffsetOption(element, options); local.setDimensionsOption(element, options); return options; }, setPositionOption: function(options){ options.position = local.getCoordinateFromValue(options.position); }, setEdgeOption: function(options){ var edgeOption = local.getCoordinateFromValue(options.edge); options.edge = edgeOption ? edgeOption : (options.position.x == 'center' && options.position.y == 'center') ? {x: 'center', y: 'center'} : {x: 'left', y: 'top'}; }, setOffsetOption: function(element, options){ var parentOffset = {x: 0, y: 0}, offsetParent = element.measure(function(){ return document.id(this.getOffsetParent()); }), parentScroll = offsetParent.getScroll(); if (!offsetParent || offsetParent == element.getDocument().body) return; parentOffset = offsetParent.measure(function(){ var position = this.getPosition(); if (this.getStyle('position') == 'fixed'){ var scroll = window.getScroll(); position.x += scroll.x; position.y += scroll.y; } return position; }); options.offset = { parentPositioned: offsetParent != document.id(options.relativeTo), x: options.offset.x - parentOffset.x + parentScroll.x, y: options.offset.y - parentOffset.y + parentScroll.y }; }, setDimensionsOption: function(element, options){ options.dimensions = element.getDimensions({ computeSize: true, styles: ['padding', 'border', 'margin'] }); }, getPosition: function(element, options){ var position = {}; options = local.getOptions(element, options); var relativeTo = document.id(options.relativeTo) || document.body; local.setPositionCoordinates(options, position, relativeTo); if (options.edge) local.toEdge(position, options); var offset = options.offset; position.left = ((position.x >= 0 || offset.parentPositioned || options.allowNegative) ? position.x : 0).toInt(); position.top = ((position.y >= 0 || offset.parentPositioned || options.allowNegative) ? position.y : 0).toInt(); local.toMinMax(position, options); if (options.relFixedPosition || relativeTo.getStyle('position') == 'fixed') local.toRelFixedPosition(relativeTo, position); if (options.ignoreScroll) local.toIgnoreScroll(relativeTo, position); if (options.ignoreMargins) local.toIgnoreMargins(position, options); position.left = Math.ceil(position.left); position.top = Math.ceil(position.top); delete position.x; delete position.y; return position; }, setPositionCoordinates: function(options, position, relativeTo){ var offsetY = options.offset.y, offsetX = options.offset.x, calc = (relativeTo == document.body) ? window.getScroll() : relativeTo.getPosition(), top = calc.y, left = calc.x, winSize = window.getSize(); switch(options.position.x){ case 'left': position.x = left + offsetX; break; case 'right': position.x = left + offsetX + relativeTo.offsetWidth; break; default: position.x = left + ((relativeTo == document.body ? winSize.x : relativeTo.offsetWidth) / 2) + offsetX; break; } switch(options.position.y){ case 'top': position.y = top + offsetY; break; case 'bottom': position.y = top + offsetY + relativeTo.offsetHeight; break; default: position.y = top + ((relativeTo == document.body ? winSize.y : relativeTo.offsetHeight) / 2) + offsetY; break; } }, toMinMax: function(position, options){ var xy = {left: 'x', top: 'y'}, value; ['minimum', 'maximum'].each(function(minmax){ ['left', 'top'].each(function(lr){ value = options[minmax] ? options[minmax][xy[lr]] : null; if (value != null && ((minmax == 'minimum') ? position[lr] < value : position[lr] > value)) position[lr] = value; }); }); }, toRelFixedPosition: function(relativeTo, position){ var winScroll = window.getScroll(); position.top += winScroll.y; position.left += winScroll.x; }, toIgnoreScroll: function(relativeTo, position){ var relScroll = relativeTo.getScroll(); position.top -= relScroll.y; position.left -= relScroll.x; }, toIgnoreMargins: function(position, options){ position.left += options.edge.x == 'right' ? options.dimensions['margin-right'] : (options.edge.x != 'center' ? -options.dimensions['margin-left'] : -options.dimensions['margin-left'] + ((options.dimensions['margin-right'] + options.dimensions['margin-left']) / 2)); position.top += options.edge.y == 'bottom' ? options.dimensions['margin-bottom'] : (options.edge.y != 'center' ? -options.dimensions['margin-top'] : -options.dimensions['margin-top'] + ((options.dimensions['margin-bottom'] + options.dimensions['margin-top']) / 2)); }, toEdge: function(position, options){ var edgeOffset = {}, dimensions = options.dimensions, edge = options.edge; switch(edge.x){ case 'left': edgeOffset.x = 0; break; case 'right': edgeOffset.x = -dimensions.x - dimensions.computedRight - dimensions.computedLeft; break; // center default: edgeOffset.x = -(Math.round(dimensions.totalWidth / 2)); break; } switch(edge.y){ case 'top': edgeOffset.y = 0; break; case 'bottom': edgeOffset.y = -dimensions.y - dimensions.computedTop - dimensions.computedBottom; break; // center default: edgeOffset.y = -(Math.round(dimensions.totalHeight / 2)); break; } position.x += edgeOffset.x; position.y += edgeOffset.y; }, getCoordinateFromValue: function(option){ if (typeOf(option) != 'string') return option; option = option.toLowerCase(); return { x: option.test('left') ? 'left' : (option.test('right') ? 'right' : 'center'), y: option.test(/upper|top/) ? 'top' : (option.test('bottom') ? 'bottom' : 'center') }; } }; Element.implement({ position: function(options){ if (options && (options.x != null || options.y != null)) { return (original ? original.apply(this, arguments) : this); } var position = this.setStyle('position', 'absolute').calculatePosition(options); return (options && options.returnPos) ? position : this.setStyles(position); }, calculatePosition: function(options){ return local.getPosition(this, options); } }); })(Element.prototype.position); /* --- script: Class.Occlude.js name: Class.Occlude description: Prevents a class from being applied to a DOM element twice. license: MIT-style license. authors: - Aaron Newton requires: - Core/Class - Core/Element - /MooTools.More provides: [Class.Occlude] ... */ Class.Occlude = new Class({ occlude: function(property, element){ element = document.id(element || this.element); var instance = element.retrieve(property || this.property); if (instance && !this.occluded) return (this.occluded = instance); this.occluded = false; element.store(property || this.property, this); return this.occluded; } }); /* --- script: IframeShim.js name: IframeShim description: Defines IframeShim, a class for obscuring select lists and flash objects in IE. license: MIT-style license authors: - Aaron Newton requires: - Core/Element.Event - Core/Element.Style - Core/Options - Core/Events - /Element.Position - /Class.Occlude provides: [IframeShim] ... */ var IframeShim = new Class({ Implements: [Options, Events, Class.Occlude], options: { className: 'iframeShim', src: 'javascript:false;document.write("");', display: false, zIndex: null, margin: 0, offset: {x: 0, y: 0}, browsers: (Browser.ie6 || (Browser.firefox && Browser.version < 3 && Browser.Platform.mac)) }, property: 'IframeShim', initialize: function(element, options){ this.element = document.id(element); if (this.occlude()) return this.occluded; this.setOptions(options); this.makeShim(); return this; }, makeShim: function(){ if (this.options.browsers){ var zIndex = this.element.getStyle('zIndex').toInt(); if (!zIndex){ zIndex = 1; var pos = this.element.getStyle('position'); if (pos == 'static' || !pos) this.element.setStyle('position', 'relative'); this.element.setStyle('zIndex', zIndex); } zIndex = ((this.options.zIndex != null || this.options.zIndex === 0) && zIndex > this.options.zIndex) ? this.options.zIndex : zIndex - 1; if (zIndex < 0) zIndex = 1; this.shim = new Element('iframe', { src: this.options.src, scrolling: 'no', frameborder: 0, styles: { zIndex: zIndex, position: 'absolute', border: 'none', filter: 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)' }, 'class': this.options.className }).store('IframeShim', this); var inject = (function(){ this.shim.inject(this.element, 'after'); this[this.options.display ? 'show' : 'hide'](); this.fireEvent('inject'); }).bind(this); if (!IframeShim.ready) window.addEvent('load', inject); else inject(); } else { this.position = this.hide = this.show = this.dispose = Function.from(this); } }, position: function(){ if (!IframeShim.ready || !this.shim) return this; var size = this.element.measure(function(){ return this.getSize(); }); if (this.options.margin != undefined){ size.x = size.x - (this.options.margin * 2); size.y = size.y - (this.options.margin * 2); this.options.offset.x += this.options.margin; this.options.offset.y += this.options.margin; } this.shim.set({width: size.x, height: size.y}).position({ relativeTo: this.element, offset: this.options.offset }); return this; }, hide: function(){ if (this.shim) this.shim.setStyle('display', 'none'); return this; }, show: function(){ if (this.shim) this.shim.setStyle('display', 'block'); return this.position(); }, dispose: function(){ if (this.shim) this.shim.dispose(); return this; }, destroy: function(){ if (this.shim) this.shim.destroy(); return this; } }); window.addEvent('load', function(){ IframeShim.ready = true; }); /* --- script: Mask.js name: Mask description: Creates a mask element to cover another. license: MIT-style license authors: - Aaron Newton requires: - Core/Options - Core/Events - Core/Element.Event - /Class.Binds - /Element.Position - /IframeShim provides: [Mask] ... */ var Mask = new Class({ Implements: [Options, Events], Binds: ['position'], options: {/* onShow: function(){}, onHide: function(){}, onDestroy: function(){}, onClick: function(event){}, inject: { where: 'after', target: null, }, hideOnClick: false, id: null, destroyOnHide: false,*/ style: {}, 'class': 'mask', maskMargins: false, useIframeShim: true, iframeShimOptions: {} }, initialize: function(target, options){ this.target = document.id(target) || document.id(document.body); this.target.store('mask', this); this.setOptions(options); this.render(); this.inject(); }, render: function(){ this.element = new Element('div', { 'class': this.options['class'], id: this.options.id || 'mask-' + String.uniqueID(), styles: Object.merge({}, this.options.style, { display: 'none' }), events: { click: function(event){ this.fireEvent('click', event); if (this.options.hideOnClick) this.hide(); }.bind(this) } }); this.hidden = true; }, toElement: function(){ return this.element; }, inject: function(target, where){ where = where || (this.options.inject ? this.options.inject.where : '') || this.target == document.body ? 'inside' : 'after'; target = target || (this.options.inject && this.options.inject.target) || this.target; this.element.inject(target, where); if (this.options.useIframeShim){ this.shim = new IframeShim(this.element, this.options.iframeShimOptions); this.addEvents({ show: this.shim.show.bind(this.shim), hide: this.shim.hide.bind(this.shim), destroy: this.shim.destroy.bind(this.shim) }); } }, position: function(){ this.resize(this.options.width, this.options.height); this.element.position({ relativeTo: this.target, position: 'topLeft', ignoreMargins: !this.options.maskMargins, ignoreScroll: this.target == document.body }); return this; }, resize: function(x, y){ var opt = { styles: ['padding', 'border'] }; if (this.options.maskMargins) opt.styles.push('margin'); var dim = this.target.getComputedSize(opt); if (this.target == document.body){ this.element.setStyles({width: 0, height: 0}); var win = window.getScrollSize(); if (dim.totalHeight < win.y) dim.totalHeight = win.y; if (dim.totalWidth < win.x) dim.totalWidth = win.x; } this.element.setStyles({ width: Array.pick([x, dim.totalWidth, dim.x]), height: Array.pick([y, dim.totalHeight, dim.y]) }); return this; }, show: function(){ if (!this.hidden) return this; window.addEvent('resize', this.position); this.position(); this.showMask.apply(this, arguments); return this; }, showMask: function(){ this.element.setStyle('display', 'block'); this.hidden = false; this.fireEvent('show'); }, hide: function(){ if (this.hidden) return this; window.removeEvent('resize', this.position); this.hideMask.apply(this, arguments); if (this.options.destroyOnHide) return this.destroy(); return this; }, hideMask: function(){ this.element.setStyle('display', 'none'); this.hidden = true; this.fireEvent('hide'); }, toggle: function(){ this[this.hidden ? 'show' : 'hide'](); }, destroy: function(){ this.hide(); this.element.destroy(); this.fireEvent('destroy'); this.target.eliminate('mask'); } }); Element.Properties.mask = { set: function(options){ var mask = this.retrieve('mask'); if (mask) mask.destroy(); return this.eliminate('mask').store('mask:options', options); }, get: function(){ var mask = this.retrieve('mask'); if (!mask){ mask = new Mask(this, this.retrieve('mask:options')); this.store('mask', mask); } return mask; } }; Element.implement({ mask: function(options){ if (options) this.set('mask', options); this.get('mask').show(); return this; }, unmask: function(){ this.get('mask').hide(); return this; } });