simplyview 2.0.1 → 2.0.2

package/dist/simply.everything.js

@@ -1098,6 +1098,51 @@ properties for a given parent, keep seperate index for this?
     }
  
 })(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';
 
@@ -1986,7 +2031,8 @@ properties for a given parent, keep seperate index for this?
                     simply.route.match(global.location.pathname+global.location.hash);
                 });
             }
-            this.container = options.container  || document.body;
+            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;

package/docs/simply.keyboard.md

@@ -0,0 +1,60 @@
+# simply.keyboard
+
+simply.keyboard is a simple library to add keyboard support to your application:
+
+```javascript
+let myKeys = {
+  default: {
+    ArrowDown: (e) => {
+      // handle arrow down
+    }
+  }
+}
+simply.keyboard(myApp, myKeys);
+```
+
+But generally you won't use this directly, but through simply.app:
+
+```javascript
+var myApp = simply.app({
+  keyboard: {
+    default: {
+      ArrowDown: (e) => {
+
+      }
+    }
+  }
+});
+```
+
+You can add multiple keyboard definitions:
+
+```javascript
+var counterApp = simply.app({
+  keyboard: {
+    default: {
+      ArrowDown: (e) => {
+
+      }
+    },
+    alternate: {
+      ArrowDown: (e) => {
+
+      }
+    }
+  }
+});
+```
+
+The default keyboard is 'default', but you can switch the keyboard by setting this attribute:
+
+```html
+<div data-simply-keyboard="alternate">
+  <input type="text" name="example">
+</div>
+```
+
+Whenever a keyboard `keydown` is fired, simply.keyboard will look for the closest parent with a `data-simply-keyboard` attribute. If found, it will use that keyboard definition. If not found, it will use `default`.
+
+The `keydown` event is only handled if the activeElement (the element that has focus) is inside the application container. See `simply.app` for more on that.
+

package/examples/counter.html

@@ -16,6 +16,7 @@
 	<div>Counter is now: <span data-simply-field="counter"></span></div>
 </div>
 
+<script src="//cdn.simplyedit.io/1/simply-edit.js"></script>
 <script src="../dist/simply.everything.js"></script>
 <script>
 	var counterApp = simply.app({

package/examples/keyboard.html

@@ -0,0 +1,41 @@
+<h1>Examples</h1>
+<h2>Keyboard</h2>
+<link rel="stylesheet" href="examples.css">
+
+<div id="myApp">
+    <input type="text" data-simply-field="counter">
+    <button data-simply-command="add1">+</button>
+    <button data-simply-command="sub1">-</button>
+    <div>Counter is now: <span data-simply-field="counter"></span></div>
+</div>
+
+<script src="../dist/simply.everything.js"></script>
+<script src="//cdn.simplyedit.io/1/simply-edit.js"></script>
+<script>
+    var myApp = simply.app({
+        container: document.getElementById('myApp'),
+        keyboard: {
+            default: {
+                ArrowDown: function(e) {
+                    this.view.counter--;
+                    e.preventDefault();
+                },
+                ArrowUp: function(e) {
+                    this.view.counter++;
+                    e.preventDefault();
+                }
+            }
+        },
+        commands: {
+            add1: function(el, value) {
+                this.app.view.counter++;
+            },
+            sub1: function(el, value) {
+                this.app.view.counter--;
+            }
+        },
+        view: {
+            counter: 1
+        }
+    });
+</script>

package/js/simply.app.js

@@ -29,7 +29,8 @@
                     simply.route.match(global.location.pathname+global.location.hash);
                 });
             }
-            this.container = options.container  || document.body;
+            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;

package/js/simply.keyboard.js

@@ -0,0 +1,45 @@
+(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);

package/make

@@ -7,6 +7,7 @@ cat js/simply.observe.js \
     js/simply.activate.js \
     js/simply.collect.js \
     js/simply.command.js \
+    js/simply.keyboard.js \
     js/simply.action.js \
     js/simply.resize.js \
     js/simply.include.js \

package/make~

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplyview",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Library to rapidly build UI components, using declarative tools",
   "main": "dist/simply.everything.js",
   "directories": {

package/package.json~

@@ -1,6 +1,6 @@
 {
   "name": "simplyview",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Library to rapidly build UI components, using declarative tools",
   "main": "dist/simply.everything.js",
   "directories": {

package/js/simply.api.js~

@@ -1,225 +0,0 @@
-(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) );
-        },
-
-        /**
-         * 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]);
-                        }
-                        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;
-                }
-            }
-            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);
-        },
-        graphqlQuery: function(url, operationName, query, options) {
-            options = Object.assign({ paramsFormat: 'json', url: url, responseFormat: 'json' }, options)
-            return function(params) {
-                return simply.api.fetch(
-                    'POST', 
-                    {
-                        operationName: operationName,
-                        query: query,
-                        variables: params || {}
-                    },
-                    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
-                }
-            }
-		},
-		logError: function(error, options) {
-            console.error(error.status, error.message);
-		}
-    }
-
-    var defaultOptions = {
-		path: '',
-		responseFormat: 'json',
-		paramsFormat: 'search',
-		verbs: ['get','post'],
-		handlers: {
-			fetch:  api.fetch,
-			result: api.getResult,
-			error:  api.logError
-		}
-    };
-
-    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);
-                        }
-                    } 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)
-            }
-        }
-    }
-
-
-    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
-        module.exports = api;
-    } else {
-        if (!global.simply) {
-            global.simply = {};
-        }
-        global.simply.api = api;
-    }
-
-})(this);