implemented first help overlay

5 years ago · 613268a4e1
parent 938137ae7f
commit 613268a4e1
5 changed files with 39 additions and 4 deletions
--- a/src/assets/pages/resources-landing-page.html
+++ b/src/assets/pages/resources-landing-page.html
@ -26,7 +26,7 @@
        <div class="helpdropdown">
        <a class="p-2 text-navbartext" href="#" role="button" id="helpdropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="-75,4">Help</a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
-                <a class="dropdown-item" href="help-about.html">About the Resource Center</a>
+                <a class="dropdown-item" onclick="help.openHelpOverlay('help-about.html');">About the Resource Center</a>
                <a class="dropdown-item" href="help-searches.html">Searches</a>
                <a class="dropdown-item" href="help-categories.html">Categories</a>
                <a class="dropdown-item" href="help-resources.html">Resources</a>
@ -160,8 +160,9 @@

 </body>

-
 <script src="scripts/tsUtil.js"></script>
 <script>loadTSTarget("themes.js");</script>
+<script>let help = loadTSTarget("help.js");</script>
+
 <script src="scripts/index_app.js"></script>
 </html>
--- a/src/assets/pages/styles/theme-base.scss
+++ b/src/assets/pages/styles/theme-base.scss
@ -155,4 +155,15 @@ body {
  color: map-get($theme-colors, feedbackmessagehint) !important;
 }

-
+.overlay-custom {
+  position: fixed; /* Sit on top of the page content */
+  width: 100%; /* Full width (cover the whole page) */
+  height: 100%; /* Full height (cover the whole page) */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+  z-index: 2000; /* Specify a stack order in case you're using a different order for other elements */
+  cursor: pointer; /* Add a pointer on hover */
+}
--- a/src/assets/views/help-overlay.mustache
+++ b/src/assets/views/help-overlay.mustache
@ -0,0 +1,7 @@
+<html lang="en">
+<div id="help-overlay" onclick="help.closeOverlay()" class="overlay-custom">
+    <p style="position:fixed; top:50%; left:50%; color:red;">
+        HELLO FROM THE HELP SCREEN
+    </p>
+</div>
+</html>
--- a/src/ts_source/help.ts
+++ b/src/ts_source/help.ts
@ -0,0 +1,16 @@
+import {loadTemplate} from "./templates";
+
+let $ = require('jquery')
+
+console.log("we got it loaded")
+
+export function openHelpOverlay(resourceName: string){
+    let body = $("body");
+    let loadedTemplate = loadTemplate("help-overlay.mustache", {}, (x)=>{});
+    let content = $(loadedTemplate);
+    body.append(content)
+}
+
+export function closeOverlay(){
+    $("#help-overlay").remove();
+}
--- a/src/ts_source/templates.ts
+++ b/src/ts_source/templates.ts
@ -20,7 +20,7 @@ export function cacheTemplates() {
        });
 }

-export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType) {
+export function loadTemplate(filename: string, obj: object, cb: TemplateCallbackType): string {
    let contents = templateCache[filename];
    if (!contents) throw new Error("No such template: " + filename);
    let rendered = Mustache.render(contents, obj)