#

# Example: Widget with Resize Plugin under constraints

This example shows a weather widget that loads information from YQL, and implements a constrained resize-plugin. The end result is a widget that's draggable and resizable between mini and detail view.

Toronto Conditions

## What's the weather like?

This little widget shows the weather forecast in Toronto. It's resizable, draggable, and implements the `ResizeConstrained` plugin. You can resize it between a simple and detailed view.

### Setting up the HTML

First we create the HTML for the page. This consists of a weatherWidget div with header and body wrappers, along with some other content on the page.

    <div id="weatherWidget">
        <div class="yui3-widget-hd">Toronto Conditions</div>
        <div class="yui3-widget-bd" id="weatherWidgetContent"></div>
    </div>

    <h2>What's the weather like?</h2>
    <p>This little widget shows the weather forecast in Toronto. It's resizable, draggable, and implements the <code>ResizeConstrained</code> plugin. You can resize it between a simple and detailed view.</p>

    <p>
        <input type='button' class=".exampleBtn" id='launchOverlay' value="Loading Components..." disabled>
    </p>

Next, we add CSS, including CSS3 gradients to spruce up the widget.

    .example .yui3-overlay h1, .yui3-overlay h2, .yui3-overlay h3, .yui3-overlay h4, .yui3-overlay h5 {
      color:#666;
      -webkit-text-shadow: 0px 1px 1px white;
      -moz-text-shadow: 0px 1px 1px white;
      text-shadow: 0px 1px 1px white;
      border-bottom:none;
      font-weight:lighter;
    }
    .example .yui3-overlay {
        background:white;
        color:black;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
        -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
        border:1px solid #333;
    }

    .example .yui3-overlay .yui3-widget-hd {
      background: #499bea;
      background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5));
      background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%);
      background: -o-linear-gradient(top, #499bea 0%,#207ce5 100%);
      background: -ms-linear-gradient(top, #499bea 0%,#207ce5 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );
      background: linear-gradient(top, #499bea 0%,#207ce5 100%);
      -webkit-text-shadow: 0px 1px 1px #4FBCF7;
      -moz-text-shadow: 0px 1px 1px #4FBCF7;
      text-shadow: 0px 1px 1px #4FBCF7;
      color: #0F4C82;
      font-weight:bold;
      height:30px;
      font-size:16px;
      text-align:center;
      padding-top:10px;
      border-radius:3px;
    }
    .example .yui3-overlay #weatherWidgetContent {
      overflow:hidden;
    }
    .example .yui3-overlay .yui3-widget-bd {
      background: #e0eff9;
      background: -moz-linear-gradient(top, #e0eff9 0%, #ffffff 4%, #f2f2f2 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0eff9), color-stop(4%,#ffffff), color-stop(100%,#f2f2f2));
      background: -webkit-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
      background: -o-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
      background: -ms-linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0eff9', endColorstr='#f2f2f2',GradientType=0 );
      background: linear-gradient(top, #e0eff9 0%,#ffffff 4%,#f2f2f2 100%);
    }
    .example .yui3-overlay #weatherWidgetContent #mainContainer, .example .yui3-overlay #weatherWidgetContent #futureDays  {

      color:#333;

    }

    #mainContainer {
        padding:10px;
        height:60px;
        width:85%;
        margin:0 auto;

    }

    #mainContainer #temp {
      font-size:20px;
      margin: 0 auto auto 10px;
      position: absolute;
      top: 66px;
      left:81px;
    }
    #futureDays .day {
      float:left;
      padding:10px;
      border-top:1px solid #ddd;
      background:#EDF3F7;

    }
    #futureDays h3, #futureDays h4 {
      margin:5px 0;
      text-align:center;
    }
    #futureDays h3 {
      font-size:90%;
      color: #5ea3d3;
    }
    #futureDays h4 {
      margin: 5px 0;
      text-align: center;
      font-weight: bold;
      color: #304166;
    }
    #mainContainer .clearfix {
      clear:both;
    }
    #weatherWidget {
        display: none;
    }
    #weatherWidget.yui3-overlay-content {
        display: block;
    }

### The Use Statement

The use statement consists of various modules that we'll need to construct this widget.

    YUI().use('overlay', 'resize-plugin', 'resize-constrain', 'dd-plugin', 'yql', function(Y) {

`resize-plugin` allows our overlay to be resizable. We also need to pull down the `resize-constrain` submodule to allow for constraining. The `dd-plugin` enables draggability on a widget, while the `yql` module allows us to send requests to YQL

### Enabling Constrained Resizing on the Widget

Constrained resizing can be done by plugging in `Y.Plugin.Resize` and then plugging in `Y.Plugin.ResizeConstrained` under the `resize` namespace.

    weatherWidget = new Y.Overlay({
       width: "250px",
       height:"300px",
       srcNode: "#weatherWidget",
       visible: false,
       align: {node:"#example", points:["tc", "bc"]}
    });

    //allow resizability and draggability
    weatherWidget.plug([Y.Plugin.Resize, Y.Plugin.Drag]);

    //we can plug in the resizeConstrained plugin on the 'resize' namespace
    weatherWidget.resize.plug(Y.Plugin.ResizeConstrained, {
      minWidth: 250,
      minHeight: 170,
      maxWidth: 250,
      maxHeight: 300,
      preserveRatio: false
    });

    weatherWidget.render();