bootstrap-alerts.js MooTools version

by Tenderfeel

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<button type="button" id="get" class="btn">Click!</button>

JavaScript

var Alerts = new Class({
    
    Implements:[Options, Events],
    options:{
        selector: '.close',
        blockMessage:false,
        singleton:false,
        autoClose:true
    },
                    
    initialize:function(element, options){
        this.setOptions(options);
        
        this.element = element ? element : new Element('div', {'data-singleton':this.options.singleton, 'class':'alert-message hide' + (this.options.blockMessage ? 'block-message':'')});
        this.closeBtn = this.element.getElement('.close') || new Element('a', {'hreef':'#', 'class':'close','html':'&times;'}).inject(this.element);
        
        
        var that = this;
        
        this.closeBtn.addEvent('click', function(e){
            e.stop();
            that.close.apply(that.element);
        });
    },
    
    getElement:function(){
        return this.element;
    },
    
    close: function(){
        
        var supportTransition = (function () {
          var thisBody = document.body || document.documentElement
            , thisStyle = thisBody.style
            , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
          return support
        })();
        
        var transitionEnd;
        
        // set CSS transition event type
        if ( supportTransition ) {
          transitionEnd = "TransitionEnd"
          if ( Browser.Engine.webkit ) {
           transitionEnd = "webkitTransitionEnd"
          } else if ( Browser.Engine.gecko ) {
           transitionEnd = "transitionend"
          } else if ( Browser.Engine.presto  ) {
           transitionEnd = "oTransitionEnd"
          }
        }
        
        if(!(transitionEnd in Element.NativeEvents)){
            Element.NativeEvents[transitionEnd] = 2;
        }
        
        var element = this;
       
       ...