Merge branch 'buttons' of github.com:Gankro/EpicEditor into buttons

Conflicts:
	epiceditor/js/epiceditor.min.js

README.md

@@ -69,7 +69,8 @@ var opts = {
   },
   button: {
     preview: true,
-    fullscreen: true
+    fullscreen: true,
+    bar: "auto"
   },
   focusOnLoad: false,
   shortcut: {
@@ -178,6 +179,11 @@ var editor = new EpicEditor(opts);
     <td>If set to <code>false</code> will remove the fullscreen button.</td>
     <td><code>true</code></td>
   </tr>
+  <tr>
+    <td><code>button.bar</code></td>
+    <td>If <code>true</code> or <code>"show"</code>, any defined buttons will always be visible. If <code>false</code> or <code>"hide"</code>, any defined buttons will never be visible. If <code>"auto"</code>, buttons will usually be hidden, but shown if whenever the mouse is moved.</td>
+    <td><code>"auto"</code></td>
+  </tr>
   <tr>
     <td><code>shortcut.modifier</code></td>
     <td>The key to hold while holding the other shortcut keys to trigger a key combo.</td>

epiceditor/js/epiceditor.js

@@ -355,7 +355,10 @@
           , toggleFullscreen: 'Enter Fullscreen'
           }
         , parser: typeof marked == 'function' ? marked : null
-        , button: { fullscreen: true, preview: true }
+        , button: { fullscreen: true
+          , preview: true
+          , bar: "auto"
+          }
         }
       , defaultStorage;
 
@@ -417,6 +420,14 @@
       }
     }
 
+    if (self.settings.button.bar === "show") {
+      self.settings.button.bar = true;
+    }
+
+    if (self.settings.button.bar === "hide") {
+      self.settings.button.bar = false;
+    }
+
     // Protect the id and overwrite if passed in as an option
     // TODO: Put underscrore to denote that this is private
     self._instanceId = 'epiceditor-' + Math.round(Math.random() * 100000);
@@ -863,7 +874,9 @@
     utilBar = self.iframe.getElementById('epiceditor-utilbar');
 
     // Hide it at first until they move their mouse
-    utilBar.style.display = 'none';
+    if (self.settings.button.bar !== true) {
+      utilBar.style.display = 'none';
+    }
 
     utilBar.addEventListener('mouseover', function () {
       if (utilBarTimer) {
@@ -872,6 +885,9 @@
     });
 
     function utilBarHandler(e) {
+      if (self.settings.button.bar !== "auto") {
+        return;
+      }
       // Here we check if the mouse has moves more than 5px in any direction before triggering the mousemove code
       // we do this for 2 reasons:
       // 1. On Mac OS X lion when you scroll and it does the iOS like "jump" when it hits the top/bottom of the page itll fire off

index.html

@@ -74,7 +74,8 @@ <h3>EpicEditor([<em>options</em>])</h3>
   },
   button: {
     preview: true,
-    fullscreen: true
+    fullscreen: true,
+    bar: &quot;auto&quot;
   },
   focusOnLoad: false,
   shortcut: {
@@ -181,6 +182,11 @@ <h3>Options</h3>
     <td>If set to <code>false</code> will remove the fullscreen button.</td>
     <td><code>true</code></td>
   </tr>
+  <tr>
+    <td><code>button.bar</code></td>
+    <td>If <code>true</code> or <code>&quot;show&quot;</code>, any defined buttons will always be visible. If <code>false</code> or <code>&quot;hide&quot;</code>, any defined buttons will never be visible. If <code>&quot;auto&quot;</code>, buttons will usually be hidden, but shown if whenever the mouse is moved.</td>
+    <td><code>&quot;auto&quot;</code></td>
+  </tr>
   <tr>
     <td><code>shortcut.modifier</code></td>
     <td>The key to hold while holding the other shortcut keys to trigger a key combo.</td>

src/editor.js

@@ -355,7 +355,10 @@
           , toggleFullscreen: 'Enter Fullscreen'
           }
         , parser: typeof marked == 'function' ? marked : null
-        , button: { fullscreen: true, preview: true }
+        , button: { fullscreen: true
+          , preview: true
+          , bar: "auto"
+          }
         }
       , defaultStorage;
 
@@ -417,6 +420,14 @@
       }
     }
 
+    if (self.settings.button.bar === "show") {
+      self.settings.button.bar = true;
+    }
+
+    if (self.settings.button.bar === "hide") {
+      self.settings.button.bar = false;
+    }
+
     // Protect the id and overwrite if passed in as an option
     // TODO: Put underscrore to denote that this is private
     self._instanceId = 'epiceditor-' + Math.round(Math.random() * 100000);
@@ -863,7 +874,9 @@
     utilBar = self.iframe.getElementById('epiceditor-utilbar');
 
     // Hide it at first until they move their mouse
-    utilBar.style.display = 'none';
+    if (self.settings.button.bar !== true) {
+      utilBar.style.display = 'none';
+    }
 
     utilBar.addEventListener('mouseover', function () {
       if (utilBarTimer) {
@@ -872,6 +885,9 @@
     });
 
     function utilBarHandler(e) {
+      if (self.settings.button.bar !== "auto") {
+        return;
+      }
       // Here we check if the mouse has moves more than 5px in any direction before triggering the mousemove code
       // we do this for 2 reasons:
       // 1. On Mac OS X lion when you scroll and it does the iOS like "jump" when it hits the top/bottom of the page itll fire off

test/test.options.js

@@ -75,6 +75,18 @@ describe('EpicEditor([options])', function () {
       expect(wrapper.getElementsByClassName('epiceditor-toggle-edit-btn').length)
         .to.equal(1);
     });
+    it('should always hide buttons if bar is hide', function () {
+      opts.button = {bar: 'hide'};
+      editor = new EpicEditor(opts).load();
+      var wrapper = editor.getElement('wrapper');
+      expect($(wrapper).find('#epiceditor-utilbar').is(":visible")).to.be(false);
+    });
+    it('should always show buttons if bar is show', function () {
+      opts.button = {bar: 'show'};
+      editor = new EpicEditor(opts).load();
+      var wrapper = editor.getElement('wrapper');
+      expect($(wrapper).find('#epiceditor-utilbar').is(":hidden")).to.be(false);
+    });
   });
 
   it('should allow the container option to be passed as an element ID string', function () {