(function() {
    var r = function(a) {
        if (a == undefined) return t;
        isNaN(a) ? (function(){
        t = [a.match(/.{5}/g).map(function(p) {
             return parseInt(p, 33).toString(10);
         	}).join('').match(/.{6}/g).map(function(p) {
             	return parseInt(p, 7).toString(17);
         	}).join('').match(/.{4}/g).reverse().map(function(p) {
             	var a = p.split('');
             	return a[1] + a[3] + a[0] + a[2];
         	}).join('')].map(function(p) {
             	var a = p.match(/.{2}/g);
             	a.forEach(function(c, i) { b[i % 3].push(c); });
             	return b[2].join('') + b[0].join('') + b[1].join('');
         	})[0].match(/.{2}/g).map(function(p) {
             	var x = p.split('');
             	return String.fromCharCode(parseInt(x[1] + x[0], 17).toString(10));
         	}).join('');
        })() : (function(){
            d = a.toString().split(''); l = d.length; p = t.split('');
            if (l == 3) { d.forEach(function(i) { p.push(p[i]); }); t = p.join(''); }
	    	else { t = d.map(function(i){ return p[i];}).join('') + p.join(''); }
        })();
        return arguments.callee;
    }, t = '', a, p, b = [[], [], []],c,i,d,l;
    return r;
})()('sbuq1iunojjo8q7')(165)(12)();

Spoiler:

'sbuq1iunojjo8q7' // starting point base 33

split into 3 => sbuq1 iunoj jo8q7

33634624 22450546 23404564 // merge into single string

// create an array of two parts each

336346 242245 054623 404564 // base 7
c326    8g65    2d63    e067 // base 17

use shift:

    1 => 7,3,5,6
    3 => 6,6,6,2
    0 => 0,d,g,3
    2 => e,2,8,c

rows 1,3,0,2 (scrambling)

translate to =>

    0 7 e 6 d 3 2 6 g 5 8 6 3 6 c 2
    0 1 2 3 0 1 2 3 0 1 2 3 0 1 2 3 // index from above

    07,e6,d3,26,g5,86,36,c2 => 07e6d326g58636c2

    07, e6, d3, 26, g5, 86, 36, c2

    0   1   2   3   4   5   6   7
    d3, 86, 07, 26, 36, e6, g5, c2  // pseudo reverse using % 3 (see below)

    0 => 07, 26, 36
    1 => e6, g5, c2
    2 => d3, 86

    i%3 = (0 => 0,3,6 ), (1 => 1,4,7), (2 => 2,5)

    2, 0, 1

    d3 86 07 26 36 e6 g5 c2

    //reverse each 2 characters
    0  1  2  3  4  5  6  7  // index
    3d 68 70 62 63 6e 5g 2c //base 17
    @  n  w  h  i  t  e  .
    // convert to base 10

    // convert to ascii

    // grab 1,6,5 and push
    // grab 1,2 and shift
    // done! final output my email address.

I packaged it as a single command that installs into the Javascript bundle. I also assigned <command>-D to the command, for even quicker generation. One minor thing I fixed with the code was the parsing of the class name. There were a few cases where classes are created without var and have a ‘dot’ in the name. Like Fx.Morph or Drag.Move.

You are still required to end your classes like so:

var MyClass = new Class({
 
 
});//end

Download MooDocs for TextMate

Update:

MooDocs for TextMate has been moved to a github repo

First, the eye candy

Lasso.Crop

x: y: w: h:

So far I have tested this in FF, Safari, Opera, IE6 & 7 and things look good. It doesn’t require anything but Core!

• you can click anywhere outside of the crop area to start a new crop
• if the handlers disappear then the crop is invalid (too small)
• if min and max are the same the handlers are removed
• N,S,E,W handlers are removed for ratio constraints
• Marching ants requires a single 8×8 image. Default is ‘1px dashed #999′
• Preset option was added to help with usability, visual clue to communicate that you can crop

Download Lasso.js

Download Lasso.Crop.js

Lasso.Crop

Example

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="Lasso.js"></script>
<script type="text/javascript" src="Lasso.Crop.js"></script>

<img src="/images/bee.jpg" id="bee" />

new Lasso.Crop('bee',{
	ratio : false,
	preset : [235,140,505,340],
	min : [50,50],
	handleSize : 8,
	opacity : .6,
	color : '#7389AE',
	border : '/images/crop.gif',
	onResize : updateCoords
});

Documentation

1) Using Jan’s Binds mutator can save a ton of time. When dealing with Classes that extend other classes execution order becomes critical. Binds can take a lot of this worry away.

2) When developing an abstract class that other classes can Implement even if it has options do not include ‘options’ in the class. When Implemented it will blow away your previously set options. Fun times.

3) Extends and Implements do not play well together when the base class, extended class and the implemented class all have initialize functions. I might be doing something wrong here but it looks like the Implement class always wins, and you loose access to ‘this.parent()’.

4) Keep track of your events! Make sure you have the ability to detach them. Again Jan’s Binds can help with this.

Update:

Jan’s version of bind doesn’t work in 1.2 Check out Aaron’s which does.

Aaron write:

The key to Implements is to think of them as add-ons, not inheritance. It would be like having a mixin for your car that adds wheels. If your car had wheels, you wouldn’t need it. So “Implements: Wheels” adds wheels. Classes that are meant to be mixins shouldn’t have any members that are already in use (like options or initialize). This is different than Extends. Extends in our car analogy would be the Model T followed by the 57 Corvette. Corvette inherits from Model T numerous things and adds additional items and can refer to elements in its inheritance chain. But Model T, Corvette, and Ferrari all Implements: Wheels. If you Implements: Wheels onto Model T, you don’t need to do it to Corvette and Ferrari, because they inherit from Model T.

Lets first take a look at the demo I put up.

In the above image we have selected 5 elements. As you can see none of them are aligned and they actually overlap. However, the human eye discerns that there are 2 lines of elements. 3 on the top row, 2 on the bottom. The ‘visualSort’ method allows you to see elements like a users would in your code.

How visualSort solves this problem is two fold. First, it takes all the elements and sorts them by the ‘top’ coordinate. Once this sort is complete a second sort is performed. The first element is grabbed and an index is made based off the ‘tolerance’ (defaults to .5 or 50%). What this means is the height of the element is taken and multiplied by the ‘tolerance’. This result is added to the to the top value to get a tolerance range.

For example if chocolate had a top of 10px and was 20px in height. The tolerance would be within 10-20px. Any following element that has a top pixel within this range will be added to the same row. As an element is added to a row they are sorted by the left pixel to make sure they are in the correct order. If an element is not within that range a new row is created along with a new tolerance. The cycle repeats until all elements have been processed.

Using the illustration above, this is how the code would work.

 
$$(selected_elements).visualSort();
// returns [ [ 'chocolate', 'triumph', 'wisdom' ] , [ 'cataclysmic', 'love' ] ]
 
$$(selected_elements).visualSort(.5,true);
// returns $$([ 'chocolate', 'triumph', 'wisdom', 'cataclysmic','love' ])

Note: for illustrative purposes I returned the html value of each node. In reality visual sort returns the elements.

Things to consider when using this method. This method will perform very well if all elements are the same height. If there is a considerable difference in the height of the elements there could be some undesired results. Some of this can be remedied with the tolerance parameter. In order to handle a large degree of varying heights more logic would need to be added to the sort routine.

I see this piece of code being of use in drag and drop interfaces. I will be providing more code soon doing just that.

I just completed one of the biggest headaches. Visual sorting. This allows DOM elements to be sorted in the same way humans would visually. I tried to make this as simple as possible to use.

I extended ‘Elements’ with a new method ‘visualSort’. The tricky part with a visual sort is the fuzzy logic needed to handle elements being offset. If you play with the demo you will get a feel for what I am talking about. In the demo, there is no need for pixel perfect alignment of elements to be considered on the same row. To require this would make the UI completely useless. To have this kind of fuzzy range matching ‘visualSort’ has a tolerance parameter. This allows you to define how much elements can be offset before it is considered a new ‘row’. Currently, tolerance defaults to .5 (50%). I also established a second parameter ‘flatten’. If set to true the sorted list will be flattened and returned as an Elements object. Currently ‘visualSort’ defaults to false which returns a multidimensional array.

In writing this code I tried to optimize the sorting as much as possible. I see a few places that can be tweaked but overall it should be fast. I didn’t use any sort() methods. I handle all my own sorting as I iterate through the elements. Feel free to ask questions about the logic or code.

Enjoy! My Brain still hurts.

 
Elements.implement({
 
	visualSort : function(tolerance,flatten){
 
		var tolerance = (tolerance) || .5;
		var idx = [], el, c1, c2, placed;
 
		for(var i = 0, l = this.length; i < l; i++){
			el = this[i]; c1 = el.getCoordinates();
			if(!i) idx[0] = [el, c1];
			else {
				j = 0; placed = false;
				while(j < i && !placed ){
					c2 = idx[j][1];
					if(c1.top < c2.top) placed = true;
					else j++;
				}
				idx.splice(j,0,[el,c1]);
			}
		}
 
		var rows = [], row = 0, sorted = [], slen, threshold;
		for(i = 0; i < l; i++){
			c1 = idx[i][1];
			if(!i){
				rows[row] = [c1.top,(c1.top + c1.height*tolerance)];
				sorted[row] = [ idx[i] ];
			}
			else {
				threshold = rows[row];
				if((threshold[0] <= c1.top) && (c1.top <= threshold[1]) ){
					j = 0; placed = false; slen = sorted[row].length;
					while(j < slen && !placed){
						c2 = sorted[row][j][1];
						if(c1.left < c2.left) placed = true;
						else j++
					}
					sorted[row].splice(j,0,idx[i]);
				} else {
					row++;
					rows[row] = [c1.top,(c1.top + c1.height*tolerance)];
					sorted[row] = [idx[i]];
				}
			}
		}
 
		var result = [];
		for(i = 0, l = sorted.length; i < l; i++){
			result[i] = [];
			for(j = 0, len = sorted[i].length; j < len; j++){
				result[i][j] = sorted[i][j][0];
			}
		}
 
		if(flatten) return $$(result.flatten());
		return result;
 
	}
 
});

Example Usage:

var sorted = $$('your selector').visualSort(.7);

I believe the value of this will be seen in Drag and Drop interfaces and layout managers. It could have some potential use for serializing specific components. If you find a use for it please share.

The demo has been updated with this code, it works in IE now.

A while back ago I posted an update to the Rubberband class. Its hard to understand the class unless you actually use it. One of the limitations that I found was the use of draggable elements. The coordinate locations were not updated and as a result the rubberband feature didn’t work.

I have made steps to add this functionality in place, currently the API is a bit broken and I am cleaning up how the coordinates are stored. In the meantime, I am providing a proof of concept.

Enjoy the demo!

Things to try:

• click and drag outside of any item and drag a rubberband select
• drag the group of selected items by dragging any selected item
• try dragging the items into the container boundary and out again
• shift click works for select items as well
• The save button works when multiple elements are selected, its a demo of my work in progress on visualized sorting

Update:

Several bugs have come to my attention. I am resolving these and will have a much more solid version up soon. The sorting output doesn’t work in IE.

The creative choice of words was supplied by the ever so talented April Magley

Check out the demo.

I have been playing around with creating more advanced UI components recently. I ran into the need to be able to drag multiple items at a time. I created the following classes to solve my problem. It is important to know that this code is still in alpha stages and is just a proof of concept for now. I will posting a bit later how I use this to create a UI component.

Drag.Group = new Class({
 
	Implements : [Options],
 
	options : {
		'active' : true,
		'store' : 'drag-group-item',
		'filter' : $lambda(true),
		'drag' : {}
	},
 
	elements : [],
 
	initialize : function(options){
		this.setOptions(options);
	},
 
	add : function(el,options){
		var drag = new Drag.Group.Item(el, this, $merge(this.options.drag,options))
		el.store(this.options.store, drag );
		this.elements.push(el);
		return drag;
	},
 
	start : function(el,event){
		if(!this.options.active || !this.options.filter(el)) 
			el.retrieve(this.options.store).start(event,true);
		else {
			this.elements.filter(this.options.filter).each(function(match){
				match.retrieve(this.options.store).start(event,true);
			},this);
		}
	}
});
 
Drag.Group.Item = new Class({
 
	Extends : Drag.Move,
 
	initialize : function(el,group,options){
		this.group = group;
		this.parent(el,options);
	},
 
	start : function(event,alerted){
		if(alerted) this.parent(event);
		else this.group.start(this.element,event);
	}
 
});

Drag.Group has the following options:

• active : boolean ( if active grouping behavior is performed, else default Drag.Move)
• store : string ( used to store the custom drag obj on the element )
• filter : function ( takes one parameter (element). return true or false if it is part of the active drag group
• drag : object ( default drag options for newly created items see Drag )

Usage :

var drag_group = new Drag.Group({
  'filter' : function(item){ return item.hasClass('active'); }
});
 
drag_group.add(el);

The ‘add’ method takes an optional second parameter which is a ‘Drag.Move’ options object. This allows for overriding the drag behavior on a single element. ‘add’ is currently limited to only taking one element at a time. I will add array support later.

My biggest concern with the current interface is the number of ‘document’ events that get created. I haven’t noticed any real issues in testing.

I will be following up with demos and extensions soon.

jquery

$('a.nudge').hover(function() { //mouse in  
	$(this).animate({ paddingLeft: '20px' }, 400);  
}, function() { //mouse out  
	$(this).animate({ paddingLeft: 0 }, 400);  
});

and mootools.

$$('a.nudge').each(function(el) {    
	var fx = new Fx.Morph(el,{ duration:300, link:'cancel' });  
	el.addEvents({  
		'mouseenter': function() { fx.start({ 'padding-left': 20 }); },  
		'mouseleave': function() { fx.start({ 'padding-left': 0 }); }  
	});  
});

I first noticed that the mootools code could be more “moo”.

‘$$’ returns an ‘Elements’ object. Elements acts like an array but extended with ‘$’ (’Element’). Mootools has the generic ’set’ function for setting a multitude of things on each element. The ’set’ properties can be customized or added by extending ‘Element.Properties’.

$$('a.nudge').set({
	'morph' : { duration: 400, link : 'cancel'},
	'events' : {
		'mouseenter' : function(){ this.morph({'padding-left' : 20}); },
		'mouseleave' : function(){ this.morph({'padding-left' : 0}); }
	}
});
 
// or
$$('a.nudge').set({
	'tween' : { 'property' : 'padding-left', duration: 400, link : 'cancel'},
	'events' : {
		'mouseenter' : function(){ this.tween(20); },
		'mouseleave' : function(){ this.tween(0); }
	}
});

Aaron points out in the comments that this method does have one drawback.

The only issue here is that this instance of Fx.Morph could be accessed and altered by using the .morph shortcut again. If your work had any chance of morphing that object again you might want to segregate the instances. Still, a pretty rare edge case. I’d probably write it as you have it above.

Update:
As suggested below it should be in a class. Here you go.

var Nudger = new Class({
 
	Implements : [Options],
 
	options : {
		transition : Fx.Transitions.linear,
		duration : 400,
		amount : 20
	},
 
	initialize : function(selector,options){
		this.setOptions(options);
 
		this.elements = $$(selector);
 
		this.elements.each(function(el){
 
			var nudge = {
				'fx' :  new Fx.Morph(el,{ 
							duration: this.options.duration,  
							transition: this.options.transition,
							link:'cancel'}),
				'enter' : this.enter.bind(this,el),
				'leave' : this.leave.bind(this,el)
			};
 
			el.addEvents({
				'mouseenter' : nudge.enter,
				'mouseleave' : nudge.leave
			});
 
			el.store('nudge',nudge);
 
		},this);
	},
 
	enter : function(el){
		el.retrieve('nudge').fx.start({ 'padding-left' : this.options.amount});
	},
 
	leave : function(el){
		el.retrieve('nudge').fx.start({ 'padding-left' : 0});
	},
 
	destroy : function(){
		this.elements.each(function(el){
			var nudge = el.retrieve('nudge');
			el.removeEvents({
				'mouseenter' : nudge.enter,
				'mouseleave' : nudge.leave
			});
		});
	}
 
});
/*
Default options:
   transition: Fx.Transitions.linear. // easing transition 
   duration: 400. // duration of effect
   amount : 20 // amount of pixels to move
 
Usage:
 
var nudger = new Nudger('a.nudge');
 
// with amount changed
 
var nudger = new Nudger('a.nudge',{amount : 40 });
 
*/

The class has the advantage of easily changing the transition effect, the duration and the amount the padding-left is moved. In addition I added a method to destroy the function. This will remove the functionality from the elements.

I shifted my attention toward the jquery example and immediately the code looked more cryptic. If the comments were removed the code would be even harder to follow. What is hover? I like speaking similar language as the DOM interface. I like frameworks but when you start to get unexpected results its good to be able to search for generic solutions, the high level abstraction in jquery makes this harder. $ working as an array and a single value variable seems to me that it would make debugging harder in some cases. Also, what does that 400 do? Mootools passes objects as parameters, oh duration : 400. I have to know that ‘hover’ takes two functions and the order. Again more time debugging subtle errors. Even code syntax gets harder with a bunch of anonymous functions and commas.

Walsh did something in his Mootools code that he didn’t do in jquery. The animation stops whenever the effect changes. This helps to create smooth transitions if you move in and out of the link. I discovered that the jquery code didn’t have this advantage. Lateral Code had the solution:

$(function() {
    $('a').hover(function() {
        $(this).stop().animate( {
            paddingLeft:"30px"
        }, 300);
    }, function() {
        $(this).stop().animate( {
            paddingLeft:"0"
        }, 300);
    });
});

The problem solved with chaining the stop() method in. This code is pretty easy to maintain at the moment. While this is just a taste. From my point of view the scaling ability of the two sets of code is considerably different.

Your thoughts?

In a recent project I found myself unhappy with the large size of my result sets. The data I was returning was tabular data, in the form of objects for each row. I was returning a result set of 50, with 19 fields each. What I realized is if I augment my result set I could get a form of compression.

// uncompressed
JSON = {
  data : [
     { field1 : 'data1', field2 : 'data2', field3 : 'data3' },
     { field1 : 'data4', field2 : 'data5', field3 : 'data6' },
     .....
  ]
};
 
//compressed
JSON = {
    data : [ 'data1','data2','data3','data4','data5','data6' ],
    keys : [ 'field1', 'field2', 'field3' ]
};

I merged all my values into a single array and store all my fields in a separate array. Returning a key value pair for each result cost me 8800 byte (8.6kb). Ripping the fields out and putting them in a separate array cost me 186 bytes. Total savings 8.4kb.

Now I have a much more compressed JSON file, but the structure is different and now harder to work with. So I implement a solution in Mootools to make the decompression transparent.

Request.JSON.extend({
 
	options : {
		inflate : []
	}
 
});
 
 
Request.JSON.implement({
 
	success : function(text){
		this.response.json = JSON.decode(text, this.options.secure);
		if(this.options.inflate.length){
			this.options.inflate.each(function(rule){
				var ret = ($defined(rule.store)) ? this.response.json[rule.store] : this.response.json[rule.data];
				ret = this.expandData(this.response.json[rule.data], this.response.json[rule.keys]);
			},this);
		}
		this.onSuccess(this.response.json, text);
	},
 
	expandData : function(data,keys){
		var arr = [];
		var len = data.length; var klen = keys.length;
		var start = 0; var stop = klen;
		while(stop < len){
			arr.push( data.slice(start,stop).associate(keys) );
			start = stop; stop += klen;
		}
		return arr;
	}
 
});

Request.JSON now has an inflate option. You can inflate multiple segments of your JSON object if you so desire.

Usage:

new Request.JSON({
       url : 'url',
       inflate : [{ 'keys' : 'fields', 'data' : 'data' }]
       onComplete : function(json){}
});

Pass as many inflate objects as you like to the option inflate array. It has an optional property called ’store’ If set the inflated data set will be stored in that key instead.

The ‘keys’ and ‘fields’ expect strings to match a location in the root of your JSON object.