Skip to content

Commit 3258977

Browse files
bertehberteh
committed
add support for icons, via FontAwesome
enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
2 parents d4007a9 + 770aa47 commit 3258977

8 files changed

+409
-292
lines changed

‎.gitmodules

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
[submodule "reveal.js"]
22
path = reveal.js
33
url = https://github.com/hakimel/reveal.js.git
4+
[submodule "Font-Awesome"]
5+
path = Font-Awesome
6+
url = https://github.com/FortAwesome/Font-Awesome.git

‎Font-Awesome

Submodule Font-Awesome added at 43cd36d

‎MindSlide-Export.html

+116-59
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<!DOCTYPE html><html lang="en">
1+
<!DOCTYPE html><html lang="en" xmlns:my="local.uri">
22
<head>
33
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
44
<title>MindSlide</title>
55
<meta name="description" content="Freeplane mindmap HTML presentation">
66
<meta name="author" content="Yours Respectfully">
77
<meta name="generator" content="Mindslide at http://berteh.github.io/mindslide/">
8-
<!--Mindslide version 0.3-->
8+
<!--Mindslide version 0.5-->
99
<meta name="apple-mobile-web-app-capable" content="yes">
1010
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@@ -24,12 +24,16 @@
2424
.illustrations.w5 a, .illustrations.w9 a, .illustrations.w10 a {max-width:18%}
2525

2626
/* bullet lists layout */
27-
.mindslide li p {margin: 0 0;}
28-
.mindslide section.content>ul li {font-size: 90%;}
29-
.mindslide section.content>ul>li:first-of-type, .mindslide section.title>ul li {list-style:none; display:block; font-size: 120%; margin-bottom:1ex}
27+
#mindslide li p {margin: 0 0;}
28+
#mindslide section.content>ul li {font-size: 90%;}
29+
#mindslide section.content>ul>li:first-of-type, #mindslide section.title>ul li {list-style:none; display:block; font-size: 120%; margin-bottom:1ex}
3030

31-
/*zenburn hack for inline code highlight*/
32-
pre.inline, .inline code {display:inline; width:auto;}
31+
/* zenburn hack for inline code highlight */
32+
pre.inline, .inline code {display:inline; width:auto;}
33+
34+
/* icons */
35+
#mindslide.awesome section.content li.icon {list-style:none; margin-left: -1em}
36+
#mindslide.awesome .fa {font-family: FontAwesome; margin-right: 1ex;}
3337
</style>
3438
<!--If the query includes 'print-pdf', use the PDF print sheet. works in Chrome, maybe not other browsers-->
3539
<script type="text/javascript">
@@ -40,23 +44,26 @@
4044
<script src="reveal.js/lib/js/html5shiv.js"></script>
4145
<![endif]
4246
-->
43-
<!--placeholder for custom header items-->
47+
<!--placeholder for custom header items (typically scripts or stylesheets)-->
4448
</head>
4549
<body>
4650
<div class="reveal">
4751
<!--Any section element inside of this container is displayed as a slide-->
48-
<div class="slides mindslide">
52+
<div id="mindslide" class="slides">
4953
<section class="title" id="ID_1723255651">
5054
<h1>MindSlide</h1>
5155
<ul>
5256
<li>View your Mindmap as an HTML presentation / slideshow</li>
53-
<li>hit &lt;space&gt; to navigate</li>
5457
<li>
55-
<a href="https://github.com/berteh/mindslide" class="link external">
56-
<p>
57-
<small>MindSlide source code</small>
58+
<p></p>
59+
<p style="text-align: center">
60+
hit <code>&lt;space&gt;</code>&nbsp;to navigate
61+
</p>
62+
</li>
63+
<li>
64+
<p style="text-align: center">
65+
<small><a href="https://github.com/berteh/mindslide/">source code</a>&nbsp;(on github) - <a href="https://donorbox.org/donate-98">donate</a>&nbsp;&nbsp;(on donorbox)</small>
5866
</p>
59-
</a>
6067
</li>
6168
</ul>
6269
</section>
@@ -110,18 +117,19 @@ <h2>Features</h2>
110117
</li>
111118
<li>
112119
<p>
113-
2D overview <small>(hit "esc" or "o")</small>&nbsp;easy navigation <small>(space, arrows, click, touch)</small>&nbsp;help <small>(?)</small>
120+
2D overview <small>(hit "esc" or "o")</small>&nbsp;and easy navigation <small>(space, arrows, click, touch)</small>&nbsp;help <small>(?)</small>
114121
</p>
115122
</li>
116123
<li>
117124
<p>
118-
simple <font face="Courier New, Courier, Nimbus Mono L, serif, monospace"><b style="font-family: Courier New, Courier, Nimbus Mono L, serif, monospace">&amp; rich-text </b></font><font color="#e1a71c"><u>nodes</u></font>, including code highlight
125+
simple <font face="Courier New, Courier, Nimbus Mono L, serif, monospace"><b style="font-family: Courier New, Courier, Nimbus Mono L, serif, monospace">&amp; rich-text</b></font><font color="#e1a71c">&nbsp;<u>nodes</u></font>, including code highlight:
119126
</p>
120127
<pre>
121128
<code class="css">@page:right { margin: 1cm 2cm 1.3cm 4cm; }</code>
122129
</pre>
123130
</li>
124-
<li>links, images and nodes connectors<a href="#/ID_1494003336" class="link connector"> &#8605;</a>
131+
<li class="icon">
132+
<span aria-hidden="true" class="fa fa-check"></span>links, images, icons and nodes connectors<a href="#/ID_1494003336" class="link connector"> &#8605;</a>
125133
</li>
126134
<li>
127135
<p>
@@ -159,22 +167,27 @@ <h2>Features</h2>
159167
<section class="content" id="ID_1665333044">
160168
<h3>Recent improvements</h3>
161169
<ul>
162-
<li>Reveal.js now allows for</li>
163-
<li>
170+
<li class="icon">
171+
<span aria-hidden="true" class="fa fa-smile-o"></span>Mindslide now shows nodes icons</li>
172+
<li class="icon">
173+
<span aria-hidden="true" class="fa fa-bookmark"></span>
164174
<p>
165-
more stunning transitions, including <i>fade, slide, convex, concave, zoom</i>.
175+
The last update of Reveal.js now allows for
166176
</p>
167-
</li>
177+
<ul>
168178
<li>
169-
<p>
170-
parallax background (see <a href="http://berteh.github.io/mindslide/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg&amp;parallaxBackgroundSize=2100px%20900px#/ID_1723255651">demo</a>)
171-
</p>
172-
</li>
173-
<li>slides shuffling</li>
179+
more stunning transitions, including <i>fade, slide, convex, concave, zoom</i>.
180+
</li>
174181
<li>
175-
<p>
176-
auto advancing slides (see <a href="https://github.com/hakimel/reveal.js#auto-sliding">documentation</a>)
177-
</p>
182+
parallax background (see <a href="http://berteh.github.io/mindslide/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg&amp;parallaxBackgroundSize=2100px%20900px#/ID_1723255651">demo</a>)
183+
</li>
184+
<li>
185+
slides shuffling
186+
</li>
187+
<li>
188+
auto advancing slides (see <a href="https://github.com/hakimel/reveal.js#auto-sliding">documentation</a>)
189+
</li>
190+
</ul>
178191
</li>
179192
</ul>
180193
</section>
@@ -216,10 +229,13 @@ <h3>Install MindSlide</h3>
216229
</p>
217230
<ol>
218231
<li>
219-
dowload and unpack <a href="https://github.com/berteh/mindslide/archive/master.zip">https://github.com/berteh/mindslide/archive/master.zip</a>&nbsp;into "mindslide" directory (or pick any name you like)
232+
dowload and unpack <a href="https://github.com/berteh/mindslide/archive/master.zip">mindslide's master.zip</a>&nbsp;into "mindslide" directory (or pick any name you like)
233+
</li>
234+
<li>
235+
download and unpack <a href="https://github.com/hakimel/reveal.js/archive/master.zip">reveal.js's master.zip</a>&nbsp;into mindslide/reveal.js directory
220236
</li>
221237
<li>
222-
download and upack <a href="https://github.com/hakimel/reveal.js/archive/master.zip">https://github.com/hakimel/reveal.js/archive/master.zip</a>&nbsp;into mindslide/reveal.js directory
238+
download and unpack <a href="https://github.com/FortAwesome/Font-Awesome/archive/master.zip">FontAwesome's master.zip</a>&nbsp;into mindslide/Font-Awesome directory
223239
</li>
224240
</ol>
225241
</li>
@@ -228,12 +244,10 @@ <h3>Install MindSlide</h3>
228244
(alternatively) you can also clone the source code:
229245
</p>
230246
<pre>
231-
<code class="bash">git clone https://github.com/berteh/mindslide.git
232-
cd mindslide # (dir mindslide on windows)
233-
git submodule update --init</code>
247+
<code class="bash">git clone --recursive https://github.com/berteh/mindslide.git</code>
234248
</pre>
235249
</li>
236-
<li>copy mindslide/mindslide.xsl, mindslide/config.xml and mindslide/reveal-configuration.xsl into your freeplane/resources/xslt directory</li>
250+
<li>then copy mindslide/mindslide.xsl, mindslide/config.xml and mindslide/reveal-configuration.xsl into your freeplane/resources/xslt directory</li>
237251
</ul>
238252
</section>
239253
<section class="content" id="ID_1592220697">
@@ -248,7 +262,7 @@ <h3>Use MindSlide</h3>
248262
</li>
249263
<li>
250264
<p>
251-
<b>save the HTML presentation in mindslide directory</b>! <small>(or edit settings in config.xml to use the online CDN as base directory)</small>
265+
<b>save the HTML presentation in your mindslide directory</b>! <small>(or edit settings in config.xml to use the online CDN hosts for both reveal and font awesome)</small>
252266
</p>
253267
<a href="#/ID_1593867677" class="link connector"> &#8605;</a>
254268
</li>
@@ -278,10 +292,11 @@ <h4>Hide Nodes</h4>
278292
</div>
279293
<aside class="notes">
280294
<p>
281-
The original mindmap has more content in this node... but it does not show in your slides.
295+
The original mindmap has more content in this node... but it does not show in your slides (nor do their respective speakers notes).
282296
</p>
297+
<p></p>
283298
<p>
284-
Great for creating content in Freeplane, and presenting only when it's ready.
299+
Great for preparing content in Freeplane, and presenting every part only when it's ready.
285300
</p>
286301
</aside>
287302
</section>
@@ -339,6 +354,11 @@ <h3>Contribute / Contact</h3>
339354
Spread the word about <a href="http://berteh.github.io/mindslide/">Mindslide</a>, <a href="http://freeplane.sourceforge.net/">Freeplane</a>&nbsp;and <a href="http://lab.hakim.se/reveal-js/">Reveal.js</a>
340355
</p>
341356
</li>
357+
<li>
358+
<p>
359+
Another way to help keeping this project alive is to <a href="https://donorbox.org/donate-98">donate</a>.
360+
</p>
361+
</li>
342362
</ul>
343363
</section>
344364
<section class="content" id="ID_1869571896">
@@ -385,16 +405,28 @@ <h2>
385405
Not supported yet</h2>
386406
<ul>
387407
<li>Many elements are still not supported. We welcome any pointers how to best do it, as well as help to do so!</li>
388-
<li>node and edge style, icons and clouds</li>
389-
<li>free "post-it" nodes are not marked differently from other nodes</li>
390-
<li>node attributes, zoom on images, author informations</li>
391-
<li>packaging presentation with all its dependencies in a single portable file.</li>
392-
<li>summary nodes</li>
393-
<li>
394-
<a href="https://github.com/berteh/mindslide/issues" class="link external">Put your suggestions on our "issues" list!</a>
395-
</li>
396-
<li>Known Bugs<a href="#/ID_191827926" class="link subsection"> &#8628;</a>
397-
</li>
408+
<li class="icon">
409+
<span aria-hidden="true" class="fa fa-close"></span>node and edge style, clouds</li>
410+
<li class="icon">
411+
<span aria-hidden="true" class="fa fa-bell"></span>free "post-it" nodes are not marked differently from other nodes</li>
412+
<li class="icon">
413+
<span aria-hidden="true" class="fa fa-list"></span>node attributes, zoom on images, author informations</li>
414+
<li class="icon">
415+
<span aria-hidden="true" class="fa fa-paperclip"></span>packaging presentation with all its dependencies in a single portable file.</li>
416+
<li class="icon">
417+
<span aria-hidden="true" class="fa fa-lightbulb-o"></span><a href="https://github.com/berteh/mindslide/issues" class="link external">Put your suggestions on our "issues" list!</a>
418+
</li>
419+
<li class="icon">
420+
<span aria-hidden="true" class="fa fa-warning"></span>Known Bugs<a href="#/ID_191827926" class="link subsection"> &#8628;</a>
421+
</li>
422+
<li>summary node</li>
423+
</ul>
424+
</section>
425+
<section class="content" id="ID_1116046035">
426+
<h3></h3>
427+
<ul>
428+
<li>summary node</li>
429+
<li>summary node</li>
398430
</ul>
399431
</section>
400432
<section class="content" id="ID_191827926">
@@ -426,7 +458,11 @@ <h2>Acknowledgments</h2>
426458
<ul>
427459
<li>
428460
<p>
429-
This export tool relies on the fantastic <a href="http://lab.hakim.se/reveal-js/">reveal.js</a>&nbsp;HTML presentation framework, and <a href="http://freeplane.sourceforge.net">Freeplane</a>... to map your thoughts.
461+
This export tool relies on the fantastic <a href="http://lab.hakim.se/reveal-js/">Reveal.js</a>&nbsp;HTML presentation framework, and <a href="http://freeplane.sourceforge.net">Freeplane</a>&nbsp;mind mapping tool. It uses beautiful icons from <a href="http://fontawesome.io">Font Awesome</a>.
462+
</p>
463+
<p></p>
464+
<p>
465+
If this feature helps you saving valuable time kindly consider a <a href="https://donorbox.org/donate-98">donation</a>&nbsp; to help keeping it alive
430466
</p>
431467
</li>
432468
</ul>
@@ -441,7 +477,7 @@ <h3 class="thanks">Thank You!</h3>
441477
</section>
442478
</div>
443479
</div>
444-
<footer class="info">MindSlide | <a href="http://berteh.github.io/mindslide/">Mindslide</a> v 0.3 | <a href="http://freeplane.sourceforge.net/">Freeplane</a> map vfreeplane 1.3.0</footer>
480+
<footer class="info">MindSlide | <a href="http://berteh.github.io/mindslide/">Mindslide</a> v 0.5 | <a href="http://freeplane.sourceforge.net/">Freeplane</a> map vfreeplane 1.5.9</footer>
445481
<script src="reveal.js/lib/js/head.min.js"></script><script src="reveal.js/js/reveal.js"></script><script>
446482

447483
//run reveal.js
@@ -484,15 +520,36 @@ <h3 class="thanks">Thank You!</h3>
484520

485521
// Optional libraries used to extend on reveal.js - see https://github.com/hakimel/reveal.js#dependencies
486522
dependencies: [
487-
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
488-
{ src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
489-
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
490-
{ src: 'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
491-
//{ src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
492-
//{ src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
493-
//{ src: 'reveal.js/plugin/math/math.js', async: true }
523+
{ src:'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
524+
{ src:'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
525+
{ src:'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
526+
{ src:'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
527+
//{ src:'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector('[data-markdown]' ); } },
528+
//{ src:'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector('[data-markdown]' ); } },
529+
//{ src:'reveal.js/plugin/math/math.js', async: true }
494530
]
495-
});
496-
</script>
531+
532+
});
533+
</script>
534+
<link rel="stylesheet" crossorigin="anonymous" href="Font-Awesome/css/font-awesome.min.css">
535+
<script>
536+
// add "awesome" class to #mindslide (only) if FontAwesome is loaded (for icons layout)
537+
538+
function css(element, property) {
539+
return window.getComputedStyle(element, null).getPropertyValue(property);
540+
}
541+
542+
window.onload = function () {
543+
var span = document.createElement('span');
544+
span.className = 'fa';
545+
span.style.display = 'none';
546+
document.body.insertBefore(span, document.body.firstChild);
547+
if ((css(span, 'font-family')) == 'FontAwesome') {
548+
var ms = document.getElementById("mindslide");
549+
ms.className += " awesome";
550+
}
551+
document.body.removeChild(span);
552+
};
553+
</script>
497554
</body>
498555
</html>

0 commit comments

Comments
 (0)