So I have managed to create a recursive mootools accordion, which is something I have wanted to get done for a long time.

The secret ingredient to get this made up was some CSS3 selectors and a bit of recursion.

You basically just pass in a class for the toggles, a class for the elements, and a parent container to reference.

The usage ends up fairly simple:

code!

new rAccordion('container', 'toggle', 'element');

In the example, container is the id of the parent that the classes are in, toggle is the class that each toggle has, and element is the class that each element has. A fourth argument can be passed, which is the options argument for the mootools Accordion class.

There are some kinks thatstill need working out. There are inherit problems with just jamming accordions inside of each other. The way mootools creates the accordion requires quite a bit of inline styles, which include defined heights. These heights become problematic when accordions inside accordions need to expand or contract, but their parent element has a defined height and overflow which will not allow the newly expanded portion to be seen.

I do have something of a solution in place, but it feels a little hacky, but I am not sure it will get any better unless I rewrite the accordion.

If anyone has any ideas on how to address this issue, please drop me a comment.

example

download w/the example

Here is the class:

code!

var rAccordion = new Class({
 
	initialize: function(container, toggleClass, elementClass, options){
		this.container = container;
		this.tClass = toggleClass;
		this.eClass = elementClass;
		this.options = options;
		this.selector = '#' + this.container + ' > .';
		this.makeAccordion();
	},
 
	makeAccordion: function(){
		new Accordion(
			$$(this.selector+this.tClass),
			$$(this.selector+this.eClass),
			this.options
		).addEvents({
			// The onActive and onComplete events added to the stack here to
			// attempt to address some of the css issues.
			'onActive': function(toggle){
				if(toggle.getParent().getStyle('height') != 0)
					toggle.getParent().setStyle('height', '');
			},
			'onComplete': function(a){
				if ($defined(a)) {
					var height = 0;
					a.getParent().getChildren().each(function(e){
						height = height + e.offsetHeight;
					});
					if(height != a.getParent().offsetHeight && a.getParent().offsetHeight != 0)
						a.getParent().setStyle('height','');
				}
			}
		});
		this.selector += this.eClass + ' > .';
		if($defined($$(this.selector)[0]))
			this.makeAccordion();
	}
 
});

UPDATE: This is useless. Please see this comment.

There have been a variety of occasions where I only want one instance of the Request object, but want to make sure that every request I attempt gets run without canceling another, or screwing around with onCompletes.  The following is a rather simple implement that takes care of this problem:

code!

Request.implement({
    queue: function(sendArg){
        if(!$defined(this.queued))
            this.queued = [];
        this.queued.push(sendArg);
        this.processQueue();
    },
    processQueue: function(){
		if(this.timer)
			$clear(this.timer);
		if (!this.check())
			this.timer = this.processQueue.delay(250, this);
		else {
			if ($defined(this.queued[0])) {
				this.send(this.queued.shift());
				this.processQueue();
			}
			else
				this.fireEvent('onQueueEmpty');
		}
    }
});

This will basically stack requests and send them in the order received. If there is no stack, the request will be sent immediately.

The usage is the same as the normal Request send method, however there is now an onQueueEmpty event to tell when all requests in the queue have been sent.

example

download w/the example

Sortable Slideable Saveable (sss) is a class I wrote up that allows you to have a list of elements that can be sorted, toggled, and the state of each will be saved each time a change is made, either using a cookie or a couple of ajax / json calls.

It can be seen in action in my sidebar to the right. You can drag / sort them by dragging the icons, and you can toggle them by clicking on the title of each. Any changes you make will be stored in a cookie, you can reload the page and they should be in the state you left them in.

I will probably update this and provide some detailed documentation shortly. If anyone has any questions, let me know. Also if anyone has any input on how to make it better, let me know.

another example

download w/the example

I absolutely love the brilliant Valerio’s SlickSpeed, which is a speed/validity selectors test for Javascript frameworks.

It’s not so up to date at the moment, so I thought I would put one up on trickeries! with the latest and greatest from MooTools, jQuery, Prototype, and Dojo.

Everyone knows where my heart lies, however all of these libraries have grown by leaps and bounds. The teams behind these frameworks are truly amazing, and I tip my imaginary hat to each.

I got a little bored this weekend, and decided to make myself a toy to play with rainbows, and give it a stupid name.

There is actually some pretty cool stuff going on, it is written in javascript(w/some sweet sweet mootools), and a little bit of php for automagic.

I wrote a class to make the rainbow, and one for the sliders you see. If you think either would be useful, they are included in the head.