From d7e92e2513073baeba232549fafbcadd9e4231ee Mon Sep 17 00:00:00 2001
From: Stefan Schindler <dns2utf8@estada.ch>
Date: Thu, 21 Sep 2017 12:18:13 +0200
Subject: [PATCH] Add a JavaScript example

---
 book-example/book.toml            |  1 +
 book-example/my_custom.css        |  1 +
 book-example/my_custom.js         | 12 ++++++++++++
 book-example/src/format/config.md |  7 +++----
 4 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 book-example/my_custom.css
 create mode 100644 book-example/my_custom.js

diff --git a/book-example/book.toml b/book-example/book.toml
index 4679a3a2..da7da92b 100644
--- a/book-example/book.toml
+++ b/book-example/book.toml
@@ -4,4 +4,5 @@ author = "Mathieu David"
 
 [output.html]
 additional-css = ["my_custom.css"]
+additional-js = ["my_custom.js"]
 mathjax-support = true
diff --git a/book-example/my_custom.css b/book-example/my_custom.css
new file mode 100644
index 00000000..b20aaf80
--- /dev/null
+++ b/book-example/my_custom.css
@@ -0,0 +1 @@
+.custom_border { border: 2px dotted #f00; padding: 6px; }
diff --git a/book-example/my_custom.js b/book-example/my_custom.js
new file mode 100644
index 00000000..ca67b927
--- /dev/null
+++ b/book-example/my_custom.js
@@ -0,0 +1,12 @@
+(function() {
+// register a function run when the page is loaded completely
+document.addEventListener('DOMContentLoaded', function() {
+    // we extend all elements with class="custom_border" with a little text
+    var divs = document.querySelectorAll('.custom_border');
+    divs.forEach(function(e) {
+        try {
+            e.innerHTML += ' - extended with JavaScript';
+        } catch (e) {}
+    });
+}, false,);
+})();
diff --git a/book-example/src/format/config.md b/book-example/src/format/config.md
index aa8a107e..67a833cc 100644
--- a/book-example/src/format/config.md
+++ b/book-example/src/format/config.md
@@ -19,8 +19,6 @@ destination = "my-example-book"
 additional-css = ["my_custom.css"]
 ```
 
-<div class="custom_border">Formatting elements with custom css.</div>
-
 ## Supported configuration options
 
 It is important to note that **any** relative path specified in the in the configuration will
@@ -85,7 +83,8 @@ destination = "my-book" # the output files will be generated in `root/my-book` i
 theme = "my-theme"
 curly-quotes = true
 google-analytics = "123456"
-additional-css = ["custom.css", "custom2.css"]
-additional-js = ["custom.js"]
+additional-css = ["my_custom.css", "my_custom2.css"]
+additional-js = ["my_custom.js"]
 ```
 
+<div class="custom_border">Formatting elements with custom css.</div>