Hid TOC on desktops & tablets, read more

* I switched the markdown engine to markdown-it. * I used a plugin from the new engine called markdown-it-container to generate a div tag around the TOC * Configured the plugin to generate the classname mobileOnly * Recreated semantic's mobile only option using CSS.
2017-03-22 20:07:55 +11:00
parent 74f41ac28e
commit 06bb8b8ed0
5 changed files with 36 additions and 5 deletions
@@ -1,9 +1,10 @@
 <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="node_modules/markdown/lib/markdown.js"></script>
-    <script src="utilities.js"></script>
+    <script src="node_modules/markdown-it/dist/markdown-it.js"></script>
+    <script src="node_modules/markdown-it-container/dist/markdown-it-container.js"></script>
    <script src="tsorter.min.js"></script>
+    <script src="utilities.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.8/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="styles/shared.css" />
  </head>
@@ -9,7 +9,8 @@
  "author": "",
  "license": "ISC",
  "dependencies": {
-    "markdown": "^0.5.0",
+    "markdown-it": "^8.3.1",
+    "markdown-it-container": "^2.0.0",
    "markdown-toc": "^1.1.0"
  }
 }
@@ -1,5 +1,7 @@
 Fight your way across vast expanses, conquer enemy batallions, and survive in this world of immense mechas - wild combat machines commanded by the best pilots this side of the catastrophe.

+::: mobileOnly
+
 - [Basic Rules](#basic-rules)
  * [Phases of a Turn](#phases-of-a-turn)
 - [Types of Cards](#types-of-cards)
@@ -25,6 +27,8 @@ Fight your way across vast expanses, conquer enemy batallions, and survive in th
  * [Maximum Hand Size](#maximum-hand-size)
  * [Pilot Idiocy](#pilot-idiocy)

+:::
+
 Basic Rules
 ===

@@ -58,3 +58,10 @@ footer {
 .ascend:after{
 	content: "\25BC";
 }
+
+/* device only features */
+@media screen and (min-width: 480px) {
+	.mobileOnly {
+		display: none;
+	}
+}
@@ -1,4 +1,22 @@
-//PARAM: fname = file to load with an ajax request
+//global markdown object and configuration
+var markdown = window.markdownit()
+  //configure for semantic-style visibility controls
+  .use(window.markdownitContainer, 'mobileOnly', {
+    validate: function(params) {
+      return params.trim().match(/^mobileOnly$/);
+    },
+    render: function (tokens, idx) {
+      if (tokens[idx].nesting === 1) {
+        //opening tag
+        return '<div class="mobileOnly">';
+      } else {
+        // closing tag
+        return '</div>';
+      }
+    }
+  });
+
+//PARAM: fname = file to load with an ajax requesti
 //PARAM: node = DOM node to store the resulting data
 function printHTML(fname, node) {
  var request = new XMLHttpRequest();
@@ -30,7 +48,7 @@ function printMarkdown(fname, node) {
    }

    if (request.status === 200) {
-      node.innerHTML = markdown.toHTML(request.responseText);
+      node.innerHTML = markdown.render(request.responseText);
    }
    else {
      console.log("printMarkdown status:", request.status);