Skip to content

Commit 99a97c2

Browse files
ericabouafericabouaf
committed
Adding an example for non-fullscreen editor
1 parent 99af69f commit 99a97c2

File tree

4 files changed

+267
-2
lines changed

4 files changed

+267
-2
lines changed

‎VERSION.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ Changeset:
1212
* Toolbar positionning
1313
* ModuleProxy.js into its own file
1414
* WiringEditor now inherits from BaseEditor, which wraps general full-page editor functionnality
15+
* Example for a non-fullscreen editor
1516

1617
* Wires:
1718
* Label for wires (beta)

‎examples/WiringEditor/widget.html‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5+
<title>WireIt - WiringEditor</title>
6+
<link rel="icon" href="../favicon.ico" type="image/png" />
7+
<link rel="SHORTCUT ICON" href="../favicon.ico" type="image/png" />
8+
9+
<!-- YUI -->
10+
<link rel="stylesheet" type="text/css" href="../../lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
11+
<link rel="stylesheet" type="text/css" href="../../lib/yui/assets/skins/sam/skin.css" />
12+
13+
<!-- InputEx CSS -->
14+
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />
15+
16+
<!-- YUI-accordion CSS -->
17+
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />
18+
19+
<!-- WireIt CSS -->
20+
<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />
21+
<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />
22+
23+
<style>
24+
div.WireIt-Container {
25+
width: 350px; /* Prevent the modules from scratching on the right */
26+
}
27+
28+
div.WireIt-InOutContainer {
29+
width: 150px;
30+
}
31+
32+
div.WireIt-InputExTerminal {
33+
float: left;
34+
width: 21px;
35+
height: 21px;
36+
position: relative;
37+
}
38+
div.WireIt-InputExTerminal div.WireIt-Terminal {
39+
top: -3px;
40+
left: -7px;
41+
}
42+
div.inputEx-Group div.inputEx-label {
43+
width:100px;
44+
}
45+
46+
div.WireIt-ImageContainer {
47+
width: auto;
48+
}
49+
50+
div.Bubble div.body {
51+
width: 70px;
52+
height: 45px;
53+
opacity: 0.8;
54+
cursor: move;
55+
}
56+
57+
.WiringEditor-module span {
58+
position: relative;
59+
top: -3px;
60+
}
61+
62+
</style>
63+
64+
65+
<!-- YUI -->
66+
<script type="text/javascript" src="../../lib/yui/utilities/utilities.js"></script>
67+
<script type="text/javascript" src="../../lib/yui/resize/resize-min.js"></script>
68+
<script type="text/javascript" src="../../lib/yui/layout/layout-min.js"></script>
69+
<script type="text/javascript" src="../../lib/yui/container/container-min.js"></script>
70+
<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>
71+
<script type="text/javascript" src="../../lib/yui/button/button-min.js"></script>
72+
<script type="text/javascript" src="../../lib/yui/tabview/tabview-min.js"></script>
73+
74+
<!-- InputEx with wirable options (WirableField-beta) -->
75+
<script src="../../lib/inputex/js/inputex.js" type='text/javascript'></script>
76+
<script src="../../lib/inputex/js/Field.js" type='text/javascript'></script>
77+
<script type="text/javascript" src="../../js/util/inputex/WirableField-beta.js"></script>
78+
<script src="../../lib/inputex/js/Group.js" type='text/javascript'></script>
79+
<script src="../../lib/inputex/js/Visus.js" type='text/javascript'></script>
80+
<script src="../../lib/inputex/js/fields/StringField.js" type='text/javascript'></script>
81+
<script src="../../lib/inputex/js/fields/Textarea.js" type='text/javascript'></script>
82+
<script src="../../lib/inputex/js/fields/SelectField.js" type='text/javascript'></script>
83+
<script src="../../lib/inputex/js/fields/EmailField.js" type='text/javascript'></script>
84+
<script src="../../lib/inputex/js/fields/UrlField.js" type='text/javascript'></script>
85+
<script src="../../lib/inputex/js/fields/ListField.js" type='text/javascript'></script>
86+
<script src="../../lib/inputex/js/fields/CheckBox.js" type='text/javascript'></script>
87+
<script src="../../lib/inputex/js/fields/InPlaceEdit.js" type='text/javascript'></script>
88+
89+
<!-- YUI-Accordion -->
90+
<script src="../../lib/accordionview/accordionview-min.js" type='text/javascript'></script>
91+
92+
<!-- WireIt -->
93+
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
94+
<script type="text/javascript" src="../../js/WireIt.js"></script>
95+
<script type="text/javascript" src="../../js/CanvasElement.js"></script>
96+
<script type="text/javascript" src="../../js/Wire.js"></script>
97+
<script type="text/javascript" src="../../js/Terminal.js"></script>
98+
<script type="text/javascript" src="../../js/util/DD.js"></script>
99+
<script type="text/javascript" src="../../js/util/DDResize.js"></script>
100+
<script type="text/javascript" src="../../js/Container.js"></script>
101+
<script type="text/javascript" src="../../js/Layer.js"></script>
102+
<script type="text/javascript" src="../../js/util/inputex/FormContainer-beta.js"></script>
103+
<script type="text/javascript" src="../../js/LayerMap.js"></script>
104+
<script type="text/javascript" src="../../js/BaseEditor.js"></script>
105+
<script type="text/javascript" src="../../js/ModuleProxy.js"></script>
106+
<script type="text/javascript" src="../../js/WiringEditor.js"></script>
107+
<script type="text/javascript" src="../../js/ImageContainer.js"></script>
108+
<script type="text/javascript" src="../../js/InOutContainer.js"></script>
109+
<script type="text/javascript" src="../../js/adapters/json-rpc.js"></script>
110+
111+
112+
<script type="text/javascript" src="demo.js"></script>
113+
114+
115+
<style>
116+
/* Comment Module */
117+
div.WireIt-Container.WiringEditor-module-comment { width: 200px; }
118+
div.WireIt-Container.WiringEditor-module-comment div.body { background-color: #EEEE66; }
119+
div.WireIt-Container.WiringEditor-module-comment div.body textarea { background-color: transparent; font-weight: bold; border: 0; }
120+
121+
122+
body { text-align: left;}
123+
h1 { font-size: 18px; font-weight: bold; margin: 30px;}
124+
125+
</style>
126+
127+
128+
<script>
129+
130+
// InputEx needs a correct path to this image
131+
inputEx.spacerUrl = "/inputex/trunk/images/space.gif";
132+
133+
134+
YAHOO.util.Event.onDOMReady( function() {
135+
136+
demoLanguage.layoutOptions = {
137+
138+
width: 600,
139+
height: 400,
140+
141+
units: [
142+
{ position: 'top', height: 57, body: 'top'},
143+
{ position: 'left', width: 200, resize: true, body: 'left', gutter: '5px', collapse: true,
144+
collapseSize: 25, header: 'Modules', scroll: true, animate: true },
145+
{ position: 'center', body: 'center', gutter: '5px' },
146+
{ position: 'right', width: 320, resize: true, body: 'right', gutter: '5px', collapse: true,
147+
collapseSize: 25, animate: true }
148+
]
149+
};
150+
151+
demoLanguage.parentEl = 'wiring-editor-widget';
152+
153+
var editor = new WireIt.WiringEditor(demoLanguage);
154+
155+
// Open the infos panel
156+
editor.accordionView.openPanel(2);
157+
158+
// collapse
159+
editor.layout._units.right.collapse();
160+
editor.layout._units.left.collapse();
161+
//console.log(editor);
162+
163+
});
164+
165+
</script>
166+
167+
</head>
168+
169+
<body class="yui-skin-sam">
170+
171+
<h1>Example of the WiringEditor within a Page</h1>
172+
173+
<p style="margin: 30px;">This is an example</p>
174+
175+
<div id="wiring-editor-widget" style="width: 600px; height: 400px; margin: 30px;">
176+
177+
<div id="top">
178+
<div class="logo">WiringEditor</a></div>
179+
<div id="toolbar"></div>
180+
<div class="topright">
181+
<span>Hello there !</span> |
182+
<a href="../..">back to WireIt</a>
183+
</div>
184+
</div>
185+
186+
187+
<div id="left">
188+
189+
<ul id="modulesAccordionView">
190+
<li>
191+
<h2>Main</h2>
192+
<div>
193+
<div id='module-category-main'></div>
194+
</div>
195+
</li>
196+
197+
<li>
198+
<h2>Form Modules</h2>
199+
<div>
200+
<div id='module-category-form'></div>
201+
</div>
202+
</li>
203+
204+
<li>
205+
<h2>Image Modules</h2>
206+
<div>
207+
<div id='module-category-images'></div>
208+
</div>
209+
</li>
210+
</ul>
211+
212+
</div>
213+
214+
<div id="right">
215+
<ul id="accordionView">
216+
<li>
217+
<h2>Properties</h2>
218+
<div>
219+
<div id="propertiesForm"></div>
220+
</div>
221+
</li>
222+
<li>
223+
<h2>Minimap</h2>
224+
<div style='position: relative;'>
225+
<div id="layerMap"></div>
226+
</div>
227+
</li>
228+
<li>
229+
<h2>Infos</h2>
230+
<div>
231+
<div style="padding: 10px;">
232+
<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
233+
<br />
234+
<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
235+
<br />
236+
<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
237+
</div>
238+
</div>
239+
</li>
240+
241+
</ul>
242+
</div>
243+
244+
<div id="center">
245+
</div>
246+
247+
</div>
248+
249+
<div id="helpPanel">
250+
<div class="hd">Welcome to the WiringEditor demonstration</div>
251+
<div class="bd" style="text-align: left;">
252+
253+
<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
254+
<br />
255+
<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
256+
<br />
257+
<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
258+
<br />
259+
<p>Close this dialog to test the WiringEditor</p>
260+
</div>
261+
</div>
262+
263+
</body>
264+
</html>

‎examples/creating_terminals.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
<title>WireIt Example, Creating Terminals and Wires.</title>
55

66
<!-- YUI -->
7-
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" />
8-
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" />
7+
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" />
98

109
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
1110

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@
200200
<li><a href="examples/logicGates/index.html">Logic Gates demo</a></li>
201201
<li><a href="examples/ajaxAdapter/">Ajax Adapter</a></li>
202202
<li><a href="examples/gearsAdapter/">Gears Adapter</a></li>
203+
<li><a href="examples/WiringEditor/widget.html">WiringEditor non-fullscreen</a></li>
203204
</ul>
204205

205206
<p>Beta/Experimental :</p>

0 commit comments

Comments
 (0)