Skip to content

C
coopwire-hypothesis
Commit 08fceddd authored by Lyza Danger Gardner's avatar Lyza Danger Gardner
Browse files
Options

Remove unused angular-1 `share-annotation-dialog` component

parent 3802a4c0
Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 405 deletions
src/sidebar/components/annotation-share-dialog.js deleted 100644 → 0
View file @ 3802a4c0
'use strict';
const angular = require('angular');
const scopeTimeout = require('../util/scope-timeout');
// @ngInject
function AnnotationShareDialogController($element, $scope, analytics) {
const self = this;
const shareLinkInput = $element.find('input')[0];
$scope.$watch('vm.isOpen', function(isOpen) {
if (isOpen) {
// Focus the input and select it once the dialog has become visible
scopeTimeout($scope, function() {
shareLinkInput.focus();
shareLinkInput.select();
});
}
});
this.copyToClipboard = function(event) {
const $container = angular.element(event.currentTarget).parent();
const shareLinkInput = $container.find('input')[0];
try {
shareLinkInput.select();
// In some browsers, execCommand() returns false if it fails,
// in others, it may throw an exception instead.
if (!document.execCommand('copy')) {
throw new Error('Copying link failed');
}
self.copyToClipboardMessage = 'Link copied to clipboard!';
} catch (ex) {
self.copyToClipboardMessage = 'Select and copy to share.';
} finally {
setTimeout(function() {
self.copyToClipboardMessage = null;
$scope.$digest();
}, 1000);
}
};
this.onShareClick = function(target) {
if (target) {
analytics.track(analytics.events.ANNOTATION_SHARED, target);
}
};
}
module.exports = {
controller: AnnotationShareDialogController,
controllerAs: 'vm',
bindings: {
group: '<',
uri: '<',
isPrivate: '<',
isOpen: '<',
onClose: '&',
},
template: require('../templates/annotation-share-dialog.html'),
};
src/sidebar/components/test/annotation-share-dialog-test.js deleted 100644 → 0
View file @ 3802a4c0
'use strict';
const angular = require('angular');
const util = require('../../directive/test/util');
describe('annotationShareDialog', function() {
let element;
let fakeAnalytics;
function getCopyBtn() {
return element.find('.annotation-share-dialog-link__btn');
}
before(function() {
fakeAnalytics = {
track: sinon.stub(),
events: {},
};
angular
.module('app', [])
.component('annotationShareDialog', require('../annotation-share-dialog'))
.value('analytics', fakeAnalytics)
.value('urlEncodeFilter', function(val) {
return val;
});
});
beforeEach(function() {
angular.mock.module('app');
});
describe('the share dialog', function() {
it('has class is-open set when it is open', function() {
element = util.createDirective(document, 'annotationShareDialog', {
isOpen: true,
});
assert.isOk(element.find('.annotation-share-dialog').hasClass('is-open'));
});
it('does not have class is-open set when it is not open', function() {
element = util.createDirective(document, 'annotationShareDialog', {
isOpen: false,
});
assert.isNotOk(
element.find('.annotation-share-dialog').hasClass('is-open')
);
});
it('tracks the target being shared', function() {
const clickShareIcon = function(iconName) {
element.find('.' + iconName).click();
};
element = util.createDirective(document, 'annotationShareDialog', {
isOpen: true,
});
clickShareIcon('h-icon-twitter');
assert.equal(fakeAnalytics.track.args[0][1], 'twitter');
clickShareIcon('h-icon-facebook');
assert.equal(fakeAnalytics.track.args[1][1], 'facebook');
clickShareIcon('h-icon-mail');
assert.equal(fakeAnalytics.track.args[2][1], 'email');
});
it('focuses and selects the link when the dialog is opened', function(done) {
const uri = 'https://hyp.is/a/foo';
element = util.createDirective(document, 'annotationShareDialog', {
isOpen: true,
uri: uri,
});
setTimeout(function() {
const shareLink = element.find('input')[0];
assert.equal(document.activeElement, shareLink);
assert.equal(shareLink.selectionStart, 0);
assert.equal(shareLink.selectionEnd, uri.length);
done();
}, 1);
});
});
describe('clipboard copy button', function() {
let stub;
beforeEach(function() {
stub = sinon.stub(document, 'execCommand').returns(true);
element = util.createDirective(document, 'annotationShareDialog', {
group: {
name: 'Public',
type: 'open',
},
uri: 'fakeURI',
isPrivate: false,
});
});
afterEach(function() {
stub.restore();
});
it('displays message after successful copy', function() {
const expectedMessage = 'Link copied to clipboard!';
getCopyBtn().click();
const actualMessage = element
.find('.annotation-share-dialog-link__feedback')
.text();
assert.include(actualMessage, expectedMessage);
});
it('hides message after a delay after a successful copy', function() {
const clock = sinon.useFakeTimers();
const expectedMessage = 'Link copied to clipboard!';
getCopyBtn().click();
clock.tick(1999);
clock.restore();
const actualMessage = element
.find('.annotation-share-dialog-link__feedback')
.text();
assert.notInclude(actualMessage, expectedMessage);
});
it('displays message after failed copy', function() {
stub.returns(false);
const expectedMessage = 'Select and copy to share';
getCopyBtn().click();
const actualMessage = element
.find('.annotation-share-dialog-link__feedback')
.text();
assert.include(actualMessage, expectedMessage);
});
});
describe('The message when a user wants to share an annotation shows that the annotation', function() {
it('is available to a group', function() {
element = util.createDirective(document, 'annotationShareDialog', {
group: {
type: 'private',
},
isPrivate: false,
});
const actualMessage = element.find('.annotation-share-dialog-msg').text();
const actualAudience = element
.find('.annotation-share-dialog-msg__audience')
.text();
const expectedMessage =
'Only group members will be able to view this annotation.';
const expectedAudience = 'Group.';
assert.include(actualMessage, expectedMessage);
assert.include(actualAudience, expectedAudience);
});
it('is private', function() {
element = util.createDirective(document, 'annotationShareDialog', {
isPrivate: true,
});
const actualMessage = element.find('.annotation-share-dialog-msg').text();
const actualAudience = element
.find('.annotation-share-dialog-msg__audience')
.text();
const expectedMessage =
'No one else will be able to view this annotation.';
const expectedAudience = 'Only me.';
assert.include(actualMessage, expectedMessage);
assert.include(actualAudience, expectedAudience);
});
});
});
src/sidebar/index.js
View file @ 08fceddd
......@@ -151,8 +151,6 @@ function startAngularApp(config) {
wrapReactComponent(require('./components/annotation-quote'))
)
.component(
'annotationShareDialog',
require('./components/annotation-share-dialog')
'annotationShareControl',
wrapReactComponent(require('./components/annotation-share-control'))
)
......
src/styles/sidebar/components/annotation-share-dialog.scss deleted 100644 → 0
View file @ 3802a4c0
@use "../../variables" as var;
.annotation-share-dialog.is-open {
display: flex;
flex-direction: column;
}
.annotation-share-dialog {
display: none;
position: absolute;
right: 0;
bottom: 130%;
z-index: 1;
background: var.$white;
border: 1px solid var.$gray-lighter;
border-radius: 2px;
width: 200px;
font-size: var.$body1-font-size;
cursor: default;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
// Styling for the dialog box tail pointing down at the
// 'Share' button
&:after,
&:before {
top: 100%;
right: 10px;
border: solid transparent;
content: ' ';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: var.$white;
border-width: 5px;
margin-right: -5px;
}
&:before {
border-color: rgba(211, 211, 211, 0);
border-top-color: var.$gray-lighter;
border-width: 6px;
margin-right: -6px;
}
}
// Transparent backdrop behind the share dialog which intercepts clicks in order
// to hide the dialog.
.annotation-share-dialog__backdrop {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: black;
opacity: 0.01;
z-index: 1;
}
.annotation-share-dialog-msg {
color: var.$gray-light;
margin: -5px 10px 10px 10px;
line-height: 15px;
font-size: 11px;
}
.annotation-share-dialog-msg__audience {
font-style: italic;
}
.annotation-share-dialog-link {
position: relative;
font-size: var.$body1-font-size;
margin: 10px;
padding: 5px;
color: var.$text-color;
border: 1px solid var.$gray-lighter;
border-radius: 2px;
background: var.$grey-1;
white-space: nowrap;
overflow: hidden;
display: flex;
flex-direction: row;
}
.annotation-share-dialog-link:hover {
color: var.$gray-dark;
}
.annotation-share-dialog-link__text {
overflow: hidden;
border: none;
width: 100%;
background: inherit;
height: 22px;
}
.annotation-share-dialog-link__btn {
color: var.$grey-5;
padding: 0px;
margin-left: 7px;
}
.annotation-share-dialog-link__btn:hover {
color: var.$grey-7;
}
.annotation-share-dialog-target {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid var.$gray-lighter;
font-size: var.$body1-font-size;
padding: 10px;
}
.annotation-share-dialog-target__label {
font-weight: bold;
}
.annotation-share-dialog-target__icon {
color: var.$grey-5;
text-decoration: none;
font-size: 20px;
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
}
.annotation-share-dialog-target__icon:hover {
color: var.$grey-7;
}
// Feedback message displayed after the user copies the link to the clipboard
.annotation-share-dialog-link__feedback {
position: absolute;
left: 5px;
top: 5px;
bottom: 5px;
// leave a margin on the right before the copy to clipboard icon
// just enough to hide the text from the input box behind.
right: 28px;
display: flex;
flex-direction: row;
justify-content: center;
font-size: 11px;
background: white;
border: 1px solid #d3d3d3;
border-radius: 2px;
}
src/styles/sidebar/sidebar.scss
View file @ 08fceddd
......@@ -28,7 +28,6 @@
@use './components/annotation';
@use './components/annotation-document-info';
@use './components/annotation-header';
@use './components/annotation-share-dialog';
@use './components/annotation-share-control';
@use './components/annotation-share-info';
@use './components/annotation-publish-control';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment