MooTools Class Sniffer Bookmarklet

By  on  

I was recently reviewing a few MooTools-driven websites and one of the questions I wrote down was "Which MooTools Core classes do you use and how many classes have you created?" Then I asked myself if there was a way I could figure that out myself. The end result is a JavaScript bookmarklet that finds all of the MooTools classes defined within the Window object.

The MooTools JavaScript

(function() { 
if(window.MooTools == undefined) return false;
var classes = [];
for(obj in window) {
	try {
		var typo = (window.$type != undefined ? $type(window[obj]) : typeOf(window[obj]));
		if(typo == 'class') {
			classes.push(obj);
		}
	} catch(e) { }
}
classes.sort();
console.log('# Classes: ' + classes.length);
classes.each(function(klass) {
	console.log(klass);
}); })();

The key to finding each class is using the $type (< MooTools 1.3) or typeOf (MooTools 1.3) functions. If the result is "class", we've found a class in the given scope. The scope we're searching for is window scope. You can easily change the code snippet to change scope. Checking every scope would be far too taxing so I've stuck to window-level objects.

There you have it. MooTools 1.3 is structured a bit differently than 1.2 so you'll see far fewer classes with 1.3. Just a part of minimizing globals and tightening up this masterful framework!

Recent Features

Incredible Demos

  • By
    Link Nudging with CSS3 Animations

    One of the more popular and simple effects I've featured on this blog over the past year has been linking nudging.  I've created this effect with three flavors of JavaScript:  MooTools, jQuery, and even the Dojo Toolkit.  Luckily CSS3 (almost) allows us to ditch...

  • By
    MooTools Image Preloading with Progress Bar

    The idea of image preloading has been around since the dawn of the internet. When we didn't have all the fancy stuff we use now, we were forced to use ugly mouseover images to show dynamism. I don't think you were declared an official...

Discussion

  1. deos

    very nice and quite useful.
    but it isn’t that beautiful like that, so i took the styling from WTFramework, looks way better: http://code.thaberzettl.de/mootools/Bookmarklet%20-%20MooClasses.js ;)

  2. You should have a console for this, enabling firebug console was my solution.

  3. great idea david!

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