3rd Party Libraries: MooTools: Posts

Recent news round-up

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.

JavaScript:
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 "

drag to resize


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.

    Mootorial updated for Mootools 1.1

    Mootools 1.1 was released a few weeks ago and I've finally finished re-writing the Mootorial. You'll find executable examples of nearly every function and class found in the library. Just as before, it's a wiki (a wikitorial?) so you can jump in and fix typos or add clarity where you think it needs it.

    In addition to this update we've tidied up some of our libraries (in particular the Element extensions) and tested them for compatibility with Mootools 1.1. You can download these files from our SVN server, view the examples of them in action, and look through the docs. | Read the rest »

    CNET code now uses Mootools 1.1

    The CNET libraries have, until recently, required that you download a version of Mootools from our svn repository or use the dev version of Mootools. This was before Mootools 1.1 released, and it had some dependencies on code that wasn't in 1.0.

    As Mootools 1.1 is now out, you should download it from Mootools.net. I've removed Mootools from our SVN so now the only thing there is our code. You'll find clientside.moo.v1.1.packed.js in the /cat directory; this is a copy of ALL of Mootools 1.1 + ALL of our code. It's a big file, but it's complete if you just want to fool around with it.

    Mootools 1.1 hits the shelves

    Woot. Mootools 1.1 is out and it's awesome. Mootools r87 was the first stable release of the framework (end of Nov. of 06). Mootools 1.0 came out (r241) at the end of Jan. and was a huge improvement, adding functionality, documentation (I wrote those, thank you very much), and numerous bug fixes.

    There's a reason 1.1 has been 4 months in the making. Really, this is the first FULL release of the framework if you ask me. 1.0 signaled the point where the API stopped changing, so most of your code written for 1.0 will work fine with 1.1, but 1.1 has so much polish. 1.1 is revision 565.

    Numerous bugs are fixed, lots of new functionality is added, and the thing is blazing fast.

    Expect to see a new Mootorial soon. We'll also be updating our own code to 1.1. So far, it looks like all our stuff works fine with it, but we haven't tested thoroughly yet.

    Congrats to Valerio and everyone else who put a lot of work into this.

    new: Element.pin

    Here's a little Mootools extension that you might find useful. I'm using it my StickyWin classes to allow the user to "pin" it in place so it won't move if they scroll.

    JavaScript:
    $('fxTarget').pin()
    $('fxTarget').pin()

    drag to resize


    Execute the example, then scroll. That's it. You can unpin it if you like:

    JavaScript:
    $('fxTarget').unpin()
    $('fxTarget').unpin()

    drag to resize


    (note, in this example because of the way my little fxTarget helper works, unpin will break the drag behavior, but that won't happen in other instances).

    I've added .pin and .unpin to StickyWin, too.

    Cookie.Json.js (a Mootools version of CookieJar)

    UPDATE: This code is now in the plugins directory of the mootools library as Hash.Cookie.

    Over on Ajaxian there was a recent post about a little Prototype.js dependent class called CookieJar.

    Lalit Patel has created a JavaScript Library to use JSON to store data in cookies. JSON Cookies is built on top of Prototype and gives you a simple API to put and get JSON values into cookies

    I liked the idea, so I wrote a version for Mootools. The Mootools version is a little different and adds some functionality (for merging data) and it stores its info a little differently, but it's basically the same concept. | Read the rest »

    Mapping Dependencies in Javascript

    Just today I was asked over in the Mootools forums why we don't create a dependency map like the one in Mootools. My answer there was, basically, that the common code we publish here on clientside is but a small portion of our library. Our javascript spans numerous teams, sites, and applications, and keeping a map like this by hand is probably not practical.

    Then today on Ajaxian there's this post about T.J. VanSlyke's alterations to Dean Edward's Base.js to allow him to generate a dependency map of all the classes he writes. This isn't quite the same as mapping out file-by-file dependencies, but it's a start. Considering that Mootools is largely based on Base.js, this shouldn't be too hard to incorporate over there. | Read the rest »

    Upcoming changes to Mootools: version 1.0 to 1.1 changelog

    Valerio posted over on the Mootools forums today a list of changes in the upcoming 1.1 version of mootools. We've been hard at work on a lot of this stuff and I'm excited to see it come out. After this version, we anticipate working less on the core framework and more on plugins and widgets.

    ------------------------------------------------------------------------------------------------------------
    #Additions
    ------------------------------------------------------------------------------------------------------------

    • CUSTOM EVENTS!
    • $each also iterates objects
    • added Element::getStyles
    • added Element::hasChild
    • added Array::include
    • added Array::merge
    • added $merge, to merge objects
    • Dom.js uses XPATH in supporting browsers
    • the use of +'px' in setStyle is not required anymore.
    • added XHR::cancel

    ------------------------------------------------------------------------------------------------------------
    #Changes
    ------------------------------------------------------------------------------------------------------------

    • Object.extend is now $extend, still compatible
    • Object.native is now $native, still compatible
    • Element has been splitted in Element.Events, Element.Form, Element.Dimensions

    ------------------------------------------------------------------------------------------------------------
    #Elements Creation
    ------------------------------------------------------------------------------------------------------------

    • elements creation is easier: new Element accepts second param
    • elements creation for elements with name/type is easier, just use second argument.
    • setProperty for name/type are is supported anymore.

    ------------------------------------------------------------------------------------------------------------
    #Notable Fixes
    ------------------------------------------------------------------------------------------------------------

    • dom logic is highly optimized and its blazing fast
    • better sortables, no more flickering, removed Drag dependency
    • Fx.Slide now accepts borders and margins. Positioning is now possible.
    • Element::toQueryString in ajax now works as intended with all Form elements, including multiple selects.
    • Element::setStyle supports float
    • Element::setProperty and Element::getProperty now supports "for"

    ------------------------------------------------------------------------------------------------------------
    #Obvious Things
    ------------------------------------------------------------------------------------------------------------

    • code cleanup and optimization
    • bugs and incompatbilities fixed
    • mootools is faster, FASTER, FAAASTEEERRR

    ------------------------------------------------------------------------------------------------------------
    #TODO
    ------------------------------------------------------------------------------------------------------------

    • some bugs left
    • testing
    • css3 selectors (?)
    • ???

    Mootools Beginner’s Example

    If you are new to javascript or Mootools, you should:
    1) Read the docs
    2) Read the Mootools Tutorial

    Now, the problem with the Tutorial is that it shows you snippets of how Mootools work, but doesn't put them all together to show you how to actually do things on a page.

    So in an effort to help people see the right way to write code (well, at least how I write code; "right" is definitely subjective with javascript), as well as how to use the accordion and things like Fx.Slide, I've authored a simple little page that demonstrates these things and comments them line by line.

    So:

    3) View the source of the Mootools Beginner's Example

    Mootorial gets Array docs

    That's odd. Somehow I left out the section in the Mootorial about arrays. Weird. Anyway, it's there now.

    Categories

    Archives

    Links and whatnot