Implement menu of View -> Theme

coffee/classes/mds_main_menu.coffee

@@ -136,7 +136,16 @@ module.exports = class MdsMainMenu
         {
           label: '&View'
           submenu: [
-            { replacement: 'slideViews' }
+            {
+              label: '&Preview Style'
+              enabled: @window?
+              submenu: [{ replacement: 'slideViews' }]
+            }
+            {
+              label: '&Theme'
+              enabled: @window?
+              submenu: [{ replacement: 'themes' }]
+            }
             { type: 'separator' }
             {
               label: 'Toggle &Full Screen'
@@ -215,26 +224,43 @@ module.exports = class MdsMainMenu
 
           slideViews: [
             {
-              label: '&Markdown view'
+              label: '&Markdown'
               enabled: @window?
               type: if @window? then 'radio' else 'normal'
               checked: @states.viewMode == 'markdown'
               click: => @window.mdsWindow.trigger 'viewMode', 'markdown'
             }
             {
-              label: '1:1 &Slide view'
+              label: '1:1 &Slide'
               enabled: @window?
               type: if @window? then 'radio' else 'normal'
               checked: @states.viewMode == 'screen'
               click: => @window.mdsWindow.trigger 'viewMode', 'screen'
             }
             {
-              label: 'Slide &List view'
+              label: 'Slide &List'
               enabled: @window?
               type: if @window? then 'radio' else 'normal'
               checked: @states.viewMode == 'list'
               click: => @window.mdsWindow.trigger 'viewMode', 'list'
             }
           ]
 
+          themes: [
+            {
+              label: '&Default'
+              enabled: @window?
+              type: if @window? then 'radio' else 'normal'
+              checked: !@states?.theme || @states.theme == 'default'
+              click: => @window.mdsWindow.send 'setTheme', 'default' unless @window.mdsWindow.freeze
+            }
+            {
+              label: '&Gaia'
+              enabled: @window?
+              type: if @window? then 'radio' else 'normal'
+              checked: @states.theme == 'gaia'
+              click: => @window.mdsWindow.send 'setTheme', 'gaia' unless @window.mdsWindow.freeze
+            }
+          ]
+
     @applyMenu()

coffee/classes/mds_markdown.coffee

@@ -73,15 +73,17 @@ module.exports = class MdsMarkdown
         defaultRenderers.html_block.apply(@, args)
 
   parse: (markdown) =>
-    @_rulers    = []
-    @_settings  = new MdsMdSetting
-    @lastParsed = """
-                  #{MdsMarkdown.slideTagOpen(1)}
-                  #{@markdown.render markdown}
-                  #{MdsMarkdown.slideTagClose(@_rulers.length + 1)}
-                  """
+    @_rulers          = []
+    @_settings        = new MdsMdSetting
+    @settingsPosition = []
+    @lastParsed       = """
+                        #{MdsMarkdown.slideTagOpen(1)}
+                        #{@markdown.render markdown}
+                        #{MdsMarkdown.slideTagClose(@_rulers.length + 1)}
+                        """
     ret =
       parsed: @lastParsed
+      settingsPosition: @settingsPosition
       rulerChanged: @rulers.join(",") != @_rulers.join(",")
 
     @rulers   = ret.rulers   = @_rulers
@@ -101,16 +103,32 @@ module.exports = class MdsMarkdown
 
     html_block: (tokens, idx, options, env, self) ->
       {content} = tokens[idx]
-
       return if content.substring(0, 3) isnt '<!-'
 
-      if matched = /^<!-{2,}\s*([\s\S]*?)\s*-{2,}>$/m.exec(content)
+      if matched = /^(<!-{2,}\s*)([\s\S]*?)\s*-{2,}>$/m.exec(content)
+        spaceLines = matched[1].split("\n")
+        lineIndex  = tokens[idx].map[0] + spaceLines.length - 1
+        startFrom  = spaceLines[spaceLines.length - 1].length
 
-        for mathcedLine in matched[1].split(/[\r\n]+/)
-          parsed = /^\s*([\$\*]?)(\w+)\s*:\s*(.*)\s*$/.exec(mathcedLine)
+        for mathcedLine in matched[2].split("\n")
+          parsed = /^(\s*)(([\$\*]?)(\w+)\s*:\s*(.*))\s*$/.exec(mathcedLine)
 
           if parsed
-            if parsed[1] is '$'
-              @_settings.setGlobal parsed[2], parsed[3]
+            startFrom += parsed[1].length
+            pageIdx = @_rulers.length || 0
+
+            if parsed[3] is '$'
+              @_settings.setGlobal parsed[4], parsed[5]
             else
-              @_settings.set (@_rulers.length || 0) + 1, parsed[2], parsed[3], parsed[1] is '*'
+              @_settings.set pageIdx + 1, parsed[4], parsed[5], parsed[3] is '*'
+
+            @settingsPosition.push
+              pageIdx: pageIdx
+              lineIdx: lineIndex
+              from: startFrom
+              length: parsed[2].length
+              property: "#{parsed[3]}#{parsed[4]}"
+              value: parsed[5]
+
+          lineIndex++
+          startFrom = 0

coffee/classes/mds_window.coffee

@@ -185,6 +185,10 @@ module.exports = class MdsWindow
       @menu.states.viewMode = mode
       @menu.updateMenu()
 
+    themeChanged: (theme) ->
+      @menu.states.theme = theme
+      @menu.updateMenu()
+
     unfreeze: ->
       @freeze = false
       @send 'unfreezed'

coffee/index.coffee

@@ -16,6 +16,8 @@ class EditorStates
   rulers: []
   currentPage: null
   previewInitialized: false
+  lastRendered: {}
+
   _lockChangedStatus: false
   _imageDirectories: null
 
@@ -65,6 +67,7 @@ class EditorStates
           when 'linkTo'
             @openLink e.args[0]
           when 'rendered'
+            @lastRendered = e.args[0]
             unless @previewInitialized
               MdsRenderer.sendToMain 'previewInitialized'
 
@@ -226,6 +229,26 @@ $ ->
 
     .on 'setSplitter', (spliiterPos) -> setSplitter spliiterPos
 
+    .on 'setTheme', (theme) ->
+      latestPos = null
+
+      for obj in editorStates.lastRendered.settingsPosition
+        latestPos = obj if obj.property is '$theme'
+
+      if latestPos?
+        editorStates.codeMirror.replaceRange(
+          "$theme: #{theme}",
+          CodeMirror.Pos(latestPos.lineIdx, latestPos.from),
+          CodeMirror.Pos(latestPos.lineIdx, latestPos.from + latestPos.length),
+        )
+      else
+        editorStates.codeMirror.replaceRange(
+          "<!-- $theme: #{theme} -->\n\n",
+          CodeMirror.Pos(editorStates.codeMirror.firstLine(), 0)
+        )
+
+    .on 'themeChanged', (theme) -> MdsRenderer.sendToMain 'themeChanged', theme
+
   # Initialize
   editorStates.codeMirror.focus()
   editorStates.refreshPage()

coffee/slide.coffee

@@ -15,6 +15,10 @@ document.addEventListener 'DOMContentLoaded', ->
         $('#theme-css').attr('href', toApply)
         setTimeout applyScreenSize, 20
 
+        return toApply.match(/([^\/]+)\.css$/)[1]
+
+      false
+
     setStyle = (identifier, css) ->
       id  = "mds-#{identifier}Style"
       elm = $("##{id}")
@@ -59,7 +63,7 @@ document.addEventListener 'DOMContentLoaded', ->
       setStyle 'currentPage', "@media not print { body.slide-view.screen .slide_wrapper:not(:nth-of-type(#{page})){ display:none; }}"
 
     render = (md) ->
-      themes.apply md.settings.getGlobal('theme')
+      md.changedTheme = themes.apply md.settings.getGlobal('theme')
       applySlideSize md.settings.getGlobal('width'), md.settings.getGlobal('height')
 
       mdElm = $('#markdown').html(md.parsed)
@@ -88,8 +92,9 @@ document.addEventListener 'DOMContentLoaded', ->
       renderNotify(md)
 
     renderNotify = (md) ->
-      ipc.sendToHost 'rendered'
+      ipc.sendToHost 'rendered', md
       ipc.sendToHost 'rulerChanged', md.rulers if md.rulerChanged
+      ipc.sendToHost 'themeChanged', md.changedTheme if md.changedTheme
 
     sendPdfOptions = (opts) ->
       slideSize = getSlideSize()

examples/gaia.md

@@ -29,14 +29,18 @@
 
 # How to use
 
+#### From menu
+
+Select menu: *View :arrow_right: Theme :arrow_right: Gaia*
+
+#### Use directive
+
 Set `gaia` theme by `$theme` Global Directive.
 
 ```
 <!-- $theme: gaia -->
 ```
 
-*That's all!* :tada:
-
 ---
 
 # Basic example 1
@@ -170,4 +174,4 @@ Change color scheme *by `template` page directive.*
 
 ###### [![](./images/marp.png)](https://yhatt.github.io/marp)
 
-#### https://yhatt.github.io/marp
+#### https://yhatt.github.io/marp

index.html

@@ -29,13 +29,13 @@
         <div class="toolbar-actions">
           <span id="page-indicator"></span>
           <div class="btn-group pull-right disabled" id="preview-modes">
-            <button class="btn btn-default viewmode-btn" id="preview-mode-markdown" data-viewmode="markdown" title="Markdown view">
+            <button class="btn btn-default viewmode-btn" id="preview-mode-markdown" data-viewmode="markdown" title="Markdown">
               <span class="icon icon-pencil"></span>
             </button>
-            <button class="btn btn-default viewmode-btn" id="preview-mode-screen" data-viewmode="screen" title="1:1 slide view">
+            <button class="btn btn-default viewmode-btn" id="preview-mode-screen" data-viewmode="screen" title="1:1 Slide">
               <span class="icon icon-monitor"></span>
             </button>
-            <button class="btn btn-default viewmode-btn" id="preview-mode-list" data-viewmode="list" title="Slide list view">
+            <button class="btn btn-default viewmode-btn" id="preview-mode-list" data-viewmode="list" title="Slide List">
               <span class="icon icon-doc-text"></span>
             </button>
           </div>