From dba23293e11fe97a65cbd2482f20ac44cddb5e9c Mon Sep 17 00:00:00 2001 From: linarphy Date: Sun, 28 Jan 2024 06:57:00 +0100 Subject: [PATCH] Add i18n & Named arg --- README.md | 6 ++- lang/en.json | 8 +++ lang/fr.json | 8 +++ lichartee.js | 137 +++++++++++++++++++++++++++++---------------------- main.js | 64 +++++++++++++++++++----- test.js | 41 +++++++-------- 6 files changed, 172 insertions(+), 92 deletions(-) create mode 100644 lang/en.json create mode 100644 lang/fr.json diff --git a/README.md b/README.md index 6da6f73..62e8122 100644 --- a/README.md +++ b/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 diff --git a/lang/en.json b/lang/en.json new file mode 100644 index 0000000..4d0da94 --- /dev/null +++ b/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" +} diff --git a/lang/fr.json b/lang/fr.json new file mode 100644 index 0000000..873dfe2 --- /dev/null +++ b/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" +} diff --git a/lichartee.js b/lichartee.js index 411409e..fe64455 100644 --- a/lichartee.js +++ b/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( - width = 100 , - height = 100 , - ) + 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, + }); } } } diff --git a/main.js b/main.js index 0c91fde..b6c7c90 100644 --- a/main.js +++ b/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); } diff --git a/test.js b/test.js index 105d468..b8804b9 100644 --- a/test.js +++ b/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();