Problem

The issue is that usually an event is added and the default behavior is disabled.

1
2
3
4

$('myLink').addEvent('click',function(e) {
    e.stop();
    //do stuff
});

And if you just so happen to need to trigger the event manually, like so:

1

$('myLink').fireEvent('click');

You’ll get an error that the stop method doesn’t exist. This is because you’re just firing the function and an event argument is not being passed into the function.

Now, lets say you have a class and you wanted to manually execute a method that’s being attached to an event. An error would also occur in this case.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var myClass = new Class({
    // ... some code here..
 
    // the click event function that is attached..
    clicky: function(e){
        e.stop();
        //.. do some clicky stuff
    }
 
});
 
// create instance of class
var instance_of_myClass = new myClass();
 
// firing clicky function
instance_of_myClass.clicky(); // results in error because stop() does not exist

Solution

Here’s how you can solve both problems, and I learned this from Mark Obcena. This is very useful if you don’t want to modify the classes code or extend it. Pass in a dummy object with an empty stop function:

1
2
3
4
5

// this will fire the click event without an issue
$('myLink').fireEvent('click', {stop:$empty});
 
// this too will fire the clicky function on the instance without an issue
instance_of_myClass.clicky({stop:$empty});

Tada! Thanks David and Mark!

Check out all the details from the MooTools blog!

Core

• Element: MooTools compatibility mode: the $ function is only defined if no pre-existing $ function is found. If an existing $ function is found, you can use document.id()
• Element: changed internal instances of $ to document.id
• Core: fix for server-side MS JScript 5.x; makes MooTools more friendly for server side programming
• Class: Class doesn’t require Browser, removed from scripts.json
• Element: Fixes for set/get Property
• Element.Dimensions: fix for webkit body.scrollTop inconsistency, getBoundingClientRect used whenever possible (not just for Trident), renaming element.position to element.setPosition; adding docs for the method; alias is included in-line for compatibility
• Hash: Hash extend no longer uses the window if no arguments supplied
• Request: clearing Request readystate before calling success or failure;
• Selectors: Added :enabled pseudoselector, was in the Docs but not implemented.
• Docs: Fixed docs headers for first-child, last-child, and only-child.
• Internal: UnitTester test suite is now a git submodule
• Numerous small fixes, speed improvements, documentation tweaks, etc.

More

• Per the change in -core, $ is no longer used (uses document.id instead)
• Element.Measure: trying cssText solution for Element.expose (again).
• Element.Forms: swapping feature detection for browser support per
• Date: Massive refactoring of Date.js and Date.Extras.js
• Drag.Move: Fixing drag with grid issues
• IframeShim: altering zindex assignment in IframeShim to better ensure that it’s always underneath the shimmed element, updating Iframeshim’s empty document creation; fixes https issues in IE6
• FormValidator: reworking formvalidator scroll-to logic to be a little more efficient
• OverText: preventing overtext from focusing on inputs except when they are interacted with (so OverText.update() does not focus an input);now stops polling when elements are hidden (when polling is enabled)
• Fx.Scroll: adding scrollIntoView method – scrolls an element so that it is completely visible; if below the view, scrolls down until it is at the bottom of the screen, if above, scrolls up until it is at the top.
• JSONP: was calling (the deprecated) this.request instead of this.send during retries
• URI: Adding set(‘data’, obj) to set
• Assets: adding error callback for Assets.images
• Tips: removing dependency for Element.Measure for Tips; updating CSS class name in OverText
• Numerous small fixes, speed improvements, documentation tweaks, etc.

Great job MooTools-Dev team!

Well, you can also pull these properties by using an undocumented method in MooTools, as I just learned from Mark Obcena. How? It’s very simple as you will see.

Code

1
2

var selector_rules = new Fx.CSS().search('.some_class');
// returns an object with camelCase key's

See, isn’t that simple? Keep in mind that this doesn’t give you every single property. In my tests of running this code with Firebug on GameSpot.com, font-family and overflow properties were missing in the returned object when it clearly shows up in Firebug’s CSS panel.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="container">
    <form id="textoverlay_test" name="textoverlay_test" action="" method="post">
        <fieldset>
            <legend></legend>
            <div class="fields">
                <input id="first_name" type="text" name="first_name" value="" />
                <label for="first_name">First Name</label>
            </div>
            <div class="fields">
                <input type="text" name="last_name" value="" />
                <label for="last_name">Last Name</label>
            </div>
        </fieldset>
    </form>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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.

Features (straight from the horses mouth)

• Browse through Files and Folders on your Server
• Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
• View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
• Nice User Interface
• Upload Files via FancyUpload (integrated Feature)
• Option to automatically resize big Images when uploading
• Use it to select a File anywhere you need to specify one inside your Application’s Backend
• Use as a FileManager in TinyMCE
• Provides your Client with the most possible convenience ( ;D )

The back-end is in PHP but you can port it to whatever language you’re working with. The file manager is also released under the MIT-License. This is currently his RC1 (1st release candidate, for those not in the know). Head over to check out his demos!

Great job, Christoph!

Looks like there are some goodies from the Core:

MooTools 1.2.2 is a mainly a bug fix release but it also includes an almost entirely new Class.js. The reasoning behind this is that the old Class.js didn’t play nicely with some advanced usages of this.parent() present in the new MooTools-More. We already had the script ready and tested in the MooTools 2.0 branch so we simply “backported” it to 1.2.2. Other than providing the parent fixes, the new Class also features a much more robust inheritance model, especially when dealing with objects.

And something for the More:

One of the new features of MooTools-More, since the last RC, is that it is now possible access the previous state of overwritten methods of classes through Class.refractor.

And last bit of exciting news: quick/regular new feature bi-weekly releases.

Way to go team! Thank you for the awesome work!

Now, have you heard of Sly, the new selector engine on the block? No? That’s because Harald Kirschner just released it yesterday, 03/25/09, and I can’t tell you how awesome it is.. or can I?

I’ll start you off with a brief description… and graphs!

Sly is a turbocharged, cross-browser, library-agnostic JavaScript class for querying DOM documents using CSS3 selectors.

And turbocharged it sure is, just check out the stats!

The benefits:

• Pure and powerful JavaScript matching algorithm for fast and accurate queries
• Extra optimizations for frequently used selectors and latest browser features
• Works uniformly in DOM documents, fragments or XML documents
• Utility methods for matching and filtering of elements
• Standalone selector parser to produce JavaScript Object representations
• Customizable pseudo-classes, attribute operators and combinators
• Just 3 kB! (minified and gzipped, 8 kB without gzip)
• No dependencies on third-party JS libraries, but developers can override internal methods (like getAttribute) for seamless integration.
• Code follows the MooTools philosophy, respecting strict standards, throwing no warnings and using meaningful variable names

Use it in MooTools?

Yes, that’s right. You can use it in MooTools right now, though I don’t think it’s necessary since the MooTools selector engine is very good. But just like how David Walsh showed us how to use Sizzle and Peppy in MooTools, you can do the following to use Sly:

1
2
3
4
5
6
7
8
9
10
11

Window.implement({
    $Sly: function(selector){
        return new Sly(selector);
    }
});
 
// returns an array of all the anchors in the page
$Sly('a').search();
 
// returns the first anchor on the page
$Sly('a').find();

Now, you may be wondering whether doing this will allow you to use MooTools methods on the elements. Well, the good news is that you can because the MooTools Elements class applies the methods to all elements. Observe:

1
2

// returns the href of the first anchor
$Sly('a').find().get('href');

And lastly, Oskar Krawczyk posted how to replace the $$ function itself (thanks Oskar!):

1
2
3
4
5

Window.implement({
    $$: function(selector){
        return Sly.search(selector);
    }
});

Great job, Harald, great job indeed. Way to represent!

It’s simple because it’ll create something like:

1
2
3
4
5
6
7
8

<ul id="contextmenu">
	<li><a href="#edit" class="edit">Edit</a></li>
	<li class="separator"><a href="#cut" class="cut">Cut</a></li>
	<li><a href="#copy" class="copy">Copy</a></li>
	<li><a href="#paste" class="paste">Paste</a></li>
	<li><a href="#delete" class="delete">Delete</a></li>
	<li class="separator"><a href="#quit" class="quit">Quit</a></li>
</ul>

And display the following with a right click:

I really like that you can enable/disable the menu or individual items in the menu. Something I’m looking forward to in his next version is to be able to add/remove items.

Head on over to his post for more info, the files, and a demo.

Event delegation is a common practice where by you attach an event listener to a parent object to monitor its children rather than attach events to all the children. It’s far more efficient when you have numerous items on a page that you want to interact with.

The examples below should give you a better idea how awesome it is.

The Problem

Say you have A LOT of anchors and you want to add a click event to them. Normally you’d do this in several ways:

1
2
3
4
5
6
7
8
9
10
11
12

// First method
var links = $$('a.link');
links.each(function(link){
    link.addEvent('click', function(){
        //Do this stuff
    });
});
 
// Second method
$$('a.link').addEvent('click', function(){
    //Do this stuff
});

This is all fine but it’s not very efficient. You end up looping through all the anchors to add the event.

The Solution

With Event.Delegate you can attach an event to the parent, and have it handle everything. I’m going to use the example from Aaron’s post with a small addition to what I have above.

1
2
3
4
5
6

//Parent element handles the delegation, and here it's document.body
document.body.delegate('click', 'a.link', function(e){
    //Just like addEvent, you can pass in the event and stop it.
    e.stop();
    alert('you clicked a link!');
});

Conclusion

I really like Event Delegation. I’m really curious how fast it is though. Time to do a couple console.profile() to log the times.

I didn’t understand this part of his post:

Finally, you can pass in a function of your own. If your function returns true, then your method will fire. Note that the element passed to your method is not extended by MooTools yet for efficiency. You should avoid extending it yourself (by passing it through $) as this will affect performance. Instead, use the static methods on Element.

It confused me. I thought he was talking about the third argument, until he mentioned it’s a function that returns true. Passing in a function as a test looks something like:

1
2
3
4
5
6
7
8
9

//My test function
var testFunc = function(target){
    return target.match('a.link')
}
 
document.body.delegate('click', testFunc, function(e){
    e.stop();
    alert('you clicked a link!');
});

Thanks for writing about this Aaron. It’s a really great addition.