Confirmer

docs

Confirmer is a class that lets you easily notify a user that something has changed. Typically, this occurs when you have a form input that updates as the user interacts with it. There my not even be a "save" button. Or perhaps it auto saves a draft like gmail or something.

The Confirmer class lets you tell the user this without much hassle, though it's very configurable.

There are two basic ways to use the class. One is to fade in and out a message already in the dom. Here's a quick example.

The HTML:

<input id="confirmerInDom" type="text">
<span id="confirmerInDomMsg" style="visibility: hidden; color: red; font-weight: bold">you updated the field!</span>
<script>
var conf = new Confirmer({
  msg: 'confirmerInDomMsg',
  reposition: false
});
$('confirmerInDom').addEvent('change', conf.prompt.bind(conf));
</script>

Try it out; just type something and then tab out of the field:

you updated the field!

This simple example doesn't really capture what the class can do though. The other way to use it is to position the message "over" the content relative to an element on the page. Here are a few examples:

var conf2 = new Confirmer({
  positionOptions: {
    relativeTo: "confirmerNearInput",
    position: "bottomLeft",
    offset: {x: 0, y: 10}
  }
});
$('confirmerNearInput').addEvent('change', conf2.prompt.bind(conf2));

Execute the example and then type something in the block.

The default location for the message is the upper right corner of the window:

/*this example uses the default message and 
  the default location: the upper right of the window*/
new Confirmer().prompt();

Finally, you can prompt different messages using the same prompter:

var conf2 = new Confirmer({
  positionOptions: {
    relativeTo: "confirmerThatChanges",
    position: "bottomLeft",
    offset: {x: 0, y: 10}
  }
});
$('confirmerThatChanges').addEvent('change', function(){
  conf2.prompt({msg: 'you entered ' + this.get('value')});
});