Resizable additions

[zquirm]

I would love to see the following features on an already terrific component:

- snap to grid - so as you're resizing it jumps to the next grid line...much like YUI's DD graduated movement example: http://developer.yahoo.com/yui/examples/dragdrop/grid.html?mode=dist

- choose which sides are resizable - so if I only want the element to get taller, than only the south handle should show - I know that you can just set multiDirectional to false and have minWidth = maxWidth, but like the handles to not be there.

thanks.

[jack.slocum]

See this thread:

http://www.jackslocum.com/forum/viewtopic.php?t=334

[zquirm]

I saw this just after I posted the thread...and it answers my "choose which sides" question.

I'm still not sure how to make the resize snap to a grid.

thoughts?

[jack.slocum]

Snap to grid isn't currently planned. Just wondering, what are you trying to do with it?

[zquirm]

something like what Google Calendar does...when you resize an event box, it jumps "30 min" at a time. thanks for your help.

[jack.slocum]

You could listen for the resize event and snap it after the drag is done pretty easily. The problem is implementing it generically is tricky and won't fit what everyone needs so better to leave it to those who need it.

Or you can try this below. It is completely untested and you may need to tweak it. If you do please let me know what you did. Just pass widthIncrement or heightIncrement in your config object. Include the following functions somewhere after including the original Resizable code.

YAHOO.ext.Resizable.prototype.snap = function(value, inc){
if(!inc || !value) return value;
var newValue = value;
var m = value % inc;
if(m > 0){
if(m > (inc/2)){
newValue = value + (inc-m);
}else{
newValue = value - m;
}
}
return newValue;
};

YAHOO.ext.Resizable.prototype.resizeElement = function(){
var box = this.proxy.getBox();
box.width = this.snap(box.width, this.widthIncrement);
box.height = this.snap(box.height, this.heightIncrement);
if(this.multiDirectional){
this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
}else{
this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
}
this.updateChildSize();
this.proxy.hide();
return box;
};

[jack.slocum]

I edited it and added "prototype" to the function defs.

[zquirm]

great! I'll give it a try and let you know...[/u]

[zquirm]

it works amazingly well!!! This is exactly what I was looking for. thanks so much!

[jack.slocum]

Great. I'll include it in the main distribution.

[zenx]

hi,

that was very useful for me also! thank you!!!

I've got another question, what about doing that cool splitting google calendar does when you have 2 elements that are at the same position so that they don't overlap? how could you split them so that both become 50% of their width when they are at the same X and Y position?

[brian.moeskau]

There's nothing that would do that for you automatically. You'd have to manage the layout yourself and figure out when things overlap, then just use el.setWidth() as needed.

[zenx]

Ok. I will try it, thanks :D