Merge pull request #1 from arno06/v2

V2
arno06 · Aug 21, 2023 · 3b71d89 · 3b71d89
2 parents 279e7c3 + 094fafd
commit 3b71d89
Show file tree

Hide file tree

Showing 11 changed files with 656 additions and 596 deletions.
diff --git a/readme.md b/readme.md
@@ -1,59 +1,54 @@
 Template
-===========
+===
+JS Template engine
 
 Features
-------------
+---
 * Variables (String, Number, Array, Object)
-* Loops (for Array only)
+* Loops
 * Conditions
-* Functions (in progress)
+* Functions
 * Event based
 * Smarty'ish syntax
-
-Todo
-------------
-* [x] Includes
+* ES6 Compliant
+* Template inclusion
 
 Dependencies
-------------
-* [Class](https://github.com/arno06/M4/blob/master/src/Class.js)
-* [Event](https://github.com/arno06/M4/blob/master/src/Event.js)
-* [EventDispatcher](https://github.com/arno06/M4/blob/master/src/EventDispatcher.js)
-* [Request](http://github.com/arno06/Request)
+---
+* [Request](http://github.com/arno06/Request) : Async template loading
 
 Example
-------------
+---
 Html template definition :
 
 ```html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>Template.js - Sample</title>
-		<script src="js/Template.js"></script>
-		<script src="js/Sample.js"></script>
+		<script src="Template.js"></script>
 	</head>
 	<body>
 		<h1>Template.js - Sample</h1>
 		<div id="holder"></div>
-		<script type="text/template" id="includeTpl">
-		<div>This is an include</div>
-		<div>{$some_custom_var}</div>
-		<div>{$var1}</div>
-		</script>
-		<script type="text/template" id="firstTemplate">
-			<h2>Hello {$var1}</h2>
-			<ul>
-			{foreach $myTable $item $key}
-				<li>{$item} : {if $key%2==0} even {else} odd {/if}</li>
-			{else}
-			<li>Empty Table</li>
-			{/foreach}
-			</ul>
-			<p>Hi, I am {$me.name} and I am in a {$me.mood} mood.</p>
-			<p>fooFunc : {=fooFunc()}</p>
-			{=include("includeTpl", some_custom_var="hell yeah")}
-		</script>
+        <script type="text/template" id="includeTpl">
+            <div>This is an include</div>
+            <div>{$var}</div>
+            <div>{$var1}</div>
+        </script>
+        <script type="text/template" id="firstTemplate">
+            <h2>Hello {$var1}</h2>
+            <ul>
+                {foreach from=$myTable}
+                <li>{$item} : {if $key%2==0} even {else} odd {/if}</li>
+                {else}
+                <li>Empty Table</li>
+                {/foreach}
+            </ul>
+            <p>Hi, I am {$me.name} and I am in a {$me.mood} mood.</p>
+            <p>fooFunc : {fooFunc named_var="value"}</p>
+            {include id="includeTpl" var="hello" var1=$var1}
+        </script>
 	</body>
 </html>
 ```
@@ -62,46 +57,48 @@ Javascript part (js/Sample.js) :
 ```js
 function init()
 {
-	var fooFunc = function(){return "bar"};
-	var table = ["This", "must", "work"];
-	var me = {"name":"Template.js", "mood":"pretty good"};
-	var tpl = new Template("firstTemplate");
-	tpl.assign("var1", "world");
-	tpl.assign("me", me);
-	tpl.assign("myTable", table);
-	tpl.setFunction("fooFunc", fooFunc);
-	tpl.addEventListener(TemplateEvent.RENDER_INIT, tplRenderInitHandler, false);
-	tpl.addEventListener(TemplateEvent.RENDER_COMPLETE, tplRenderCompleteHandler, false);
-	tpl.addEventListener(TemplateEvent.RENDER_COMPLETE_LOADED, tplRenderCompleteLoadedHandler, false);
-	tpl.render("#holder");
+    var fooFunc = function(named_var){return "bar "+named_var;};
+    var table = ["This", "must", "work"];
+    var me = {"name":"Template.js", "mood":"pretty good"};
+    var tpl = new Template("firstTemplate");
+    tpl.assign("var1", "world");
+    tpl.assign("me", me);
+    tpl.assign("myTable", table);
+    tpl.setFunction("fooFunc", fooFunc);
+    tpl.addEventListener(TemplateEvent.RENDER_INIT, tplRenderInitHandler, false);
+    tpl.addEventListener(TemplateEvent.RENDER_COMPLETE, tplRenderCompleteHandler, false);
+    tpl.addEventListener(TemplateEvent.RENDER_COMPLETE_LOADED, tplRenderCompleteLoadedHandler, false);
+    tpl.render("#holder");
 }
 window.addEventListener("load", init, false);
 
 function tplRenderInitHandler(e)
 {
-	console.log("Sample.js : init");
+    console.log("Sample.js : init");
 }
 
 function tplRenderCompleteHandler(e)
 {
-	//Ready to display result
-	console.log("Sample.js : complete");
+    //Ready to display result
+    console.log("Sample.js : complete");
 }
 
 function tplRenderCompleteLoadedHandler(e)
 {
-	//Ready to display & everything is loaded (images)
-	console.log("Sample.js : complete & loaded");
+    //Ready to display & everything is loaded (images)
+    console.log("Sample.js : complete & loaded");
 }
 ```
 
 API Reference
--------------
+---
 ### Template
-#### Template(pIdTemplate)
+
+#### Template(pIdTemplate, pData)
 Constructor - Instanciate a Template Object
 
 * pIdTemplate (*string*) : Script template's id within DOM
+* pData (*object*) : Default assigned data
 
 #### assign(pName, pValue)
 Variable asignation method
@@ -123,9 +120,9 @@ Function definition method
 * pName (*string*) : Function's name
 * pFunction (*function*) : function to execute each time template refer to it
 ```js
-tpl.setFunction("round", function(pValue)
+tpl.setFunction("round", function(value)
 {
-	return Math.round(pValue);
+	return Math.round(value);
 });
 ```
 
@@ -145,6 +142,7 @@ tpl.setFunction("round", function(pValue)
 (inherited) 
 
 ### TemplateEvent
+
 #### RENDER_INIT
 Event triggered once rendering initialized
 

diff --git a/samples/01_basics.html b/samples/01_basics.html
@@ -2,8 +2,7 @@
 <html>
 	<head>
 		<title>JS Templating</title>
-		<link href="../../common/docs/docs.css" rel="stylesheet" type="text/css">
-		<script src="../../Dependencies/src/?need=Template"></script>
+		<script src="../src/Template.js"></script>
 		<script>
 			function init()
 			{
@@ -37,7 +36,7 @@ <h3>Tableau sans boucle</h3>
 			</ul>
 			<h3>Tableau foreach</h3>
 			<ul>
-				{foreach $table1 $item $key}
+				{foreach from=$table1}
 				<li>{$key} {$item}
 					{if $key%2!=0}
 						odd
@@ -49,17 +48,17 @@ <h3>Tableau foreach</h3>
 			</ul>
 			<h3>Tableau foreach else</h3>
 			<ul>
-				{foreach $tableEmpty $item $key}
+				{foreach from=$tableEmpty}
 				<li>{$key} {$item}</li>
 				{else}
 				<li>Vide</li>
 				{/foreach}
 			</ul>
 			<h3>Tableau foreach objet</h3>
 			<ul>
-				{foreach $names $item $key}
+				{foreach from=$names}
 				<li>{$item.t} {$item.test}
-					{foreach $item.toto $n}
+					{foreach from=$item.toto item="n"}
 						{$n},
 					{else}
 						Nothing to see here

diff --git a/samples/02_images.html b/samples/02_images.html
@@ -2,8 +2,7 @@
 <html>
 	<head>
 		<title>JS Templating</title>
-		<link href="../../common/docs/docs.css" rel="stylesheet" type="text/css">
-		<script src="../../Dependencies/src/?need=Template"></script>
+		<script src="../src/Template.js"></script>
 		<script>
 			function init()
 			{

diff --git a/samples/03_event.html b/samples/03_event.html
@@ -2,8 +2,8 @@
 <html>
 	<head>
 		<title>JS Templating</title>
-		<link href="../../common/docs/docs.css" rel="stylesheet" type="text/css">
-		<script src="../../Dependencies/src/?need=Request,Template,M4Tween"></script>
+		<script src="https://dependencies.arnaud-nicolas.fr?need=Request.es6,M4Tween"></script>
+		<script src="../src/Template.js"></script>
 		<script>
 			function init()
 			{
@@ -16,25 +16,14 @@
 				loader.style.display = "block";
 				document.querySelector("#placeholder").innerHTML = "";
 				Request.load("php/eurosport_rss.php")
-						.onComplete(function(pResponse)
+						.onComplete(function(e)
 				{
-					var data = pResponse.responseJSON;
+					var data = e.currentTarget.responseJSON;
 
 					var items = data.channel.item;
-					var item, cats;
-					for(var i = 0, max = items.length;i<max;i++)
-					{
-						item = items[i];
-						if(typeof item.category != "string")
-							cats = item.category.join(" - ");
-						else
-							cats = item.category;
-						cats += " - ";
-						item.title = item.title.substr(cats.length, item.title.length - cats.length);
-					}
 
 					var tpl = new Template("tpl_1");
-					tpl.assign("items", data.channel.item);
+					tpl.assign("items", items);
 					tpl.addEventListener(TemplateEvent.RENDER_COMPLETE_LOADED, function(e)
 					{
                         console.log("completed");
@@ -64,11 +53,10 @@ <h1>Template.js - event - (ctrl + u)</h1>
 			</div>
 			<div id="loader" style="display:none;"></div>
 			<script type="text/template" id="tpl_1">
-				{foreach $items $item $key}
+				{foreach from=$items}
 					<div class="item">
-						<img src="{$item.image.url}" alt="{$item.title}">
 						<h1>{$item.title}</h1>
-						{foreach $item.category $cat}
+						{foreach from=$item.category item="cat"}
 							<span>{$cat}</span>
 						{/foreach}
 					</div>

diff --git a/samples/04_functions.html b/samples/04_functions.html
@@ -2,8 +2,7 @@
 <html>
 	<head>
 		<title>JS Templating</title>
-		<link href="../../common/docs/docs.css" rel="stylesheet" type="text/css">
-		<script src="../../Dependencies/src/?need=Template"></script>
+		<script src="../src/Template.js"></script>
 		<script>
 			function init()
 			{
@@ -18,10 +17,10 @@
 				]);
 				t.setFunction("add2", function()
 				{
-					var result = 0;
-					for(var i = 0, max = arguments.length;i<max;i++)
-					{
-						result+=Number(arguments[i]);
+					let values = arguments[0];
+					let result = 0;
+					for(let i in values){
+						result += Number(values[i]);
 					}
 					return result;
 				});
@@ -45,26 +44,26 @@ <h3>Basics</h3>
 				</tr>
 				<tr>
 					<td>Truncate :</td>
-					<td>{=truncate($lorem, 25, '...')}</td>
+					<td>{truncate string=$lorem length=25 end='...'}</td>
 				</tr>
 				<tr>
 					<td>Uppercase :</td>
-					<td>{=uppercase($lorem)}</td>
+					<td>{uppercase string=$lorem}</td>
 				</tr>
 				<tr>
 					<td>Lowercase :</td>
-					<td>{=lowercase($lorem)}</td>
+					<td>{lowercase string=$lorem}</td>
 				</tr>
 				<tr>
 					<td>Replace :</td>
-					<td>{=replace($lorem, 'i', '!', 'gi')}</td>
+					<td>{replace string=$lorem search='i' replace='!' flags='gi'}</td>
 				</tr>
 			</table>
 			<h3>Custom : addition</h3>
 			<ul>
-				{foreach $table $item $key}
+				{foreach from=$table}
 				<li>
-					{$baseValue}+{$item.value1}+{$item.value2}+{$key}={=add($baseValue, $item.value1, $item.value2, $key)}
+					{$baseValue}+{$item.value1}+{$item.value2}+{$key}={add2 $baseValue $item.value1 $item.value2 $key}
 				</li>
 				{/foreach}
 			</ul>