Skip to content

Commit

Permalink
Merge pull request #99 from lodev09/master
Browse files Browse the repository at this point in the history
Fullscreen Support
  • Loading branch information
toopay committed Sep 3, 2014
2 parents 906a6d7 + 2ed4268 commit fa9a64e
Show file tree
Hide file tree
Showing 3 changed files with 241 additions and 14 deletions.
3 changes: 2 additions & 1 deletion css/bootstrap-markdown.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

99 changes: 86 additions & 13 deletions js/bootstrap-markdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
}
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -362,6 +391,8 @@

if (options.initialstate === 'preview') {
this.showPreview();
} else if (options.initialstate === 'fullscreen' && options.fullscreen.enable) {
this.setFullscreen(true)
}

} else {
Expand All @@ -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)

Expand Down Expand Up @@ -724,7 +773,10 @@
break

case 13: // enter
blocked = false
break
case 27: // escape
if (this.$isFullscreen) this.setFullscreen(false)
blocked = false
break

Expand Down Expand Up @@ -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
Expand Down
153 changes: 153 additions & 0 deletions less/bootstrap-markdown.less
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}

0 comments on commit fa9a64e

Please sign in to comment.