// MooTools: the javascript framework.
|
// Load this file's selection again by visiting: http://mootools.net/more/f0c595201cc3451c3f7e949f2b8b84b6
|
// Or build this file again with packager using: packager build More/Element.Event.Pseudos More/Element.Position More/Fx.Elements More/Fx.Move More/Fx.Reveal More/Fx.Slide More/Drag More/Drag.Move More/Slider More/Tips
|
/*
|
---
|
|
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'
|
};
|
|
|
/*
|
---
|
|
name: Events.Pseudos
|
|
description: Adds the functionality to add pseudo events
|
|
license: MIT-style license
|
|
authors:
|
- Arian Stolwijk
|
|
requires: [Core/Class.Extras, Core/Slick.Parser, More/MooTools.More]
|
|
provides: [Events.Pseudos]
|
|
...
|
*/
|
|
Events.Pseudos = function(pseudos, addEvent, removeEvent){
|
|
var storeKey = 'monitorEvents:';
|
|
var storageOf = function(object){
|
return {
|
store: object.store ? function(key, value){
|
object.store(storeKey + key, value);
|
} : function(key, value){
|
(object.$monitorEvents || (object.$monitorEvents = {}))[key] = value;
|
},
|
retrieve: object.retrieve ? function(key, dflt){
|
return object.retrieve(storeKey + key, dflt);
|
} : function(key, dflt){
|
if (!object.$monitorEvents) return dflt;
|
return object.$monitorEvents[key] || dflt;
|
}
|
};
|
};
|
|
var splitType = function(type){
|
if (type.indexOf(':') == -1 || !pseudos) return null;
|
|
var parsed = Slick.parse(type).expressions[0][0],
|
parsedPseudos = parsed.pseudos,
|
l = parsedPseudos.length,
|
splits = [];
|
|
while (l--) if (pseudos[parsedPseudos[l].key]){
|
splits.push({
|
event: parsed.tag,
|
value: parsedPseudos[l].value,
|
pseudo: parsedPseudos[l].key,
|
original: type
|
});
|
}
|
|
return splits.length ? splits : null;
|
};
|
|
var mergePseudoOptions = function(split){
|
return Object.merge.apply(this, split.map(function(item){
|
return pseudos[item.pseudo].options || {};
|
}));
|
};
|
|
return {
|
|
addEvent: function(type, fn, internal){
|
var split = splitType(type);
|
if (!split) return addEvent.call(this, type, fn, internal);
|
|
var storage = storageOf(this),
|
events = storage.retrieve(type, []),
|
eventType = split[0].event,
|
options = mergePseudoOptions(split),
|
stack = fn,
|
eventOptions = options[eventType] || {},
|
args = Array.slice(arguments, 2),
|
self = this,
|
monitor;
|
|
if (eventOptions.args) args.append(Array.from(eventOptions.args));
|
if (eventOptions.base) eventType = eventOptions.base;
|
if (eventOptions.onAdd) eventOptions.onAdd(this);
|
|
split.each(function(item){
|
var stackFn = stack;
|
stack = function(){
|
(eventOptions.listener || pseudos[item.pseudo].listener).call(self, item, stackFn, arguments, monitor, options);
|
};
|
});
|
monitor = stack.bind(this);
|
|
events.include({event: fn, monitor: monitor});
|
storage.store(type, events);
|
|
addEvent.apply(this, [type, fn].concat(args));
|
return addEvent.apply(this, [eventType, monitor].concat(args));
|
},
|
|
removeEvent: function(type, fn){
|
var split = splitType(type);
|
if (!split) return removeEvent.call(this, type, fn);
|
|
var storage = storageOf(this),
|
events = storage.retrieve(type);
|
if (!events) return this;
|
|
var eventType = split[0].event,
|
options = mergePseudoOptions(split),
|
eventOptions = options[eventType] || {},
|
args = Array.slice(arguments, 2);
|
|
if (eventOptions.args) args.append(Array.from(eventOptions.args));
|
if (eventOptions.base) eventType = eventOptions.base;
|
if (eventOptions.onRemove) eventOptions.onRemove(this);
|
|
removeEvent.apply(this, [type, fn].concat(args));
|
events.each(function(monitor, i){
|
if (!fn || monitor.event == fn) removeEvent.apply(this, [eventType, monitor.monitor].concat(args));
|
delete events[i];
|
}, this);
|
|
storage.store(type, events);
|
return this;
|
}
|
|
};
|
|
};
|
|
(function(){
|
|
var pseudos = {
|
|
once: {
|
listener: function(split, fn, args, monitor){
|
fn.apply(this, args);
|
this.removeEvent(split.event, monitor)
|
.removeEvent(split.original, fn);
|
}
|
},
|
|
throttle: {
|
listener: function(split, fn, args){
|
if (!fn._throttled){
|
fn.apply(this, args);
|
fn._throttled = setTimeout(function(){
|
fn._throttled = false;
|
}, split.value || 250);
|
}
|
}
|
},
|
|
pause: {
|
listener: function(split, fn, args){
|
clearTimeout(fn._pause);
|
fn._pause = fn.delay(split.value || 250, this, args);
|
}
|
}
|
|
};
|
|
Events.definePseudo = function(key, listener){
|
pseudos[key] = Type.isFunction(listener) ? {listener: listener} : listener;
|
return this;
|
};
|
|
Events.lookupPseudo = function(key){
|
return pseudos[key];
|
};
|
|
var proto = Events.prototype;
|
Events.implement(Events.Pseudos(pseudos, proto.addEvent, proto.removeEvent));
|
|
['Request', 'Fx'].each(function(klass){
|
if (this[klass]) this[klass].implement(Events.prototype);
|
});
|
|
})();
|
|
|
/*
|
---
|
|
name: Element.Event.Pseudos
|
|
description: Adds the functionality to add pseudo events for Elements
|
|
license: MIT-style license
|
|
authors:
|
- Arian Stolwijk
|
|
requires: [Core/Element.Event, Events.Pseudos]
|
|
provides: [Element.Event.Pseudos]
|
|
...
|
*/
|
|
(function(){
|
|
var pseudos = {},
|
copyFromEvents = ['once', 'throttle', 'pause'],
|
count = copyFromEvents.length;
|
|
while (count--) pseudos[copyFromEvents[count]] = Events.lookupPseudo(copyFromEvents[count]);
|
|
Event.definePseudo = function(key, listener){
|
pseudos[key] = Type.isFunction(listener) ? {listener: listener} : listener;
|
return this;
|
};
|
|
var proto = Element.prototype;
|
[Element, Window, Document].invoke('implement', Events.Pseudos(pseudos, proto.addEvent, proto.removeEvent));
|
|
})();
|
|
|
/*
|
---
|
|
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){
|
|
|
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: Fx.Elements.js
|
|
name: Fx.Elements
|
|
description: Effect to change any number of CSS properties of any number of Elements.
|
|
license: MIT-style license
|
|
authors:
|
- Valerio Proietti
|
|
requires:
|
- Core/Fx.CSS
|
- /MooTools.More
|
|
provides: [Fx.Elements]
|
|
...
|
*/
|
|
Fx.Elements = new Class({
|
|
Extends: Fx.CSS,
|
|
initialize: function(elements, options){
|
this.elements = this.subject = $$(elements);
|
this.parent(options);
|
},
|
|
compute: function(from, to, delta){
|
var now = {};
|
|
for (var i in from){
|
var iFrom = from[i], iTo = to[i], iNow = now[i] = {};
|
for (var p in iFrom) iNow[p] = this.parent(iFrom[p], iTo[p], delta);
|
}
|
|
return now;
|
},
|
|
set: function(now){
|
for (var i in now){
|
if (!this.elements[i]) continue;
|
|
var iNow = now[i];
|
for (var p in iNow) this.render(this.elements[i], p, iNow[p], this.options.unit);
|
}
|
|
return this;
|
},
|
|
start: function(obj){
|
if (!this.check(obj)) return this;
|
var from = {}, to = {};
|
|
for (var i in obj){
|
if (!this.elements[i]) continue;
|
|
var iProps = obj[i], iFrom = from[i] = {}, iTo = to[i] = {};
|
|
for (var p in iProps){
|
var parsed = this.prepare(this.elements[i], p, iProps[p]);
|
iFrom[p] = parsed.from;
|
iTo[p] = parsed.to;
|
}
|
}
|
|
return this.parent(from, to);
|
}
|
|
});
|
|
|
/*
|
---
|
|
script: Fx.Move.js
|
|
name: Fx.Move
|
|
description: Defines Fx.Move, a class that works with Element.Position.js to transition an element from one location to another.
|
|
license: MIT-style license
|
|
authors:
|
- Aaron Newton
|
|
requires:
|
- Core/Fx.Morph
|
- /Element.Position
|
|
provides: [Fx.Move]
|
|
...
|
*/
|
|
Fx.Move = new Class({
|
|
Extends: Fx.Morph,
|
|
options: {
|
relativeTo: document.body,
|
position: 'center',
|
edge: false,
|
offset: {x: 0, y: 0}
|
},
|
|
start: function(destination){
|
var element = this.element,
|
topLeft = element.getStyles('top', 'left');
|
if (topLeft.top == 'auto' || topLeft.left == 'auto'){
|
element.setPosition(element.getPosition(element.getOffsetParent()));
|
}
|
return this.parent(element.position(Object.merge({}, this.options, destination, {returnPos: true})));
|
}
|
|
});
|
|
Element.Properties.move = {
|
|
set: function(options){
|
this.get('move').cancel().setOptions(options);
|
return this;
|
},
|
|
get: function(){
|
var move = this.retrieve('move');
|
if (!move){
|
move = new Fx.Move(this, {link: 'cancel'});
|
this.store('move', move);
|
}
|
return move;
|
}
|
|
};
|
|
Element.implement({
|
|
move: function(options){
|
this.get('move').start(options);
|
return this;
|
}
|
|
});
|
|
|
/*
|
---
|
|
script: Element.Shortcuts.js
|
|
name: Element.Shortcuts
|
|
description: Extends the Element native object to include some shortcut methods.
|
|
license: MIT-style license
|
|
authors:
|
- Aaron Newton
|
|
requires:
|
- Core/Element.Style
|
- /MooTools.More
|
|
provides: [Element.Shortcuts]
|
|
...
|
*/
|
|
Element.implement({
|
|
isDisplayed: function(){
|
return this.getStyle('display') != 'none';
|
},
|
|
isVisible: function(){
|
var w = this.offsetWidth,
|
h = this.offsetHeight;
|
return (w == 0 && h == 0) ? false : (w > 0 && h > 0) ? true : this.style.display != 'none';
|
},
|
|
toggle: function(){
|
return this[this.isDisplayed() ? 'hide' : 'show']();
|
},
|
|
hide: function(){
|
var d;
|
try {
|
//IE fails here if the element is not in the dom
|
d = this.getStyle('display');
|
} catch(e){}
|
if (d == 'none') return this;
|
return this.store('element:_originalDisplay', d || '').setStyle('display', 'none');
|
},
|
|
show: function(display){
|
if (!display && this.isDisplayed()) return this;
|
display = display || this.retrieve('element:_originalDisplay') || 'block';
|
return this.setStyle('display', (display == 'none') ? 'block' : display);
|
},
|
|
swapClass: function(remove, add){
|
return this.removeClass(remove).addClass(add);
|
}
|
|
});
|
|
Document.implement({
|
|
clearSelection: function(){
|
if (window.getSelection){
|
var selection = window.getSelection();
|
if (selection && selection.removeAllRanges) selection.removeAllRanges();
|
} else if (document.selection && document.selection.empty){
|
try {
|
//IE fails here if selected element is not in dom
|
document.selection.empty();
|
} catch(e){}
|
}
|
}
|
|
});
|
|
|
/*
|
---
|
|
script: Fx.Reveal.js
|
|
name: Fx.Reveal
|
|
description: Defines Fx.Reveal, a class that shows and hides elements with a transition.
|
|
license: MIT-style license
|
|
authors:
|
- Aaron Newton
|
|
requires:
|
- Core/Fx.Morph
|
- /Element.Shortcuts
|
- /Element.Measure
|
|
provides: [Fx.Reveal]
|
|
...
|
*/
|
|
(function(){
|
|
|
var hideTheseOf = function(object){
|
var hideThese = object.options.hideInputs;
|
if (window.OverText){
|
var otClasses = [null];
|
OverText.each(function(ot){
|
otClasses.include('.' + ot.options.labelClass);
|
});
|
if (otClasses) hideThese += otClasses.join(', ');
|
}
|
return (hideThese) ? object.element.getElements(hideThese) : null;
|
};
|
|
|
Fx.Reveal = new Class({
|
|
Extends: Fx.Morph,
|
|
options: {/*
|
onShow: function(thisElement){},
|
onHide: function(thisElement){},
|
onComplete: function(thisElement){},
|
heightOverride: null,
|
widthOverride: null,*/
|
link: 'cancel',
|
styles: ['padding', 'border', 'margin'],
|
transitionOpacity: !Browser.ie6,
|
mode: 'vertical',
|
display: function(){
|
return this.element.get('tag') != 'tr' ? 'block' : 'table-row';
|
},
|
opacity: 1,
|
hideInputs: Browser.ie ? 'select, input, textarea, object, embed' : null
|
},
|
|
dissolve: function(){
|
if (!this.hiding && !this.showing){
|
if (this.element.getStyle('display') != 'none'){
|
this.hiding = true;
|
this.showing = false;
|
this.hidden = true;
|
this.cssText = this.element.style.cssText;
|
|
var startStyles = this.element.getComputedSize({
|
styles: this.options.styles,
|
mode: this.options.mode
|
});
|
if (this.options.transitionOpacity) startStyles.opacity = this.options.opacity;
|
|
var zero = {};
|
Object.each(startStyles, function(style, name){
|
zero[name] = [style, 0];
|
});
|
|
this.element.setStyles({
|
display: Function.from(this.options.display).call(this),
|
overflow: 'hidden'
|
});
|
|
var hideThese = hideTheseOf(this);
|
if (hideThese) hideThese.setStyle('visibility', 'hidden');
|
|
this.$chain.unshift(function(){
|
if (this.hidden){
|
this.hiding = false;
|
this.element.style.cssText = this.cssText;
|
this.element.setStyle('display', 'none');
|
if (hideThese) hideThese.setStyle('visibility', 'visible');
|
}
|
this.fireEvent('hide', this.element);
|
this.callChain();
|
}.bind(this));
|
|
this.start(zero);
|
} else {
|
this.callChain.delay(10, this);
|
this.fireEvent('complete', this.element);
|
this.fireEvent('hide', this.element);
|
}
|
} else if (this.options.link == 'chain'){
|
this.chain(this.dissolve.bind(this));
|
} else if (this.options.link == 'cancel' && !this.hiding){
|
this.cancel();
|
this.dissolve();
|
}
|
return this;
|
},
|
|
reveal: function(){
|
if (!this.showing && !this.hiding){
|
if (this.element.getStyle('display') == 'none'){
|
this.hiding = false;
|
this.showing = true;
|
this.hidden = false;
|
this.cssText = this.element.style.cssText;
|
|
var startStyles;
|
this.element.measure(function(){
|
startStyles = this.element.getComputedSize({
|
styles: this.options.styles,
|
mode: this.options.mode
|
});
|
}.bind(this));
|
if (this.options.heightOverride != null) startStyles.height = this.options.heightOverride.toInt();
|
if (this.options.widthOverride != null) startStyles.width = this.options.widthOverride.toInt();
|
if (this.options.transitionOpacity){
|
this.element.setStyle('opacity', 0);
|
startStyles.opacity = this.options.opacity;
|
}
|
|
var zero = {
|
height: 0,
|
display: Function.from(this.options.display).call(this)
|
};
|
Object.each(startStyles, function(style, name){
|
zero[name] = 0;
|
});
|
zero.overflow = 'hidden';
|
|
this.element.setStyles(zero);
|
|
var hideThese = hideTheseOf(this);
|
if (hideThese) hideThese.setStyle('visibility', 'hidden');
|
|
this.$chain.unshift(function(){
|
this.element.style.cssText = this.cssText;
|
this.element.setStyle('display', Function.from(this.options.display).call(this));
|
if (!this.hidden) this.showing = false;
|
if (hideThese) hideThese.setStyle('visibility', 'visible');
|
this.callChain();
|
this.fireEvent('show', this.element);
|
}.bind(this));
|
|
this.start(startStyles);
|
} else {
|
this.callChain();
|
this.fireEvent('complete', this.element);
|
this.fireEvent('show', this.element);
|
}
|
} else if (this.options.link == 'chain'){
|
this.chain(this.reveal.bind(this));
|
} else if (this.options.link == 'cancel' && !this.showing){
|
this.cancel();
|
this.reveal();
|
}
|
return this;
|
},
|
|
toggle: function(){
|
if (this.element.getStyle('display') == 'none'){
|
this.reveal();
|
} else {
|
this.dissolve();
|
}
|
return this;
|
},
|
|
cancel: function(){
|
this.parent.apply(this, arguments);
|
if (this.cssText != null) this.element.style.cssText = this.cssText;
|
this.hiding = false;
|
this.showing = false;
|
return this;
|
}
|
|
});
|
|
Element.Properties.reveal = {
|
|
set: function(options){
|
this.get('reveal').cancel().setOptions(options);
|
return this;
|
},
|
|
get: function(){
|
var reveal = this.retrieve('reveal');
|
if (!reveal){
|
reveal = new Fx.Reveal(this);
|
this.store('reveal', reveal);
|
}
|
return reveal;
|
}
|
|
};
|
|
Element.Properties.dissolve = Element.Properties.reveal;
|
|
Element.implement({
|
|
reveal: function(options){
|
this.get('reveal').setOptions(options).reveal();
|
return this;
|
},
|
|
dissolve: function(options){
|
this.get('reveal').setOptions(options).dissolve();
|
return this;
|
},
|
|
nix: function(options){
|
var params = Array.link(arguments, {destroy: Type.isBoolean, options: Type.isObject});
|
this.get('reveal').setOptions(options).dissolve().chain(function(){
|
this[params.destroy ? 'destroy' : 'dispose']();
|
}.bind(this));
|
return this;
|
},
|
|
wink: function(){
|
var params = Array.link(arguments, {duration: Type.isNumber, options: Type.isObject});
|
var reveal = this.get('reveal').setOptions(params.options);
|
reveal.reveal().chain(function(){
|
(function(){
|
reveal.dissolve();
|
}).delay(params.duration || 2000);
|
});
|
}
|
|
});
|
|
})();
|
|
|
/*
|
---
|
|
script: Fx.Slide.js
|
|
name: Fx.Slide
|
|
description: Effect to slide an element in and out of view.
|
|
license: MIT-style license
|
|
authors:
|
- Valerio Proietti
|
|
requires:
|
- Core/Fx
|
- Core/Element.Style
|
- /MooTools.More
|
|
provides: [Fx.Slide]
|
|
...
|
*/
|
|
Fx.Slide = new Class({
|
|
Extends: Fx,
|
|
options: {
|
mode: 'vertical',
|
wrapper: false,
|
hideOverflow: true,
|
resetHeight: false
|
},
|
|
initialize: function(element, options){
|
element = this.element = this.subject = document.id(element);
|
this.parent(options);
|
options = this.options;
|
|
var wrapper = element.retrieve('wrapper'),
|
styles = element.getStyles('margin', 'position', 'overflow');
|
|
if (options.hideOverflow) styles = Object.append(styles, {overflow: 'hidden'});
|
if (options.wrapper) wrapper = document.id(options.wrapper).setStyles(styles);
|
|
if (!wrapper) wrapper = new Element('div', {
|
styles: styles
|
}).wraps(element);
|
|
element.store('wrapper', wrapper).setStyle('margin', 0);
|
if (element.getStyle('overflow') == 'visible') element.setStyle('overflow', 'hidden');
|
|
this.now = [];
|
this.open = true;
|
this.wrapper = wrapper;
|
|
this.addEvent('complete', function(){
|
this.open = (wrapper['offset' + this.layout.capitalize()] != 0);
|
if (this.open && this.options.resetHeight) wrapper.setStyle('height', '');
|
}, 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){
|
return [0, 1].map(function(i){
|
return Fx.compute(from[i], to[i], delta);
|
});
|
},
|
|
start: function(how, mode){
|
if (!this.check(how, mode)) return this;
|
this[mode || this.options.mode]();
|
|
var margin = this.element.getStyle(this.margin).toInt(),
|
layout = this.wrapper.getStyle(this.layout).toInt(),
|
caseIn = [[margin, layout], [0, this.offset]],
|
caseOut = [[margin, layout], [-this.offset, 0]],
|
start;
|
|
switch (how){
|
case 'in': start = caseIn; break;
|
case 'out': start = caseOut; break;
|
case 'toggle': start = (layout == 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){
|
this.get('slide').cancel().setOptions(options);
|
return this;
|
},
|
|
get: function(){
|
var slide = this.retrieve('slide');
|
if (!slide){
|
slide = new Fx.Slide(this, {link: 'cancel'});
|
this.store('slide', slide);
|
}
|
return 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: Drag.js
|
|
name: Drag
|
|
description: The base Drag Class. Can be used to drag and resize Elements using mouse events.
|
|
license: MIT-style license
|
|
authors:
|
- Valerio Proietti
|
- Tom Occhinno
|
- Jan Kassens
|
|
requires:
|
- Core/Events
|
- Core/Options
|
- Core/Element.Event
|
- Core/Element.Style
|
- Core/Element.Dimensions
|
- /MooTools.More
|
|
provides: [Drag]
|
...
|
|
*/
|
|
var Drag = new Class({
|
|
Implements: [Events, Options],
|
|
options: {/*
|
onBeforeStart: function(thisElement){},
|
onStart: function(thisElement, event){},
|
onSnap: function(thisElement){},
|
onDrag: function(thisElement, event){},
|
onCancel: function(thisElement){},
|
onComplete: function(thisElement, event){},*/
|
snap: 6,
|
unit: 'px',
|
grid: false,
|
style: true,
|
limit: false,
|
handle: false,
|
invert: false,
|
preventDefault: false,
|
stopPropagation: false,
|
modifiers: {x: 'left', y: 'top'}
|
},
|
|
initialize: function(){
|
var params = Array.link(arguments, {
|
'options': Type.isObject,
|
'element': function(obj){
|
return obj != null;
|
}
|
});
|
|
this.element = document.id(params.element);
|
this.document = this.element.getDocument();
|
this.setOptions(params.options || {});
|
var htype = typeOf(this.options.handle);
|
this.handles = ((htype == 'array' || htype == 'collection') ? $$(this.options.handle) : document.id(this.options.handle)) || this.element;
|
this.mouse = {'now': {}, 'pos': {}};
|
this.value = {'start': {}, 'now': {}};
|
|
this.selection = (Browser.ie) ? 'selectstart' : 'mousedown';
|
|
|
if (Browser.ie && !Drag.ondragstartFixed){
|
document.ondragstart = Function.from(false);
|
Drag.ondragstartFixed = true;
|
}
|
|
this.bound = {
|
start: this.start.bind(this),
|
check: this.check.bind(this),
|
drag: this.drag.bind(this),
|
stop: this.stop.bind(this),
|
cancel: this.cancel.bind(this),
|
eventStop: Function.from(false)
|
};
|
this.attach();
|
},
|
|
attach: function(){
|
this.handles.addEvent('mousedown', this.bound.start);
|
return this;
|
},
|
|
detach: function(){
|
this.handles.removeEvent('mousedown', this.bound.start);
|
return this;
|
},
|
|
start: function(event){
|
var options = this.options;
|
|
if (event.rightClick) return;
|
|
if (options.preventDefault) event.preventDefault();
|
if (options.stopPropagation) event.stopPropagation();
|
this.mouse.start = event.page;
|
|
this.fireEvent('beforeStart', this.element);
|
|
var limit = options.limit;
|
this.limit = {x: [], y: []};
|
|
var z, coordinates;
|
for (z in options.modifiers){
|
if (!options.modifiers[z]) continue;
|
|
var style = this.element.getStyle(options.modifiers[z]);
|
|
// Some browsers (IE and Opera) don't always return pixels.
|
if (style && !style.match(/px$/)){
|
if (!coordinates) coordinates = this.element.getCoordinates(this.element.getOffsetParent());
|
style = coordinates[options.modifiers[z]];
|
}
|
|
if (options.style) this.value.now[z] = (style || 0).toInt();
|
else this.value.now[z] = this.element[options.modifiers[z]];
|
|
if (options.invert) this.value.now[z] *= -1;
|
|
this.mouse.pos[z] = event.page[z] - this.value.now[z];
|
|
if (limit && limit[z]){
|
var i = 2;
|
while (i--){
|
var limitZI = limit[z][i];
|
if (limitZI || limitZI === 0) this.limit[z][i] = (typeof limitZI == 'function') ? limitZI() : limitZI;
|
}
|
}
|
}
|
|
if (typeOf(this.options.grid) == 'number') this.options.grid = {
|
x: this.options.grid,
|
y: this.options.grid
|
};
|
|
var events = {
|
mousemove: this.bound.check,
|
mouseup: this.bound.cancel
|
};
|
events[this.selection] = this.bound.eventStop;
|
this.document.addEvents(events);
|
},
|
|
check: function(event){
|
if (this.options.preventDefault) event.preventDefault();
|
var distance = Math.round(Math.sqrt(Math.pow(event.page.x - this.mouse.start.x, 2) + Math.pow(event.page.y - this.mouse.start.y, 2)));
|
if (distance > this.options.snap){
|
this.cancel();
|
this.document.addEvents({
|
mousemove: this.bound.drag,
|
mouseup: this.bound.stop
|
});
|
this.fireEvent('start', [this.element, event]).fireEvent('snap', this.element);
|
}
|
},
|
|
drag: function(event){
|
var options = this.options;
|
|
if (options.preventDefault) event.preventDefault();
|
this.mouse.now = event.page;
|
|
for (var z in options.modifiers){
|
if (!options.modifiers[z]) continue;
|
this.value.now[z] = this.mouse.now[z] - this.mouse.pos[z];
|
|
if (options.invert) this.value.now[z] *= -1;
|
|
if (options.limit && this.limit[z]){
|
if ((this.limit[z][1] || this.limit[z][1] === 0) && (this.value.now[z] > this.limit[z][1])){
|
this.value.now[z] = this.limit[z][1];
|
} else if ((this.limit[z][0] || this.limit[z][0] === 0) && (this.value.now[z] < this.limit[z][0])){
|
this.value.now[z] = this.limit[z][0];
|
}
|
}
|
|
if (options.grid[z]) this.value.now[z] -= ((this.value.now[z] - (this.limit[z][0]||0)) % options.grid[z]);
|
|
if (options.style) this.element.setStyle(options.modifiers[z], this.value.now[z] + options.unit);
|
else this.element[options.modifiers[z]] = this.value.now[z];
|
}
|
|
this.fireEvent('drag', [this.element, event]);
|
},
|
|
cancel: function(event){
|
this.document.removeEvents({
|
mousemove: this.bound.check,
|
mouseup: this.bound.cancel
|
});
|
if (event){
|
this.document.removeEvent(this.selection, this.bound.eventStop);
|
this.fireEvent('cancel', this.element);
|
}
|
},
|
|
stop: function(event){
|
var events = {
|
mousemove: this.bound.drag,
|
mouseup: this.bound.stop
|
};
|
events[this.selection] = this.bound.eventStop;
|
this.document.removeEvents(events);
|
if (event) this.fireEvent('complete', [this.element, event]);
|
}
|
|
});
|
|
Element.implement({
|
|
makeResizable: function(options){
|
var drag = new Drag(this, Object.merge({
|
modifiers: {
|
x: 'width',
|
y: 'height'
|
}
|
}, options));
|
|
this.store('resizer', drag);
|
return drag.addEvent('drag', function(){
|
this.fireEvent('resize', drag);
|
}.bind(this));
|
}
|
|
});
|
|
|
/*
|
---
|
|
script: Drag.Move.js
|
|
name: Drag.Move
|
|
description: A Drag extension that provides support for the constraining of draggables to containers and droppables.
|
|
license: MIT-style license
|
|
authors:
|
- Valerio Proietti
|
- Tom Occhinno
|
- Jan Kassens
|
- Aaron Newton
|
- Scott Kyle
|
|
requires:
|
- Core/Element.Dimensions
|
- /Drag
|
|
provides: [Drag.Move]
|
|
...
|
*/
|
|
Drag.Move = new Class({
|
|
Extends: Drag,
|
|
options: {/*
|
onEnter: function(thisElement, overed){},
|
onLeave: function(thisElement, overed){},
|
onDrop: function(thisElement, overed, event){},*/
|
droppables: [],
|
container: false,
|
precalculate: false,
|
includeMargins: true,
|
checkDroppables: true
|
},
|
|
initialize: function(element, options){
|
this.parent(element, options);
|
element = this.element;
|
|
this.droppables = $$(this.options.droppables);
|
this.container = document.id(this.options.container);
|
|
if (this.container && typeOf(this.container) != 'element')
|
this.container = document.id(this.container.getDocument().body);
|
|
if (this.options.style){
|
if (this.options.modifiers.x == 'left' && this.options.modifiers.y == 'top'){
|
var parent = element.getOffsetParent(),
|
styles = element.getStyles('left', 'top');
|
if (parent && (styles.left == 'auto' || styles.top == 'auto')){
|
element.setPosition(element.getPosition(parent));
|
}
|
}
|
|
if (element.getStyle('position') == 'static') element.setStyle('position', 'absolute');
|
}
|
|
this.addEvent('start', this.checkDroppables, true);
|
this.overed = null;
|
},
|
|
start: function(event){
|
if (this.container) this.options.limit = this.calculateLimit();
|
|
if (this.options.precalculate){
|
this.positions = this.droppables.map(function(el){
|
return el.getCoordinates();
|
});
|
}
|
|
this.parent(event);
|
},
|
|
calculateLimit: function(){
|
var element = this.element,
|
container = this.container,
|
|
offsetParent = document.id(element.getOffsetParent()) || document.body,
|
containerCoordinates = container.getCoordinates(offsetParent),
|
elementMargin = {},
|
elementBorder = {},
|
containerMargin = {},
|
containerBorder = {},
|
offsetParentPadding = {};
|
|
['top', 'right', 'bottom', 'left'].each(function(pad){
|
elementMargin[pad] = element.getStyle('margin-' + pad).toInt();
|
elementBorder[pad] = element.getStyle('border-' + pad).toInt();
|
containerMargin[pad] = container.getStyle('margin-' + pad).toInt();
|
containerBorder[pad] = container.getStyle('border-' + pad).toInt();
|
offsetParentPadding[pad] = offsetParent.getStyle('padding-' + pad).toInt();
|
}, this);
|
|
var width = element.offsetWidth + elementMargin.left + elementMargin.right,
|
height = element.offsetHeight + elementMargin.top + elementMargin.bottom,
|
left = 0,
|
top = 0,
|
right = containerCoordinates.right - containerBorder.right - width,
|
bottom = containerCoordinates.bottom - containerBorder.bottom - height;
|
|
if (this.options.includeMargins){
|
left += elementMargin.left;
|
top += elementMargin.top;
|
} else {
|
right += elementMargin.right;
|
bottom += elementMargin.bottom;
|
}
|
|
if (element.getStyle('position') == 'relative'){
|
var coords = element.getCoordinates(offsetParent);
|
coords.left -= element.getStyle('left').toInt();
|
coords.top -= element.getStyle('top').toInt();
|
|
left -= coords.left;
|
top -= coords.top;
|
if (container.getStyle('position') != 'relative'){
|
left += containerBorder.left;
|
top += containerBorder.top;
|
}
|
right += elementMargin.left - coords.left;
|
bottom += elementMargin.top - coords.top;
|
|
if (container != offsetParent){
|
left += containerMargin.left + offsetParentPadding.left;
|
top += ((Browser.ie6 || Browser.ie7) ? 0 : containerMargin.top) + offsetParentPadding.top;
|
}
|
} else {
|
left -= elementMargin.left;
|
top -= elementMargin.top;
|
if (container != offsetParent){
|
left += containerCoordinates.left + containerBorder.left;
|
top += containerCoordinates.top + containerBorder.top;
|
}
|
}
|
|
return {
|
x: [left, right],
|
y: [top, bottom]
|
};
|
},
|
|
getDroppableCoordinates: function(element){
|
var position = element.getCoordinates();
|
if (element.getStyle('position') == 'fixed'){
|
var scroll = window.getScroll();
|
position.left += scroll.x;
|
position.right += scroll.x;
|
position.top += scroll.y;
|
position.bottom += scroll.y;
|
}
|
return position;
|
},
|
|
checkDroppables: function(){
|
var overed = this.droppables.filter(function(el, i){
|
el = this.positions ? this.positions[i] : this.getDroppableCoordinates(el);
|
var now = this.mouse.now;
|
return (now.x > el.left && now.x < el.right && now.y < el.bottom && now.y > el.top);
|
}, this).getLast();
|
|
if (this.overed != overed){
|
if (this.overed) this.fireEvent('leave', [this.element, this.overed]);
|
if (overed) this.fireEvent('enter', [this.element, overed]);
|
this.overed = overed;
|
}
|
},
|
|
drag: function(event){
|
this.parent(event);
|
if (this.options.checkDroppables && this.droppables.length) this.checkDroppables();
|
},
|
|
stop: function(event){
|
this.checkDroppables();
|
this.fireEvent('drop', [this.element, this.overed, event]);
|
this.overed = null;
|
return this.parent(event);
|
}
|
|
});
|
|
Element.implement({
|
|
makeDraggable: function(options){
|
var drag = new Drag.Move(this, options);
|
this.store('dragger', drag);
|
return drag;
|
}
|
|
});
|
|
|
/*
|
---
|
|
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: Slider.js
|
|
name: Slider
|
|
description: Class for creating horizontal and vertical slider controls.
|
|
license: MIT-style license
|
|
authors:
|
- Valerio Proietti
|
|
requires:
|
- Core/Element.Dimensions
|
- /Class.Binds
|
- /Drag
|
- /Element.Measure
|
|
provides: [Slider]
|
|
...
|
*/
|
|
var Slider = new Class({
|
|
Implements: [Events, Options],
|
|
Binds: ['clickedElement', 'draggedKnob', 'scrolledElement'],
|
|
options: {/*
|
onTick: function(intPosition){},
|
onChange: function(intStep){},
|
onComplete: function(strStep){},*/
|
onTick: function(position){
|
this.setKnobPosition(position);
|
},
|
initialStep: 0,
|
snap: false,
|
offset: 0,
|
range: false,
|
wheel: false,
|
steps: 100,
|
mode: 'horizontal'
|
},
|
|
initialize: function(element, knob, options){
|
this.setOptions(options);
|
options = this.options;
|
this.element = document.id(element);
|
knob = this.knob = document.id(knob);
|
this.previousChange = this.previousEnd = this.step = -1;
|
|
var limit = {},
|
modifiers = {x: false, y: false};
|
|
switch (options.mode){
|
case 'vertical':
|
this.axis = 'y';
|
this.property = 'top';
|
this.offset = 'offsetHeight';
|
break;
|
case 'horizontal':
|
this.axis = 'x';
|
this.property = 'left';
|
this.offset = 'offsetWidth';
|
}
|
|
this.setSliderDimensions();
|
this.setRange(options.range);
|
|
if (knob.getStyle('position') == 'static') knob.setStyle('position', 'relative');
|
knob.setStyle(this.property, -options.offset);
|
modifiers[this.axis] = this.property;
|
limit[this.axis] = [-options.offset, this.full - options.offset];
|
|
var dragOptions = {
|
snap: 0,
|
limit: limit,
|
modifiers: modifiers,
|
onDrag: this.draggedKnob,
|
onStart: this.draggedKnob,
|
onBeforeStart: (function(){
|
this.isDragging = true;
|
}).bind(this),
|
onCancel: function(){
|
this.isDragging = false;
|
}.bind(this),
|
onComplete: function(){
|
this.isDragging = false;
|
this.draggedKnob();
|
this.end();
|
}.bind(this)
|
};
|
if (options.snap) this.setSnap(dragOptions);
|
|
this.drag = new Drag(knob, dragOptions);
|
this.attach();
|
if (options.initialStep != null) this.set(options.initialStep);
|
},
|
|
attach: function(){
|
this.element.addEvent('mousedown', this.clickedElement);
|
if (this.options.wheel) this.element.addEvent('mousewheel', this.scrolledElement);
|
this.drag.attach();
|
return this;
|
},
|
|
detach: function(){
|
this.element.removeEvent('mousedown', this.clickedElement)
|
.removeEvent('mousewheel', this.scrolledElement);
|
this.drag.detach();
|
return this;
|
},
|
|
autosize: function(){
|
this.setSliderDimensions()
|
.setKnobPosition(this.toPosition(this.step));
|
this.drag.options.limit[this.axis] = [-this.options.offset, this.full - this.options.offset];
|
if (this.options.snap) this.setSnap();
|
return this;
|
},
|
|
setSnap: function(options){
|
if (!options) options = this.drag.options;
|
options.grid = Math.ceil(this.stepWidth);
|
options.limit[this.axis][1] = this.full;
|
return this;
|
},
|
|
setKnobPosition: function(position){
|
if (this.options.snap) position = this.toPosition(this.step);
|
this.knob.setStyle(this.property, position);
|
return this;
|
},
|
|
setSliderDimensions: function(){
|
this.full = this.element.measure(function(){
|
this.half = this.knob[this.offset] / 2;
|
return this.element[this.offset] - this.knob[this.offset] + (this.options.offset * 2);
|
}.bind(this));
|
return this;
|
},
|
|
set: function(step){
|
if (!((this.range > 0) ^ (step < this.min))) step = this.min;
|
if (!((this.range > 0) ^ (step > this.max))) step = this.max;
|
|
this.step = Math.round(step);
|
return this.checkStep()
|
.fireEvent('tick', this.toPosition(this.step))
|
.end();
|
},
|
|
setRange: function(range, pos){
|
this.min = Array.pick([range[0], 0]);
|
this.max = Array.pick([range[1], this.options.steps]);
|
this.range = this.max - this.min;
|
this.steps = this.options.steps || this.full;
|
this.stepSize = Math.abs(this.range) / this.steps;
|
this.stepWidth = this.stepSize * this.full / Math.abs(this.range);
|
if (range) this.set(Array.pick([pos, this.step]).floor(this.min).max(this.max));
|
return this;
|
},
|
|
clickedElement: function(event){
|
if (this.isDragging || event.target == this.knob) return;
|
|
var dir = this.range < 0 ? -1 : 1,
|
position = event.page[this.axis] - this.element.getPosition()[this.axis] - this.half;
|
|
position = position.limit(-this.options.offset, this.full - this.options.offset);
|
|
this.step = Math.round(this.min + dir * this.toStep(position));
|
|
this.checkStep()
|
.fireEvent('tick', position)
|
.end();
|
},
|
|
scrolledElement: function(event){
|
var mode = (this.options.mode == 'horizontal') ? (event.wheel < 0) : (event.wheel > 0);
|
this.set(this.step + (mode ? -1 : 1) * this.stepSize);
|
event.stop();
|
},
|
|
draggedKnob: function(){
|
var dir = this.range < 0 ? -1 : 1,
|
position = this.drag.value.now[this.axis];
|
|
position = position.limit(-this.options.offset, this.full -this.options.offset);
|
|
this.step = Math.round(this.min + dir * this.toStep(position));
|
this.checkStep();
|
},
|
|
checkStep: function(){
|
var step = this.step;
|
if (this.previousChange != step){
|
this.previousChange = step;
|
this.fireEvent('change', step);
|
}
|
return this;
|
},
|
|
end: function(){
|
var step = this.step;
|
if (this.previousEnd !== step){
|
this.previousEnd = step;
|
this.fireEvent('complete', step + '');
|
}
|
return this;
|
},
|
|
toStep: function(position){
|
var step = (position + this.options.offset) * this.stepSize / this.full * this.steps;
|
return this.options.steps ? Math.round(step -= step % this.stepSize) : step;
|
},
|
|
toPosition: function(step){
|
return (this.full * Math.abs(this.min - step)) / (this.steps * this.stepSize) - this.options.offset;
|
}
|
|
});
|
|
|
/*
|
---
|
|
script: Tips.js
|
|
name: Tips
|
|
description: Class for creating nice tips that follow the mouse cursor when hovering an element.
|
|
license: MIT-style license
|
|
authors:
|
- Valerio Proietti
|
- Christoph Pojer
|
- Luis Merino
|
|
requires:
|
- Core/Options
|
- Core/Events
|
- Core/Element.Event
|
- Core/Element.Style
|
- Core/Element.Dimensions
|
- /MooTools.More
|
|
provides: [Tips]
|
|
...
|
*/
|
|
(function(){
|
|
var read = function(option, element){
|
return (option) ? (typeOf(option) == 'function' ? option(element) : element.get(option)) : '';
|
};
|
|
this.Tips = new Class({
|
|
Implements: [Events, Options],
|
|
options: {/*
|
onAttach: function(element){},
|
onDetach: function(element){},
|
onBound: function(coords){},*/
|
onShow: function(){
|
this.tip.setStyle('display', 'block');
|
},
|
onHide: function(){
|
this.tip.setStyle('display', 'none');
|
},
|
title: 'title',
|
text: function(element){
|
return element.get('rel') || element.get('href');
|
},
|
showDelay: 100,
|
hideDelay: 100,
|
className: 'tip-wrap',
|
offset: {x: 16, y: 16},
|
windowPadding: {x:0, y:0},
|
fixed: false
|
},
|
|
initialize: function(){
|
var params = Array.link(arguments, {
|
options: Type.isObject,
|
elements: function(obj){
|
return obj != null;
|
}
|
});
|
this.setOptions(params.options);
|
if (params.elements) this.attach(params.elements);
|
this.container = new Element('div', {'class': 'tip'});
|
},
|
|
toElement: function(){
|
if (this.tip) return this.tip;
|
|
this.tip = new Element('div', {
|
'class': this.options.className,
|
styles: {
|
position: 'absolute',
|
top: 0,
|
left: 0
|
}
|
}).adopt(
|
new Element('div', {'class': 'tip-top'}),
|
this.container,
|
new Element('div', {'class': 'tip-bottom'})
|
);
|
|
return this.tip;
|
},
|
|
attach: function(elements){
|
$$(elements).each(function(element){
|
var title = read(this.options.title, element),
|
text = read(this.options.text, element);
|
|
element.set('title', '').store('tip:native', title).retrieve('tip:title', title);
|
element.retrieve('tip:text', text);
|
this.fireEvent('attach', [element]);
|
|
var events = ['enter', 'leave'];
|
if (!this.options.fixed) events.push('move');
|
|
events.each(function(value){
|
var event = element.retrieve('tip:' + value);
|
if (!event) event = function(event){
|
this['element' + value.capitalize()].apply(this, [event, element]);
|
}.bind(this);
|
|
element.store('tip:' + value, event).addEvent('mouse' + value, event);
|
}, this);
|
}, this);
|
|
return this;
|
},
|
|
detach: function(elements){
|
$$(elements).each(function(element){
|
['enter', 'leave', 'move'].each(function(value){
|
element.removeEvent('mouse' + value, element.retrieve('tip:' + value)).eliminate('tip:' + value);
|
});
|
|
this.fireEvent('detach', [element]);
|
|
if (this.options.title == 'title'){ // This is necessary to check if we can revert the title
|
var original = element.retrieve('tip:native');
|
if (original) element.set('title', original);
|
}
|
}, this);
|
|
return this;
|
},
|
|
elementEnter: function(event, element){
|
clearTimeout(this.timer);
|
this.timer = (function(){
|
this.container.empty();
|
|
['title', 'text'].each(function(value){
|
var content = element.retrieve('tip:' + value);
|
var div = this['_' + value + 'Element'] = new Element('div', {
|
'class': 'tip-' + value
|
}).inject(this.container);
|
if (content) this.fill(div, content);
|
}, this);
|
this.show(element);
|
this.position((this.options.fixed) ? {page: element.getPosition()} : event);
|
}).delay(this.options.showDelay, this);
|
},
|
|
elementLeave: function(event, element){
|
clearTimeout(this.timer);
|
this.timer = this.hide.delay(this.options.hideDelay, this, element);
|
this.fireForParent(event, element);
|
},
|
|
setTitle: function(title){
|
if (this._titleElement){
|
this._titleElement.empty();
|
this.fill(this._titleElement, title);
|
}
|
return this;
|
},
|
|
setText: function(text){
|
if (this._textElement){
|
this._textElement.empty();
|
this.fill(this._textElement, text);
|
}
|
return this;
|
},
|
|
fireForParent: function(event, element){
|
element = element.getParent();
|
if (!element || element == document.body) return;
|
if (element.retrieve('tip:enter')) element.fireEvent('mouseenter', event);
|
else this.fireForParent(event, element);
|
},
|
|
elementMove: function(event, element){
|
this.position(event);
|
},
|
|
position: function(event){
|
if (!this.tip) document.id(this);
|
|
var size = window.getSize(), scroll = window.getScroll(),
|
tip = {x: this.tip.offsetWidth, y: this.tip.offsetHeight},
|
props = {x: 'left', y: 'top'},
|
bounds = {y: false, x2: false, y2: false, x: false},
|
obj = {};
|
|
for (var z in props){
|
obj[props[z]] = event.page[z] + this.options.offset[z];
|
if (obj[props[z]] < 0) bounds[z] = true;
|
if ((obj[props[z]] + tip[z] - scroll[z]) > size[z] - this.options.windowPadding[z]){
|
obj[props[z]] = event.page[z] - this.options.offset[z] - tip[z];
|
bounds[z+'2'] = true;
|
}
|
}
|
|
this.fireEvent('bound', bounds);
|
this.tip.setStyles(obj);
|
},
|
|
fill: function(element, contents){
|
if (typeof contents == 'string') element.set('html', contents);
|
else element.adopt(contents);
|
},
|
|
show: function(element){
|
if (!this.tip) document.id(this);
|
if (!this.tip.getParent()) this.tip.inject(document.body);
|
this.fireEvent('show', [this.tip, element]);
|
},
|
|
hide: function(element){
|
if (!this.tip) document.id(this);
|
this.fireEvent('hide', [this.tip, element]);
|
}
|
|
});
|
|
})();
|
