Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make roar works with mootools 1.4.x
.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;
border-radius: 10px;
}
.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;
}
/**
* 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: Function.from(),
onHide: Function.from(),
onRender: Function.from()
},
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: Type.isString, message: Type.isString, options: Type.isObject});
var items = [new Element('h3', {'html': Array.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',
'style': {'opacity': 0.7}
}),
elements
);
item.setStyle(this.align.x, 0).store('roar:offset', offset[1]).set('morph', Object.merge({
link: 'cancel',
onStart: Chain.prototype.clearChain,
transition: Fx.Transitions.Back.easeOut
}, this.options.itemFx));
var remove = this.remove.bind(this, item);
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 (typeOf(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.ie) 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, Object.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 = (typeOf(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)
});
}
});
@ntomka

This comment has been minimized.

Copy link

@ntomka ntomka commented Mar 25, 2013

Hi!

I made a fork of this gist and made a simple modification, to work on current browsers. The problem was obvious based on your modifications.

Have a look at my fork and update your gist if you wish.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment