SOURCE CODE: Basic Image Port
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Basic Image Port | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widget.ImagePort"/>
  <meta name="description" content="The image port widget displays an image in a view port using logical sizing and positioning values. See it here, with controls for all its properties."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .label {
      font-size:10px;
    }
    select {
      border:1px solid #fff;
      font-size:12px;
      width:40px;
      height:20px;
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Basic Image Port
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/image-port.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widget.ImagePort.html"><code>Uize.Widget.ImagePort</code></a> is wired up to demonstrate the sizing and positioning principles of this class. Slider controls are provided for controlling the values of the <code>alignX</code>, <code>alignY</code>, and <code>sizingValue</code> state properties, and <code>select</code> dropdowns are provided for controlling the values of the <code>sizingLowerBound</code> and <code>sizingUpperBound</code> state properties. Alignment for both the X and Y axes is adjustable between <code>0</code> and <code>1</code>. In this example, <code>sizingValue</code> is adjustable between <code>0</code> and <code>3</code>, where <code>0</code> means that the image will be sized to the <code>sizingLowerBound</code>, <code>1</code> means that the image will be sized to the <code>sizingUpperBound</code>, and values above <code>1</code> will oversize the image.</p>
  </div>

  <form>
    <table border="0" cellspacing="0" cellpadding="0" style="margin:auto;">
      <tr>
        <td></td>
        <td></td>
        <td width="5"></td>
        <td class="label" style="text-align:center;">alignY</td>
        <td width="15"></td>
        <td>
          <select id="page-sizingUpperBound">
            <option value="fill" selected>fill</option>
            <option value="fit">fit</option>
          </select>
        </td>
        <td class="label" style="padding-left:5px;">sizingUpperBound</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <div id="page_imagePort" style="position:relative; width:300px; height:300px; overflow:hidden; background:#000; border:1px solid #555;">
            <img id="page_imagePort-image" src="http://upload.wikimedia.org/wikipedia/commons/d/db/Nasa_blue_marble.jpg" style="width:3000px; height:3075px; position:absolute;" alt=""/>
          </div>
        </td>
        <td width="5"></td>
        <td id="page-alignYSlider" style="height:300px;"></td>
        <td width="5"></td>
        <td>
          <div id="page-sizingValueSlider" style="height:300px;"></div>
        </td>
        <td class="label" valign="center" style="padding-left:5px;">sizingValue (0 to 3)</td>
      </tr>
      <tr>
        <td colspan="7" height="5"></td>
      </tr>
      <tr>
        <td class="label" style="padding-right:5px;">alignX</td>
        <td id="page-alignXSlider" style="width:300px;"></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <select id="page-sizingLowerBound">
            <option value="fit">fit</option>
            <option value="0" selected>0</option>
          </select>
        </td>
        <td class="label" style="padding-left:5px;">sizingLowerBound</td>
      </tr>
    </table>
  </form>
</div>

<!-- JavaScript code to activate the image port functionality -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.ImagePort',
    'Uize.Widgets.Slider.Widget'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** add the image port child widget ***/
      var imagePort = page.addChild (
        'imagePort',
        Uize.Widget.ImagePort,
        {
          sizingLowerBound:'0',
          sizingUpperBound:'fill',
          sizingValue:.5,
          alignX:.5,
          alignY:.5
        }
      );

    /*** code to update the image port instance based on user input values ***/
      function updateImagePortSettings () {
        imagePort.set ({
          alignX:+alignXSlider,
          alignY:+alignYSlider,
          sizingUpperBound:page.getNodeValue ('sizingUpperBound'),
          sizingLowerBound:page.getNodeValue ('sizingLowerBound'),
          sizingValue:+sizingValueSlider
        });
      }

    /*** common values shared by alignX, alignY, and sizingValue sliders ***/
      Uize.Widgets.Slider.Widget.set ({
        value:.5,
        fullColor:'#999',
        trackLength:'100%',
        increments:0,
        built:false
      });

    /*** add the alignX slider child widget ***/
      var alignXSlider = page.addChild (
        'alignXSlider',
        Uize.Widgets.Slider.Widget,
        {
          minValue:0,
          maxValue:1,
          orientation:'horizontal'
        }
      );
      alignXSlider.wire ('Changed.value',updateImagePortSettings);

    /*** add the alignY slider child widget ***/
      var alignYSlider = page.addChild (
        'alignYSlider',
        Uize.Widgets.Slider.Widget,
        {
          minValue:1,
          maxValue:0,
          orientation:'vertical'
        }
      );
      alignYSlider.wire ('Changed.value',updateImagePortSettings);

    /*** add the sizingValue slider child widget ***/
      var sizingValueSlider = page.addChild (
        'sizingValueSlider',
        Uize.Widgets.Slider.Widget,
        {
          minValue:0,
          maxValue:10,
          value:1,
          orientation:'vertical'
        }
      );
      sizingValueSlider.wire ('Changed.value',updateImagePortSettings);

    /*** initialize the ImagePort instance ***/
      updateImagePortSettings ();

    /*** wire up the page widget ***/
      page.wireUi ();

    /*** watch for changes in sizing bound values ***/
      page.wireNode ('sizingUpperBound','change',updateImagePortSettings);
      page.wireNode ('sizingLowerBound','change',updateImagePortSettings);
  }
);

</script>

</body>
</html>