Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

made some fixes / enhancements, updated css

  • Loading branch information...
commit a8b7d7fa7f76f54e2e4be6eb34b94be67f39b0c9 1 parent d9ecdc7
atom authored
Showing with 144 additions and 95 deletions.
  1. +99 −20 purr.js → Purr.js
  2. +45 −0 purr-example.css
  3. +0 −75 purr.css
119 purr.js → Purr.js
View
@@ -1,20 +1,22 @@
-var purr = new Class({
+var Purr = new Class({
'options': {
'mode': 'top',
'position': 'left',
+ 'elementAlertClass': 'purr-element-alert',
'elements': {
'wrapper': 'div',
'alert': 'div',
+ 'buttonWrapper': 'div',
'button': 'button'
},
'elementOptions': {
'wrapper': {
- 'id': 'purr-wrapper',
'styles': {
'position': 'fixed',
- 'z-index': '99999999'
- }
+ 'z-index': '9999'
+ },
+ 'class': 'purr-wrapper'
},
'alert': {
'class': 'purr-alert',
@@ -22,6 +24,9 @@ var purr = new Class({
'opacity': '.85'
}
},
+ 'buttonWrapper': {
+ 'class': 'purr-button-wrapper'
+ },
'button': {
'class': 'purr-button'
}
@@ -29,9 +34,10 @@ var purr = new Class({
'alert': {
'buttons': [],
'clickDismiss': true,
+ 'hoverWait': true,
'hideAfter': 5000,
'fx': {
- 'duration': 1000
+ 'duration': 500
},
'highlight': false,
'highlightRepeat': false,
@@ -69,7 +75,19 @@ var purr = new Class({
},
'positionWrapper': function(position){
- if(position == 'left')
+ if($type(position) == 'object')
+ {
+
+ var wrapperCoords = this.getWrapperCoords();
+
+ this.wrapper.setStyles({
+ 'bottom': '',
+ 'left': position.x,
+ 'top': position.y - wrapperCoords.height,
+ 'position': 'absolute'
+ });
+ }
+ else if(position == 'left')
{
this.wrapper.setStyle('left', 0);
}
@@ -79,17 +97,22 @@ var purr = new Class({
}
else
{
- this.wrapper.setStyle('visibility', 'hidden');
- var measurer = this.alert('need something in here to measure');
- this.wrapper.setStyle('left', (window.innerWidth / 2) - (this.wrapper.getWidth() / 2));
- measurer.destroy();
- this.wrapper.setStyle('visibility','');
+ this.wrapper.setStyle('left', (window.innerWidth / 2) - (this.getWrapperCoords().width / 2));
}
+ return this;
+ },
+
+ 'getWrapperCoords': function(){
+ this.wrapper.setStyle('visibility', 'hidden');
+ var measurer = this.alert('need something in here to measure');
+ var coords = this.wrapper.getCoordinates();
+ measurer.destroy();
+ this.wrapper.setStyle('visibility','');
+ return coords;
},
'alert': function(msg, options){
-
var alert = new Element(this.options.elements.alert, this.options.elementOptions.alert);
if($type(msg) == 'string')
{
@@ -113,20 +136,30 @@ var purr = new Class({
if(options.buttons.length > 0)
{
options.clickDismiss = false;
+ options.hideAfter = false;
+ options.hoverWait = false;
+ var buttonWrapper = new Element(this.options.elements.buttonWrapper, this.options.elementOptions.buttonWrapper);
+ alert.grab(buttonWrapper);
options.buttons.each(function(button){
- if($defined(button.text) && $defined(button.callback))
+ if($defined(button.text))
{
- alert.grab(
- new Element(this.options.elements.button, this.options.elementOptions)
- .set('html', button.text)
- .addEvent('click', button.callback.pass(alert))
- );
+ var callbackButton = new Element(this.options.elements.button, this.options.elementOptions.button);
+ callbackButton.set('html', button.text);
+ if($defined(button.callback))
+ {
+ callbackButton.addEvent('click', button.callback.pass(alert));
+ }
+ if($defined(button.dismiss) && button.dismiss)
+ {
+ callbackButton.addEvent('click', this.dismiss.pass(alert, this));
+ }
+ buttonWrapper.grab(callbackButton);
}
}, this);
}
- if($defined(options.class))
+ if($defined(options.className))
{
- alert.addClass(options.class);
+ alert.addClass(options.className);
}
this.wrapper.grab(alert, (this.options.mode == 'top') ? 'bottom' : 'top');
@@ -154,10 +187,23 @@ var purr = new Class({
if(options.clickDismiss)
{
alert.addEvent('click', function(){
+ this.holdUp = false;
this.dismiss(alert, true);
}.bind(this));
}
+ if(options.hoverWait)
+ {
+ alert.addEvents({
+ 'mouseenter': function(){
+ this.holdUp = true;
+ }.bind(this),
+ 'mouseleave': function(){
+ this.holdUp = false;
+ }.bind(this)
+ });
+ }
+
return alert;
},
@@ -185,6 +231,11 @@ var purr = new Class({
},
'fadeOut': function(alert){
+ if(this.holdUp)
+ {
+ this.dismiss.delay(100, this, [alert, true])
+ return null;
+ }
var alertFx = alert.retrieve('fx');
if(!alertFx)
{
@@ -206,4 +257,32 @@ var purr = new Class({
alert.destroy();
});
}
+});
+
+Element.implement({
+
+ 'alert': function(msg, options){
+ var alert = this.retrieve('alert');
+ if(!alert)
+ {
+ options = options || {
+ 'mode':'top'
+ };
+ alert = new Purr(options)
+ this.store('alert', alert);
+ }
+
+ var coords = this.getCoordinates();
+
+ alert.alert(msg, options);
+
+ alert.wrapper.setStyles({
+ 'bottom': '',
+ 'left': (coords.left - (alert.wrapper.getWidth() / 2)) + (this.getWidth() / 2),
+ 'top': coords.top - (alert.wrapper.getHeight()),
+ 'position': 'absolute'
+ });
+
+ }
+
});
45 purr-example.css
View
@@ -0,0 +1,45 @@
+.purr-wrapper{
+ margin:10px;
+}
+.purr-alert{
+ margin-bottom:10px;
+ padding:10px;
+ background:#000;
+ font-size:13px;
+ font-weight:bold;
+ color:#FFF;
+ -moz-border-radius:5px;
+ -webkit-border-radius:5px;
+ -moz-box-shadow: 0 0 10px rgba(255,255,0,.25);
+ width:300px;
+}
+.purr-alert button{
+ font-size:10px;
+ margin:0 5px;
+}
+.purr-alert.error{
+ color:#F55;
+ padding-left:30px;
+ background:url(../images/error.png) no-repeat #000 7px 10px;
+ width:280px;
+}
+.purr-alert.success{
+ color:#5F5;
+ padding-left:30px;
+ background:url(../images/success.png) no-repeat #000 7px 10px;
+ width:280px;
+}
+.purr-alert.notice{
+ color:#99F;
+ padding-left:30px;
+ background:url(../images/notice.png) no-repeat #000 7px 10px;
+ width:280px;
+}
+
+.purr-element-alert{
+ width:200px;
+}
+
+.purr-button-wrapper{
+ text-align:center;
+}
75 purr.css
View
@@ -1,75 +0,0 @@
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0}
-body{
- font-family: sans-serif;
- background:#CCF;
-}
-h1,h2{
- font-size:24px;
- margin-bottom:15px;
-}
-h2{
- font-size:18px;
-}
-pre{
- overflow-y:auto;
-}
-pre.example{
- padding:5px;
- background:#FFA;
- margin:10px 0;
- border:2px solid #FF0;
-}
-pre.example:hover{
- background:#FF5;
- cursor:pointer;
-}
-pre.example:active{
- background:#FFF;
-}
-#container{
- padding:20px;
- background:#FFF;
- width: 600px;
- margin: 20px auto;
-}
-.section{
- padding: 20px;
- border:1px solid #CCC;
- margin-bottom:20px;
-}
-#purr-wrapper{
- padding:10px;
-}
-.purr-alert{
- margin-bottom:10px;
- padding:10px;
- background:#000;
- font-size:13px;
- font-weight:bold;
- color:#FFF;
- -moz-border-radius:5px;
- -webkit-border-radius:5px;
- width:300px;
-}
-.purr-alert button{
- font-size:10px;
- margin:0 5px;
-}
-.purr-alert.error{
- color:#F55;
- padding-left:30px;
- background:url(error.png) no-repeat #000 7px 10px;
- width:280px;
-}
-.purr-alert.success{
- color:#5F5;
- padding-left:30px;
- background:url(success.png) no-repeat #000 7px 10px;
- width:280px;
-}
-.purr-alert.notice{
- color:#99F;
- padding-left:30px;
- background:url(notice.png) no-repeat #000 7px 10px;
- width:280px;
-}
Please sign in to comment.
Something went wrong with that request. Please try again.