Shortcuts FTW and also bumping to 0.0.3 and added a GH Fork Me ribbon

myguidingstar-zz · Mar 4, 2012 · 2a194a0 · 2a194a0
2 parents 6aa615f + 4bfc884
commit 2a194a0
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-**alpha 0.0.2**
+**alpha 0.0.3**
 
 _Note: this is a developer preview. We're releasing early so we can get other people's input and pull requests. While it works, there are still bugs and missing features. Use at your own risk._
 
@@ -116,7 +116,15 @@ Lets you set options for the editor. The example below has all the options avail
 
 - `themes.preview`: The theme for the previewer which is a div of content inside of an iframe.
 
-- `focusOnLoad`: Will focus on the editor on load. It's `false</code> by default.`
+- `focusOnLoad`: Will focus on the editor on load. It's `false` by default.
+
+- `shortcuts.modifier`: The modifying key for shortcuts. It's `18` (the alt key) by default, to reduce default browser shortcut conflicts.
+
+- `shortcuts.fullscreen`: The fullscreen shortcut key. It's `70` (f keycode) by default.
+
+- `shortcuts.preview`: The preview shortcut key. It's `80` (p keycode) by default.
+
+- `shortcuts.edit`: The edit mode shortcut key. It's `79` (o keycode) by default.
 
 **Example:**
 
@@ -130,7 +138,10 @@ editor.options({
     editor:'/css/epiceditor/editor-custom.css',
     preview:'/css/epiceditor/preview-custom.css'
   },
-  focusOnLoad:true
+  focusOnLoad:true,
+  shortcuts: {
+    preview: 77 //M
+  }
 }).load();
 ```
 
@@ -141,6 +152,7 @@ Will grab an element of the editor for easy DOM manipulation inside of the edito
 - `'body'`: Returns the iframe's inner `<body>` element.
 - `'editor'`: Returns the editor which is a `<textarea>`.
 - `'previewer'`: Returns the previewer element which is a `<div>`.
+- `'wrapper'`: Returns the wrapping `<div>` containing everything inside the `<iframe>`.
 
 **Example:**
 

diff --git a/epiceditor.js b/epiceditor.js
@@ -125,6 +125,11 @@
     headID.appendChild(cssNode);
   }
 
+  //Simply replaces a class (o), to a new class (n) on an element provided (e)
+  function _replaceClass(e, o, n){
+    e.className = e.className.replace(o, n);
+  }
+
   /**
    * Will return the version number if the browser is IE. If not will return -1
    * TRY NEVER TO USE THIS AND USE FEATURE DETECTION IF POSSIBLE
@@ -233,6 +238,12 @@
       //Because there might be multiple editors, we create a random id
     , id:uId
     , focusOnLoad:false
+    , shortcuts: { 
+        modifier: 18 // alt keycode
+      , fullscreen: 70 // f keycode
+      , preview: 80 // p keycode
+      , edit: 79 // o keycode
+      }
     };
 
     //Setup local storage of files
@@ -315,7 +326,6 @@
     iframeBody.style.margin = '0';
     _insertCSSLink(self.settings.basePath+self.settings.themes.editor,self.iframe);
 
-
     //Add a relative style to the overall wrapper to keep CSS relative to the editor
     self.iframe.getElementsByClassName('epiceditor-wrapper')[0].style.position = 'relative';
 
@@ -345,6 +355,9 @@
       this.previewer.style.height = parseInt(_getStyle(this.previewer,'height'))+2;
     }
 
+    //Preload the preview theme:
+    _insertCSSLink(self.settings.basePath+self.settings.themes.preview, self.iframe, 'theme');
+
     //If there is a file to be opened with that filename and it has content...
     this.open(self.settings.file.name);
 
@@ -353,20 +366,14 @@
     }
 
     //Sets up the onclick event on the previewer/editor toggle button
+    //TODO: Should use EE's state object rather than classes
     self.iframe.getElementsByClassName('epiceditor-toggle-btn')[0].addEventListener('click',function(){
-      var editorWrapper = self.iframe.getElementsByClassName('epiceditor-wrapper')[0];
-      //Simply replaces a class (o), to a new class (n) on an element provided (e)
-      function replaceClass(e, o, n){
-        e.className = editorWrapper.className.replace(o, n);
-      }
       //If it was in edit mode...
-      if(editorWrapper.className.indexOf('epiceditor-edit-mode') > -1){
-        replaceClass(editorWrapper,'epiceditor-edit-mode','epiceditor-preview-mode');
+      if(self.get('wrapper').className.indexOf('epiceditor-edit-mode') > -1){
         self.preview();
       }
       //If it was in preview mode...
       else{
-        replaceClass(editorWrapper,'epiceditor-preview-mode','epiceditor-edit-mode');
         self.edit();
       }
     });
@@ -489,11 +496,41 @@
     //TODO: This should have a timer to save on performance
     //TODO: The save file shoudl be dynamic, not just default
     //On keyup, save the content to the proper file for offline use
-    this.editor.addEventListener('keyup',function(){
+    self.editor.addEventListener('keyup',function(){
       self.content = this.value;
       self.save(self.settings.file.name,this.value);
     });
 
+    //Add keyboard shortcuts for convenience.
+    var isMod = false;
+    self.iframe.addEventListener('keyup', function(e){
+      if(e.keyCode === self.settings.shortcuts.modifier){ isMod = false };
+    });
+    self.iframe.addEventListener('keydown', function(e){
+      if(e.keyCode === self.settings.shortcuts.modifier){ isMod = true }; //check for modifier press(default is alt key), save to var
+
+      //Check for alt+p and make sure were not in fullscreen - default shortcut to switch to preview
+      if(isMod === true && e.keyCode === self.settings.shortcuts.preview && !fullScreenApi.isFullScreen()){
+        e.preventDefault();
+        self.preview();
+      }
+      //Check for alt+o - default shortcut to switch back to the editor
+      if(isMod === true && e.keyCode === self.settings.shortcuts.edit){
+        e.preventDefault();
+        if(!fullScreenApi.isFullScreen()){
+          self.edit();
+        }
+      }
+      //Check for alt+f - default shortcut to make editor fullscreen
+      if(isMod === true && e.keyCode === self.settings.shortcuts.fullscreen){
+        e.preventDefault();
+        //TODO remove this once issue #32 is fixed, but don't until #32 or else FF will error out
+        if(document.body.webkitRequestFullScreen){
+          fullScreenApi.requestFullScreen(fsElement);
+        }
+      }
+    });
+
     self.iframe.close();
     //The callback and call are the same thing, but different ways to access them
     callback.call(this);
@@ -530,6 +567,8 @@
       theme = theme || themePath
     }
 
+    _replaceClass(self.get('wrapper'),'epiceditor-edit-mode','epiceditor-preview-mode');
+
     //Check if no CSS theme link exists
     if(!self.iframe.getElementById('theme')){
       _insertCSSLink(theme, self.iframe, 'theme');
@@ -557,6 +596,7 @@
    */
   EpicEditor.prototype.edit = function(){
     var self = this;
+    _replaceClass(self.get('wrapper'),'epiceditor-preview-mode','epiceditor-edit-mode');
     this.editor.style.display = 'block';
     this.previewer.style.display = 'none';
     self.emit('edit');
@@ -565,7 +605,7 @@
 
   /**
    * Grabs a specificed HTML node. Use it as a shortcut to getting the iframe contents
-   * @param   {String} name The name of the node (can be document, body, editor, or previewer)
+   * @param   {String} name The name of the node (can be document, body, editor, previewer, or wrapper)
    * @returns {Object|Null}
    */ 
   EpicEditor.prototype.get = function(name){
@@ -574,6 +614,7 @@
     , body: this.iframe.body
     , editor: this.editor
     , previewer: this.previewer
+    , wrapper: this.iframe.getElementsByClassName('epiceditor-wrapper')[0]
     }
     if(!available[name]){
       return null;

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>EpicEditor Docs</title>
+    <title>EpicEditor - An embeddable JavaScript Markdown editor</title>
     <style>
       body {background:#FEED79;}
       #wrapper { width:600px;margin:0 auto;font-family:helvetica,arial,sans-serif;line-height:1.4em; }
@@ -23,7 +23,7 @@
   </head>
   <body>
     <div id="wrapper">
-      <h1>EpicEditor <span>alpha 0.0.2</span></h1>
+      <h1>EpicEditor <span>alpha 0.0.3</span></h1>
       <h2>An Embeddable JavaScript Markdown Editor</h2>
       <p>EpicEditor is an embeddable JavaScript <a href="http://daringfireball.net/projects/markdown/">Markdown</a> editor with some minor Markdown enhancements such as automatic link creation and code fencing.</p>
 
@@ -105,6 +105,10 @@ <h6 id="api-options">options(<em>options</em>)</h6>
         <li><code>themes.editor</code>: The theme for the editor which is a textarea inside of an iframe.</li>
         <li><code>themes.preview</code>: The theme for the previewer which is a div of content inside of an iframe.</li>
         <li><code>focusOnLoad</code>: Will focus on the editor on load. It's <code>false</code> by default.</li>
+        <li><code>shortcuts.modifier</code>: The modifying key for shortcuts. It's <code>18</code> (the <kbd>alt</kbd> key) by default, to reduce default browser shortcut conflicts.</li>
+        <li><code>shortcuts.fullscreen</code>: The fullscreen shortcut key. It's <code>70</code> (<kbd>f</kbd> key) by default.</li>
+        <li><code>shortcuts.preview</code>: The preview shortcut key. It's <code>80</code> (<kbd>p</kbd> key) by default.</li>
+        <li><code>shortcuts.edit</code>: The edit mode shortcut key. It's <code>79</code> (<kbd>o</kbd> key) by default.</li>
       </ul>
       <p class="example">Example:</p>
       <pre><code class="javascript">editor.options({
@@ -116,7 +120,10 @@ <h6 id="api-options">options(<em>options</em>)</h6>
     editor:'/css/epiceditor/editor-custom.css',
     preview:'/css/epiceditor/preview-custom.css'
   },
-  focusOnLoad:true
+  focusOnLoad:true,
+  shortcuts: {
+    preview: 77 //M
+  }
 }).load();</code></pre>
 
       <h6 id="api-get">get(<em>element</em>)</h6>
@@ -126,6 +133,7 @@ <h6 id="api-get">get(<em>element</em>)</h6>
         <li><code>'body'</code>: Returns the iframe's inner &lt;body&gt; element.</li>
         <li><code>'editor'</code>: Returns the editor which is a &lt;textarea&gt;.</li>
         <li><code>'previewer'</code>: Returns the previewer element which is a &lt;div&gt;.</li>
+        <li><code>'wrapper'</code>: Returns the wrapping &lt;div&gt; containing everything inside the &lt;iframe&gt;.</li>
       </ul>
        <p class="example">Example:</p>
       <pre><code class="javascript">someBtn.onclick = function(){
@@ -247,6 +255,7 @@ <h4>Theming</h4>
       <h3>Who</h3>
       <p><a href="http://twitter.com/oscargodson">Oscar Godson</a> (me!), created EpicEditor with help from <a href="http://twitter.com/adam_bickford">Adam Bickford</a>. With many thanks to John Fraser (<em>site is no longer up</em>) for his <a href="https://github.com/coreyti/showdown">Showdown.js</a> script and <a href="http://daringfireball.net/">John Gruber</a> for <a href="http://daringfireball.net/projects/markdown/">Markdown</a>. Also, <a href="http://blog.izs.me">Isaac Z. Schlueter</a> for his port of <a href="https://github.com/isaacs/github-flavored-markdown">GitHub Flavored Markdown</a> which I <a href="https://github.com/oscargodson/github-flavored-markdown">forked</a>.</p>
     </div>
+    <a href="https://github.com/OscarGodson/EpicEditor"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
     <script src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
     <script src="epiceditor.js"></script>
     <script>
@@ -264,8 +273,8 @@ <h3>Who</h3>
       ee1.options({
         file:{
           defaultContent:"#EpicEditor\nThis is some default content. Go ahead, _change me_. "
-        }, 
-        focusOnLoad:true
+        }
+        , focusOnLoad:true
       })
       .load();
     </script>