simplyview 1.0.0 → 2.0.2

package/dist/simply.everything.js

@@ -1,178 +1,355 @@
-this.simply = (function(simply, global) {
-    var defaultActions = {
-        'simply-hide': function(el) {
-            el.classList.remove('simply-visible');
-            return Promise.resolve();
-        },
-        'simply-show': function(el) {
-            el.classList.add('simply-visible');
-            return Promise.resolve();
-        },
-        'simply-select': function(el,group,target,targetGroup) {
-            if (group) {
-                this.call('simply-deselect', this.app.container.querySelectorAll('[data-simply-group='+group+']'));
-            }
-            el.classList.add('simply-selected');
-            if (target) {
-                this.call('simply-select',target,targetGroup);
-            }
-            return Promise.resolve();
-        },
-        'simply-toggle-select': function(el,group,target,targetGroup) {
-            if (!el.classList.contains('simply-selected')) {
-                this.call('simply-select',el,group,target,targetGroup);
-            } else {
-                this.call('simply-deselect',el,target);
-            }
-            return Promise.resolve();
-        },
-        'simply-toggle-class': function(el,className,target) {
-            if (!target) {
-                target = el;
-            }
-            return Promise.resolve(target.classList.toggle(className));
-        },
-        'simply-deselect': function(el,target) {
-            if ( typeof el.length=='number' && typeof el.item=='function') {
-                el = Array.prototype.slice.call(el);
+/**
+ * simply.observe
+ * This component lets you observe changes in a json compatible data structure
+ * It doesn't support linking the same object multiple times
+ * It doesn't register deletion of properties using the delete keyword, assign
+ * null to the property instead.
+ * It doesn't register addition of new properties.
+ * It doesn't register directly assigning new entries in an array on a previously
+ * non-existant index.
+ *
+ * usage:
+ *
+ * (function) simply.observe( (object) model, (string) path, (function) callback)
+ *
+ * var model = { foo: { bar: 'baz' } };
+ * var removeObserver = simply.observe(model, 'foo.bar', function(value, sourcePath) {
+ *   console.log(sourcePath+': '+value);
+ * };
+ *
+ * The function returns a function that removes the observer when called.
+ *
+ * The component can observe in place changes in arrays, either by changing
+ * an item in a specific index, by calling methods on the array that change
+ * the array in place or by reassigning the array with a new value.
+ *
+ * The sourcePath contains the exact entry that was changed, the value is the
+ * value for the path passed to simply.observe.
+ * If an array method was called that changes the array in place, the sourcePath
+ * also contains that method and its arguments JSON serialized.
+ *
+ * sourcePath parts are always seperated with '.', even for array indexes.
+ * so if foo = [ 'bar' ], the path to 'bar' would be 'foo.0'
+ */
+
+ /*
+ FIXME: child properties added after initial observe() call aren't added to the
+ childListeners. onMissingChildren can't then find them.
+ TODO: onMissingChildren must loop through all fields to get only the direct child
+properties for a given parent, keep seperate index for this?
+ */
+
+(function (global) {
+    'use strict';
+
+    var changeListeners = new WeakMap();
+    var parentListeners = new WeakMap();
+    var childListeners = new WeakMap();
+    var changesSignalled = {};
+    var observersPaused = 0;
+
+    function signalChange(model, path, value, sourcePath) {
+        if (observersPaused) {
+            return;
+        }
+
+        sourcePath = sourcePath ? sourcePath : path;
+        changesSignalled = {};
+
+        var signalRecursion = function(model, path, value, sourcePath) {
+            if (changeListeners.has(model) && changeListeners.get(model)[path]) {
+                // changeListeners[model][path] contains callback methods
+                changeListeners.get(model)[path].forEach(function(callback) {
+                    changesSignalled[path] = true;
+                    callback(value, sourcePath);
+                });
             }
-            if ( Array.isArray(el) ) {
-                for (var i=0,l=el.length; i<l; i++) {
-                    this.call('simply-deselect',el[i],target);
-                    target = null;
+        };
+
+        //TODO: check if this is correct
+        //previous version only triggered parentListeners when no changeListeners were
+        //triggered. that created problems with arrays. make an exhaustive unit test.
+        signalRecursion(model, path, value, sourcePath);
+        
+        if (parentListeners.has(model) && parentListeners.get(model)[path]) {
+            // parentListeners[model][path] contains child paths to signal change on
+            // if a parent object is changed, this signals the change to the child objects
+            parentListeners.get(model)[path].forEach(function(childPath) {
+                if (!changesSignalled[childPath]) {
+                    var value = getByPath(model, childPath);
+                    if (value) {
+                        attach(model, childPath);
+                    }
+                    signalRecursion(model, childPath, value, sourcePath);
+                    changesSignalled[childPath] = true;
                 }
-            } else {
-                el.classList.remove('simply-selected');
-                if (target) {
-                    this.call('simply-deselect',target);
+            });
+        }
+
+        if (childListeners.has(model) && childListeners.get(model)[path]) {
+            // childListeners[model][path] contains parent paths to signal change on
+            // if a child object is changed, this signals the change to the parent objects
+            childListeners.get(model)[path].forEach(function(parentPath) {
+                if (!changesSignalled[parentPath]) {
+                    var value = getByPath(model, parentPath);
+                    signalRecursion(model, parentPath, value, sourcePath);
+                    changesSignalled[parentPath] = true;
+                    // check if the parent object still has this child property
+                    //FIXME: add a setter trigger here to restore observers once the child property get set again
+
                 }
+            });
+        }
+
+    }
+
+    function getByPath(model, path) {
+        var parts = path.split('.');
+        var curr = model;
+        do {
+            curr = curr[parts.shift()];
+        } while (parts.length && curr);
+        return curr;
+    }
+
+    function parent(path) {
+        var parts = path.split('.');
+        parts.pop();
+        return parts.join('.');
+    }
+    
+    function head(path) {
+        return path.split('.').shift();
+    }
+
+    function onParents(model, path, callback) {
+        var parent = '';
+        var parentOb = model;
+        var parents = path.split('.');
+        do {
+            var head = parents.shift();
+            if (parentOb && typeof parentOb[head] != 'undefined') {
+                callback(parentOb, head, (parent ? parent + '.' + head : head));
+                parentOb = parentOb[head];
             }
-            return Promise.resolve();
-        },
-        'simply-fullscreen': function(target) {
-            var methods = {
-                'requestFullscreen':{exit:'exitFullscreen',event:'fullscreenchange',el:'fullscreenElement'},
-                'webkitRequestFullScreen':{exit:'webkitCancelFullScreen',event:'webkitfullscreenchange',el:'webkitFullscreenElement'},
-                'msRequestFullscreen':{exit:'msExitFullscreen',event:'MSFullscreenChange',el:'msFullscreenElement'},
-                'mozRequestFullScreen':{exit:'mozCancelFullScreen',event:'mozfullscreenchange',el:'mozFullScreenElement'}
-            };
-            for ( var i in methods ) {
-                if ( typeof document.documentElement[i] != 'undefined' ) {
-                    var requestMethod = i;
-                    var cancelMethod = methods[i].exit;
-                    var event = methods[i].event;
-                    var element = methods[i].el;
-                    break;
-                }
+            parent = (parent ? parent + '.' + head : head );
+        } while (parents.length);
+    }
+
+    function onChildren(model, path, callback) {
+        var onChildObjects = function(object, path, callback) {
+            if (typeof object != 'object' || object == null) {
+                return;
             }
-            if ( !requestMethod ) {
+            if (Array.isArray(object)) {
                 return;
             }
-            if (!target.classList.contains('simply-fullscreen')) {
-                target.classList.add('simply-fullscreen');
-                target[requestMethod]();
-                var exit = function() {
-                    if ( !document[element] ) {
-                        target.classList.remove('simply-fullscreen');
-                        document.removeEventListener(event,exit);
-                    }
-                };
-                document.addEventListener(event,exit);
+            // register the current keys
+            Object.keys(object).forEach(function(key) {
+                callback(object, key, path+'.'+key);
+                onChildObjects(object[key], path+'.'+key, callback);
+            });
+        };
+        var parent = getByPath(model, path);
+        onChildObjects(parent, path, callback);
+    }
+
+    function onMissingChildren(model, path, callback) {
+        var allChildren = Object.keys(childListeners.get(model) || []).filter(function(childPath) {
+            return childPath.substr(0, path.length)==path && childPath.length>path.length;
+        });
+        if (!allChildren.length) {
+            return;
+        }
+        var object = getByPath(model, path);
+        var keysSeen = {};
+        allChildren.forEach(function(childPath) {
+            var key = head(childPath.substr(path.length+1));
+            if (typeof object[key] == 'undefined') {
+                if (!keysSeen[key]) {
+                    callback(object, key, path+'.'+key);
+                    keysSeen[key] = true;
+                }
             } else {
-                target.classList.remove('simply-fullscreen');
-                document[cancelMethod]();
+                onMissingChildren(model, path+'.'+key, callback);
             }
-            return Promise.resolve();
+        });
+    }
+
+    function addChangeListener(model, path, callback) {
+        if (!changeListeners.has(model)) {
+            changeListeners.set(model, {});
         }
-    };
+        if (!changeListeners.get(model)[path]) {
+            changeListeners.get(model)[path] = [];
+        }
+        changeListeners.get(model)[path].push(callback);
 
-    simply.action = function(app, inActions) {
-        var actions = Object.create(defaultActions);
-        for ( var i in inActions ) {
-            actions[i] = inActions[i];
+        if (!parentListeners.has(model)) {
+            parentListeners.set(model, {});
         }
+        var parentPath = parent(path);
+        onParents(model, parentPath, function(parentOb, key, currPath) {
+            if (!parentListeners.get(model)[currPath]) {
+                parentListeners.get(model)[currPath] = [];
+            }
+            parentListeners.get(model)[currPath].push(path);
+        });
 
-        actions.app = app;
-        actions.call = function(name) {
-            var params = Array.prototype.slice.call(arguments);
-            params.shift();
-            return this[name].apply(this, params);
-        };
-        return actions;
-    };
+        if (!childListeners.has(model)) {
+            childListeners.set(model, {});
+        }
+        onChildren(model, path, function(childOb, key, currPath) {
+            if (!childListeners.get(model)[currPath]) {
+                childListeners.get(model)[currPath] = [];
+            }
+            childListeners.get(model)[currPath].push(path);
+        });
+    }
 
-    return simply;
-    
-})(this.simply || {}, this);
-this.simply = (function(simply, global) {
+    function removeChangeListener(model, path, callback) {
+        if (!changeListeners.has(model)) {
+            return;
+        }
+        if (changeListeners.get(model)[path]) {
+            changeListeners.get(model)[path] = changeListeners.get(model)[path].filter(function(f) {
+                return f != callback;
+            });
+        }
+    }
 
-    var knownCollections = {};
-    
-    simply.collect = {
-        addListener: function(name, callback) {
-            if (!knownCollections[name]) {
-                knownCollections[name] = [];
-            }
-            if (knownCollections[name].indexOf(callback) == -1) {
-                knownCollections[name].push(callback);
-            }
-        },
-        removeListener: function(name, callback) {
-            if (knownCollections[name]) {
-                var index = knownCollections[name].indexOf(callback);
-                if (index>=0) {
-                    knownCollections[name].splice(index, 1);
+    function pauseObservers() {
+        observersPaused++;
+    }
+
+    function resumeObservers() {
+        observersPaused--;
+    }
+
+    function attach(model, path, options) {
+
+        var attachArray = function(object, path) {
+            var desc = Object.getOwnPropertyDescriptor(object, 'push');
+            if (!desc || desc.configurable) {
+                for (var f of ['push','pop','reverse','shift','sort','splice','unshift','copyWithin']) {
+                    (function(f) {
+                        try {
+                            Object.defineProperty(object, f, {
+                                value: function() {
+                                    pauseObservers();
+                                    var result = Array.prototype[f].apply(this, arguments);
+                                    attach(model, path);
+                                    var args = [].slice.call(arguments).map(function(arg) {
+                                        return JSON.stringify(arg);
+                                    });
+                                    resumeObservers();
+                                    signalChange(model, path, this, path+'.'+f+'('+args.join(',')+')');
+                                    return result;
+                                },
+                                readable: false,
+                                enumerable: false,
+                                configurable: false
+                            });
+                        } catch(e) {
+                            console.error('simply.observer: Error: Couldn\'t redefine array method '+f+' on '+path, e);
+                        }
+                    }(f));
+                }
+                for (var i=0, l=object.length; i<l; i++) {
+                    //FIXME: options becomes undefined here somewhere
+//                    if (options.skipArray) {
+                        addSetter(object, i, path+'.'+i);
+//                    } else {
+//                        attach(model, path+'.'+i, options);
+//                    }
                 }
             }
-        },
-        update: function(element, value) {
-            element.value = value;
-            element.dispatchEvent(new Event('change', {
-                bubbles: true,
-                cancelable: true
-            }));
-        }
-    };
+        };
+
+        var addSetTrigger = function(object, key, currPath) {
+            Object.defineProperty(object, key, {
+                set: function(value) {
+                    addSetter(object, key, currPath);
+                    object[key] = value;
+                },
+                configurable: true,
+                readable: false,
+                enumerable: false
+            });
+        };
+
+        var addSetter = function(object, key, currPath) {
+            if (Object.getOwnPropertyDescriptor(object, key).configurable) {
+                // assume object keys are only unconfigurable if the
+                // following code has already been run on this property
+                var _value = object[key];
+                Object.defineProperty(object, key, {
+                    set: function(value) {
+                        _value = value;
+                        signalChange(model, currPath, value);
+                        if (value!=null) {
+                            onChildren(model, currPath, addSetter);
+                            onMissingChildren(model, currPath, addSetTrigger);
+                        }
+                    },
+                    get: function() {
+                        return _value;
+                    },
+                    configurable: false,
+                    readable: true,
+                    enumerable: true
+                });
+            }
+            if (Array.isArray(object[key])) {
+                attachArray(object[key], currPath, options);
+            }
+        };
 
-    function findCollection(el) {
-        while (el && !el.dataset.simplyCollection) {
-            el = el.parentElement;
-        }
-        return el;
+        onParents(model, path, addSetter);
+        onChildren(model, path, addSetter);
     }
-    
-    document.addEventListener('change', function(evt) {
-        var root = null;
-        var name = '';
-        if (evt.target.dataset.simplyElement) {
-            root = findCollection(evt.target);
-            if (root && root.dataset) {
-                name = root.dataset.simplyCollection;
-            }
-        }
-        if (name && knownCollections[name]) {
-            var inputs = root.querySelectorAll('[data-simply-element]');
-            var elements = [].reduce.call(inputs, function(elements, input) {
-                elements[input.dataset.simplyElement] = input;
-                return elements;
-            }, {});
-            for (var i=knownCollections[name].length-1; i>=0; i--) {
-                var result = knownCollections[name][i].call(evt.target.form, elements);
-                if (result === false) {
-                    break;
-                }
-            }
-        }
-    }, true);
 
-    return simply;
+    // FIXME: if you remove a key by reassigning the parent object
+    // and then assign that missing key a new value
+    // the observer doesn't get triggered
+    // var model = { foo: { bar: 'baz' } };
+    // simply.observer(model, 'foo.bar', ...)
+    // model.foo = { }
+    // model.foo.bar = 'zab'; // this should trigger the observer but doesn't
 
-})(this.simply || {}, this);
-this.simply = (function(simply, global) {
+    var observe = function(model, path, callback, options) {
+        if (!path) {
+            var keys = Object.keys(model);
+            keys.forEach(function(key) {
+                attach(model, key, options);
+                addChangeListener(model, key, callback);
+            }); 
+            return function() {
+                keys.forEach(function(key) {
+                    removeChangeListener(model, key, callback);
+                });
+            };
+        } else {
+            attach(model, path, options);
+            addChangeListener(model, path, callback);
+            return function() {
+                removeChangeListener(model, path, callback);
+            };
+        }
+    };
 
-//    var templates = new WeakMap();
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = observe;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.observe = observe;
+    }
+})(this);(function(global) {
+    'use strict';
 
-    simply.render = function(options) {
+    var render = function(options) {
         if (!options) {
             options = {};
         }
@@ -282,540 +459,451 @@ this.simply = (function(simply, global) {
 //            },
         }, options.fieldTypes);
 
-        return options;
-    };
-
-    return simply;
-})(this.simply || {}, this);
-this.simply = (function (simply, global) {
-
-    var throttle = function( callbackFunction, intervalTime ) {
-        var eventId = 0;
-        return function() {
-            var myArguments = arguments;
-            var me = this;
-            if ( eventId ) {
-                return;
-            } else {
-                eventId = global.setTimeout( function() {
-                    callbackFunction.apply(me, myArguments);
-                    eventId = 0;
-                }, intervalTime );
-            }
-        };
-    };
-
-    var runWhenIdle = (function() {
-        if (global.requestIdleCallback) {
-            return function(callback) {
-                global.requestIdleCallback(callback, {timeout: 500});
-            };
-        }
-        return global.requestAnimationFrame;
-    })();
-
-    var rebaseHref = function(relative, base) {
-        if (/^[a-z-]*:?\//.test(relative)) {
-            return relative; // absolute href, no need to rebase
-        }
-
-        var stack = base.split('/'),
-            parts = relative.split('/');
-        stack.pop(); // remove current file name (or empty string)
-        for (var i=0; i<parts.length; i++) {
-            if (parts[i] == '.')
-                continue;
-            if (parts[i] == '..')
-                stack.pop();
-            else
-                stack.push(parts[i]);
-        }
-        return stack.join('/');
-    };
-
-    var observer, loaded = {};
-    var head = document.documentElement.querySelector('head');
-    var currentScript = document.currentScript;
-
-    var waitForPreviousScripts = function() {
-        // because of the async=false attribute, this script will run after
-        // the previous scripts have been loaded and run
-        // simply.include.next.js only fires the simply-next-script event
-        // that triggers the Promise.resolve method
-        return new Promise(function(resolve) {
-            var next = document.createElement('script');
-            next.src = rebaseHref('simply.include.next.js', currentScript.src);
-            next.async = false;
-            document.addEventListener('simply-include-next', function() {
-                head.removeChild(next);
-                resolve();
-            }, { once: true, passive: true});
-            head.appendChild(next);
-        });
-    };
-
-    var scriptLocations = [];
-
-    simply.include = {
-        scripts: function(scripts, base) {
-            var arr = [];
-            for(var i = scripts.length; i--; arr.unshift(scripts[i]));
-            var importScript = function() {
-                var script = arr.shift();
-                if (!script) {
-                    return;
-                }
-                var attrs  = [].map.call(script.attributes, function(attr) {
-                    return attr.name;
-                });
-                var clone  = document.createElement('script');
-                attrs.forEach(function(attr) {
-                    clone.setAttribute(attr, script[attr]);
-                });
-                clone.removeAttribute('data-simply-location');
-                if (!clone.src) {
-                    // this is an inline script, so copy the content and wait for previous scripts to run
-                    clone.innerHTML = script.innerHTML;
-                    waitForPreviousScripts()
-                        .then(function() {
-                            var node = scriptLocations[script.dataset.simplyLocation];
-                            node.parentNode.insertBefore(clone, node);
-                            node.parentNode.removeChild(node);
-                            importScript();
-                        });
-                } else {
-                    clone.src = rebaseHref(clone.src, base);
-                    if (!clone.hasAttribute('async') && !clone.hasAttribute('defer')) {
-                        clone.async = false; //important! do not use clone.setAttribute('async', false) - it has no effect
-                    }
-                    var node = scriptLocations[script.dataset.simplyLocation];
-                    node.parentNode.insertBefore(clone, node);
-                    node.parentNode.removeChild(node);
-                    loaded[clone.src]=true;
-                    importScript();
-                }
-            };
-            if (arr.length) {
-                importScript();
-            }
-        },
-        html: function(html, link) {
-            var fragment = document.createRange().createContextualFragment(html);
-            var stylesheets = fragment.querySelectorAll('link[rel="stylesheet"],style');
-            // add all stylesheets to head
-            [].forEach.call(stylesheets, function(stylesheet) {
-                if (stylesheet.href) {
-                    stylesheet.href = rebaseHref(stylesheet.href, link.href);
-                }
-                head.appendChild(stylesheet);
-            });
-            // remove the scripts from the fragment, as they will not run in the
-            // order in which they are defined
-            var scriptsFragment = document.createDocumentFragment();
-            // FIXME: this loses the original position of the script
-            // should add a placeholder so we can reinsert the clone
-            var scripts = fragment.querySelectorAll('script');
-            [].forEach.call(scripts, function(script) {
-                var placeholder = document.createComment(script.src || 'inline script');
-                script.parentNode.insertBefore(placeholder, script);
-                script.dataset.simplyLocation = scriptLocations.length;
-                scriptLocations.push(placeholder);
-                scriptsFragment.appendChild(script);
-            });
-            // add the remainder before the include link
-            link.parentNode.insertBefore(fragment, link ? link : null);
-            global.setTimeout(function() {
-                if (global.editor && global.editor.data && fragment.querySelector('[data-simply-field],[data-simply-list]')) {
-                    //TODO: remove this dependency and let simply.bind listen for dom node insertions (and simply-edit.js use simply.bind)
-                    global.editor.data.apply(editor.currentData, document);
-                }
-                simply.include.scripts(scriptsFragment.childNodes, link ? link.href : global.location.href );
-            }, 10);
-        }
-    };
-
-    var included = {};
-    var includeLinks = function(links) {
-        // mark them as in progress, so handleChanges doesn't find them again
-        var remainingLinks = [].reduce.call(links, function(remainder, link) {
-            if (link.rel=='simply-include-once' && included[link.href]) {
-                link.parentNode.removeChild(link);
-            } else {
-                included[link.href]=true;
-                link.rel = 'simply-include-loading';
-                remainder.push(link);
-            }
-            return remainder;
-        }, []);
-        [].forEach.call(remainingLinks, function(link) {
-            if (!link.href) {
-                return;
-            }
-            // fetch the html
-            fetch(link.href)
-                .then(function(response) {
-                    if (response.ok) {
-                        console.log('simply-include: loaded '+link.href);
-                        return response.text();
-                    } else {
-                        console.log('simply-include: failed to load '+link.href);
-                    }
-                })
-                .then(function(html) {
-                    // if succesfull import the html
-                    simply.include.html(html, link);
-                    // remove the include link
-                    link.parentNode.removeChild(link);
-                });
-        });
-    };
-
-    var handleChanges = throttle(function() {
-        runWhenIdle(function() {
-            var links = document.querySelectorAll('link[rel="simply-include"],link[rel="simply-include-once"]');
-            if (links.length) {
-                includeLinks(links);
-            }
-        });
-    });
+        return options;
+    };
 
-    var observe = function() {
-        observer = new MutationObserver(handleChanges);
-        observer.observe(document, {
-            subtree: true,
-            childList: true,
-        });
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = render;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.render = render;
+    }
+})(this);
+(function(global) {
+    'us strict';
+
+    var path = {
+        get: function(model, path) {
+            if (!path) {
+                return model;
+            }
+            return path.split('.').reduce(function(acc, name) {
+                return (acc && acc[name] ? acc[name] : null);
+            }, model);
+        },
+        set: function(model, path, value) {
+            var lastName   = simply.path.pop(path);
+            var parentPath = simply.path.parent(path);
+            var parentOb   = simply.path.get(model, parentPath);
+            parentOb[lastName] = value;
+        },
+        pop: function(path) {
+            return path.split('.').pop();
+        },
+        push: function(path, name) {
+            return (path ? path + '.' : '') + name;
+        },
+        parent: function(path) {
+            var p = path.split('.');
+            p.pop();
+            return p.join('.');
+        },
+        parents: function(path) {
+            var result = [];
+            path.split('.').reduce(function(acc, name) {
+                acc.push( (acc.length ? acc[acc.length-1] + '.' : '') + name );
+                return acc;
+            },result);
+            return result;
+        }
     };
 
-    observe();
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = path;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.path = path;
+    }
+})(this);
+(function(global) {
+    'use strict';
 
-    return simply;
+    var routeInfo = [];
+    var listeners = {
+        goto: {},
+        match: {},
+        call: {},
+        finish: {}
+    };
 
-})(this.simply || {}, this);
-this.simply = (function(simply, global) {
+    function getRegexpFromRoute(route) {
+        return new RegExp('^'+route.replace(/:\w+/g, '([^/]+)').replace(/:\*/, '(.*)'));
+    }
 
-    var listeners = {};
+    function parseRoutes(routes) {
+        var paths = Object.keys(routes);
+        var matchParams = /:(\w+|\*)/g;
+        var matches, params, path;
+        for (var i=0; i<paths.length; i++) {
+            path    = paths[i];
+            matches = [];
+            params  = [];
+            do {
+                matches = matchParams.exec(path);
+                if (matches) {
+                    params.push(matches[1]);
+                }
+            } while(matches);
+            routeInfo.push({
+                match:  getRegexpFromRoute(path),
+                params: params,
+                action: routes[path]
+            });
+        }
+    }
 
-    simply.activate = {
-        addListener: function(name, callback) {
-            if (!listeners[name]) {
-                listeners[name] = [];
+    var linkHandler = function(evt) {
+        if (evt.ctrlKey) {
+            return;
+        }
+        if (evt.which != 1) {
+            return; // not a 'left' mouse click
+        }
+        var link = evt.target;
+        while (link && link.tagName!='A') {
+            link = link.parentElement;
+        }
+        if (link 
+            && link.pathname 
+            && link.hostname==global.location.hostname 
+            && !link.link
+            && !link.dataset.simplyCommand
+        ) {
+            let path = getPath(link.pathname+link.hash);
+            if ( !route.has(path) ) {
+                path = getPath(link.pathname);
             }
-            listeners[name].push(callback);
-            initialCall(name);
-        },
-        removeListener: function(name, callback) {
-            if (!listeners[name]) {
+            if ( route.has(path) ) {
+                let params = runListeners('goto', { path: path});
+                if (params.path) {
+                    route.goto(params.path);
+                }
+                evt.preventDefault();
                 return false;
             }
-            listeners[name] = listeners[name].filter(function(listener) {
-                return listener!=callback;
-            });
         }
     };
 
-    var initialCall = function(name) {
-        var nodes = document.querySelectorAll('[data-simply-activate="'+name+'"]');
-        if (nodes) {
-            [].forEach.call(nodes, function(node) {
-                callListeners(node);
-            });
-        }
+    var options = {
+        root: '/'
     };
 
-    var callListeners = function(node) {
-        if (node && node.dataset.simplyActivate 
-            && listeners[node.dataset.simplyActivate]
+    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)
+            )
         ) {
-            listeners[node.dataset.simplyActivate].forEach(function(callback) {
-                callback.call(node);
-            });
+            path = path.substring(options.root.length);
+        }
+        if (path[0]!='/' && path[0]!='#') {
+            path = '/'+path;
         }
+        return path;
     };
 
-    var handleChanges = function(changes) {
-        var activateNodes = [];
-        for (var change of changes) {
-            if (change.type=='childList') {
-                [].forEach.call(change.addedNodes, function(node) {
-                    if (node.querySelectorAll) {
-                        var toActivate = [].slice.call(node.querySelectorAll('[data-simply-activate]'));
-                        if (node.matches('[data-simply-activate]')) {
-                            toActivate.push(node);
-                        }
-                        activateNodes = activateNodes.concat(toActivate);
-                    }
-                });
-            }
-        }
-        if (activateNodes.length) {
-            activateNodes.forEach(function(node) {
-                callListeners(node);
-            });
+    var getUrl = function(path) {
+        path = getPath(path);
+        if (options.root[options.root.length-1]==='/' && path[0]==='/') {
+            path = path.substring(1);
         }
+        return options.root + path;
     };
 
-    var observer = new MutationObserver(handleChanges);
-    observer.observe(document, {
-        subtree: true,
-        childList: true
-    });
-
-    return simply;
-})(this.simply || {}, this);
-this.simply = (function(simply, global) {
-    if (!simply.observe) {
-        console.error('Error: simply.bind requires simply.observe');
-        return simply;
+    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;
     }
 
-    function getByPath(model, path) {
-        var parts = path.split('.');
-        var curr = model;
-        do {
-            curr = curr[parts.shift()];
-        } while (parts.length && curr);
-        return curr;
-    }
+    var route = {
+        handleEvents: function() {
+            global.addEventListener('popstate', function() {
+                if (route.match(getPath(document.location.pathname + document.location.hash)) === false) {
+					route.match(getPath(document.location.pathname));
+				}
+            });
+            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;
 
-    function setByPath(model, path, value) {
-        var parts = path.split('.');
-        var curr = model;
-        while (parts.length>1 && curr) {
-            var key = parts.shift();
-            if (typeof curr[key] == 'undefined' || curr[key]==null) {
-                curr[key] = {};
+            var matches;
+            if (!path) {
+				if (route.match(document.location.pathname+document.location.hash)) {
+					return true;
+				} else {
+					return route.match(document.location.pathname);
+				}
             }
-            curr = curr[key];
-        }
-        curr[parts.shift()] = value;
-    }
-
-    function setValue(el, value, binding) {
-        if (el!=focusedElement) {
-            var fieldType = getFieldType(binding.fieldTypes, el);
-            if (fieldType) {
-                fieldType.set.call(el, (typeof value != 'undefined' ? value : ''), binding);
-                el.dispatchEvent(new Event('simply.bind.resolved', {
-                    bubbles: true,
-                    cancelable: false
-                }));
+            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) {
+                    var params = {};
+                    routeInfo[i].params.forEach(function(key, i) {
+                        if (key=='*') {
+                            key = 'remainder';
+                        }
+                        params[key] = matches[i+1];
+                    });
+                    Object.assign(params, options);
+                    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;
+				}
             }
-        }
-    }
-
-    function getValue(el, binding) {
-        var setters = Object.keys(binding.fieldTypes);
-        for(var i=setters.length-1;i>=0;i--) {
-            if (el.matches(setters[i])) {
-                return binding.fieldTypes[setters[i]].get.call(el);
+			return false;
+        },
+        goto: function(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) {
+                    return true;
+                }
             }
-        }
-    }
-
-    function getFieldType(fieldTypes, el) {
-        var setters = Object.keys(fieldTypes);
-        for(var i=setters.length-1;i>=0;i--) {
-            if (el.matches(setters[i])) {
-                return fieldTypes[setters[i]];
+            return false;
+        },
+        addListener: function(action, route, callback) {
+            if (['goto','match','call','finish'].indexOf(action)==-1) {
+                throw new Error('Unknown action '+action);
             }
-        }
-        return null;
-    }
-
-    function getPath(el, attribute) {
-        var attributes = attribute.split(',');
-        for (var attr of attributes) {
-            if (el.hasAttribute(attr)) {
-                return el.getAttribute(attr);
+            if (!listeners[action][route]) {
+                listeners[action][route] = [];
             }
-        }
-        return null;
-    }
-
-    function throttle( callbackFunction, intervalTime ) {
-        var eventId = 0;
-        return function() {
-            var myArguments = arguments;
-            var me = this;
-            if ( eventId ) {
+            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;
-            } else {
-                eventId = global.setTimeout( function() {
-                    callbackFunction.apply(me, myArguments);
-                    eventId = 0;
-                }, intervalTime );
             }
-        };
-    }
-
-    var runWhenIdle = (function() {
-        if (global.requestIdleCallback) {
-            return function(callback) {
-                global.requestIdleCallback(callback, {timeout: 500});
-            };
+            listeners[action][route] = listeners[action][route].filter(function(listener) {
+                return listener != callback;
+            });
+		},
+        init: function(params) {
+            if (params.root) {
+                options.root = params.root;
+            }
         }
-        return global.requestAnimationFrame;
-    })();
+    };
 
-    function Binding(config, force) {
-        this.config = config;
-        if (!this.config) {
-            this.config = {};
-        }
-        if (!this.config.model) {
-            this.config.model = {};
-        }
-        if (!this.config.attribute) {
-            this.config.attribute = 'data-simply-bind';
-        }
-        if (!this.config.selector) {
-            this.config.selector = '[data-simply-bind]';
-        }
-        if (!this.config.container) {
-            this.config.container = document;
-        }
-        if (typeof this.config.twoway == 'undefined') {
-            this.config.twoway = true;
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = route;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
         }
-        this.fieldTypes = {
-            '*': {
-                set: function(value) {
-                    this.innerHTML = value;
-                },
-                get: function() {
-                    return this.innerHTML;
-                }
+        global.simply.route = route;
+    }
+})(this);
+(function(global) {
+    'use strict';
+
+    var listeners = {};
+
+     var activate = {
+        addListener: function(name, callback) {
+            if (!listeners[name]) {
+                listeners[name] = [];
+            }
+            listeners[name].push(callback);
+            initialCall(name);
+        },
+        removeListener: function(name, callback) {
+            if (!listeners[name]) {
+                return false;
             }
-        };
-        if (this.config.fieldTypes) {
-            Object.assign(this.fieldTypes, this.config.fieldTypes);
-        }
-        this.attach(this.config.container.querySelectorAll(this.config.selector), this.config.model, force);
-        if (this.config.twoway) {
-            var self = this;
-            var observer = new MutationObserver(
-                throttle(function() {
-                    runWhenIdle(function() {
-                        self.attach(self.config.container.querySelectorAll(self.config.selector), self.config.model);
-                    });
-                })
-            );
-            observer.observe(this.config.container, {
-                subtree: true,
-                childList: true
+            listeners[name] = listeners[name].filter(function(listener) {
+                return listener!=callback;
             });
         }
-    }
-
-    var focusedElement = null;
-    var initialized = new WeakMap();
-    var observers = new WeakMap();
-    var observersPaused = 0;
+    };
 
-    Binding.prototype.attach = function(el, model, force) {
-        var illegalNesting = function() {
-            return (!force && el.parentElement && el.parentElement.closest(self.config.selector));
-        };
+    var initialCall = function(name) {
+        var nodes = document.querySelectorAll('[data-simply-activate="'+name+'"]');
+        if (nodes) {
+            [].forEach.call(nodes, function(node) {
+                callListeners(node);
+            });
+        }
+    };
 
-        var attachElement = function(jsonPath) {
-            el.dataset.simplyBound = true;
-            initElement(el);
-            setValue(el, getByPath(model, jsonPath), self);
-            simply.observe(model, jsonPath, function(value) {
-                if (el != focusedElement) {
-                    setValue(el, value, self);
-                }
+    var callListeners = function(node) {
+        if (node && node.dataset.simplyActivate 
+            && listeners[node.dataset.simplyActivate]
+        ) {
+            listeners[node.dataset.simplyActivate].forEach(function(callback) {
+                callback.call(node);
             });
-        };
+        }
+    };
 
-        var addMutationObserver = function(jsonPath) {
-            if (el.dataset.simplyList) {
-                return;
-            }
-            var update = throttle(function() {
-                runWhenIdle(function() {
-                    var v = getValue(el, self);
-                    var s = getByPath(model, jsonPath);
-                    if (v != s) {
-                        focusedElement = el;
-                        setByPath(model, jsonPath, v);
-                        focusedElement = null;
+    var handleChanges = function(changes) {
+        var activateNodes = [];
+        for (var change of changes) {
+            if (change.type=='childList') {
+                [].forEach.call(change.addedNodes, function(node) {
+                    if (node.querySelectorAll) {
+                        var toActivate = [].slice.call(node.querySelectorAll('[data-simply-activate]'));
+                        if (node.matches('[data-simply-activate]')) {
+                            toActivate.push(node);
+                        }
+                        activateNodes = activateNodes.concat(toActivate);
                     }
                 });
-            }, 250);
-            var observer = new MutationObserver(function() {
-                if (observersPaused) {
-                    return;
-                }
-                update();
-            });
-            observer.observe(el, {
-                characterData: true,
-                subtree: true,
-                childList: true,
-                attributes: true
-            });
-            if (!observers.has(el)) {
-                observers.set(el, []);
             }
-            observers.get(el).push(observer);
-            return observer;
-        };
+        }
+        if (activateNodes.length) {
+            activateNodes.forEach(function(node) {
+                callListeners(node);
+            });
+        }
+    };
 
-        /**
-         * Runs the init() method of the fieldType, if it is defined.
-         **/
-        var initElement = function(el) {
-            if (initialized.has(el)) {
-                return;
-            }
-            initialized.set(el, true);
-            var selectors = Object.keys(self.fieldTypes);
-            for (var i=selectors.length-1; i>=0; i--) {
-                if (self.fieldTypes[selectors[i]].init && el.matches(selectors[i])) {
-                    self.fieldTypes[selectors[i]].init.call(el, self);
-                    return;
-                }
-            }
-        };
+    var observer = new MutationObserver(handleChanges);
+    observer.observe(document, {
+        subtree: true,
+        childList: true
+    });
 
-        var self = this;
-        if (el instanceof HTMLElement) {
-            if (!force && el.dataset.simplyBound) {
-                return;
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = activate;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.activate = activate;
+    }
+})(this);
+(function(global) {
+    'use strict';
+
+    var knownCollections = {};
+    
+    var collect = {
+        addListener: function(name, callback) {
+            if (!knownCollections[name]) {
+                knownCollections[name] = [];
             }
-            var jsonPath = getPath(el, this.config.attribute);
-            if (illegalNesting(el)) {
-                el.dataset.simplyBound = 'Error: nested binding';
-                console.error('Error: found nested data-binding element:',el);
-                return;
+            if (knownCollections[name].indexOf(callback) == -1) {
+                knownCollections[name].push(callback);
             }
-            attachElement(jsonPath);
-            if (this.config.twoway) {
-                addMutationObserver(jsonPath);
+        },
+        removeListener: function(name, callback) {
+            if (knownCollections[name]) {
+                var index = knownCollections[name].indexOf(callback);
+                if (index>=0) {
+                    knownCollections[name].splice(index, 1);
+                }
             }
-        } else {
-            [].forEach.call(el, function(element) {
-                self.attach(element, model, force);
-            });
+        },
+        update: function(element, value) {
+            element.value = value;
+            element.dispatchEvent(new Event('change', {
+                bubbles: true,
+                cancelable: true
+            }));
         }
     };
 
-    Binding.prototype.pauseObservers = function() {
-        observersPaused++;
-    };
-
-    Binding.prototype.resumeObservers = function() {
-        observersPaused--;
-    };
+    function findCollection(el) {
+        while (el && !el.dataset.simplyCollection) {
+            el = el.parentElement;
+        }
+        return el;
+    }
+    
+    global.addEventListener('change', function(evt) {
+        var root = null;
+        var name = '';
+        if (evt.target.dataset.simplyElement) {
+            root = findCollection(evt.target);
+            if (root && root.dataset) {
+                name = root.dataset.simplyCollection;
+            }
+        }
+        if (name && knownCollections[name]) {
+            var inputs = root.querySelectorAll('[data-simply-element]');
+            var elements = [].reduce.call(inputs, function(elements, input) {
+                elements[input.dataset.simplyElement] = input;
+                return elements;
+            }, {});
+            for (var i=knownCollections[name].length-1; i>=0; i--) {
+                var result = knownCollections[name][i].call(evt.target.form, elements);
+                if (result === false) {
+                    break;
+                }
+            }
+        }
+    }, true);
 
-    simply.bind = function(config, force) {
-        return new Binding(config, force);
-    };
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = collect;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.collect = collect;
+    }
 
-    return simply;
-})(this.simply || {}, this);this.simply = (function(simply, global) {
+})(this);
+(function(global) {
+    'use strict';
 
     var defaultCommands = {
         'simply-hide': function(el, value) {
@@ -830,7 +918,7 @@ this.simply = (function(simply, global) {
                 this.action('simply-show',target);
             }
         },
-        'simply-select': function(value,el) {
+        'simply-select': function(el, value) {
             var group = el.dataset.simplyGroup;
             var target = this.app.get(value);
             var targetGroup = (target ? target.dataset.simplyGroup : null);
@@ -861,6 +949,16 @@ this.simply = (function(simply, global) {
         {
             match: 'input,select,textarea',
             get: function(el) {
+                if (el.tagName==='SELECT' && el.multiple) {
+                    var values = [], opt;
+                    for (var i=0,l=el.options.length;i<l;i++) {
+                        var opt = el.options[i];
+                        if (opt.selected) {
+                            values.push(opt.value);
+                        }
+                    }
+                    return values;
+                }
                 return el.dataset.simplyValue || el.value;
             },
             check: function(el, evt) {
@@ -881,7 +979,19 @@ this.simply = (function(simply, global) {
             get: function(el) {
                 var data = {};
                 [].forEach.call(el.elements, function(el) {
-                    data[el.name] = el.value;
+                    if (el.tagName=='INPUT' && (el.type=='checkbox' || el.type=='radio')) {
+                        if (!el.checked) {
+                            return;
+                        }
+                    }
+                    if (data[el.name] && !Array.isArray(data[el.name])) {
+                        data[el.name] = [data[el.name]];
+                    }
+                    if (Array.isArray(data[el.name])) {
+                        data[el.name].push(el.value);
+                    } else {
+                        data[el.name] = el.value;
+                    }
                 });
                 return data;//new FormData(el);
             },
@@ -927,7 +1037,7 @@ this.simply = (function(simply, global) {
         return null;
     }
 
-    simply.command = function(app, inCommands) {
+    var command = function(app, inCommands) {
 
         var commands = Object.create(defaultCommands);
         for (var i in inCommands) {
@@ -968,62 +1078,202 @@ this.simply = (function(simply, global) {
                     return false;
                 }
             }
-        };
-
-        app.container.addEventListener('click', commandHandler);
-        app.container.addEventListener('submit', commandHandler);
-        app.container.addEventListener('change', commandHandler);
-        app.container.addEventListener('input', commandHandler);
-
-        return commands;
+        };
+
+        app.container.addEventListener('click', commandHandler);
+        app.container.addEventListener('submit', commandHandler);
+        app.container.addEventListener('change', commandHandler);
+        app.container.addEventListener('input', commandHandler);
+
+        return commands;
+    };
+
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = command;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.command = command;
+    }
+ 
+})(this);
+(function(global) {
+    'use strict';
+
+    function keyboard(app, config) {
+        var keys = config;
+
+        if (!app) {
+            app = {};
+        }
+        if (!app.container) {
+            app.container = document.body;
+        }
+        app.container.addEventListener('keydown', (e) => {
+            if (e.isComposing || e.keyCode === 229) {
+                return;
+            }
+            if (e.defaultPrevented) {
+                return;
+            }
+            if (!e.target) {
+                return;
+            }
+
+            let selectedKeyboard = 'default';
+            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);
+            }
+        });
+
+        return keys;
+    }
+
+
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = keyboard;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.keyboard = keyboard;
+    }
+})(this);
+(function(global) {
+	'use strict';
+
+    var defaultActions = {
+        'simply-hide': function(el) {
+            el.classList.remove('simply-visible');
+            return Promise.resolve();
+        },
+        'simply-show': function(el) {
+            el.classList.add('simply-visible');
+            return Promise.resolve();
+        },
+        'simply-select': function(el,group,target,targetGroup) {
+            if (group) {
+                this.call('simply-deselect', this.app.container.querySelectorAll('[data-simply-group='+group+']'));
+            }
+            el.classList.add('simply-selected');
+            if (target) {
+                this.call('simply-select',target,targetGroup);
+            }
+            return Promise.resolve();
+        },
+        'simply-toggle-select': function(el,group,target,targetGroup) {
+            if (!el.classList.contains('simply-selected')) {
+                this.call('simply-select',el,group,target,targetGroup);
+            } else {
+                this.call('simply-deselect',el,target);
+            }
+            return Promise.resolve();
+        },
+        'simply-toggle-class': function(el,className,target) {
+            if (!target) {
+                target = el;
+            }
+            return Promise.resolve(target.classList.toggle(className));
+        },
+        'simply-deselect': function(el,target) {
+            if ( typeof el.length=='number' && typeof el.item=='function') {
+                el = Array.prototype.slice.call(el);
+            }
+            if ( Array.isArray(el) ) {
+                for (var i=0,l=el.length; i<l; i++) {
+                    this.call('simply-deselect',el[i],target);
+                    target = null;
+                }
+            } else {
+                el.classList.remove('simply-selected');
+                if (target) {
+                    this.call('simply-deselect',target);
+                }
+            }
+            return Promise.resolve();
+        },
+        'simply-fullscreen': function(target) {
+            var methods = {
+                'requestFullscreen':{exit:'exitFullscreen',event:'fullscreenchange',el:'fullscreenElement'},
+                'webkitRequestFullScreen':{exit:'webkitCancelFullScreen',event:'webkitfullscreenchange',el:'webkitFullscreenElement'},
+                'msRequestFullscreen':{exit:'msExitFullscreen',event:'MSFullscreenChange',el:'msFullscreenElement'},
+                'mozRequestFullScreen':{exit:'mozCancelFullScreen',event:'mozfullscreenchange',el:'mozFullScreenElement'}
+            };
+            for ( var i in methods ) {
+                if ( typeof document.documentElement[i] != 'undefined' ) {
+                    var requestMethod = i;
+                    var cancelMethod = methods[i].exit;
+                    var event = methods[i].event;
+                    var element = methods[i].el;
+                    break;
+                }
+            }
+            if ( !requestMethod ) {
+                return;
+            }
+            if (!target.classList.contains('simply-fullscreen')) {
+                target.classList.add('simply-fullscreen');
+                target[requestMethod]();
+                var exit = function() {
+                    if ( !document[element] ) {
+                        target.classList.remove('simply-fullscreen');
+                        document.removeEventListener(event,exit);
+                    }
+                };
+                document.addEventListener(event,exit);
+            } else {
+                target.classList.remove('simply-fullscreen');
+                document[cancelMethod]();
+            }
+            return Promise.resolve();
+        }
     };
 
-    return simply;
-    
-})(this.simply || {}, this);
-this.simply = (function(simply, global) {
-
-    simply.view = function(app, view) {
-
-        app.view = view || {};
+     var action = function(app, inActions) {
+        var actions = Object.create(defaultActions);
+        for ( var i in inActions ) {
+            actions[i] = inActions[i];
+        }
 
-        var load = function() {
-            var data = app.view;
-            var path = editor.data.getDataPath(app.container);
-            app.view = editor.currentData[path];
-            Object.keys(data).forEach(function(key) {
-                app.view[key] = data[key];
-            });
+        actions.app = app;
+        actions.call = function(name) {
+            var params = Array.prototype.slice.call(arguments);
+            params.shift();
+            return this[name].apply(this, params);
         };
+        return actions;
+    };
 
-        if (global.editor && editor.currentData) {
-            load();
-        } else {
-            document.addEventListener('simply-content-loaded', function() {
-                load();
-            });
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = action;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
         }
-        
-        return app.view;
-    };
+        global.simply.action = action;
+    }
 
-    return simply;
-})(this.simply || {}, this);
-this.simply = (function(simply, global) {
+})(this);
+(function(global) {
+    'use strict';
 
-	simply.resize = function(app, config) {
-		if (!config) {
-			config = {};
-		}
-		if (!config.sizes) {
-        	config.sizes     = {
-	            'simply-tiny'   : 0,
-	            'simply-xsmall' : 480,
-	            'simply-small'  : 768,
-	            'simply-medium' : 992,
-	            'simply-large'  : 1200
-	        };
-		}
+    var resize = function(app, config) {
+        if (!config) {
+            config = {};
+        }
+        if (!config.sizes) {
+            config.sizes     = {
+                'simply-tiny'   : 0,
+                'simply-xsmall' : 480,
+                'simply-small'  : 768,
+                'simply-medium' : 992,
+                'simply-large'  : 1200
+            };
+        }
 
         var lastSize = 0;
         function resizeSniffer() {
@@ -1042,6 +1292,7 @@ this.simply = (function(simply, global) {
                 } else {
                     if ( !app.container.classList.contains(match) ) {
                         app.container.classList.add(match);
+                        match = sizes.pop(); // skip to next match to remove these
                     }
                     break;
                 }
@@ -1051,7 +1302,7 @@ this.simply = (function(simply, global) {
                 if ( app.container.classList.contains(match)) {
                     app.container.classList.remove(match);
                 }
-                match=sizes.pop();
+                match = sizes.pop();
             }
             var toolbars = app.container.querySelectorAll('.simply-toolbar');
             [].forEach.call(toolbars, function(toolbar) {
@@ -1075,534 +1326,740 @@ this.simply = (function(simply, global) {
             });
         }
 
-		return resizeSniffer;
-	};
-
-	return simply;
+        return resizeSniffer;
+    };
 
-})(this.simply || {}, this);this.simply = (function(simply, global) {
-    simply.app = function(options) {
-        if (!options) {
-            options = {};
-        }
-        if (!options.container) {
-            console.warn('No simply.app application container element specified, using document.body.');
-        }
-        
-        function simplyApp(options) {
-            if (!options) {
-                options = {};
-            }
-            if ( options.routes ) {
-                simply.route.load(options.routes);
-                simply.route.handleEvents();
-                global.setTimeout(function() {
-                    simply.route.match(global.location.pathname);
-                });
-            }
-            this.container = options.container  || document.body;
-            this.actions   = simply.action ? simply.action(this, options.actions) : false;
-            this.commands  = simply.command ? simply.command(this, options.commands) : false;
-            this.resize    = simply.resize ? simply.resize(this, options.resize) : false;
-            this.view      = simply.view ? simply.view(this, options.view) : false;
-            if (!(global.editor && global.editor.field) && simply.bind) {
-                // skip simplyview databinding if SimplyEdit is loaded
-                options.bind = simply.render(options.bind || {});
-                options.bind.model = this.view;
-                options.bind.container = this.container;
-                this.bind = options.bindings = simply.bind(options.bind);
-            }
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = resize;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
         }
+        global.simply.resize = resize;
+    }
+})(this);(function (global) {
+    'use strict';
 
-        simplyApp.prototype.get = function(id) {
-            return this.container.querySelector('[data-simply-id='+id+']') || document.getElementById(id);
+    var throttle = function( callbackFunction, intervalTime ) {
+        var eventId = 0;
+        return function() {
+            var myArguments = arguments;
+            var me = this;
+            if ( eventId ) {
+                return;
+            } else {
+                eventId = global.setTimeout( function() {
+                    callbackFunction.apply(me, myArguments);
+                    eventId = 0;
+                }, intervalTime );
+            }
         };
-
-        var app = new simplyApp(options);
-
-        return app;
     };
 
-    return simply;
-})(this.simply || {}, this);
-this.simply = (function(simply, global) {
+    var runWhenIdle = (function() {
+        if (global.requestIdleCallback) {
+            return function(callback) {
+                global.requestIdleCallback(callback, {timeout: 500});
+            };
+        }
+        return global.requestAnimationFrame;
+    })();
 
-    var routeInfo = [];
+    var rebaseHref = function(relative, base) {
+        if (/^[a-z-]*:?\//.test(relative)) {
+            return relative; // absolute href, no need to rebase
+        }
 
-    function parseRoutes(routes) {
-        var paths = Object.keys(routes);
-        var matchParams = /:(\w+|\*)/g;
-        var matches, params, path;
-        for (var i=0; i<paths.length; i++) {
-            path    = paths[i];
-            matches = [];
-            params  = [];
-            do {
-                matches = matchParams.exec(path);
-                if (matches) {
-                    params.push(matches[1]);
-                }
-            } while(matches);
-            routeInfo.push({
-                match:  new RegExp(path.replace(/:\w+/g, '([^/]+)').replace(/:\*/, '(.*)')),
-                params: params,
-                action: routes[path]
-            });
+        var stack = base.split('/'),
+            parts = relative.split('/');
+        stack.pop(); // remove current file name (or empty string)
+        for (var i=0; i<parts.length; i++) {
+            if (parts[i] == '.')
+                continue;
+            if (parts[i] == '..')
+                stack.pop();
+            else
+                stack.push(parts[i]);
         }
+        return stack.join('/');
+    };
+
+    var observer, loaded = {};
+    var head = global.document.querySelector('head');
+    var currentScript = global.document.currentScript;
+    if (!currentScript) {
+        var getScriptURL = (function() {
+            var scripts = document.getElementsByTagName('script');
+            var index = scripts.length - 1;
+            var myScript = scripts[index];
+            return function() { return myScript.src; };
+        })();
+        var currentScriptURL = getScriptURL();
+    } else {
+        var currentScriptURL = currentScript.src;
     }
 
-    var linkHandler = function(evt) {
-        if (evt.ctrlKey) {
-            return;
-        }
-        if (evt.which != 1) {
-            return; // not a 'left' mouse click
-        }
-        var link = evt.target;
-        while (link && link.tagName!='A') {
-            link = link.parentElement;
-        }
-        if (link 
-            && link.pathname 
-            && link.hostname==document.location.hostname 
-            && !link.link
-            && !link.dataset.simplyCommand
-            && simply.route.has(link.pathname)
-        ) {
-            simply.route.goto(link.pathname);
-            evt.preventDefault();
-            return false;
-        }
+    var waitForPreviousScripts = function() {
+        // because of the async=false attribute, this script will run after
+        // the previous scripts have been loaded and run
+        // simply.include.next.js only fires the simply-next-script event
+        // that triggers the Promise.resolve method
+        return new Promise(function(resolve) {
+            var next = global.document.createElement('script');
+            next.src = rebaseHref('simply.include.next.js', currentScriptURL);
+            next.async = false;
+            global.document.addEventListener('simply-include-next', function() {
+                head.removeChild(next);
+                resolve();
+            }, { once: true, passive: true});
+            head.appendChild(next);
+        });
     };
 
-    simply.route = {
-        handleEvents: function() {
-            global.addEventListener('popstate', function() {
-                simply.route.match(document.location.pathname);
-            });
-            document.addEventListener('click', linkHandler);
-        },
-        load: function(routes) {
-            parseRoutes(routes);
-        },
-        match: function(path, options) {
-            var matches;
-            for ( var i=0; i<routeInfo.length; i++) {
-                if (path[path.length-1]!='/') {
-                    matches = routeInfo[i].match.exec(path+'/');
-                    if (matches) {
-                        path+='/';
-                        history.replaceState({}, '', path);
-                    }
+    var scriptLocations = [];
+
+    var include = {
+        scripts: function(scripts, base) {
+            var arr = [];
+            for(var i = scripts.length; i--; arr.unshift(scripts[i]));
+            var importScript = function() {
+                var script = arr.shift();
+                if (!script) {
+                    return;
                 }
-                matches = routeInfo[i].match.exec(path);
-                if (matches && matches.length) {
-                    var params = {};
-                    routeInfo[i].params.forEach(function(key, i) {
-                        if (key=='*') {
-                            key = 'remainder';
-                        }
-                        params[key] = matches[i+1];
-                    });
-                    Object.assign(params, options);
-                    return routeInfo[i].action.call(simply.route, params);
+                var attrs  = [].map.call(script.attributes, function(attr) {
+                    return attr.name;
+                });
+                var clone  = global.document.createElement('script');
+                attrs.forEach(function(attr) {
+                    clone.setAttribute(attr, script.getAttribute(attr));
+                });
+                clone.removeAttribute('data-simply-location');
+                if (!clone.src) {
+                    // this is an inline script, so copy the content and wait for previous scripts to run
+                    clone.innerHTML = script.innerHTML;
+                    waitForPreviousScripts()
+                        .then(function() {
+                            var node = scriptLocations[script.dataset.simplyLocation];
+                            node.parentNode.insertBefore(clone, node);
+                            node.parentNode.removeChild(node);
+                            importScript();
+                        });
+                } else {
+                    clone.src = rebaseHref(clone.src, base);
+                    if (!clone.hasAttribute('async') && !clone.hasAttribute('defer')) {
+                        clone.async = false; //important! do not use clone.setAttribute('async', false) - it has no effect
+                    }
+                    var node = scriptLocations[script.dataset.simplyLocation];
+                    node.parentNode.insertBefore(clone, node);
+                    node.parentNode.removeChild(node);
+                    loaded[clone.src]=true;
+                    importScript();
                 }
+            };
+            if (arr.length) {
+                importScript();
             }
         },
-        goto: function(path) {
-            history.pushState({},'',path);
-            return simply.route.match(path);
-        },
-        has: function(path) {
-            for ( var i=0; i<routeInfo.length; i++) {
-                var matches = routeInfo[i].match.exec(path);
-                if (matches && matches.length) {
-                    return true;
+        html: function(html, link) {
+            var fragment = global.document.createRange().createContextualFragment(html);
+            var stylesheets = fragment.querySelectorAll('link[rel="stylesheet"],style');
+            // add all stylesheets to head
+            [].forEach.call(stylesheets, function(stylesheet) {
+                if (stylesheet.href) {
+                    stylesheet.href = rebaseHref(stylesheet.href, link.href);
+                }
+                head.appendChild(stylesheet);
+            });
+            // remove the scripts from the fragment, as they will not run in the
+            // order in which they are defined
+            var scriptsFragment = global.document.createDocumentFragment();
+            // FIXME: this loses the original position of the script
+            // should add a placeholder so we can reinsert the clone
+            var scripts = fragment.querySelectorAll('script');
+            [].forEach.call(scripts, function(script) {
+                var placeholder = global.document.createComment(script.src || 'inline script');
+                script.parentNode.insertBefore(placeholder, script);
+                script.dataset.simplyLocation = scriptLocations.length;
+                scriptLocations.push(placeholder);
+                scriptsFragment.appendChild(script);
+            });
+            // add the remainder before the include link
+            link.parentNode.insertBefore(fragment, link ? link : null);
+            global.setTimeout(function() {
+                if (global.editor && global.editor.data && fragment.querySelector('[data-simply-field],[data-simply-list]')) {
+                    //TODO: remove this dependency and let simply.bind listen for dom node insertions (and simply-edit.js use simply.bind)
+                    global.editor.data.apply(global.editor.currentData, global.document);
                 }
-            }
-            return false;
+                simply.include.scripts(scriptsFragment.childNodes, link ? link.href : global.location.href );
+            }, 10);
         }
     };
 
-    return simply;
+    var included = {};
+    var includeLinks = function(links) {
+        // mark them as in progress, so handleChanges doesn't find them again
+        var remainingLinks = [].reduce.call(links, function(remainder, link) {
+            if (link.rel=='simply-include-once' && included[link.href]) {
+                link.parentNode.removeChild(link);
+            } else {
+                included[link.href]=true;
+                link.rel = 'simply-include-loading';
+                remainder.push(link);
+            }
+            return remainder;
+        }, []);
+        [].forEach.call(remainingLinks, function(link) {
+            if (!link.href) {
+                return;
+            }
+            // fetch the html
+            fetch(link.href)
+                .then(function(response) {
+                    if (response.ok) {
+                        console.log('simply-include: loaded '+link.href);
+                        return response.text();
+                    } else {
+                        console.log('simply-include: failed to load '+link.href);
+                    }
+                })
+                .then(function(html) {
+                    // if succesfull import the html
+                    simply.include.html(html, link);
+                    // remove the include link
+                    link.parentNode.removeChild(link);
+                });
+        });
+    };
 
-})(this.simply || {}, this);
-/**
- * simply.observe
- * This component lets you observe changes in a json compatible data structure
- * It doesn't support linking the same object multiple times
- * It doesn't register deletion of properties using the delete keyword, assign
- * null to the property instead.
- * It doesn't register addition of new properties.
- * It doesn't register directly assigning new entries in an array on a previously
- * non-existant index.
- *
- * usage:
- *
- * (function) simply.observe( (object) model, (string) path, (function) callback)
- *
- * var model = { foo: { bar: 'baz' } };
- * var removeObserver = simply.observe(model, 'foo.bar', function(value, sourcePath) {
- *   console.log(sourcePath+': '+value);
- * };
- *
- * The function returns a function that removes the observer when called.
- *
- * The component can observe in place changes in arrays, either by changing
- * an item in a specific index, by calling methods on the array that change
- * the array in place or by reassigning the array with a new value.
- *
- * The sourcePath contains the exact entry that was changed, the value is the
- * value for the path passed to simply.observe.
- * If an array method was called that changes the array in place, the sourcePath
- * also contains that method and its arguments JSON serialized.
- *
- * sourcePath parts are always seperated with '.', even for array indexes.
- * so if foo = [ 'bar' ], the path to 'bar' would be 'foo.0'
- */
+    var handleChanges = throttle(function() {
+        runWhenIdle(function() {
+            var links = global.document.querySelectorAll('link[rel="simply-include"],link[rel="simply-include-once"]');
+            if (links.length) {
+                includeLinks(links);
+            }
+        });
+    });
 
- /*
- FIXME: child properties added after initial observe() call aren't added to the
- childListeners. onMissingChildren can't then find them.
- TODO: onMissingChildren must loop through all fields to get only the direct child
-properties for a given parent, keep seperate index for this?
- */
+    var observe = function() {
+        observer = new MutationObserver(handleChanges);
+        observer.observe(global.document, {
+            subtree: true,
+            childList: true,
+        });
+    };
 
-this.simply = (function (simply, global) {
-    var changeListeners = new WeakMap();
-    var parentListeners = new WeakMap();
-    var childListeners = new WeakMap();
-    var changesSignalled = {};
-    var observersPaused = 0;
+    observe();
+    handleChanges(); // check if there are include links in the dom already
 
-    function signalChange(model, path, value, sourcePath) {
-        if (observersPaused) {
-            return;
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = include;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
         }
+        global.simply.include = include;
+    }
 
-        sourcePath = sourcePath ? sourcePath : path;
-        changesSignalled = {};
 
-        var signalRecursion = function(model, path, value, sourcePath) {
-            if (changeListeners.has(model) && changeListeners.get(model)[path]) {
-                // changeListeners[model][path] contains callback methods
-                changeListeners.get(model)[path].forEach(function(callback) {
-                    changesSignalled[path] = true;
-                    callback(value, sourcePath);
-                });
-            }
-        };
+})(this);
+(function(global) {
+    'use strict';
+    var view = function(app, view) {
 
-        //TODO: check if this is correct
-        //previous version only triggered parentListeners when no changeListeners were
-        //triggered. that created problems with arrays. make an exhaustive unit test.
-        signalRecursion(model, path, value, sourcePath);
-        
-        if (parentListeners.has(model) && parentListeners.get(model)[path]) {
-            // parentListeners[model][path] contains child paths to signal change on
-            // if a parent object is changed, this signals the change to the child objects
-            parentListeners.get(model)[path].forEach(function(childPath) {
-                if (!changesSignalled[childPath]) {
-                    var value = getByPath(model, childPath);
-                    if (value) {
-                        attach(model, childPath);
-                    }
-                    signalRecursion(model, childPath, value, sourcePath);
-                    changesSignalled[childPath] = true;
-                }
-            });
-        }
+        app.view = view || {};
 
-        if (childListeners.has(model) && childListeners.get(model)[path]) {
-            // childListeners[model][path] contains parent paths to signal change on
-            // if a child object is changed, this signals the change to the parent objects
-            childListeners.get(model)[path].forEach(function(parentPath) {
-                if (!changesSignalled[parentPath]) {
-                    var value = getByPath(model, parentPath);
-                    signalRecursion(model, parentPath, value, sourcePath);
-                    changesSignalled[parentPath] = true;
-                    // check if the parent object still has this child property
-                    //FIXME: add a setter trigger here to restore observers once the child property get set again
+        var load = function() {
+            var data = app.view;
+            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 && global.editor.currentData) {
+            load();
+        } else {
+            global.document.addEventListener('simply-content-loaded', function() {
+                load();
             });
         }
+        
+        return app.view;
+    };
 
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = view;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.view = view;
     }
-
-    function getByPath(model, path) {
-        var parts = path.split('.');
-        var curr = model;
-        do {
-            curr = curr[parts.shift()];
-        } while (parts.length && curr);
-        return curr;
-    }
-
-    function parent(path) {
-        var parts = path.split('.');
-        parts.pop();
-        return parts.join('.');
-    }
+})(this);
+(function(global) {
+    'use strict';
     
-    function head(path) {
-        return path.split('.').shift();
-    }
-
-    function onParents(model, path, callback) {
-        var parent = '';
-        var parentOb = model;
-        var parents = path.split('.');
-        do {
-            var head = parents.shift();
-            if (parentOb && typeof parentOb[head] != 'undefined') {
-                callback(parentOb, head, (parent ? parent + '.' + head : head));
-                parentOb = parentOb[head];
-            }
-            parent = (parent ? parent + '.' + head : head );
-        } while (parents.length);
-    }
-
-    function onChildren(model, path, callback) {
-        var onChildObjects = function(object, path, callback) {
-            if (typeof object != 'object' || object == null) {
-                return;
-            }
-            if (Array.isArray(object)) {
-                return;
-            }
-            // register the current keys
-            Object.keys(object).forEach(function(key) {
-                callback(object, key, path+'.'+key);
-                onChildObjects(object[key], path+'.'+key, callback);
-            });
+    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: []
         };
-        var parent = getByPath(model, path);
-        onChildObjects(parent, path, callback);
     }
 
-    function onMissingChildren(model, path, callback) {
-        var allChildren = Object.keys(childListeners.get(model) || []).filter(function(childPath) {
-            return childPath.substr(0, path.length)==path && childPath.length>path.length;
-        });
-        if (!allChildren.length) {
-            return;
+    ViewModel.prototype.update = function(params) {
+        if (!params) {
+            params = {};
         }
-        var object = getByPath(model, path);
-        var keysSeen = {};
-        allChildren.forEach(function(childPath) {
-            var key = head(childPath.substr(path.length+1));
-            if (typeof object[key] == 'undefined') {
-                if (!keysSeen[key]) {
-                    callback(object, key, path+'.'+key);
-                    keysSeen[key] = true;
-                }
-            } else {
-                onMissingChildren(model, path+'.'+key, callback);
-            }
+        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);
         });
-    }
 
-    function addChangeListener(model, path, callback) {
-        if (!changeListeners.has(model)) {
-            changeListeners.set(model, {});
+        if (global.editor) {
+            global.editor.addDataSource(this.name,{
+                load: function(el, callback) {
+                    callback(self.view.data);
+                }
+            });
+            updateDataSource(this.name);
         }
-        if (!changeListeners.get(model)[path]) {
-            changeListeners.get(model)[path] = [];
+    };
+
+    ViewModel.prototype.addPlugin = function(pipe, plugin) {
+        if (typeof this.plugins[pipe] == 'undefined') {
+            throw new Error('Unknown pipeline '+pipe);
         }
-        changeListeners.get(model)[path].push(callback);
+        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 || {});
 
-        if (!parentListeners.has(model)) {
-            parentListeners.set(model, {});
-        }
-        var parentPath = parent(path);
-        onParents(model, parentPath, function(parentOb, key, currPath) {
-            if (!parentListeners.get(model)[currPath]) {
-                parentListeners.get(model)[currPath] = [];
+        return function(params) {
+            this.options[options.name] = options;
+            if (params[options.name]) {
+                options = Object.assign(options, params[options.name]);
             }
-            parentListeners.get(model)[currPath].push(path);
-        });
+            this.view.data.sort(options.getSort.call(this, options));
+        };
+    };
 
-        if (!childListeners.has(model)) {
-            childListeners.set(model, {});
-        }
-        onChildren(model, path, function(childOb, key, currPath) {
-            if (!childListeners.get(model)[currPath]) {
-                childListeners.get(model)[currPath] = [];
+    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
             }
-            childListeners.get(model)[currPath].push(path);
-        });
-    }
 
-    function removeChangeListener(model, path, callback) {
-        if (!changeListeners.has(model)) {
-            return;
+            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);
         }
-        if (changeListeners.get(model)[path]) {
-            changeListeners.get(model)[path] = changeListeners.get(model)[path].filter(function(f) {
-                return f != callback;
-            });
+        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;
+            }
         }
     }
 
-    function pauseObservers() {
-        observersPaused++;
-    }
+    var viewmodel = {
+        create: function(name, data, options) {
+            return new ViewModel(name, data, options);
+        },
+        createFilter: createFilter,
+        createSort: createSort,
+        createPaging: createPaging,
+        updateDataSource: updateDataSource
+    };
 
-    function resumeObservers() {
-        observersPaused--;
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = viewmodel;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.viewmodel = viewmodel;
     }
 
-    function attach(model, path, options) {
+})(this);(function(global) {
+    '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(), 
+		 * see the 'init' parameter at https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters 
+         * additionally:
+         * - baseURL: (required) the endpoint of the API
+         * - path: the current path in the API, is appended to the baseURL
+         * - verbs: list of http verbs to allow as methods, default ['get','post']
+         * - handlers.fetch: alternative fetch method
+         * - handlers.result: alternative getResult method
+         * - handlers.error: alternative error method
+         * - user (and password): if set, a basic authentication header will be added
+         * - paramsFormat: either 'formData', 'json' or 'search'. Default is search.
+         * - responseFormat: test, formData, blob, json, arrayBuffer or unbuffered. Default is json.
+         * @return Proxy
+         */
+        proxy: function(options) {
+            var cache = () => {};
+            cache.$options = Object.assign({}, options);
+            return new Proxy( cache, getApiHandler(cache.$options) );
+        },
 
-        var attachArray = function(object, path) {
-            var desc = Object.getOwnPropertyDescriptor(object, 'push');
-            if (!desc || desc.configurable) {
-                for (var f of ['push','pop','reverse','shift','sort','splice','unshift','copyWithin']) {
-                    (function(f) {
-                        try {
-                            Object.defineProperty(object, f, {
-                                value: function() {
-                                    pauseObservers();
-                                    var result = Array.prototype[f].apply(this, arguments);
-                                    attach(model, path);
-                                    var args = [].slice.call(arguments).map(function(arg) {
-                                        return JSON.stringify(arg);
-                                    });
-                                    resumeObservers();
-                                    signalChange(model, path, this, path+'.'+f+'('+args.join(',')+')');
-                                    return result;
-                                },
-                                readable: false,
-                                enumerable: false,
-                                configurable: false
-                            });
-                        } catch(e) {
-                            console.error('simply.observer: Error: Couldn\'t redefine array method '+f+' on '+path, e);
+        /**
+         * Fetches the options.baseURL using the fetch api and returns a promise
+         * Extra options in addition to those of global.fetch():
+         * - user (and password): if set, a basic authentication header will be added
+         * - paramsFormat: either 'formData', 'json' or 'search'
+         * By default params, if set, will be added to the baseURL as searchParams
+         * @param method one of the http verbs, e.g. get, post, etc.
+         * @param options the options for fetch(), with some additions
+         * @param params the parameters to send with the request, as javascript/json data
+         * @return Promise
+         */
+        fetch: function(method, params, options) {
+            if (!options.url) {
+                if (!options.baseURL) {
+                    throw new Error('No url or baseURL in options object');
+                }
+                while (options.baseURL[options.baseURL.length-1]=='/') {
+                    options.baseURL = options.baseURL.substr(0, options.baseURL.length-1);
+                }
+                var url = new URL(options.baseURL+options.path);
+            } else {
+                var url = options.url;
+            }
+            var fetchOptions = Object.assign({}, options);
+            if (!fetchOptions.headers) {
+                fetchOptions.headers = {};
+            }
+            if (params) {
+                if (method=='GET') {
+                    var paramsFormat = 'search';
+                } else {
+                    var paramsFormat = options.paramsFormat;
+                }
+                switch(paramsFormat) {
+                    case 'formData':
+                        var formData = new FormData();
+                        for (const name in params) {
+                            formData.append(name, params[name]);
                         }
-                    }(f));
+                        if (!fetchOptions.headers['Content-Type']) {
+                            fetchOptions.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+                        }
+                        break;
+                    case 'json':
+                        var formData = JSON.stringify(params);
+                        if (!fetchOptions.headers['Content-Type']) {
+                            fetchOptions.headers['Content-Type'] = 'application/json';
+                        }
+                        break;
+                    case 'search':
+                        var searchParams = url.searchParams; //new URLSearchParams(url.search.slice(1));
+                        for (const name in params) {
+                            searchParams.set(name, params[name]);
+                        }
+                        url.search = searchParams.toString();
+                        break;
+                    default:
+                        throw Error('Unknown options.paramsFormat '+options.paramsFormat+'. Select one of formData, json or search.');
+                        break;
                 }
-                for (var i=0, l=object.length; i<l; i++) {
-                    //FIXME: options becomes undefined here somewhere
-//                    if (options.skipArray) {
-                        addSetter(object, i, path+'.'+i);
-//                    } else {
-//                        attach(model, path+'.'+i, options);
-//                    }
+            }
+            if (formData) {
+                fetchOptions.body = formData
+            }
+            if (options.user) {
+                fetchOptions.headers['Authorization'] = 'Basic '+btoa(options.user+':'+options.password);
+            }
+            fetchOptions.method = method.toUpperCase();
+            var fetchURL = url.toString()
+            return fetch(fetchURL, fetchOptions);
+        },
+        /**
+         * Creates a function to call one or more graphql queries
+         */
+        graphqlQuery: function(url, query, options) {
+            options = Object.assign({ paramsFormat: 'json', url: url, responseFormat: 'json' }, options);
+            return function(params, operationName) {
+                let postParams = {
+                    query: query
+                };
+                if (operationName) {
+                    postParams.operationName = operationName;
+                }
+                postParams.variables = params || {};
+                return simply.api.fetch('POST', postParams, options )
+                .then(function(response) {
+                    return simply.api.getResult(response, options);
+                });
+            }  
+        },
+        /**
+         * Handles the response and returns a Promise with the response data as specified
+         * @param response Response
+         * @param options
+         * - responseFormat: one of 'text', 'formData', 'blob', 'arrayBuffer', 'unbuffered' or 'json'.
+         * The default is json.
+         */
+        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;
+				}
+            } else {
+                throw {
+                    status: response.status,
+                    message: response.statusText,
+                    response: response
                 }
             }
-        };
+		},
 
-        var addSetTrigger = function(object, key, currPath) {
-            Object.defineProperty(object, key, {
-                set: function(value) {
-                    addSetter(object, key, currPath);
-                    object[key] = value;
-                },
-                configurable: true,
-                readable: false,
-                enumerable: false
-            });
-        };
+		logError: function(error, options) {
+            console.error(error.status, error.message);
+		}
+    }
 
-        var addSetter = function(object, key, currPath) {
-            if (Object.getOwnPropertyDescriptor(object, key).configurable) {
-                // assume object keys are only unconfigurable if the
-                // following code has already been run on this property
-                var _value = object[key];
-                Object.defineProperty(object, key, {
-                    set: function(value) {
-                        _value = value;
-                        signalChange(model, currPath, value);
-                        if (value!=null) {
-                            onChildren(model, currPath, addSetter);
-                            onMissingChildren(model, currPath, addSetTrigger);
+    var defaultOptions = {
+		path: '',
+		responseFormat: 'json',
+		paramsFormat: 'search',
+		verbs: ['get','post'],
+		handlers: {
+			fetch:  api.fetch,
+			result: api.getResult,
+			error:  api.logError
+		}
+    };
+
+    function cd(path, name) {
+        name = name.replace(/\//g,'');
+        if (!path.length || path[path.length-1]!=='/') {
+            path+='/';
+        }
+        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 getApiHandler(options) {
+		options.handlers = Object.assign({}, defaultOptions.handlers, options.handlers);
+        options = Object.assign({}, defaultOptions, options);
+
+        return {
+            get: function(cache, prop) {
+                if (!cache[prop]) {
+                    if (options.verbs.indexOf(prop)!=-1) { 
+                        cache[prop] = function(params) {
+                            return fetchChain.call(options, prop, params);
                         }
-                    },
-                    get: function() {
-                        return _value;
-                    },
-                    configurable: false,
-                    readable: true,
-                    enumerable: true
-                });
-            }
-            if (Array.isArray(object[key])) {
-                attachArray(object[key], currPath, options);
+                    } else {
+                        cache[prop] = api.proxy(Object.assign({}, options, {
+                            path: cd(options.path, prop)
+                        }));
+                    }
+                }
+                return cache[prop];
+            },
+            apply: function(cache, thisArg, params) {
+                return fetchChain.call(options, 'get', params[0] ? params[0] : null)
             }
-        };
-
-        onParents(model, path, addSetter);
-        onChildren(model, path, addSetter);
+        }
     }
 
-    // FIXME: if you remove a key by reassigning the parent object
-    // and then assign that missing key a new value
-    // the observer doesn't get triggered
-    // var model = { foo: { bar: 'baz' } };
-    // simply.observer(model, 'foo.bar', ...)
-    // model.foo = { }
-    // model.foo.bar = 'zab'; // this should trigger the observer but doesn't
 
-    simply.observe = function(model, path, callback, options) {
-        if (!path) {
-            var keys = Object.keys(model);
-            keys.forEach(function(key) {
-                attach(model, key, options);
-                addChangeListener(model, key, callback);
-            }); 
-            return function() {
-                keys.forEach(function(key) {
-                    removeChangeListener(model, key, callback);
-                });
-            };
-        } else {
-            attach(model, path, options);
-            addChangeListener(model, path, callback);
-            return function() {
-                removeChangeListener(model, path, callback);
-            };
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = api;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
         }
-    };
+        global.simply.api = api;
+    }
 
-    return simply;
-})(this.simply || {}, this);this.simply = (function(simply) {
+})(this);
+(function(global) {
+    'use strict';
 
-    simply.path = {
-        get: function(model, path) {
-            if (!path) {
-                return model;
+    var app = function(options) {
+        if (!options) {
+            options = {};
+        }
+        if (!options.container) {
+            console.warn('No simply.app application container element specified, using document.body.');
+        }
+        
+        function simplyApp(options) {
+            if (!options) {
+                options = {};
+            }
+            if ( options.routes ) {
+                simply.route.load(options.routes);
+                if (options.routeEvents) {
+                    Object.keys(options.routeEvents).forEach(function(action) {
+                        Object.keys(options.routeEvents[action]).forEach(function(route) {
+                            options.routeEvents[action][route].forEach(function(callback) {
+                                simply.route.addListener(action, route, callback);
+                            });
+                        });
+                    });
+                }
+                simply.route.handleEvents();
+                global.setTimeout(function() {
+                    simply.route.match(global.location.pathname+global.location.hash);
+                });
+            }
+            this.container = options.container || document.body;
+            this.keyboard  = simply.keyboard ? simply.keyboard(this, options.keyboard || {}) : false;
+            this.actions   = simply.action ? simply.action(this, options.actions) : false;
+            this.commands  = simply.command ? simply.command(this, options.commands) : false;
+            this.resize    = simply.resize ? simply.resize(this, options.resize) : false;
+            this.view      = simply.view ? simply.view(this, options.view) : false;
+            if (!(global.editor && global.editor.field) && simply.bind) {
+                // skip simplyview databinding if SimplyEdit is loaded
+                options.bind = simply.render(options.bind || {});
+                options.bind.model = this.view;
+                options.bind.container = this.container;
+                this.bind = options.bindings = simply.bind(options.bind);
             }
-            return path.split('.').reduce(function(acc, name) {
-                return (acc && acc[name] ? acc[name] : null);
-            }, model);
-        },
-        set: function(model, path, value) {
-            var lastName   = simply.path.pop(path);
-            var parentPath = simply.path.parent(path);
-            var parentOb   = simply.path.get(model, parentPath);
-            parentOb[lastName] = value;
-        },
-        pop: function(path) {
-            return path.split('.').pop();
-        },
-        push: function(path, name) {
-            return (path ? path + '.' : '') + name;
-        },
-        parent: function(path) {
-            var p = path.split('.');
-            p.pop();
-            return p.join('.');
-        },
-        parents: function(path) {
-            var result = [];
-            path.split('.').reduce(function(acc, name) {
-                acc.push( (acc.length ? acc[acc.length-1] + '.' : '') + name );
-                return acc;
-            },result);
-            return result;
         }
+
+        simplyApp.prototype.get = function(id) {
+            return this.container.querySelector('[data-simply-id='+id+']') || document.getElementById(id);
+        };
+
+        return new simplyApp(options);
     };
 
-    return simply;
-})(this.simply || {});
+    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+        module.exports = app;
+    } else {
+        if (!global.simply) {
+            global.simply = {};
+        }
+        global.simply.app = app;
+    }
+
+})(this);