Posts tagged as "mootools":

Using HTML Snippets as Templates with MooTools

I’ve been working a great deal with JavaScript Objects which are used purely to store data but which need to be performantly converted into HTML code blocks. In order to achieve this I created a function which searches for specific delimiters and replaces the delimiters with the Object’s property of the same name.

The code to do this is fairly straightforward:

/* This code is released under a MIT license */
String.implement({
	template: function(props) {
		var regex = /%(\w+)%/g;
		var newStr = this.replace(regex,function replacer(mid) {
			var key = mid.substring(1,mid.length-1);
			var value = props[key];
			if (typeof value === 'string') {
				return props[key];
			} else {
				return '';
			}
		});
		return newStr;
	}
});

Using this function I can take a snippet of HTML and a JavaScript Object containing replacement information and easily turn the snippet into a useful String for user with the innerHTML property. For example, starting with the following HTML

<div id="template">
	<div class="test">
		<p>%testName%</p>
		<p>%testDescription%</p>
	</div>
</div>

I can execute this simple piece of JavaScript and get a useful HTML. The JavaScript and HTML output follow.

var newHtml = $('template').get('html').template({
	'testName': 'This is just a test',
	'testDescription': 'Please do not be alarmed this is a simple test'
});
$('template').set('html',newHtml);

The HTML will now look like the following

<div id="template">
	<div class="test">
		<p>This is just a test</p>
		<p>Please do not be alarmed this is a simple test</p>
	</div>
</div>

I’ve found this technique to be incredibly useful. Hopefully someone else will as well.

September 4, 2008

MooTools Builder Script

Back when MooTools 1.2 was released I decided I would upgrade/update a number of scripts I had written which were dependent on MooTools and then release them to the open source community. However, with work and some other things going on in my life it has taken a much longer time than anticipated to get things started. Plus there have been other distractions, I would call the subject of this post one such distraction.

I created a script called MooBuilder which examines the javascript objects loaded into memory to determine which components of MooTools are included when MooBuilder loads. The included modules the MooBuilder is aware of can be manually refreshed later if desired. In addition to testing what is already loaded the script will also include new MooTools modules and dependencies if the location to the source trees has been provided. For example I have mootools-core and mootools-more gits on my server so I can point the script at, for example, http://static.bryanjswift.com/mootools-core/Source and it will know where to find the appropriate scripts based on the script name. The script names are determined by the core and more builders and the dependencies are determined by a slightly modified version of scripts.json which is included in each of the source trees.

An example use of MooBuilder to include the Accordion script:


var builder = new MooBuilder('http://static.bryanjswift.com/mootools-core/Source',
                             'http://static.bryanjswift.com/mootools-more/Source');
builder.include('Accordion');

The last feature of the script is the ability to register your own scripts. Registering a script is done by passing the MooBuilder::register an object with a name, a path, a test function to determine if it is already included, and an array of dependencies. For example to register and then include the Fx.Position script I posted about previously I would:


var builder = new MooBuilder('http://static.bryanjswift.com/mootools-core/Source',
                             'http://static.bryanjswift.com/mootools-more/Source');
builder.register({
    'name': 'Fx.Position',
    'deps': ['Fx.Morph'],
    'test': function() { return typeof Fx !== "undefined" && typeof Fx.Elements !== "undefined"; },
    'path': 'http://github.com/bryanjswift/mootools-plugins/tree/master%2FSource%2FFx%2FFx.Position.js?raw=true'
});
builder.include('Fx.Position');

Obviously registering the scripts you need in every page and then including them seems silly, but I envisioned to use of the script to be creating a builder in the site’s main js file and registering all possible components and then on each page including just the ones needed for a given page. Another scenario would be having components themselves tell the builder what they needed before defining them.

I’m certainly open to any feedback!

August 16, 2008

MooTools and the Ongoing Changes

Since the release of version 1.2 of the framework there has been quite a vocal uproar in the user community, most obviously on the mailing list, about the removal of the forums. At first the forums were made read-only, then there were server issues and so the forums were just flat out unavailable. The forums have since came back online read only but a number of users are still unhappy.

The thing is the core developers have stated on a number of occasions the forums will not be coming back up for use. It’s in the MooTools Google Group / MooTools Mailing List it has been stated in the MooTools IRC Channel, hell it’s even in the MooTools 1.2 Official Release Notice and yet people continue to clamor for them to be brought back online.

I’ve stopped responding to these people and begun ignoring the threads as they come up because members of the community have already taken action. In particular daKmoR has set up an Unofficial MooTools Forum. Though still light in traffic it has no direct competitors other than the Google Group which apparently everyone hates but continues to use.

I actually prefer the Google Group because it gets delivered to my inbox and with the great free posting solutions for code pasting like Gist, Pastebin, MooTools Paste, Paste2, or even my own personal pastie there’s no excuse for not using something with syntax highlighting.

In addition to the changes with the forums Thomas Aylott has been making an effort to, amongst other things, update the MooTools GitHub Wiki with information about all kinds of related things. The pages on the wiki are the one containing MooTools support information and the one regarding converting from MooTools 1.11 to MooTools 1.2.

I guess this was a little of a rant, but I did want to help get word out about the unofficial forums and the updates which are being made to the wiki.

August 6, 2008