SOURCE CODE: Draggable Image Port
<!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 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="document-title">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Draggable Image Port
<div id="page-actions" class="pageActions">
<a href="source-code/image-port-drag.html" class="buttonLink">SOURCE</a>
</div>
</h1>
<div class="main">
<!-- 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.Widget.Bar.Slider.html"><code>Uize.Widget.Bar.Slider</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"><img src="../images/blank.gif" style="width:40px; height:300px;" alt=""/></td>
<td width="5"></td>
<td>
<div id="page_sizingValueSlider" style="width:40px; 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"><img src="../images/blank.gif" style="width:300px; height:40px;" alt=""/></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.module ({
required:[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Widget.ImagePort.Draggable',
'Uize.Widget.Bar.Slider.xSkin'
],
builder:function () {
/*** 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.Widget.Bar.Slider.set ({
value:.5,
fullTintColor:'#9aa',
fullTintLevel:50,
emptyTintColor:'#9aa',
emptyTintLevel:50,
borderThickness:3,
borderTintColor:'#455',
borderTintLevel:50,
increments:0,
knobSize:24,
built:false
});
/*** add the alignX slider child widget ***/
var alignXSlider = page.addChild (
'alignXSlider',
Uize.Widget.Bar.Slider,
{
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.Widget.Bar.Slider,
{
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.Widget.Bar.Slider,
{
fullTintColor:'#fff',
fullTintLevel:70,
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>