Skip to content

Commit

Permalink
Adding AccordionView to the right panel in WiringEditor
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericabouaf
ericabouaf committed Jul 21, 2009
1 parent 9708fdb commit d885d41
Show file tree
Hide file tree
Showing 11 changed files with 1,181 additions and 23 deletions.
1 change: 1 addition & 0 deletions VERSION.txt
View file
Expand Up @@ -22,6 +22,7 @@ TODO:
LATER

* Uneditable layer
* Only one cissor

Changeset:

Expand Down
7 changes: 1 addition & 6 deletions css/WireItEditor.css
View file
Expand Up @@ -117,14 +117,9 @@ body {
* RIGHT
*/

#right {
#right #propertiesForm {
font-size: 10px;
}

#right h2 {
font-size: 130%;
font-weight: bold;
}

#layerMap {
width: 80%;
Expand Down
49 changes: 44 additions & 5 deletions examples/WiringEditor/index.html
View file
Expand Up @@ -13,6 +13,9 @@
<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />

<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />
Expand Down Expand Up @@ -66,6 +69,7 @@
<script type="text/javascript" src="../../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../../lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="../../lib/yui/tabview/tabview-min.js"></script>

<!-- InputEx with wirable options (WirableField-beta) -->
<script src="../../lib/inputex/js/inputex.js" type='text/javascript'></script>
Expand All @@ -82,6 +86,9 @@
<script src="../../lib/inputex/js/fields/CheckBox.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/InPlaceEdit.js" type='text/javascript'></script>

<!-- YUI-Accordion -->
<script src="../../lib/accordionview/accordionview-min.js" type='text/javascript'></script>


<!-- WireIt -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
Expand All @@ -100,17 +107,24 @@
<script type="text/javascript" src="../../js/InOutContainer.js"></script>
<script type="text/javascript" src="../../js/adapters/json-rpc.js"></script>


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

<script>

// InputEx needs a correct path to this image
inputEx.spacerUrl = "/inputex/trunk/images/space.gif";


YAHOO.util.Event.onDOMReady( function() {

var editor = new WireIt.WiringEditor(demoLanguage);
editor.onHelp();

// Open the infos panel
editor.accordionView.openPanel(2);

});

</script>

</head>
Expand All @@ -131,10 +145,35 @@
</div>

<div id="right">
<h2>Properties</h2>
<div id="propertiesForm"></div>
<h2>Minimap</h2>
<div id="layerMap"></div>
<ul id="accordionView">
<li>
<h2>Properties</h2>
<div>
<div id="propertiesForm"></div>
</div>
</li>
<li>
<h2>Minimap</h2>
<div style='position: relative;'>
<div id="layerMap"></div>
</div>
</li>
<li>
<h2>Infos</h2>
<div>
<div style="padding: 10px;">
<p>This example shows how to use the <i>ImageContainer</i> and <i>FormContainer</i> in a language definition.</p>
<br />
<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
<br />
<p><a href="demo.js" target="_new">Click here to view the language definition for this editor.</a></p>
<br />
<p>Close this dialog to test the WiringEditor</p>
</div>
</div>
</li>

</ul>
</div>

<div id="center">
Expand Down
51 changes: 47 additions & 4 deletions examples/jsBox/jsBox.html
View file
Expand Up @@ -13,6 +13,9 @@
<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />

<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />
Expand Down Expand Up @@ -90,6 +93,8 @@
<script src="../../lib/inputex/js/fields/ColorField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/TypeField.js" type='text/javascript'></script>

<!-- YUI-Accordion -->
<script src="../../lib/accordionview/accordionview-min.js" type='text/javascript'></script>

<!-- WireIt -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
Expand Down Expand Up @@ -132,10 +137,48 @@
</div>

<div id="right">
<h2>Properties</h2>
<div id="propertiesForm"></div>
<h2>Minimap</h2>
<div id="layerMap"></div>
<ul id="accordionView">
<li>
<h2>Properties</h2>
<div>
<div id="propertiesForm"></div>
</div>
</li>
<li>
<h2>Minimap</h2>
<div style='position: relative;'>
<div id="layerMap"></div>
</div>
</li>
<li>
<h2>Infos</h2>
<div>
<div style="padding: 10px;">
<p>This is an advanced example of the WiringEditor from the <a href="http://javascript.neyric.com/wireit">WireIt library</a>.</p>
<br />
<p style="font-weight: bold;">What this example does :</p>
<ul style="margin-left: 20px;">
<li>* Define a visual language of 5 modules: input, output, jsBox, callback, comment</li>
<li>* Creates the "jsBox" container</li>
<li>* Creates the "Composed" container</li>
<li>* Hack the WiringEditor to handle the composed modules</li>
<li>* Provide a small virtual machine for executing this language</li>
</ul>
<br />
<p style="font-weight: bold;">How to use it :</p>
<ul style="margin-left: 20px;">
<li>* Drag and drop modules from the Module list to the working layer.</li>
<li>* Create a module with inputs, outputs and jsBox modules (or load an existing one)</li>
<li>* Press the "Run" button to run the code within the same window</li>
</ul>
<br />
<p><u>Warning:</u> Composed modules are shared anonymously. <br />Someone could change/delete your modules or create evil ones !</p>
<br />
<p>Sources: <a href="jsBox.js" target="_new">jsBox.js</a> and <a href="ExecutionFrame.js" target="_new">ExecutionFrame.js</a></p>
</div>
</div>
</li>
</ul>
</div>

<div id="center">
Expand Down
4 changes: 3 additions & 1 deletion examples/jsBox/jsBox.js
View file
Expand Up @@ -101,7 +101,9 @@ var jsBox = {
*/
init: function() {
this.editor = new jsBox.WiringEditor(this.language);
this.editor.onHelp();

// Open the infos panel
editor.accordionView.openPanel(2);
},

/**
Expand Down
36 changes: 31 additions & 5 deletions examples/logicGates/index.html
View file
Expand Up @@ -13,6 +13,9 @@
<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../lib/inputex/css/inputEx.css' />

<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../lib/accordionview/assets/skins/sam/accordionview.css" />

<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../css/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../css/WireItEditor.css" />
Expand All @@ -39,6 +42,9 @@
<script src="../../lib/inputex/js/fields/ListField.js" type='text/javascript'></script>
<script src="../../lib/inputex/js/fields/CheckBox.js" type='text/javascript'></script>

<!-- YUI-Accordion -->
<script src="../../lib/accordionview/accordionview-min.js" type='text/javascript'></script>

<!-- WireIt -->
<!--[if IE]><script type="text/javascript" src="../../lib/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../../js/WireIt.js"></script>
Expand All @@ -62,7 +68,6 @@

YAHOO.util.Event.onDOMReady( function() {
var editor = new WireIt.WiringEditor(logicGatesLang);
editor.onHelp();
});
</script>

Expand All @@ -83,10 +88,31 @@
<div id="left"></div>

<div id="right">
<h2>Properties</h2>
<div id="propertiesForm"></div>
<h2>Minimap</h2>
<div id="layerMap"></div>
<ul id="accordionView">
<li>
<h2>Properties</h2>
<div>
<div id="propertiesForm"></div>
</div>
</li>
<li>
<h2>Minimap</h2>
<div style='position: relative;'>
<div id="layerMap"></div>
</div>
</li>
<li>
<h2>Infos</h2>
<div>
<div style="padding: 10px;">
<p>This example uses <i>ImageContainers</i> to represent logic gates.</p>
<br />
<p><b>Drag and drop modules from the Module list</b> on the left to the working layer in the middle.</p>
<br />
<p><a href="logicGates.js" target="_new">Click here to view the language definition for this editor.</a></p>
</div>
</div>
</li>
</div>


Expand Down
25 changes: 23 additions & 2 deletions js/WiringEditor.js
View file
Expand Up @@ -102,6 +102,9 @@ WireIt.WiringEditor = function(options) {
this.layout = new widget.Layout(this.el, this.options.layoutOptions);
this.layout.render();

// Right accordion
this.renderAccordion();

/**
* @property layer
* @type {WireIt.Layer}
Expand All @@ -120,7 +123,7 @@ WireIt.WiringEditor = function(options) {

// Render buttons
this.renderButtons();

// Properties Form
this.renderPropertiesForm();

Expand Down Expand Up @@ -165,7 +168,7 @@ WireIt.WiringEditor.prototype = {
collapseSize: 25, header: 'Modules', scroll: true, animate: true },
{ position: 'center', body: 'center', gutter: '5px' },
{ position: 'right', width: 320, resize: true, body: 'right', gutter: '5px', collapse: true,
collapseSize: 25, header: 'Properties', scroll: true, animate: true }
collapseSize: 25, /*header: 'Properties', scroll: true,*/ animate: true }
]
};

Expand All @@ -174,7 +177,25 @@ WireIt.WiringEditor.prototype = {
this.options.layerOptions.parentEl = layerOptions.parentEl ? layerOptions.parentEl : Dom.get('center');
this.options.layerOptions.layerMap = YAHOO.lang.isUndefined(layerOptions.layerMap) ? true : layerOptions.layerMap;
this.options.layerOptions.layerMapOptions = layerOptions.layerMapOptions || { parentEl: 'layerMap' };

this.options.accordionViewParams = options.accordionViewParams || {
collapsible: true,
expandable: true, // remove this parameter to open only one panel at a time
width: '308px',
expandItem: 0,
animationSpeed: '0.3',
animate: true,
effect: YAHOO.util.Easing.easeBothStrong
};
},


/**
* Render the accordion using yui-accordion
*/
renderAccordion: function() {
this.accordionView = new YAHOO.widget.AccordionView('accordionView', this.options.accordionViewParams);
},

/**
* Render the properties form
Expand Down

0 comments on commit d885d41

Please sign in to comment.