simplyview 2.0.3 → 2.1.1

package/docs/simply.command.md

@@ -1,110 +0,0 @@
-# simply.command
-
-simply.command provides a way to tie behaviour (javascript code) to HTML
-elements:
-```html
-<button data-simply-command="doSomething">does something</button>
-```
-
-Commands can be set on any HTML element, but the behaviour differs based on 
-the element type:
-
-- BUTTON, A:
-  Command triggers on click. Value is copied from the data-simply-value attribute.
-- INPUT, TEXTAREA, SELECT:
-  Command triggers on change. Value is copied from the input value.
-- FORM:
-  Command triggers on submit. Value is the set of form values.
-- All others:
-  Command triggers on click. Value is copied from the data-simply-value 
-  attribute. Only runs if no other command handlers match.
-
-If a command is triggered, the default event handler is cancelled. So links 
-aren't followed, forms aren't submitted, etc.
-
-Initialize the commands like this:
-
-```javascript
-var commands = simply.command(myApp, {
-  myCommand: function(el, value) {
-    doSomething(value);
-  }
-});
-```
-
-For basic applications, commands are sufficient. But once your application 
-gets more complex it pays to limit the code in commands to just the parts that 
-tie into the HTML structure of your application. So searching the DOM, 
-getting attribute values, etc. 
-
-Once that is done, you should call an internal function that doesn't know 
-anything about the exact HTML structure. [simply.action](simply.action.md) 
-is purpose build to be used in that way. The Todo example shows how you can use this.
-
-## commands.action
-
-Each command function runs with the commands object returned from 
-simply.command as its scope. The action method is a useful shortcut to app.actions:
-
-```javascript
-var myApp = simply.app({
-  commands: {
-    addTodo: function(form, values) {
-      form.elements.todo.value = '';
-      this.action.call('addTodo', values.todo);
-    }
-  },
-
-  actions: {
-    addTodo: function(todo) {
-      this.app.view.todos.push(todo);
-    }
-  }
-});
-```
-
-The same thing can also be accomplished like this:
-```javascript
-this.app.actions.addTodo(values.todo);
-```
-
-## commands.call
-
-Allows you to call a command directly:
-```javascript
-myApp.commands.call('addTodo', el, value);
-```
-
-## commands.appendHandler
-
-Adds a command handler on top of the existing ones, so it gets matched first.
-
-```javascript
-myApp.commands.appendHandler({
-  match: 'input[type="radio"]',
-
-  check: function(el, evt) {
-    return (evt.type=='change');
-  },
-
-  get: function(el) {
-    return el.dataset.simplyValue || el.value;
-  }
-});
-```
-
-Handler properties:
-
-- match:
-  A CSS selector that checks if an element is handled by this command handler.
-- check:
-  A function that checks if the command should be run in this event.
-- get:
-  A function that returns the value for this command.
-
-## commands.prependHandler
-
-Adds a command handler, just like appendHandler. But it adds it first in the 
-list, so it will be matched last. This way you can add handlers with a more 
-generic CSS selector and append more specific handlers.
-

package/docs/simply.include.md

@@ -1,61 +0,0 @@
-# simply.include
-
-simply.include is a component that allows you to include external HTML - with 
-CSS and javascript - in the current HTML document. You will need to make sure 
-you don't overwrite global variables, the javascript and css get applied to 
-the whole document.
-
-This component makes it easy to create microfrontends for microservices, 
-without forcing you to use a specific framework or technology.
-
-Start by including the simply.include script, or simply.everything.js:
-
-```html
-<script src="js/simply.everything.js"></script>
-```
-
-Then add a simply-include link at the exact spot where you want to include a 
-widget or application or just a piece of HTML:
-
-```html
-<link rel="simply-include" href="/simplyview/widgets/my-widget/index.html"></link>
-```
-
-Your widget may contain any HTML, CSS and javascript you like, except it 
-shouldn't contain a HEAD. So a widget might look like this:
-
-```html
-<script src="/simplyview/js/simply.everything.js"></script>
-<link rel="simply-include-once" href="/simplyview/common/head.html">
-<link rel="simply-include-once" href="/simplyview/common/menu.html">
-<link rel="stylesheet" href="/simplyview/widgets/my-widget/style.css">
-<div class="my-widget">
-  ....
-</div>
-```
-
-The widget includes some common HTML, but only if it wasn't included before. 
-Assuming your pages all include the common head and menu, the widget will skip 
-this if the widget is included in a page. However you can also call the widget 
-as a normal page. In that case the common head and menu will be included and 
-the widget will decorate itself with the default styling and menu.
-
-simply.include will automatically detect `<link rel="simply-include(-once)">` 
-links in the DOM, no matter when and how they appear, and replace them with 
-the HTML fetched from the linked href.
-
-## Security
-
-simply.include is meant to include HTML with CSS and javascript into an 
-existing document. So you must take care that whatever you include is what you 
-meant to include. If you allow user input, you must make sure that it doesn't 
-have `<link rel="simply-include(-once)">` tags. Or that if they do, they won't 
-get executed.
-
-As a baseline, always clean user input of any offending tags, or even better: 
-clean it of all HTML. If that can't be done, make sure you use a whitelist of 
-acceptable tags. 
-
-Finally as a catchall, use Content-Security-Policy headers to only allow script 
-execution of whitelisted URL's. Don't allow inline scripts or you will still 
-be open to Cross Site Scripting attacks (XSS).

package/docs/simply.keyboard.md

@@ -1,60 +0,0 @@
-# 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/docs/simply.path.md

@@ -1,3 +0,0 @@
-# simply.path
-
-TODO

package/docs/simply.route.md

@@ -1,133 +0,0 @@
-# simply.route
-
-simply.route is a simple url routing component. It will listen to URL changes 
-and match them against the routes you provide. If a match is found, it will 
-call the matching function and update the address bar without reloading.
-
-simply.route will run the first matching route handler it finds, in the order 
-in  which they were registered.
-
-Each route is a function with a single argument: `params`. Each variable you 
-define in the route, like `:section`, is translated into a property of the
-params object, e.g. `params.section`. If you add a `:*` at the end of the route
-it will be translated to `params.remainder`.
-
-simply.route also supports events that trigger either before route matching,
-before route calling or after a route is called. 
-
-If you need more complex behaviour, you should replace simply.route with a
-different library. simply.route is explicitly meant to be a simple library
-that is sufficient for 90% of javascript applications.
-
-## simply.route.load
-
-```javascript
-simply.route.load({
-
-  '/:section/:*': function(params) {
-    loadSection(params.section, params.remainder);
-  },
-
-  '/': function() {
-    loadHome();
-  }
-});
-```
-
-## simply.route.match
-
-```javascript
-simply.route.match(path);
-```
-
-This allows you to trigger a route. You can also provide extra parameters 
-for the route handler:
-
-```javascript
-simply.route.match(path, { foo: 'bar' });
-```
-
-## simply.route.goto
-
-Updates the browsers address bar and matches the path.
-
-```javascript
-simply.route.goto(path);
-```
-
-## simply.route.has
-
-Returns true if the route is registered.
-
-```javascript
-if (simply.route.has(path)) { ... }
-```
-
-## simply.route.init
-
-Allows you to set the root pathname for routing. The root pathname is prepended
-on every route you define. So if your application lives in the '/hnpwa/' 
-directory in the document root of you website, init simply.route like this:
-
-```javascript
-simply.route.init({
-	root: '/hnpwa/'
-});
-````
-
-## simply.route.addListener
-
-In the normal route handling, once a matching route is found, simply.route calls
-it and stops. But sometimes you may want to trigger some code for multiple routes.
-With route listeners you can do just that. You can setup a function that will be
-called either before a route is found (`match`), before it is called (`call`) or after
-it is called (`finish`).
-
-In each of these steps you may change the default behaviour of simply.route by altering
-parameters passed to your listener function and returning them.
-
-### match
-
-This allows you to add complex behaviour to the route matching step, so you can for
-example match multiple different URL's to a single route. The single parameter is the 
-path to match on:
-
-```
-	simply.route.addListener('match', '/protected/', function(params) {
-		// assume user is a variable in scope
-		if (!user || !user.isLoggedIn ) {
-			return {
-				path: '/login/'
-			};
-		}
-	});
-```
-
-### call 
-
-This allows you to change parameters before the actual route function is called.
-
-```
-	simply.route.addListener('call', '/foo/', function(params) {
-		params.foo = 'bar';
-		return params;
-	});
-```
-
-### finish
-
-This allows you to do stuff after a route is called. You can also change the result
-of the route, though that is usually not a good idea.
-
-## simply.route.removeListener
-
-This allows you to remove a route listener. You need to exactly match the fase of the
-listener (`match`, `call` or `finish`), the route and the function:
-
-```javascript
-	simply.route.removeListener('call', '/foo/', fooListener);
-```
-
-## simply.route.clear
-
-Removes all routes and listeners globally.

package/docs/simply.view.md

@@ -1,53 +0,0 @@
-# simply.view
-
-simply.view provides a simple interface to use the databinding from
-[SimplyEdit](https://simplyedit.io/) in a web application:
-
-```javascript
-var myView = {
-  foo: 'bar'
-};
-
-simply.view(myApp, myView);
-```
-
-But generally you won't use this directly, but through simply.app:
-
-```javascript
-var counterApp = simply.app({
-  view: {
-    counter: 1
-  }
-});
-```
-
-Any data-simply-field you define in your apps HTML is automatically bound to the corresponding entry in the view.
-
-## Example
-
-A simple example - an app that can count up and down:
-
-```html
-<div id="counter">
-  <input type="text" data-simply-field="counter">
-  <button data-simply-command="add1">+</button>
-  <button data-simply-command="sub1">-</button>
-</div>
-```
-
-```javascript
-var counterApp = simply.app({
-
-  container: document.getElementById('counter'),
-
-  commands: {
-    add1: function() { this.app.view.counter++; },
-    sub1: function() { this.app.view.counter--; }
-  },
-
-  view: {
-    counter: 0
-  }
-
-};
-```

package/docs/simply.viewmodel.md

@@ -1,3 +0,0 @@
-# simply.viewmodel.md
-
-TODO

package/examples/commands.html

@@ -1,70 +0,0 @@
-
-<!doctype html>
-<body>
-
-	<label>testSubmit:</label>
-	<form data-simply-command="testSubmit">
-		<div>
-			<label>
-				testChange:
-				<input type="text" name="a" data-simply-command="testChange">
-			</label>
-		</div>
-		<div>
-			<label>
-				testChange:
-				<select name="b" data-simply-command="testChange">
-					<option>foo</option>
-					<option>bar</option>
-				</select>
-			</label>
-		</div>
-		<div>
-			<label>
-				testChange:
-				<textarea name="c" data-simply-command="testChange"></textarea>
-			</label>
-		</div>
-		<div>
-			<label>
-				testInput:
-				<input type="text" name="d" data-simply-command="testInput" data-simply-immediate="true">
-			</label>
-		</div>
-		<button type="submit">Submit</button>
-	</form>
-	<div><a href="foo" data-simply-command="testClick">testClick A</a></div>
-	<div><button data-simply-command="testClick" data-simply-value="bar">testClick Button</button></div>
-
-	<pre data-simply-field="out"></pre>
-
-	<script src="../dist/simply.everything.js"></script>
-
-	<script>
-		var test = simply.app({
-			view: {
-				out: 'start'
-			}
-		});
-		
-		test.commands.testChange = function(el, value) {
-			test.view.out = el.name+': '+value;
-		};
-
-		test.commands.testSubmit = function(form, values) {
-			var out = [];
-			for (var key of Object.keys(values)) {
-				out.push(key+': '+values[key]);
-			}
-			test.view.out = out.join('\n');
-		}
-
-		test.commands.testInput = function(el, value) {
-			test.view.out = el.name + ': '+value;
-		}
-
-		test.commands.testClick = function(el, value) {
-			test.view.out = el.tagName + ': '+value;
-		}
-	</script>
-</body>

package/examples/counter.html

@@ -1,52 +0,0 @@
-<h1>Examples</h1>
-<h2>Counter</h2>
-<link rel="stylesheet" href="examples.css">
-
-<div id="counterApp">
-	<input type="text" data-simply-field="counter">
-	<button data-simply-command="add1">+</button>
-	<button data-simply-command="sub1">-</button>
-	<div>Counter is now: <span data-simply-field="counter"></span></div>
-</div>
-
-<div id="counterApp2">
-	<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="//cdn.simplyedit.io/1/simply-edit.js"></script>
-<script src="../dist/simply.everything.js"></script>
-<script>
-	var counterApp = simply.app({
-		container: document.getElementById('counterApp'),
-		commands: {
-			add1: function() {
-				counterApp.view.counter++;
-			},
-			sub1: function() {
-				counterApp.view.counter--;
-			}
-		},
-		view: {
-			counter: 1
-		}
-	});
-
-	var counterApp2 = simply.app({
-		container: document.getElementById('counterApp2'),
-		commands: {
-			add1: function() {
-				counterApp2.view.counter++;
-			},
-			sub1: function() {
-				counterApp2.view.counter--;
-			}
-		},
-		view: {
-			counter: 2
-		}
-	});
-
-</script>

package/examples/examples.css

@@ -1,3 +0,0 @@
-html, body {
-	font-family: arial, helvetica, sans-serif;
-}

package/examples/github.html

@@ -1,39 +0,0 @@
-<!doctype html>
-<meta charset="utf-8">
-<pre id="output"></pre>
-<script src="../dist/simply.everything.js"></script>
-<script src="../js/simply.api.js"></script>
-<script>
-    var githubApi = simply.api.proxy({
-        baseURL: 'https://api.github.com',
-        headers: {
-            'Accept': 'application/vnd.github.v3+json',
-            'User-Agent': 'poef'
-        },
-        handlers: {
-        	fetch: function(verb, params, options) {
-            	console.log(verb, params, options);
-            	return simply.api.fetch(verb, params, options)
-            	.then(function(response) {
-            		console.log(response,[...response.headers.entries()].map((h) => h[0]+': '+h[1]));
-            		return response;
-            	});
-            },
-            result: function(result, options) {
-            	return simply.api.getResult(result, options)
-            	.then(function(result) {
-            		console.log(result);
-            		return result;
-            	});
-            }
-        }
-    });
-    
-    githubApi.users.poef().then(function(user) {
-        document.getElementById('output').innerText = JSON.stringify(user,
-        null, 4);
-    });
-    
-    githubApi.test = 'test';
-    console.log(githubApi.test);
-</script>

package/examples/include/fifth.js

@@ -1 +0,0 @@
-console.log('fifth');

package/examples/include/first.js

@@ -1 +0,0 @@
-console.log('first');

package/examples/include/include.html

@@ -1,4 +0,0 @@
-<h1>Basic includes work</h1>
-<textarea class="autosize" data-simply-activate="autosize">include</textarea>
-<link rel="simply-include-once" href="include2.html">
-<link rel="simply-include-once" href="include2.html">

package/examples/include/include2.html

@@ -1 +0,0 @@
-<h2>Sub includes work as well</h2>

package/examples/include/index.html

@@ -1,18 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<script src="../../dist/simply.everything.js"></script>
-</head>
-<body>
-	<link rel="simply-include" href="include.html">
-	<textarea class="autosize" data-simply-activate="autosize">index</textarea>
-	<link rel="simply-include" href="scripts.html">
-	<p>Done.</p>
-	<script>
-		simply.activate.addListener('autosize', function() {
-			this.value="activated";
-			console.log('activate', this)
-		});
-	</script>
-</body>
-</html>

package/examples/include/scripts.html

@@ -1,16 +0,0 @@
-<script src="first.js"></script>
-<script>
-	console.log('second');
-</script>
-<script src="third.js"></script>
-<script>
-	console.log('after third');
-</script>
-<script>
-	console.log('fourth');
-</script>
-<script src="fifth.js"></script>
-<script src="//cdn.simplyedit.io/1/simply-edit.js"></script>
-<script>
-	console.log(editor);
-</script>

package/examples/include/third.js

@@ -1,3 +0,0 @@
-for (var i=0; i<100000000; i++) {
-}
-console.log('third');