Resize Node Plugin - wrapping elements

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="mypic.jpg" /> </div> Javascript: YUI( //Last Gallery Build of this module gallery: 'gallery-2010.04.02-17-26' }).use('gallery-resize', 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.one("#wrapper").plug( Y.Plugin.Resize , {wrappedEls: "img", hugWrappedEl: true , draggable: true} ); } );