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

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Create Classy Inputs Using MooTools&#8217; OverText

    The MooTools More library is a goldmine. A treasure chest. Pirates booty, if you will (and, of course, I will). More is full of plugins that add a lot of class and functionality to your website with minimal effort.

  • By
    Vertically Centering with Flexbox

    Vertically centering sibling child contents is a task we've long needed on the web but has always seemed way more difficult than it should be.  We initially used tables to accomplish the task, then moved on to CSS and JavaScript tricks because table layout was horribly...

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!