Introduction
Resize adds some handles inside the html element you are making resizeable.
Which is fine most of the time, unless the element doesn't allow child nodes:
images, textareas, inputs, iframes, and selects.
In YUI2.x, these elements would be wrapped by a div, which would then hold
the handles and the element itself. All good.
However, in writing the resize as a plugin for YUI3, this gives us a problem.
I started replicating the behaviour, becuase I wanted to honour the config
and use of 2.x. But I realised this would be a bad thing. The problem
is that the core resize behaviour then sits with the wrapper element, not
the element originally specified. So if I have an image with id "myElement",
code like this:
var myNode = Y.get( '#myElement' );
myNode.plug( Y.Plugin.Resize );
would end up a bit misleading: it says (to me) Add some fancy resize behaviour
to the node with id "myElement". But what it does is different:
Add some fancy resize behaviour to a magically newly created Node that
wraps up your image with id "myElement".
I didn't like the sound of that. Particularly when you want to get your resize
later in the code:
myNode.resize.set("knobHandles", true);
Now in fact the resize would be attached to the parent of myNode, and myNode
would have had a reference to pass this kind of call up to the resize. It
felt wrong.
So the moral of the story: there ain't no wrappin, baby. You're just going
to have to do that yourself, either in the html or with js, and attach
the resize plugin to the wrapper. The example below gives some details.
There is one advantage to this: you could wrap several elements with one
resize plugin, and they'll all be resized proportionally to the wrapper.
Or put some text around the image and have it move with the image resize.
Wrapping example
So as a simple example, we'll wrap our image in a div in the html, and add the
resize to this wrapper:
<div id="wrapper">
<img src="" />
</div>
Javascript:
YUI().use( "*" , function( Y ) {
// the wrappedEls config is a selector string for elements to resize when the
// wrapper is resized. It will only find children of the wrapper element.
// hugWrappedEl makes the wrapper Node 'hug' the wrapped element. It only
// works if there's one wrapped element.
Y.get("#wrapper").plug( Y.Plugin.Resize , {wrappedEls: "img", hugWrappedEl: true });
} );