Commit 2b8e1742 authored by Robert Knight's avatar Robert Knight Committed by Nick Stenning

Convert document share dialog to JS

Convert the dialog to JS and modernize the style to follow current
component conventions.
parent 005044c9
###*
# @ngdoc directive
# @name share-dialog
# @restrict A
# @description This dialog generates a via link to the page h is currently
# loaded on.
###
module.exports = ['crossframe', (crossframe) ->
link: (scope, elem, attrs, ctrl) ->
scope.viaPageLink = ''
viaInput = elem[0].querySelector('.js-via')
# Watch scope.shareDialog.visible: when it changes to true, focus input
# and selection.
scope.$watch (-> scope.shareDialog?.visible), (visible) ->
if visible
scope.$evalAsync(->
viaInput.focus()
viaInput.select()
)
scope.$watchCollection (-> crossframe.frames), (frames) ->
if not frames.length
return
# Check to see if we are on a via page. If so, we just return the URI.
re = /https:\/\/via\.hypothes\.is/
if re.test(frames[0].uri)
scope.viaPageLink = frames[0].uri
else
scope.viaPageLink = 'https://via.hypothes.is/' + frames[0].uri
restrict: 'E'
template: require('../../../templates/client/share_dialog.html')
]
'use strict';
var VIA_PREFIX = 'https://via.hypothes.is/';
// @ngInject
function ShareDialogController($scope, $element, crossframe) {
var ctrl = this;
function updateViaLink(frames) {
if (!frames.length) {
ctrl.viaPageLink = '';
return;
}
// Check to see if we are on a via page. If so, we just return the URI.
if (frames[0].uri.indexOf(VIA_PREFIX) === 0) {
ctrl.viaPageLink = frames[0].uri;
} else {
ctrl.viaPageLink = VIA_PREFIX + frames[0].uri;
}
}
var viaInput = $element[0].querySelector('.js-via');
viaInput.focus();
viaInput.select();
$scope.$watchCollection(function () { return crossframe.frames; },
updateViaLink);
}
module.exports = function () {
return {
restrict: 'E',
bindToController: true,
controller: ShareDialogController,
controllerAs: 'vm',
scope: {
onClose: '&',
},
template: require('../../../templates/client/share_dialog.html'),
};
};
{module, inject} = angular.mock
describe 'share-dialog', ->
$scope = null
$compile = null
fakeCrossFrame = null
before ->
angular.module('h', [])
.directive('shareDialog', require('../share-dialog'))
beforeEach module('h')
beforeEach module ($provide) ->
fakeCrossFrame = {frames: []}
$provide.value 'crossframe', fakeCrossFrame
return
beforeEach inject (_$compile_, _$rootScope_) ->
$compile = _$compile_
$scope = _$rootScope_.$new()
it 'generates new via link', ->
$element = $compile('<share-dialog></share-dialog>')($scope)
fakeCrossFrame.frames.push({uri: 'http://example.com'})
$scope.$digest()
assert.equal($scope.viaPageLink,
'https://via.hypothes.is/http://example.com')
it 'does not generate new via link if already on via', ->
$element = $compile('<share-dialog></share-dialog>>')($scope)
fakeCrossFrame.frames.push({uri: ['https://via.hypothes.is/http://example.com']})
$scope.$digest()
assert.equal($scope.viaPageLink,
'https://via.hypothes.is/http://example.com')
'use strict';
var angular = require('angular');
var util = require('./util');
describe('shareDialog', function () {
var fakeCrossFrame;
before(function () {
angular.module('h', [])
.directive('shareDialog', require('../share-dialog'));
});
beforeEach(angular.mock.module('h'));
beforeEach(angular.mock.module(function ($provide) {
fakeCrossFrame = { frames: [] };
$provide.value('crossframe', fakeCrossFrame);
}));
it('generates new via link', function () {
var element = util.createDirective(document, 'shareDialog', {});
fakeCrossFrame.frames.push({ uri: 'http://example.com' });
element.scope.$digest();
assert.equal(element.ctrl.viaPageLink, 'https://via.hypothes.is/http://example.com');
});
it('does not generate new via link if already on via', function () {
var element = util.createDirective(document, 'shareDialog', {});
fakeCrossFrame.frames.push({ uri: 'https://via.hypothes.is/http://example.com' });
element.scope.$digest();
assert.equal(element.ctrl.viaPageLink, 'https://via.hypothes.is/http://example.com');
});
});
......@@ -2,7 +2,7 @@
<i class="close h-icon-close"
role="button"
title="Close"
ng-click="shareDialog.visible = false"></i>
ng-click="vm.onClose()"></i>
<div class="form-vertical">
<ul class="nav nav-tabs">
<li class="active"><a href="">Share</a></li>
......@@ -11,22 +11,22 @@
<p>Share the link below to show anyone these annotations and invite them to contribute their own.</p>
<p><input class="js-via form-input"
type="text"
ng-value="viaPageLink"
ng-value="vm.viaPageLink"
readonly /></p>
<p class="share-link-icons">
<a href="https://twitter.com/intent/tweet?url={{viaPageLink}}"
<a href="https://twitter.com/intent/tweet?url={{vm.viaPageLink}}"
target="_blank"
title="Tweet link"
class="share-link-icon h-icon-twitter"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{viaPageLink}}"
<a href="https://www.facebook.com/sharer/sharer.php?u={{vm.viaPageLink}}"
target="_blank"
title="Share on Facebook"
class="share-link-icon h-icon-facebook"></a>
<a href="https://plus.google.com/share?url={{viaPageLink}}"
<a href="https://plus.google.com/share?url={{vm.viaPageLink}}"
target="_blank"
title="Post on Google Plus"
class="share-link-icon h-icon-google-plus"></a>
<a href="mailto:?subject=Let's%20Annotate&amp;body={{viaPageLink}}"
<a href="mailto:?subject=Let's%20Annotate&amp;body={{vm.viaPageLink}}"
title="Share via email"
class="share-link-icon h-icon-mail"></a>
</p>
......
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