Adding InOutContainer

css/WireIt.css

@@ -80,7 +80,8 @@ div.WireIt-Container-ddhandle {
 	font-size: 10pt;
 } 
 div.WireIt-Container-ddhandle span {
-   margin-right: 32px;
+   /*margin-right: 32px;*/
+	text-align:center;
 }
 
 img.WireIt-Container-icon {
@@ -137,6 +138,19 @@ div.WireIt-ImageContainer div.WireIt-Container-closebutton {
 div.WireIt-ImageContainer:hover div.WireIt-Container-closebutton {
 	display: block;
 }
+
+/**
+ * InOutContainer
+ */
+
+div.WireIt-InOutContainer {	
+	width: 150px;
+}
+
+div.WireIt-InOutContainer div.body {	
+	padding: 5px 10px;
+	font-size: 10pt;
+}
 
 /**
  * Layers

examples/WiringEditor/demo.js

@@ -109,7 +109,19 @@ var demoLanguage = {
 	               			{"name": "FOLLOWUPS", "direction": [0,1], "offsetPosition": {"left": 100, "bottom": -15}}
 	               			]
 	         	}
-	         }
+	         },
+
+
+				{
+		         "name": "InOut test",
+		         "container": {
+		      		"xtype":"WireIt.InOutContainer", 
+		      		"icon": "http://dev.tarpipe.com/img/tumblr.png",
+						"inputs": ["text1", "text2", "option1"],
+						"outputs": ["result", "error"]
+		      	}
+		      }
+
 			]
 
 };

examples/WiringEditor/index.html

@@ -21,6 +21,11 @@
 div.WireIt-Container {
 	width: 350px; /* Prevent the modules from scratching on the right */
 }
+
+div.WireIt-InOutContainer {	
+	width: 150px;
+}
+
 div.WireIt-InputExTerminal {
 	float: left;
 	width: 21px;
@@ -92,6 +97,7 @@
 <script type="text/javascript" src="../../js/LayerMap.js"></script>
 <script type="text/javascript" src="../../js/WiringEditor.js"></script>
 <script type="text/javascript" src="../../js/ImageContainer.js"></script>
+<script type="text/javascript" src="../../js/InOutContainer.js"></script>
 
 <script type="text/javascript" src="demo.js"></script>
 

index.html

@@ -145,7 +145,8 @@
 
 			<p>Clone from <a href="http://github.com/neyric/wireit/">GitHub</a>: <span style="font-size: 80%;">git clone git://github.com/neyric/wireit.git</span></p>
 
-			<p>If you wish to support this project, Donate at PayPal !</p>
+			<p>If you wish to support this project, Donate at PayPal !<br />
+				Donations will be used for WireIt development and promotion.</p>
 			<center>
 			<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
 			<input type="hidden" name="cmd" value="_s-xclick">

js/InOutContainer.js

@@ -0,0 +1,68 @@
+/**
+ * Container with left inputs and right outputs
+ * @class InOutContainer
+ * @extends WireIt.Container
+ * @constructor
+ * @param {Object} options
+ * @param {WireIt.Layer} layer
+ */
+WireIt.InOutContainer = function(options, layer) {
+   WireIt.InOutContainer.superclass.constructor.call(this, options, layer);
+};
+
+YAHOO.lang.extend(WireIt.InOutContainer, WireIt.Container, {
+
+   /**
+    * @method setOptions
+    * @param {Object} options the options object
+    */
+   setOptions: function(options) {
+      WireIt.InOutContainer.superclass.setOptions.call(this, options);
+
+      this.options.xtype = "WireIt.InOutContainer";
+
+      this.options.className = options.className || "WireIt-Container WireIt-InOutContainer";
+
+      // Overwrite default value for options:
+      this.options.resizable = (typeof options.resizable == "undefined") ? false : options.resizable;
+
+		this.options.inputs = options.inputs || [];
+		this.options.outputs = options.outputs || [];
+
+   },
+
+   render: function() {
+      WireIt.InOutContainer.superclass.render.call(this);
+
+		for(var i = 0 ; i < this.options.inputs.length ; i++) {
+			var input = this.options.inputs[i];
+			this.options.terminals.push({
+				"name": input, 
+				"direction": [-1,0], 
+				"offsetPosition": {"left": -14, "top": 3+30*(i+1) }, 
+				"ddConfig": {
+             	"type": "input",
+             	"allowedTypes": ["output"]
+          	},
+				"alwaysSrc": true
+ 			});
+			this.bodyEl.appendChild(WireIt.cn('div', null, {lineHeight: "30px"}, input));
+		}
+
+		for(i = 0 ; i < this.options.outputs.length ; i++) {
+			var output = this.options.outputs[i];
+			this.options.terminals.push({
+				"name": output, 
+				"direction": [1,0], 
+				"offsetPosition": {"right": -14, "top": 3+30*(i+1+this.options.inputs.length) }, 
+				"ddConfig": {
+             "type": "output",
+             "allowedTypes": ["input"]
+          	}
+			});
+			this.bodyEl.appendChild(WireIt.cn('div', null, {lineHeight: "30px", textAlign: "right"}, output));
+		}
+
+   }
+
+});