Message Class v1.0

This Message Class is a simple Mootools class that will send a message to the user in style! It’s much more elegant than what you could expect from the alert javascript method.

Version: 2.1



Details

Author
Jason Beaudoin
Current version
v1.0
GitHub
ColdFireDesigns/Message-Class
Downloads
2656
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • core/1.3: '*'
    • more/1.3.0.1:Array.Extras
    • more/1.3.0.1:Chain.Wait
    • more/1.3.0.1:Element.Position
    • more/1.3.0.1:Element.Shortcuts
    • more/1.3.0.1:Element.Measure

How to use

All that you have to do is call the class, and as a minimum, you set three basic parameters:

  • the icon you want to use (40x40);
  • the title of your message;
  • the message itself

...then you execute your command:

  • say();
  • tell();
  • ask();
  • tip();
  • waiter();

Some Key Features

  • It fades in and fades out on it's own;
  • Force a response with the tell method;
  • Ask a user a question and execute a callback function on a "yes" click;
  • Position the message anywhere on the screen;
  • Use it as an input for comments... very useful!;
  • Style it the way you wish using CSS;
  • Make it as wide as you need (through the options);
  • Can be dismissed automatically, on an event, on a delay, etc
  • Much more!... check it out.

Options

  • callingElement: (element: default to null)

  • top: (boolean: defaults to false) Set the message to come out from the top edge of the window. Defaults to the bottom.

  • left: (boolean: defaults to false) Set the message to the left. Defaults to right.

  • centered: (boolean: defaults to false) Set the message to the center of the window.

  • offset: (integer: defaults to 30) Determines the padding to give from the edge of the window frame.

  • width: (mixed: defaults to 'auto') The CSS value of your message. Pass a number to change it.

  • iconPath: (string: defaults to 'image/icons/') The path of the icons that you'd like to use.

  • icon: (string: defaults to null) The file name of your icon image. Note: your icon is expected to be 40 x 40! Can be changed in the CSS.

  • title: (string: defaults to null) The title of your message.

  • message: (string: defaults to null) Your message.

  • delay: (integer: defaults to 0) Delays the display of your message. Integer is interpreted in milliseconds.

  • autoDismiss: (boolean: defaults to true) The message will dismiss on it's own.Note: this is shut off automatically when user input is needed.

  • dismissOnEvent: (boolean: defaults to false) The message will dismiss on the mouseout event. Note: this is used automatically when an event is passed.

  • isUrgent: (boolean: defaults to false) Use the "urgent" transitioning to get the user's attention. Note: this is automatically used on the ask and tell methods.

  • callback: (string: defaults to null) Send a function in the form of a string to be fired on confirmation of an ask method.

  • passEvent: (event: defaults to null) Passing an event will make the message appear the your cursor location (offset by 5 px).

  • tipMode: (boolean: defaults to false) Tip mode is a short-cut that sets the autoDismiss and dismissOnEvent to true.

  • stack: (Boolean: defaults to true) This stacks multiple messages on top of the previous messages (or under, depending on where you’ve put your message) instead of placing them over (as in using a z-index value). Setting it to false will use a z-index.

  • fxTransition: (Fx.Transition: defaults to null) Set your own transition. The default transition will simply fade in.

  • fxDuration: (mixed: defaults to 'normal') Set the transition duration. Intergers are interpreted in milliseconds.

  • fxUrgentTransition: (Fx.Transition object: defaults to Fx.Transitions.Bounce.easeOut) Set your own urgent transition

  • fxOutTransition: (Fx.Transition object: defaults to null) Set the out transition. The default will simply fade out.

  • fxOutDuration: (mixed: defaults to 'normal') Set the transition duration. Intergers are interpreted in milliseconds.


Events

  • onShow: fires when the message shows
  • onComplete: fires when the message hides

Code Snippets

Say Method:

var saySimple = function(){
    new Message({   
        iconPath: "/images/",
        icon: "okMedium.png",   
        title: "Success!",      
        message: "You have successfully messaged your user." 
    }).say(); 
}

**Note: tell method is the same, except instead of say(), you write tell().

Ask Method:

var askSimple = function(){ 
    new Message({           
        iconPath: "/images/", 
        icon: "mediumQuestion.png",  
        title: "Question!",     
        message: "Do you know the meaning of life?", 
        callback: "saySimple()"     
    }).ask();  
}

Creating a comment pop-up:

This is a bit more complex, but it shows you the flexibility. What I do here is create a comment box and after the user presses "Send", a confirmation message appears!

document.id('commentLink').addEvent('click', function(e){
    var obj = new Element('div', {
        'id': 'dummy',
        'events': {
            'click': function(){
                sendComment();
                this.destroy();
            }
        }
    });
    new Message({
        icon: "speakMedium.png",
        iconPath: "/2010/images/",
        width: 300,
        fontSize: 14,
        passEvent: e,
        autoDismiss: false,
        title: 'Have a Comment?' ,
        message: '<textarea id="commentText" cols="3" rows="5" class="msgEditable"></textarea>',
        callback: obj
    }).say();
});
var sendComment = function(){
    new Message({
        icon: "okMedium.png",
        iconPath: "/2010/images/",
        title: "Received!",
        message: "We've received your comments, and we'll ...uhhh... get back to you."
    }).say();
}

Mootools Plugin Dependencies

Mootools Core 1.3 .

Mootools More 1.3:

  • Array.Extras;
  • Chain.Wait;
  • Element.Measure;
  • Element.Position;
  • Element.ShortCuts;

Notes

The styling is almost completely dependent upon the message.css included in the package. I do use CSS3, and I think it's about time! :)

It's been tested in IE 7+, Safari, Firefox, and Google Chrome. IE 6 is not supported.

It was developed on Mootools 1.2.4, and upgraded to 1.3 after the release of Mootools 1.3. Earlier versions can be found on http://www.coldfiredesigns.com. Any problems, contact me at beaudoin.jason@gmail.com.


Demo

You can find demos at ColdFire Designs: Message Class Demo

Simple Demo


Screenshots


Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus