Use textarea for copyable text and autosize it

src/js/main.js

@@ -316,6 +316,8 @@ $(function() {
       key = '';
     }
     updateKeyVal(key);
+
+    $('textarea.share-text').val("Let's chat on darkwire.io at https://darkwire.io" + roomId + " using the key " + encryptionKey);
   });
 
   // Whenever the server emits 'new message', update the chat body
@@ -532,8 +534,16 @@ $(function() {
     return retVal;
   }
 
-    $('.navbar-collapse ul li a').click(function() {
+  $('.navbar-collapse ul li a').click(function() {
-      $('.navbar-toggle:visible').click();
+    $('.navbar-toggle:visible').click();
-    });
+  });
+
+  autosize($('textarea'));
+
+  $('textarea.share-text').click(function() {
+    $(this).focus();
+    $(this).select();
+    this.setSelectionRange(0, 9999);
+  });
 
 });

src/public/style.css

@@ -34,7 +34,11 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h3 {
-  font-size: 26px;
+  font-size: 24px;
+}
+
+h4 {
+  font-size: 22px;
 }
 
 html, body {
@@ -44,7 +48,7 @@ html, body {
 }
 
 .modal-content {
-  border: 1px solid #666;
+  border: 1px solid #444;
 }
 
 
@@ -208,6 +212,7 @@ html.no-touchevents .chat #input-icons {
 .chat #input-icons #send-message-btn {
   font-size: 25px;
   opacity: 0.3;
+  color: white;
 }
 
 .chat #input-icons #send-message-btn.active {
@@ -259,3 +264,11 @@ html.no-touchevents .chat #input-icons {
 .edit-key {
   display: none;
 }
+
+textarea#share-text {
+  resize: none;
+}
+
+.form-control[readonly] {
+  color: black !important;
+}

src/public/vendor/autosize.min.js

@@ -0,0 +1,6 @@
+/*!
+  Autosize 3.0.14
+  license: MIT
+  http://www.jacklmoore.com/autosize
+*/
+!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var n={exports:{}};t(n.exports,n),e.autosize=n.exports}}(this,function(e,t){"use strict";function n(e){function t(){var t=window.getComputedStyle(e,null);c=t.overflowY,"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),f="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(f)&&(f=0),i()}function n(t){var n=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=n,c=t,u&&(e.style.overflowY=t),o()}function o(){var t=window.pageYOffset,n=document.body.scrollTop,o=e.style.height;e.style.height="auto";var i=e.scrollHeight+f;return 0===e.scrollHeight?void(e.style.height=o):(e.style.height=i+"px",v=e.clientWidth,document.documentElement.scrollTop=t,void(document.body.scrollTop=n))}function i(){var t=e.style.height;o();var i=window.getComputedStyle(e,null);if(i.height!==e.style.height?"visible"!==c&&n("visible"):"hidden"!==c&&n("hidden"),t!==e.style.height){var r=document.createEvent("Event");r.initEvent("autosize:resized",!0,!1),e.dispatchEvent(r)}}var d=void 0===arguments[1]?{}:arguments[1],s=d.setOverflowX,l=void 0===s?!0:s,a=d.setOverflowY,u=void 0===a?!0:a;if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!r.has(e)){var f=null,c=null,v=e.clientWidth,p=function(){e.clientWidth!==v&&i()},h=function(t){window.removeEventListener("resize",p,!1),e.removeEventListener("input",i,!1),e.removeEventListener("keyup",i,!1),e.removeEventListener("autosize:destroy",h,!1),e.removeEventListener("autosize:update",i,!1),r["delete"](e),Object.keys(t).forEach(function(n){e.style[n]=t[n]})}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",h,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",i,!1),window.addEventListener("resize",p,!1),e.addEventListener("input",i,!1),e.addEventListener("autosize:update",i,!1),r.add(e),l&&(e.style.overflowX="hidden",e.style.wordWrap="break-word"),t()}}function o(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:destroy",!0,!1),e.dispatchEvent(t)}}function i(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=document.createEvent("Event");t.initEvent("autosize:update",!0,!1),e.dispatchEvent(t)}}var r="function"==typeof Set?new Set:function(){var e=[];return{has:function(t){return Boolean(e.indexOf(t)>-1)},add:function(t){e.push(t)},"delete":function(t){e.splice(e.indexOf(t),1)}}}(),d=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(d=function(e){return e},d.destroy=function(e){return e},d.update=function(e){return e}):(d=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return n(e,t)}),e},d.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e},d.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e}),t.exports=d});

src/views/index.mustache

@@ -36,9 +36,9 @@
       <!-- Collect the nav links, forms, and other content for toggling -->
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav navbar-right">
-          <li><a href="https://darkwire.io/" target="_blank"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;&nbsp;New Room</a></li>
+          <li><a href="https://darkwire.io/" target="_blank"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;New Room</a></li>
-          <li><a href="javascript:void(0)" id="settings-nav"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>&nbsp;&nbsp;Settings</a></li>
+          <li><a href="javascript:void(0)" id="settings-nav"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span>&nbsp;Settings</a></li>
-          <li><a href="javascript:void(0)" id="about-nav"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;&nbsp;About</a></li>
+          <li><a href="javascript:void(0)" id="about-nav"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;About</a></li>
         </ul>
       </div>
     </div>
@@ -65,7 +65,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h3 class="modal-title">About</h3>
+          <h4 class="modal-title">About</h4>
         </div>
         <div class="modal-body">
           <p>darkwire.io is the simplest way to chat anonymously, and with encryption, online. Chat history is never stored on a server or database, and plain text messages are never transferred over the wire.</p>
@@ -86,13 +86,15 @@
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h3 class="modal-title">Settings</h3>
+          <h4 class="modal-title">Settings</h4>
         </div>
         <div class="modal-body">
-          <h5>Invite People to This Room</h5>
+          <h6>Invite People to This Room</h6>
-          <p id="settings-share-text">Let's chat on darkwire.io at <span class='room-url bold' id='first-room-url'></span>&nbsp;using the key <span class="key bold"></span>&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" type="button" data-clipboard-target="#settings-share-text"><span class="glyphicon glyphicon-copy"></span>&nbsp;&nbsp;Copy</button></p>
+          <p>
+            <textarea class="form-control share-text" rows="3" readonly id="settings-share-text" onclick="this.select()"></textarea>            
+          </p>
           <br>
-          <h5>Edit Your Key</h5>
+          <h6>Edit Your Key</h6>
           <div class="read-key">
             <span class="key" id="read-key"></span>&nbsp;<span class="glyphicon glyphicon-pencil"></span>
           </div>
@@ -118,11 +120,15 @@
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h3 class="modal-title">Welcome to darkwire.io</h3>
+          <h4 class="modal-title">Welcome to darkwire.io</h4>
         </div>
         <div class="modal-body">
-          <p>We've placed you in a new chat room. Invite people to join using the text below.</p>
+          <p>We've placed you in a new chat room.</p>
-          <p id="share-text">Let's chat on darkwire.io at <span class='room-url bold' id='first-room-url'></span>&nbsp;using the key <span class="key bold"></span>&nbsp;&nbsp;<button class="btn btn-primary btn-xs copyable" type="button" data-clipboard-target="#share-text"><span class="glyphicon glyphicon-copy"></span>&nbsp;&nbsp;Copy</button></p>
+          <br>
+          <h6>Invite People to This Room</h6>
+          <p>
+            <textarea class="form-control share-text" rows="3" readonly id="share-text"></textarea>
+          </p>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default encryption-active" data-dismiss="modal">Got It</button>
@@ -135,10 +141,10 @@
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h3 class="modal-title">Welcome to darkwire.io</h3>
+          <h4 class="modal-title">Welcome to darkwire.io</h4>
         </div>
         <div class="modal-body">
-          <h5>Enter Your Key Below</h5>
+          <h6>Enter Your Key Below</h6>
           <input class="form-control key" placeholder="Enter key here" type="text" id='join-key'></input>
         </div>
         <div class="modal-footer">
@@ -153,7 +159,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-          <h3 class="modal-title">Current Participants</h3>
+          <h4 class="modal-title">Current Participants</h4>
         </div>
         <div class="modal-body">
           <ul class="users"></ul>
@@ -176,6 +182,7 @@
   <script type="text/javascript" src="vendor/autolinker.min.js"></script>
   <script type="text/javascript" src="vendor/underscore.min.js"></script>
   <script type="text/javascript" src="vendor/modernizr-custom.min.js"></script>
+  <script type="text/javascript" src="vendor/autosize.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
   <script src="/main.js"></script>
 <script>