Display the toolbar on touchscreens

valpackett · valpackett · commit 8b847312d4e1 · 2017-05-17T01:44:16.000+03:00
Use touch events to detect selection as well as mouse events.
Always display the toolbar at the bottom because the browser's built-in
toolbar appears at the top most of the time.
diff --git a/index.html b/index.html
@@ -2,12 +2,13 @@
 <html lang="en-US">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Pen - What You See Is What You Get (WYSIWYG)</title>
-  <style type="text/css">
+  <style>
   *{padding:0;margin:0;}
   html{border-top:10px #1abf89 solid;}
-  body{width:800px;margin:0 auto;padding:5% 20px 20px;font-family:Palatino, Optima, Georgia, serif;}
-  @media all and (max-width:1024px){ body, pre a{width:60%;} }
+  body{max-width:800px;margin:0 auto;padding:5% 20px 20px;font-family:Palatino, Optima, Georgia, serif;}
+  @media all and (max-width:1024px){ body, pre a{max-width:60%;} }
   small{color:#999;}
   pre{white-space:pre-wrap;}
 
diff --git a/src/pen.js b/src/pen.js
@@ -207,14 +207,29 @@
       addListener(ctx, editor, 'mousedown', function() {
         selecting = true;
       });
+      addListener(ctx, editor, 'touchstart', function() {
+        selecting = true;
+      });
       addListener(ctx, editor, 'mouseleave', function() {
         if (selecting) updateStatus(800);
         selecting = false;
       });
+      addListener(ctx, editor, 'touchleave', function() {
+        if (selecting) updateStatus(800);
+        selecting = false;
+      });
       addListener(ctx, editor, 'mouseup', function() {
         if (selecting) updateStatus(100);
         selecting = false;
       });
+      addListener(ctx, editor, 'touchend', function() {
+        if (selecting) updateStatus(100);
+        selecting = false;
+      });
+      addListener(ctx, editor, 'touchcancel', function() {
+        if (selecting) updateStatus(100);
+        selecting = false;
+      });
       // Hide menu when focusing outside of editor
       outsideClick = function(e) {
         if (ctx._menu && !containsNode(editor, e.target) && !containsNode(ctx._menu, e.target)) {
@@ -725,7 +740,7 @@
       if (!this._inputBar || !this._inputActive) return this;
     }
     var offset = this._range.getBoundingClientRect()
-      , menuPadding = 10
+      , menuPadding = 'ontouchstart' in window ? 20 : 10
       , top = offset.top - menuPadding
       , left = offset.left + (offset.width / 2)
       , menu = this._menu
@@ -760,7 +775,7 @@
     } else {
       stylesheet.insertRule('.pen-menu:after {left: 50%; }', 0);
     }
-    if (menuOffset.y < 0) {
+    if (menuOffset.y < 0 || 'ontouchstart' in window) {
       menu.classList.add('pen-menu-below');
       menuOffset.y = offset.top + offset.height + menuPadding;
     } else {
