Merge pull request #37 from hypothesis/app-component

Move root UI structure into an "app" component

h/static/scripts/app.js

@@ -15,6 +15,14 @@ if (settings.raven) {
   raven.init(settings.raven);
 }
 
+// Disable Angular features that are not compatible with CSP.
+//
+// See https://docs.angularjs.org/api/ng/directive/ngCsp
+//
+// The `ng-csp` attribute must be set on some HTML element in the document
+// _before_ Angular is require'd for the first time.
+document.body.setAttribute('ng-csp', '');
+
 var angular = require('angular');
 
 // autofill-event relies on the existence of window.angular so
@@ -118,12 +126,15 @@ module.exports = angular.module('h', [
   'ngRaven',
 ])
 
-  .controller('AppController', require('./app-controller'))
   .controller('AnnotationUIController', require('./annotation-ui-controller'))
   .controller('AnnotationViewerController', require('./annotation-viewer-controller'))
   .controller('StreamController', require('./stream-controller'))
   .controller('WidgetController', require('./widget-controller'))
 
+  // The root component for the application
+  .directive('hypothesisApp', require('./directive/app'))
+
+  // UI components and helpers
   .directive('annotation', require('./directive/annotation').directive)
   .directive('annotationShareDialog', require('./directive/annotation-share-dialog'))
   .directive('annotationThread', require('./directive/annotation-thread'))
@@ -198,3 +209,6 @@ module.exports = angular.module('h', [
   .run(setupHttp);
 
 processAppOpts();
+
+var appEl = document.querySelector('hypothesis-app');
+angular.bootstrap(appEl, ['h'], {strictDi: true});

h/static/scripts/directive/app.js

+'use strict';
+
+var AppController = require('../app-controller');
+
+module.exports = function () {
+  return {
+    restrict: 'E',
+    controller: AppController,
+    scope: {},
+    template: require('../../../templates/client/app.html'),
+  };
+};

h/templates/client/app.html

+<top-bar
+  auth="auth"
+  on-login="login()"
+  on-logout="logout()"
+  on-share-page="share()"
+  on-show-help-panel="helpPanel.visible = true"
+  is-sidebar="::isSidebar"
+  search-controller="search"
+  sort-key="sortKey()"
+  sort-keys-available="sortKeysAvailable()"
+  on-change-sort-key="setSortKey(sortKey)">
+</top-bar>
+
+<div class="create-account-banner" ng-if="isSidebar && auth.status === 'logged-out'" ng-cloak>
+  To annotate this document
+  <a href="{{ register_url }}" target="_blank">
+    create a free account
+  </a>
+  or <a href="" ng-click="login()">log in</a>
+</div>
+
+<div class="content" ng-cloak>
+  <login-form
+    ng-if="accountDialog.visible"
+    on-close="accountDialog.visible = false">
+  </login-form>
+  <sidebar-tutorial ng-if="isSidebar"></sidebar-tutorial>
+  <share-dialog
+    ng-if="shareDialog.visible"
+    on-close="shareDialog.visible = false">
+  </share-dialog>
+  <help-panel ng-if="helpPanel.visible"
+    on-close="helpPanel.visible = false"
+    auth="auth">
+  </help-panel>
+  <main ng-view=""></main>
+</div>