Kevin’s Can

Tags


Filed under

javascript

 
February 3, 2010

MooTools driver for Rails 3 helpers

 

Rails 3 beta has just been released with its many goodies. Thanks to a lot of effort from a group of people, it's now possible to use Rails helper methods to create remote forms, links, and submit buttons without being forced to use Prototype. As a result, we have the Rails concept of unobtrusive JavaScript.

Instead of using inline Prototype code and evil evaluations, the helpers now add HTML5 data-* attributes that get picked up by a JavaScript driver. The driver can use MooTools, jQuery or any other framework of your choice. You can also write your own driver, just the way you like it.

Sample case of using a remote helper in Rails 3:

This is great news as I now can start using helpers together with MooTools. I've published a MooTools driver to the MooTools Forge, check it out. The sources can be found at my GitHub repo.

Also, feel free to fork!

Download driver here

Filed under  //   javascript   mootools   rails 3  
Loading mentions Retweet

Comments [0]

November 17, 2009

Basic JavaScript widgets bound to one namespace

I often have the same basic widgets in each application that I work on; some kind of loader, maybe a noticer, custom confirm dialog and so on. At first, I always had a global variable for each widget, making them accessible from any place in the code. But as the application grew, so did the number of widgets, leaving me with a rather polluted global namespace. To avoid this I now always use a basic object to create a namespace, where I reference further to each widget. Example:

Instead of having a global variable for each widget, there is only one, the mighty app. They're still accessible from anywhere though:

This can be expanded a lot, as discussed in a great post by Aaron Newton: http://www.clientcide.com/best-practices/singletons-and-event-arbiters/

Filed under  //   basic object   javascript   namespace   tip  
Loading mentions Retweet

Comments [0]

November 11, 2009

Number with delimiter in JavaScript

I have a form with figures that can be altered anytime. When numbers are changed, calculations are made with JavaScript to keep statistics current. The problem was, that the stats were first set server-side by the convenient NumberHelper#number_with_delimiter helper method that is provided by Rails, but when new calculations were made client-side, the pretty formatting was destroyed.

The solution was to shamelessly grab the number_with_delimiter logic and put it into a JavaScript function (a bit simplified).

Now I just have to run the new numbers through number_with_delimiter before updating the stats.

 

Filed under  //   helper   javascript   tip  
Loading mentions Retweet

Comments [1]

November 2, 2009

Apple-like scrollable showcase

I had a good JS session yesterday, building a widget for the marketing page of our freshly launched (Estonia only, right now) app Printfolder. Inspired by the the products browser at http://www.apple.com/mac/, we decided to try with something similar, but having panes with entirely different contents instead of displaying loads of coherent items. I named the class Scrollcase (of course it's powered by MooTools >= 1.2).

Live result (at the bottom of the page): http://www.printfolder.ee/

I wanted to keep the usage quite simple by not having strict rules about how the HTML should be structured in order to use Scrollcase, so the class generates as much elements as possible. Basically, something like this should be perfectly enough (with the complementary scrollcase.css file):

The container element does have to have a width defined, as the script relies on that all children have the same width, which is calculated from the container width.

If you like it, dig deeper into the sources at GitHub.

Filed under  //   apple   javascript   mootools   scrollable   slider  
Loading mentions Retweet

Comments [0]

October 16, 2009

Element.reload() w/ MooTools

Quick snippets like this makes my day so much more enjoyable. What I like about this one especially, is that I can move the url to the html template and have it set with a route (for other rails guys).

 

Filed under  //   ajax   javascript   mootools   tip  
Loading mentions Retweet

Comments [1]