The MooTools website, the MooTorial and the mooWalkthrough all made appearances, giving extra credit to the third as my own project.

The presentation in all was 54 slides and lasted about 52 minutes with a Q&A segment. The content in the presentation was in fact enough to get the class to work on a not-too-rudimentary project involving MooTools the next day.

The Presentation

You can also download the PDF or the PPTX. (If I wasn’t poor, I would have used Keynote.)

Enjoy!

First, the error in question is formally given in Firefox/Firebug as follows:

missing argument 1 when calling function mutator.call
value = mutator.call(this, value);
mootoo…e-nc.js (line 1226)

I’m not a MooTools source code expert but I’ve read through it, so I remembered that that mutator business had something to do with class creation. That didn’t help much. I brought this to the attention of those in the IRC channel, and while most of the people were sleeping or busy, I got one helpful hand.

15:47:08 | <d_mitar> odd
15:47:11 | <d_mitar> works in chrome
15:47:49 | <ryanmr> I didn’t realize :) it didn’t used to work there either
15:48:51 | <d_mitar> if you set a breakpoint on the mutator call
15:49:01 | <d_mitar> and are very patient
15:49:08 | <d_mitar> you can trace it :D
15:49:24 | <ryanmr> I traced it back to Cookie but I never used Cookie :D
15:49:48 | <d_mitar> does mcl use it? hrm
15:49:54 | <d_mitar> shouldnt do
15:50:05 | <ryanmr> nope
15:51:05 | <ryanmr> when I step through the stack, I trace it back to the dispose method of cookie.

I certainly did attempt to add a break point to the mutator line, but it didn’t get me far. I ended up at cookie every time, so there again, I was stuck. So I asked on twitter too, but no luck there.

After working hard to patch some holes in my basement’s concrete, I came back to this conundrum. I decided to look over my code, and comment each class out as nessesary. That took quite a while, but I narrowed it down to an Observer class. It observes whatever items you attach to it, and then adds some events to reorder the items when certain conditions are met. If I commented out that specific class, the missing argument 1 when calling function mutator.call error would go away. I then tried to comment out all of the actual method bodies to see if I had some to do with it, but it appeared that wasn’t the case.

So then I went to jsfiddle to write up some cleaner tests. The first test was an almost exact copy of my project code, with a few minor (non-error causing) bits of logic absent. Once I hit run after writing it up, I got the error! So my enviroment wasn’t causing the problem either.

The second version was error free. I suspected reserved method names, similar to the way initialize is reserved for MooTools, had something to do with it. So I changed all of the method names, except initialize to end with an XXX. That clearly did something to solve the problem, as in Firefox, it was no longer showing that error at all. To narrow down which method was reserved or forbidden, I added the X’s to each one at a time. It appeared then that watch could not be a method without trouble.

So I wanted an even cleaner example, without all that classy cruft. So I ran the following two lines of code in the Firebug console:

var c = new Class({initialize: function(){}});
var x = new c();
console.log(x.watch);

That of course, confirm my suspicions. Firebug claimed that watch() was indeed a method – a native method. I tweeted about this with a screenshot. I ran the same code in Chrome (since the project code was working there, I wasn’t worried) and I tweeted another screenshot with the results – no problem.

It occured to me then to google firefox watch method. I made my way to the MDC’s watch page. It’s a non-standard apparently and the purpose is:

Watches for a property to be assigned a value and runs a function when that occurs.

I wouldn’t have expected that from some random method called watch.

The solution was now clear, I needed to rename my watch method. That is the fix. To fix the missing argument 1 when calling function mutator.call error when using MooTools in Firefox, do not use the watch method in your code. Instead, try a synonym such as: observe, look, peer, listen, view or stare.

That was my wonderful adventure for the 24th and 25th of June, 2010. Happy coding!

I was reading the documentation of Request to see if I missed something, because I thought this was core functionality. Apparently, there is something built into mootools more that does just that, it chains requests, literally forming a queue.

Straight from the options of Request:

‘chain’ – Any calls made to start while the request is running will be chained up, and will take place as soon as the current request has finished, one after another.

Adding that option to Request worked perfectly, so I was able to click on a bunch of table cells and let them render freely.

I think that there should be a note in Request.Queue that there is already functionality for repeated requests with the same Request object built into the core.

startUp, beforeSlide, afterSlide, end, startOver, mouseEnter, mouseLeave

But since I’m lazy, I didn’t want to explicitly write a function for each of those events and then put them in options argument. I’m just too lazy. So here’s what I did instead.

		gc = new GoodCarousel("good-carousel", {width: 495, height: 300, loops: 1});
		var events = ["startUp", "beforeSlide", "afterSlide", "end", "startOver", "mouseEnter", "mouseLeave"];
		var fn = function(event) {
			console.log(event);
		};
		events.each(function(evt, i){
			gc.addEvent(evt, fn.pass(evt));
		});

I made an array of event names and a function that simply accepts an argument and logs the argument to the console. The next part is where the events are actually added. In the each, gc.addEvent is used to add each event. The fn.pass(evt) allows me to pass the event name to the function I’m calling so that it can be logged.

Element.implement({
    
    takeOut: function(elementType) {
        var elementType = ($type(elementType) == "string" ?
                           elementType: "span");
        
        this.placeholder = ($defined(this.placeholder) ?
                            this.placeholder : new Element(elementType).setStyle("display", "none").addClass("takenOut_"+this.get("id")));
        
        this.placeholder.inject(this, "before");
        return this.dispose();
    },
    
    putBack: function() {
        if ( !$defined(this.placeholder) ) {return false;}
        this.inject(this.placeholder, "after");
        this.placeholder = this.placeholder.dispose();
    }
});

As you can see, I have the two methods. takeOut has an optional argument, elementType. You can specify a different tag-name (of an element) to be the placeholder of the original element after you take it out. It’s quite handy when you normally take out div tags but need to work on a tr of a table which don’t allow child span tags. A class is also added on too the placeholder just so you can see what it is supposed to be.

putBack isn’t so exciting, it just replaces the span with the original element. No big deal.
But take a look at the value of this, it’s not simply hiding an element, it’s completely removing it and still knowing where to put it if you need too.

GoodCarousel is a plugin made with Mootools 1.2.3. It is made to slide over to, not fade to, the next slide and uses inline elements to draw data for the slide titles, descriptions and images.

GoodCarousel Demo

What it does

It creates a carousel like those found on cNet but instead of fading, it will slide over. The carousel draws its data from inline elements: h3, p and img within in a div with a specific class. This allows you to use the carousel but also keep the data indexable.

Usage

You can see a fully working demo page here. There are a few steps you’ll need to follow in order to get it to work.

1. You need to determine the space you have for your slides. The space cannot change so fluid layouts probably won’t work. The demo page uses 495×300 pixel images for slides because that is the space alloted to it by the layout. I found the space by using the layout tab in firebug.
2. When you make your images, keep in mind that the title and description text will be displayed on the left side of the image so putting in the right-top corner is probably the best bet. Experiment with it.
3. Once you have your slides, you can easily build your html structure so GoodCarousel can draw data from it.

   <div class="carousel-data">
   <h3>Slide Title</h3>
   <p><a href="http://what.the.slide.links.to/">Slide description or subtext</a></p>
   <img src="path/to/slide-image.png" title="image title" rel="rel - for lightbox support" />
   </div>
   

   Each div with carousel data will make a slide in the carousel.

4. The carousel nav is automatically sized based on options you set when initialize GoodCarousel.

   	window.addEvent("domready", function() {
   		gc = new GoodCarousel("good-carousel", {width: 495, height: 300});
   	});
   

   Make sure you set the width and height you used for your images. GoodCarousel will take of how big to make the container and how small each nav should be.

You have to include the GoodCorners javascript file and css file in the head of your page, as always.

<link rel="stylesheet" href="path/to/good-carousel.css" type="text/css" />
<script src="path/to/mootools-1.2.3.js" type="text/javascript"></script>
<script type="text/javascript" src="path/to/good-carousel.js"></script>
<script type="text/javascript">
	window.addEvent("domready", function() {
		var gc = new GoodCarousel("good-carousel", {width: 495, height: 300});
	});
</script>

Remember to set the width and height that your slides will be.

Downloads

You can pick up GoodCarousel with the stylesheet, transparent background and double arrows on the demo page as a zip. The zip contains a compressed and uncompressed version for both the css and javascript. You can use the demo page for setup reference.

Notes

You may need to edit the stylesheet that accompanies GoodCarousel. You can easily customize the height of the nav, text color, hover color and so on by editing the uncompressed good-carousel.css file.

mooWalkthrough

Every school year I take a couple weeks and rewrite some of it. Last last year I bit the bullet; I restructured everything and made the new mooWalkthrough 1.2.x edition, which we all know and love today. I’ll have ample time this school year to try to make it even better. Right now though, there aren’t any solid plans. The mooWalkthrough is supposed to be a guide so people can begin to play with Mootools in a hand-in-hand kind of way, or at least, that’s the idea I came up with. So I’d like some feedback and some suggestions about the future of the mooWalkthrough.

• The structure of the content – The introduction of Mootools, General Knowledge, Elements, Events and Effects, is this good enough as an introduction to Mootools?
• Future Content – Perhaps another branch that introduces Mootools-more?
• Demos and Sample Code – There are new solutions such as jsbin and MooShell that can solve the demo part but, do the current code samples look fine?
• Wiki-Factor – The mooWalkthrough is basically a big installation of dokuwiki. Anyone want to help write some pages?
• Other Stuff – Anything you can think of to make it better? Other thoughts, comments?

Just leave a comment with your feedback or suggestions.

Thanks!

Good Corner Example

GoodCorners is a tiny Mootools plugin that can apply the CSS3 border-radius to elements using a unified syntax so you can have beautiful rounded corners.

Usage

GoodCorners can be used in a couple different ways. Both parameters are optional. Omitting both will automatically round any elements with the gc class already on them. If you don’t supply a specific border radius, the default is 10px. Here is the GoodCorners syntax:

GoodCorners.round( [selector] [, radius settings]);
/*
	Radius settings:
		radius
		topleft
		topright
		bottomleft
		bottomright
*/

// Examples:
// To round images in a gallery
GoodCorners.round("#gallery img");

// To do some extreme rounding
GoodCorners.round("#extreme", {radius: "100px"});

Notes

In all cases, you will need to define a border on the elements you wish to style with typical stylesheets.

/*for default use*/
.gc {
  border: 10px solid black;
}

/*assuming you have a white background, easy to change*/
#gallery img {
 border: 10px solid #000;
}

GoodCorners doesn’t support KHTML out of the box because Mootools doesn’t provide a build in method for detection, that I know of.

What it works in

GoodCorners works in browsers that supports the border radius property in CSS3 or least a proprietary variant of it. Browsers that support this property are: Firefox 3.5, Safari 4 and Chrome 2.

GoodCorners doesn’t do anything putting the directives into a stylesheet can’t do but GoodCorners makes it easy to apply rounded corners with javascript without worrying about those pesky style name variations. There is a full version and a compressed version. Really, the only reason you need GoodCorners is if you want to round elements from javascript.

Enjoy!

You can extend Mootools to have an Array.randomize method. It’s really easy to do.

Array.implement({
	randomize: function() {
		return this.sort(function() {return 0.5 - Math.random();});
	}
});

Now you can easily call randomize on an array and you’ll get a random array out of it. I think this should be added to Array.Extras in the Mootools More library.

I’ve been working on the next version of the mooWalkthrough, 1.2.x. It works with the 1.2.x version of Mootools.

I wrote it this time to be a lot shorter in terms of words. It shouldn’t take you more than an hour to read through the basics. That’s because I don’t spend time making jokes and filling up the page with long lines of useless junk. Just to give you a perespective on the size of the walkthrough now, the first version of the walkthough was about 40.2kB. The previous version, walkthrough-1.2, was about 43.8kB. The new walkthough comes in at a tiny 31.7kB. At this point in time, it’s also covering slightly more in terms of functionality.

I wrote the new walkthrough to also accomadate some more complex aspects of mootools, like Request. Is Request really so complex though? It is if you don’t know the basics. So, I split it up inside the walkthrough. It’s basically a big experiment. I haven’t written that part yet, I will soon though. I’d like to get the basic part up though first. I’d like to cover a lot of advanced uses of Mootools and of course some of the plugins that come with Mootools. (Of course, tons of plugins will come with Mootools soon via mootools-more, but I mean the original set like Fx.Slide.)

I’d like to have any feedback you have concerning the mooWalkthrough. I tried to make it not like a tutorial but instead a walkthrough of tools.

So that’s enough about me.