SOURCE CODE: Draggable 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>Draggable Image Port | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="touch ipad Uize.Widget.ImagePort.Draggable"/>
  <meta name="description" content="See how a draggable image port is wired up to a set of sliders. Use the image port and the sliders update. Use the sliders and the image port updates."/>
  <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>
    Draggable Image Port
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/image-port-drag.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.Draggable.html"><code>Uize.Widget.ImagePort.Draggable</code></a> is wired up to let you explore an image inside an image port. Click-and-drag on the image to pan it from side to side. Ctrl-click-and-drag up and down to zoom in and out, respectively. Additionally, sliders (instances of the <a href="../reference/Uize.Widgets.Slider.Widget.html"><code>Uize.Widgets.Slider.Widget</code></a> class) are wired up to control the <code>alignX</code> and <code>alignY</code> state properties of the widget, and a slider and two select boxes are wired up to control the <code>sizingValue</code>, <code>sizingUpperBound</code>, and <code>sizingLowerBound</code> state properties. Event handlers wire the widgets bidirectionally, so dragging inside the image port updates the sliders, and dragging the sliders updates the image port.</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 id="page-sizingValueSlider" style="height:300px;"></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.Draggable',
    '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.Draggable,
        {
          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',function () {imagePort.set ({alignX:+alignXSlider})});

    /*** 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',function () {imagePort.set ({alignY:+alignYSlider})});

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

    /*** update settings UI whenever position changes ***/
      imagePort.wire (
        'Position Changed',
        function () {
          alignXSlider.set ({value:imagePort.get ('alignX')});
          alignYSlider.set ({value:imagePort.get ('alignY')});
          sizingValueSlider.set ({value:imagePort.get ('sizingValue')});
        }
      );

    /*** 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>