All geek questions in one place

Multiple markup selection in disclosure

I use Reveal.js for my lectures. It works great with loading an external markup file at runtime. Is there a way to set up a single master.html master file that allows me to choose which external file to upload? What I mean will be like a table of contents, but each topic will be a separate markup file. I suspect javascript will be the way to do this, but while I am able (not an expert) with HTML and CSS, I cannot write a javascript string (I can copy, paste and load).

Google was not my friend.

+4
source share
1 answer

It also eavesdropped on me, and so I decided to see if I could do a Google search and spliced ​​my way through it.

The main Reveal.js div as follows:

 <body> <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides"> <section data-markdown="somefile" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:"> </section> </div> </div> <script src="reveal.js/lib/js/head.min.js"></script> <script src="reveal.js/js/reveal.min.js"></script> <script> // Full list of configuration options available here: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ . . . }); </script> </body>

Easy way (manually enter the full file name)

We can dynamically set an attribute, for example. data-markdown in a <section> element with JavaScript. There are two small obstacles here: we must do this after creating the element, but before Reveal.js does its initialization, otherwise the internal state of the DOM and Reveal.js will fail. It is quite simple (only showing the modified section):

 <!-- Any section element inside of this container is displayed as a slide --> <div class="slides"> <section id="presentation" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:"> </section> <script type="text/javascript"> document.getElementById("presentation").setAttribute("data-markdown",prompt("Filename:","default-filename.md")); </script>

When you load the page, you get a small warning / prompt in which you enter the full file name (relative to the web server root). If you do what I do and use python -m'SimpleHTTPServer to start the local web server directly in the directory with all the slides, then this is not so bad.

Difficult path (file selection dialog)

A simple way is a good start, but it is not as convenient as a fully graphical choice. Fortunately, it turns out that we can do this too. The tough part here is that we have to start the file selector after the page is fully loaded and displayed, which means we have to do something to get the state of Reveal.js with DOM support. The API has a sync() method, which should be useful only for such situations, but for some reason it does not work. Instead, we delay the full initialization of Reveal.js until we install the external Markdown file:

 <body> <!-- Choose file button --> <input type="file" id="external_md" name="markdown" > <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides"> <section id="presentation" data-separator="^\n\n\n" data-vertical="^\n\n" data-notes="^Note:"> </section> <script type="text/javascript"> function selectFile(evt) { // the file chooser actually returns a list // (in case you enabled multiple selection) file = evt.target.files[0].name; document.getElementById("presentation").setAttribute("data-markdown",file); // now it time to init! delayed_init(); // remove file selector button fileSelector = document.getElementById("external_md"); fileSelector.parentNode.removeChild(fileSelector); } document.getElementById('external_md').addEventListener('change',selectFile,false); </script> </div> </div> <script src="reveal.js/lib/js/head.min.js"></script> <script src="reveal.js/js/reveal.min.js"></script> <script> // we have to wrap the init function both to delay it and to make it // easier to call later, all without moving big blocks of code around function delayed_init(){ // Full list of configuration options available here: // https://github.com/hakimel/reveal.js#configuration Reveal.initialize({ . . . }); } </script> </body>

These are three areas of change: 1. Adding an <input> element to control file selection. 2. Optional Javascript in the middle. 3. End the call to Reveal.initialize() with a dummy function to delay initialization.

All of this worked for me with the current version of Reveal.js ( 9cf7de54b8f ). Please note that I save all Reveal.js material in the reveal.js , so you may need to configure the paths accordingly.

+3
source

Source: https://habr.com/ru/post/1492587/

More articles:


All Articles