added copy2clipboard button by default to every text input

Author: evilsocket

arc/js/app.js

@@ -25,6 +25,59 @@ function editEntryFor(id) {
     $('#editable_' + id ).click();
 }
 
+// taken from https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript/30810322
+function copyTextToClipboard(text) {
+  var textArea = document.createElement("textarea");
+  var range = document.createRange();
+    
+    
+  textArea.style.position = 'fixed';
+  textArea.style.top = 0;
+  textArea.style.left = 0;
+
+  // Ensure it has a small width and height. Setting to 1px / 1em
+  // doesn't work as this gives a negative w/h on some browsers.
+  textArea.style.width = '2em';
+  textArea.style.height = '2em';
+
+  // We don't need padding, reducing the size if it does flash render.
+  textArea.style.padding = 0;
+
+  // Clean up any borders.
+  textArea.style.border = 'none';
+  textArea.style.outline = 'none';
+  textArea.style.boxShadow = 'none';
+
+  // Avoid flash of white box if rendered for any reason.
+  textArea.style.background = 'transparent';
+
+  textArea.value = text;
+
+  textArea.readOnly = false;
+  textArea.contentEditable = true;
+
+  document.body.appendChild(textArea);
+
+  textArea.select();
+
+  range.selectNodeContents(textArea);
+  var s = window.getSelection();
+  s.removeAllRanges();
+  s.addRange(range);
+
+  textArea.setSelectionRange(0, 999999);
+
+  try {
+    var successful = document.execCommand('copy');
+    var msg = successful ? 'successful' : 'unsuccessful';
+    console.log('Copying text command was ' + msg);
+  } catch (err) {
+    console.log('Oops, unable to copy');
+  }
+
+  document.body.removeChild(textArea);
+}
+
 function downloadFor(id) {
     var name = $('#editable_' +  id).text();
     var file = FilesGet(id);

arc/js/entries/base.js

@@ -60,16 +60,27 @@ Entry.prototype.formGroup = function(input) {
             '</div>';
 }
 
+Entry.prototype.btn = function(name, icon) {
+    return '<button id="btn_entry_' + name + '_' + this.id + '" type="button" class="btn btn-default">' +
+             '<span class="fa fa-' + icon + '"></span>' + 
+           '</button>';
+}
+
 Entry.prototype.input = function(type, with_value) {
-    return '<input ' + 
+    return '<div class="input-group mif">' +
+            '<input ' + 
              'class="form-control" ' +
              'data-entry-type="' + this.type + '" ' +
              'type="' + type + '" ' + 
              'name="' + this.id + '" ' + 
              'id="' + this.id + '" ' +
              'value="' + ( with_value ? this.safeValue() : '' ) + '"' +
              ( type == 'file' ? 'multiple' : '' ) +
-             '/>';
+             '/>' +
+             '<span class="input-group-btn">' +
+                this.btn( 'copy', 'clipboard' ) +
+             '</span>' +
+            '</div>';
 }
 
 Entry.prototype.textarea = function(with_md, with_value) {
@@ -110,4 +121,18 @@ Entry.prototype.Render = function(with_value){
     return "Unhandled entry type " + this.type;
 }
 
-Entry.prototype.OnRendered = function() { }
+Entry.prototype.OnRendered = function() { 
+    var elem_id = this.id;
+    var $btn_entry_copy = $('#btn_entry_copy_' + elem_id);
+    $btn_entry_copy.click(function() {
+        var prev = $btn_entry_copy.html();
+        var value = $('#' + elem_id).val();
+
+        copyTextToClipboard(value);
+
+        $btn_entry_copy.html("<small>Copied!</small>");
+        setTimeout(function(){
+            $btn_entry_copy.html(prev);
+        }, 1000);
+    });
+}

arc/js/entries/password.js

@@ -28,59 +28,6 @@ function generatePassword( length, charset ) {
     return pass;
 }
 
-// taken from https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript/30810322
-function copyTextToClipboard(text) {
-  var textArea = document.createElement("textarea");
-  var range = document.createRange();
-    
-    
-  textArea.style.position = 'fixed';
-  textArea.style.top = 0;
-  textArea.style.left = 0;
-
-  // Ensure it has a small width and height. Setting to 1px / 1em
-  // doesn't work as this gives a negative w/h on some browsers.
-  textArea.style.width = '2em';
-  textArea.style.height = '2em';
-
-  // We don't need padding, reducing the size if it does flash render.
-  textArea.style.padding = 0;
-
-  // Clean up any borders.
-  textArea.style.border = 'none';
-  textArea.style.outline = 'none';
-  textArea.style.boxShadow = 'none';
-
-  // Avoid flash of white box if rendered for any reason.
-  textArea.style.background = 'transparent';
-
-  textArea.value = text;
-
-  textArea.readOnly = false;
-  textArea.contentEditable = true;
-
-  document.body.appendChild(textArea);
-
-  textArea.select();
-
-  range.selectNodeContents(textArea);
-  var s = window.getSelection();
-  s.removeAllRanges();
-  s.addRange(range);
-
-  textArea.setSelectionRange(0, 999999);
-
-  try {
-    var successful = document.execCommand('copy');
-    var msg = successful ? 'successful' : 'unsuccessful';
-    console.log('Copying text command was ' + msg);
-  } catch (err) {
-    console.log('Oops, unable to copy');
-  }
-
-  document.body.removeChild(textArea);
-}
-
 function PasswordEntry(name, value) {
     Entry.call( this, ENTRY_TYPE_PASSWORD, name, value );
 }