sandbox/presentation.html
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>WireIt interactive presentation</title>
<!-- YUI -->
<link rel="stylesheet" href="https://yui-s.yahooapis.com/combo?3.6.0/build/cssreset/reset-min.css&3.6.0/build/cssfonts/fonts-min.css">
<script src="https://yui-s.yahooapis.com/3.6.0/build/yui/yui.js"></script>
<script type="text/javascript" src="../lib/excanvas.js"></script>
<!-- WireIt -->
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
<script src="../src/loader.js" type='text/javascript'></script>
<style>
body {
padding: 50px;
}
#canvas {
background-color: #FFF5DF;
border: 1px solid #B6CDE1;
padding: 1em;
width: 600px;
height: 400px;
margin-left: 200px;
}
#container {
height: 350px;
position: relative;
}
h1, h2, h3 {
color: #E76300;
font-weight: bold;
}
h1 {
margin-bottom: 10px;
font-size: 136%;
}
h2 {
margin: 10px;
}
</style>
<script>
YUI_config.groups.wireit.base = '../src/';
YUI({filter: 'raw', combine: false}).use('wire', 'bezier-wire', 'terminal', function(Y) {
Y.WireIt.samples = [
{
innerHTML: '<p>This presentation will show you some features of WireIt through interactive examples.</p>'+
'<h2>Try to create a wire by "drag-dropping" the "terminals".</h2>'+
'<div style="width: 100px;"></div>',
init: function() {
var t1 = new Y.Terminal(SampleMgr.container, {direction: [1,0], offsetPosition:[80,100] });
var t2 = new Y.Terminal(SampleMgr.container, {direction: [-1,0], offsetPosition:[200,210] });
this.t1 = t1;
this.t2 = t2;
t1.on('eventAddWire',function(e, args) {
var wire = args[0];
if(wire.terminal1 == t2 || wire.terminal2 == t2) {
SampleMgr.container.appendChild(Y.WireIt.cn('h2', null, null, "Good ! Now try to cut this wire. (click on the scissors)") );
}
});
t1.on('eventRemoveWire', function(e, args) {
var wire = args[0];
if(wire.terminal1 == t2 || wire.terminal2 == t2) {
var wire = args[0];
SampleMgr.container.appendChild(Y.WireIt.cn('h2', null, null, "Perfect ! <button onclick='SampleMgr.next()'>Next</button>") );
}
});
},
unload: function() {
this.t1.remove();
this.t2.remove();
}
},
{
innerHTML: '<p>Let\'s draw some arrows</p>',
init: function() {
var wireConfig = { xtype: 'WireIt.ArrowWire' };
this.terminals = [
new Y.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[80,100] }),
new Y.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[80,210] }),
new Y.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[200,210] }),
new Y.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[200,100] })
];
},
unload: function() {
for(var i = 0 ; i < this.terminals.length ; i++) {
this.terminals[i].remove();
}
}
},
{
innerHTML: '<p>Let\'s draw some contributed arrows</p>',
init: function() {
var wireConfig = { xtype: 'WireIt.LeftSquareArrow', fakeDirection: [0,-1] };
this.terminals = [
new Y.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[80,100] }),
new Y.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[80,210] }),
new Y.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[200,210] }),
new Y.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[200,100] })
];
},
unload: function() {
for(var i = 0 ; i < this.terminals.length ; i++) {
this.terminals[i].remove();
}
}
},
{
innerHTML: '<p>Straight lines too</p>',
init: function() {
this.terminals = [
new Y.Terminal(SampleMgr.container, { wireConfig: { xtype: "Y.Wire"}, offsetPosition:[80,100] }),
new Y.Terminal(SampleMgr.container, { wireConfig: { xtype: "Y.Wire"}, offsetPosition:[80,210] }),
new Y.Terminal(SampleMgr.container, { wireConfig: { xtype: "Y.Wire"}, offsetPosition:[200,210] }),
new Y.Terminal(SampleMgr.container, { wireConfig: { xtype: "Y.Wire"}, offsetPosition:[200,100] })
];
},
unload: function() {
for(var i = 0 ; i < this.terminals.length ; i++) {
this.terminals[i].remove();
}
}
},
{
innerHTML: '<p>Typed terminals</p>',
init: function() {
this.terminals = [];
var colors = ["red", "green", "blue"];
for(var x = 0 ; x < 5 ; x++) {
for(var y = 0 ; y < 4 ; y++) {
var color = colors[(x+y*5) % colors.length];
var t = new Y.Terminal(SampleMgr.container, {
fakeDirection: [0,1],
offsetPosition:[50+x*60,50+y*60],
ddConfig: {
type: color
}
});
Y.one(t.el).setStyle("backgroundColor", color);
Y.one(t.el).setStyle("opacity", "0.5");
this.terminals.push(t);
}
}
},
unload: function() {
for(var i = 0 ; i < this.terminals.length ; i++) {
this.terminals[i].remove();
}
}
},
{
innerHTML: '<p>Thank you for viewing this presentation</p>'+
'<a href="..">Back to WireIt</a>',
init: function() {}
}
];
window.SampleMgr = {
sampleIndex: 0,
init: function() {
this.container = Y.one('#container');
this.next();
},
previous: function() {
this.sampleIndex = Math.max(this.sampleIndex-2,0);
this.next();
},
next: function() {
if(!Y.Lang.isUndefined(this.lastLoaded) && Y.Lang.isFunction(Y.WireIt.samples[this.lastLoaded].unload) ) {
Y.WireIt.samples[this.lastLoaded].unload();
}
if(this.sampleIndex == Y.WireIt.samples.length) return;
this.container.innerHTML = Y.WireIt.samples[this.sampleIndex].innerHTML;
this.lastLoaded = this.sampleIndex;
Y.WireIt.samples[this.sampleIndex].init();
this.sampleIndex += 1;
}
}
SampleMgr.init();
});
</script>
</head>
<body>
<div id="canvas">
<h1>WireIt interactive presentation</h1>
<div id="container">
</div>
<button onclick="SampleMgr.previous();" href="">Previous</button> <button onclick="SampleMgr.next();" href="">Next</button>
</div>
</body>
</html>