Fullscreen Support

.gitignore

@@ -0,0 +1,2 @@
+bower_components
+.DS_Store

README.md

@@ -11,8 +11,8 @@ Demo and documentation on [http://toopay.github.com/bootstrap-markdown/](http://
 
 ### LICENSE
 
-> Copyright 2013 Taufan Aditya
-> 
+> Copyright 2013-2014 Taufan Aditya
+>
 > Licensed under the Apache License, Version 2.0 (the "License");
 > you may not use this file except in compliance with the License.
 > You may obtain a copy of the License at
@@ -23,4 +23,4 @@ Demo and documentation on [http://toopay.github.com/bootstrap-markdown/](http://
 > distributed under the License is distributed on an "AS IS" BASIS,
 > WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 > See the License for the specific language governing permissions and
-> limitations under the License.
+> limitations under the License.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-markdown",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "main": ["./js/bootstrap-markdown.js", "./css/bootstrap-markdown.min.css"],
   "dependencies": {
     "bootstrap": "~3.1.1"

css/bootstrap-markdown.min.css

@@ -1 +1,180 @@
-.md-editor{display:block;border:1px solid #ddd}.md-editor>.md-header,.md-editor .md-footer{display:block;padding:6px 4px;background:#fff}.md-editor>.md-header{margin: 0;}.md-editor>.md-preview{background:#fff;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;min-height:10px;overflow:auto}.md-editor>textarea{font-family:Monaco,Menlo,Consolas,"Courier New",monospace;font-size:14px;outline:0;outline:thin dotted \9;margin:0;display:block;padding:0;width:100%;border:0;border-top:1px dashed #ddd;border-bottom:1px dashed #ddd;border-radius:0;box-shadow:none;background:#eee}.md-editor>textarea:focus{box-shadow:none;background:#fff}.md-editor.active{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
+/**
+ * Bootstrap-Markdown.less
+ *
+ * @author Taufan Aditya @taufanaditya
+ * @copyright 2013 Taufan Aditya
+ */
+.md-editor {
+  display: block;
+  border: 1px solid #dddddd;
+}
+.md-editor > .md-header,
+.md-editor .md-footer {
+  display: block;
+  padding: 6px 4px;
+  background: #f5f5f5;
+}
+.md-editor > .md-header {
+  margin: 0;
+}
+.md-editor > .md-preview {
+  background: #ffffff;
+  border-top: 1px dashed #dddddd;
+  border-bottom: 1px dashed #dddddd;
+  min-height: 10px;
+  overflow: auto;
+}
+.md-editor > textarea {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 14px;
+  outline: 0;
+  outline: thin dotted  \9;
+  /* IE6-9 */
+  margin: 0;
+  display: block;
+  padding: 0;
+  width: 100%;
+  border: 0;
+  border-top: 1px dashed #dddddd;
+  border-bottom: 1px dashed #dddddd;
+  border-radius: 0;
+  box-shadow: none;
+  background: #eeeeee;
+}
+.md-editor > textarea:focus {
+  box-shadow: none;
+  background: #ffffff;
+}
+.md-editor.active {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.md-editor .md-controls {
+  float: right;
+  padding: 3px;
+}
+.md-editor .md-controls .md-control {
+  right: 5px;
+  color: #bebebe;
+  padding: 3px 3px 3px 10px;
+}
+.md-editor .md-controls .md-control:hover {
+  color: #333;
+}
+.md-editor.md-fullscreen-mode {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  padding: 60px 30px 15px;
+  background: #fff !important;
+  border: 0 !important;
+}
+.md-editor.md-fullscreen-mode.theme-dark {
+  background: #1d1f21 !important;
+}
+.md-editor.md-fullscreen-mode.theme-dark .md-fullscreen-controls a {
+  color: #a4b1b1;
+}
+.md-editor.md-fullscreen-mode.theme-dark .md-fullscreen-controls a:hover {
+  color: #dbe0e0;
+  text-shadow: 0 0 10px #000;
+}
+.md-editor.md-fullscreen-mode.theme-dark .md-preview,
+.md-editor.md-fullscreen-mode.theme-dark .md-input,
+.md-editor.md-fullscreen-mode.theme-dark .md-input:hover,
+.md-editor.md-fullscreen-mode.theme-dark .md-input:active,
+.md-editor.md-fullscreen-mode.theme-dark .md-input:focus {
+  color: #dbe0e0;
+  background: #1d1f21 !important;
+}
+.md-editor.md-fullscreen-mode.theme-dark .btn:hover,
+.md-editor.md-fullscreen-mode.theme-dark .btn:focus,
+.md-editor.md-fullscreen-mode.theme-dark .btn.active,
+.md-editor.md-fullscreen-mode.theme-dark .btn:active {
+  color: #dbe0e0;
+  text-shadow: 0 0 10px #000;
+}
+.md-editor.md-fullscreen-mode .md-footer {
+  display: none;
+}
+.md-editor.md-fullscreen-mode .md-input,
+.md-editor.md-fullscreen-mode .md-preview {
+  margin: 0 auto !important;
+  height: 100% !important;
+  font-size: 20px !important;
+  padding: 20px !important;
+  color: #999;
+  line-height: 1.6em !important;
+  resize: none !important;
+  box-shadow: none !important;
+  background: #fff !important;
+  border: 0 !important;
+}
+.md-editor.md-fullscreen-mode .md-preview {
+  color: #333;
+  overflow: auto;
+}
+.md-editor.md-fullscreen-mode .md-input:hover,
+.md-editor.md-fullscreen-mode .md-input:focus {
+  color: #333;
+  background: #fff !important;
+}
+.md-editor.md-fullscreen-mode .md-header {
+  background: none;
+  text-align: center;
+  position: fixed;
+  width: 100%;
+  top: 20px;
+}
+.md-editor.md-fullscreen-mode .btn-group {
+  float: none;
+}
+.md-editor.md-fullscreen-mode .btn {
+  border: 0;
+  background: none;
+  color: #b3b3b3;
+}
+.md-editor.md-fullscreen-mode .btn:hover,
+.md-editor.md-fullscreen-mode .btn:focus,
+.md-editor.md-fullscreen-mode .btn.active,
+.md-editor.md-fullscreen-mode .btn:active {
+  box-shadow: none;
+  color: #333;
+}
+.md-editor.md-fullscreen-mode .md-fullscreen-controls {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  text-align: right;
+  z-index: 1002;
+  display: block;
+}
+.md-editor.md-fullscreen-mode .md-fullscreen-controls a {
+  color: #b3b3b3;
+  clear: right;
+  margin: 10px;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+}
+.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
+  color: #333;
+  text-decoration: none;
+}
+.md-editor.md-fullscreen-mode .md-editor {
+  height: 100% !important;
+  position: relative;
+}
+.md-editor .md-fullscreen-controls {
+  display: none;
+}
+.md-nooverflow {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+}

js/bootstrap-markdown.js

@@ -1,8 +1,8 @@
 /* ===================================================
- * bootstrap-markdown.js v2.5.0
+ * bootstrap-markdown.js v2.6.0
  * http://github.com/toopay/bootstrap-markdown
  * ===================================================
- * Copyright 2013 Taufan Aditya
+ * Copyright 2013-2014 Taufan Aditya
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -63,6 +63,22 @@
       })
     }
 
+  , fullscreen: function(mode) {
+    var that = this,
+        $editor = this.$editor,
+        $textarea = this.$textarea
+
+    if (mode === true) {
+      $editor.addClass('md-fullscreen-mode');
+      $('body').addClass('md-nooverflow')
+    } else {
+      $editor.removeClass('md-fullscreen-mode')
+      $('body').removeClass('md-nooverflow')
+    }
+
+    $textarea.focus()
+  }
+
   , __buildButtons: function(buttonsArray, container) {
       var i,
           ns = this.$ns,
@@ -240,6 +256,10 @@
           editorHeader = this.__buildButtons([allBtnGroups], editorHeader)
         }
 
+        editorHeader.append('<div class="md-controls"><a class="md-control md-control-fullscreen" href="#"><span class="glyphicon glyphicon-fullscreen"></span></a></div>').on('click', '.md-control-fullscreen', function() {
+            instance.fullscreen(true)
+        })
+
         editor.append(editorHeader)
 
         // Wrap the textarea
@@ -296,7 +316,7 @@
                               +this.__localize('Save')
                               +'</button>')
 
-          
+
         }
 
         footer = typeof options.footer === 'function' ? options.footer(this) : options.footer
@@ -368,8 +388,26 @@
         this.$editor.addClass('active')
       }
 
+      this.$editor.append('\
+        <div class="md-fullscreen-controls">\
+          <a href="#" class="switch-theme" title="Switch themes"><span class="glyphicon glyphicon-adjust"></span></a>\
+          <a href="#" class="exit-fullscreen" title="Exit fullscreen"><span class="glyphicon glyphicon-remove"></span></a>\
+        </div>')
+
+      this.$editor.on('click', '.exit-fullscreen', function(e) {
+        e.preventDefault()
+        instance.fullscreen(false)
+      })
+
+      this.$editor.on('click', '.switch-theme', function(e) {
+        e.preventDefault()
+        instance.$editor.toggleClass('theme-dark')
+      })
+
       if (options.initialstate === 'preview') {
         this.showPreview();
+      } else if (options.initialstate === 'fullscreen') {
+        this.fullscreen(options.fullscreen)
       }
 
       // hide hidden buttons from options
@@ -387,7 +425,7 @@
   , parseContent: function() {
       var content,
         callbackContent = this.$options.onPreview(this) // Try to get the content from callback
-      
+
       if (typeof callbackContent == 'string') {
         // Set the content based by callback content
         content = callbackContent
@@ -437,6 +475,10 @@
         height: container.outerHeight() + 'px'
       })
 
+      if (this.$options.resize) {
+        replacementContainer.css('resize',this.$options.resize)
+      }
+
       // Hide the last-active textarea
       container.hide()
 
@@ -587,7 +629,7 @@
         this.$nextTab.push(function(){
           return that.findSelection(start)
         })
-      } else if (typeof start == 'numeric' && typeof end == 'numeric') {
+      } else if (typeof start == 'number' && typeof end == 'number') {
         var oldSelection = this.getSelection()
 
         this.setSelection(start,end)
@@ -1011,7 +1053,7 @@
               e.replaceSelection('- '+chunk)
               // Set the cursor
               cursor = selected.start+2
-              
+
             } else {
               if (selected.text.indexOf('\n') < 0) {
                 chunk = selected.text
@@ -1058,7 +1100,7 @@
               e.replaceSelection('1. '+chunk)
               // Set the cursor
               cursor = selected.start+3
-              
+
             } else {
               if (selected.text.indexOf('\n') < 0) {
                 chunk = selected.text
@@ -1136,7 +1178,7 @@
               e.replaceSelection('> '+chunk)
               // Set the cursor
               cursor = selected.start+2
-              
+
             } else {
               if (selected.text.indexOf('\n') < 0) {
                 chunk = selected.text