mirror of
https://github.com/Oreolek/ifhub.club.git
synced 2024-07-09 01:44:25 +03:00
493 lines
13 KiB
JavaScript
493 lines
13 KiB
JavaScript
//MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2008 Valerio Proietti, <http://mad4milk.net>, 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));
|
|
}
|
|
|
|
}); |