Convert document share dialog to JS

Convert the dialog to JS and modernize the style to follow current
component conventions.

h/static/scripts/directive/share-dialog.coffee

-###*
-# @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')
-]

h/static/scripts/directive/share-dialog.js

+'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'),
+  };
+};

h/static/scripts/directive/test/share-dialog-test.coffee

-{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')

h/static/scripts/directive/test/share-dialog-test.js

+'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');
+  });
+});

h/templates/client/share_dialog.html

@@ -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>