simplyview 2.0.2 → 2.1.0

package/dist/simply.everything.js

@@ -639,8 +639,8 @@ properties for a given parent, keep seperate index for this?
         handleEvents: function() {
             global.addEventListener('popstate', function() {
                 if (route.match(getPath(document.location.pathname + document.location.hash)) === false) {
-					route.match(getPath(document.location.pathname));
-				}
+                    route.match(getPath(document.location.pathname));
+                }
             });
             global.document.addEventListener('click', linkHandler);
         },
@@ -665,22 +665,24 @@ properties for a given parent, keep seperate index for this?
 
             var matches;
             if (!path) {
-				if (route.match(document.location.pathname+document.location.hash)) {
-					return true;
-				} else {
-					return route.match(document.location.pathname);
-				}
+                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[path.length-1]!='/') {
-                    matches = routeInfo[i].match.exec(path+'/');
-                    if (matches) {
-                        path+='/';
-                        history.replaceState({}, '', getUrl(path));
+                matches = routeInfo[i].match.exec(path);
+                if (!matches || !matches.length) {
+                    if (path && path[path.length-1]!='/') {
+                        matches = routeInfo[i].match.exec(path+'/');
+                        if (matches) {
+                            path+='/';
+                            history.replaceState({}, '', getUrl(path));
+                        }
                     }
                 }
-                matches = routeInfo[i].match.exec(path);
                 if (matches && matches.length) {
                     var params = {};
                     routeInfo[i].params.forEach(function(key, i) {
@@ -697,9 +699,9 @@ properties for a given parent, keep seperate index for this?
                     args.result = routeInfo[i].action.call(route, params);
                     runListeners('finish', args);
                     return args.result;
-				}
+                }
             }
-			return false;
+            return false;
         },
         goto: function(path) {
             history.pushState({},'',getUrl(path));
@@ -734,7 +736,7 @@ properties for a given parent, keep seperate index for this?
             listeners[action][route] = listeners[action][route].filter(function(listener) {
                 return listener != callback;
             });
-		},
+        },
         init: function(params) {
             if (params.root) {
                 options.root = params.root;
@@ -1125,8 +1127,25 @@ properties for a given parent, keep seperate index for this?
             if (e.target.closest('[data-simply-keyboard]')) {
                 selectedKeyboard = e.target.closest('[data-simply-keyboard]').dataset.simplyKeyboard;
             }
-            if (keys[selectedKeyboard] && keys[selectedKeyboard][e.code]) {
-                keys[selectedKeyboard][e.code].call(app,e);
+            let key = '';
+            if (e.ctrlKey && e.keyCode!=17) {
+                key+='Control+';
+            }
+            if (e.metaKey && e.keyCode!=224) {
+                key+='Meta+';
+            }
+            if (e.altKey && e.keyCode!=18) {
+                key+='Alt+';
+            }
+            if (e.shiftKey && e.keyCode!=16) {
+                key+='Shift+';
+            }
+            key+=e.key;
+
+            if (keys[selectedKeyboard] && keys[selectedKeyboard][key]) {
+                let keyboard = keys[selectedKeyboard]
+                keyboard.app = app;
+                keyboard[key].call(keyboard,e);
             }
         });
 
@@ -1582,6 +1601,7 @@ properties for a given parent, keep seperate index for this?
             load();
         } else {
             global.document.addEventListener('simply-content-loaded', function() {
+                console.log('switching...')
                 load();
             });
         }
@@ -1600,10 +1620,18 @@ properties for a given parent, keep seperate index for this?
 })(this);
 (function(global) {
     'use strict';
+
+    function etag() {
+        let d = '';
+        while (d.length < 32) d += Math.random().toString(16).substr(2);
+        const vr = ((parseInt(d.substr(16, 1), 16) & 0x3) | 0x8).toString(16);
+        return `${d.substr(0, 8)}-${d.substr(8, 4)}-4${d.substr(13, 3)}-${vr}${d.substr(17, 3)}-${d.substr(20, 12)}`;
+    }
     
     function ViewModel(name, data, options) {
         this.name = name;
         this.data = data || [];
+        this.data.etag = etag();
         this.view = {
             options: {},
             data: [] //Array.from(this.data).slice()
@@ -1626,15 +1654,22 @@ properties for a given parent, keep seperate index for this?
             // 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;
+            this.data.etag = etag()
         }
         // 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);
+        this.view.data.etag = this.data.etag;
+        let data = this.view.data;
+        let plugins = this.plugins.start.concat(this.plugins.select, this.plugins.order, this.plugins.render, this.plugins.finish);
+        plugins.forEach(plugin => {
+            data = plugin.call(this, params, data);
+            if (!data) {
+                data = this.view.data;
+            }
+            this.view.data = data
         });
+        this.view.data = data;
 
         if (global.editor) {
             global.editor.addDataSource(this.name,{
@@ -1759,7 +1794,8 @@ properties for a given parent, keep seperate index for this?
         createFilter: createFilter,
         createSort: createSort,
         createPaging: createPaging,
-        updateDataSource: updateDataSource
+        updateDataSource: updateDataSource,
+        etag
     };
 
     if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
@@ -1775,7 +1811,7 @@ properties for a given parent, keep seperate index for this?
     'use strict';
 
     var api = {
-		/**
+        /**
          * Returns a Proxy object that translates property access to a URL in the api
          * and method calls to a fetch on that URL.
          * @param options: a list of options for fetch(), 
@@ -1897,27 +1933,27 @@ properties for a given parent, keep seperate index for this?
          */
         getResult: function(response, options) {
             if (response.ok) {
-				switch(options.responseFormat) {
-					case 'text':
-						return response.text();
-					break;
-					case 'formData':
-						return response.formData();
-					break;
-					case 'blob':
-						return response.blob();
-					break;
-					case 'arrayBuffer':
-						return response.arrayBuffer();
-					break;
-					case 'unbuffered':
-						return response.body;
-					break;
-					case 'json':
-					default:
-		                return response.json();
-					break;
-				}
+                switch(options.responseFormat) {
+                    case 'text':
+                        return response.text();
+                    break;
+                    case 'formData':
+                        return response.formData();
+                    break;
+                    case 'blob':
+                        return response.blob();
+                    break;
+                    case 'arrayBuffer':
+                        return response.arrayBuffer();
+                    break;
+                    case 'unbuffered':
+                        return response.body;
+                    break;
+                    case 'json':
+                    default:
+                        return response.json();
+                    break;
+                }
             } else {
                 throw {
                     status: response.status,
@@ -1925,23 +1961,22 @@ properties for a given parent, keep seperate index for this?
                     response: response
                 }
             }
-		},
-
-		logError: function(error, options) {
+        },
+        logError: function(error, options) {
             console.error(error.status, error.message);
-		}
+        }
     }
 
     var defaultOptions = {
-		path: '',
-		responseFormat: 'json',
-		paramsFormat: 'search',
-		verbs: ['get','post'],
-		handlers: {
-			fetch:  api.fetch,
-			result: api.getResult,
-			error:  api.logError
-		}
+        path: '',
+        responseFormat: 'json',
+        paramsFormat: 'search',
+        verbs: ['get','post'],
+        handlers: {
+            fetch:  api.fetch,
+            result: api.getResult,
+            error:  api.logError
+        }
     };
 
     function cd(path, name) {
@@ -1952,20 +1987,20 @@ properties for a given parent, keep seperate index for this?
         return path+encodeURIComponent(name);
     }
 
-	function fetchChain(prop, params) {
-		var options = this;
-		return this.handlers.fetch
-			.call(this, prop, params, options)
-			.then(function(res) {
-				return options.handlers.result.call(options, res, options);
-			})
-			.catch(function(error) {
-				return options.handlers.error.call(options, error, options);
-			});
-	}
+    function fetchChain(prop, params) {
+        var options = this;
+        return this.handlers.fetch
+            .call(this, prop, params, options)
+            .then(function(res) {
+                return options.handlers.result.call(options, res, options);
+            })
+            .catch(function(error) {
+                return options.handlers.error.call(options, error, options);
+            });
+    }
 
     function getApiHandler(options) {
-		options.handlers = Object.assign({}, defaultOptions.handlers, options.handlers);
+        options.handlers = Object.assign({}, defaultOptions.handlers, options.handlers);
         options = Object.assign({}, defaultOptions, options);
 
         return {

package/js/simply.api.js

@@ -2,7 +2,7 @@
     'use strict';
 
     var api = {
-		/**
+        /**
          * Returns a Proxy object that translates property access to a URL in the api
          * and method calls to a fetch on that URL.
          * @param options: a list of options for fetch(), 
@@ -124,27 +124,27 @@
          */
         getResult: function(response, options) {
             if (response.ok) {
-				switch(options.responseFormat) {
-					case 'text':
-						return response.text();
-					break;
-					case 'formData':
-						return response.formData();
-					break;
-					case 'blob':
-						return response.blob();
-					break;
-					case 'arrayBuffer':
-						return response.arrayBuffer();
-					break;
-					case 'unbuffered':
-						return response.body;
-					break;
-					case 'json':
-					default:
-		                return response.json();
-					break;
-				}
+                switch(options.responseFormat) {
+                    case 'text':
+                        return response.text();
+                    break;
+                    case 'formData':
+                        return response.formData();
+                    break;
+                    case 'blob':
+                        return response.blob();
+                    break;
+                    case 'arrayBuffer':
+                        return response.arrayBuffer();
+                    break;
+                    case 'unbuffered':
+                        return response.body;
+                    break;
+                    case 'json':
+                    default:
+                        return response.json();
+                    break;
+                }
             } else {
                 throw {
                     status: response.status,
@@ -152,23 +152,22 @@
                     response: response
                 }
             }
-		},
-
-		logError: function(error, options) {
+        },
+        logError: function(error, options) {
             console.error(error.status, error.message);
-		}
+        }
     }
 
     var defaultOptions = {
-		path: '',
-		responseFormat: 'json',
-		paramsFormat: 'search',
-		verbs: ['get','post'],
-		handlers: {
-			fetch:  api.fetch,
-			result: api.getResult,
-			error:  api.logError
-		}
+        path: '',
+        responseFormat: 'json',
+        paramsFormat: 'search',
+        verbs: ['get','post'],
+        handlers: {
+            fetch:  api.fetch,
+            result: api.getResult,
+            error:  api.logError
+        }
     };
 
     function cd(path, name) {
@@ -179,20 +178,20 @@
         return path+encodeURIComponent(name);
     }
 
-	function fetchChain(prop, params) {
-		var options = this;
-		return this.handlers.fetch
-			.call(this, prop, params, options)
-			.then(function(res) {
-				return options.handlers.result.call(options, res, options);
-			})
-			.catch(function(error) {
-				return options.handlers.error.call(options, error, options);
-			});
-	}
+    function fetchChain(prop, params) {
+        var options = this;
+        return this.handlers.fetch
+            .call(this, prop, params, options)
+            .then(function(res) {
+                return options.handlers.result.call(options, res, options);
+            })
+            .catch(function(error) {
+                return options.handlers.error.call(options, error, options);
+            });
+    }
 
     function getApiHandler(options) {
-		options.handlers = Object.assign({}, defaultOptions.handlers, options.handlers);
+        options.handlers = Object.assign({}, defaultOptions.handlers, options.handlers);
         options = Object.assign({}, defaultOptions, options);
 
         return {

package/js/simply.keyboard.js

@@ -25,8 +25,25 @@
             if (e.target.closest('[data-simply-keyboard]')) {
                 selectedKeyboard = e.target.closest('[data-simply-keyboard]').dataset.simplyKeyboard;
             }
-            if (keys[selectedKeyboard] && keys[selectedKeyboard][e.code]) {
-                keys[selectedKeyboard][e.code].call(app,e);
+            let key = '';
+            if (e.ctrlKey && e.keyCode!=17) {
+                key+='Control+';
+            }
+            if (e.metaKey && e.keyCode!=224) {
+                key+='Meta+';
+            }
+            if (e.altKey && e.keyCode!=18) {
+                key+='Alt+';
+            }
+            if (e.shiftKey && e.keyCode!=16) {
+                key+='Shift+';
+            }
+            key+=e.key;
+
+            if (keys[selectedKeyboard] && keys[selectedKeyboard][key]) {
+                let keyboard = keys[selectedKeyboard]
+                keyboard.app = app;
+                keyboard[key].call(keyboard,e);
             }
         });
 

package/js/simply.route.js

@@ -118,8 +118,8 @@
         handleEvents: function() {
             global.addEventListener('popstate', function() {
                 if (route.match(getPath(document.location.pathname + document.location.hash)) === false) {
-					route.match(getPath(document.location.pathname));
-				}
+                    route.match(getPath(document.location.pathname));
+                }
             });
             global.document.addEventListener('click', linkHandler);
         },
@@ -144,22 +144,24 @@
 
             var matches;
             if (!path) {
-				if (route.match(document.location.pathname+document.location.hash)) {
-					return true;
-				} else {
-					return route.match(document.location.pathname);
-				}
+                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[path.length-1]!='/') {
-                    matches = routeInfo[i].match.exec(path+'/');
-                    if (matches) {
-                        path+='/';
-                        history.replaceState({}, '', getUrl(path));
+                matches = routeInfo[i].match.exec(path);
+                if (!matches || !matches.length) {
+                    if (path && path[path.length-1]!='/') {
+                        matches = routeInfo[i].match.exec(path+'/');
+                        if (matches) {
+                            path+='/';
+                            history.replaceState({}, '', getUrl(path));
+                        }
                     }
                 }
-                matches = routeInfo[i].match.exec(path);
                 if (matches && matches.length) {
                     var params = {};
                     routeInfo[i].params.forEach(function(key, i) {
@@ -176,9 +178,9 @@
                     args.result = routeInfo[i].action.call(route, params);
                     runListeners('finish', args);
                     return args.result;
-				}
+                }
             }
-			return false;
+            return false;
         },
         goto: function(path) {
             history.pushState({},'',getUrl(path));
@@ -213,7 +215,7 @@
             listeners[action][route] = listeners[action][route].filter(function(listener) {
                 return listener != callback;
             });
-		},
+        },
         init: function(params) {
             if (params.root) {
                 options.root = params.root;

package/js/simply.viewmodel.js

@@ -1,9 +1,17 @@
 (function(global) {
     'use strict';
+
+    function etag() {
+        let d = '';
+        while (d.length < 32) d += Math.random().toString(16).substr(2);
+        const vr = ((parseInt(d.substr(16, 1), 16) & 0x3) | 0x8).toString(16);
+        return `${d.substr(0, 8)}-${d.substr(8, 4)}-4${d.substr(13, 3)}-${vr}${d.substr(17, 3)}-${d.substr(20, 12)}`;
+    }
     
     function ViewModel(name, data, options) {
         this.name = name;
         this.data = data || [];
+        this.data.etag = etag();
         this.view = {
             options: {},
             data: [] //Array.from(this.data).slice()
@@ -26,14 +34,20 @@
             // 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;
+            this.data.etag = etag()
         }
         // 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);
+        this.view.data.etag = this.data.etag;
+        let data = this.view.data;
+        let plugins = this.plugins.start.concat(this.plugins.select, this.plugins.order, this.plugins.render, this.plugins.finish);
+        plugins.forEach(plugin => {
+            data = plugin.call(this, params, data);
+            if (!data) {
+                data = this.view.data;
+            }
+            this.view.data = data
         });
 
         if (global.editor) {
@@ -159,7 +173,8 @@
         createFilter: createFilter,
         createSort: createSort,
         createPaging: createPaging,
-        updateDataSource: updateDataSource
+        updateDataSource: updateDataSource,
+        etag
     };
 
     if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplyview",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Library to rapidly build UI components, using declarative tools",
   "main": "dist/simply.everything.js",
   "directories": {
@@ -27,5 +27,10 @@
   "homepage": "https://github.com/simplyedit/simplyview#readme",
   "devDependencies": {
     "jest": "^24.9.0"
-  }
+  },
+  "files": [
+    "README.md",
+    "dist/",
+    "js/"
+  ]
 }

package/docs/examples.md

@@ -1,82 +0,0 @@
-# Examples
-
-## Counter
-
-The counter app is an example to introduce the basic concepts. Here is the HTML:
-
-```html
-<div id="counterApp">
-    <input type="text" data-simply-field="counter">
-    <button data-simply-command="add1">+</button>
-    <button data-simply-command="sub1">-</button>
-    <div>Counter is now: <span data-simply-field="counter"></span></div>
-</div>
-```
-
-It uses two components of SimplyView and SimplyEdit, through 
-`data-simply-command` and `data-simply-field`.
-
-`data-simply-command` is handled by [simply.command](simply.command.md). Both 
-commands are defined on buttons, so they will trigger when the button is 
-pressed. The javascript code tied to these commands is defined with the 
-[simply.app](simply.app.md) component:
-
-```javascript
-var counterApp = simply.app({
-    container: document.getElementById('counterApp'),
-    commands: {
-        add1: function() {
-            counterApp.view.counter++;
-        },
-        sub1: function() {
-            counterApp.view.counter--;
-        }
-    },
-    view: {
-        counter: 1
-    }
-});
-```
-
-simply.app is a wrapper that combines a number of components with a single 
-configuration parameter. The commands section here is passed on to simply.command. 
-
-When you press the button with `data-simply-command="add1"`, the command 
-handler for this app is triggered and searches its commands for 'add1'. 
-It then calls this javascript function and it will increase
-`counterApp.view.counter`.
-
-This is where the second component, which uses `data-simply-field`, comes in. 
-The `counterApp.view` object is automatically tied to SimplyEdit, by simply.app. 
-So whenever you update a variable inside `counterApp.view`, SimplyEdit will 
-also update any HTML element which references the same variable. 
-
-In this case `counterApp.view.counter` is tied to the input element with
-`data-simply-field="counter"`.
-
-SimplyEdit also does the reverse, whenever you change the input value, 
-SimplyEdit will also change the `counterApp.view.counter` value. This is called 
-two-way databinding.
-
-Two-way databinding is not instantanous, so whenever you change a value in 
-javascript or in the DOM, it will take a short while for SimplyEdit to update 
-the other side as well. There are a number of events that will tell you when 
-the values are in sync again.
-
-## Todo
-
-The TodoMVC application is a standard web application implemented in many different 
-javascript frameworks. We've build one using SimplyEdit and SimplyView, which you 
-can find at [todomvc.simplyedit.io](https://todomvc.simplyedit.io/).
-
-The code is on github at
-[github.com/simplyedit/todomvc](https://github.com/simplyedit/todomvc). The 
-Readme explains how it is build.
-
-## Hackernews PWA
-
-Just like the TodoMVC application, the Hackernews PWA is also a standard web 
-application implemented in many frameworks. You can find the SimplyEdit/SimplyView 
-version at [hnpwa.simplyedit.io](https://hnpwa.simplyedit.io/). The code is at 
-[github.com/simplyedit/hnpwa](https://github.com/simplyedit/hnpwa) and the 
-Readme explains how it was built.