Add ability to generate via links from the sidebar.

- Use document plugin to get canonical url for sharing.
- Introduce Topbar share icon
- Add social media icons to icomoon
- Generate via uri in the share-dialog directive
- Add sharing via Facebook, Twitter, Google plus, and email
- Make account dialog and share dialog consistent
- Add information about sharing to the help page.
- Add tests (Thanks @nickstenning!)

h/static/scripts/app-controller.coffee

@@ -43,8 +43,18 @@ module.exports = class AppController
       applyUpdates(action, payload)
       $scope.$digest()
 
+    # App dialogs
+    $scope.accountDialog = visible: false
+    $scope.shareDialog = visible: false
+
+    # Check to see if we are on the stream page so we can hide share button.
+    if $window.top is $window
+      $scope.showShareButton = false
+    else
+      $scope.showShareButton = true
+
     oncancel = ->
-      $scope.dialog.visible = false
+      $scope.accountDialog.visible = false
 
     cleanupAnnotations = ->
       # Clean up any annotations that need to be unloaded.
@@ -68,7 +78,7 @@ module.exports = class AppController
       if isFirstRun and not (newVal or oldVal)
         $scope.login()
       else
-        $scope.dialog.visible = false
+        $scope.accountDialog.visible = false
 
       # Update any edits in progress.
       for draft in drafts.all()
@@ -85,12 +95,12 @@ module.exports = class AppController
       $route.reload()
 
     $scope.login = ->
-      $scope.dialog.visible = true
+      $scope.accountDialog.visible = true
       identity.request {oncancel}
 
     $scope.logout = ->
       return unless drafts.discard()
-      $scope.dialog.visible = false
+      $scope.accountDialog.visible = false
       identity.logout()
 
     $scope.loadMore = (number) ->
@@ -100,8 +110,6 @@ module.exports = class AppController
       $scope.search.query = ''
       annotationUI.clearSelectedAnnotations()
 
-    $scope.dialog = visible: false
-
     $scope.search =
       query: $location.search()['q']
 

h/static/scripts/app.coffee

@@ -111,6 +111,7 @@ module.exports = angular.module('h', [
 .directive('spinner', require('./directive/spinner'))
 .directive('tabbable', require('./directive/tabbable'))
 .directive('tabReveal', require('./directive/tab-reveal'))
+.directive('shareDialog', require('./directive/share-dialog'))
 
 .filter('converter', require('./filter/converter'))
 .filter('moment', require('./filter/moment'))

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 = ''
+
+    # Watch scope.shareDialog.visible: when it changes to true, focus input
+    # and selection.
+    scope.$watch (-> scope.shareDialog?.visible), (visible) ->
+      if visible
+        scope.$evalAsync(-> elem.find('#via').focus().select())
+
+    scope.$watchCollection (-> crossframe.providers), ->
+      if crossframe.providers?.length
+        # XXX: Consider multiple providers in the future
+        p = crossframe.providers[0]
+        if p.entities?.length
+          e = p.entities[0]
+          scope.viaPageLink = 'https://via.hypothes.is/' + e
+
+  restrict: 'A'
+  templateUrl: 'share_dialog.html'
+]

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

+{module, inject} = require('angular-mock')
+
+assert = chai.assert
+
+describe 'share-dialog', ->
+  $scope = null
+  $compile = null
+  fakeCrossFrame = null
+
+  before ->
+    angular.module('h', [])
+    .directive('shareDialog', require('../share-dialog'))
+
+  beforeEach module('h')
+  beforeEach module('h.templates')
+
+  beforeEach module ($provide) ->
+    fakeCrossFrame = {providers: []}
+
+    $provide.value 'crossframe', fakeCrossFrame
+    return
+
+  beforeEach inject (_$compile_, _$rootScope_) ->
+    $compile = _$compile_
+    $scope = _$rootScope_.$new()
+
+  it 'generates new via link', ->
+    $element = $compile('<div share-dialog="">')($scope)
+    fakeCrossFrame.providers.push {entities: ['http://example.com']}
+    $scope.$digest()
+    assert.equal($scope.viaPageLink,
+                 'https://via.hypothes.is/http://example.com')

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

@@ -117,7 +117,11 @@ describe 'AppController', ->
 
   it 'does not show login form for logged in users', ->
     createController()
-    assert.isFalse($scope.dialog.visible)
+    assert.isFalse($scope.accountDialog.visible)
+
+  it 'does not show the share dialog at start', ->
+    createController()
+    assert.isFalse($scope.shareDialog.visible)
 
   describe 'applyUpdate', ->
 

h/static/styles/common.scss

@@ -111,6 +111,27 @@ html {
 }
 
 
+// Share this view /////////////////////
+.share-dialog-toggle {
+  top: 1px;
+  left: 8px;
+  position: relative;
+  cursor: pointer;
+  color: $gray-light;
+  float: left;
+  margin-right: 15px;
+
+  &:hover {
+    color: $gray-dark;
+  }
+}
+
+.share-links {
+  a {
+    font-size: 1.5em;
+    padding: .3em;
+  }
+}
 
 //FORM RELATED////////////////////////////////
 .form-horizontal {

h/static/styles/simple-search.scss

@@ -9,7 +9,7 @@
   @include clearfix;
   position: relative;
   padding: 0 1.5385em;
-  color: $gray;
+  color: $gray-darker;
 }
 
 .simple-search-form * {
@@ -23,7 +23,7 @@
 }
 
 :not(:focus) ~ .simple-search-icon {
-  color: $gray-lighter;
+  color: $gray-light;
 }
 
 input.simple-search-input {

h/templates/client/share_dialog.html

+<div id="dialog" class="sheet content">
+  <i class="close h-icon-close"
+     role="button"
+     title="Close"
+     ng-click="shareDialog.visible = false"></i>
+  <div class="form-vertical tabbable">
+	<div class="form tab-pane" data-title="Share">
+	  <p>Share the link below to show anyone these annotations and invite them to contribute their own.</p>
+	  <p><input id="via"
+				class="form-input"
+				type="text"
+				ng-value="viaPageLink"
+				readonly /></p>
+	  <p class="share-links">
+		<a href="//twitter.com/intent/tweet?url={{viaPageLink}}"
+		   target="_blank"
+		   title="Tweet link"
+		   class="h-icon-twitter"></a>
+		<a href="//www.facebook.com/sharer/sharer.php?u={{viaPageLink}}"
+		   target="_blank"
+		   title="Share on Facebook"
+		   class="h-icon-facebook"></a>
+		<a href="//plus.google.com/share?url={{viaPageLink}}"
+		   target="_blank"
+		   title="Post on Google Plus"
+		   class="h-icon-google-plus"></a>
+		<a href="mailto:?subject=Let's%20Annotate&amp;body={{viaPageLink}}"
+		   title="Share via email"
+		   class="h-icon-mail"></a>
+		</p>
+	</div>
+  </div>
+</div>