From 1c09bdf7b0079bfc4475e9d1be2347903be4188a Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Wed, 21 Nov 2018 11:22:57 -0500 Subject: [PATCH 1/2] Implement the copy link functionality This does not implement any further design, like showing a confirmation popover, but just makes sure the button works. I used a very slim package to implement copy that does not include any fallbacks for IE, since we do not need to support that here. --- package.json | 1 + src/views/preview/presentation.jsx | 4 ++++ src/views/preview/project-view.jsx | 9 +++++++++ src/views/preview/subactions.jsx | 6 +++++- 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e32743a8d..f531b181f 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "dependencies": { "bunyan": "1.7.1", "compression": "1.6.1", + "copy-text-to-clipboard": "1.0.4", "express": "4.16.1", "express-http-proxy": "1.1.0", "lodash.defaults": "4.0.1", diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index 02a57b255..907f5f2d9 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -69,6 +69,7 @@ const PreviewPresentation = ({ onAddComment, onAddToStudioClicked, onAddToStudioClosed, + onCopyProjectLink, onDeleteComment, onFavoriteClicked, onLoadMore, @@ -236,6 +237,7 @@ const PreviewPresentation = ({ shareDate={shareDate} onAddToStudioClicked={onAddToStudioClicked} onAddToStudioClosed={onAddToStudioClosed} + onCopyProjectLink={onCopyProjectLink} onReportClicked={onReportClicked} onReportClose={onReportClose} onReportSubmit={onReportSubmit} @@ -366,6 +368,7 @@ const PreviewPresentation = ({ shareDate={shareDate} onAddToStudioClicked={onAddToStudioClicked} onAddToStudioClosed={onAddToStudioClosed} + onCopyProjectLink={onCopyProjectLink} onReportClicked={onReportClicked} onReportClose={onReportClose} onReportSubmit={onReportSubmit} @@ -513,6 +516,7 @@ PreviewPresentation.propTypes = { onAddComment: PropTypes.func, onAddToStudioClicked: PropTypes.func, onAddToStudioClosed: PropTypes.func, + onCopyProjectLink: PropTypes.func, onDeleteComment: PropTypes.func, onFavoriteClicked: PropTypes.func, onLoadMore: PropTypes.func, diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index e68060db9..98dcac3e1 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -7,6 +7,8 @@ const PropTypes = require('prop-types'); const connect = require('react-redux').connect; const injectIntl = require('react-intl').injectIntl; const parser = require('scratch-parser'); +const copy = require('copy-text-to-clipboard'); + const Page = require('../../components/page/www/page.jsx'); const storage = require('../../lib/storage.js').default; const log = require('../../lib/log'); @@ -37,6 +39,7 @@ class Preview extends React.Component { 'addEventListeners', 'fetchCommunityData', 'handleAddComment', + 'handleCopyProjectLink', 'handleDeleteComment', 'handleToggleStudio', 'handleFavoriteToggle', @@ -387,6 +390,11 @@ class Preview extends React.Component { this.props.user.token ); } + handleCopyProjectLink () { + // Use the pathname so we do not have to update this if path changes + // Also do not include hash or query params + copy(`${window.location.origin}${window.location.pathname}`); + } initCounts (favorites, loves) { this.setState({ favoriteCount: favorites, @@ -462,6 +470,7 @@ class Preview extends React.Component { onAddComment={this.handleAddComment} onAddToStudioClicked={this.handleAddToStudioClick} onAddToStudioClosed={this.handleAddToStudioClose} + onCopyProjectLink={this.handleCopyProjectLink} onDeleteComment={this.handleDeleteComment} onFavoriteClicked={this.handleFavoriteToggle} onLoadMore={this.handleLoadMore} diff --git a/src/views/preview/subactions.jsx b/src/views/preview/subactions.jsx index 0e9a1014f..124ba63ce 100644 --- a/src/views/preview/subactions.jsx +++ b/src/views/preview/subactions.jsx @@ -47,7 +47,10 @@ const Subactions = props => ( )} } - {(props.canReport) && @@ -80,6 +83,7 @@ Subactions.propTypes = { canReport: PropTypes.bool, onAddToStudioClicked: PropTypes.func, onAddToStudioClosed: PropTypes.func, + onCopyProjectLink: PropTypes.func, onReportClicked: PropTypes.func.isRequired, onReportClose: PropTypes.func.isRequired, onReportSubmit: PropTypes.func.isRequired, From f0254078183241090071358528416de33a620434 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Wed, 21 Nov 2018 13:12:09 -0500 Subject: [PATCH 2/2] Use a more popular clipboard manager --- package.json | 2 +- src/views/preview/project-view.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f531b181f..772ca2ae6 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,8 @@ "homepage": "https://github.com/llk/scratch-www#readme", "dependencies": { "bunyan": "1.7.1", + "clipboard-copy": "2.0.1", "compression": "1.6.1", - "copy-text-to-clipboard": "1.0.4", "express": "4.16.1", "express-http-proxy": "1.1.0", "lodash.defaults": "4.0.1", diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 98dcac3e1..3561fbe88 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -7,7 +7,7 @@ const PropTypes = require('prop-types'); const connect = require('react-redux').connect; const injectIntl = require('react-intl').injectIntl; const parser = require('scratch-parser'); -const copy = require('copy-text-to-clipboard'); +const copy = require('clipboard-copy'); const Page = require('../../components/page/www/page.jsx'); const storage = require('../../lib/storage.js').default;