Merge pull request #11 from msoedov/theme-chage

Theme select button

static/js/index.js

@@ -1,54 +1,51 @@
 $(function() {
 
-  function slideSeparatorLines(text) {
-    var lines = text.split('\n');
+    function slideSeparatorLines(text) {
+        var lines = text.split('\n');
 
-    var separatorLineNumbers = [];
+        var separatorLineNumbers = [];
 
-    for (i = 0; i < lines.length; i++) {
-      var line = lines[i];
-      if (line === '---') {
-        separatorLineNumbers.push(i);
-      }
+        for (i = 0; i < lines.length; i++) {
+            var line = lines[i];
+            if (line === '---') {
+                separatorLineNumbers.push(i);
+            }
+        }
+
+        return separatorLineNumbers;
     }
 
-    return separatorLineNumbers;
-  }
-
-  function currentCursorSlide(cursorLine) {
-    var text = ace.edit("editor").getValue();
-    var separatorPositions = slideSeparatorLines(text);
-    var slideNumber = separatorPositions.length;
-    separatorPositions.every(function(pos, num) {
-      if (pos >= cursorLine) {
-        slideNumber = num;
-        return false;
-      }
-      return true;
-    });
-    return slideNumber;
-  }
-
-
-  var editor = ace.edit("editor");
-  editor.setTheme("ace/theme/chrome");
-  editor.getSession().setMode("ace/mode/markdown");
-  editor.getSession().setUseWrapMode(true);
-  editor.setShowPrintMargin(true);
-
-  $.get('/slides.md', function(data) {
-    editor.setValue(data, -1);
-  });
-
-  ace.edit('editor').getSession().selection.on('changeCursor', function(e) {
-    var cursorRow = ace.edit('editor').getCursorPosition().row;
-    var currentSlide = currentCursorSlide(cursorRow);
-    $('#slides-frame')[0].contentWindow.postMessage(JSON.stringify({
-      method: 'slide',
-      args: [currentSlide]
-    }), window.location.origin);
-  });
-});
+    function currentCursorSlide(cursorLine) {
+        var text = ace.edit("editor").getValue();
+        var separatorPositions = slideSeparatorLines(text);
+        var slideNumber = separatorPositions.length;
+        separatorPositions.every(function(pos, num) {
+            if (pos >= cursorLine) {
+                slideNumber = num;
+                return false;
+            }
+            return true;
+        });
+        return slideNumber;
+    }
 
 
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/chrome");
+    editor.getSession().setMode("ace/mode/markdown");
+    editor.getSession().setUseWrapMode(true);
+    editor.setShowPrintMargin(true);
 
+    $.get('/slides.md', function(data) {
+        editor.setValue(data, -1);
+    });
+
+    ace.edit('editor').getSession().selection.on('changeCursor', function(e) {
+        var cursorRow = ace.edit('editor').getCursorPosition().row;
+        var currentSlide = currentCursorSlide(cursorRow);
+        $('#slides-frame')[0].contentWindow.postMessage(JSON.stringify({
+            method: 'slide',
+            args: [currentSlide]
+        }), window.location.origin);
+    });
+});

static/js/slides.js

@@ -5,6 +5,7 @@ function isPreview() {
 function initializeReveal() {
     // Full list of configuration options available at:
     // https://github.com/hakimel/reveal.js#configuration
+
     Reveal.initialize({
         controls: true,
         progress: true,
@@ -70,6 +71,8 @@ function initializeReveal() {
             }
         ]
     });
+
+    themesCtrl();
 }
 
 function highlightAnyCodeBlocks() {
@@ -112,6 +115,47 @@ function externalLinksInNewWindow() {
 insertMarkdownReference();
 initializeReveal();
 
+function themesCtrl() {
+    var defaultTheme = "black.css",
+        currentTheme = localStorage.getItem('theme?') ||
+        defaultTheme;
+
+    function setTheme(theme) {
+        cssEl = $("#theme");
+        cssEl.attr("href", "/static/reveal.js/css/theme/" + theme);
+        localStorage.setItem('theme?', theme);
+    }
+    setTheme(currentTheme);
+
+    if (!isPreview()) {
+        return
+    }
+    var availableThemes = [
+        "black.css",
+        "beige.css",
+        "blood.css",
+        "league.css",
+        "moon.css",
+        "night.css",
+        "serif.css",
+        "simple.css",
+        "sky.css",
+        "solarized.css",
+        "white.css",
+    ];
+    themeEl = $("#themes");
+    availableThemes.forEach(function(theme) {
+        elem = $("<option value=" + theme + ">" + theme + "</option>");
+        themeEl.append(elem);
+    })
+    themeEl.val(currentTheme);
+    themeEl.change(function() {
+        val = themeEl.val()
+        setTheme(val);
+    });
+    themeEl.attr("hidden", false);
+}
+
 // Monkey patch Reveal so we can reload markdown through an
 // inter window message (using the reveal rpc api)
 // (yes, reveal has an rpc api!)

templates/slides.tmpl

@@ -36,6 +36,8 @@
     </head>
 
     <body>
+        <select id="themes" hidden="true" style="float:right;">
+        </select>
         <div class="reveal">
             <div class="slides"></div>
         </div>