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
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    Display Images as Grayscale with CSS Filters

    CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...

  • By
    MooTools Accordion: Mouseover Style

    Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...

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!