MooTools TextOverlay Class

Some classes I\’ve come across do a lot and are inflexible. I\’ve seen some that are semantically incorrect when it comes to creating/using elements that the user has no control over. So I\’ve been mulling over the idea of rewriting/cleaning/correcting some of these classes that I come across in hopes to make them flexible and simple. Well, I decided to have a go at it, obviously

I understand it\’s like re-inventing the wheel. But in order to improve, we should always scrutinize work because a better solution may be available.

Here\’s my first attempt, with the MooTools class, TextOverlay. If you look closely, it\’s MooTools-More OverText modified to give the user more options.

What\’s the Difference?

You must be wondering what\’s different between the two. Well, I felt that positioning of the element should be handled by css, so I removed the reposition method. In OverText, the text-overlaying was created for you with MooTools and the default element was a \’div\’ with \’label\’ as your option. I did away with that and you now can either pass in an existing DOM element, or create one on the fly (though you\’ll need to inject it into the DOM yourself). OverText \’show\’ and \’hide\’ methods explicitly call\’s the text-overlay\’s show/hide methods and then fires custom events \’textShow\’ and \’textHide\’. I decided to give the user flexibility by removing the explicit call\’s to the text-overlay\’s and only firing the custom events.

Example

The HTML, CSS, and JavaScript below is an example of how to set things up.

HTML

    

        

            

            

                
                First Name
            
            

                
                Last Name
            
        
    

CSS

.container {
    margin:0 auto;
    width:500px;
}

input, label {
    border:0;
    display:block;
    font:11px arial, veranda, helvetica, sans-serif;
    height:16px;
    line-height:16px;
    margin:0;
    padding:0 5px;
    width:100%;
}

label {
    display:none;
    cursor:pointer;
    margin-top:-16px;
}

.fields {
    border:1px solid #333;
    margin-bottom:10px;
    overflow:hidden;
    padding:5px;
}

JavaScript

window.addEvent(\'domready\', function(){
    var input, label, fields = $$(\'#textoverlay_test .fields\').each(function(item){
        new TextOverlay(item.getElement(\'input\'), item.getElement(\'label\'),{
            onTextHide: function(element, text){
                text.setStyle(\'display\',\'none\');
                alert(\'hide\'); //added to differentiate from default textHide event
            },
            onTextShow: function(element, text){
                text.setStyle(\'display\',\'block\');
                alert(\'show\'); //added to differentiate from default textShow event
            }
        });
    });
});

Doing all this should simplify things and decrease the number of function calls. If you did a \’console.profile\’ in Firebug, I\’m sure you\’ll notice the difference between OverText and TextOverlay. Give it a try and let me know what you think! I\’ve set it up in Github.