Allow toolbar to be multiline

yabwe · Nov 13, 2016 · 27cf587 · 27cf587
1 parent ea7b00b
commit 27cf587
Show file tree

Hide file tree

Showing 23 changed files with 172 additions and 49 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/dist/css/themes/beagle.css b/dist/css/themes/beagle.css
@@ -1,6 +1,5 @@
 .medium-toolbar-arrow-under:after {
-  border-color: #000 transparent transparent transparent;
-  top: 40px; }
+  border-color: #000 transparent transparent transparent; }
 
 .medium-toolbar-arrow-over:before {
   border-color: transparent transparent #000 transparent; }

diff --git a/dist/css/themes/beagle.min.css b/dist/css/themes/beagle.min.css
diff --git a/dist/css/themes/bootstrap.css b/dist/css/themes/bootstrap.css
@@ -1,6 +1,5 @@
 .medium-toolbar-arrow-under:after {
-  border-color: #428bca transparent transparent transparent;
-  top: 60px; }
+  border-color: #428bca transparent transparent transparent; }
 
 .medium-toolbar-arrow-over:before {
   border-color: transparent transparent #428bca transparent; }

diff --git a/dist/css/themes/bootstrap.min.css b/dist/css/themes/bootstrap.min.css
diff --git a/dist/css/themes/default.css b/dist/css/themes/default.css
@@ -1,6 +1,5 @@
 .medium-toolbar-arrow-under:after {
-  border-color: #242424 transparent transparent transparent;
-  top: 50px; }
+  border-color: #242424 transparent transparent transparent; }
 
 .medium-toolbar-arrow-over:before {
   border-color: transparent transparent #242424 transparent;

diff --git a/dist/css/themes/default.min.css b/dist/css/themes/default.min.css
diff --git a/dist/css/themes/flat.css b/dist/css/themes/flat.css
@@ -1,5 +1,4 @@
 .medium-toolbar-arrow-under:after {
-  top: 60px;
   border-color: #57ad68 transparent transparent transparent; }
 
 .medium-toolbar-arrow-over:before {

diff --git a/dist/css/themes/flat.min.css b/dist/css/themes/flat.min.css
diff --git a/dist/css/themes/tim.css b/dist/css/themes/tim.css
@@ -1,6 +1,5 @@
 .medium-toolbar-arrow-under:after {
-  border-color: #2f1e07 transparent transparent transparent;
-  top: 60px; }
+  border-color: #2f1e07 transparent transparent transparent; }
 
 .medium-toolbar-arrow-over:before {
   border-color: transparent transparent #2f1e07 transparent; }