simplyview 1.0.0 → 2.0.2

package/js/simply.route.js

@@ -1,6 +1,17 @@
-this.simply = (function(simply, global) {
+(function(global) {
+    'use strict';
 
     var routeInfo = [];
+    var listeners = {
+        goto: {},
+        match: {},
+        call: {},
+        finish: {}
+    };
+
+    function getRegexpFromRoute(route) {
+        return new RegExp('^'+route.replace(/:\w+/g, '([^/]+)').replace(/:\*/, '(.*)'));
+    }
 
     function parseRoutes(routes) {
         var paths = Object.keys(routes);
@@ -17,7 +28,7 @@ this.simply = (function(simply, global) {
                 }
             } while(matches);
             routeInfo.push({
-                match:  new RegExp(path.replace(/:\w+/g, '([^/]+)').replace(/:\*/, '(.*)')),
+                match:  getRegexpFromRoute(path),
                 params: params,
                 action: routes[path]
             });
@@ -37,35 +48,115 @@ this.simply = (function(simply, global) {
         }
         if (link 
             && link.pathname 
-            && link.hostname==document.location.hostname 
+            && link.hostname==global.location.hostname 
             && !link.link
             && !link.dataset.simplyCommand
-            && simply.route.has(link.pathname)
         ) {
-            simply.route.goto(link.pathname);
-            evt.preventDefault();
-            return false;
+            let path = getPath(link.pathname+link.hash);
+            if ( !route.has(path) ) {
+                path = getPath(link.pathname);
+            }
+            if ( route.has(path) ) {
+                let params = runListeners('goto', { path: path});
+                if (params.path) {
+                    route.goto(params.path);
+                }
+                evt.preventDefault();
+                return false;
+            }
         }
     };
 
-    simply.route = {
+    var options = {
+        root: '/'
+    };
+
+    var getPath = function(path) {
+        if (path.substring(0,options.root.length)==options.root
+            ||
+            ( options.root[options.root.length-1]=='/' 
+                && path.length==(options.root.length-1)
+                && path == options.root.substring(0,path.length)
+            )
+        ) {
+            path = path.substring(options.root.length);
+        }
+        if (path[0]!='/' && path[0]!='#') {
+            path = '/'+path;
+        }
+        return path;
+    };
+
+    var getUrl = function(path) {
+        path = getPath(path);
+        if (options.root[options.root.length-1]==='/' && path[0]==='/') {
+            path = path.substring(1);
+        }
+        return options.root + path;
+    };
+
+    function runListeners(action, params) {
+        if (!Object.keys(listeners[action])) {
+            return;
+        }
+        Object.keys(listeners[action]).forEach(function(route) {
+            var routeRe = getRegexpFromRoute(route);
+            if (routeRe.exec(params.path)) {
+                var result;
+                listeners[action][route].forEach(function(callback) {
+                    result = callback.call(global, params);
+                    if (result) {
+                        params = result;
+                    }
+                });
+            }
+        });
+        return params;
+    }
+
+    var route = {
         handleEvents: function() {
             global.addEventListener('popstate', function() {
-                simply.route.match(document.location.pathname);
+                if (route.match(getPath(document.location.pathname + document.location.hash)) === false) {
+					route.match(getPath(document.location.pathname));
+				}
             });
-            document.addEventListener('click', linkHandler);
+            global.document.addEventListener('click', linkHandler);
         },
         load: function(routes) {
             parseRoutes(routes);
         },
+        clear: function() {
+            routeInfo = [];
+            listeners = {
+                match: {},
+                call: {},
+                finish: {}
+            };
+        },
         match: function(path, options) {
+            var args = {
+                path: path,
+                options: options
+            };
+            args = runListeners('match',args);
+            path = args.path ? args.path : path;
+
             var matches;
+            if (!path) {
+				if (route.match(document.location.pathname+document.location.hash)) {
+					return true;
+				} else {
+					return route.match(document.location.pathname);
+				}
+            }
+            path = getPath(path);
             for ( var i=0; i<routeInfo.length; i++) {
-                if (path[path.length-1]!='/') {
+                if (path && path[path.length-1]!='/') {
                     matches = routeInfo[i].match.exec(path+'/');
                     if (matches) {
                         path+='/';
-                        history.replaceState({}, '', path);
+                        history.replaceState({}, '', getUrl(path));
                     }
                 }
                 matches = routeInfo[i].match.exec(path);
@@ -78,15 +169,23 @@ this.simply = (function(simply, global) {
                         params[key] = matches[i+1];
                     });
                     Object.assign(params, options);
-                    return routeInfo[i].action.call(simply.route, params);
-                }
+                    args.route = route;
+                    args.params = params;
+                    args = runListeners('call', args);
+                    params = args.params ? args.params : params;
+                    args.result = routeInfo[i].action.call(route, params);
+                    runListeners('finish', args);
+                    return args.result;
+				}
             }
+			return false;
         },
         goto: function(path) {
-            history.pushState({},'',path);
-            return simply.route.match(path);
+            history.pushState({},'',getUrl(path));
+            return route.match(path);
         },
         has: function(path) {
+            path = getPath(path);
             for ( var i=0; i<routeInfo.length; i++) {
                 var matches = routeInfo[i].match.exec(path);
                 if (matches && matches.length) {
@@ -94,9 +193,40 @@ this.simply = (function(simply, global) {
                 }
             }
             return false;
+        },
+        addListener: function(action, route, callback) {
+            if (['goto','match','call','finish'].indexOf(action)==-1) {
+                throw new Error('Unknown action '+action);
+            }
+            if (!listeners[action][route]) {
+                listeners[action][route] = [];
+            }
+            listeners[action][route].push(callback);
+        },
+        removeListener: function(action, route, callback) {
+            if (['match','call','finish'].indexOf(action)==-1) {
+                throw new Error('Unknown action '+action);
+            }
+            if (!listeners[action][route]) {
+                return;
+            }
+            listeners[action][route] = listeners[action][route].filter(function(listener) {
+                return listener != callback;
+            });
+		},
+        init: function(params) {
+            if (params.root) {
+                options.root = params.root;
+            }
         }
     };
 
-    return simply;
-
-})(this.simply || {}, this);
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = route;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.route = route;
+    }
+})(this);

package/js/simply.view.js

@@ -1,22 +1,22 @@
-this.simply = (function(simply, global) {
-
-    simply.view = function(app, view) {
+(function(global) {
+    'use strict';
+    var view = function(app, view) {
 
         app.view = view || {};
 
         var load = function() {
             var data = app.view;
-            var path = editor.data.getDataPath(app.container);
-            app.view = editor.currentData[path];
+            var path = global.editor.data.getDataPath(app.container);
+            app.view = global.editor.currentData[path];
             Object.keys(data).forEach(function(key) {
                 app.view[key] = data[key];
             });
         };
 
-        if (global.editor && editor.currentData) {
+        if (global.editor && global.editor.currentData) {
             load();
         } else {
-            document.addEventListener('simply-content-loaded', function() {
+            global.document.addEventListener('simply-content-loaded', function() {
                 load();
             });
         }
@@ -24,5 +24,12 @@ this.simply = (function(simply, global) {
         return app.view;
     };
 
-    return simply;
-})(this.simply || {}, this);
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = view;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.view = view;
+    }
+})(this);

package/js/simply.viewmodel.js

@@ -0,0 +1,174 @@
+(function(global) {
+    'use strict';
+    
+    function ViewModel(name, data, options) {
+        this.name = name;
+        this.data = data || [];
+        this.view = {
+            options: {},
+            data: [] //Array.from(this.data).slice()
+        };
+        this.options = options || {};
+        this.plugins = {
+            start: [],
+            select: [],
+            order: [],
+            render: [],
+            finish: []
+        };
+    }
+
+    ViewModel.prototype.update = function(params) {
+        if (!params) {
+            params = {};
+        }
+        if (params.data) {
+            // this.data is a reference to the data passed, so that any changes in it will get applied
+            // to the original
+            this.data = params.data;
+        }
+        // the view is a shallow copy of the array, so that changes in sort order and filtering
+        // won't get applied to the original, but databindings on its children will still work
+        this.view.data = Array.from(this.data).slice();
+        var plugins = this.plugins.start.concat(this.plugins.select, this.plugins.order, this.plugins.render, this.plugins.finish);
+        var self = this;
+        plugins.forEach(function(plugin) {
+            plugin.call(self, params);
+        });
+
+        if (global.editor) {
+            global.editor.addDataSource(this.name,{
+                load: function(el, callback) {
+                    callback(self.view.data);
+                }
+            });
+            updateDataSource(this.name);
+        }
+    };
+
+    ViewModel.prototype.addPlugin = function(pipe, plugin) {
+        if (typeof this.plugins[pipe] == 'undefined') {
+            throw new Error('Unknown pipeline '+pipe);
+        }
+        this.plugins[pipe].push(plugin);
+    };
+
+    ViewModel.prototype.removePlugin = function(pipe, plugin) {
+        if (typeof this.plugins[pipe] == 'undefined') {
+            throw new Error('Unknown pipeline '+pipe);
+        }
+        this.plugins[pipe] = this.plugins[pipe].filter(function(p) {
+            return p != plugin;
+        });
+    };
+
+    var updateDataSource = function(name) {
+        global.document.querySelectorAll('[data-simply-data="'+name+'"]').forEach(function(list) {
+            global.editor.list.applyDataSource(list, name);
+        });
+    };
+
+    var createSort = function(options) {
+        var defaultOptions = {
+            name: 'sort',
+            getSort: function(params) {
+                return Array.prototype.sort;
+            }
+        };
+        options = Object.assign(defaultOptions, options || {});
+
+        return function(params) {
+            this.options[options.name] = options;
+            if (params[options.name]) {
+                options = Object.assign(options, params[options.name]);
+            }
+            this.view.data.sort(options.getSort.call(this, options));
+        };
+    };
+
+    var createPaging = function(options) {
+        var defaultOptions = {
+            name: 'paging',
+            page: 1,
+            pageSize: 100,
+            max: 1,
+            prev: 0,
+            next: 0
+        };
+        options = Object.assign(defaultOptions, options || {});
+
+        return function(params) {
+            this.options[options.name] = options;
+            if (this.view.data) {
+                options.max = Math.max(1, Math.ceil(Array.from(this.view.data).length / options.pageSize));
+            } else {
+                options.max = 1;
+            }
+            if (this.view.changed) {
+                options.page = 1; // reset to page 1 when something in the view data has changed
+            }
+            if (params[options.name]) {
+                options = Object.assign(options, params[options.name]);
+            }
+            options.page = Math.max(1, Math.min(options.max, options.page)); // clamp page nr
+            options.prev = options.page - 1; // calculate previous page, 0 is allowed
+            if (options.page<options.max) {
+                options.next = options.page + 1;
+            } else {
+                options.next = 0; // no next page
+            }
+
+            var start = (options.page - 1) * options.pageSize;
+            var end   = start + options.pageSize;
+
+            this.view.data = this.view.data.slice(start, end);
+        };
+    };
+
+    var createFilter = function(options) {
+        var defaultOptions = {
+            name: 'filter',
+            label: 'A filter',
+            getMatch: function(entry) {
+                return false;
+            }
+        };
+        options = Object.assign(defaultOptions, options || {});
+        if (options.init) {
+            options.init.call(this, options);
+        }
+        return function(params) {
+            this.options[options.name] = options;
+            if (params[options.name]) {
+                options = Object.assign(options, params[options.name]);
+            }
+            var match = options.getMatch.call(this, options);
+            if (match) {
+                options.enabled = true;
+                this.view.data = this.view.data.filter(match);
+            } else if (options.enabled) {
+                options.enabled = false;
+            }
+        }
+    }
+
+    var viewmodel = {
+        create: function(name, data, options) {
+            return new ViewModel(name, data, options);
+        },
+        createFilter: createFilter,
+        createSort: createSort,
+        createPaging: createPaging,
+        updateDataSource: updateDataSource
+    };
+
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = viewmodel;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.viewmodel = viewmodel;
+    }
+
+})(this);

package/make

@@ -1,4 +1,18 @@
 #!/bin/bash
 rm dist/simply.everything.js
-find ./js/ -type f \( -iname "*.js" ! -iname "simply.include.next.js" \) -exec cat {} \;  >> dist/simply.everything.js
-cp ./js/simply.include.next.js dist/
+cat js/simply.observe.js \
+    js/simply.render.js \
+    js/simply.path.js \
+    js/simply.route.js \
+    js/simply.activate.js \
+    js/simply.collect.js \
+    js/simply.command.js \
+    js/simply.keyboard.js \
+    js/simply.action.js \
+    js/simply.resize.js \
+    js/simply.include.js \
+    js/simply.view.js \
+    js/simply.viewmodel.js \
+    js/simply.api.js \
+    js/simply.app.js > dist/simply.everything.js
+cp js/simply.include.next.js dist/

package/make~

@@ -0,0 +1,17 @@
+#!/bin/bash
+rm dist/simply.everything.js
+cat js/simply.observe.js \
+    js/simply.render.js \
+    js/simply.path.js \
+    js/simply.route.js \
+    js/simply.activate.js \
+    js/simply.collect.js \
+    js/simply.command.js \
+    js/simply.action.js \
+    js/simply.resize.js \
+    js/simply.include.js \
+    js/simply.view.js \
+    js/simply.viewmodel.js \
+    js/simply.api.js \
+    js/simply.app.js > dist/simply.everything.js
+cp js/simply.include.next.js dist/

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "simplyview",
-  "version": "1.0.0",
+  "version": "2.0.2",
   "description": "Library to rapidly build UI components, using declarative tools",
   "main": "dist/simply.everything.js",
   "directories": {
     "example": "examples"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -24,5 +24,8 @@
   "bugs": {
     "url": "https://github.com/simplyedit/simplyview/issues"
   },
-  "homepage": "https://github.com/simplyedit/simplyview#readme"
+  "homepage": "https://github.com/simplyedit/simplyview#readme",
+  "devDependencies": {
+    "jest": "^24.9.0"
+  }
 }

package/package.json~

@@ -1,17 +1,17 @@
 {
   "name": "simplyview",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "description": "Library to rapidly build UI components, using declarative tools",
   "main": "dist/simply.everything.js",
   "directories": {
     "example": "examples"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/simplyedit/simplyview%2Cgit.git"
+    "url": "git+https://github.com/simplyedit/simplyview.git"
   },
   "keywords": [
     "UI",
@@ -22,7 +22,10 @@
   "author": "auke@muze.nl",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/simplyedit/simplyview%2Cgit/issues"
+    "url": "https://github.com/simplyedit/simplyview/issues"
   },
-  "homepage": "https://github.com/simplyedit/simplyview%2Cgit#readme"
+  "homepage": "https://github.com/simplyedit/simplyview#readme",
+  "devDependencies": {
+    "jest": "^24.9.0"
+  }
 }

package/test/simply.route.test.js

@@ -0,0 +1,102 @@
+simplyRoute = require('../js/simply.route.js');
+
+test('match fixed url', () => {
+	simplyRoute.load({
+		'/foo/': function(params) {
+			return 'bar';
+		}
+	});
+	expect(simplyRoute.match('/foo/')).toBe('bar');
+});
+
+test('match only from start', () => {
+	simplyRoute.load({
+		'/foo/': function(params) {
+			return 'bar';
+		},
+		'/oo/': function(params) {
+			return 'foobar';
+		}
+	});
+	expect(simplyRoute.match('oo/')).toBe('foobar');
+});
+
+test('match parameter', () => {
+	simplyRoute.load({
+		'/bar/:id' : function(params) {
+			return params.id;
+		}
+	});
+	expect(simplyRoute.match('bar/foobar')).toBe('foobar');
+});
+
+test('multiple parameters', () => {
+	simplyRoute.load({
+		'/baz/:id/:page' : function(params) {
+			return params.id+':'+params.page;
+		}
+	});
+	expect(simplyRoute.match('baz/foobar/1')).toBe('foobar:1');	
+});
+
+test('match listener', () => {
+	simplyRoute.addListener('match', 'oo/', function(args) {
+		args.path = 'foo/';
+		return args;
+	});
+	simplyRoute.load({
+		'/oo/': function(params) {
+			return 'foobar';
+		},
+		'/foo/': function(params) {
+			return 'bar';
+		}
+	});
+	expect(simplyRoute.match('oo/')).toBe('bar');
+});
+
+test('call listener', () => {
+	simplyRoute.clear();
+	simplyRoute.addListener('call', 'foo/:id', function(args) {
+		args.params.id = 'foo'+args.params.id;
+		return args;
+	});
+	simplyRoute.load({
+		'/foo/:id': function(params) {
+			return params.id;
+		}
+	});
+	expect(simplyRoute.match('foo/bar')).toBe('foobar');
+});
+
+test('remove listener', () => {
+	simplyRoute.clear();
+	var callback = function(args) {
+		args.params.id = 'foo'+args.params.id;
+		return args;
+	};
+	simplyRoute.addListener('call', 'foo/:id', callback);
+	simplyRoute.load({
+		'/foo/:id': function(params) {
+			return params.id;
+		}
+	});
+	simplyRoute.removeListener('call','foo/:id', callback);
+	expect(simplyRoute.match('foo/bar')).toBe('bar');
+});
+
+test('multiple listeners', () => {
+	simplyRoute.clear();
+	simplyRoute.addListener('call', 'foo/:id', function(args) {
+		args.params.id+='1';
+	});
+	simplyRoute.addListener('call', 'foo/:id', function(args) {
+		args.params.id+='2';
+	});
+	simplyRoute.load({
+		'/foo/:id': function(params) {
+			return params.id;
+		}
+	});
+	expect(simplyRoute.match('foo/bar')).toBe('bar12');
+});

package/examples/todo.html~

@@ -1,50 +0,0 @@
-<h1>Examples</h1>
-<h2>Counter</h2>
-<link rel="stylesheet" href="examples.css">
-
-<div id="todoApp">
-	<form data-simply-command="addEntry">
-		<input type="text" name="newItem" class="new-todo" placeholder="What needs to be done?" autocomplete="off">
-	</form>
-	<ul class="todo-list" data-simply-list="items">
-		<template>
-			<li>
-				<label data-simply-field="item">Item</label>
-			</li>
-		</template>
-	</ul>
-</div>
-<script src="../dist/simply.everything.js"></script>
-<script>
-	var todoApp = simply.app({
-		bind: {
-			twoway: false
-		},
-		container: document.getElementById('todoApp'),
-		commands: {
-			addEntry: function(form, values) {
-				todoApp.actions.addEntry(values.newItem);
-				form.elements.newItem.value = '';
-			}
-		},
-		actions: {
-			addEntry: function(item) {
-				todoApp.view.items.push({
-					item: item,
-					completed: 0
-				});
-				return Promise.resolve();			
-			}
-		},
-		view: {
-			items: [
-				{
-					item: 'iets'
-				},
-				{
-					item: 'iets anders'
-				}
-			]
-		}
-	});
-</script>