//MooTools More, . Copyright (c) 2006-2008 Valerio Proietti, , MIT Style License. /* Script: Fx.Slide.js Effect to slide an element in and out of view. License: MIT-style license. */ Fx.Slide = new Class({ Extends: Fx, options: { mode: 'vertical' }, initialize: function(element, options){ this.addEvent('complete', function(){ this.open = (this.wrapper['offset' + this.layout.capitalize()] != 0); if (this.open && Browser.Engine.webkit419) this.element.dispose().inject(this.wrapper); }, true); this.element = this.subject = $(element); this.parent(options); var wrapper = this.element.retrieve('wrapper'); this.wrapper = wrapper || new Element('div', { styles: $extend(this.element.getStyles('margin', 'position'), {'overflow': 'hidden'}) }).wraps(this.element); this.element.store('wrapper', this.wrapper).setStyle('margin', 0); this.now = []; this.open = true; }, vertical: function(){ this.margin = 'margin-top'; this.layout = 'height'; this.offset = this.element.offsetHeight; }, horizontal: function(){ this.margin = 'margin-left'; this.layout = 'width'; this.offset = this.element.offsetWidth; }, set: function(now){ this.element.setStyle(this.margin, now[0]); this.wrapper.setStyle(this.layout, now[1]); return this; }, compute: function(from, to, delta){ var now = []; var x = 2; x.times(function(i){ now[i] = Fx.compute(from[i], to[i], delta); }); return now; }, start: function(how, mode){ if (!this.check(arguments.callee, how, mode)) return this; this[mode || this.options.mode](); var margin = this.element.getStyle(this.margin).toInt(); var layout = this.wrapper.getStyle(this.layout).toInt(); var caseIn = [[margin, layout], [0, this.offset]]; var caseOut = [[margin, layout], [-this.offset, 0]]; var start; switch (how){ case 'in': start = caseIn; break; case 'out': start = caseOut; break; case 'toggle': start = (this.wrapper['offset' + this.layout.capitalize()] == 0) ? caseIn : caseOut; } return this.parent(start[0], start[1]); }, slideIn: function(mode){ return this.start('in', mode); }, slideOut: function(mode){ return this.start('out', mode); }, hide: function(mode){ this[mode || this.options.mode](); this.open = false; return this.set([-this.offset, 0]); }, show: function(mode){ this[mode || this.options.mode](); this.open = true; return this.set([0, this.offset]); }, toggle: function(mode){ return this.start('toggle', mode); } }); Element.Properties.slide = { set: function(options){ var slide = this.retrieve('slide'); if (slide) slide.cancel(); return this.eliminate('slide').store('slide:options', $extend({link: 'cancel'}, options)); }, get: function(options){ if (options || !this.retrieve('slide')){ if (options || !this.retrieve('slide:options')) this.set('slide', options); this.store('slide', new Fx.Slide(this, this.retrieve('slide:options'))); } return this.retrieve('slide'); } }; Element.implement({ slide: function(how, mode){ how = how || 'toggle'; var slide = this.get('slide'), toggle; switch (how){ case 'hide': slide.hide(mode); break; case 'show': slide.show(mode); break; case 'toggle': var flag = this.retrieve('slide:flag', slide.open); slide[(flag) ? 'slideOut' : 'slideIn'](mode); this.store('slide:flag', !flag); toggle = true; break; default: slide.start(how, mode); } if (!toggle) this.eliminate('slide:flag'); return this; } }); /* Script: Fx.Scroll.js Effect to smoothly scroll any element, including the window. License: MIT-style license. */ Fx.Scroll = new Class({ Extends: Fx, options: { offset: {'x': 0, 'y': 0}, wheelStops: true }, initialize: function(element, options){ this.element = this.subject = $(element); this.parent(options); var cancel = this.cancel.bind(this, false); if ($type(this.element) != 'element') this.element = $(this.element.getDocument().body); var stopper = this.element; if (this.options.wheelStops){ this.addEvent('start', function(){ stopper.addEvent('mousewheel', cancel); }, true); this.addEvent('complete', function(){ stopper.removeEvent('mousewheel', cancel); }, true); } }, set: function(){ var now = Array.flatten(arguments); this.element.scrollTo(now[0], now[1]); }, compute: function(from, to, delta){ var now = []; var x = 2; x.times(function(i){ now.push(Fx.compute(from[i], to[i], delta)); }); return now; }, start: function(x, y){ if (!this.check(arguments.callee, x, y)) return this; var offsetSize = this.element.getSize(), scrollSize = this.element.getScrollSize(); var scroll = this.element.getScroll(), values = {x: x, y: y}; for (var z in values){ var max = scrollSize[z] - offsetSize[z]; if ($chk(values[z])) values[z] = ($type(values[z]) == 'number') ? values[z].limit(0, max) : max; else values[z] = scroll[z]; values[z] += this.options.offset[z]; } return this.parent([scroll.x, scroll.y], [values.x, values.y]); }, toTop: function(){ return this.start(false, 0); }, toLeft: function(){ return this.start(0, false); }, toRight: function(){ return this.start('right', false); }, toBottom: function(){ return this.start(false, 'bottom'); }, toElement: function(el){ var position = $(el).getPosition(this.element); return this.start(position.x, position.y); } }); /* Script: Assets.js Provides methods to dynamically load JavaScript, CSS, and Image files into the document. License: MIT-style license. */ var Asset = new Hash({ javascript: function(source, properties){ properties = $extend({ onload: $empty, document: document, check: $lambda(true) }, properties); var script = new Element('script', {'src': source, 'type': 'text/javascript'}); var load = properties.onload.bind(script), check = properties.check, doc = properties.document; delete properties.onload; delete properties.check; delete properties.document; script.addEvents({ load: load, readystatechange: function(){ if (['loaded', 'complete'].contains(this.readyState)) load(); } }).setProperties(properties); if (Browser.Engine.webkit419) var checker = (function(){ if (!$try(check)) return; $clear(checker); load(); }).periodical(50); return script.inject(doc.head); }, css: function(source, properties){ return new Element('link', $merge({ 'rel': 'stylesheet', 'media': 'screen', 'type': 'text/css', 'href': source }, properties)).inject(document.head); }, image: function(source, properties){ properties = $merge({ 'onload': $empty, 'onabort': $empty, 'onerror': $empty }, properties); var image = new Image(); var element = $(image) || new Element('img'); ['load', 'abort', 'error'].each(function(name){ var type = 'on' + name; var event = properties[type]; delete properties[type]; image[type] = function(){ if (!image) return; if (!element.parentNode){ element.width = image.width; element.height = image.height; } image = image.onload = image.onabort = image.onerror = null; event.delay(1, element, element); element.fireEvent(name, element, 1); }; }); image.src = element.src = source; if (image && image.complete) image.onload.delay(1); return element.setProperties(properties); }, images: function(sources, options){ options = $merge({ onComplete: $empty, onProgress: $empty }, options); if (!sources.push) sources = [sources]; var images = []; var counter = 0; sources.each(function(source){ var img = new Asset.image(source, { 'onload': function(){ options.onProgress.call(this, counter, sources.indexOf(source)); counter++; if (counter == sources.length) options.onComplete(); } }); images.push(img); }); return new Elements(images); } }); /* Script: Tips.js Class for creating nice tips that follow the mouse cursor when hovering an element. License: MIT-style license. */ var Tips = new Class({ Implements: [Events, Options], options: { onShow: function(tip){ tip.setStyle('visibility', 'visible'); }, onHide: function(tip){ tip.setStyle('visibility', 'hidden'); }, showDelay: 100, hideDelay: 100, className: null, offsets: {x: 16, y: 16}, fixed: false }, initialize: function(){ var params = Array.link(arguments, {options: Object.type, elements: $defined}); this.setOptions(params.options || null); this.tip = new Element('div').inject(document.body); if (this.options.className) this.tip.addClass(this.options.className); var top = new Element('div', {'class': 'tip-top'}).inject(this.tip); this.container = new Element('div', {'class': 'tip'}).inject(this.tip); var bottom = new Element('div', {'class': 'tip-bottom'}).inject(this.tip); this.tip.setStyles({position: 'absolute', top: 0, left: 0, visibility: 'hidden'}); if (params.elements) this.attach(params.elements); }, attach: function(elements){ $$(elements).each(function(element){ var title = element.retrieve('tip:title', element.get('title')); var text = element.retrieve('tip:text', element.get('rel') || element.get('href')); var enter = element.retrieve('tip:enter', this.elementEnter.bindWithEvent(this, element)); var leave = element.retrieve('tip:leave', this.elementLeave.bindWithEvent(this, element)); element.addEvents({mouseenter: enter, mouseleave: leave}); if (!this.options.fixed){ var move = element.retrieve('tip:move', this.elementMove.bindWithEvent(this, element)); element.addEvent('mousemove', move); } element.store('tip:native', element.get('title')); element.erase('title'); }, this); return this; }, detach: function(elements){ $$(elements).each(function(element){ element.removeEvent('mouseenter', element.retrieve('tip:enter') || $empty); element.removeEvent('mouseleave', element.retrieve('tip:leave') || $empty); element.removeEvent('mousemove', element.retrieve('tip:move') || $empty); element.eliminate('tip:enter').eliminate('tip:leave').eliminate('tip:move'); var original = element.retrieve('tip:native'); if (original) element.set('title', original); }); return this; }, elementEnter: function(event, element){ $A(this.container.childNodes).each(Element.dispose); var title = element.retrieve('tip:title'); if (title){ this.titleElement = new Element('div', {'class': 'tip-title'}).inject(this.container); this.fill(this.titleElement, title); } var text = element.retrieve('tip:text'); if (text){ this.textElement = new Element('div', {'class': 'tip-text'}).inject(this.container); this.fill(this.textElement, text); } this.timer = $clear(this.timer); this.timer = this.show.delay(this.options.showDelay, this); this.position((!this.options.fixed) ? event : {page: element.getPosition()}); }, elementLeave: function(event){ $clear(this.timer); this.timer = this.hide.delay(this.options.hideDelay, this); }, elementMove: function(event){ this.position(event); }, position: function(event){ var size = window.getSize(), scroll = window.getScroll(); var tip = {x: this.tip.offsetWidth, y: this.tip.offsetHeight}; var props = {x: 'left', y: 'top'}; for (var z in props){ var pos = event.page[z] + this.options.offsets[z]; if ((pos + tip[z] - scroll[z]) > size[z]) pos = event.page[z] - this.options.offsets[z] - tip[z]; this.tip.setStyle(props[z], pos); } }, fill: function(element, contents){ (typeof contents == 'string') ? element.set('html', contents) : element.adopt(contents); }, show: function(){ this.fireEvent('show', this.tip); }, hide: function(){ this.fireEvent('hide', this.tip); } }); /* Script: SmoothScroll.js Class for creating a smooth scrolling effect to all internal links on the page. License: MIT-style license. */ var SmoothScroll = new Class({ Extends: Fx.Scroll, initialize: function(options, context){ context = context || document; var doc = context.getDocument(), win = context.getWindow(); this.parent(doc, options); this.links = (this.options.links) ? $$(this.options.links) : $$(doc.links); var location = win.location.href.match(/^[^#]*/)[0] + '#'; this.links.each(function(link){ if (link.href.indexOf(location) != 0) return; var anchor = link.href.substr(location.length); if (anchor && $(anchor)) this.useLink(link, anchor); }, this); if (!Browser.Engine.webkit419) this.addEvent('complete', function(){ win.location.hash = this.anchor; }, true); }, useLink: function(link, anchor){ link.addEvent('click', function(event){ this.anchor = anchor; this.toElement(anchor); event.stop(); }.bind(this)); } });