From 06bb8b8ed0de0863ae6c0e75a4a72c3a932c74c5 Mon Sep 17 00:00:00 2001 From: Kayne Ruse Date: Wed, 22 Mar 2017 20:07:55 +1100 Subject: [PATCH] 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. --- public_html/index.html | 5 +++-- public_html/package.json | 3 ++- public_html/rules.md | 4 ++++ public_html/styles/shared.css | 7 +++++++ public_html/utilities.js | 22 ++++++++++++++++++++-- 5 files changed, 36 insertions(+), 5 deletions(-) diff --git a/public_html/index.html b/public_html/index.html index 5fea4b0..aa5013b 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -1,9 +1,10 @@ - - + + + diff --git a/public_html/package.json b/public_html/package.json index b26759d..6e26828 100644 --- a/public_html/package.json +++ b/public_html/package.json @@ -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" } } diff --git a/public_html/rules.md b/public_html/rules.md index 72acdd4..0e4c747 100644 --- a/public_html/rules.md +++ b/public_html/rules.md @@ -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 === diff --git a/public_html/styles/shared.css b/public_html/styles/shared.css index 19e72cc..69861f2 100644 --- a/public_html/styles/shared.css +++ b/public_html/styles/shared.css @@ -58,3 +58,10 @@ footer { .ascend:after{ content: "\25BC"; } + +/* device only features */ +@media screen and (min-width: 480px) { + .mobileOnly { + display: none; + } +} diff --git a/public_html/utilities.js b/public_html/utilities.js index 8e63351..3be2807 100644 --- a/public_html/utilities.js +++ b/public_html/utilities.js @@ -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 '
'; + } else { + // closing tag + return '
'; + } + } + }); + +//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);