Allow toolbar to be multiline

yabwe · Nov 13, 2016 · 10d7990 · 10d7990
1 parent ea7b00b
commit 10d7990
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 18 deletions.
diff --git a/OPTIONS.md b/OPTIONS.md
@@ -232,6 +232,16 @@ enables/disables whether the toolbar should be displayed when selecting multiple
 
 The set of buttons to display on the toolbar.
 
+Can also be nested for multiline toolbar:
+`[['bold', 'italic', 'underline', 'pre'], ['anchor', 'h2', 'h3', 'quote']]`
+
+**NOTE:**
+Depending on the theme you are using, you may need to make some visual
+adjustment for proper rendering
+(ie. when buttons don't have fixed width).
+
+
+
 ***
 #### `diffLeft`
 **Default:** `0`

diff --git a/demo/multiline-toolbar.html b/demo/multiline-toolbar.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>medium editor | demo</title>
+    <link rel="stylesheet" href="css/demo.css">
+    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../dist/css/medium-editor.css">
+    <link rel="stylesheet" href="../dist/css/themes/flat.css" id="medium-editor-theme">
+</head>
+<body>
+    <a href="https://github.com/yabwe/medium-editor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
+    <div class="top-bar">
+        Theme:
+        <select id="sel-themes">
+            <option value="themes/default" selected>default</option>
+            <option value="themes/roman">roman</option>
+            <option value="themes/mani">mani</option>
+            <option value="themes/flat">flat</option>
+            <option value="themes/bootstrap">bootstrap</option>
+            <option value="themes/tim">tim</option>
+            <option value="themes/beagle">beagle</option>
+        </select>
+    </div>
+    <div id="container">
+        <h1>Medium Editor</h1>
+        <div class="editable">
+            <h2>Font Awesome</h2>
+            <p>My father’s family name being <a href="https://en.wikipedia.org/wiki/Pip_(Great_Expectations)">Pirrip</a>, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip. So, I called myself Pip, and came to be called Pip.</p>
+            <p>I give Pirrip as my father’s family name, on the authority of his tombstone and my sister,—Mrs. Joe Gargery, who married the blacksmith. As I never saw my father or my mother, and never saw any likeness of either of them (for their days were long before the days of photographs), my first fancies regarding what they were like were unreasonably derived from their tombstones...</p>
+        </div>
+    </div>
+    <p style="text-align: center;"><small><a style="color: #333;" target="_blank" href="http://www.goodreads.com/reader/475-great-expectations">Source</a></small></p>
+    <script src="../dist/js/medium-editor.js"></script>
+    <script>
+        var editor = new MediumEditor('.editable', {
+            toolbar: {
+                buttons: [
+                    ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'pre'],
+                    ['h2', 'h3', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'quote'],
+                    ['orderedlist', 'unorderedlist', 'outdent', 'indent', 'anchor', 'image', 'removeFormat']
+                ],
+            },
+            buttonLabels: 'fontawesome'
+        });
+        cssLink = document.getElementById('medium-editor-theme');
+
+        document.getElementById('sel-themes').addEventListener('change', function () {
+            cssLink.href = '../dist/css/' + this.value + '.css';
+        });
+    </script>
+</body>
+</html>
diff --git a/spec/anchor.spec.js b/spec/anchor.spec.js
@@ -838,7 +838,9 @@ describe('Anchor Button TestCase', function () {
             selectElementContentsAndFire(editor.elements[0]);
             button = toolbar.getToolbarElement().querySelector('[data-action="createLink"]');
             fireEvent(button, 'click');
-            expect(toolbar.getToolbarActionsElement().style.display).toBe('none');
+            toolbar.getToolbarActionsElements().forEach(function (el) {
+                expect(el.style.display).toBe('none');
+            });
             expect(anchorExtension.isDisplayed()).toBe(true);
             expect(anchorExtension.showForm).toHaveBeenCalled();
         });
@@ -874,7 +876,9 @@ describe('Anchor Button TestCase', function () {
             // Click the 'anchor' button in the toolbar
             fireEvent(toolbar.getToolbarElement().querySelector('[data-action="createLink"]'), 'click');
 
-            expect(toolbar.getToolbarActionsElement().style.display).toBe('none');
+            toolbar.getToolbarActionsElements().forEach(function (el) {
+                expect(el.style.display).toBe('none');
+            });
             expect(anchorExtension.isDisplayed()).toBe(true);
             expect(anchorExtension.showForm).toHaveBeenCalled();
             expect(anchorExtension.getInput().value).toBe('');

diff --git a/spec/fontname.spec.js b/spec/fontname.spec.js
@@ -38,7 +38,9 @@ describe('Font Name Button TestCase', function () {
             selectElementContentsAndFire(editor.elements[0]);
             button = toolbar.getToolbarElement().querySelector('[data-action="fontName"]');
             fireEvent(button, 'click');
-            expect(toolbar.getToolbarActionsElement().style.display).toBe('none');
+            toolbar.getToolbarActionsElements().forEach(function (el) {
+                expect(el.style.display).toBe('none');
+            });
             expect(fontNameExtension.isDisplayed()).toBe(true);
             expect(fontNameExtension.showForm).toHaveBeenCalled();
         });

diff --git a/spec/fontsize.spec.js b/spec/fontsize.spec.js
@@ -38,7 +38,9 @@ describe('Font Size Button TestCase', function () {
             selectElementContentsAndFire(editor.elements[0]);
             button = toolbar.getToolbarElement().querySelector('[data-action="fontSize"]');
             fireEvent(button, 'click');
-            expect(toolbar.getToolbarActionsElement().style.display).toBe('none');
+            toolbar.getToolbarActionsElements().forEach(function (el) {
+                expect(el.style.display).toBe('none');
+            });
             expect(fontSizeExtension.isDisplayed()).toBe(true);
             expect(fontSizeExtension.showForm).toHaveBeenCalled();
         });

diff --git a/src/js/extensions/toolbar.js b/src/js/extensions/toolbar.js
@@ -117,7 +117,9 @@
                 toolbar.className += ' medium-editor-stalker-toolbar';
             }
 
-            toolbar.appendChild(this.createToolbarButtons());
+            this.createToolbarButtons().forEach(function (row) {
+                toolbar.appendChild(row);
+            });
 
             // Add any forms that extensions may have
             this.forEachExtension(function (extension) {
@@ -132,19 +134,37 @@
         },
 
         createToolbarButtons: function () {
+            var rows = [];
+
+            if (Array.isArray(this.buttons[0])) {
+                this.buttons.forEach(function (row, index) {
+                    rows.push(this.createToolbarButtonsRow(row, index));
+                }, this);
+            } else {
+                rows.push(this.createToolbarButtonsRow(this.buttons, 0));
+            }
+
+            return rows;
+        },
+
+        createToolbarButtonsRow: function (buttons, index) {
             var ul = this.document.createElement('ul'),
                 li,
                 btn,
-                buttons,
+                buttonEls,
                 extension,
                 buttonName,
                 buttonOpts;
 
             ul.id = 'medium-editor-toolbar-actions' + this.getEditorId();
+            if (index > 0) {
+                // Preserve backward compatibility and add index only for extra rows
+                ul.id += '-' + index;
+            }
             ul.className = 'medium-editor-toolbar-actions';
             ul.style.display = 'block';
 
-            this.buttons.forEach(function (button) {
+            buttons.forEach(function (button) {
                 if (typeof button === 'string') {
                     buttonName = button;
                     buttonOpts = null;
@@ -169,10 +189,10 @@
                 }
             }, this);
 
-            buttons = ul.querySelectorAll('button');
+            buttonEls = ul.querySelectorAll('button');
             if (buttons.length > 0) {
-                buttons[0].classList.add(this.firstButtonClass);
-                buttons[buttons.length - 1].classList.add(this.lastButtonClass);
+                buttonEls[0].classList.add(this.firstButtonClass);
+                buttonEls[buttonEls.length - 1].classList.add(this.lastButtonClass);
             }
 
             return ul;
@@ -202,7 +222,13 @@
         },
 
         getToolbarActionsElement: function () {
-            return this.getToolbarElement().querySelector('.medium-editor-toolbar-actions');
+            // For backward compatibility
+            return this.getToolbarActionsElements()[0];
+        },
+
+        getToolbarActionsElements: function () {
+            var els = this.getToolbarElement().querySelectorAll('.medium-editor-toolbar-actions');
+            return Array.prototype.slice.call(els);
         },
 
         // Toolbar event handlers
@@ -315,15 +341,19 @@
 
         hideToolbarDefaultActions: function () {
             if (this.isToolbarDefaultActionsDisplayed()) {
-                this.getToolbarActionsElement().style.display = 'none';
+                this.getToolbarActionsElements().forEach(function (el) {
+                    el.style.display = 'none';
+                });
             }
         },
 
         showToolbarDefaultActions: function () {
             this.hideExtensionForms();
 
             if (!this.isToolbarDefaultActionsDisplayed()) {
-                this.getToolbarActionsElement().style.display = 'block';
+                this.getToolbarActionsElements().forEach(function (el) {
+                    el.style.display = 'block';
+                });
             }
 
             // Using setTimeout + options.delay because:

diff --git a/src/sass/themes/beagle.scss b/src/sass/themes/beagle.scss
@@ -10,7 +10,6 @@ $medium-editor-placeholder-color: #f8f5f3;
 // theme rules
 .medium-toolbar-arrow-under:after {
     border-color: $medium-editor-bgcolor transparent transparent transparent;
-    top: $medium-editor-button-size;
 }
 
 .medium-toolbar-arrow-over:before {

diff --git a/src/sass/themes/bootstrap.scss b/src/sass/themes/bootstrap.scss
@@ -11,7 +11,6 @@ $medium-editor-placeholder-color: #fff;
 // theme rules
 .medium-toolbar-arrow-under:after {
     border-color: $medium-editor-bgcolor transparent transparent transparent;
-    top: $medium-editor-button-size;
 }
 
 .medium-toolbar-arrow-over:before {

diff --git a/src/sass/themes/default.scss b/src/sass/themes/default.scss
@@ -6,7 +6,6 @@ $medium-editor-border-radius: 5px;
 // theme rules
 .medium-toolbar-arrow-under:after {
     border-color: $medium-editor-bgcolor transparent transparent transparent;
-    top: $medium-editor-button-size;
 }
 
 .medium-toolbar-arrow-over:before {

diff --git a/src/sass/themes/flat.scss b/src/sass/themes/flat.scss
@@ -8,7 +8,6 @@ $medium-editor-placeholder-color: #fff;
 
 // theme rules
 .medium-toolbar-arrow-under:after {
-    top: $medium-editor-button-size;
     border-color: $medium-editor-bgcolor transparent transparent transparent;
 }
 

diff --git a/src/sass/themes/tim.scss b/src/sass/themes/tim.scss
@@ -11,7 +11,6 @@ $medium-editor-placeholder-color: #ffedd5;
 // theme rules
 .medium-toolbar-arrow-under:after {
     border-color: $medium-editor-bgcolor transparent transparent transparent;
-    top: $medium-editor-button-size;
 }
 
 .medium-toolbar-arrow-over:before {