Create Custom Element Property Getters and Setters with MooTools

By  on  

One of the goals of the MooTools projects is to create very flexible methods by which developers may modify or extend the behavior of given classes. One example of that flexibility is the ability to customize the Element class' get and set methods for specified values.

The default behavior of the get and set methods for an object are to return/modify the given Element attribute. Take the following for example:

var alt = document.id('myImage').get('title');  //returns the image's title attribute text

The above code modifies the title attribute for the given element. Simple, of course, but then MooTools also uses the get/set methods to set and retrieve items that aren't element attributes:

var tag = document.id('myImage').get('tag'); //returns images's tag (img)

The above code retrieves the given element's tag name. How does MooTools do this? Simple: the Element.Properties object. You can set custom get and set handling by adding your desired string to the Element.Properties object. Here's an example:

Element.Properties.yourCustomGetOrSetName = {
	get: function() {
		//your custom programming to accomplish what should be returned...
		return yourReturnValue;
	},
	set: function(input) {
		//your custom programming to accomplish what should be set...
		//don't need to return anything
	},
	erase: function() { //erase works too!
		//programming to erase this
	}
};

Here's the code MooTools uses internally to accomplish the get('tag') ability:

Element.Properties.tag = {
	get: function(){
		return this.tagName.toLowerCase();
	}
};

So how could you use this? You could use Element.Properties to create a parent getter:

Element.Properties.parent = {
	get: function() {
		return this.getParent(); //returns the element's parent
	}
	//no need to do a setter or eraser
};
//.....
//usage
var parent = document.id('myElement').get('parent'); //returns myElement's parent element.

Pretty sweet, no? Have any other items you'd like to see in the get or set methods? Share!

Recent Features

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Spoiler Prevention with CSS Filters

    No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead...

  • By
    WebSocket and Socket.IO

    My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently...

Discussion

  1. I was asking yesterday on the mootools irc channel if there is a way to add a property to css properties so I can do something similar, tweening -webkit-box-shadow and -moz-box-shadow, only using one property, like this:

    el.tween('box-shadow', xxx);

    Do you know if this is possible?

  2. Bill

    How do I get just the parent id, not the parent?

  3. @Bill: Like this:

    var parent = document.id('myElement').get('parent').get('id');

  4. I know this article was from a while ago, but I’ve just discovered it and it is relevant to something I have been attempting recently.

    You asked if there are any other items we would like in the properties set and my suggestion is this:

    Element.Properties.children = {
        get: function() { 
            return this.getChildren();
        },
        set: function(value) {
            this.adopt(value);
        }
    };
    

    which would then allow you to instantiate more complex Element hierarchies as follows:

    new Element('div.background', { children: [
        new Element('div.container', { children: [
            new Element('div.window', { children: [ 
                new Element('h1', { text: 'A title' }),
                new Element('div.content'),
                new Element('div.bar', { children: [
                    new Element('button', { text: 'OK', events: { ... }}),
                    new Element('button', { text: 'Cancel', events: { ... }})
                ]})
            ]})
        ]})
    ]});
    

    With this you can easily see (and modify) the hierarchy instead of having to follow through all of the inject/adopt/grab calls.

    Regards,
    Dan

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!