Merge pull request #3215 from hypothesis/315-page-share-visibility

Scroll share dialog into view when created

h/static/scripts/app-controller.js

 'use strict';
 
 var angular = require('angular');
+var scrollIntoView = require('scroll-into-view');
 
 var annotationMetadata = require('./annotation-metadata');
 var events = require('./events');
@@ -102,9 +103,25 @@ module.exports = function AppController(
     };
   });
 
+  /** Scroll to the view to the element matching the given selector */
+  function scrollToView(selector) {
+    // Add a timeout so that if the element has just been shown (eg. via ngIf)
+    // it is added to the DOM before we try to locate and scroll to it.
+    setTimeout(function () {
+      scrollIntoView($document[0].querySelector(selector));
+    }, 0);
+  }
+
   // Start the login flow. This will present the user with the login dialog.
   $scope.login = function () {
     $scope.accountDialog.visible = true;
+    scrollToView('login-form');
+  };
+
+  // Display the dialog for sharing the current page
+  $scope.share = function () {
+    $scope.shareDialog.visible = true;
+    scrollToView('share-dialog');
   };
 
   // Prompt to discard any unsaved drafts.

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;
+
+  beforeEach(function () {
+    fakeCrossFrame = { frames: [] };
+
+    angular.module('h', [])
+      .directive('shareDialog', require('../share-dialog'))
+      .value('crossframe', fakeCrossFrame);
+    angular.mock.module('h');
+  });
+
+  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/static/scripts/directive/top-bar.js

@@ -9,6 +9,7 @@ module.exports = function () {
       onShowAboutVersionDialog: '&',
       onLogin: '&',
       onLogout: '&',
+      onSharePage: '&',
       searchController: '<',
       accountDialog: '<',
       shareDialog: '<',

h/static/scripts/test/app-controller-test.js

@@ -210,6 +210,22 @@ describe('AppController', function () {
     assert.calledOnce(fakeRoute.reload);
   });
 
+  describe('#login()', function () {
+    it('shows the login dialog', function () {
+      createController();
+      $scope.login();
+      assert.equal($scope.accountDialog.visible, true);
+    });
+  });
+
+  describe('#share()', function () {
+    it('shows the share dialog', function () {
+      createController();
+      $scope.share();
+      assert.equal($scope.shareDialog.visible, true);
+    });
+  });
+
   describe('logout()', function () {
     it('prompts the user if there are drafts', function () {
       fakeDrafts.count.returns(1);

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>

h/templates/client/top_bar.html

@@ -41,7 +41,7 @@
       on-change-sort-by="onChangeSortBy({sortBy: sortBy})">
     </sort-dropdown>
     <a class="top-bar__btn"
-       ng-click="shareDialog.visible = !shareDialog.visible"
+       ng-click="onSharePage()"
        title="Share this page">
       <i class="h-icon-annotation-share"></i>
     </a>