Ahora se maneja la inclusion de ficheros y sus dependencias desde Javascript

web/forms/ecomerce/catalog/style.css

@@ -26,17 +26,6 @@
 	overflow: auto;
 	padding: .4em;
 }
-.catalog div.main .list-view
-{
-	margin: 0 auto;
-	max-width: 50em;
-	min-width: 25em;
-}
-.catalog .footer-message
-{
-	padding-bottom: 1em;
-	text-align: center;
-}
 .htk-toast
 {
 	margin-left: -11em;
@@ -168,6 +157,13 @@ button.confirm > img
 
 /* List view */
 
+.catalog .list-view
+{
+	margin: 0 auto;
+	padding: .5em;
+	max-width: 45em;
+	min-width: 25em;
+}
 .items
 {
 	width: 100%;
@@ -208,6 +204,11 @@ td.third-category
 	color: green;
 	font-size: 1.1em;
 }
+.catalog .footer-message
+{
+	padding-bottom: 1em;
+	text-align: center;
+}
 
 /* Grid view */
 

web/forms/ecomerce/catalog/ui.xml

@@ -87,34 +87,36 @@
 		<div id="main" class="main"/>
 	</div>
 </div>
-<div id="list-view" class="box list-view">
+<div id="list-view" class="list-view">
-	<htk-grid id="items-grid" class="items" empty-message="_SelectSubtype" show-header="false">
+	<div class="box">
-		<htk-column-image
+		<htk-grid id="items-grid" class="items" empty-message="_SelectSubtype" show-header="false">
-			title="*"
+			<htk-column-image
-			class="icon"
+				title="*"
-			column="Foto"
+				class="icon"
-			directory="catalog"
+				column="Foto"
-			subdir="200x200"
+				directory="catalog"
-			show-full="true"
+				subdir="200x200"
-			full-dir="900x900"
+				show-full="true"
-			editable="true"/>
+				full-dir="900x900"
-		<vn-column-item title="_Name" column="Article" renderer="nameRenderer"/>
+				editable="true"/>
-		<htk-column-text title="_Cat" renderer="featuresRender"/>
+			<vn-column-item title="_Name" column="Article" renderer="nameRenderer"/>
-		<htk-column-spin title="_Aval" column="available"/>
+			<htk-column-text title="_Cat" renderer="featuresRender"/>
-		<htk-column-text
+			<htk-column-spin title="_Aval" column="available"/>
-			title="_Price"
+			<htk-column-text
-			column="price"
+				title="_Price"
-			format="_from %.2d€"
+				column="price"
-			class="price"/>
+				format="_from %.2d€"
-		<htk-column-button
+				class="price"/>
-			column="id"
+			<htk-column-button
-			image="image/add.svg"
+				column="id"
-			tip="_AddToBasket"
+				image="image/add.svg"
-			on-clicked="onAddItemClick"/>
+				tip="_AddToBasket"
-	</htk-grid>
+				on-clicked="onAddItemClick"/>
-	<p class="footer-message">
+		</htk-grid>
-		<t>IndicativePhotos</t>
+		<p class="footer-message">
-	</p>			
+			<t>IndicativePhotos</t>
+		</p>
+	</div>
 </div>
 <htk-repeater id="grid-view" class="grid-view" empty-message="_SelectSubtype" form-id="item">
 	<template>

web/js/db/main.js

@@ -1,5 +1,5 @@
 
-Vn.includeJs ('js/sql/main.js');
+Vn.include ('js/sql/main');
 Vn.includeLib ('db',
 [
 	 'db'

web/js/db/main.php

@@ -1,19 +0,0 @@
-<?php
-
-require_once ('js/sql/main.php');
-
-Vn\Hedera\Js::includeLib ('db'
-	,'db'
-	,'conn'
-	,'result'
-	,'result-set'
-	,'model'
-	,'iterator'
-	,'form'
-	,'param'
-	,'query'
-	,'calc'
-	,'calc-sum'
-);
-
-?>

web/js/hedera/gui.js

@@ -1,4 +1,8 @@
 
+Vn.includeCss ('js/hedera/gui.css');
+Vn.resource ('js/hedera/gui.xml');
+Vn.define (function () {
+
 Vn.Gui = new Class
 ({
 	Extends: Htk.Widget,
@@ -526,3 +530,5 @@ Vn.Gui = new Class
 	}
 });
 
+});
+

web/js/hedera/login.js

@@ -1,4 +1,8 @@
 
+Vn.includeCss ('js/hedera/login.css');
+Vn.resource ('js/hedera/login.xml');
+Vn.define (function () {
+
 Vn.Login = new Class
 ({
 	Extends: Htk.Widget
@@ -72,3 +76,4 @@ Vn.Login = new Class
 	}
 });
 
+});

web/js/hedera/main.js

@@ -1,12 +1,6 @@
 
 Vn.includeCss ('js/hedera/style.css');
-Vn.includeCss ('js/hedera/gui.css');
+Vn.include ('js/htk/main');
-Vn.includeCss ('js/hedera/login.css');
-
-Vn.loadXml ('js/hedera/login.xml');
-Vn.loadXml ('js/hedera/gui.xml');
-
-Vn.includeJs ('js/htk/main.js');
 Vn.includeLib ('hedera', 
 [
 	 'hedera'

web/js/htk/image-editor.js

@@ -1,13 +1,12 @@
-/*
+
-Vn.include (['js/htk/widget.js']);
+Vn.resource ('js/htk/image-editor.xml');
-Vn.resource (['js/htk/widget.js']);
 Vn.define (function () {
-*/
+
 /**
  * A form to handle the image database, it allows to add new images or replace it
  **/
 Htk.ImageEditor = new Class
-({	
+({
 	Extends: Htk.Widget
 	,Xml: 'js/htk/image-editor.xml'
 	
@@ -15,6 +14,7 @@ Htk.ImageEditor = new Class
 	{
 		this.parent (props)
 		this.builderInit (this.constructor.Xml);
+
 		this.$('max-size').value = 10 /* MB */ * 1048576;
 		this.$('form').action =
 			'//'+ Vn.Config['image_host'] +'/hedera-web/rest.php?action=image'
@@ -58,4 +58,4 @@ Htk.ImageEditor = new Class
 	}
 });
 
-//});
+});

web/js/htk/main.js

@@ -1,6 +1,6 @@
 
 Vn.includeCss ('js/htk/style.css');
-Vn.includeJs ('js/db/main.js');
+Vn.include ('js/db/main');
 Vn.includeLib ('htk', 
 [
 	 'htk'

web/js/htk/main.php

@@ -1,43 +0,0 @@
-<?php
-
-require_once ('js/db/main.php');
-
-Vn\Hedera\Js::includeLib ('htk'
-	,'htk'
-	,'widget'
-	,'popup'
-	,'toast'
-	,'repeater'
-	,'grid'
-	,'full-image'
-	,'image-editor'
-	,'assistant'
-	,'assistant-bar'
-	,'field'
-	,'field/text'
-	,'field/html'
-	,'field/entry'
-	,'field/radio-group'
-	,'field/radio'
-	,'field/label'
-	,'field/text-area'
-	,'field/spin'
-	,'field/check'
-	,'field/select'
-	,'field/calendar'
-	,'field/date-chooser'
-	,'field/image'
-	,'field/button'
-	,'field/table'
-	,'column'
-	,'column/button'
-	,'column/link'
-	,'column/date'
-	,'column/image'
-	,'column/radio'
-	,'column/spin'
-	,'column/text'
-	,'column/check'
-);
-
-?>

web/js/misc/main.js

@@ -1,4 +1,4 @@
 
-Vn.includeJs ('js/misc/tinymce/tinymce.min.js');
+Vn.include ('js/misc/tinymce/tinymce.min');
-Vn.includeJs ('js/misc/mootools');
+Vn.include ('js/misc/mootools');
 

web/js/misc/main.php

@@ -1,8 +0,0 @@
-<?php
-
-use Vn\Hedera\Js;
-
-Js::includeFile ('js/misc/tinymce/tinymce.min.js');
-Js::includeFile ('js/misc/mootools.js');
-
-?>

web/js/sql/main.js

@@ -1,5 +1,5 @@
 
-Vn.includeJs ('js/vn/main.js');
+Vn.include ('js/vn/main');
 Vn.includeLib ('sql',
 [
 	 'sql'

web/js/sql/main.php

@@ -1,31 +0,0 @@
-<?php
-
-require_once ('js/vn/main.php');
-
-Vn\Hedera\Js::includeLib ('sql'
-	,'sql'
-	,'object'
-	,'holder'
-	,'batch'
-	,'list'
-	,'expr'
-	,'value'
-	,'field'
-	,'function'
-	,'operation'
-	,'target'
-	,'table'
-	,'stmt'
-	,'dml'
-	,'string'
-	,'delete'
-	,'insert'
-	,'select'
-	,'update'
-	,'multi-stmt'
-	,'filter'
-	,'filter-item'
-	,'search-tags'
-);
-
-?>

web/js/vn/main.js

@@ -1,5 +1,5 @@
 
-Vn.includeJs ('js/misc/main.js');
+Vn.include ('js/misc/main');
 Vn.includeLib ('vn', 
 [
 	 'browser'

web/js/vn/main.php

@@ -1,32 +0,0 @@
-<?php
-
-require_once ('js/misc/main.php');
-
-use Vn\Hedera\Js;
-
-Js::includeFile ('js/vn/vn.js');
-Js::includeFile ('js/vn/locale.js');
-
-if (strpos ($_SERVER['HTTP_USER_AGENT'], 'MSIE'))
-	Js::includeFile ('js/vn/ie.js');
-else
-	Js::includeFile ('js/vn/browser.js');
-
-Js::includeLib ('vn'
-	,'date'
-	,'value'
-	,'error'
-	,'cookie'
-	,'url'
-	,'mutators'
-	,'object'
-	,'param'
-	,'hash-listener'
-	,'hash'
-	,'hash-param'
-	,'node'
-	,'builder'
-	,'http-request'
-);
-
-?>

web/js/vn/mutators.js

@@ -47,7 +47,7 @@ Class.Mutators.Xml = function (path)
 {
 	if (path)
 	{
-		Vn.loadXml (path);
+		//Vn.loadXml (path);
 		this.extend ({Xml: path});
 	}
 }

web/js/vn/vn.js

@@ -4,146 +4,15 @@
 var Vn =
 {
 	Config: {}
-	,jsIncludes: {}
+	,includes: {}
 	,cssIncludes: {}
 	,xmlIncludes: {}
+	,tmpIncludes: []
+	,tmpDefine: null
 	,customTags: {}
 	,head: document.getElementsByTagName ('head')[0]
 	,isMobileCached: null
 
-	,_registerIncludedScripts: function ()
-	{
-		var scripts = this.head.getElementsByTagName ('script');
-		
-		var basePath = location.protocol +'//'+ location.host;
-		basePath += location.port ? ':'+ location.port : '';
-		basePath += location.pathname;
-		console.log (basePath);
-		
-		for (var i = 0; i < scripts.length; i++)
-		{
-			var path = scripts[i].src.match (/^([\w\./:~-]+)[?#]?.*$/);
-		}
-	}
-	
-	,onScriptLoad: function ()
-	{
-//		console.log (document.currentScript.src);
-		
-/*		var scripts = document.getElementsByTagName( 'script' );
-		var me = scripts[ scripts.length - 1 ];
-		console.log (me.src);
-*/
-	}
-	
-	,tmpIncludes: null
-	,tmpResources: null
-	,tmpDefine: null
-	
-	,include: function (includes)
-	{
-		this.tmpIncludes = includes;
-	}
-
-	,resource: function (resources)
-	{
-		this.tmpResources = resources;
-	}
-	
-	,define: function (calback)
-	{
-		this.tmpDefine = callback;
-	}
-	
-	/**
-	 * Includes a new Javascript in the current document, if the script
-	 * is already included, does nothing and calls the callback.
-	 *
-	 * @param {string} fileName The script file name
-	 * @param {Function} callback The function to call when script is
-	 * downloaded and included
-	 **/
-	,includeJs: function (fileName, callback, skipVersion)
-	{
-		var includeData = this.jsIncludes[fileName];
-	
-		if (includeData === undefined)
-		{
-			var src = fileName;
-
-			if (!skipVersion)
-				src = src +'?'+ Vn.Cookie.get ('hedera_version');
-
-			var script = document.createElement ('script');
-			script.type = 'text/javascript';
-			script.async = false;
-			script.src = src;
-
-			includeData = {
-				 script: script
-				,callbacks: []
-				,loaded: false
-			};
-			
-			if (callback)
-				includeData.callbacks.push (callback);
-
-			script.onload =
-				this._jsLoaded.bind (this, includeData, true);
-			script.onerror =
-				this._jsLoaded.bind (this, includeData, false);
-			script.onreadystatechange =
-				this._jsStateChanged.bind (this, includeData);
-
-			this.jsIncludes[fileName] = includeData;
-
-	   		this.head.appendChild (script);
-		}
-		else if (callback)
-		{
-			if (includeData.loaded)
-				callback ();
-			else
-				includeData.callbacks.push (callback);
-		}
-	}
-
-	,_jsStateChanged: function (includeData)
-	{
-		console.log ('js: '+ includeData.script.readyState);
-
-		if (includeData.script.readyState == 'complete')
-			this._jsLoaded (includeData, true);
-	}
-
-	,_jsLoaded: function (includeData, success)
-	{
-		if (includeData.loaded)
-			return;
-			
-		console.log (includeData.script.src);
-	
-		for (var i = 0; i < includeData.callbacks.length; i++)
-			includeData.callbacks[i] (success);
-
-		includeData.loaded = true;
-		includeData.callbacks = null;
-	}
-	
-	/**
-	 * Includes an entire Javascript library including it's localized file.
-	 *
-	 * @param {string} libName The folder of the library
-	 * @param {Array<string>} files Array with every library file name
-	 **/
-	,includeLib: function (libName, files)
-	{
-		Vn.Locale.loadScript ('js/'+ libName +'.js');
-
-		for (var i = 0; i < files.length; i++)
-			this.includeJs ('js/'+ libName +'/'+ files[i] +'.js');
-	}
-	
 	/**
 	 * Includes a new CSS stylesheet in the current document, if the stylesheet
 	 * is already included, does nothing.
@@ -151,7 +20,7 @@ var Vn =
 	 * @param {string} fileName The stylesheet file name
 	 **/
 	,includeCss: function (fileName)
-	{
+	{	
 		var cssData = this.cssIncludes[fileName];
 
 		if (!cssData)
@@ -191,6 +60,258 @@ var Vn =
 		}		
 	}
 
+	/**
+	 * Initializes the library and calls the passed function when all
+	 * includes and its dependencies are resolved.
+	 * Should be called on the last statically incuded script.
+	 *
+	 * @param {Function} callback The main function
+	 **/
+	,main: function (callback)
+	{
+		if (this.mainCalled)
+		{
+			Vn.warning ("Vn: main method should be called only once");
+			return;
+		}
+	
+		this.mainCalled = true;
+		this.mainCallback = callback;
+
+		var basePath = location.protocol +'//'+ location.host;
+		basePath += location.port ? ':'+ location.port : '';
+		basePath += location.pathname;
+
+		var scripts = this.head.getElementsByTagName ('script');
+		var includes = this.tmpIncludes;
+
+		for (var i = 0; i < scripts.length; i++)
+		{
+			var relPath = scripts[i].src.substr (basePath.length);
+			relPath = relPath.substr (0, relPath.indexOf ('.js'));
+
+			var includeData = this.includes[relPath];
+			
+			if (includeData === undefined)
+			{
+				includeData = {
+					 depCount: 0
+					,callbacks: []
+					,loaded: true
+					,dependants: []
+					,success: true
+				};
+
+				this.includes[relPath] = includeData;
+			}
+			
+			if (i == scripts.length - 1)
+				includeData.callbacks.push (this._onMainDepsLoad.bind (this));
+			
+			this.tmpIncludes = includes;
+			this._onScriptLoad (includeData, true);
+		}
+
+		window.addEventListener ('load', this._onWindowLoad.bind (this));
+	}
+	
+	,_onMainDepsLoad: function ()
+	{
+		this.mainDepsLoaded = true;
+		this._callMain ();
+	}
+	
+	,_onWindowLoad: function ()
+	{
+		this.windowReady = true;
+		this._callMain ();
+	}
+	
+	,_callMain: function ()
+	{
+		if (this.mainCallback && this.windowReady && this.mainDepsLoaded)
+			this.mainCallback ();
+	}
+	
+	,_handleCallback: function (includeData, callback)
+	{
+		if (!callback)
+			return;
+	
+		if (includeData.loaded)
+			callback (includeData.success);
+		else
+			includeData.callbacks.push (callback);
+	}
+	
+	/**
+	 * Includes a set of javascript files and sets it as dependecies of the
+	 * current script.
+	 *
+	 * @param {...} The list of files as function arguments
+	 **/
+	,include: function ()
+	{
+		for (var i = 0; i < arguments.length; i++)
+		{
+			var includeData = this._realIncludeJs (arguments[i] +'.js');
+			
+			if (!includeData.loaded)
+				this.tmpIncludes.push (includeData);
+		}
+	}
+
+	/**
+	 * Downloads a set of resources and sets it as dependecies of the
+	 * current script.
+	 *
+	 * @param {...} The list of files as function arguments
+	 **/
+	,resource: function ()
+	{
+		for (var i = 0; i < arguments.length; i++)
+		{
+			var includeData = this._realLoadXml (arguments[i]);
+			
+			if (!includeData.loaded)
+				this.tmpIncludes.push (includeData);
+		}
+	}
+	
+	/**
+	 * Sets the function that will be called when current script dependencies
+	 * are resolved.
+	 *
+	 * @param {Function} callback The callback function
+	 **/
+	,define: function (callback)
+	{
+		this.tmpDefine = callback;
+	}
+	
+	/**
+	 * Includes an entire Javascript library including it's localized file.
+	 *
+	 * @param {string} libName The folder of the library
+	 * @param {Array<string>} files Array with every library file name
+	 **/
+	,includeLib: function (libName, files)
+	{
+		Vn.Locale.loadScript ('js/'+ libName +'.js');
+
+		for (var i = 0; i < files.length; i++)
+			this.include ('js/'+ libName +'/'+ files[i]);
+	}
+
+	/**
+	 * Includes a new Javascript in the current document, if the script
+	 * is already included, does nothing and calls the callback.
+	 *
+	 * @param {string} fileName The script file name
+	 * @param {Function} callback The function to call when script is
+	 * downloaded and included
+	 **/
+	,includeJs: function (fileName, callback, skipVersion)
+	{
+		var includeData = this._realIncludeJs (fileName, skipVersion);
+		this._handleCallback (includeData, callback);
+	}
+	 
+	,_realIncludeJs: function (fileName, skipVersion)
+	{
+		var includeData = this.includes[fileName];
+	
+		if (includeData === undefined)
+		{
+			var src = fileName;
+
+			if (!skipVersion)
+				src = src +'?'+ Vn.Cookie.get ('hedera_version');
+
+			var script = document.createElement ('script');
+			script.type = 'text/javascript';
+			script.async = false;
+			script.src = src;
+
+			includeData = {
+				 depCount: 0
+				,callbacks: []
+				,loaded: false
+				,dependants: []
+				,success: false
+			};
+
+			script.onload =
+				this._onScriptLoad.bind (this, includeData, true);
+			script.onerror =
+				this._onScriptLoad.bind (this, includeData, false);
+			script.onreadystatechange =
+				this._onScriptStateChange.bind (this, includeData, script);
+
+			this.includes[fileName] = includeData;
+			this.head.appendChild (script);
+		}
+
+		return includeData;
+	}
+
+	,_onScriptStateChange: function (includeData, script)
+	{
+		if (script.readyState == 'complete')
+			this._onScriptLoad (includeData, true);
+	}
+
+	,_onScriptLoad: function (includeData, success)
+	{
+		includeData.success = success;
+
+		if (success)
+		{			
+			if (this.tmpDefine)
+				includeData.callbacks.push (this.tmpDefine);
+
+			var includes = this.tmpIncludes;
+			
+			if (includes && includes.length > 0)
+			{
+				includeData.depCount = includes.length;
+
+				for (var i = 0; i < includes.length; i++)
+					includes[i].dependants.push (includeData);
+			}
+			else
+				this.resolveDeps (includeData);
+		}
+		else
+			this.resolveDeps (includeData);
+		
+		this.tmpIncludes = [];
+		this.tmpDefine = null;
+	}
+	
+	,resolveDeps: function (includeData)
+	{
+		includeData.loaded = true;
+
+		var callbacks = includeData.callbacks;
+	
+		for (var i = 0; i < callbacks.length; i++)
+			callbacks[i] (includeData.success);
+
+		var dependants = includeData.dependants;
+
+		for (var i = 0; i < dependants.length; i++)
+		{
+			var dependant = dependants[i];
+			dependant.depCount--;
+			
+			if (dependant.depCount == 0)
+				this.resolveDeps (dependant);
+		}
+
+		delete includeData.callbacks;
+	}
+
 	/**
 	 * Request an XML file.
 	 *
@@ -199,30 +320,49 @@ var Vn =
 	 **/
 	,loadXml: function (path, callback)
 	{
-		var includeData = this.xmlIncludes[path];
+		var includeData = this._realLoadXml (path);
+		this._handleCallback (includeData, callback);
+	}
+
+	,_realLoadXml: function (path)
+	{
+		var includeData = this.includes[path];
 	
-		if (true || !includeData)
+		if (includeData === undefined)
 		{
+			includeData = {
+				 callbacks: []
+				,loaded: false
+				,dependants: []
+				,depCount: 0
+				,success: false
+				,xml: null
+			};
+
 			var request = new XMLHttpRequest ();
 			request.onreadystatechange =
-				this._onXmlReady.bind (this, request, path, callback);
+				this._onXmlReady.bind (this, includeData, request);
-			request.open ('get', path +'?'+ Vn.Cookie.get ('hedera_version'), true);
+			request.open ('get',
+				path +'?'+ Vn.Cookie.get ('hedera_version'), true);
 			request.send ();
+
+			this.includes[path] = includeData;
 		}
-		else if (callback)
+
-			callback (true);
+		return includeData;
 	}
 	
-	,_onXmlReady: function (request, path, callback)
+	,_onXmlReady: function (includeData, request)
 	{
 		if (request.readyState != 4)
 			return;
-
-		if (request.status == 200)
-			this.xmlIncludes[path] = request.responseXML;
 			
-		if (callback)
+		includeData.success = request.status == 200;
-			callback (request.status == 200);
+
+		if (includeData.success)
+			includeData.xml = request.responseXML;
+			
+		this.resolveDeps (includeData);
 	}
 	
 	/**
@@ -233,7 +373,12 @@ var Vn =
 	 **/
 	,getXml: function (path)
 	{
-		return this.xmlIncludes[path];
+		var includeData = this.includes[path];
+		
+		if (!(includeData && includeData.success))
+			return null;
+			
+		return includeData.xml;
 	}
 
 	/**
@@ -251,10 +396,5 @@ var Vn =
 
 		return this.isMobileCached;
 	}
-
-	,get: function (id)
-	{
-		return document.getElementById (id);
-	}
 };
 

web/pages/main/main.js

@@ -1,13 +1,13 @@
 
-Vn.includeJs ('js/misc/main.js');
+Vn.include ('js/misc/main');
-Vn.includeJs ('js/vn/locale.js');
+Vn.include ('js/vn/locale');
-Vn.includeJs ('js/vn/main.js');
+Vn.include ('js/vn/main');
-Vn.includeJs ('js/sql/main.js');
+Vn.include ('js/sql/main');
-Vn.includeJs ('js/db/main.js');
+Vn.include ('js/db/main');
-Vn.includeJs ('js/htk/main.js');
+Vn.include ('js/htk/main');
-Vn.includeJs ('js/hedera/main.js');
+Vn.include ('js/hedera/main');
 
-window.addEventListener ('load', function () {
+Vn.main (function ()
-	var app = new Vn.App ();
+{
-	app.run ();
+	(new Vn.App ()).run ();
 });