Fullscreen Support

js/bootstrap-markdown.js

@@ -27,17 +27,18 @@
 
   var Markdown = function (element, options) {
     // Class Properties
-    this.$ns          = 'bootstrap-markdown'
-    this.$element     = $(element)
-    this.$editable    = {el:null, type:null,attrKeys:[], attrValues:[], content:null}
-    this.$options     = $.extend(true, {}, $.fn.markdown.defaults, options, this.$element.data(), this.$element.data('options'))
-    this.$oldContent  = null
-    this.$isPreview   = false
-    this.$editor      = null
-    this.$textarea    = null
-    this.$handler     = []
-    this.$callback    = []
-    this.$nextTab     = []
+    this.$ns           = 'bootstrap-markdown'
+    this.$element      = $(element)
+    this.$editable     = {el:null, type:null,attrKeys:[], attrValues:[], content:null}
+    this.$options      = $.extend(true, {}, $.fn.markdown.defaults, options, this.$element.data(), this.$element.data('options'))
+    this.$oldContent   = null
+    this.$isPreview    = false
+    this.$isFullscreen = false
+    this.$editor       = null
+    this.$textarea     = null
+    this.$handler      = []
+    this.$callback     = []
+    this.$nextTab      = []
 
     this.showEditor()
   }
@@ -84,7 +85,7 @@
             var button = buttons[z],
                 buttonToggle = '',
                 buttonHandler = ns+'-'+button.name,
-                buttonIcon = button.icon instanceof Object ? button.icon[this.$options.iconlibrary] : button.icon,
+                buttonIcon = this.__getIcon(button.icon),
                 btnText = button.btnText ? button.btnText : '',
                 btnClass = button.btnClass ? button.btnClass : 'btn',
                 tabIndex = button.tabIndex ? button.tabIndex : '-1',
@@ -192,6 +193,27 @@
       return string;
     }
 
+  , __getIcon: function(src) {
+    return typeof src == 'object' ? src[this.$options.iconlibrary] : src;
+  }
+
+  , setFullscreen: function(mode) {
+    var $editor = this.$editor,
+        $textarea = this.$textarea
+
+    if (mode === true) {
+      $editor.addClass('md-fullscreen-mode')
+      $('body').addClass('md-nooverflow')
+      this.$options.onFullscreen(this)
+    } else {
+      $editor.removeClass('md-fullscreen-mode')
+      $('body').removeClass('md-nooverflow')
+    }
+
+    this.$isFullscreen = mode;
+    $textarea.focus()
+  }
+
   , showEditor: function() {
       var instance = this,
           textarea,
@@ -240,6 +262,13 @@
           editorHeader = this.__buildButtons([allBtnGroups], editorHeader)
         }
 
+        if (options.fullscreen.enable) {
+          editorHeader.append('<div class="md-controls"><a class="md-control md-control-fullscreen" href="#"><span class="'+this.__getIcon(options.fullscreen.icons.fullscreenOn)+'"></span></a></div>').on('click', '.md-control-fullscreen', function(e) {
+              e.preventDefault();
+              instance.setFullscreen(true)
+          })
+        }
+
         editor.append(editorHeader)
 
         // Wrap the textarea
@@ -362,6 +391,8 @@
 
         if (options.initialstate === 'preview') {
           this.showPreview();
+        } else if (options.initialstate === 'fullscreen' && options.fullscreen.enable) {
+          this.setFullscreen(true)
         }
 
       } else {
@@ -373,6 +404,24 @@
         this.$editor.addClass('active')
       }
 
+      if (options.fullscreen.enable && options.fullscreen !== false) {
+        this.$editor.append('\
+          <div class="md-fullscreen-controls">\
+            <a href="#" class="switch-theme" title="Switch themes"><span class="'+this.__getIcon(options.fullscreen.icons.switchTheme)+'"></span></a>\
+            <a href="#" class="exit-fullscreen" title="Exit fullscreen"><span class="'+this.__getIcon(options.fullscreen.icons.fullscreenOff)+'"></span></a>\
+          </div>')
+
+        this.$editor.on('click', '.exit-fullscreen', function(e) {
+          e.preventDefault()
+          instance.setFullscreen(false)
+        })
+
+        this.$editor.on('click', '.switch-theme', function(e) {
+          e.preventDefault()
+          instance.$editor.toggleClass('theme-dark')
+        })
+      }
+
       // hide hidden buttons from options
       this.hideButtons(options.hiddenButtons)
 
@@ -724,7 +773,10 @@
           break
 
         case 13: // enter
+          blocked = false
+          break
         case 27: // escape
+          if (this.$isFullscreen) this.setFullscreen(false)
           blocked = false
           break
 
@@ -1205,14 +1257,35 @@
     hiddenButtons:[], // Default hidden buttons
     disabledButtons:[], // Default disabled buttons
     footer: '',
+    fullscreen: {
+      enable: true,
+      icons: {
+        fullscreenOn: {
+          fa: 'fa fa-expand',
+          glyph: 'glyphicon glyphicon-fullscreen',
+          'fa-3': 'icon-resize-full'
+        },
+        fullscreenOff: {
+          fa: 'fa fa-compress',
+          glyph: 'glyphicon glyphicon-fullscreen',
+          'fa-3': 'icon-resize-small'
+        },
+        switchTheme: {
+          fa: 'fa fa-adjust',
+          glyph: 'glyphicon glyphicon-adjust',
+          'fa-3': 'icon-adjust'
+        }
+      }
+    },
 
     /* Events hook */
     onShow: function (e) {},
     onPreview: function (e) {},
     onSave: function (e) {},
     onBlur: function (e) {},
     onFocus: function (e) {},
-    onChange: function(e) {}
+    onChange: function(e) {},
+    onFullscreen: function(e) {}
   }
 
   $.fn.markdown.Constructor = Markdown

less/bootstrap-markdown.less

@@ -56,4 +56,157 @@
     outline: 0;
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
   }
+
+  .md-controls {
+    float: right;
+    padding: 3px;
+
+    .md-control {
+      right: 5px;
+      color: #bebebe;
+      padding: 3px 3px 3px 10px;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+
+  // fullscreen mode styles
+  &.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;
+
+    &.theme-dark {
+      background: #1d1f21 !important;
+
+      .md-fullscreen-controls a {
+        color: #a4b1b1;
+        &:hover {
+          color: #dbe0e0;
+          text-shadow: 0 0 10px #000;
+        }
+      }
+
+      .md-preview,
+      .md-input,
+      .md-input:hover,
+      .md-input:active,
+      .md-input:focus {
+          color: #dbe0e0;
+          background: #1d1f21 !important;
+
+      }
+
+      .btn {
+        &:hover,
+        &:focus,
+        &.active,
+        &:active {
+          color: #dbe0e0;
+          text-shadow: 0 0 10px #000;
+        }
+      }
+    }
+
+    .md-footer {
+      display: none;
+    }
+
+    .md-input,
+    .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-preview {
+      color: #333;
+      overflow: auto;
+    }
+
+    .md-input {
+      &:hover,
+      &:focus {
+        color: #333;
+        background: #fff !important;
+      }
+    }
+
+    .md-header {
+      background: none;
+      text-align: center;
+      position: fixed;
+      width: 100%;
+      top: 20px;
+    }
+
+    .btn-group {
+      float: none;
+    }
+
+    .btn {
+      border: 0;
+      background: none;
+      color: #b3b3b3;
+
+      &:hover,
+      &:focus,
+      &.active,
+      &:active {
+        box-shadow: none;
+        color: #333;
+      }
+    }
+
+    .md-fullscreen-controls {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      text-align: right;
+      z-index: 1002;
+      display: block;
+      a {
+        color: #b3b3b3;
+        clear: right;
+        margin: 10px;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+
+        &:hover {
+          color: #333;
+          text-decoration: none;
+        }
+      }
+    }
+
+    .md-editor {
+      height: 100% !important;
+      position: relative;
+    }
+  }
+
+  .md-fullscreen-controls {
+    display: none;
+  }
 }
+
+.md-nooverflow {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;    
+}