Refactor, Component improved

forms/ecomerce/basket/basket.js

@@ -39,9 +39,14 @@ Hedera.Basket = new Class
 		this.hash.setAll ({form: 'ecomerce/confirm'});
 	}
 
-	,repeaterFunc: function (res, form)
+	,repeaterFunc: function (res, lot)
 	{
-		res.$.subtotal.value = this.subtotal (form);
+		res.$.subtotal.value = this.subtotal (lot);
+
+		if (lot.$.amount > lot.$.available)
+			Vn.Node.addClass (res.$.available, 'unavailable');
+		else
+			Vn.Node.removeClass (res.$.available, 'unavailable');
 	}
 
 	,onDeleteClick: function  (button)
@@ -50,9 +55,9 @@ Hedera.Basket = new Class
 			button.lot.deleteRow ();
 	}
 
-	,subtotal: function (form)
+	,subtotal: function (lot)
 	{
-		return form.$.amount * form.$.price;
+		return lot.$.amount * lot.$.price;
 	}
 });
 

forms/ecomerce/basket/style.css

@@ -54,9 +54,14 @@
 
 /* Fields */
 
-.basket td.available-exceeded input
+.basket ._available
 {
-	background-color: #FCC;
+	visibility: hidden;
+}
+.basket ._available.unavailable
+{
+	color: red;
+	visibility: visible;
 }
 .basket .icon > img
 {

forms/ecomerce/basket/ui.xml

@@ -28,11 +28,10 @@
 		</div>
 		<htk-repeater renderer="repeaterFunc">
 			<db-model id="items" property="model" updatable="true">
-				SELECT i.id, i.amount, i.price, a.Article, a.Categoria, 
+				SELECT r.id, r.amount, r.price, 0 available,
-					a.Medida, a.Tallos, a.Color, o.Abreviatura, a.Foto
+						i.name, i.size, i.category, i.image
-					FROM basket_item i
+					FROM basket_item r
-						JOIN vn2008.Articles a ON a.Id_Article = i.item_id
+						JOIN vn.item i ON i.id = r.item_id
-						LEFT JOIN vn2008.Origen o ON a.id_origen = o.id
 			</db-model>
 			<custom>
 				<div class="line">
@@ -43,21 +42,24 @@
 						icon="delete"
 						on-click="onDeleteClick"/>
 					<htk-image
-						value="{{Foto}}"
+						value="{{image}}"
 						class="photo"
 						directory="catalog"
 						subdir="200x200"
 						full-dir="900x900"/>
 					<p class="concept">
-						{{Article}} {{Medida}} {{Categoria}}
+						{{name}} {{size}} {{category}}
 					</p>
 					<p class="amount">
-						{{amount}} x
+						<span id="row">{{amount}}</span> x
 						<htk-text lot="iter" name="price" format="%.2d€"/>
 						<span class="subtotal">
 							<htk-text id="subtotal" format="%.2d€"/>
 						</span>
 					</p>
+					<span id="available">
+						{{available}} <span>_availables</span> 
+					</span>
 					<div class="clear"/>
 				</div>
 			</custom>

forms/ecomerce/catalog/catalog.js

@@ -109,10 +109,10 @@ Hedera.Catalog = new Class
 	
 	,onBasketReady: function (form)
 	{
-		if (form.get ('method') != 'PICKUP')
+		if (form.$.method != 'PICKUP')
 			Vn.Node.setText (this.$.method, _('Agency'));
 		else
-			Vn.Node.setText (this.$.method, _('Warehouse'));
+			Vn.Node.setText (this.$.method, _('Store'));
 	}
 	
 	,onOrderChange: function (combo)
@@ -137,7 +137,7 @@ Hedera.Catalog = new Class
 
 		if (shouldRefresh)
 		{
-			this.$.items.query = this.buildQuery ('CALL catalogGetItems ()');
+			this.$.items.query = this.buildQuery ('CALL catalogGetItems');
 			this.$.items.refresh ();
 
 			var nTags = maxFilters - this.nFilters;
@@ -509,7 +509,7 @@ Hedera.Catalog = new Class
 		{
 			this.conn.execQuery (sql);
 
-			var itemName = this.$.card.$.Article;
+			var itemName = this.$.card.$.name;
 			Htk.Toast.showMessage (
 				Vn.Value.sprintf (_('Added%dOf%s'), amountSum, itemName));
 		}

forms/ecomerce/catalog/style.css

@@ -48,6 +48,10 @@
 	white-space: nowrap;
 	overflow: hidden;
 }
+.right-panel .filter
+{
+	padding: 1em 1.8em;
+}
 .right-panel .categories
 {
 	width: 95%;

forms/ecomerce/catalog/ui.xml

@@ -39,38 +39,16 @@
 		result-index="2"
 		auto-load="false">
 	</db-model>
-	<db-form id="basket" on-ready="onBasketReady">
+	<db-lot id="basket" on-ready="onBasketReady">
-		<db-model property="model">
 		SELECT o.id, o.date_send, ag.description agency, v.code method
 			FROM basket o
-					JOIN vn2008.Agencias ag ON ag.Id_Agencia = o.agency_id
+				JOIN vn.agencyMode ag ON ag.id = o.agency_id
 				JOIN vn2008.Vistas v ON v.vista_id = o.delivery_method_id
-		</db-model>
+	</db-lot>
-	</db-form>
+	<db-lot id="card-extend" lot="card-lot">
-	<db-query id="basket-lines">
+		SELECT i.description
-		SELECT item_id, warehouse_id, SUM(amount) amount
+			FROM vn.item i WHERE i.id = #item
-			FROM basket_item
+	</db-lot>
-			GROUP BY warehouse_id
-	</db-query>
-	<db-query id="tags" on-ready="onTagsReady">
-		SELECT it.tagFk, SUM(it.priority) priority
-			FROM vn.itemTag it
-				JOIN vn.item i ON i.id = it.itemFk
-			WHERE #filter
-			GROUP BY tagFk
-			ORDER BY priority DESC
-			LIMIT 6
-	</db-query>
-	<db-form id="card-extend">
-		<db-model
-			property="model"
-			lot="card-lot">
-			SELECT i.description, o.name origin
-				FROM vn.item i
-					LEFT JOIN vn.originL10n o ON o.id = i.originFk
-				WHERE i.id = #item
-		</db-model>
-	</db-form>
 	<db-model
 		id="item-lots"
 		result-index="1"
@@ -126,23 +104,22 @@
 					icon="add"
 					on-click="onAddItemClick"
 					class="add-button"/>
-				<h2>{{item.name}}</h2>
+				<h2>{{name}}</h2>
 				<p class="producer">
-					{{item.producer}}
+					{{producer}}
 				</p>
 				<p>
-					@{{item.id}}
+					@{{id}}
 				</p>
 				<p>
-					<span>_Size</span> {{item.size}}
+					{{tag1}} {{val1}}, {{tag2}} {{val2}}
-					<span>_Category</span> {{item.category}}
 				</p>
-				<p class="color">
+				<p>
-					<span>_Color</span> {{item.inkFk}}
+					{{tag3}} {{val3}}
 					<htk-text lot="item" name="stems" format="_, %.0d Units"/>
 				</p>
 				<div class="aval-price">
-					{{item.available}} 
+					{{available}} 
 					<span class="from">_from</span> 
 					<span class="price">
 						<htk-text lot="item" name="price" format="%.2d€"/>
@@ -262,17 +239,23 @@
 				<p class="producer">
 					{{card.producer}}
 				</p>
+				<htk-repeater>
+					<db-lot property="model" lot="card-lot">
+						SELECT t.name, it.value
+							FROM vn.itemTag it
+								JOIN vn.tag t ON t.id = it.tagFk
+							WHERE it.id = #item
+							ORDER BY it.priority
+					</db-lot>
+					<custom>
 						<p>
-					<span>_Size</span> {{card.size}}, 
+							{{name}} {{value}}
-					<span>_Category</span> {{card.category}}
 						</p>
-				<p class="color">
+					</custom>
-					<span>_Color</span> {{card.inkFk}}
+				</htk-repeater>
+				<p>
 					<htk-text lot="card" name="Tallos" format="_, %.0d Units"/>
 				</p>
-				<p>
-					<span>_Origin</span> {{card.origin}}
-				</p>
 			</div>
 			<p class="desc">
 				{{cardExtend.description}}

js/hedera/gui.css

@@ -1,23 +1,23 @@
 
 @media screen {
 
-.vn-gui
+.hedera-gui
 {
 	height: inherit;
 }
 
 /* Font */
 
-.vn-gui .user-info,
+.hedera-gui .user-info,
-.vn-gui .menu-title,
+.hedera-gui .menu-title,
-.vn-gui .main-menu
+.hedera-gui ._main-menu
 {
 	font-size: 1.1em;
 }
 
 /* Navigation bar */
 
-.vn-gui .navbar
+.hedera-gui ._navbar
 {
 	position: fixed;
 	background-color: #009688;
@@ -34,7 +34,7 @@
 	transition-duration: 200ms;
 	transition-timing-function: ease-in-out;
 }
-.vn-gui .navbar .menu-button
+.hedera-gui ._navbar .menu-button
 {
 	position: absolute;
 	left: 0;
@@ -44,16 +44,16 @@
 	margin: 0;
 	height: 100%;
 }
-.vn-gui .navbar .menu-button img
+.hedera-gui ._navbar .menu-button img
 {
 	vertical-align: middle;
 	height: 1.8em;
 }
-.vn-gui .navbar .title
+.hedera-gui ._navbar ._title
 {
 	float: left;
 }
-.vn-gui .navbar .title > h1
+.hedera-gui ._navbar ._title > h1
 {
 	font-weight: normal;
 	font-size: 1.4em;
@@ -64,7 +64,7 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
-.vn-gui .navbar > .htk-spinner
+.hedera-gui ._navbar > .htk-spinner
 {
 	float: left;
 	margin: 1.05em .8em;
@@ -72,29 +72,29 @@
 
 /* Action bar */
 
-.action-bar
+._action-bar
 {
 	float: right;
 	padding: 0;
 	margin: 0;
 	height: 100%;
 }
-.action-bar > div
+._action-bar > div
 {
 	padding: 0;
 	margin: 0;
 	height: 100%;
 }
-.action-bar > div > *
+._action-bar > div > *
 {
 	float: right;
 }
-.action-bar button
+._action-bar button
 {
 	margin: 0;
 	padding: 1.25em .5em;
 }
-.action-bar button > img
+._action-bar button > img
 {
 	vertical-align: middle;
 	height: 1.4em;
@@ -102,7 +102,7 @@
 
 /* Background */
 
-.vn-gui > .background
+.hedera-gui > ._background
 {
 	z-index: 10;
 	position: fixed;
@@ -114,16 +114,17 @@
 	background-color: rgba(1, 1, 1, .7);
 	opacity: 0;
 }
-.vn-gui > .background.show
+.hedera-gui > ._background.show
 {
 	visibility: visible;
-	transition: opacity 200ms ease-out;
 	opacity: 1;
+	transition: opacity 200ms ease-out;
+	-webkit-transition: opacity 200ms ease-out;
 }
 
 /* Left panel */
 
-.vn-gui .left-panel
+.hedera-gui ._left-panel
 {
 	z-index: 20;
 	position: fixed;
@@ -135,7 +136,7 @@
 	box-shadow: 0 .2em .2em rgba(1, 1, 1, .4);
 	width: 15em;
 }
-.vn-gui .menu-overflow
+.hedera-gui .menu-overflow
 {
 	position: absolute;
 	top: 0;
@@ -144,24 +145,24 @@
 	bottom: 4em;
 	overflow: auto;
 }
-.vn-gui .menu-header
+.hedera-gui ._menu-header
 {
 	background-color: #333;
 	color: white;
 	padding: 1em;
 }
-.vn-gui .logo
+.hedera-gui .logo
 {
 	display: block;
 	width: 12em;
 	margin-bottom: .8em;
 }
-.vn-gui .user-info
+.hedera-gui .user-info
 {
 	width: 100%;
 	overflow: hidden;
 }
-.vn-gui .user-info > p
+.hedera-gui .user-info > p
 {
 	margin: 0;
 	margin-top: .2em;
@@ -169,19 +170,19 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.vn-gui button.logout
+.hedera-gui button.logout
 {
 	float: right;
 	margin: 0;
 	padding: .2em;
 	display: block;
 }
-.vn-gui button.logout > img
+.hedera-gui button.logout > img
 {
 	height: 1.2em;
 	display: block;
 }
-.vn-gui .supplant
+.hedera-gui ._supplant
 {
 	margin-top: .2em;
 	display: none;
@@ -189,7 +190,7 @@
 
 /* Test link */
 
-.vn-gui .test-link
+.hedera-gui ._test-link
 {
 	display: block;
 	margin: 1em auto;
@@ -201,43 +202,43 @@
 	border-radius: .1em;
 	text-align: center;
 }
-.vn-gui .test-link:hover
+.hedera-gui ._test-link:hover
 {
 	background-color: #4f61c5;
 }
 
 /* Menu */
 
-.vn-gui .main-menu,
+.hedera-gui ._main-menu,
-.vn-gui ul.submenu
+.hedera-gui ul.submenu
 {
 	list-style-type: none;
 	padding: 0;
 	margin: 0;
 }
-.vn-gui .main-menu > li
+.hedera-gui ._main-menu > li
 {
 	display: block;
 	padding: 0;
 	margin: 0;
 	width: 100%;
 }
-.vn-gui .main-menu a
+.hedera-gui ._main-menu a
 {
 	width: 70%;
 	padding: 0 15%;
 	display: block;
 	line-height: 2.8em;
 }
-.vn-gui .main-menu a.selected
+.hedera-gui ._main-menu a.selected
 {
 	background-color: rgba(1, 1, 1, .1);
 }
-.vn-gui ul.submenu
+.hedera-gui ul.submenu
 {
 	display: none;
 }
-.vn-gui ul.submenu.popup
+.hedera-gui ul.submenu.popup
 {
 	display: inline;
 	position: fixed;
@@ -252,7 +253,7 @@
 
 /* Social */
 
-.vn-gui .social
+.hedera-gui .social
 {
 	position: absolute;
 	bottom: 0;
@@ -262,7 +263,7 @@
 
 /* Body */
 
-	.vn-gui > .body
+	.hedera-gui > .body
 	{
 		margin-left: 15em;
 		padding-top: 3.9em;
@@ -274,11 +275,11 @@
 		transition-duration: 200ms;
 	}
 
-.vn-gui .form-holder
+.hedera-gui ._form-holder
 {
 	height: inherit;
 }
-.vn-gui .form-holder > *
+.hedera-gui ._form-holder > *
 {
 	position: relative;
 	height: inherit;
@@ -292,25 +293,25 @@
 
 @media screen and (max-width: 960px)
 {
-	.vn-gui .action-bar span.label,
+	.hedera-gui ._action-bar span.label,
-	.vn-gui .htk-button > span
+	.hedera-gui .htk-button > span
 	{
 		display: none;
 	}
-	.vn-gui > .navbar
+	.hedera-gui > ._navbar
 	{
 		padding-left: 2.8em;
 		left: 0;
 	}
-	.vn-gui > .body
+	.hedera-gui > .body
 	{
 		margin-left: 0;
 	}
-	.vn-gui .navbar .menu-button
+	.hedera-gui ._navbar .menu-button
 	{
 		display: block;
 	}
-	.vn-gui .left-panel
+	.hedera-gui ._left-panel
 	{
 		top: 0;
 		left: -15em;
@@ -319,16 +320,16 @@
 		transition: transform 200ms ease-out;
 		-webkit-transition: transform 200ms ease-out;
 	}
-	.vn-gui .left-panel.show
+	.hedera-gui ._left-panel.show
 	{
 		transform: translateZ(0) translateX(15em);
 		-webkit-transform: translateZ(0) translateX(15em);
 	}
-	.vn-gui .form-holder
+	.hedera-gui ._form-holder
 	{
 		left: 0;
 	}
-	.vn-gui ul.submenu
+	.hedera-gui ul.submenu
 	{
 		display: block;
 		background-color: #888;
@@ -340,7 +341,7 @@
 		transition: max-height 300ms ease-out;
 		-webkit-transition: max-height 300ms ease-out;
 	}
-	.vn-gui .main-menu li:hover > ul.submenu
+	.hedera-gui ._main-menu li:hover > ul.submenu
 	{
 		max-height: 20em;
 	}
@@ -350,8 +351,8 @@
 
 @media print
 {
-	.vn-gui .navbar,
+	.hedera-gui ._navbar,
-	.vn-gui .left-panel
+	.hedera-gui ._left-panel
 	{
 		display: none;
 	}

js/hedera/gui.js

@@ -13,6 +13,7 @@ require ('./gui.css');
 module.exports = new Class
 ({
 	Extends: Vn.Component,
+	Tag: 'hedera-gui',
 	Properties:
 	{
 		/**

js/hedera/gui.xml

@@ -7,18 +7,18 @@
 	SELECT default_form, image_dir, image_host FROM config;
 	SELECT production_domain, test_domain FROM config;
 </db-query>
-<div id="main" class="vn-gui">
+<div id="main">
-	<div id="navbar" class="navbar">
+	<div id="navbar">
-		<div id="action-bar" class="action-bar"/>
+		<div id="action-bar"/>
 		<button class="menu-button" on-click="onMenuButtonClick">
 			<img src="image/icon/dark/menu.svg" alt="_Menu"/>
 		</button>
-		<div id="title" class="title"/>
+		<div id="title"/>
-		<htk-spinner id="loader" class="loader dark"/>
+		<htk-spinner id="loader" class="dark"/>
 	</div>
-	<div id="left-panel" class="left-panel" on-click="onLeftPanelClick">
+	<div id="left-panel" on-click="onLeftPanelClick">
 		<div class="menu-overflow">
-			<div class="menu-header" id="menu-header">
+			<div id="menu-header">
 				<img class="logo" src="image/logo-dark.svg" alt="Verdnatura"/>
 				<div class="user-info">
 					<button class="logout" on-click="onLogoutClick" title="_Exit">
@@ -26,25 +26,25 @@
 					</button>
 					<p>{{user.name}}</p>
 				</div>
-				<div id="supplant" class="supplant user-info">
+				<div id="supplant" class="user-info">
 					<button class="logout" on-click="onSupplantExitClick" title="_Exit">
 						<img src="image/icon/dark/exit.svg" alt="_Exit"/>
 					</button>
 					<p id="supplanted"/>
 				</div>
 			</div>
-			<a id="test-link" class="test-link" href="{{newVersion.link}}">
+			<a id="test-link" href="{{newVersion.link}}">
 				{{newVersion.text}}
 			</a>
-			<ul id="main-menu" class="main-menu"/>
+			<ul id="main-menu"/>
 		</div>
 		<div class="social">
 			<htk-social-bar id="social-bar" priority="2"/>
 		</div>
 	</div>
 	<div class="body">
-		<div id="form-holder" class="form-holder"/>
+		<div id="form-holder"/>
 	</div>
-	<div id="background" class="background" on-click="onBackgroundClick"/>
+	<div id="background" on-click="onBackgroundClick"/>
 </div>
 </vn>

js/hedera/login.css

@@ -1,5 +1,5 @@
 
-.vn-login
+.hedera-login
 {
 	color: #333;
 	font-size: 1.1em;
@@ -9,7 +9,7 @@
 
 /* Navigation bar */
 
-.vn-login .navbar
+.hedera-login .navbar
 {
 	z-index: 10;
 	position: fixed;
@@ -20,7 +20,7 @@
 	color: white;
 	
 }
-.vn-login .navbar div
+.hedera-login .navbar div
 {
 	margin-top: 1em;
 	text-align: center;
@@ -28,11 +28,11 @@
 
 /* Body */
 
-.vn-login .body
+.hedera-login .body
 {
 	height: inherit;
 }
-.vn-login .column
+.hedera-login .column
 {
 	position: relative;
 	margin: 0 auto;
@@ -44,14 +44,14 @@
 
 /* Login */
 
-.vn-login .login
+.hedera-login .login
 {
 	position: relative;
 	height: inherit;
 	max-width: 15em;
 	margin: 0 auto;
 }
-.vn-login form
+.hedera-login form
 {
 	position: absolute;
 	top: 50%;
@@ -59,28 +59,28 @@
 	width: 100%;
 	padding: 1em 0;
 }
-.vn-login form > div
+.hedera-login form > div
 {
 	margin: 1em 0;
 }
-.vn-login p
+.hedera-login p
 {
 	margin: .4em 0;
 }
 
 /* Header */
 
-.vn-login .header
+.hedera-login .header
 {
 	margin-bottom: 2em;
 }
-.vn-login .header img
+.hedera-login .header img
 {
 	display: block;
 	width: 100%;
 /*	box-shadow: 0 0 .3em 0 rgba(1, 1, 1, 0.4);*/
 }
-.vn-login .version-code
+.hedera-login .version-code
 {
 	color: red;
 	text-align: right;
@@ -92,26 +92,26 @@
 
 /* Body */
 
-.vn-login .form-inputs
+.hedera-login .form-inputs
 {
 	margin: 0 auto;
 	max-width: 15em;
 }
-.vn-login label
+.hedera-login label
 {
 	margin: 0;
 }
-.vn-login .form-group label
+.hedera-login .form-group label
 {
 	display: block;
 	font-size: inherit;
 }
-.vn-login input
+.hedera-login input
 {
 	margin: 0.3em;
 }
-.vn-login input[type=text],
+.hedera-login input[type=text],
-.vn-login input[type=password]
+.hedera-login input[type=password]
 {
 	margin: 0;
 	margin-top: .5em;
@@ -120,16 +120,16 @@
 	border: 1px solid #AAA;
 	height: 2.6em;
 }
-.vn-login input[type=text],
+.hedera-login input[type=text],
-.vn-login input[type=password],
+.hedera-login input[type=password],
-.vn-login input[type=submit],
+.hedera-login input[type=submit],
-.vn-login input[type=button],
+.hedera-login input[type=button],
-.vn-login button
+.hedera-login button
 {
 	border-radius: .1em;
 	box-shadow: 0 .1em .1em rgba(1, 1, 1, 0.4);
 }
-.vn-login input[type=checkbox]
+.hedera-login input[type=checkbox]
 {
 	padding: 0;
 	margin: 0;
@@ -137,9 +137,9 @@
 	height: initial;
 	margin-right: .5em;
 }
-.vn-login input[type=submit],
+.hedera-login input[type=submit],
-.vn-login input[type=button],
+.hedera-login input[type=button],
-.vn-login button
+.hedera-login button
 {
 	margin: 0 auto;
 	background-color: #9CBC28;
@@ -149,9 +149,9 @@
 	color: #240;
 	text-transform: uppercase;
 }
-.vn-login input[type=submit]:hover,
+.hedera-login input[type=submit]:hover,
-.vn-login input[type=button]:hover,
+.hedera-login input[type=button]:hover,
-.vn-login button:hover
+.hedera-login button:hover
 {
 	background-color: #8A1;
 }
@@ -162,11 +162,11 @@ hr
 	padding: 0;
 	display: block;
 }
-.vn-login .enter
+.hedera-login .enter
 {
 	position: relative;
 }
-.vn-login .wrapper
+.hedera-login .wrapper
 {
 	width: 0;
 	overflow: visible;
@@ -174,7 +174,7 @@ hr
 	top: 0;
 	right: 0;
 }
-.vn-login .htk-spinner
+.hedera-login .htk-spinner
 {
 	margin: .3em 1em;
 	position: absolute;
@@ -182,22 +182,22 @@ hr
 
 /* Footer */
 
-.vn-login .footer
+.hedera-login .footer
 {
 	margin-top: 2em;
 }
-.vn-login .contact
+.hedera-login .contact
 {
 	text-align: center;
 }
 
 @media (max-height: 50em)
 {
-	.vn-login
+	.hedera-login
 	{
 		height: auto;
 	}
-	.vn-login form
+	.hedera-login form
 	{
 		position: relative;
 		margin-top: 0;

js/hedera/login.js

@@ -9,6 +9,7 @@ require ('./login.css');
 module.exports = new Class
 ({
 	Extends: Vn.Component,
+	Tag: 'hedera-login',
 	Properties:
 	{
 		/**

js/hedera/login.xml

@@ -1,5 +1,5 @@
 <vn>
-<div id="main" class="vn-login">
+<div id="main">
 	<div class="navbar">
 		<div>
 		<a href="#!form=cms/about&amp;guest=true">
@@ -51,7 +51,7 @@
 			</div>
 			<div class="footer">
 				<htk-social-bar id="social-bar" priority="1"/>
-				<div id="social" class="social"/>
+				<div id="social"/>
 				<div class="contact">
 					<p>_Login mail</p>
 					<p>_Login phone</p>

js/hedera/social-bar.js

@@ -35,10 +35,9 @@ module.exports = new Class
 	
 	,_priority: 0
 	
-	,initialize: function ()
+	,render: function ()
 	{
-		var node = this.createRoot ('div');
+		this.createRoot ('div');
-		node.className = 'htk-social-bar';
 	}
 
 	,_refresh: function ()

js/htk/assistant-bar.js

@@ -43,7 +43,6 @@ module.exports = new Class
 	,render: function ()
 	{
 		var bar = this.createRoot ('div');
-		bar.className = 'htk-assistant-bar';
 		
 		var previousButton = this.createElement ('button');
 		previousButton.className = 'previous';

js/htk/assistant.js

@@ -73,7 +73,6 @@ module.exports = new Class
 	,render: function ()
 	{
 		var node = this.createRoot ('div');
-		node.className = 'htk-assistant';
 	}
 	,setStep: function (stepIndex)
 	{

js/htk/field/button.js

@@ -70,7 +70,6 @@ module.exports = new Class
 	,render: function ()
 	{
 		var node = this.createRoot ('button');
-		node.className = 'htk-button';
 		node.addEventListener ('click', this._onClick.bind (this));
 	
 		this.img = this.createElement ('img');

js/htk/field/calendar.js

@@ -31,7 +31,6 @@ module.exports = new Class
 		var len = Vn.Date.WDays.length;
 		
 		var node = this.createRoot ('div');
-		node.className = 'htk-calendar';
 		
 		var div = this.createElement ('div');
 		div.className = 'month';

js/htk/field/combo.js

@@ -151,7 +151,7 @@ module.exports = new Class
 	,render: function ()
 	{
 		var node = this.createRoot ('div');
-		node.className = 'htk-combo input clickable';
+		Vn.Node.addClass (node, 'input clickable');
 		node.tabIndex = 0;
 		node.addEventListener ('mousedown',
 			this._onMouseDown.bind (this));

js/htk/field/date-chooser.js

@@ -13,10 +13,9 @@ module.exports = new Class
 	,render: function ()
 	{
 		var node = this.createRoot ('div');
-		node.className = 'htk-date-chooser';
 		
 		this.label = this.createElement ('span');
-		this.node.appendChild (this.label);
+		node.appendChild (this.label);
 
 		this.setEditable (this._editable);
 	}

js/htk/field/image.js

@@ -73,7 +73,6 @@ module.exports = new Class
 	,render: function ()
 	{
 		var node = this.createRoot ('div');
-		node.className = 'htk-image';
 		
 		var img = this.img = this.createElement ('img');
 		img.addEventListener ('error', this._onImageError.bind (this));

js/htk/field/search-entry.js

@@ -7,7 +7,6 @@ module.exports = new Class
 	,render: function ()
 	{
 		var div = this.createRoot ('div');
-		div.className = 'htk-search-entry';
 		
 		var icon = new Htk.Icon ({
 			icon: 'search',
@@ -25,7 +24,7 @@ module.exports = new Class
 		this._input = input;
 	}
 
-	,_onChange: function (event)
+	,_onChange: function ()
 	{
 		var newValue;
 	

js/htk/field/text-area.js

@@ -10,7 +10,7 @@ module.exports = new Class
 		node.addEventListener ('change', this.changed.bind (this));
 	}
 
-	,changed: function (event)
+	,changed: function ()
 	{
 		var value;
 	

js/htk/grid.js

@@ -72,7 +72,6 @@ module.exports = new Class
 	,render: function ()
 	{
 		var table = this.createRoot ('table');
-		table.className = 'htk-grid';
 
 		var thead = this.createElement ('thead');
 		table.appendChild (thead);

js/htk/icon.js

@@ -50,8 +50,7 @@ module.exports = new Class
 
 	,render: function ()
 	{
-		var node = this.createRoot ('img');
+		this.createRoot ('img');
-		node.className = 'htk-icon';
 	}
 	
 	,_setIcon: function ()

js/htk/popup.js

@@ -71,8 +71,7 @@ module.exports = new Class
 	
 	,render: function ()
 	{
-		var div = this.createRoot ('div');
+		this.createRoot ('div');
-		div.className = 'htk-popup';
 	}
 
 	,_setChildNode: function (childNode)

js/htk/spinner.js

@@ -9,7 +9,6 @@ module.exports = new Class
 	,render: function ()
 	{
 		var loader = this.createRoot ('div');
-		loader.className = 'htk-spinner';
 		
 		var spin = this.spin = this.createElement ('div');
 		loader.appendChild (spin);

js/htk/step.js

@@ -17,7 +17,6 @@ module.exports = new Class
 	}
 	,render: function ()
 	{
-		var node = this.createRoot ('div');
+		this.createRoot ('div');
-		node.className = 'htk-step';
 	}
 });

js/vn/compiler-element.js

@@ -2,6 +2,7 @@
 var Compiler = require ('./compiler');
 var Component = require ('./component');
 var kebabToCamel = require ('./string-util').kebabToCamel;
+var VnNode = require ('./node');
 
 var specialAttrs = {
 	id       : 1,
@@ -76,7 +77,11 @@ module.exports = new Class
 			object.setAttribute (prop, props[prop]);
 
 		if (context.nodeId)
-			object.setAttribute ('id', scope.getHtmlId (context.nodeId));
+		{
+			var id = context.nodeId;
+			object.setAttribute ('id', scope.getHtmlId (id));
+			object.className = '_'+ id +' '+ object.className;
+		}
 
 		return object;
 	}

js/vn/compiler-object.js

@@ -172,7 +172,11 @@ module.exports = new Class
 		object.setProperties (context.props);
 
 		if (context.nodeId && object instanceof Component)
-			object.htmlId = scope.getHtmlId (context.nodeId);
+		{
+			var id = context.nodeId;
+			object.htmlId = scope.getHtmlId (id);
+			object.className = '_'+ id +' '+ object.className;
+		}
 
 		return object;
 	}

js/vn/component.js

@@ -108,12 +108,19 @@ module.exports = Klass.implement
 	
 	,createRoot: function (tagName)
 	{
-		this._node = this.createElement (tagName);
+		var node = this.createElement (tagName);
+		this._setNode (node);	
+		return node;
+	}
 
+	,_setNode: function (node)
+	{
 		if (this.htmlId)
-			this._node.id = this.htmlId;
+			node.id = this.htmlId;
+		if (this.$constructor.Tag)
+			node.className = this.$constructor.Tag;
 
-		return this._node;
+		this._node = node;
 	}
 	
 	,renderBase: function ()
@@ -156,7 +163,7 @@ module.exports = Klass.implement
 		this.scope = scope;
 		scope.link ();
 		this.$ = scope.$;
-		this._node = this.$.main;
+		this._setNode (this.$.main);
 		return scope;
 	}
 

js/vn/mutators.js

@@ -8,11 +8,7 @@ Mutators.Tag = function (tagName)
 	vnCustomTags[tagName] = this;
 	
 	if (this.parent)
-	{
-		this.implement ({Parent: this.parent.Parent});
-		this.implement ({Child: this.parent.Child});
 		this.implement ({Properties: {}});
-	}
 
 	this.extend ({Tag: tagName});
 };
@@ -38,14 +34,3 @@ Mutators.Properties = function (props)
 	this.extend ({Properties: props});
 	Object.defineProperties (this.prototype, props);
 };
-
-Mutators.Parent = function (propName)
-{
-	this.extend ({Parent: propName});
-};
-
-Mutators.Child = function (propName)
-{
-	this.extend ({Child: propName});
-};
-