tina4js 0.0.2 → 0.0.3

package/tina4/Globals.ts

@@ -1,32 +1,32 @@
-export class Globals {
-
-    static initialize () {
-        window['tina4'] = {};
-    }
-
-    static defined() {
-        return (window['tina4'] !== undefined);
-    }
-
-    static set(name, value) {
-        if (!this.defined()) {
-            this.initialize();
-        }
-        window['tina4'][name] = value;
-    }
-
-    static append (name, value) {
-        if (window['tina4'][name] === undefined) {
-            window['tina4'][name] = [];
-        }
-        window['tina4'][name].push(value);
-    }
-
-    static get (name) {
-        if (this.defined() && window['tina4'][name]) {
-            return window['tina4'][name];
-        } else {
-            return null;
-        }
-    }
+export class Globals {
+
+    static initialize () {
+        window['tina4'] = {};
+    }
+
+    static defined() {
+        return (window['tina4'] !== undefined);
+    }
+
+    static set(name, value) {
+        if (!this.defined()) {
+            this.initialize();
+        }
+        window['tina4'][name] = value;
+    }
+
+    static append (name, value) {
+        if (window['tina4'][name] === undefined) {
+            window['tina4'][name] = [];
+        }
+        window['tina4'][name].push(value);
+    }
+
+    static get (name) {
+        if (this.defined() && window['tina4'][name]) {
+            return window['tina4'][name];
+        } else {
+            return null;
+        }
+    }
 }

package/tina4/History.ts

@@ -1,26 +1,26 @@
-export class History {
-
-    static addHistory(path, target, method) {
-        let historyInfo = JSON.parse(localStorage.getItem('history'));
-        let pathInfo = {path: null};
-        if (historyInfo.length > 0) {
-            pathInfo = historyInfo[historyInfo.length - 1];
-        }
-        if (method === 'GET' && pathInfo.path !== path || method === 'POST') {
-            historyInfo.push({path: path, target: target});
-            localStorage.setItem('history', JSON.stringify(historyInfo));
-        }
-    }
-
-    static resolveHistory() {
-        let historyInfo = JSON.parse(localStorage.getItem('history'));
-        historyInfo.pop();
-        let pathInfo = {path: "/", target: null};
-        if (historyInfo.length > 0) {
-            pathInfo = historyInfo[historyInfo.length - 1];
-            localStorage.setItem('history', JSON.stringify(historyInfo));
-        }
-        return pathInfo;
-    }
-
+export class History {
+
+    static addHistory(path, target, method) {
+        let historyInfo = JSON.parse(localStorage.getItem('history'));
+        let pathInfo = {path: null};
+        if (historyInfo.length > 0) {
+            pathInfo = historyInfo[historyInfo.length - 1];
+        }
+        if (method === 'GET' && pathInfo.path !== path || method === 'POST') {
+            historyInfo.push({path: path, target: target});
+            localStorage.setItem('history', JSON.stringify(historyInfo));
+        }
+    }
+
+    static resolveHistory() {
+        let historyInfo = JSON.parse(localStorage.getItem('history'));
+        historyInfo.pop();
+        let pathInfo = {path: "/", target: null};
+        if (historyInfo.length > 0) {
+            pathInfo = historyInfo[historyInfo.length - 1];
+            localStorage.setItem('history', JSON.stringify(historyInfo));
+        }
+        return pathInfo;
+    }
+
 }

package/tina4/Post.ts

@@ -1,10 +1,10 @@
-import {Route} from "./Route"
-import {Router} from "./Router";
-
-export class Post implements Route {
-    static;
-    private method : string = 'POST';
-    add(path: string, callback): void {
-        Router.add(this.method, path, callback)
-    }
+import {Route} from "./Route"
+import {Router} from "./Router";
+
+export class Post implements Route {
+    static;
+    private method : string = 'POST';
+    add(path: string, callback): void {
+        Router.add(this.method, path, callback)
+    }
 }

package/tina4/Route.ts

@@ -1,3 +1,3 @@
-export interface Route {
-     add(path: string, callback):void;
+export interface Route {
+     add(path: string, callback):void;
 }

package/tina4/Router.ts

@@ -1,163 +1,163 @@
-import {Globals} from "./Globals";
-import {Tina4} from "./Tina4";
-
-export class Router {
-
-    private readonly url: string;
-    private readonly target:  string;
-    private readonly method:  string;
-    private readonly data;
-    private matchesPath;
-    private matchesUrl;
-    private params;
-    private matched;
-
-    constructor(url, target, method, data=null)  {
-        //console.log('Constructing', url, target, method, data);
-        if (method === undefined) method = 'GET';
-        this.url = url;
-        this.target = target;
-        this.method = method;
-        this.data = data;
-    }
-
-    static add(method, path, callback) {
-        Tina4.initialize();
-        //console.log('Adding Route', method, path);
-        if (Globals.defined()) {
-            Globals.append('routes', {method: method, path: path, callback: callback});
-        }
-    }
-
-    static response(content, httpCode, contentType) {
-        console.log('Response', content, httpCode, contentType);
-
-        //manipulate content based on the contentType
-        if ( typeof content === 'object' &&
-            !Array.isArray(content) &&
-            content !== null
-        ) {
-            content = JSON.stringify(content);
-        }
-
-        return content;
-    }
-
-    //https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
-    getRequestParams() {
-        let s1 = location.search.substring(1, location.search.length).split('&'),
-            r = {}, s2, i;
-        for (i = 0; i < s1.length; i += 1) {
-            s2 = s1[i].split('=');
-            r[decodeURIComponent(s2[0])] = decodeURIComponent(s2[1]);
-        }
-
-        if (JSON.stringify(r) == '{"":"undefined"}') return {};
-        return r;
-    };
-
-    cleanUrl(url) {
-        const regex = /(.*)\/\/(.*)\//g;
-        url = url.replace(regex, '/').replace('#','');
-        return url;
-    }
-
-    match (url:string, path:string, method:string): boolean {
-        if  (this.method !== method) return false;
-        url = this.cleanUrl(url);
-        //console.log('Matching', url, path, method);
-        const  urlExpression  =  /(.*)\/(.*)|{(.*)}/g;
-        const  pathExpression  =  /(.*)\/(.*)|{(.*)}/g;
-
-        if (url === path) {
-            return true;
-        } else {
-            this.matchesUrl = urlExpression.exec (url);
-            this.matchesPath = pathExpression.exec (path);
-            if (this.matchesUrl.length === this.matchesPath.length) {
-                this.matched = true;
-                this.matchesUrl.every(function (urlPath, index) {
-                    if (index !== 0 && urlPath !== undefined) {
-                        //console.log('Matching', urlPath, this.matchesPath[index]);
-                        if (urlPath !== this.matchesPath[index] && this.matchesPath[index][0] !== '{') {
-                            //console.log('Not matching', url, path);
-                            this.matched = false;
-                            return false;
-                        } else if (this.matchesPath[index][0] === '{') {
-                            this.params[this.matchesPath[index].replace('{', '').replace('}', '')] = urlPath;
-                            this.matched = true;
-                        }
-                    }
-                    return true;
-                }, this);
-                if (this.matched) return true;
-            } else {
-                return false;
-            }
-        }
-    }
-
-    parse(url: string, target: string, callback) {
-        //console.log (window['tina4']['routes']);
-        let routes = Globals.get('routes');
-        let rendered = false;
-        routes.every(function(route){
-            if (this.match(url, route.path, route.method )) {
-                if (route.method === 'GET') {
-                    history.pushState({}, '', url);
-                }
-                route.callback( function(content, httpCode, contentType) {
-                     callback ( target, Router.response(content, httpCode, contentType) );
-                }, this.params );
-                rendered = true;
-            }
-            return true;
-        }.bind(this));
-
-        if (!rendered) {
-            //See if we can find a twig file
-            Tina4.renderTemplate(`${url}.twig`, {}, function (html) {
-                callback(target, Router.response(html, 200, 'text/html'));
-            });
-        }
-    }
-
-    submitHandler(event) {
-        if (event.preventDefault) event.preventDefault();
-        let form = event.target;
-        //console.log ('Form', form.action, window.location.pathname, form);
-        if (form.action === undefined) form.action = window.location.pathname;
-
-        // @ts-ignore
-        window.navigate(form.action, form.getAttribute("target") , 'POST', form);
-    }
-
-    run() {
-        // @ts-ignore
-        window.submitHandler = this.submitHandler;
-        this.params = this.getRequestParams();
-        this.params.data = this.data;
-        this.parse(this.url, this.target, function (target, content) {
-            //console.log ('Target', target, content);
-            if (document.getElementById(target) !== null) {
-                document.getElementById(target).innerHTML = content;
-                //Attach the form submit handler
-                let forms = Array.prototype.slice.call(document.getElementsByTagName('form'));
-                forms.forEach(function (form) {
-                    //console.log('Found form', form.method);
-                    if (form.attachEvent) {
-                        // @ts-ignore
-                        form.attachEvent("submit", window.submitHandler);
-                    } else {
-                        // @ts-ignore
-                        form.addEventListener("submit", window.submitHandler);
-                    }
-                });
-            } else {
-                console.log('Cannot find route')
-            }
-        });
-    }
-}
-
-
+import {Globals} from "./Globals";
+import {Tina4} from "./Tina4";
+
+export class Router {
+
+    private readonly url: string;
+    private readonly target:  string;
+    private readonly method:  string;
+    private readonly data;
+    private matchesPath;
+    private matchesUrl;
+    private params;
+    private matched;
+
+    constructor(url, target, method, data=null)  {
+        //console.log('Constructing', url, target, method, data);
+        if (method === undefined) method = 'GET';
+        this.url = url;
+        this.target = target;
+        this.method = method;
+        this.data = data;
+    }
+
+    static add(method, path, callback) {
+        Tina4.initialize();
+        //console.log('Adding Route', method, path);
+        if (Globals.defined()) {
+            Globals.append('routes', {method: method, path: path, callback: callback});
+        }
+    }
+
+    static response(content, httpCode, contentType) {
+        console.log('Response', content, httpCode, contentType);
+
+        //manipulate content based on the contentType
+        if ( typeof content === 'object' &&
+            !Array.isArray(content) &&
+            content !== null
+        ) {
+            content = JSON.stringify(content);
+        }
+
+        return content;
+    }
+
+    //https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
+    getRequestParams() {
+        let s1 = location.search.substring(1, location.search.length).split('&'),
+            r = {}, s2, i;
+        for (i = 0; i < s1.length; i += 1) {
+            s2 = s1[i].split('=');
+            r[decodeURIComponent(s2[0])] = decodeURIComponent(s2[1]);
+        }
+
+        if (JSON.stringify(r) == '{"":"undefined"}') return {};
+        return r;
+    };
+
+    cleanUrl(url) {
+        const regex = /(.*)\/\/(.*)\//g;
+        url = url.replace(regex, '/').replace('#','');
+        return url;
+    }
+
+    match (url:string, path:string, method:string): boolean {
+        if  (this.method !== method) return false;
+        url = this.cleanUrl(url);
+        //console.log('Matching', url, path, method);
+        const  urlExpression  =  /(.*)\/(.*)|{(.*)}/g;
+        const  pathExpression  =  /(.*)\/(.*)|{(.*)}/g;
+
+        if (url === path) {
+            return true;
+        } else {
+            this.matchesUrl = urlExpression.exec (url);
+            this.matchesPath = pathExpression.exec (path);
+            if (this.matchesUrl.length === this.matchesPath.length) {
+                this.matched = true;
+                this.matchesUrl.every(function (urlPath, index) {
+                    if (index !== 0 && urlPath !== undefined) {
+                        //console.log('Matching', urlPath, this.matchesPath[index]);
+                        if (urlPath !== this.matchesPath[index] && this.matchesPath[index][0] !== '{') {
+                            //console.log('Not matching', url, path);
+                            this.matched = false;
+                            return false;
+                        } else if (this.matchesPath[index][0] === '{') {
+                            this.params[this.matchesPath[index].replace('{', '').replace('}', '')] = urlPath;
+                            this.matched = true;
+                        }
+                    }
+                    return true;
+                }, this);
+                if (this.matched) return true;
+            } else {
+                return false;
+            }
+        }
+    }
+
+    parse(url: string, target: string, callback) {
+        //console.log (window['tina4']['routes']);
+        let routes = Globals.get('routes');
+        let rendered = false;
+        routes.every(function(route){
+            if (this.match(url, route.path, route.method )) {
+                if (route.method === 'GET') {
+                    history.pushState({}, '', url);
+                }
+                route.callback( function(content, httpCode, contentType) {
+                     callback ( target, Router.response(content, httpCode, contentType) );
+                }, this.params );
+                rendered = true;
+            }
+            return true;
+        }.bind(this));
+
+        if (!rendered) {
+            //See if we can find a twig file
+            Tina4.renderTemplate(`${url}.twig`, {}, function (html) {
+                callback(target, Router.response(html, 200, 'text/html'));
+            });
+        }
+    }
+
+    submitHandler(event) {
+        if (event.preventDefault) event.preventDefault();
+        let form = event.target;
+        //console.log ('Form', form.action, window.location.pathname, form);
+        if (form.action === undefined) form.action = window.location.pathname;
+
+        // @ts-ignore
+        window.navigate(form.action, form.getAttribute("target") , 'POST', form);
+    }
+
+    run() {
+        // @ts-ignore
+        window.submitHandler = this.submitHandler;
+        this.params = this.getRequestParams();
+        this.params.data = this.data;
+        this.parse(this.url, this.target, function (target, content) {
+            //console.log ('Target', target, content);
+            if (document.getElementById(target) !== null) {
+                document.getElementById(target).innerHTML = content;
+                //Attach the form submit handler
+                let forms = Array.prototype.slice.call(document.getElementsByTagName('form'));
+                forms.forEach(function (form) {
+                    //console.log('Found form', form.method);
+                    if (form.attachEvent) {
+                        // @ts-ignore
+                        form.attachEvent("submit", window.submitHandler);
+                    } else {
+                        // @ts-ignore
+                        form.addEventListener("submit", window.submitHandler);
+                    }
+                });
+            } else {
+                console.log('Cannot find route')
+            }
+        });
+    }
+}
+
+

package/tina4/Tina4.ts

@@ -1,95 +1,95 @@
-import {Globals} from "./Globals"
-import {Router} from "./Router";
-import {History} from "./History";
-import Twig from 'twig';
-import {Tina4Config} from "./components/Tina4Config";
-import {Tina4Api} from "./components/Tina4Api";
-
-export class Tina4 {
-    constructor(config = null) {
-        if (config === undefined || config === null) {
-            if (Globals.defined() && Globals.get('config')) {
-                config = Globals.get('config');
-            } else {
-                config = {defaultTarget: 'root'};
-            }
-        }
-        console.log('Config found', config);
-        Tina4.resolveRoutes(window.location.pathname, config.defaultTarget);
-    }
-
-    static initialize(config = null) {
-        if (!Globals.defined()) {
-            console.log('Initialize Tina4');
-            Globals.initialize();
-            Globals.set('routes', []);
-            Globals.set('twig', Twig);
-            localStorage.setItem('history', JSON.stringify([]));
-            Tina4.registerComponents();
-        }
-
-        if (config !== null) {
-            Globals.set('config', config);
-        } else {
-            Globals.set('config', {defaultTarget: 'root'});
-        }
-
-        //back navigation in the browser
-        window.onpopstate=function(e){
-            if (e.state) {
-                let pathInfo = History.resolveHistory ();
-                Tina4.resolveRoutes(pathInfo.path, pathInfo.target, 'GET', {});
-            }
-        }
-
-        //add the navigate handler
-        // @ts-ignore
-        window.navigate = function (path, target = 'root', method: string = 'GET', data = null) {
-            if (Globals.get('config').defaultTarget !== null) {
-                target = Globals.get('config').defaultTarget;
-            }
-
-            Tina4.resolveRoutes(path, target, method, data);
-        };
-    }
-
-    static registerComponents() {
-        console.log('Register components');
-        customElements.define('tina4-config', Tina4Config);
-        customElements.define('tina4-api', Tina4Api);
-    }
-
-    static resolveRoutes(path, target, method: string = 'GET', data = null) {
-        History.addHistory (path, target, method);
-        return new Router(path, target, method, data).run();
-    }
-
-    static getFileExtension(filename) {
-        let split = filename.trim().split('.');
-        return split[split.length - 1];
-    }
-
-    static renderTemplate(content, params, callback) {
-        if (this.getFileExtension(content) == 'twig') {
-            try {
-                Twig.twig(
-                    {
-                        id: content,
-                        href: `/templates/${content}`,
-                        async:true,
-                        load: (template) => {
-                            console.log(`Template loaded: `, template, params);
-                            callback(template.render(params));
-                        }
-                    });
-            }
-            catch(exception) {
-                callback( Twig.twig({ref: content}).render(params));
-            }
-        } else {
-            let template = Twig.twig({data: content});
-            callback( template.render(params));
-        }
-        return false;
-    }
+import {Globals} from "./Globals"
+import {Router} from "./Router";
+import {History} from "./History";
+import Twig from 'twig';
+import {Tina4Config} from "./components/Tina4Config";
+import {Tina4Api} from "./components/Tina4Api";
+
+export class Tina4 {
+    constructor(config = null) {
+        if (config === undefined || config === null) {
+            if (Globals.defined() && Globals.get('config')) {
+                config = Globals.get('config');
+            } else {
+                config = {defaultTarget: 'root'};
+            }
+        }
+        console.log('Config found', config);
+        Tina4.resolveRoutes(window.location.pathname, config.defaultTarget);
+    }
+
+    static initialize(config = null) {
+        if (!Globals.defined()) {
+            console.log('Initialize Tina4');
+            Globals.initialize();
+            Globals.set('routes', []);
+            Globals.set('twig', Twig);
+            localStorage.setItem('history', JSON.stringify([]));
+            Tina4.registerComponents();
+        }
+
+        if (config !== null) {
+            Globals.set('config', config);
+        } else {
+            Globals.set('config', {defaultTarget: 'root'});
+        }
+
+        //back navigation in the browser
+        window.onpopstate=function(e){
+            if (e.state) {
+                let pathInfo = History.resolveHistory ();
+                Tina4.resolveRoutes(pathInfo.path, pathInfo.target, 'GET', {});
+            }
+        }
+
+        //add the navigate handler
+        // @ts-ignore
+        window.navigate = function (path, target = 'root', method: string = 'GET', data = null) {
+            if (Globals.get('config').defaultTarget !== null) {
+                target = Globals.get('config').defaultTarget;
+            }
+
+            Tina4.resolveRoutes(path, target, method, data);
+        };
+    }
+
+    static registerComponents() {
+        console.log('Register components');
+        customElements.define('tina4-config', Tina4Config);
+        customElements.define('tina4-api', Tina4Api);
+    }
+
+    static resolveRoutes(path, target, method: string = 'GET', data = null) {
+        History.addHistory (path, target, method);
+        return new Router(path, target, method, data).run();
+    }
+
+    static getFileExtension(filename) {
+        let split = filename.trim().split('.');
+        return split[split.length - 1];
+    }
+
+    static renderTemplate(content, params, callback) {
+        if (this.getFileExtension(content) == 'twig') {
+            try {
+                Twig.twig(
+                    {
+                        id: content,
+                        href: `/templates/${content}`,
+                        async:true,
+                        load: (template) => {
+                            console.log(`Template loaded: `, template, params);
+                            callback(template.render(params));
+                        }
+                    });
+            }
+            catch(exception) {
+                callback( Twig.twig({ref: content}).render(params));
+            }
+        } else {
+            let template = Twig.twig({data: content});
+            callback( template.render(params));
+        }
+        return false;
+    }
 }