From 4d03d98d04c36269badef4b233ddfa7bb36ba45e Mon Sep 17 00:00:00 2001
From: Robert Sesek <rsesek@bluestatic.org>
Date: Sun, 23 Feb 2014 22:17:03 -0500
Subject: [PATCH] Make the hashed password field a div, since it works better
 on mobile.

---
 core.css  |  5 +++--
 core.html |  2 +-
 core.js   | 40 +++++++++++++++++++++++++++++-----------
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/core.css b/core.css
index cbef20f..8846a37 100644
--- a/core.css
+++ b/core.css
@@ -38,7 +38,8 @@ li label {
   font-weight: bold;
 }
 
-li input {
+li input, li .input {
+  display: inline-block;
   padding: .3em;
   width: 22em;
   font-size: 1em;
@@ -91,7 +92,7 @@ hr {
     margin-bottom: 1.4em;
   }
 
-  li input {
+  li input, li .input {
     display: block;
     width: 100%;
     box-sizing: border-box;
diff --git a/core.html b/core.html
index 7b8bf69..36b4a58 100644
--- a/core.html
+++ b/core.html
@@ -30,7 +30,7 @@
 
         <li>
           <label for="password">Computed Password</label>
-          <input type="text" id="password" readonly />
+          <div class="input" id="password">&nbsp;</div>
         </li>
 
         <li>
diff --git a/core.js b/core.js
index 747968e..3986dae 100644
--- a/core.js
+++ b/core.js
@@ -69,15 +69,13 @@ SkeletonKey.prototype._init = function() {
   this._sitekey.onkeyup = this._nextFieldInterceptor.bind(this);
   this._username.onkeyup = this._nextFieldInterceptor.bind(this);
 
-  this._password.onmousedown = this._selectPassword.bind(this);
-  this._password.labels[0].onmousedown = this._selectPassword.bind(this);
-
-  function eatEvent(e) {
-    e.stopPropagation();
-    e.preventDefault();
+  if (!this._isTouchDevice()) {
+    this._password.onmousedown = this._selectPassword.bind(this);
+    this._password.onmouseup = function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    };
   }
-  this._password.onmouseup = eatEvent;
-  this._password.labels[0].onmouseup = eatEvent;
 
   if (this._isChromeExtension()) {
     this._initChromeExtension();
@@ -107,7 +105,7 @@ SkeletonKey.prototype._onGenerate = function(e) {
   if (hexString.length > maxLength)
     hexString = hexString.substr(0, maxLength);
 
-  this._password.value = hexString;
+  this._password.innerText = hexString;
   this._selectPassword();
 };
 
@@ -181,8 +179,19 @@ SkeletonKey.prototype._nextFieldInterceptor = function(e) {
  * @private
  */
 SkeletonKey.prototype._selectPassword = function() {
-  this._password.focus();
-  this._password.select();
+  this._generateButton.blur();
+
+  // Touch devices do not bring up the edit controls (for copy) for
+  // pre-selected text.
+  if (this._isTouchDevice())
+    return;
+
+  var range = document.createRange();
+  range.selectNode(this._password.firstChild);  // Select #text node.
+
+  var selection = window.getSelection();
+  selection.removeAllRanges();
+  selection.addRange(range);
 };
 
 /**
@@ -236,3 +245,12 @@ SkeletonKey.prototype._initChromeExtension = function() {
 SkeletonKey.prototype._isChromeExtension = function() {
   return typeof chrome !== 'undefined' && typeof chrome.tabs !== 'undefined';
 };
+
+/**
+ * Checks if SkeletonKey is running on a touch device.
+ * @returns {bool}
+ * @private
+ */
+SkeletonKey.prototype._isTouchDevice = function() {
+  return typeof document.createTouch === 'function';
+}
-- 
2.43.5