Permalink
Browse files

Switched to use clipboardjs.

1 parent b43727a commit f4ce225c5b93f5a75491d660cf4031d85ce65c16 @wdamien wdamien committed with wdamien Jan 20, 2016
Showing with 84 additions and 170 deletions.
  1. BIN assets/ZeroClipboard.swf
  2. +36 −31 index.html
  3. +0 −2 js/RegExr.js
  4. +0 −10 js/index.template.js
  5. +29 −124 js/views/ShareMenu.js
  6. +3 −3 package.json
  7. +16 −0 scss/menus.scss
Binary file not shown.
View
@@ -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");
View
@@ -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;
View
@@ -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"));
View
@@ -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;
-
View
@@ -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"
}
}
View
@@ -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;
}

0 comments on commit f4ce225

Please sign in to comment.