From a2e69e3cce95713c4ddaf5613c30ddf11d9154f5 Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Sat, 1 Aug 2015 17:06:39 +1000
Subject: [PATCH] Dynamically build markdown editor toolbar, add first button
 action

---
 .../assets/js/markdowneditor.js               | 154 ++++++++++++++++--
 .../partials/_markdowneditor.htm              |  53 +-----
 2 files changed, 140 insertions(+), 67 deletions(-)

diff --git a/modules/backend/formwidgets/markdowneditor/assets/js/markdowneditor.js b/modules/backend/formwidgets/markdowneditor/assets/js/markdowneditor.js
index 279dfac3a..3ddb2fbac 100644
--- a/modules/backend/formwidgets/markdowneditor/assets/js/markdowneditor.js
+++ b/modules/backend/formwidgets/markdowneditor/assets/js/markdowneditor.js
@@ -31,6 +31,120 @@
             this.$el.attr('id', 'element-' + Math.random().toString(36).substring(7))
         }
 
+
+        this.createCodeContainer()
+        this.createToolbar()
+
+        this.$toolbar.on('click', '.btn, .md-dropdown-button', this.proxy(this.onClickButton))
+
+        $('[data-control="tooltip"]', this.$toolbar).tooltip()
+        $('[data-toggle="dropdown"]', this.$toolbar).dropdown()
+    }
+
+    MarkdownEditor.prototype.dispose = function() {
+        this.$el.off('dispose-control', this.proxy(this.dispose))
+        this.$toolbar.off('click', '.btn, .md-dropdown-button', this.proxy(this.onClickButton))
+
+        this.$el.removeData('oc.markdownEditor')
+
+        this.$el = null
+        this.$textarea = null
+        this.$toolbar = null
+        this.$write = null
+        this.$preview = null
+        this.$code = null
+        this.editor = null
+        this.$form = null
+
+        this.options = null
+
+        BaseProto.dispose.call(this)
+    }
+
+    MarkdownEditor.prototype.onClickButton = function(ev) {
+        var $button = $(ev.target),
+            action = $button.data('button-action'),
+            template = $button.data('button-template')
+
+        this[action](template)
+    }
+
+    MarkdownEditor.prototype.createToolbar = function() {
+        var self = this,
+            $button,
+            $buttons = $('<div class="layout-cell toolbar-item" />'),
+            $fixedButtons = $('<div class="layout-cell toolbar-item width-fix" />')
+
+        $.each($.oc.markdownEditorButtons, function(code, button) {
+            $button = $('<button />').attr({
+                'type': "button",
+                'class': 'btn',
+                'title': $.oc.lang.get(button.label),
+                'data-control': "tooltip",
+                'data-placement': "bottom",
+                'data-container': "body",
+                'data-button-code': code,
+                'data-button-action': button.action
+            })
+
+            if (button.template) {
+                $button.attr('data-button-template', button.template)
+            }
+
+            if (button.cssClass) {
+                $button.addClass(button.cssClass)
+            }
+            else {
+                $button.addClass('tb-icon tb-' + button.icon)
+            }
+
+            if (button.fixed) {
+                $fixedButtons.append($button)
+            }
+            else {
+                $buttons.append($button)
+            }
+
+            if (button.dropdown) {
+                $button.attr('data-toggle', 'dropdown')
+                self.createToolbarDropdown(button, $button)
+            }
+        })
+
+        $buttons.wrapInner('<div data-control="toolbar" />')
+        this.$toolbar.append($buttons)
+        this.$toolbar.append($fixedButtons)
+    }
+
+    MarkdownEditor.prototype.createToolbarDropdown = function(button, $el) {
+        var $dropdown = $('<ul class="dropdown-menu" />'),
+            $childButton
+
+        $dropdown.attr('data-dropdown-title', $.oc.lang.get(button.label))
+        $.each(button.dropdown, function(code, childButton) {
+            $childButton = $('<a />').attr({
+                'href': 'javascript:;',
+                'class': 'md-dropdown-button',
+                'tabindex': '-1',
+                'data-button-code': code,
+                'data-button-action': childButton.action
+            })
+
+            if (childButton.cssClass) {
+                $childButton.addClass(childButton.cssClass)
+            }
+
+            $childButton.text($.oc.lang.get(childButton.label))
+
+            $dropdown.append($childButton)
+            $childButton.wrap('<li />')
+        })
+
+        $el.wrap('<div class="dropdown dropdown-fixed" />')
+        $el.after($dropdown)
+    }
+
+    MarkdownEditor.prototype.createCodeContainer = function() {
         /*
          * Create code container
          */
@@ -63,19 +177,6 @@
         editor.on('focus', this.proxy(this.onFocus))
     }
 
-    MarkdownEditor.prototype.dispose = function() {
-        this.$el.off('dispose-control', this.proxy(this.dispose))
-        this.$el.removeData('oc.markdownEditor')
-
-        this.$el = null
-
-        // In some cases options could contain callbacks, 
-        // so it's better to clean them up too.
-        this.options = null
-
-        BaseProto.dispose.call(this)
-    }
-
     MarkdownEditor.prototype.onResize = function() {
         this.editor.resize()
     }
@@ -88,6 +189,25 @@
         this.$el.addClass('editor-focus')
     }
 
+    /*
+     * Button actions
+     */
+
+    MarkdownEditor.prototype.insertLine = function(template) {
+        var editor = this.editor,
+            pos = this.editor.getCursorPosition()
+
+        if (pos.column == 0) {
+            editor.selection.clearSelection()
+        }
+        else {
+            editor.navigateTo(editor.getSelectionRange().start.row, Number.MAX_VALUE)
+        }
+
+        editor.insert('\n'+template+'\n')
+        editor.focus()
+    }
+
     MarkdownEditor.DEFAULTS = {
         buttons: ['formatting', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'link', 'horizontalrule'],
         viewMode: 'tab'
@@ -216,18 +336,20 @@
         horizontalrule: {
             label: 'markdowneditor.horizontalrule',
             icon: 'horizontalrule',
-            action: 'line.insert',
+            action: 'insertLine',
             template: '---'
         },
         fullscreen: {
             label: 'markdowneditor.fullscreen',
             icon: 'fullscreen',
-            action: 'fullscreen.toggle'
+            action: 'fullscreen.toggle',
+            fixed: true
         },
         preview: {
             label: 'markdowneditor.preview',
             cssClass: 'oc-button oc-icon-eye',
-            action: 'preview.toggle'
+            action: 'preview.toggle',
+            fixed: true
         }
     }
 
diff --git a/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm b/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
index 21465ddae..76fd23e85 100644
--- a/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
+++ b/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
@@ -5,58 +5,9 @@
     <div
         id="<?= $this->getId() ?>"
         class="field-markdowneditor size-<?= $size ?> <?= $stretch?'layout-relative':'' ?>"
-        data-control="markdowneditor"
-    >
+        data-control="markdowneditor">
 
-        <div class="layout control-toolbar editor-toolbar">
-            <div class="layout-cell toolbar-item">
-                <div data-control="toolbar">
-
-                    <!-- Dropdown item -->
-                    <div class="dropdown dropdown-fixed">
-                        <button
-                            type="button"
-                            class="btn tb-icon tb-formatting"
-                            title="Formatting"
-                            data-toggle="dropdown"
-                            data-control="tooltip"
-                            data-placement="bottom"
-                            data-container="body"></button>
-                        <ul class="dropdown-menu" data-dropdown-title="Formatting">
-                            <li><a href="#" rel="quote" tabindex="-1" class="oc-icon-quote-right">Quote</a></li>
-                            <li><a href="#" rel="code" tabindex="-1" class="oc-icon-code">Code</a></li>
-                            <li><a href="#" rel="header1" tabindex="-1" class="oc-icon-header">Header 1</a></li>
-                            <li><a href="#" rel="header2" tabindex="-1" class="oc-icon-header">Header 2</a></li>
-                            <li><a href="#" rel="header3" tabindex="-1" class="oc-icon-header">Header 3</a></li>
-                            <li><a href="#" rel="header4" tabindex="-1" class="oc-icon-header">Header 4</a></li>
-                            <li><a href="#" rel="header5" tabindex="-1" class="oc-icon-header">Header 5</a></li>
-                            <li><a href="#" rel="header6" tabindex="-1" class="oc-icon-header">Header 6</a></li>
-                        </ul>
-                    </div>
-
-                    <!-- Item with tooltip -->
-                    <button
-                        type="button"
-                        class="btn tb-icon tb-bold"
-                        title="Bold"
-                        data-control="tooltip"
-                        data-placement="bottom"
-                        data-container="body"></button>
-
-                    <!-- Disabled item -->
-                    <button type="button" disabled class="btn tb-icon tb-italic"></button>
-
-                    <button type="button" class="btn tb-icon tb-unorderedlist"></button>
-                    <button type="button" class="btn tb-icon tb-orderedlist"></button>
-                    <button type="button" class="btn tb-icon tb-link"></button>
-                    <button type="button" class="btn tb-icon tb-horizontalrule"></button>
-                </div>
-            </div>
-            <div class="layout-cell toolbar-item width-fix">
-                <button type="button" class="btn oc-icon-eye"></button>
-                <button type="button" class="btn oc-icon-expand"></button>
-            </div>
-        </div>
+        <div class="layout control-toolbar editor-toolbar"></div>
 
         <div class="editor-write">
             <textarea name="<?= $name ?>" id="<?= $this->getId('textarea') ?>"><?= e($value) ?></textarea>