Initial commit

jmfcool · Mar 13, 2022 · 66798d9 · 66798d9
1 parent a0a1a91
commit 66798d9
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 0 deletions.
diff --git a/controller.js b/controller.js
@@ -0,0 +1,38 @@
+import { jmfcool } from './parser.js';
+
+var controller = {
+    model : function(file, callback)
+    {
+        fetch(file).then(response => response.json()).then(data => callback(data));
+    },
+    hook : function(name)
+    {
+        return document.getElementsByClassName(name)[0];
+    },
+    view : function(file, callback)
+    {
+        fetch(file).then(response => response.text()).then(data => callback(data));
+    },
+    init : function()
+    {
+        var display, render;   
+
+        controller.model('model.json', function(model)
+        {
+            controller.view('user.view', function(view)
+            {
+                display = controller.hook('response-user');
+                render = jmfcool.parser.render({ view:view, model:model });
+                display.innerHTML = render;
+            });
+            controller.view('item.view', function(view)
+            {
+                display = controller.hook('response-item');
+                render = jmfcool.parser.render({ view:view, model:model });
+                display.innerHTML = render;
+            });
+        });
+    }
+};
+
+window.addEventListener("load",controller.init,false);
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<htm>
+    <head>
+        <title>Jmfcool.js</title>
+		<!-- Metatags -->
+
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+		<!-- End of Metatags -->
+        <style>
+
+            h2 span { font-weight: normal; font-style: italic; font-size: 18px; }
+            h3 { margin-bottom: 0; }
+            p { margin-top: 0; }
+
+        </style>
+    </head>
+    <body>
+
+        <div class="response-user"></div>
+        <div class="response-item"></div>
+
+    </body>
+    <script type="module" src="controller.js"></script>
+</html>
diff --git a/item.view b/item.view
@@ -0,0 +1,3 @@
+<div class="item">
+    <p>Your price for ${item.name} is $${item.cost?string.currency}!</p>
+</div>
diff --git a/model.json b/model.json
@@ -0,0 +1,12 @@
+{
+    "user" : 
+    {
+        "firstName" : "John",
+        "lastName" : "Doe"
+    },
+    "item" : 
+    {
+        "cost" : 18.5000,
+        "name" : "Oranges"
+    }
+}
diff --git a/parser.js b/parser.js
@@ -0,0 +1,105 @@
+var jmfcool = jmfcool || {};
+
+jmfcool.parser = {
+    formatters : 
+    {
+        string : 
+        {
+            this : function(o) { if (typeof o != 'string') o = (o).toString(); return o; },
+            currency : function(o) { if (typeof o == 'number') o = (o).toFixed(2); return o; }  
+        } 
+    }   
+};
+
+jmfcool.parser.render = function(args)
+{
+    return jmfcool.parser.view({ view:args.view, data:args.model });
+};
+
+jmfcool.parser.view = function(args)
+{
+    var view = args.view,
+        data = args.data,
+        tags, tag, obj, tmp, filter;
+
+    filter = /\$\{([^}]*)}/g;
+
+    if(view.match(filter) === null) return view;
+
+    tags = view.match(filter);
+
+    filter = /\$\{([^}]*)}/;
+
+    for(var i=0; i<tags.length; i++)
+    {
+        tag = tags[i].match(filter)[0];
+        obj = tags[i].match(filter)[1];
+        tmp = jmfcool.parser.evaluator({ data:data, obj:obj, type:'tags' });
+        view = view.replace(tag,tmp);
+    }
+
+    return view;
+};
+
+jmfcool.parser.evaluator = function(args)
+{
+    var obj = args.obj,
+        data = args.data,
+        type = args.type,
+        object;
+
+    if(type === 'tags') object = jmfcool.parser.getObject({ obj:obj, data:data });
+
+    return object;
+};
+
+jmfcool.parser.getObject = function(args)
+{
+    var obj = args.obj,
+        data = args.data,
+        lookup;
+
+    if(/\?/.test(obj))
+    {
+        obj = obj.split('?');
+        obj = obj[0];
+    }
+
+    lookup = obj.split('.');
+
+    for (var i=0; i<lookup.length; i++)
+    {
+
+        data = data[lookup[i]];
+
+        if (data === undefined) return '';
+
+        if(/\?/.test(args.obj))
+        {
+            var checks, formatter;
+                checks = args.obj.split('?');
+
+            formatter = jmfcool.parser.getFormatter({ checks:checks[1] });
+            data = formatter(data);
+        }
+    }
+
+    return data;
+};
+
+jmfcool.parser.getFormatter = function(args)
+{
+    var checks = args.checks,
+        obj = jmfcool.parser.formatters,
+        check = checks.split('.');
+
+    for (var i=0; i<check.length; i++)
+    {
+        obj = obj[check[i]];
+        if (obj === undefined) return null;
+    }
+
+    return obj;
+};
+
+export { jmfcool };
diff --git a/user.view b/user.view
@@ -0,0 +1,3 @@
+<div class="user">
+    <h3>Hello ${user.firstName} ${user.lastName}</h3>
+</div>