Showing posts with label MooTools. Show all posts
Showing posts with label MooTools. Show all posts

Thursday, February 4, 2010

MooTools Users: Implement a Hash.sort method

I notice that Firefox seems to maintain the order of key:value pairs in objects when iterating over them, while Safari and Chrome seem to sort the object internally (within their respective JS engines).  I  noticed this especially when making select elements.  I store the options as an object, then when drawing the page, I iterate over that  object making option elements. 
For example, I am making a select box that lists users  alphabetically.  Users are identified in the database by an id: 

 
var foo = new Element('select').inject($$('body')[0]); 
var options = {5082:'User A', 5085:'User B', 5074:'User C'} 
$H(options).each(function(name,id){ 
  new Element('option', {text:name, value:id}).inject(foo); 

}); 
In Firefox the select box would present users in order: A,B,C, but in the others, users would appear in order by id: C,A,B.  A neat function  for tackling this sort of problem would be Hash.sort. 
 
/* 
        Function: Hash.sort 
                Takes {c:0, a:1, b:2} and returns [{a:1},{b:2},{c:0}] 
*/ 
Hash.Implement({ 
sort:function(fn){ 
        var out = [], 
                keysToSort = this.getKeys(), 
                m = this.getLength(); 
        (typeof fn == 'function') ? keysToSort.sort(fn) : keysToSort.sort(); 
        for (var i=0; i<m; i++){ 
                var o = {}; 
                o[keysToSort[i]] = this[keysToSort[i]]; 
                out.push(o); 
        } 
        return out; 

} 
}); 
____________ 
 
Usage: 

 
$H({'a':1,'z':2,'c':3,'b':4}).sort() 

 
Results In: 

 
[Object { a=1}, Object { b=4}, Object { c=3}, Object { z=2}] 
______________________ 

 
Then our select box routine becomes: 

 
var foo = new Element('select').inject($$('body')[0]); 
var options = {5082:'User A', 5085:'User B', 5074:'User C'} 
$H(options).sort().each(function(el){ 
  $each(el,function(name, id){ 
    new Element('option', {text:name, value:id}).inject(foo); 
  }); 

}); 
_______ 
 
Ruby programmers may recognize this method (http://ruby-doc.org/core/ 
classes/Hash.html#M002865).

Thursday, May 14, 2009

Why doesn’t Mootools have a String.truncate() method?

I need a quick way to truncate strings! I’m surprised that neither MooTools’ String.js or String.Extras.js has such a method.  They have so many super-awesome functions, methods and extensions (I especially love the Date.js extensions!!).  Yeah, I really love mootools, and I feel compelled to share with the community.  So anyway, I wrote out a simple, straightforward String.truncate() function:

String.implement({
    /**
     * String.truncate(max, atChar, trail)
     *
     * ++All parameters are optional.
     * @param max = (integer) maximum length of truncated string. Defaults to 100 chars.
     * @param atChar = (string) truncate at the last index of this string. If not found, just truncates to max length.
     *                 If null, does not search and truncates to max length.
     * @param trail = (string) what you want appended to the end of the returned string
     *
     * @author Michael Fuery, Fuery Solutions, Inc. http://www.fuerysolutions.com/
     *
     * +Requires MooTools Core 1.2.2
     */
    truncate:function(max, atChar, trail){
        var s = this.trim();
        if(s.length&lt;1) return '';
        if(!$defined(max)) var max = 100;
        else max = max.toInt();
        if(!$defined(atChar)) var atChar=' '; // break at space
        else if(atChar == null) var atChar=false;
        if(!$defined(trail)) var trail = '...';
 
        if(s.length &gt; max) {
            var i=0;
            s = s.slice(0,max);
            if(atChar){
                if((i = s.lastIndexOf(atChar)) != -1){
                    s = s.substring(0, i);
                }else{
                    s = s.substring(0, max);
                }
            }
 
            s += trail;
        }
 
        return s;
    }
});

Tuesday, May 5, 2009

World Peace via Mootools

MerusCase disposes of A1Law and Tritek using Mootools.

While I was at it, I created a one line algorthm to solve world peace using our JS framework of choice, Mootools.  Yes, we love the moo over here at Fuery Solutions!



If you can't quite make out what that says, here's a recap:

MerusInit = function(){
  $$('A1Law','Tritek').each(function(e){
     e.dispose();
  }
}


World.Peace = $$('evil').each(function(e){e.destroy()});