added simply.keyboard

added simply-edit.js in counter and keyboard example, since simplyview no longer contains databinding
SimplyEdit · Dec 5, 2021 · a4d5185 · a4d5185
1 parent 27a04be
commit a4d5185
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 36 deletions.
diff --git a/dist/simply.everything.js b/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;

diff --git a/docs/index.md b/docs/index.md
diff --git a/examples/counter.html b/examples/counter.html
@@ -16,6 +16,7 @@ <h2>Counter</h2>
 	<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({

diff --git a/js/simply.app.js b/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;

diff --git a/js/simply.keyboard.js b/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);
diff --git a/make b/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 \

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simplyview",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Library to rapidly build UI components, using declarative tools",
   "main": "dist/simply.everything.js",
   "directories": {