Add i18n & Named arg

README.md

@@ -26,6 +26,10 @@ This project is licensied under the GPL 3 license - see the
 
 ## Changelog
 
+*v 0.1.6*
+- Add i18n feature
+- Add named argument
+
 *v 0.1.5*
 - Add state interface with jsplot (pyplot procedural style)
 - Update documentation
@@ -57,4 +61,4 @@ This project is licensied under the GPL 3 license - see the
 
 ## Roadmap
 
-- Add named argument functionalities
+- Add tooltip

lang/en.json

@@ -0,0 +1,8 @@
+{
+	"success_load": "successfully loaded language file",
+	"script_load": "successfully loaded script {script}",
+	"err_include": "an error occured when adding the script element for {src}",
+	"no_figure": "this canvas does not possess figure to draw",
+	"line_style": "the style of line {style} is unknown",
+	"marker_style": "the style of marker {style} is unknown"
+}

lang/fr.json

@@ -0,0 +1,8 @@
+{
+	"success_load": "chargement du fichier du langage réussi",
+	"script_load": "chargement du script {script} réussi",
+	"err_include": "une erreur s'est produite lors de l'ajout de l'élement de script pour {src}",
+	"no_figure": "ce canvas ne possède aucune figure à dessiner",
+	"line_style": "le style de ligne {style} est inconnu",
+	"marker_style": "le style de marqueur {style} est inconnu"
+}

lichartee.js

@@ -27,7 +27,11 @@ class Manager
 	 * @param int height   Height of the added canvas
 	 * @param int position Subjective position of the added canvas
 	 */
-	add_canvas(width = 100, height = 100, position = 0)
+	add_canvas({
+		width    = 100,
+		height   = 100,
+		position = 0  ,
+	})
 	{
 		let element_canvas = document.createElement('canvas');
 		let text           = document.createTextNode(
@@ -49,7 +53,7 @@ class Manager
 		let ctx = element_canvas.getContext('2d');
 		ctx.canvas.width  = width ;
 		ctx.canvas.height = height;
-		let figure = new Figure();
+		let figure = new Figure({});
 		let canvas = new Canvas(ctx, figure);
 		this.list_canvas.splice(position, 0, canvas);
 		return canvas;
@@ -71,7 +75,7 @@ class Manager
 	 *
 	 * @param int position Position of the canvas to remove
 	 */
-	remove_canvas(position = 0)
+	remove_canvas({position = 0})
 	{
 		document.removeChild(this.list_canvas[position].ctx.canvas);
 		this.list_canvas.splice(position, 1);
@@ -103,7 +107,7 @@ class Canvas
 	{
 		if (this.figure instanceof Figure.constructor)
 		{
-			throw _('this canvas does not possess figure to draw')
+			throw _('no_figure')
 		}
 		let start_x = 0;
 		for (const index_axes in this.figure.list_axes)
@@ -148,11 +152,18 @@ class Figure
 	 * @param int relative_height Relative height of the new axes
 	 * @param int position Position of the axes in the figure
 	 */
-	add_axes(relative_width = 50, relative_height = 50, position = 0)
+	add_axes({
+		relative_width  = 50,
+		relative_height = 50,
+		position        = 0 ,
+	})
 	{
 		this.width  += relative_width ;
 		this.height += relative_height;
-		let axes = new Axes(relative_width, relative_height);
+		let axes = new Axes({
+			width:  relative_width ,
+			height: relative_height,
+		});
 		this.list_axes.splice(position, 0, axes);
 		return axes;
 	}
@@ -183,14 +194,14 @@ class Axes
 	 * @param int height Height of the axes
 	 * @param String title Title of the axes
 	 */
-	constructor(
+	constructor({
 		width    = 100,
 		height   = 100,
-	)
+	})
 	{
 		this.width    = width;
 		this.height   = height;
-		this.axis     = new Axis();
+		this.axis     = new Axis({});
 		this.lines    = [];
 	}
 
@@ -212,7 +223,7 @@ class Axes
 	 *                           definition than linecolor)
 	 * @param Number markersize size of the marker
 	 */
-	plot(
+	plot({
 		x                     ,
 		y                     ,
 		linestyle   = 'solid' ,
@@ -220,17 +231,17 @@ class Axes
 		markerstyle = ''      ,
 		markercolor = 'black' ,
 		markersize  = 5       ,
-	)
+	})
 	{
-		let line = new Line(
-			x          ,
-			y          ,
-			linestyle  ,
-			linecolor  ,
-			markerstyle,
-			markercolor,
-			markersize ,
-		);
+		let line = new Line({
+			x          : x          ,
+			y          : y          ,
+			linestyle  : linestyle  ,
+			linecolor  : linecolor  ,
+			markerstyle: markerstyle,
+			markercolor: markercolor,
+			markersize : markersize ,
+		});
 		this.lines.push(line);
 	}
 
@@ -319,7 +330,7 @@ class Axes
 	 */
 	set title(content)
 	{
-		this._title = new Title(content);
+		this._title = new Title({content: content});
 	}
 
 	/**
@@ -367,7 +378,7 @@ class Line
 	 *                           definition than linecolor)
 	 * @param Number markersize size of the marker
 	 */
-	constructor(
+	constructor({
 		x                      ,
 		y                      ,
 		linestyle   = 'solid'  ,
@@ -375,7 +386,7 @@ class Line
 		markerstyle = ''       ,
 		markercolor = 'black'  ,
 		markersize  = 5        ,
-	)
+	})
 	{
 		this.x           = x          ;
 		this.y           = y          ;
@@ -470,7 +481,7 @@ class Line
 		}
 		else
 		{
-			throw _('the style of the line is not correctly defined');
+			throw _('line_style', {style: this.linestyle});
 		}
 		for (const index in x_coordinates)
 		{
@@ -564,7 +575,7 @@ class Line
 			}
 			else
 			{
-				throw _('the style of the marker is not correctly defined');
+				throw _('marker_style', {style: this.markerstyle});
 			}
 		}
 	}
@@ -584,11 +595,11 @@ class Font
 	 * @param family string font-family
 	 * @param color string font color
 	 */
-	constructor(
+	constructor({
 		size   = 20          ,
 		family = 'sans-serif',
 		color  = 'black'     ,
-	)
+	})
 	{
 		this.size   = size;
 		this.family = family;
@@ -618,16 +629,16 @@ class Title
 	 * @param content Content Content of a title
 	 * @param font Font Font of a title
 	 */
-	constructor(
+	constructor({
 		content = ''       ,
 		font    = undefined,
 		margin  = 5        ,
-	)
+	})
 	{
 		this.content = content;
 		if (font === undefined)
 		{
-			font = new Font();
+			font = new Font({});
 		}
 		this.font = font;
 		this.margin = margin;
@@ -696,14 +707,14 @@ class Axis
 	 * @param text_height int Height of the text label
 	 * @param Font font Font of tick labels
 	 */
-	constructor(
+	constructor({
 		number_x_tick = 4        ,
 		number_y_tick = 4        ,
 		size_tick     = 5        ,
 		margin        = 15       ,
 		text_height   = 15       ,
 		font          = undefined,
-	)
+	})
 	{
 		this.number_x_tick = number_x_tick;
 		this.number_y_tick = number_y_tick;
@@ -712,7 +723,7 @@ class Axis
 		this.text_height = text_height;
 		if (font === undefined)
 		{
-			font = new Font();
+			font = new Font({});
 		}
 		this.font = font;
 	}
@@ -839,7 +850,7 @@ class jsplot
 	 *                           definition than linecolor)
 	 * @param Number markersize size of the marker
 	 */
-	plot(
+	plot({
 		x          ,
 		y          ,
 		linestyle  ,
@@ -847,11 +858,14 @@ class jsplot
 		markerstyle,
 		markercolor,
 		markersize ,
-	)
+	})
 	{
 		if (this.manager.list_canvas.length === 0)
 		{
-			this.manager.add_canvas(500,500);
+			this.manager.add_canvas({
+				width:  500,
+				height: 500,
+			});
 		}
 		let canvas = this.manager.list_canvas[
 			this.manager.list_canvas.length - 1
@@ -859,17 +873,17 @@ class jsplot
 		canvas = this.manager.list_canvas[0];
 		if (canvas.figure.list_axes.length === 0)
 		{
-			canvas.figure.add_axes();
+			canvas.figure.add_axes({});
 		}
-		canvas.figure.list_axes[0].plot(
-			x          ,
-			y          ,
-			linestyle  ,
-			linecolor  ,
-			markerstyle,
-			markercolor,
-			markersize ,
-		);
+		canvas.figure.list_axes[0].plot({
+			x        :   x          ,
+			y        :   y          ,
+			linestyle:   linestyle  ,
+			linecolor:   linecolor  ,
+			markerstyle: markerstyle,
+			markercolor: markercolor,
+			markersize:  markersize ,
+		});
 	}
 
 	/**
@@ -881,12 +895,15 @@ class jsplot
 	{
 		if (this.manager.list_canvas.length === 0)
 		{
-			this.manager.add_canvas(500,500);
+			this.manager.add_canvas({
+				width:  500,
+				height: 500,
+			});
 		}
 		let canvas = this.manager.list_canvas[0];
 		if (canvas.figure.list_axes.length === 0)
 		{
-			canvas.figure.add_axes();
+			canvas.figure.add_axes({});
 		}
 		canvas.figure.list_axes[0].title = content;
 	}
@@ -898,20 +915,20 @@ class jsplot
 	{
 		if (this.manager.list_canvas.length === 0)
 		{
-			this.manager.add_canvas(
-				500                        ,
-				500                        ,
-				this.manager.list_canvas[0],
-			);
+			this.manager.add_canvas({
+				width:    500                         ,
+				height:   500                         ,
+				position: this.manager.list_canvas - 1,
+			});
 		}
 		else
 		{
 			this.manager.list_canvas[0].draw();
-			this.manager.add_canvas(
-				500                                ,
-				500                                ,
-				this.manager.list_canvas.length - 1,
-			);
+			this.manager.add_canvas({
+				width:    500                                ,
+				height:   500                                ,
+				position: this.manager.list_canvas.length - 1,
+			});
 		}
 	}
 }

main.js

@@ -3,13 +3,50 @@
  * list of loaded scripts (only itself at start)
 **/
 var __scripts = [ 'main.js' ];
-//var __lang    = 'en';
+var __lang    = undefined;
+
+async function load_lang()
+{
+	let language = navigator.language.slice(0,2).toLowerCase();
+	if (!(['en', 'fr'].includes(language)))
+	{
+		language === 'en';
+	}
+	__lang = await fetch('./lang/'+language+'.json')
+		.then((response) => response.json())
+		.then((json) => { return json });
+	console.info(_('success_load'));
+}
 
 /* i18n small function */
-function _(key)
+function _(content, replacements = {})
 {
-	return key;
-	//return LANG[__lang][key] == undefined ? key : LANG[__lang][key];
+	if (typeof __lang !== 'undefined')
+	{
+		if (content in __lang)
+		{
+			content = __lang[content];
+		}
+	}
+	if (Object.keys(replacements).length)
+	{
+		let tokens = content.split(/({[^}\\]*})/g);
+		Object.keys(replacements).forEach((name) =>
+		{
+			if (tokens.includes('{'+name+'}'))
+			{
+				Object.keys(tokens).forEach((key) =>
+				{
+					if ('{'+name+'}' === tokens[key])
+					{
+						tokens[key] = replacements[name];
+					}
+				});
+			}
+		});
+		content = tokens.join('');
+	}
+	return content;
 }
 
 /* include other scripts to the html file */
@@ -30,19 +67,23 @@ async function include(src, script_list)
 		}
 		else
 		{
-			reject(
-				_(
-					'an error occured when adding the script element' +
-					'for ${src}'
-				)
-			);
+			reject(_('err_include', {src: src}))
 		}
 	} );
 
 	script_list.push(src); // the script is considered as loaded
 
 	return script_loaded.then(
-		(value) => script_list,
+		() =>
+		{
+			console.info(_(
+				'script_load',
+				{
+					script: src,
+				}            ,
+			));
+			return script_list
+		},
 		(error) => {
 			throw error;
 		}
@@ -51,6 +92,7 @@ async function include(src, script_list)
 
 async function launch()
 {
+	await load_lang();
 	__scripts = await include('./lichartee.js', __scripts);
 	__scripts = await include('./test.js', __scripts);
 }

test.js

@@ -8,26 +8,27 @@ let b = x.map((element) => - Math.sin(element));
 let c = x.map((element) => - Math.cos(element));
 
 let pyplot = new jsplot();
-pyplot.plot(
-	x,
-	y,
-);
+pyplot.plot({
+	x:         x      ,
+	y:         y      ,
+	linecolor: 'green',
+});
 pyplot.title('4 sinus');
 pyplot.show();
-pyplot.plot(
-	x,
-	y,
-);
-pyplot.plot(
-	x,
-	a,
-);
-pyplot.plot(
-	x,
-	b,
-);
-pyplot.plot(
-	x,
-	c,
-);
+pyplot.plot({
+	x: x,
+	y: y,
+});
+pyplot.plot({
+	x: x,
+	y: a,
+});
+pyplot.plot({
+	x: x,
+	y: b,
+});
+pyplot.plot({
+	x: x,
+	y: c,
+});
 pyplot.show();