#

# Example: Widget with simple Resize Plugin

This example shows the simple use case where we make an overlay resizable.

Did you know that the YUI Team tweets regularly under the handle @yuilibrary?

You can also follow some team members directly: @allenr, @ls_n, @yaypie, @tilomitra, @reid and @davglass.

YUI 3 is Yahoo!'s next-generation JavaScript and CSS library. It powers the new Yahoo! homepage, Yahoo! Mail, and many other Yahoo! sites. The YUI 3 Library has been redesigned and rewritten from the ground up incorporating what we've learned in five years of dedicated library development. The library includes the core components, a full suite of utilities, the Widget Infrastructure, a growing collection of widgets, CSS resources, and tools.

### Setting up the Node

First we create the HTML for an overlay along with the other content ont he page

    <div id="overlay">
        <p>Did you know that the YUI Team tweets regularly under the handle <a href="http://www.twitter.com/yuilibrary" alt="yuilibrary">@yuilibrary</a>?</p>

        <p>You can also follow some team members directly: <a href="http://www.twitter.com/allenr" alt="Allen R.">@allenr</a>, <a href="http://www.twitter.com/ls_n" alt="Luke S.">@ls_n</a>, <a href="http://www.twitter.com/yaypie" alt="Ryan G.">@yaypie</a>, <a href="http://www.twitter.com/tilomitra" alt="Tilo M.">@tilomitra</a>, <a href="http://www.twitter.com/reid" alt="Reid B.">@reid</a> and <a href="http://www.twitter.com/davglass" alt="Dav G.">@davglass</a>.</p>
    </div>

    <p><strong>YUI 3 is Yahoo!'s next-generation JavaScript and CSS library.</strong> It powers the new Yahoo! homepage, Yahoo! Mail, and many other Yahoo! sites. The YUI 3 Library has been redesigned and rewritten from the ground up incorporating what we've learned in five years of dedicated library development. The library includes the core components, a full suite of utilities, the Widget Infrastructure, a growing collection of widgets, CSS resources, and tools. </p>

    <p>
        <input type='button' class=".exampleBtn" id='launchOverlay' value="Show Overlay">
        <input type='button' class=".exampleBtn" id='resizeOverlay' value='Allow Resizing' disabled>
        <input type='button' class=".exampleBtn" id='dragOverlay' value='Allow Dragging' disabled>
    </p>

Next, we give that element some CSS to make it visible.

    .example .yui3-overlay {
        background:#161e31;
        color:white;
        padding:10px;
        border-radius:3px;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
        overflow:hidden;
    }
    .example .yui3-overlay a {
        text-decoration:none;
        color: #30bef2;
    }
    .example .yui3-overlay a:hover {
        color: #8cd7f2;
    }

### Setting up the YUI Instance

We need to create our YUI instance and tell it to load the `resize-plugin` module, along with the 'overlay' module; If we wanted the resize to be constrained, we would also need to include the 'resize-constrain' plugin.

    YUI().use('resize-plugin');

### Making the Widget Resizable

When the resizable button is pressed, we plug the `Y.Overlay` instance with `Y.Plugin.Resize`.

    overlay.plug(Y.Plugin.Resize);

Upon instantiation, the widget's drag handles will appear and the element is resizable via drag-and-drop. The widget will be notified of x, y, width and height changes.

### Full Source

    YUI().use('overlay', 'resize-plugin', 'dd-plugin', function(Y) {
        var overlay = new Y.Overlay({
           width: "200px",
           srcNode: "#overlay",
           visible: false,
           zIndex:5,
           align: {node:".example", points:["tc", "bc"]}
        }),

        launchBtn = Y.one('#launchOverlay'),
        resizeBtn = Y.one("#resizeOverlay"),
        dragBtn = Y.one('#dragOverlay');

        overlay.render();

        launchBtn.on('click', function(e) {
           overlay.set('visible', true);
           this.set('disabled', true);
           resizeBtn.set('disabled', false);
           dragBtn.set('disabled', false);
        });

        resizeBtn.on('click', function(e) {
           overlay.plug(Y.Plugin.Resize);
           this.set('value', 'Overlay is now resizable!');
           this.set('disabled', true);
        });

        dragBtn.on('click', function(e) {
           overlay.plug(Y.Plugin.Drag);
           this.set('value', 'Overlay is now draggable!');
           this.set('disabled', true);
        });
    });