Before anyone brings it up, this is not yet in the MooTools Forge, but it will be soon assuming I don’t become distracted by something else…

This probably works with most MooTools stuff post 1.2, you are smart and will figure it out.

Check it out here.

Download the example.

or have a look at the code:

Selectors.Pseudo.hash = function(hash){
	if(!$chk(hash))
		return this.get('href').contains('#');
	var currentHash = this.get('href').split('#')[1];
	return currentHash === hash;
}
 
 
Tips.Glossary = new Class({
 
	Extends: Tips,
 
	options: {
		'anchorClass':	false,
		'hideGlossary':	true
	},
 
	initialize: function(glossary, options){
		this.parent(options);
		this.glossary = $(glossary);
		if(!$chk(this.glossary))
			throw "Glossary not found / defined, quitting";
		if(this.options.hideGlossary)
			this.glossary.setStyle('display', 'none');
		this.indexGlossary();
		return this;
	},
 
	indexGlossary: function(){
		this.items = this.glossary.getElements('*[id]');
		this.anchors = new Elements();
		this.items.each(function(e){
			var anchor = $(document.body).getElement('a:hash('+e.get('id')+')');
			if($chk(anchor)){
				if(this.options.hideGlossary);
				anchor.addEvent('click', function(event){
					new Event(event).stop();
				});
				this.setTipContent(anchor, e);
				this.anchors.push(anchor);
			}
			if(this.options.anchorClass)
				this.anchors.addClass(this.options.anchorClass);
			this.attach(this.anchors);
		}, this);
	},
 
	setTipContent: function(anchor, target){
		anchor.store('tip:title', target.get('title'));
		anchor.store('tip:text', target.get('html'));
		this.fireEvent('settingContent', [anchor, target]);
	}
 
});

On a side note, notice the psuedo selector being added. This has been added because for whatever reason, the following CSS3 selector is goofy:

$(document.body).getElements('a[href="http://trickeries.com"]'); // works
$(document.body).getElements('a[href="#glossary-username"]');    // does not work

Anyone have any idea why?

Download

Documentation

I won’t go into detail here about what it does, because the google code project covers that pretty well. If you have any interest in dynamic css and/or javascript, I urge you to check it out. I have been using it on all of my projects lately, and I am enjoying the hell out of it.

I would love some developer feedback on this, so if anyone finds this interesting enough to use, please let me know about your experience, and open issues in the google code project as necessary. I would also love any feedback regarding making it faster / safer / better / whatever.

This is something I have discussed with the codeigniter developers, and they do not feel it is necessary to change:

“All global_xss_filtering does is run the Input::xss_clean() filter on user input for you automatically. It does not make assumptions about where or how that data will be used, and it would be improper to always format the content as needed for use in a form field.”

I do not feel that it is adequately documented that you need to make further alterations to input after the xss_clean, especially when it includes loading a helper file. This is not mentioned in the documentation for the input class.

At first I thought I was making undue assumptions, but a few quick injection attempts on other codeigniter run sites / projects, I realize that I am not the only one assuming.

ruin my browser!

You won’t be able to pop firebug up with f12, ctrl+t yourself a new tab, get yourself a fresh version of the page with f5, and you won’t even be able to view the source. When I ran into this for the first time, I thought my computer was fucked up.

Apparently, this is also just Firefox. I just tested it in IE and Chrome, and it appears to do nothing. Is this a XUL thing?

Does anyone else find this to be strange or annoying? Is this surprising or am I stupid? It just seems like this shouldn’t happen.

Keeping it non-technical, because someone else will rant about that stuff in more detail than I am willing to or can.

Stuff I am liking:

• Very fast
• It is very roomy feeling, not much “chrome” as it were.
• I don’t have to relearn shortcuts, they are almost all FFish
• I can open JavaScript bookmarklets in new tabs (this was not the case for FF as of version 3)
• Searching is awesome, with a bit of setup, its very few keystrokes, like: “w jelly” to search wikipedia for jelly
• View source pops up in a tab
• The animations are cute and informative without being annoying
• the launch page is handy (although Opera has had this for some time)
• Built in “appability” (make one tab appear as an application window, for something like google docs)
• Built in tab restore (I constantly close a tab and then realize I want it back)
• Built in and fairly complete dom inspector, console, and JS debugger
• The process manager is awesome.  Even when stuff gets out of hand, you can assumably fix it without losing your whole session
• The find dialogue is great, however it will take a moment or two to adjust to top-right vs bottom-left

Lets get critical*:

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:

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:

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();
	}
 
});

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:

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

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

(>^ – ^)> fire him up <(^ – ^<)