Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fullscreen Support #99

Merged
merged 33 commits into from
Sep 3, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
d372d5d
Added resize option to preview container
Jul 10, 2014
f90f2c4
Create bootstrap-markdown.kr.js
ssinss Jul 21, 2014
6d3b429
Russian localization
Jul 22, 2014
2de3d26
Ukrainian localization
Jul 22, 2014
98e0da3
Update bootstrap-markdown.ua.js
Jul 22, 2014
3e0b9ef
Removed the import dependency for twitter bootstrap. fixes #71
Jul 28, 2014
64a8cb6
Add .gitignore
futhr Jul 18, 2014
f5beffd
Update copyright year.
futhr Jul 29, 2014
7893ac2
Add Swedish locale.
futhr Jul 18, 2014
e4056d2
Add Norwegian locale.
futhr Jul 18, 2014
96ec372
JS hinted locales.
futhr Jul 18, 2014
7b3b01a
Fixes typo numeric to number.
futhr Jul 29, 2014
c0d771d
Bump minor version
toopay Aug 19, 2014
852580f
Fullscreen support
lodev09 Aug 28, 2014
ce29b92
Less fix
lodev09 Aug 28, 2014
e5bc00d
Less fix
lodev09 Aug 29, 2014
4877d8b
Less fix
lodev09 Aug 29, 2014
87818b1
Less fix
lodev09 Aug 29, 2014
c9e9180
Less fix
lodev09 Aug 29, 2014
b4a9a60
Less fix
lodev09 Aug 29, 2014
e0fa23c
Less fix
lodev09 Aug 29, 2014
d437b56
Less fix
lodev09 Aug 29, 2014
8f5dfbf
Less fix
lodev09 Aug 29, 2014
1cd70e1
Merge remote-tracking branch 'upstream/master'
lodev09 Sep 1, 2014
87ea84c
Reset
lodev09 Sep 1, 2014
37e369c
Rebase & PR
lodev09 Sep 1, 2014
ecc7aba
Fullscreen Icon support
lodev09 Sep 1, 2014
feee3e6
Fullscreen Theme definition
lodev09 Sep 1, 2014
1946177
e.preventDefault()
lodev09 Sep 1, 2014
9a610bf
CSS and Other stuff
lodev09 Sep 1, 2014
3d167be
Revert theme definition
lodev09 Sep 2, 2014
7abe4ce
exit fullscreen on escape added
lodev09 Sep 2, 2014
2ed4268
Escape key fix
lodev09 Sep 3, 2014
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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%;
}