From 8b847312d4e1042b3d9e6f880e514a7ccccdf4c9 Mon Sep 17 00:00:00 2001
From: Greg V <greg@unrelenting.technology>
Date: Wed, 17 May 2017 01:11:59 +0300
Subject: [PATCH] Display the toolbar on touchscreens

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.
---
 index.html |  7 ++++---
 src/pen.js | 19 +++++++++++++++++--
 2 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index 5a061c0..6235c9d 100644
--- 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
index 3dbdd76..5c42288 100755
--- 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 {
