Help angular module

Makefile

@@ -194,7 +194,8 @@ HTML=login/index.html \
 	 record/index.html \
 	 recordedit/mdHelp.html \
 	 lib/switchUserAccounts.html \
-	 $(DIST)/chaise-dependencies.html
+	 $(DIST)/chaise-dependencies.html \
+	 help/index.html
 
 # the minified files that need to be created
 MIN=$(DIST)/$(SHARED_JS_VENDOR_ASSET_MIN) \
@@ -203,7 +204,8 @@ MIN=$(DIST)/$(SHARED_JS_VENDOR_ASSET_MIN) \
 	$(DIST)/$(RECORDSET_JS_SOURCE_MIN) \
 	$(DIST)/$(RECORDEDIT_JS_SOURCE_MIN) \
 	$(DIST)/$(VIEWER_JS_SOURCE_MIN) \
-	$(DIST)/$(LOGIN_JS_SOURCE_MIN)
+	$(DIST)/$(LOGIN_JS_SOURCE_MIN) \
+	$(DIST)/$(HELP_JS_SOURCE_MIN)
 
  DIST=dist
 
@@ -515,6 +517,28 @@ lib/switchUserAccounts.html: lib/switchUserAccounts.html.in .make-switchuser-inc
 	$(info - creating lib/switchUserAccounts.html)
 	@$(call build_html,.make-switchuser-includes,lib/switchUserAccounts.html)
 
+# -------------------------- help app -------------------------- #
+HELP_JS_SOURCE=help/help.app.js
+
+HELP_JS_SOURCE_MIN=help.min.js
+$(DIST)/$(HELP_JS_SOURCE_MIN): $(HELP_JS_SOURCE)
+	$(call bundle_js_files,$(HELP_JS_SOURCE_MIN),$(HELP_JS_SOURCE))
+
+HELP_CSS_SOURCE=
+
+HELP_VENDOR_ASSET=
+
+.make-help-includes: $(BUILD_VERSION)
+	@> .make-help-includes
+	$(info - creating .make-help-includes)
+	@$(call add_css_link,.make-help-includes,$(HELP_CSS_SOURCE))
+	@$(call add_js_script,.make-help-includes,$(SHARED_JS_VENDOR_BASE) $(DIST)/$(SHARED_JS_VENDOR_ASSET_MIN) $(HELP)/$(HELP_VENDOR_ASSET) $(JS_CONFIG) $(DIST)/$(SHARED_JS_SOURCE_MIN) $(DIST)/$(HELP_JS_SOURCE_MIN))
+	@$(call add_ermrestjs_script,.make-help-includes)
+
+help/index.html: help/index.html.in .make-help-includes
+	$(info - creating help/index.html)
+	@$(call build_html,.make-help-includes,help/index.html)
+
 
 # -------------------------- utility functions -------------------------- #
 

common/navbar.js

@@ -145,7 +145,7 @@
 
     // TODO we might want to refactor this
     function isChaise(link, dcctx) {
-        var appNames = ["record", "recordset", "recordedit", "login"];
+        var appNames = ["record", "recordset", "recordedit", "login", "help"];
 
         // parses the url into a location object
         var eleUrl = document.createElement('a');

common/styles/scss/_help-app.scss

@@ -0,0 +1,39 @@
+.help-container {
+    .app-content-container {
+        // TODO should be removed if we added breadcrumb to the top of the page
+        .main-container {
+            padding-top: 20px;
+        }
+
+        // distant footer and main body
+        .main-body {
+            padding-bottom: 20px;
+        }
+    }
+
+    // override the default that we have for markdown containers
+    .markdown-container {
+        h1 {
+            font-size: $h1-font-size;
+        }
+
+        h2 {
+            font-size: $h2-font-size;
+        }
+
+        h3 {
+            font-size: $h3-font-size;
+        }
+
+        h4 {
+            font-size: $h4-font-size;
+        }
+    }
+
+    .chaise-help-image {
+        width: 500px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

common/styles/scss/app.scss

@@ -17,6 +17,7 @@
 @import "recordedit-app";
 @import "viewer-app";
 @import "switch-user-accounts";
+@import "help-app";
 
 
 // if we want to hide the page and then show navbar and content together

common/utils.js

@@ -1629,6 +1629,7 @@
          * @param   {Node=} parentContainer - the parent container. if undefined `body` will be used.
          * @param   {Node=} parentContainerSticky - the sticky area of parent. if undefined `#mainnav` will be used.
          * @param   {boolean} useDocHeight - whether we should use the doc height even if parentContainer is passed.
+         * @param   {Node=} fixedContent - if there's a fixed element that we want to set the top
          * Call this function once the DOM elements are loaded to attach resize sensors that will fix the height of bottom-panel-container
          * If you don't pass any parentContainer, it will use the body
          * It will assume the following structure in the given parentContainer:
@@ -1637,7 +1638,7 @@
          *    - .bottom-panel-container
          * Three ResizeSensors will be created for app-content, top-panel and bottom-panel to watch their size change.
          */
-        function attachContainerHeightSensors(parentContainer, parentContainerSticky, useDocHeight) {
+        function attachContainerHeightSensors(parentContainer, parentContainerSticky, useDocHeight, fixedContent) {
             try {
                 var parentUsableHeight,
                     appContent, // the container that we might set height for if container height is too small
@@ -1685,6 +1686,11 @@
                         // set the container's height
                         container.style.height = containerHeight + 'vh';
 
+                        if (fixedContent) {
+                            fixedContent.style.position = "fixed";
+                            fixedContent.style.top = (100 - containerHeight) + "vh";
+                        }
+
                         // now check based on actual pixel size
                         if (container.offsetHeight < 300) {
                             resetHeight();
@@ -2924,16 +2930,20 @@
             }
         }
 
-        function addTitle() {
+        function addTitle(title) {
             var chaiseConfig = ConfigUtils.getConfigJSON();
 
+            if (typeof title !== "string" || title.length === 0) {
+                title = chaiseConfig.headTitle;
+            }
+
             var titleTag = document.head.getElementsByTagName('title')[0];
             if (titleTag) {
-                titleTag.innerHTML = chaiseConfig.headTitle;
+                titleTag.innerHTML = title;
             } else {
-                var title = document.createElement("title");
-                title.innerHTML = chaiseConfig.headTitle;
-                document.head.appendChild(title);
+                titleTag = document.createElement("title");
+                titleTag.innerHTML = title;
+                document.head.appendChild(titleTag);
             }
         }
 

help/help.app.js

@@ -0,0 +1,101 @@
+(function () {
+    'use strict';
+
+    angular.module('chaise.configure-help', ['chaise.config'])
+
+    .constant('appName', 'help')
+
+    .run(['$rootScope', function ($rootScope) {
+        // When the configuration module's run block emits the `configuration-done` event, attach the app to the DOM
+        $rootScope.$on("configuration-done", function () {
+
+            angular.element(document).ready(function(){
+                angular.bootstrap(document.getElementById("help"), ["chaise.help"]);
+            });
+        });
+    }]);
+
+    angular.module('chaise.help', [
+        'ngSanitize',
+        'ngCookies',
+        'ngAnimate',
+        'duScroll',
+        'chaise.alerts',
+        'chaise.errors',
+        'chaise.modal',
+        'chaise.navbar',
+        'chaise.html',
+        'chaise.utils',
+        'ermrestjs',
+        'ui.bootstrap',
+        'chaise.footer',
+        'chaise.resizable'
+    ])
+
+    .config(['$compileProvider', '$cookiesProvider', '$logProvider', '$provide', '$uibTooltipProvider', 'ConfigUtilsProvider',
+            function($compileProvider, $cookiesProvider, $logProvider, $provide, $uibTooltipProvider, ConfigUtilsProvider) {
+        ConfigUtilsProvider.$get().configureAngular($compileProvider, $cookiesProvider, $logProvider, $uibTooltipProvider);
+
+        $provide.decorator('$templateRequest', ['ConfigUtils', 'UriUtils', '$delegate', function (ConfigUtils, UriUtils, $delegate) {
+            return ConfigUtils.decorateTemplateRequest($delegate, UriUtils.chaiseDeploymentPath());
+        }]);
+    }])
+
+    .constant('helpPages', {
+        'home': {
+            'file': 'home.md',
+            'title': 'Chaise help pages'
+        },
+        'viewer-annotation': {
+            'file': 'viewer-annotation.md',
+            'title': 'Viewer annotation drawing tools'
+        }
+    })
+
+    .run(['ConfigUtils', 'ERMrest', 'headInjector', 'UiUtils', 'UriUtils', 'helpPages', '$rootScope', '$timeout', '$window',
+         function (ConfigUtils, ERMrest, headInjector, UiUtils, UriUtils, helpPages, $rootScope, $timeout, $window) {
+
+        // find the help page based on the given query parameter
+        var pageName = UriUtils.getQueryParam($window.location.href, "page"), helpContent, page;
+
+        // remove the hash (the qetQueryParam doesn't do that properly)
+        if (typeof pageName === "string") {
+            var parts = pageName.split("#");
+            if (parts.length > 0) {
+                pageName = parts[0];
+            }
+        }
+
+        // if there are no pageName, go to home
+        if (!pageName || !(pageName in helpPages)) {
+            pageName = "home";
+        }
+
+        page = helpPages[pageName];
+
+        // change the title
+        headInjector.addTitle(page.title);
+
+        // fetch the help page
+        ConfigUtils.getHTTPService().get(UriUtils.chaiseDeploymentPath() + "help/" + page.file).then(function (response) {
+            helpContent = response.data;
+            return ERMrest.onload();
+        }).then(function () {
+            // show the content
+            $rootScope.helpContent = ERMrest.renderMarkdown(helpContent);
+            $rootScope.displayReady = true;
+
+            $timeout(function () {
+
+                // make sure the height is properly set
+                UiUtils.attachContainerHeightSensors(null, null, true);
+
+                // make sure footer position is correct
+                UiUtils.attachFooterResizeSensor(0);
+            });
+        }).catch(function (err) {
+            throw err;
+        });
+    }]);
+
+})();

help/home.md

@@ -0,0 +1,3 @@
+# Chaise help pages
+
+- [How to annotate an image](?page=viewer-annotation)

help/index.html.in

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" id="help">
+
+<head>
+    <title>Wiki pages</title>
+    %INCLUDES%
+</head>
+
+<body class="chaise-body">
+    <div class="configure-container" ng-app="chaise.configure-help">
+        <loading-spinner></loading-spinner>
+    </div>
+    <div class="app-container help-container">
+        <navbar></navbar>
+        <loading-spinner ng-show="!displayReady"></loading-spinner>
+        <div class="app-content-container" ng-show="displayReady">
+            <!-- <div class="top-panel-container">
+
+            </div> -->
+            <div class="bottom-panel-container">
+                <div class="side-panel-resizable close-panel"></div>
+                <div class="main-container">
+                    <div class="main-body container">
+                        <div ng-bind-html="helpContent | trustedHTML" class="markdown-container help-content"></div>
+                    </div>
+                    <footer></footer>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+
+</html>