adding javascript to single slides

README.md

@@ -35,7 +35,10 @@ the `-dir` flag should point to the folder with your presentation
 
 ### syntax additions
 
-`@img/imagename.gif` - `@css/stylesheet.css` - `@code/language`
+`@img/imagename.gif`  
+`@css/stylesheet.css`  
+`@js/jsfile.js`  
+`@code/language`  
 
 the path is relative to your presentation directory, if you like to create an image folder it would change to `@img/images/imagename.gif`
 
@@ -60,6 +63,25 @@ example slide with background image and stylesheet:
 @css/whiteHeadline.css
 ```
 
+with the `@js` annotation, you can add javascript to your slide - the code will run in the moment you enter the slide.
+
+``` md
+# javascript!
+@js/jsdemo.js
+```
+
+2 variables are available: `_slide` is your current slide-div, and `_slideIndex` - is your slide index... obviously
+
+the jsdemo looks like
+
+```js
+_slide.style.backgroundColor = "red"
+setTimeout(() => {
+  _slide.style.backgroundColor = "inherit"
+}, 1000)
+```
+
+
 example presentation: https://github.com/cdreier/slide-serve/tree/master/example
 
 > to see the example presentation, just run slide-serve without any flags

example/jsdemo.js

@@ -0,0 +1,5 @@
+// var _slide = document.getElementById("")
+_slide.style.backgroundColor = "red"
+setTimeout(() => {
+  _slide.style.backgroundColor = "inherit"
+}, 1000)

example/slide12.md

@@ -28,6 +28,9 @@ just use 'SLIDENUMBER' as placeholder
 @img/example_bg.jpg
 @css/whiteHeadline.css
 
+# javascript!
+@js/jsdemo.js
+
 # syntax highlightning
 just tell me what language
 with @code/javascript

parser.go

@@ -14,15 +14,16 @@ import (
 )
 
 type slide struct {
-	content string
-	code    string
-	image   string
-	styles  string
-	hash    string
+	content    string
+	code       string
+	image      string
+	styles     string
+	javascript string
+	hash       string
 }
 
 func (s *slide) buildHash() {
-	s.hash = md5Hash(s.content + s.styles + s.image)
+	s.hash = md5Hash(s.content + s.styles + s.image + s.javascript)
 }
 
 type slideContent struct {
@@ -115,6 +116,13 @@ func (h *holder) generateSlides(content string) {
 					s.styles = string(data)
 				}
 
+			} else if strings.HasPrefix(tmp, "@js") {
+				filename := strings.Replace(tmp, "@js", "", -1)
+				data, err := ioutil.ReadFile(h.dir + filename)
+				if err == nil {
+					s.javascript = string(data)
+				}
+
 			} else if strings.HasPrefix(tmp, "@code/") {
 				s.code = strings.Replace(tmp, "@code/", "", -1)
 			} else {

renderer.go

@@ -71,6 +71,18 @@ func renderSlide(s slide, index int, codeTheme string) string {
 		`, cssClasses)
 	}
 
+	if s.javascript != "" {
+		slideMarkup += fmt.Sprintf(`
+			<script>
+				window.addEventListener('slideEnter_%d', function(){
+					var _slideIndex = %d;
+					var _slide = document.querySelectorAll(".slide-" + _slideIndex);
+					_slide = _slide[0];
+					%s
+				})
+			</script>
+		`, index, index, s.javascript)
+	}
 	slideMarkup += endSlide()
 	return slideMarkup
 }

www/slide.html

@@ -33,6 +33,9 @@
             el.style.visibility = 'hidden';
           }
         }
+
+        var evt = new Event("slideEnter_"+slideIndex)
+        window.dispatchEvent(evt)
       }
 
       function next() {
@@ -45,7 +48,6 @@
 
       window.onload = function() {
         resize();
-        // render(document.getElementById('slide').innerHTML);
         goTo(window.location.hash.substring(1)||0);
         window.onclick = next;
         window.onresize = resize;