Switched to use clipboardjs.

Author: wdamien

assets/ZeroClipboard.swf

@@ -234,36 +234,46 @@ <h1 class="tool-label"></h1>
 	</div>
 
 	<div class="menu share">
-		<header>
-			Share
-		</header>
-		<hr />
-		<div id="shareLinkView">
-			<input type="text" id="shareLinkTxt">
-			<a id="shareCopyLink">Copy Link<br/><br/></a>
-			<p id="noFlashCopyText">Press <span class="copyKeyLabel">Ctrl</span>+C to copy your link.</p>
-		</div>
 		<div id="savePrompt">
 			<p><a id="showSaveLink">Save</a> your pattern before sharing.</p>
 		</div>
-		<header>Copy</header>
-		<hr />
-		<a id="copyExpression">Expression</a>
-		|
-		<a id="copyPattern">Pattern</a>
-		|
-		<a id="copyJavascript">Javascript</a>
-		<div id="copyMessageView" class="hidden">
-			<hr />
-			<code id="copyTxt"></code>
-			Copied to clipboard.
-		</div>
 
-		<div id="noFlashCopyView" class="hidden">
-			<hr />
-			<input id="noFlashCopyInput" type="text"><br/>
-			Press <span class="copyKeyLabel">dynamic</span>-C to copy.
-		</div>
+        <div class="share-wrap">
+            <header>
+                Share
+            </header>
+            <hr />
+            <div id="shareLinkView" class="share-wrap">
+                <input type="text" id="shareLinkTxt" readonly>
+                <div data-clipboard-target="#shareLinkTxt" class="icon share-link-btn">&#xE603;</div>
+            </div>
+            <header>
+                Expression
+            </header>
+            <hr />
+            <div id="shareExpressionView" class="share-wrap">
+                <input type="text" id="shareExpressionTxt" readonly>
+                <div class="icon share-expression-btn" data-clipboard-target="#shareExpressionTxt">&#xE603;</div>
+            </div>
+
+            <header>
+                Pattern
+            </header>
+            <hr />
+            <div id="sharePatternView" class="share-wrap">
+                <input type="text" id="sharePatternTxt" readonly>
+                <div class="icon share-pattern-btn" data-clipboard-target="#sharePatternTxt">&#xE603;</div>
+            </div>
+
+            <header>
+                Javascript
+            </header>
+            <hr />
+            <div id="shareJavascriptView" class="share-wrap">
+                <input type="text" id="shareJavascriptTxt" readonly>
+                <div class="icon share-javascript-btn" data-clipboard-target="#shareJavascriptTxt">&#xE603;</div>
+            </div>
+        </div>
 	</div>
 
 	<div class="menu save">
@@ -365,11 +375,6 @@ <h1 class="regexr-text">RegExr</h1><span class="version regexr-text">v2.1</span>
 	if (!$.isSupported()) {
 		el = document.querySelector(".not-supported");
 		$.removeClass(el, "hidden");
-
-		if (!ZeroClipboard.state().flash.disabled) {
-			var flash = document.getElementsByClassName('flash')[0];
-			flash.className = "";
-		}
 	} else if($.partialSupport()) {
 		el = document.querySelector(".not-supported-mobile");
 		$.removeClass(el, "hidden");

index.html

@@ -7,8 +7,6 @@ require('classlist-polyfill');
 require('./third-party/history.adapter.native.js');
 require('./third-party/history.js');
 
-window.ZeroClipboard = require('zeroclipboard');
-
 // Import some classes into a shared object, for use in the index.template.js
 var Utils = require('./utils/Utils');
 window.$ = RegExrShared.Utils = Utils;

js/RegExr.js

@@ -51,16 +51,6 @@
 			$.removeClass($.el(".beta-banner"), "hidden");
 		}
 
-		// Setup our copy functionality.
-		ZeroClipboard.config(
-			{
-				swfPath: "assets/ZeroClipboard.swf",
-				cacheBust: false,
-				forceHandCursor: true,
-				hoverClass: 'a-hover'
-			}
-		);
-
 		RegExrShared.List.spinner = $.el(".spinner");
 
 		var docView = new RegExrShared.DocView($.el("#docview"));

js/index.template.js

@@ -26,7 +26,8 @@ var Tracking = require('../Tracking');
 var TextUtils = require('../utils/TextUtils');
 var Utils = require('../utils/Utils');
 var ExpressionModel = require('../net/ExpressionModel');
-var ZeroClipboard = require('zeroclipboard');
+var Clipboard = require('clipboard');
+var Tooltip = require('../controls/Tooltip');
 
 var ShareMenu = function (element, docsView) {
 	this.initialize(element, docsView);
@@ -40,32 +41,21 @@ p.initialize = function (element, docsView) {
 	this.docsView = docsView;
 	this.element = element;
 
-	this.shareLink = $.el("#shareLinkTxt", this.element);
-	this.copyLink = $.el("#shareCopyLink", this.element);
 	this.showSaveLink = $.el("#showSaveLink", this.element);
-	this.copyExpression = $.el("#copyExpression", this.element);
-	this.copyPattern = $.el("#copyPattern", this.element);
-
 	this.showSaveLink.onclick = $.bind(this, this.handleSaveClick);
-
 	this.saveView = $.el("#savePrompt", this.element);
-	this.shareLinkView = $.el("#shareLinkView", this.element);
-	this.copyJavascript = $.el("#copyJavascript", this.element);
-
-	this.noFlashCopyView = $.el("#noFlashCopyView", this.element);
-	this.noFlashCopyInput = $.el("#noFlashCopyInput", this.element);
+	this.shareLinkTxt = $.el("#shareLinkTxt", this.element);
+	this.shareWrap = $.el(".share-wrap", this.element);
+	this.shareExpressionTxt = $.el("#shareExpressionTxt", this.element);
+	this.sharePatternTxt = $.el("#sharePatternTxt", this.element);
+	this.shareJavascriptTxt = $.el("#shareJavascriptTxt", this.element);
 
-	this.hasFlash = !$.isFirefox() && !$.isIE() && !ZeroClipboard.state().flash.disabled;
+	new Clipboard(".share-link-btn").on("success", this._handleCopySuccess.bind(this));
+	new Clipboard(".share-expression-btn").on("success", this._handleCopySuccess.bind(this));
+	new Clipboard(".share-javascript-btn").on("success", this._handleCopySuccess.bind(this));
+	new Clipboard(".share-pattern-btn").on("success", this._handleCopySuccess.bind(this));
 
-	this.copyMessageView = $.el("#copyMessageView", this.element);
-
-	if (this.hasFlash) {
-		var _this = this;
-		_this.initializeCopyLinks();
-		$.addClass($.el("#noFlashCopyText", this.element), "hidden");
-	} else {
-		this.initializeNoFlashCopyLinks();
-	}
+	this._successToolTip = new Tooltip($.el(".share-link-btn"), "", {mode: "custom"});
 
 	var copyKeyLabels = $.els(".copyKeyLabel", this.element);
 	var copyKeyLabel = $.getCtrlKey();
@@ -74,47 +64,14 @@ p.initialize = function (element, docsView) {
 	}
 };
 
-p.initializeNoFlashCopyLinks = function () {
+p._handleCopySuccess = function(event) {
+	var rect = event.trigger.getBoundingClientRect();
+	this._successToolTip.show("Copied!", rect);
 	var _this = this;
-
-	$.addClass($.el("#shareCopyLink", this.element), "hidden");
-
-	this.createNoFlashCopyLink(this.copyExpression, function () {
-		Tracking.event("share", "copy", "expression-noflash");
-		return _this.docsView.getExpression();
-	});
-
-	this.createNoFlashCopyLink(this.copyPattern, function () {
-		Tracking.event("share", "copy", "pattern-noflash");
-		return _this.docsView.getPattern();
-	});
-
-	this.createNoFlashCopyLink(this.copyJavascript, function () {
-		Tracking.event("share", "copy", "javascript-noflash");
-		return _this.createJavascriptCopy();
-	});
-};
-
-p.createNoFlashCopyLink = function (el, copyFunction) {
-	var _this = this;
-	el.onclick = function () {
-		var value = copyFunction();
-		var input = _this.noFlashCopyInput;
-
-		input.value = value;
-
-		$.addCopyListener(input, $.bind(_this, _this.handleExpressionCopied));
-
-		// Delay so the text actually selects
-		setTimeout(function () {
-			input.select();
-			input.focus();
-		}, 1);
-
-		_this.hideFlyout(_this.copyMessageView);
-		_this.showFlyout(_this.noFlashCopyView);
-	}
-};
+	setTimeout(function() {
+		_this._successToolTip.hide();
+	}, 750);
+}
 
 p.handleExpressionCopied = function (event) {
 	var _this = this;
@@ -128,34 +85,6 @@ p.handleSaveClick = function () {
 	this.docsView.showSave();
 };
 
-p.initializeCopyLinks = function () {
-	var _this = this;
-
-	this.createCopyLink(this.copyLink, function (event) {
-		var clipboard = event.clipboardData;
-		clipboard.setData("text/plain", _this.shareLink.value);
-		Tracking.event("share", "copy", "share");
-	});
-
-	this.createCopyLink(this.copyExpression, function (event) {
-		var clipboard = event.clipboardData;
-		clipboard.setData("text/plain", _this.docsView.getExpression());
-		Tracking.event("share", "copy", "expression");
-	});
-
-	this.createCopyLink(this.copyPattern, function (event) {
-		var clipboard = event.clipboardData;
-		clipboard.setData("text/plain", _this.docsView.getPattern());
-		Tracking.event("share", "copy", "pattern");
-	});
-
-	this.createCopyLink(this.copyJavascript, function (event) {
-		var clipboard = event.clipboardData;
-		clipboard.setData("text/plain", _this.createJavascriptCopy());
-		Tracking.event("share", "copy", "javascript");
-	});
-};
-
 p.createJavascriptCopy = function () {
 	var pattern = this.docsView.getExpression();
 
@@ -178,49 +107,28 @@ p.createCopyLink = function (el, dataFunc) {
 	}();
 };
 
-p.showFlyout = function (el, time) {
-	$.animate(el, "information-default", "information-show");
-
-	if (!isNaN(time)) {
-		clearTimeout(this._toastInt);
-		var _this = this;
-		this._toastInt = setTimeout(function () {
-			_this.hideFlyout(el);
-		}, time);
-	}
-};
-
-p.hideFlyout = function (el) {
-	$.removeClass(el, "information-show");
-};
-
-p.handleCopyComplete = function (event) {
-	this.showCopyCompleteFlyout(event.data['text/plain']);
-};
-
-p.showCopyCompleteFlyout = function (expression) {
-	$.el("#copyTxt", this.element).innerText = TextUtils.shorten(expression, 31);
-	this.showFlyout(this.copyMessageView, 1500);
-}
-
 p.show = function () {
 	Tracking.event("share", "show");
 
 	Utils.removeClass(this.saveView, "visible hidden");
-	Utils.removeClass(this.shareLinkView, "visible hidden");
+	Utils.removeClass(this.shareWrap, "visible hidden");
 
 	if (!ExpressionModel.id) {
 		Utils.addClass(this.saveView, "visible");
-		Utils.addClass(this.shareLinkView, "hidden");
+		Utils.addClass(this.shareWrap, "hidden");
 	} else {
-		this.shareLink.value = Utils.createURL($.createID(ExpressionModel.id));
+		this.shareLinkTxt.value = Utils.createURL($.createID(ExpressionModel.id));
 		Utils.addClass(this.saveView, "hidden");
-		Utils.addClass(this.shareLinkView, "visible");
+		Utils.addClass(this.shareWrap, "visible");
+
+		this.shareExpressionTxt.value = this.docsView.getExpression();
+		this.sharePatternTxt.value = this.docsView.getPattern();
+		this.shareJavascriptTxt.value = this.createJavascriptCopy();
 
         // This was failing in Edge, with this error: "Could not complete the operation due to error 800a025e."
         try {
-            this.shareLink.focus();
-            this.shareLink.select();
+           // this.shareLink.focus();
+            //this.shareLink.select();
         } catch (err) {
 
         }
@@ -229,9 +137,6 @@ p.show = function () {
 
 p.hide = function () {
 	clearTimeout(this._toastInt);
-	this.hideFlyout(this.noFlashCopyView);
-	this.hideFlyout(this.copyMessageView);
 };
 
 module.exports = ShareMenu;
-

js/views/ShareMenu.js

@@ -29,10 +29,10 @@
   "engine": "node >= 4.2.2",
   "dependencies": {
     "classlist-polyfill": "^1.0.2",
-    "codemirror": "^5.8.0",
+    "clipboard": "^1.5.5",
+    "codemirror": "^5.10.0",
     "es6-promise": "^3.0.2",
     "placeholders.js": "^3.0.2",
-    "store": "^1.3.17",
-    "zeroclipboard": "^2.2.0"
+    "store": "^1.3.20"
   }
 }

package.json

@@ -50,6 +50,22 @@
 	     top: -1px;
 		}
 
+        input[type="text"] {
+          @include calc("width", "100% - 0.375em*6");
+          float: left;
+        }
+
+        .share-wrap {
+          @include calc("width", "0.375em*36");
+        }
+
+        .icon {
+          @include calc("padding-top", "0.375em*2");
+          @include calc("padding-left", "100% - 0.375em*3");
+          @include calc("width", "100% - 0.375em*6");
+          cursor: pointer;
+        }
+
 		.update-button {
 		  position: absolute;
 		}