Over on the Mootools forum digitarald (a contributor to Mootools) has posted date.js, a date parsing script that converts just about any date a user could imagine entering into a field into an actual date. I’m probably going to add this to our /mootools.extensions/Native folder and integrate it in with our own date.picker.js.

var date1 = date2 = new Date() = "Fri Jun 08 2007 14:42:57 GMT+0200"
date1.increment('day', 2) = " Sun Jun 10 2007 14:42:57 GMT+0200 "
date2.decrement('hour', 12) = " Fri Jun 08 2007 02:42:57 GMT+0200 "
date1.diff(date2, 'hour') = " 60 "
date1.getOrdinal() = " st "
date1.getDayOfYear() = " 161 "
date1.lastDayofMonth() = " 30 "
date1.getWeek() = " 24 "
date1.getTimezone() = " GMT "
date1.getGMTOffset() = " +0200 "
date1.format('db') = " 2007-06-10 14:42:57 "
date1.format('iso8601') = " 2007-06-10T14:42:57+0200 "
date1.format('rfc822') = " Sun, 10 Jun 2007 14:42:57 GMT "
date1.format('short') = " 10 Jun 14:42 "
date1.format('long') = " June 10, 2007 14:42 "
date1.format various strftime = " a = Sun ; A = Sunday ; b = Jun ; B = June ; c = Sun Jun 10 2007 14:42:57 GMT+0200 ; d = 10 ; H = 14 ; I = 02 ; j = 161 ; m = 06 ; M = 42 ; p = PM ; S = 57 ; U = 24 ; w = 0 ; x = 06/10/2007 ; X = 02:42PM ; y = 07 ; Y = 2007 ; T = +0200 ; Z = GMT "
Date.daysInMonth(2, 2006) = " 31 "
Date.isLeapYear(2006) = " false "
Date.parse('10/12/1982') = " Tue Oct 12 1982 14:42:57 GMT+0200 "
Date.parse('2007-06-08 16:34:52') = " Fri Jun 08 2007 18:34:52 GMT+0200 "
Date.parse('2007-06-08T16:34:52+0200') = " Fri Jun 08 2007 16:34:52 GMT+0200 "
Date.parse('today') = " Fri Jun 08 2007 14:42:57 GMT+0200 "
Date.parse('tomorrow') = " Sat Jun 09 2007 14:42:57 GMT+0200 "
Date.parse('yesterday') = " Thu Jun 07 2007 14:42:57 GMT+0200 "
Date.parse('next monday') = " Mon Jun 11 2007 14:42:57 GMT+0200 "
Date.parse('1st') = " Fri Jun 01 2007 14:42:57 GMT+0200 "
Date.parse('14th October') = " Sun Oct 14 2007 14:42:57 GMT+0200 "
Date.parse('24th May, 2007') = " Thu May 24 2007 14:42:57 GMT+0200 "
Date.parse('May 3rd 2006') = " Wed May 03 2006 14:42:57 GMT+0200 "

History Manager

Here’s another digitarald script that I’m eyeing with a bit of interest, a state manager for ajax environments. From his site:

“Ajax History”, “Back-Button”, “Ajax Bookmarks”, call it however you like. This is an unobtrusive MooTools plugin to allow history handling for multiple modules, try it out. It can handle back/forward history actions and bookmarks with the location hash.

Features

• Allow users to bookmark your ajaxified application in the current state
• Forward/Backward history browsing for your Accordion and every other
• Save states of One-Page-Applications over sessions
• Change easily default options and customize the behaviour with Events

New Mootools Blog

The Mootools site now has a nifty blog and it’s got some great stuff on it already. First up is a quick set of reference links to everything you need to learn javascript. Many of these things are stuff I’ve linked to in my side-bar or in various posts, but it’s a nice collection for sure.

SlickSpeed

You might have seen this show up on Ajaxian, but the Mootools gang released Slickspeed, a set of browser tests for dom selector comparisons for various browsers:

IE Debugger: My DebugBar

Here’s a new debugger for IE that looks promising. I haven’t fooled around with it yet but if anyone has or does, post a comment with your thoughts!

Google Gears

If you’ve followed ajaxian in the last two weeks no doubt you’ve seen this already, but Google launched Google Gears a week or two ago. In their words:

Google Gears (BETA) is an open source browser extension that enables web applications to provide offline functionality using the following JavaScript APIs:

• Store and serve application resources locally
• Store data locally in a fully-searchable relational database
• Run asynchronous Javascript to improve application responsiveness

Sounds promising. Here’s a nice little write up from Uriel Katz.

Fx.Morph

Was glancing through the demos at http://demos.mootools.net and stumbled on to Fx.Morph, a short little Fx class that transitions an element’s properties from one css class to another. I wrote something like this a few months ago but ultimately decided I didn’t really need it but now I’m giving it a second thought.

A while ago I authored a FormValidator class for Mootools and I just spent a few hours adding a lot more functionality to it. In a nutshell:

• Warnings – you can now author warnings for the user that won’t prevent the form from being submitted.
• Ignore Fields – if the context changes, you can ignore entire fields (for instance, if they are hidden)
• Stop/Start – you can toggle the validator on and off.
• Serialization – by default only one error is shown unless the user explicitly changes a value. This means that if a user tabs past a required field and it produces an error, when they back up to fill in that field, the field they just tabbed into won’t produce an error. If the user actually changes a value, the validation will produce an error if the field fails validation, regardless of the state of other errors. This is all configurable, and is just there to make the form a little less annoying.
• Instance Validators – previously, the only way to add a Validator was to add it to all the instances of FormValidator. Now you can add instance-specific validators. You can also extend FormValidator and add validators to all its instances. This way, you can add global validators (FormValidator.add), semi-global validators for Classes based on FormValidator (MyFormValidator.add) and specific instance validators (thisFormsValidator.add).

You can see this in action in the Wikitorial and dig into the options in the docs.

I added large close and confirm buttons to the default stickyWinHTML layout. You can make them read whatever you want and you can assign callback functions to them getting clicked. They are optional, and not visible by default. Note the section in the link above about how the onClose event is NOT the same as the onClose event for StickyWin.

That little “x” for closing the StickyWin is pretty small, and on pages like in our CMS, I think an easier to click close button would make it easier to deal with these things, especially if you end up opening them often. If you don’t specify a closeTxt or confirmTxt value, the buttons are not there. The callbacks are not required. Example:

new StickyWin({
  content: stickyWinHTML('the caption', 'this is the body', {
    width: '400px',
    closeTxt: 'close',
    confirmTxt: 'okey-dokey',
    onClose: function(){alert('closed!')},
    onConfirm: function(){alert('confirmed')}
})});

Over at Ajaxian today they have a post on miniajax.com which describes itself as “a showroom of nice looking simple downloadable DHTML and Ajax scripts”.

I’m not sure if they authored these scripts or if they just collected them all into slick looking examples. Some of the items link to other sites, but some they seem to host.

Some of these things I think would do well to write as plugins for the Mootools library but if Valerio (the gatekeeper for Mootools) doesn’t want it I think some of them would do well to be added to the CNET Library.

This goes hand-in-hand with the patterns project that we’re trying to kick off here. I think this page could really help inform that work…

Continuing in my current project of rewriting all the javascript on Download.com (pity me), I encountered the functions on the screenshots page. A quick rewrite and here’s my SimpleGallery class. It’s not super-duper fancy but it’s not meant to be. Read the rest of this entry »