From ce167066f4d0fddf73f038961eb38220558e5ef7 Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan.ferrer.toribio@gmail.com>
Date: Mon, 20 Nov 2017 13:15:01 +0100
Subject: [PATCH] Refactor

---
 forms/ecomerce/checkout/checkout.js    |  18 +++--
 forms/ecomerce/checkout/locale/ca.json |   1 +
 forms/ecomerce/checkout/locale/en.json |   1 +
 forms/ecomerce/checkout/locale/es.json |   1 +
 forms/ecomerce/checkout/locale/fr.json |   1 +
 forms/ecomerce/checkout/locale/mn.json |   1 +
 forms/ecomerce/checkout/locale/pt.json |   1 +
 forms/ecomerce/checkout/style.css      |   2 +-
 forms/ecomerce/checkout/ui.xml         |  22 ++---
 image/icon/light/access-log.svg        |  20 ++---
 image/icon/light/add.svg               |  12 +--
 image/icon/light/down.svg              |  60 ++++++++++++++
 js/db/lot.js                           |  46 +++++++++++
 js/hedera/gui.js                       |   2 -
 js/hedera/style.css                    |  53 ++++++------
 js/htk/field.js                        |  33 ++++----
 js/htk/field/calendar.js               |   4 +-
 js/htk/field/check.js                  |   4 +-
 js/htk/field/combo.js                  | 107 ++++++++++++++++---------
 js/htk/field/date-chooser.js           |   8 +-
 js/htk/field/entry.js                  |   4 +-
 js/htk/field/html.js                   |   2 +-
 js/htk/field/image.js                  |   2 +-
 js/htk/field/label.js                  |   4 +-
 js/htk/field/radio.js                  |   2 +-
 js/htk/field/search-entry.js           |   4 +-
 js/htk/field/spin.js                   |   4 +-
 js/htk/field/text-area.js              |   4 +-
 js/htk/field/text.js                   |   4 +-
 js/htk/popup.js                        |   2 -
 js/htk/style.css                       |  40 +++++----
 js/htk/toast.js                        |  35 --------
 js/vn/iterator-iface.js                |  46 -----------
 js/vn/param-iface.js                   |  15 +++-
 34 files changed, 322 insertions(+), 243 deletions(-)
 create mode 100644 image/icon/light/down.svg

diff --git a/forms/ecomerce/checkout/checkout.js b/forms/ecomerce/checkout/checkout.js
index 1021bf16..5e2c9b2f 100644
--- a/forms/ecomerce/checkout/checkout.js
+++ b/forms/ecomerce/checkout/checkout.js
@@ -2,7 +2,7 @@
 
 var methodsData = {
 	AGENCY: {
-		steps: ['method', 'date', 'address', 'agency', 'confirm'],
+		steps: ['method', 'date', 'address', 'delivery', 'confirm'],
 		isDelivery: true,
 		textId: 'agencyText'
 	},
@@ -12,10 +12,10 @@ var methodsData = {
 		textId: 'deliveryText'
 	},
 	PICKUP: {
-		steps: ['method', 'date', 'address', 'pickup', 'confirm'],
+		steps: ['method', 'date', 'address', 'delivery', 'confirm'],
 		isDelivery: false,
 		textId: 'pickupText'
-	} 
+	}
 };
 
 Hedera.Checkout = new Class
@@ -125,11 +125,13 @@ Hedera.Checkout = new Class
 			case 'date':
 				var dateQuestion = methodData.isDelivery ?
 					'OrderDateDeliveryQuestion' : 'OrderDatePickupQuestion';
-				Vn.Node.setText (_(dateQuestion));
+				Vn.Node.setText (this.$.dateQuestion, _(dateQuestion));
 				this.$.calendar.goToSelectedMonth ();
 				break;
-			case 'agency':
-			case 'pickup':
+			case 'delivery':
+				var whQuestion = methodData.isDelivery ?
+					'AgencyQuestion' : 'PickupWarehouseQuestion';
+				Vn.Node.setText (this.$.whQuestion, _(whQuestion));
 				this.$.agencies.refresh ();
 				break;
 			case 'confirm':
@@ -144,9 +146,9 @@ Hedera.Checkout = new Class
 		return stepName;
 	}
 	
-	,onFieldChange: function ()
+	,onFieldChange: function (_, value)
 	{
-		if (!this.autoStepLocked)
+		if (!this.autoStepLocked && value != null)
 			setTimeout (this.goNextStep.bind (this), 75);
 	}
 	
diff --git a/forms/ecomerce/checkout/locale/ca.json b/forms/ecomerce/checkout/locale/ca.json
index 3f0764fc..b05a6655 100755
--- a/forms/ecomerce/checkout/locale/ca.json
+++ b/forms/ecomerce/checkout/locale/ca.json
@@ -8,6 +8,7 @@
 	,"ReceiveThroughtAgency": "Rebre per agència"
 	,"ReceiveThroughtRoute": "Repartiment Verdnatura"
 	,"PickupInStore": "Recollir en magatzem"
+	,"Select agency": "Selecciona agencia"
 	
 	,"OrderDateDeliveryQuestion": "Quin dia vols rebre la comanda?"
 	,"OrderDatePickupQuestion": "Quin dia vols recollir la comanda?"
diff --git a/forms/ecomerce/checkout/locale/en.json b/forms/ecomerce/checkout/locale/en.json
index 9ba28bcc..e5874979 100755
--- a/forms/ecomerce/checkout/locale/en.json
+++ b/forms/ecomerce/checkout/locale/en.json
@@ -8,6 +8,7 @@
 	,"ReceiveThroughtAgency": "Receive by agency"
 	,"ReceiveThroughtRoute": "Verdnatura delivery"
 	,"PickupInStore": "Store pickup"
+	,"Select agency": "Select agency"
 	
 	,"OrderDateDeliveryQuestion": "What day you want to receive the order?"
 	,"OrderDatePickupQuestion": "What day you want to pickup your order?"
diff --git a/forms/ecomerce/checkout/locale/es.json b/forms/ecomerce/checkout/locale/es.json
index b2f1bcab..eadf3ee9 100755
--- a/forms/ecomerce/checkout/locale/es.json
+++ b/forms/ecomerce/checkout/locale/es.json
@@ -8,6 +8,7 @@
 	,"ReceiveThroughtAgency": "Recibir por agencia"
 	,"ReceiveThroughtRoute": "Reparto Verdnatura"
 	,"PickupInStore": "Recoger en almacén"
+	,"Select agency": "Selecciona agencia"
 	
 	,"OrderDateDeliveryQuestion": "¿Qué día quieres recibir el pedido?"
 	,"OrderDatePickupQuestion": "¿Qué día quieres recoger el pedido?"
diff --git a/forms/ecomerce/checkout/locale/fr.json b/forms/ecomerce/checkout/locale/fr.json
index 13be44cc..61f32277 100755
--- a/forms/ecomerce/checkout/locale/fr.json
+++ b/forms/ecomerce/checkout/locale/fr.json
@@ -8,6 +8,7 @@
 	,"ReceiveThroughtAgency": "Recevez par l'agence"
 	,"ReceiveThroughtRoute": "Livraison par Verdnatura"
 	,"PickupInStore": "Livraison en magasin"
+	,"Select agency": "Sélectionnez une agence"
 	
 	,"OrderDateDeliveryQuestion": "Date de livraison?"
 	,"OrderDatePickupQuestion": "Date retrait commande?"
diff --git a/forms/ecomerce/checkout/locale/mn.json b/forms/ecomerce/checkout/locale/mn.json
index 9ba28bcc..e5874979 100755
--- a/forms/ecomerce/checkout/locale/mn.json
+++ b/forms/ecomerce/checkout/locale/mn.json
@@ -8,6 +8,7 @@
 	,"ReceiveThroughtAgency": "Receive by agency"
 	,"ReceiveThroughtRoute": "Verdnatura delivery"
 	,"PickupInStore": "Store pickup"
+	,"Select agency": "Select agency"
 	
 	,"OrderDateDeliveryQuestion": "What day you want to receive the order?"
 	,"OrderDatePickupQuestion": "What day you want to pickup your order?"
diff --git a/forms/ecomerce/checkout/locale/pt.json b/forms/ecomerce/checkout/locale/pt.json
index 7d511ba3..b43120a1 100644
--- a/forms/ecomerce/checkout/locale/pt.json
+++ b/forms/ecomerce/checkout/locale/pt.json
@@ -8,6 +8,7 @@
 	,"ReceiveThroughtAgency": "Receber por agência"
 	,"ReceiveThroughtRoute": "Transporte Verdnatura"
 	,"PickupInStore": "Recolher no armazém"
+	,"Select agency": "Selecione uma agência"
 	
 	,"OrderDateDeliveryQuestion": "Que dia queres receber o pedido?"
 	,"OrderDatePickupQuestion": "Que dia queres recolher o pedido?"
diff --git a/forms/ecomerce/checkout/style.css b/forms/ecomerce/checkout/style.css
index 37ed975d..31a120f3 100644
--- a/forms/ecomerce/checkout/style.css
+++ b/forms/ecomerce/checkout/style.css
@@ -16,7 +16,7 @@
 {
 	font-size: 1.3em;
 }
-.answers .htk-select
+.answers .htk-combo
 {
 	max-width: 10em;
 	display: block;
diff --git a/forms/ecomerce/checkout/ui.xml b/forms/ecomerce/checkout/ui.xml
index bb1872df..f7b0c533 100755
--- a/forms/ecomerce/checkout/ui.xml
+++ b/forms/ecomerce/checkout/ui.xml
@@ -69,7 +69,7 @@
 				</div>
 			</htk-step>
 			<htk-step name="date">
-				<h2 id="date-question">_OrderDateDeliveryQuestion</h2>
+				<h2 id="date-question"/>
 				<div class="answers">
 					<htk-calendar
 						id="calendar"
@@ -102,25 +102,15 @@
 					</htk-repeater>
 				</div>
 			</htk-step>
-			<htk-step name="agency">
-				<h2>_AgencyQuestion</h2>
+			<htk-step name="delivery">
+				<h2 id="wh-question"/>
 				<div class="answers target">
 					<htk-combo
 						id="agency"
 						lot="lot"
 						name="agency"
-						show-field="description"
-						on-changed="onFieldChange"
-						model="agencies"/>
-				</div>
-			</htk-step>
-			<htk-step name="pickup">
-				<h2>_PickupWarehouseQuestion</h2>
-				<div class="answers target">
-					<htk-combo
-						id="warehouse"
-						lot="lot"
-						name="agency"
+						not-null="true"
+						placeholder="_Select agency"
 						show-field="description"
 						on-changed="onFieldChange"
 						model="agencies"/>
@@ -142,7 +132,7 @@
 						_ReceiveThroughtRoute
 					</p>
 					<p id="pickup-text">
-						<span>_Warehouse</span> {{warehouse.description}}
+						<span>_Warehouse</span> {{agency.description}}
 					</p>
 					<button id="confirm-button" class="thin" on-click="onConfirmClick">
 						_Confirm
diff --git a/image/icon/light/access-log.svg b/image/icon/light/access-log.svg
index fc0d2119..8cbbe4c3 100644
--- a/image/icon/light/access-log.svg
+++ b/image/icon/light/access-log.svg
@@ -16,7 +16,7 @@
    height="16"
    id="svg7384"
    version="1.1"
-   inkscape:version="0.48.5 r10040"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
    width="16">
   <metadata
      id="metadata90">
@@ -36,8 +36,8 @@
      bordercolor="#666666"
      borderopacity="1"
      inkscape:current-layer="layer9"
-     inkscape:cx="-0.061047297"
-     inkscape:cy="6.5448724"
+     inkscape:cx="8"
+     inkscape:cy="8"
      gridtolerance="10"
      inkscape:guide-bbox="true"
      guidetolerance="10"
@@ -58,21 +58,21 @@
      inkscape:snap-nodes="true"
      inkscape:snap-others="false"
      inkscape:snap-to-guides="true"
-     inkscape:window-height="1014"
+     inkscape:window-height="1016"
      inkscape:window-maximized="1"
      inkscape:window-width="1920"
      inkscape:window-x="1920"
      inkscape:window-y="27"
-     inkscape:zoom="31.384543">
+     inkscape:zoom="51.4375">
     <inkscape:grid
        empspacing="2"
        enabled="true"
        id="grid4866"
-       originx="200px"
-       originy="120px"
+       originx="200"
+       originy="120"
        snapvisiblegridlinesonly="true"
-       spacingx="1px"
-       spacingy="1px"
+       spacingx="1"
+       spacingy="1"
        type="xygrid"
        visible="true" />
   </sodipodi:namedview>
@@ -95,7 +95,7 @@
     <path
        sodipodi:cx="49.5"
        sodipodi:cy="342.5"
-       d="m 52,342.5 c 0,1.38071 -1.119288,2.5 -2.5,2.5 -1.380712,0 -2.5,-1.11929 -2.5,-2.5 0,-1.38071 1.119288,-2.5 2.5,-2.5 1.380712,0 2.5,1.11929 2.5,2.5 z"
+       d="M 52,342.5 A 2.5,2.5 0 0 1 49.5,345 2.5,2.5 0 0 1 47,342.5 2.5,2.5 0 0 1 49.5,340 2.5,2.5 0 0 1 52,342.5 Z"
        id="path3942-6"
        sodipodi:rx="2.5"
        sodipodi:ry="2.5"
diff --git a/image/icon/light/add.svg b/image/icon/light/add.svg
index 2af36bb9..9a8fa617 100644
--- a/image/icon/light/add.svg
+++ b/image/icon/light/add.svg
@@ -11,7 +11,7 @@
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    id="svg7384"
    version="1.1"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
    height="16"
    sodipodi:docname="add.svg"
    width="16">
@@ -54,7 +54,7 @@
      borderopacity="1"
      guidetolerance="10"
      inkscape:snap-bbox-midpoints="false"
-     inkscape:cx="8"
+     inkscape:cx="3.3398058"
      inkscape:bbox-paths="false"
      inkscape:snap-grids="true"
      inkscape:pageopacity="1"
@@ -65,15 +65,15 @@
      fit-margin-bottom="0">
     <inkscape:grid
        visible="true"
-       spacingx="1px"
+       spacingx="1"
        type="xygrid"
-       spacingy="1px"
+       spacingy="1"
        id="grid4866"
        empspacing="2"
        enabled="true"
        snapvisiblegridlinesonly="true"
-       originx="-3px"
-       originy="-3px" />
+       originx="-3"
+       originy="-3" />
   </sodipodi:namedview>
   <title
      id="title9167">Gnome Symbolic Icon Theme</title>
diff --git a/image/icon/light/down.svg b/image/icon/light/down.svg
new file mode 100644
index 00000000..ceb75dc3
--- /dev/null
+++ b/image/icon/light/down.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="#000000"
+   height="24"
+   viewBox="0 0 24 24"
+   width="24"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="down.svg"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="34.291667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="1920"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"
+     id="path2"
+     style="fill:#666666;fill-opacity:1" />
+  <path
+     d="M0-.75h24v24H0z"
+     fill="none"
+     id="path4" />
+</svg>
diff --git a/js/db/lot.js b/js/db/lot.js
index 0be4d385..e5e900b2 100644
--- a/js/db/lot.js
+++ b/js/db/lot.js
@@ -81,4 +81,50 @@ module.exports = new Class
 		if (child.nodeType === Node.TEXT_NODE)
 			this.query = child.textContent;
 	}
+	
+	,refresh: function ()
+	{
+		if (this._model)
+			this._model.refresh ();
+	}
+	
+	,performOperations: function ()
+	{
+		if (this._model)
+			this._model.performOperations ();
+	}
+	
+	/**
+	 * Get the index of the column from its name.
+	 *
+	 * @param {string} columnName The column name
+	 * @return {integer} The column index or -1 if column not exists
+	 */
+	,getColumnIndex: function (columnName)
+	{
+		return this._model ?
+			this._model.getColumnIndex (columnName) : -1;
+	}
+
+	/**
+	 * Gets a value from the form using the column index.
+	 *
+	 * @param {string} columnName The column index
+	 * @return {Object} The value
+	 */
+	,getByIndex: function (column)
+	{
+		return this._model.getByIndex (this._row, column);
+	}
+
+	/**
+	 * Sets a value on the form using the column index.
+	 *
+	 * @param {string} columnName The column index
+	 * @param {Object} value The new value
+	 */
+	,setByIndex: function (column, value)
+	{
+		return this._model.setByIndex (this._row, column, value);
+	}
 });
diff --git a/js/hedera/gui.js b/js/hedera/gui.js
index 0b87644e..b0b1bc9d 100644
--- a/js/hedera/gui.js
+++ b/js/hedera/gui.js
@@ -75,7 +75,6 @@ module.exports = new Class
 	
 		this._shown = true;
 		this.doc.body.appendChild (this.node);
-		Htk.Toast.pushTop (this.$.formHolder);
 		
 		if (Vn.isMobile ())
 		{
@@ -106,7 +105,6 @@ module.exports = new Class
 		if (Vn.isMobile ())
 			window.removeEventListener ('scroll', this._onScrollHandler);
 
-		Htk.Toast.popTop ();
 		this.formParam.unref ();
 		this.closeForm ();
 		this.hideMenu ();
diff --git a/js/hedera/style.css b/js/hedera/style.css
index 0cb2ea61..7208bdfd 100644
--- a/js/hedera/style.css
+++ b/js/hedera/style.css
@@ -149,28 +149,33 @@ p
 /* Efects */
 
 button,
-.list-row,
-.clickable,
-.clickable-img
-{
-	cursor: pointer;
-}
-button,
+input[type=submit],
+input[type=button],
+input[type=reset],
+select,
+.button,
 .list-row,
 .clickable
 {
-	transition: background-color 200ms ease-out;
-	-webkit-transition: background-color 200ms ease-out;
+	cursor: pointer;
+	transition: background-color 500ms ease-out;
+	-webkit-transition: background-color 500ms ease-out;
 }
 button:hover,
+input[type=submit]:hover,
+input[type=button]:hover,
+input[type=reset]:hover,
+select:hover,
+.button:hover,
 .list-row:hover,
 .clickable:hover
 {
-	background-color: rgba(1, 1, 1, 0.05);
+	background-color: rgba(1, 1, 1, 0.1);
 }
 
 .clickable-img
 {
+	cursor: pointer;
 	transition: opacity 200ms ease-out;
 	-webkit-transition: opacity 200ms ease-out;
 }
@@ -187,7 +192,8 @@ button:focus
 	outline: 1px solid rgba(1, 1, 1, 0.15);
 	-moz-outline-radius: .1em;
 }
-input:focus
+input:focus,
+.input:focus
 {
 	outline: none;
 	border-bottom: 1px solid black;
@@ -269,9 +275,13 @@ input[type=radio]
 }
 select
 {
-	background-color: white;
-	-moz-appearance: none;
+	background-color: transparent;
 	appearance: none;
+	-moz-appearance: none;
+}
+select:hover
+{
+	background-color: rgba(1, 1, 1, 0.1);
 }
 option
 {
@@ -279,8 +289,8 @@ option
 	border-width: 0;
 	font-weight: normal;
 	font-size: 1em;
+	cursor: pointer;
 }
-select,
 option
 {
 	cursor: pointer;
@@ -291,21 +301,14 @@ option
 button,
 input[type=submit],
 input[type=button],
-input[type=reset]
+input[type=reset],
+.button
 {
 	border: none;
-	background-color: transparent;
 	padding: 0.5em;
-	cursor: pointer;
-	border-radius: 0.1em;
+	background-color: transparent;
 	margin: -0.5em;
-}
-button:hover,
-input[type=submit]:hover,
-input[type=button]:hover,
-input[type=reset]:hover
-{
-	background-color: rgba(1, 1, 1, 0.1);
+	border-radius: 0.1em;
 }
 
 /* Flat button */
diff --git a/js/htk/field.js b/js/htk/field.js
index 9c2393d5..c87fcaaf 100644
--- a/js/htk/field.js
+++ b/js/htk/field.js
@@ -104,17 +104,20 @@ module.exports = new Class
 	}
 
 	,_editable: true
-	,_lockEntry: false
+	,_lockField: false
 
 	,_setValue: function (newValue)
 	{
-		Vn.ParamIface.prototype._setValue.call (this, newValue);
+		if (!this._putValue (newValue))
+			return;
 
-		if (!this._lockEntry)
-			this.putValue (newValue);
+		if (!this._lockField)
+			this._putFieldValue (newValue);
 
 		if (this.conditionalFunc)
 			this.conditionalFunc (this, newValue);
+
+		this._notifyChanges ();
 	}
 
 	/**
@@ -123,12 +126,20 @@ module.exports = new Class
 	 *
 	 * @param {*} value The new entry value
 	 */
-	,valueChanged: function (value)
+	,_notifyFieldChange: function (value)
 	{
-		this._lockEntry = true;
+		this._lockField = true;
 		this._setValue (value);
-		this._lockEntry = false;
+		this._lockField = false;
 	}
+	
+	/**
+	 * Virtual method that must be implemented by class childs to put the value
+	 * on the associated entry.
+	 *
+	 * @param {*} value The new value for the entry
+	 */
+	,_putFieldValue: function () {}
 
 	/**
 	 * Virtual method that must be implemented by class childs to set the entry
@@ -137,13 +148,5 @@ module.exports = new Class
 	 * @param {boolean} editable Whether the user is allowed to edit the entry
 	 */
 	,setEditable: function () {}
-
-	/**
-	 * Virtual method that must be implemented by class childs to put the value
-	 * on the associated entry.
-	 *
-	 * @param {*} value The new value for the entry
-	 */
-	,putValue: function () {}
 });
 
diff --git a/js/htk/field/calendar.js b/js/htk/field/calendar.js
index 594ce774..dc27724d 100644
--- a/js/htk/field/calendar.js
+++ b/js/htk/field/calendar.js
@@ -234,7 +234,7 @@ module.exports = new Class
 		this.selectedCell = cellIndex;
 	}
 
-	,putValue: function ()
+	,_putFieldValue: function ()
 	{
 		this.goToSelectedMonth ();
 	}
@@ -249,7 +249,7 @@ module.exports = new Class
 
 			var newDate = new Date (this.year, this.month, cell.day);
 			this.emit ('pick', newDate);
-			this.valueChanged (newDate);
+			this._notifyFieldChange (newDate);
 		}
 	}
 
diff --git a/js/htk/field/check.js b/js/htk/field/check.js
index 2cfc9b5e..0e6d4b0d 100644
--- a/js/htk/field/check.js
+++ b/js/htk/field/check.js
@@ -13,10 +13,10 @@ module.exports = new Class
 
 	,changed: function ()
 	{
-		this.valueChanged (this.node.checked);
+		this._notifyFieldChange (this.node.checked);
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		if (value)
 			this.node.checked = true;
diff --git a/js/htk/field/combo.js b/js/htk/field/combo.js
index 34eb2137..9bcfb00b 100644
--- a/js/htk/field/combo.js
+++ b/js/htk/field/combo.js
@@ -101,6 +101,22 @@ module.exports = new Class
 				return this._notNull;
 			}
 		},
+		/**
+		 * The field to use for internal value.
+		 */
+		valueField:
+		{
+			type: String,
+			value: 'id'
+		},
+		/**
+		 * The field to display.
+		 */
+		showField:
+		{
+			type: String,
+			value: 'name'
+		},
 		params:
 		{ 
 			type: Object
@@ -125,16 +141,6 @@ module.exports = new Class
 				return this._params;
 			}
 		}
-		,valueField:
-		{
-			type: String,
-			value: 'id'
-		}
-		,showField:
-		{
-			type: String,
-			value: 'name'
-		}
 	}
 	
 	,_row: -1
@@ -144,22 +150,33 @@ module.exports = new Class
 	,render: function ()
 	{
 		var node = this.createRoot ('div');
-		node.className = 'htk-combo';
+		node.className = 'htk-combo input clickable';
+		node.tabIndex = 0;
+		node.addEventListener ('mousedown',
+			this._onMouseDown.bind (this));
+		
+		var icons = this.createElement ('div');
+		icons.className = 'icons';
+		node.appendChild (icons);
 		
 		var clearButton = this.createElement ('htk-icon');
-		clearButton.className = 'clear';
+		clearButton.className = 'clear button';
 		clearButton.icon = 'close';
+		clearButton.node.title = _('Clear');
 		clearButton.on ('click', this._onClearClick, this);
-		node.appendChild (clearButton.node);
-	
-		var button = this.createElement ('button');
-		button.type = 'button';
-		button.className = 'htk-combo input';
-		button.addEventListener ('mousedown',
-			this._onButtonMouseDown.bind (this));
-		node.appendChild (button);
+		clearButton.on ('mousedown', this._onClearMouseDown, this);
+		icons.appendChild (clearButton.node);
 
-		this.button = button;
+		var downIcon = this.createElement ('htk-icon');
+		downIcon.className = 'down';
+		downIcon.icon = 'down';
+		icons.appendChild (downIcon.node);
+	
+		var text = this.createElement ('div');
+		text.className = 'text';
+		node.appendChild (text);
+
+		this.text = text;
 		this.clearButton = clearButton;
 		this._refreshShowText ();
 	}
@@ -168,6 +185,11 @@ module.exports = new Class
 	{
 		this.value = null;
 	}
+
+	,_onClearMouseDown: function (_, event)
+	{
+		event.preventDefault ();
+	}
 	
 	,_setRow: function (row)
 	{
@@ -176,8 +198,11 @@ module.exports = new Class
 		this.rowChanged ();
 	}
 	
-	,_onButtonMouseDown: function (e)
+	,_onMouseDown: function (e)
 	{
+		if (e.defaultPrevented)
+			return;
+
 		if (this._popup)
 		{
 			this._popup.hide ();
@@ -209,6 +234,7 @@ module.exports = new Class
 	
 	,_onGridClicked: function (grid, e)
 	{
+		e.stopPropagation ();
 		var target = e.target;
 		var parentNode = target.parentNode;
 		
@@ -226,11 +252,18 @@ module.exports = new Class
 		else
 			value = null;
 
-		this._setRow (row);
-		this.valueChanged (value);
 		this._popup.hide ();
-		
-		e.stopPropagation ();
+
+		var changed = this._putValue (value);
+		this._setRow (row);
+
+		if (changed)
+		{
+			if (this.conditionalFunc)
+				this.conditionalFunc (this, newValue);
+
+			this._notifyChanges ();
+		}		
 	}
 	
 	,_onPopupClose: function ()
@@ -254,15 +287,15 @@ module.exports = new Class
 
 		if (this.node)
 		{
-			var visibility;
+			var display;
 
 			if (this._value && !this._notNull)
-				visibility = 'visible';
+				display = '';
 			else
-				visibility = 'hidden';
+				display = 'none';
 
-			this.clearButton.node.style.visibility = visibility;
-			Vn.Node.setText (this.button, showText);
+			this.clearButton.node.style.display = display;
+			Vn.Node.setText (this.text, showText);
 		}
 	}
 	
@@ -282,11 +315,6 @@ module.exports = new Class
 		else
 			this._setRow (-1);
 	}
-	
-	,setEditable: function (editable)
-	{
-		this.node.disabled = !editable;
-	}
 
 	,_selectOption: function ()
 	{
@@ -300,8 +328,13 @@ module.exports = new Class
 		this._setRow (row);
 	}
 
-	,putValue: function ()
+	,_putFieldValue: function ()
 	{
 		this._selectOption ();
 	}
+	
+	,setEditable: function (editable)
+	{
+		this.node.disabled = !editable;
+	}
 });
diff --git a/js/htk/field/date-chooser.js b/js/htk/field/date-chooser.js
index 275bb793..48978122 100644
--- a/js/htk/field/date-chooser.js
+++ b/js/htk/field/date-chooser.js
@@ -21,7 +21,7 @@ module.exports = new Class
 		this.setEditable (this._editable);
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		var dateString;
 
@@ -72,11 +72,11 @@ module.exports = new Class
 		this.popup.hide ();
 		
 		var newDate = calendar.value;
-		this.putValue (newDate);
-		this.valueChanged (newDate);
+		this._putFieldValue (newDate);
+		this._notifyFieldChange (newDate);
 	}
 
-	,_onClick: function (event)
+	,_onClick: function ()
 	{
 		this.ignoreCalendarChange = true;
 		this.calendar.value = this._value;
diff --git a/js/htk/field/entry.js b/js/htk/field/entry.js
index a6970f3a..7beacc5e 100644
--- a/js/htk/field/entry.js
+++ b/js/htk/field/entry.js
@@ -20,10 +20,10 @@ module.exports = new Class
 		else
 			newValue = this.node.value;
 
-		this.valueChanged (newValue);
+		this._notifyFieldChange (newValue);
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		if (!value)
 			this.node.value = '';
diff --git a/js/htk/field/html.js b/js/htk/field/html.js
index 166cab44..88d8389d 100644
--- a/js/htk/field/html.js
+++ b/js/htk/field/html.js
@@ -9,7 +9,7 @@ module.exports = new Class
 		this.createRoot ('div');
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		this.node.innerHTML = value;
 	}
diff --git a/js/htk/field/image.js b/js/htk/field/image.js
index 5b72c71b..dcc18c70 100644
--- a/js/htk/field/image.js
+++ b/js/htk/field/image.js
@@ -160,7 +160,7 @@ module.exports = new Class
 			this.img.src = '';
 	}
 
-	,putValue: function ()
+	,_putFieldValue: function ()
 	{
 		this._refreshSrc ();
 	}
diff --git a/js/htk/field/label.js b/js/htk/field/label.js
index b036a834..9160df61 100644
--- a/js/htk/field/label.js
+++ b/js/htk/field/label.js
@@ -14,7 +14,7 @@ module.exports = new Class
 			,set: function (x)
 			{
 				this._format = _(x);
-				this.putValue (this._value);
+				this._putFieldValue (this._value);
 			}
 			,get: function ()
 			{
@@ -52,7 +52,7 @@ module.exports = new Class
 		this.createRoot ('label');
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		Vn.Node.setText (this.node,
 			Vn.Value.format (value, this._format));
diff --git a/js/htk/field/radio.js b/js/htk/field/radio.js
index b80870ae..a321ee54 100644
--- a/js/htk/field/radio.js
+++ b/js/htk/field/radio.js
@@ -64,7 +64,7 @@ module.exports = new Class
 			this.node.checked = false;
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		if (!value)
 			this.node.value = '';
diff --git a/js/htk/field/search-entry.js b/js/htk/field/search-entry.js
index 62ac2268..b6fc9dac 100644
--- a/js/htk/field/search-entry.js
+++ b/js/htk/field/search-entry.js
@@ -34,10 +34,10 @@ module.exports = new Class
 		else
 			newValue = this._input.value;
 
-		this.valueChanged (newValue);
+		this._notifyFieldChange (newValue);
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		if (!value)
 			this._input.value = '';
diff --git a/js/htk/field/spin.js b/js/htk/field/spin.js
index 89342e79..620eda2a 100644
--- a/js/htk/field/spin.js
+++ b/js/htk/field/spin.js
@@ -18,10 +18,10 @@ module.exports = new Class
 	{
 		var newValue = (this.node.value == '') ? null : parseFloat (this.node.value);
 		this.node.value = newValue;
-		this.valueChanged (newValue);
+		this._notifyFieldChange (newValue);
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		var text;
 		
diff --git a/js/htk/field/text-area.js b/js/htk/field/text-area.js
index f375d7c6..1aef808a 100644
--- a/js/htk/field/text-area.js
+++ b/js/htk/field/text-area.js
@@ -19,7 +19,7 @@ module.exports = new Class
 		else
 			value = this.node.value;
 
-		this.valueChanged (value);
+		this._notifyFieldChange (value);
 	}
 
 	,setEditable: function (editable)
@@ -27,7 +27,7 @@ module.exports = new Class
 		this.node.readOnly = !editable;
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		if (!value)
 			this.node.value = '';
diff --git a/js/htk/field/text.js b/js/htk/field/text.js
index cdd72c4d..85d59896 100644
--- a/js/htk/field/text.js
+++ b/js/htk/field/text.js
@@ -14,7 +14,7 @@ module.exports = new Class
 			,set: function (x)
 			{
 				this._format = _(x);
-				this.putValue (this._value);
+				this._putFieldValue (this._value);
 			}
 			,get: function ()
 			{
@@ -30,7 +30,7 @@ module.exports = new Class
 		this._node = this.createTextNode ('');
 	}
 
-	,putValue: function (value)
+	,_putFieldValue: function (value)
 	{
 		this._node.nodeValue = Vn.Value.format (value, this._format);
 	}
diff --git a/js/htk/popup.js b/js/htk/popup.js
index 45ea7db2..b6a81b81 100644
--- a/js/htk/popup.js
+++ b/js/htk/popup.js
@@ -122,7 +122,6 @@ module.exports = new Class
 			var bg = this._bg = this.createElement ('div');
 			bg.className = 'htk-background';
 			bg.addEventListener ('mousedown', this._bgMouseDownHandler);
-			Htk.Toast.pushTop (bg);
 
 			Vn.Node.addClass (node, 'modal');
 			bg.appendChild (node);
@@ -245,7 +244,6 @@ module.exports = new Class
 
 		if (this._bg)		
 		{
-			Htk.Toast.popTop ();
 			Vn.Node.remove (this._bg);
 			Vn.Node.removeClass (node, 'modal');
 			this._bg = null;
diff --git a/js/htk/style.css b/js/htk/style.css
index 14b1af65..07ef4a4c 100644
--- a/js/htk/style.css
+++ b/js/htk/style.css
@@ -136,33 +136,43 @@ td.cell-image .htk-image
 
 .htk-combo
 {
-	position: relative;
+	line-height: 2.2em;
+}
+.htk-combo > .text
+{
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
 }
 .htk-combo > button
 {
 	max-width: 100%;
 	height: 2em;
 	text-align: left;
-	z-index: 1;
 }
-.htk-combo > .clear
+.htk-combo > .icons
+{
+	float: right;
+	height: 100%;
+	z-index: 100;
+	display: block;
+}
+.htk-combo > .icons > *
+{
+	vertical-align: middle;
+	display: inline;
+}
+.htk-combo > .icons > .clear
 {
-	position: absolute;
-	right: 0;
-	margin: .2em;
 	padding: .3em;
-	cursor: pointer;
-	z-index: 2;
+	margin: 0;
 	border-radius: .1em;
-	visibility: hidden;
+	z-index: 40;
+	display: none;
 }
-.htk-combo:hover > .clear
+.htk-combo:hover > .icons > .clear
 {
-	visibility: visible;
-}
-.htk-combo > .clear:hover
-{
-	background-color: rgba(0, 0, 0, 0.1)
+	display: inline;
 }
 
 .htk-combo-menu
diff --git a/js/htk/toast.js b/js/htk/toast.js
index 7f112943..43d85b87 100644
--- a/js/htk/toast.js
+++ b/js/htk/toast.js
@@ -39,39 +39,6 @@ module.exports =
 		this._showText (message, 'error');
 	}
 	
-	,pushTop: function (top)
-	{
-		this._topHeap.push (top);
-		this._refreshPosition ();
-	}
-	
-	,popTop: function ()
-	{
-		var top = this._topHeap.pop ();
-		this._refreshPosition ();
-		return top;
-	}
-
-	,_refreshPosition: function ()
-	{
-		if (!this._container)
-			return;
-		
-		var left;
-		var heapLen = this._topHeap.length;
-		
-		if (heapLen > 0)
-		{
-			var top = this._topHeap[heapLen - 1];
-			var rect = top.getBoundingClientRect ();
-			left = (rect.left + parseInt (rect.width / 2) - window.pageXOffset) +'px';
-		}
-		else
-			left = '';
-
-		this._container.style.left = left;
-	}
-	
 	/**
 	 * Hides all currently displayed toast messages.
 	 */
@@ -106,8 +73,6 @@ module.exports =
 			this._timeouts = [];
 			this._container = container;
 		}
-
-		this._refreshPosition ();
 	}
 
 	,_showText: function (message, className)
diff --git a/js/vn/iterator-iface.js b/js/vn/iterator-iface.js
index 4e9d2cae..b09fa06a 100644
--- a/js/vn/iterator-iface.js
+++ b/js/vn/iterator-iface.js
@@ -37,35 +37,11 @@ module.exports = new Class
 		}
 	}
 	
-	,refresh: function ()
-	{
-		if (this._model)
-			this._model.refresh ();
-	}
-	
-	/**
-	 * Get the index of the column from its name.
-	 *
-	 * @param {string} columnName The column name
-	 * @return {integer} The column index or -1 if column not exists
-	 */
-	,getColumnIndex: function (columnName)
-	{
-		return this._model ?
-			this._model.getColumnIndex (columnName) : -1;
-	}
-	
 	,insertRow: function ()
 	{
 		if (this._model)
 			this.row = this._model.insertRow ();
 	}
-	
-	,performOperations: function ()
-	{
-		if (this._model)
-			this._model.performOperations ();
-	}
 
 	/**
 	 * Removes the current row.
@@ -98,26 +74,4 @@ module.exports = new Class
 	{
 		this._model.set (this._row, columnName, value);
 	}
-
-	/**
-	 * Gets a value from the form using the column index.
-	 *
-	 * @param {string} columnName The column index
-	 * @return {Object} The value
-	 */
-	,getByIndex: function (column)
-	{
-		return this._model.getByIndex (this._row, column);
-	}
-
-	/**
-	 * Sets a value on the form using the column index.
-	 *
-	 * @param {string} columnName The column index
-	 * @param {Object} value The new value
-	 */
-	,setByIndex: function (column, value)
-	{
-		return this._model.setByIndex (this._row, column, value);
-	}
 });
diff --git a/js/vn/param-iface.js b/js/vn/param-iface.js
index 1a496629..608e01e0 100644
--- a/js/vn/param-iface.js
+++ b/js/vn/param-iface.js
@@ -66,14 +66,25 @@ module.exports = new Class
 	,_oneWay: false
 	
 	,_setValue: function (newValue)
+	{
+		if (this._putValue (newValue))
+			this._notifyChanges ();
+	}
+
+	,_putValue: function (newValue)
 	{
 		if (Value.simpleEquals (newValue, this._value))
-			return;
+			return false;
 
 		this._value = Value.simpleClone (newValue);
+		return true;
+	}
+
+	,_notifyChanges: function ()
+	{
 		this._refreshLot ();
 		this._refreshParam ();
-		this.emit ('changed', newValue);
+		this.emit ('changed', this._value);
 	}
 
 	,_setType: function (type)