remove Roar
This commit is contained in:
Damien Churchill
parent
9be54918fb
commit
74ac41e686
|
|
@ -1,55 +0,0 @@
|
|||
.roar-body
|
||||
{
|
||||
position: absolute;
|
||||
font: 12px/14px "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.roar
|
||||
{
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.roar-bg
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #000;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 5px;
|
||||
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.roar-body-ugly .roar
|
||||
{
|
||||
background-color: #333;
|
||||
}
|
||||
.roar-body-ugly .roar-bg
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.roar h3
|
||||
{
|
||||
position: relative;
|
||||
padding: 15px 10px 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
z-index: 1002;
|
||||
}
|
||||
.roar p
|
||||
{
|
||||
position: relative;
|
||||
padding: 10px 10px 15px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
/**
|
||||
* Roar - Notifications
|
||||
*
|
||||
* Inspired by Growl
|
||||
*
|
||||
* @version 1.0.1
|
||||
*
|
||||
* @license MIT-style license
|
||||
* @author Harald Kirschner <mail [at] digitarald.de>
|
||||
* @copyright Author
|
||||
*/
|
||||
|
||||
var Roar = new Class({
|
||||
|
||||
Implements: [Options, Events, Chain],
|
||||
|
||||
options: {
|
||||
duration: 3000,
|
||||
position: 'upperLeft',
|
||||
container: null,
|
||||
bodyFx: null,
|
||||
itemFx: null,
|
||||
margin: {x: 10, y: 10},
|
||||
offset: 10,
|
||||
className: 'roar',
|
||||
onShow: $empty,
|
||||
onHide: $empty,
|
||||
onRender: $empty
|
||||
},
|
||||
|
||||
initialize: function(options) {
|
||||
this.setOptions(options);
|
||||
this.items = [];
|
||||
this.container = $(this.options.container) || document;
|
||||
},
|
||||
|
||||
alert: function(title, message, options) {
|
||||
var params = Array.link(arguments, {title: String.type, message: String.type, options: Object.type});
|
||||
var items = [new Element('h3', {'html': $pick(params.title, '')})];
|
||||
if (params.message) items.push(new Element('p', {'html': params.message}));
|
||||
return this.inject(items, params.options);
|
||||
},
|
||||
|
||||
inject: function(elements, options) {
|
||||
if (!this.body) this.render();
|
||||
options = options || {};
|
||||
|
||||
var offset = [-this.options.offset, 0];
|
||||
var last = this.items.getLast();
|
||||
if (last) {
|
||||
offset[0] = last.retrieve('roar:offset');
|
||||
offset[1] = offset[0] + last.offsetHeight + this.options.offset;
|
||||
}
|
||||
var to = {'opacity': 1};
|
||||
to[this.align.y] = offset;
|
||||
|
||||
var item = new Element('div', {
|
||||
'class': this.options.className,
|
||||
'opacity': 0
|
||||
}).adopt(
|
||||
new Element('div', {
|
||||
'class': 'roar-bg',
|
||||
'opacity': 0.7
|
||||
}),
|
||||
elements
|
||||
);
|
||||
|
||||
item.setStyle(this.align.x, 0).store('roar:offset', offset[1]).set('morph', $merge({
|
||||
unit: 'px',
|
||||
link: 'cancel',
|
||||
onStart: Chain.prototype.clearChain,
|
||||
transition: Fx.Transitions.Back.easeOut
|
||||
}, this.options.itemFx));
|
||||
|
||||
var remove = this.remove.create({
|
||||
bind: this,
|
||||
arguments: [item],
|
||||
delay: 10
|
||||
});
|
||||
this.items.push(item.addEvent('click', remove));
|
||||
|
||||
if (this.options.duration) {
|
||||
var over = false;
|
||||
var trigger = (function() {
|
||||
trigger = null;
|
||||
if (!over) remove();
|
||||
}).delay(this.options.duration);
|
||||
item.addEvents({
|
||||
mouseover: function() {
|
||||
over = true;
|
||||
},
|
||||
mouseout: function() {
|
||||
over = false;
|
||||
if (!trigger) remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
item.inject(this.body).morph(to);
|
||||
return this.fireEvent('onShow', [item, this.items.length]);
|
||||
},
|
||||
|
||||
remove: function(item) {
|
||||
var index = this.items.indexOf(item);
|
||||
if (index == -1) return this;
|
||||
this.items.splice(index, 1);
|
||||
item.removeEvents();
|
||||
var to = {opacity: 0};
|
||||
to[this.align.y] = item.getStyle(this.align.y).toInt() - item.offsetHeight - this.options.offset;
|
||||
item.morph(to).get('morph').chain(item.destroy.bind(item));
|
||||
return this.fireEvent('onHide', [item, this.items.length]).callChain(item);
|
||||
},
|
||||
|
||||
empty: function() {
|
||||
while (this.items.length) this.remove(this.items[0]);
|
||||
return this;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.position = this.options.position;
|
||||
if ($type(this.position) == 'string') {
|
||||
var position = {x: 'center', y: 'center'};
|
||||
this.align = {x: 'left', y: 'top'};
|
||||
if ((/left|west/i).test(this.position)) position.x = 'left';
|
||||
else if ((/right|east/i).test(this.position)) this.align.x = position.x = 'right';
|
||||
if ((/upper|top|north/i).test(this.position)) position.y = 'top';
|
||||
else if ((/bottom|lower|south/i).test(this.position)) this.align.y = position.y = 'bottom';
|
||||
this.position = position;
|
||||
}
|
||||
this.body = new Element('div', {'class': 'roar-body'}).inject(document.body);
|
||||
if (Browser.Engine.trident4) this.body.addClass('roar-body-ugly');
|
||||
this.moveTo = this.body.setStyles.bind(this.body);
|
||||
this.reposition();
|
||||
if (this.options.bodyFx) {
|
||||
var morph = new Fx.Morph(this.body, $merge({
|
||||
unit: 'px',
|
||||
chain: 'cancel',
|
||||
transition: Fx.Transitions.Circ.easeOut
|
||||
}, this.options.bodyFx));
|
||||
this.moveTo = morph.start.bind(morph);
|
||||
}
|
||||
var repos = this.reposition.bind(this);
|
||||
window.addEvents({
|
||||
scroll: repos,
|
||||
resize: repos
|
||||
});
|
||||
this.fireEvent('onRender', this.body);
|
||||
},
|
||||
|
||||
reposition: function() {
|
||||
var max = document.getCoordinates(), scroll = document.getScroll(), margin = this.options.margin;
|
||||
max.left += scroll.x;
|
||||
max.right += scroll.x;
|
||||
max.top += scroll.y;
|
||||
max.bottom += scroll.y;
|
||||
var rel = ($type(this.container) == 'element') ? this.container.getCoordinates() : max;
|
||||
this.moveTo({
|
||||
left: (this.position.x == 'right')
|
||||
? (Math.min(rel.right, max.right) - margin.x)
|
||||
: (Math.max(rel.left, max.left) + margin.x),
|
||||
top: (this.position.y == 'bottom')
|
||||
? (Math.min(rel.bottom, max.bottom) - margin.y)
|
||||
: (Math.max(rel.top, max.top) + margin.y)
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue