simplyview 2.0.2 → 2.1.0

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/githubv4.html

@@ -1,107 +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>
-<h1>Github repo browser</h1>
-<form data-simply-command="showRepo">
-	<label>Owner
-		<input type="text" name="owner">
-	</label>
-	<label>Repository
-		<input type="text" name="repo">
-	</label>
-	<label>Application token
-		<input type="text" name="token">
-	</label>
-	<button type="submit">OK</button>
-</form>
-<main>
-	<h2 data-simply-field="repo.name"></h2>
-	<div data-simply-field="repo.description"></div>
-	<ul data-simply-list="repo.files.entries">
-		<template>
-			<li><span data-simply-field="name"></span></li>
-		</template>
-	</ul>
-</main>
-<script>
-	simply.bind = false;
-	document.addEventListener('simply-content-loaded', function() {
-	 	editor.pageData.repo = {
-			name: "foo",
-			files: {
-				entries: [
-					{
-						name: 'barf'
-					}
-				]
-			}
-		};
-		return;
-	});
-
-
-    var githubURL = 'https://api.github.com/graphql';
-    var githubToken = 'af948d67c63a2f9f940e0b0be7a2d5ff3446327f';
-    var github = {
-        repository: simply.api.graphqlQuery(
-        	githubURL, 
-        	`query($owner:String!, $repo:String!) {
-			 	repository(name:$repo, owner:$owner) {
-			 		id
-			 		name
-			 		description
-			 		files: object(expression: "master:") {
-			 			... on Tree {
-			 				entries {
-			 					oid
-			 					name
-			 					type
-			 				}
-			 			}
-
-			 		}
-			 	}   
-			}`, 
-			{
-			    headers: { Authorization: 'bearer '+githubToken },
-			    responseResult: 'data.repository',
-			    responseErrors: 'errors'
-			}
-		)
-    };
-/*	
-    github.repository({
-        login: 'poef',
-        repo: 'arc-web'
-    }).then(function(data) {
-        document.getElementById('output').innerText = JSON.stringify(data,
-        null, 4);
-    });
-
-    async function foo() {
-	    var foo = await github.repository({ login: 'poef', repo: 'arc-web'});
-	    console.log(foo);
-	};
-	foo();
-*/
-	var githubBrowser = simply.app({
-		commands: {
-			'showRepo': function(form, values) {
-				if (values.token) {
-					githubToken = values.token;
-				}
-				github.repository({
-					owner: values.owner,
-					repo: values.repo
-				})
-				.then(function(data) {
-					githubBrowser.view.repo = data.data.repository;
-				});
-			}
-		}
-	})
-
-</script>
-<script src="//cdn.simplyedit.io/1/simply-edit.js"></script>

package/examples/graphql.html

@@ -1,51 +0,0 @@
-<!doctype html>
-<ul data-simply-list="vakleergebieden">
-<template>
-  <li><span data-simply-field="title"></span></li>
-</template>
-</ul>
-<script src="//cdn.simplyedit.io/1/simply-edit.js" data-storage="none"></script>
-<script src="../dist/simply.everything.js"></script>
-<script>
-    var baseURL = '//localhost:3000/';
-    
-    var app = simply.app({
-        routes: {
-            '/:*': function() {
-                api.Vakleergebied().then(result => {
-                    app.view.vakleergebieden = result.data.allVakleergebied;
-                });
-            }
-        },
-        view: {
-            vakleergebieden: []
-        }
-    });
-    
-    var api = simply.api.proxy({
-        baseURL: baseURL
-    });
-
-    api.Vakleergebied = simply.api.graphqlQuery(baseURL,
-	'Vakleergebied',
-`fragment NiveauShort on Niveau {
-    id
-    title
-    prefix
-}
-query Vakleergebied($page:Int,$perPage:Int) {
-  allVakleergebied(page:$page,perPage:$perPage,sortField:"title") {
-    id
-    prefix
-    title
-    prefix
-    Niveau {
-      ...NiveauShort
-    }
-  }
-  _allVakleergebiedMeta {
-    count
-  }
-}`);
-
-</script>

package/examples/graphql.html~

@@ -1,35 +0,0 @@
-<!doctype html>
-<script src="//cdn.simplyedit.io/1/simply-edit.js" data-storage="none"></script>
-<script src="../dist/simply.everything.js"></script>
-<script>
-        var baseURL = '//localhost:3000/';
-        
-	var api = simply.api.proxy({
-		baseURL: baseURL
-	});
-
-	api.Vakleergebied = simply.api.graphqlQuery(baseURL,
-	'Vakleergebied',
-`fragment NiveauShort on Niveau {
-    id
-    title
-    prefix
-}
-query Vakleergebied($page:Int,$perPage:Int) {
-  allVakleergebied(page:$page,perPage:$perPage,sortField:"title") {
-    id
-    prefix
-    title
-    prefix
-    Niveau {
-      ...NiveauShort
-    }
-  }
-  _allVakleergebiedMeta {
-    count
-  }
-}`);
-
-	api.Vakleergebied()
-	.then(result => console.log(result));
-</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');

package/examples/keyboard.html

@@ -1,41 +0,0 @@
-<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>