removed old clippy flash extension and replaced it with pure JS solution

assets/script.js

@@ -1,4 +1,4 @@
-// Generated by CoffeeScript 1.9.3
+// Generated by CoffeeScript 1.10.0
 (function() {
   var CloudKeys;
 
@@ -119,15 +119,15 @@
     };
 
     CloudKeys.prototype.updateInformation = function(data) {
-      var e;
+      var e, error;
       this.version = data.version;
       if (data.data === "") {
         this.entities = [];
       } else {
         try {
           this.entities = $.parseJSON(this.decrypt(data.data));
-        } catch (_error) {
-          e = _error;
+        } catch (error) {
+          e = error;
           window.location.reload();
         }
       }
@@ -144,13 +144,24 @@
       return CryptoJS.AES.decrypt(value, this.password).toString(CryptoJS.enc.Utf8);
     };
 
-    CloudKeys.prototype.getClippyCode = function(value) {
-      var code;
-      code = '<span class="clippy"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="14" height="14" class="clippy">';
-      code += '<param name="movie" value="../../assets/clippy.swf"/><param name="allowScriptAccess" value="always" /><param name="quality" value="high" />';
-      code += "<param name=\"scale\" value=\"noscale\" /><param name=\"FlashVars\" value=\"text=" + (encodeURIComponent(value)) + "\"><param name=\"bgcolor\" value=\"#e5e3e9\">";
-      code += "<embed src=\"../../assets/clippy.swf\" width=\"14\" height=\"14\" name=\"clippy\" quality=\"high\" allowScriptAccess=\"always\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" FlashVars=\"text=" + (encodeURIComponent(value)) + "\" bgcolor=\"#e5e3e9\" /></object></span>";
-      return code;
+    CloudKeys.prototype.getClipboardCode = function(value) {
+      var cb;
+      cb = $('<div class="clipboard"></div>');
+      cb.click(function(e) {
+        var elem;
+        elem = $("<textarea>" + value + "</textarea>").css({
+          'position': 'absolute',
+          'left': '-9999px',
+          'readonly': 'readonly',
+          'top': (window.pageYOffset || document.documentElement.scrollTop) + 'px'
+        });
+        $("body").append(elem);
+        elem.focus();
+        elem.select();
+        document.execCommand('copy');
+        elem.remove();
+      });
+      return cb;
     };
 
     CloudKeys.prototype.limitItems = function(items) {
@@ -178,7 +189,7 @@
     };
 
     CloudKeys.prototype.showItems = function(items) {
-      var additionalClass, c, char, counter, i, item, itemContainer, j, len, lines_match, password, ref, ul;
+      var additionalClass, c, char, counter, field, i, item, itemContainer, j, len, lines_match, password, ref, ul;
       $('#items li').remove();
       itemContainer = $('#items');
       $('#resultdescription span').text(items.length);
@@ -197,9 +208,15 @@
           i = ref[char];
           password += "*";
         }
-        ul.append("<li><label>Username:</label><input type=\"text\" class=\"username\" value=\"" + item.username + "\">" + (this.getClippyCode(item.username)) + "<br></li>");
-        ul.append("<li class=\"passwordtoggle\"><label>Password:</label><input type=\"text\" class=\"password\" value=\"" + password + "\" data-toggle=\"" + item.password + "\"><em> (toggle visibility)</em></span>" + (this.getClippyCode(item.password)) + "<br></li>");
-        ul.append("<li><label>URL:</label><input type=\"text\" class=\"url\" value=\"" + item.url + "\">" + (this.getClippyCode(item.url)) + "<br></li>");
+        field = $("<li><label>Username:</label><input type=\"text\" class=\"username\" value=\"" + item.username + "\"><br></li>");
+        ul.append(field);
+        this.getClipboardCode(item.username).insertBefore(field.find("br"));
+        field = $("<li class=\"passwordtoggle\"><label>Password:</label><input type=\"text\" class=\"password\" value=\"" + password + "\" data-toggle=\"" + item.password + "\"><em> (toggle visibility)</em></span><br></li>");
+        ul.append(field);
+        this.getClipboardCode(item.password).insertBefore(field.find("br"));
+        field = $("<li><label>URL:</label><input type=\"text\" class=\"url\" value=\"" + item.url + "\"><br></li>");
+        ul.append(field);
+        this.getClipboardCode(item.url).insertBefore(field.find("br"));
         lines_match = item.comment.match(/\n/g);
         if (lines_match !== null) {
           counter = lines_match.length;
@@ -207,8 +224,12 @@
         if (counter < 2) {
           counter = 2;
         }
-        ul.append("<li><label>Comment:</label><textarea class=\"comment\" rows=\"" + (counter + 2) + "\">" + item.comment + "</textarea>" + (this.getClippyCode(item.comment)) + "<br></li>");
-        ul.append("<li><label>Tags:</label><input type=\"text\" class=\"tags\" value=\"" + item.tags + "\">" + (this.getClippyCode(item.tags)) + "<br></li>");
+        field = $("<li><label>Comment:</label><textarea class=\"comment\" rows=\"" + (counter + 2) + "\">" + item.comment + "</textarea><br></li>");
+        ul.append(field);
+        this.getClipboardCode(item.comment).insertBefore(field.find("br"));
+        field = $("<li><label>Tags:</label><input type=\"text\" class=\"tags\" value=\"" + item.tags + "\"><br></li>");
+        ul.append(field);
+        this.getClipboardCode(item.tags).insertBefore(field.find("br"));
         ul.append("<li class=\"last\"><button class=\"btn btn-primary\">Edit</button><br></li>");
         ul.find('.btn-primary').click((function(_this) {
           return function() {

assets/style.css

@@ -1 +1 @@
-body{padding-top:70px}input{outline:0}.navbar a{cursor:pointer}.navbar a.active_account{font-weight:bold}#importContainer{display:none}#importContainer #importer{border:1px solid #111;border-radius:5px;background-image:linear-gradient(to bottom, #666 0, #171717 100%);margin:20px 0;padding:20px 20px}#importContainer #importer textarea{border:0;border-radius:5px;display:block;font-size:11px;height:350px;margin:0 auto;padding:0;width:100%}#loader img{display:block;margin:0 auto}#searchbox{border:1px solid #111;border-radius:5px;background-image:linear-gradient(to bottom, #666 0, #171717 100%);margin:20px 0;padding:10px}#searchbox input{border:0;border-radius:5px;display:block;font-size:20px;height:40px;margin:0 auto;padding:0 20px;width:100%}#content #resultdescription{margin:15px 0}#content #resultdescription span{font-weight:bold}#content ul#items{list-style:none;padding:0}#content ul#items li.active{background-color:#e5e3e9}#content ul#items li{cursor:pointer;padding:5px 20px}#content ul#items li span{font-size:70%;font-style:italic;padding:0 0 0 20px}#content ul#items li ul{display:none;list-style:none;padding-left:5px}#content ul#items li ul li.last{display:none}@media (min-width:768px){#content ul#items li ul li.last{border-bottom:0;display:block}}#content ul#items li ul li{border-bottom:1px dotted #808080}#content ul#items li ul li br{clear:both}#content ul#items li ul li label{display:block;float:left;width:100px}#content ul#items li ul li input,#content ul#items li ul li textarea{background:transparent;border:0;float:left;font-size:11px;min-height:20px;outline:0;padding-left:0;width:300px}#content ul#items li ul li input.password{width:200px}#content ul#items li ul li em{float:left;font-size:70%;width:100px}#content ul#items li ul li span.clippy{display:none}@media (min-width:992px){#content ul#items li ul li span.clippy{display:block;float:left;padding-left:0;width:20px}}#content ul#items li li.odd{background-color:transparent}#content ul#items li:hover{background-color:#e5e3e9}#content ul#items li.odd{background-color:#f6f6f6}
+body{padding-top:70px}input{outline:0}.navbar a{cursor:pointer}.navbar a.active_account{font-weight:700}#importContainer{display:none}#importContainer #importer{border:1px solid #111;border-radius:5px;background-image:linear-gradient(to bottom,#666 0,#171717 100%);margin:20px 0;padding:20px 20px}#importContainer #importer textarea{border:0;border-radius:5px;display:block;font-size:11px;height:350px;margin:0 auto;padding:0;width:100%}#loader img{display:block;margin:0 auto}#searchbox{border:1px solid #111;border-radius:5px;background-image:linear-gradient(to bottom,#666 0,#171717 100%);margin:20px 0;padding:10px}#searchbox input{border:0;border-radius:5px;display:block;font-size:20px;height:40px;margin:0 auto;padding:0 20px;width:100%}#content #resultdescription{margin:15px 0}#content #resultdescription span{font-weight:700}#content ul#items{list-style:none;padding:0}#content ul#items li.active{background-color:#e5e3e9}#content ul#items li{cursor:pointer;padding:5px 20px}#content ul#items li span{font-size:70%;font-style:italic;padding:0 0 0 20px}#content ul#items li ul{display:none;list-style:none;padding-left:5px}#content ul#items li ul li.last{display:none}@media (min-width:768px){#content ul#items li ul li.last{border-bottom:0;display:block}}#content ul#items li ul li{border-bottom:1px dotted gray}#content ul#items li ul li br{clear:both}#content ul#items li ul li label{display:block;float:left;width:100px}#content ul#items li ul li input,#content ul#items li ul li textarea{background:0 0;border:0;float:left;font-size:11px;min-height:20px;outline:0;padding-left:0;width:300px}#content ul#items li ul li input.password{width:200px}#content ul#items li ul li div.clipboard{background:url(clipboard.png) no-repeat top left;display:inline-block;height:14px;width:14px}#content ul#items li ul li div.clipboard:active{background:url(clipboard_click.png) no-repeat top left}#content ul#items li ul li div.clipboard:hover{background:url(clipboard_hover.png) no-repeat top left}#content ul#items li ul li em{float:left;font-size:70%;width:100px}#content ul#items li ul li span.clippy{display:none}@media (min-width:992px){#content ul#items li ul li span.clippy{display:block;float:left;padding-left:0;width:20px}}#content ul#items li li.odd{background-color:transparent}#content ul#items li:hover{background-color:#e5e3e9}#content ul#items li.odd{background-color:#f6f6f6}

coffee/script.coffee

@@ -1,3 +1,5 @@
+# vim: set tabstop=2 shiftwidth=2 softtabstop=2 expandtab:
+
 class CloudKeys
   constructor: () ->
     @entities = []
@@ -101,12 +103,23 @@ class CloudKeys
   decrypt: (value) ->
     return CryptoJS.AES.decrypt(value, @password).toString(CryptoJS.enc.Utf8)
 
-  getClippyCode: (value) ->
-    code = '<span class="clippy"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="14" height="14" class="clippy">'
-    code += '<param name="movie" value="../../assets/clippy.swf"/><param name="allowScriptAccess" value="always" /><param name="quality" value="high" />'
-    code += "<param name=\"scale\" value=\"noscale\" /><param name=\"FlashVars\" value=\"text=#{encodeURIComponent(value)}\"><param name=\"bgcolor\" value=\"#e5e3e9\">"
-    code += "<embed src=\"../../assets/clippy.swf\" width=\"14\" height=\"14\" name=\"clippy\" quality=\"high\" allowScriptAccess=\"always\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" FlashVars=\"text=#{encodeURIComponent(value)}\" bgcolor=\"#e5e3e9\" /></object></span>"
-    return code
+  getClipboardCode: (value) ->
+    cb = $('<div class="clipboard"></div>')
+    cb.click (e) ->
+      elem = $("<textarea>#{ value }</textarea>").css({
+        'position': 'absolute',
+        'left': '-9999px',
+        'readonly': 'readonly',
+        'top': (window.pageYOffset || document.documentElement.scrollTop) + 'px'
+      })
+
+      $("body").append(elem)
+      elem.focus()
+      elem.select()
+      document.execCommand('copy')
+      elem.remove()
+      return
+    return cb
 
   limitItems: (items) ->
     $('#resultdescription span').text(items.length)
@@ -140,16 +153,33 @@ class CloudKeys
       password = ""
       for char, i of item.password
         password += "*"
-      ul.append("<li><label>Username:</label><input type=\"text\" class=\"username\" value=\"#{ item.username }\">#{ @getClippyCode(item.username) }<br></li>")
-      ul.append("<li class=\"passwordtoggle\"><label>Password:</label><input type=\"text\" class=\"password\" value=\"#{ password }\" data-toggle=\"#{ item.password }\"><em> (toggle visibility)</em></span>#{ @getClippyCode(item.password) }<br></li>")
-      ul.append("<li><label>URL:</label><input type=\"text\" class=\"url\" value=\"#{ item.url }\">#{ @getClippyCode(item.url) }<br></li>")
+
+      field = $("<li><label>Username:</label><input type=\"text\" class=\"username\" value=\"#{ item.username }\"><br></li>")
+      ul.append(field)
+      @getClipboardCode(item.username).insertBefore(field.find("br"))
+
+      field = $("<li class=\"passwordtoggle\"><label>Password:</label><input type=\"text\" class=\"password\" value=\"#{ password }\" data-toggle=\"#{ item.password }\"><em> (toggle visibility)</em></span><br></li>")
+      ul.append(field)
+      @getClipboardCode(item.password).insertBefore(field.find("br"))
+
+      field = $("<li><label>URL:</label><input type=\"text\" class=\"url\" value=\"#{ item.url }\"><br></li>")
+      ul.append(field)
+      @getClipboardCode(item.url).insertBefore(field.find("br"))
+
       lines_match = item.comment.match(/\n/g)
       if lines_match isnt null
         counter = lines_match.length
       if counter < 2
         counter = 2
-      ul.append("<li><label>Comment:</label><textarea class=\"comment\" rows=\"#{ counter + 2 }\">#{ item.comment }</textarea>#{ @getClippyCode(item.comment) }<br></li>")
-      ul.append("<li><label>Tags:</label><input type=\"text\" class=\"tags\" value=\"#{ item.tags }\">#{ @getClippyCode(item.tags) }<br></li>")
+
+      field = $("<li><label>Comment:</label><textarea class=\"comment\" rows=\"#{ counter + 2 }\">#{ item.comment }</textarea><br></li>")
+      ul.append(field)
+      @getClipboardCode(item.comment).insertBefore(field.find("br"))
+
+      field = $("<li><label>Tags:</label><input type=\"text\" class=\"tags\" value=\"#{ item.tags }\"><br></li>")
+      ul.append(field)
+      @getClipboardCode(item.tags).insertBefore(field.find("br"))
+
       ul.append("<li class=\"last\"><button class=\"btn btn-primary\">Edit</button><br></li>")
       ul.find('.btn-primary').click () =>
         `var t = this`

less/style.less

@@ -125,6 +125,21 @@ input {
             width: 200px;
           }
 
+          div.clipboard {
+            background: url('clipboard.png') no-repeat top left;
+            display: inline-block;
+            height: 14px;
+            width: 14px;
+
+            &:active {
+              background: url('clipboard_click.png') no-repeat top left;
+            }
+
+            &:hover {
+              background: url('clipboard_hover.png') no-repeat top left;
+            }
+          }
+
           em {
             float: left;
             font-size: 70%;