Rudimentary support for text selection.

gameplaycolor · May 20, 2015 · 2fb0039 · 2fb0039
1 parent 26b60ff
commit 2fb0039
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 13 deletions.
diff --git a/src/css/gameboy.css b/src/css/gameboy.css
@@ -26,6 +26,7 @@ body
   user-select: none;
   background-color: #000;
   font: 15px Helvetica, sans-serif;
+  cursor: default;
 }
 
 #display
@@ -486,6 +487,12 @@ body
   cursor: pointer;
   display: block;
   margin: 4px;
+
+  /* TODO: Check this */
+  display: inline-block;
+  min-width: 100px;
+  text-align: center;
+  margin: 8px 0;
 }
 
 .button-thanks
@@ -565,7 +572,7 @@ body
 {
   color: #d9d9d9;
   text-align: center;
-  padding: 80px 40px;
+  padding: 40px 40px;
   margin: auto;
 }
 
@@ -574,6 +581,36 @@ body
   background-color: #222;
 }
 
+.instructions
+{
+  text-align: left;
+  font-size: 0.8em;
+  counter-reset: numList;
+  list-style: none;
+  position: relative;
+}
+
+.instructions li:before {
+  counter-increment: numList;
+  content: counter(numList);
+  float: left;
+  position: absolute;
+  left: 0;
+  font: bold 16px sans-serif;
+  text-align: center;
+  color: #000;
+  line-height: 24px;
+  width: 24px;
+  height: 24px;
+  background-color: #fff;
+  border-radius: 999px
+}
+
+.instructions li
+{
+  padding: 4px 0;
+}
+
 .body-grey
 {
   background-color: #222;
@@ -1049,15 +1086,45 @@ body
 .input-code
 {
   width: 80%;
-  font-size: 40px;
-  border: 4px solid #666;
-  background-color: #333;
+  font-size: 30px;
+  border: 3px solid #fff;
+  background-color: #999;
   border-radius: 6px;
-  margin: 8px;
+  margin: 8px 0;
   color: #fff;
   padding: 8px;
 }
 
+.input-code:focus
+{
+  outline: none;
+  border: 3px solid red;
+}
+
+.auth-code
+{
+  font-size: 20px;
+  background-color: #666;
+  margin: 8px 0;
+  color: #fff;
+  padding: 8px;
+  border-radius: 6px;
+  font-family: Courier, fixed;
+  text-align: center;
+  word-wrap: break-word;
+  cursor: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+  -moz-user-select: text;
+  user-select: text;
+  border: 0;
+}
+
+.auth-code:focus
+{
+  outline: none;
+}
+
 /* iPhone 4: Portrait */
 @media only screen and (width: 320px) and (height: 460px) {
 

diff --git a/src/index.html b/src/index.html
@@ -127,19 +127,20 @@ <h1>Game Play Color</h1>
 
     <div id="screen-account" class="screen-instructions" style="display: none">
       <div class="placeholder">
-        <div class="appicon"></div><br />
-        <a class="simple-button" id="google-drive-auth" href="" target="_blank">Sign In</a>
-        <hr />
-        <input id="redeem-code" class="input-code" type="text" />
-        <div class="simple-button" id="button-redeem">Redeem</div>
+        <div class="appicon"></div>
+        <ol class="instructions">
+          <li>Sign in to Google Drive<br /><a class="simple-button" id="google-drive-auth" href="" target="_blank">Sign In</a></li>
+          <li>Enter the code you receive.<br /><input id="redeem-code" class="input-code" type="text" /></li>
+          <li>Click to continue.<br /><div class="simple-button" id="button-redeem">Continue</div></li>
+        </ol>
       </div>
     </div>
 
     <div id="screen-authorizing" class="screen-instructions" style="display: none">
       <div class="placeholder">
         <div class="appicon"></div>
-        <p>Copy and paste code into <strong>Game Play Color</strong> then click <strong>Redeem</strong>.</p>
-        <input id="authorization-code" class="input-code" type="text" />
+        <p>Copy and paste the code into <strong>Game Play Color</strong> then click <strong>Continue</strong>.</p>
+        <textarea readonly="yes" rows="6" id="authorization-code" class="auth-code" type="text" onFocus="this.selectionStart=0; this.selectionEnd=this.value.length;" onTouchEnd="this.selectionStart=0; this.selectionEnd=this.value.length;" onMouseUp="return false" />
         <p id="message-success" style="display: none">Success :)</p>
         <p id="message-failure" style="display: none">Failure =(</p>
       </div>

diff --git a/src/js/app.js b/src/js/app.js
@@ -18,6 +18,21 @@
 
 (function($) {
 
+  jQuery.fn.selectText = function() {
+    var element = this[0], range, selection;
+    if (document.body.createTextRange) {
+        range = document.body.createTextRange();
+        range.moveToElementText(element);
+        range.select();
+    } else if (window.getSelection) {
+        selection = window.getSelection();
+        range = document.createRange();
+        range.selectNodeContents(element);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+  };
+
   App = {};
 
   App.Controller = function(device) {
@@ -92,7 +107,7 @@
         }, 10);
       }});
 
-      self.redeem = new App.Controls.Button('#button-redeem', { touchUp: function() {
+      self.redeem = new App.Controls.Button('#button-redeem', { touchUpInside: function() {
         $("#redeem-code").blur();
         var code = $("#redeem-code").val();
         drive.redeemToken(code).then(function() {
@@ -244,8 +259,19 @@
 
         console.log("Received authentication token: " + code);
         $("#screen-authorizing").show();
+        // $("#authorization-code").html(code);
         $("#authorization-code").val(code);
 
+        // var handler = function(e) {
+        //   var element = document.getElementById("authorization-code");
+        //   element.selectionStart = 0;
+        //   element.selectionEnd = 10;
+        //   e.preventDefault();
+        // };
+
+        // document.getElementById('authorization-code').addEventListener('touchstart', handler);
+        // document.getElementById('authorization-code').addEventListener('click', handler);
+
       } else {
 
         $("#screen-instructions").show();