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 23 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
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
bower_components
.DS_Store
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
181 changes: 180 additions & 1 deletion css/bootstrap-markdown.min.css
Original file line number Diff line number Diff line change
@@ -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%;
}
58 changes: 50 additions & 8 deletions js/bootstrap-markdown.js
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -296,7 +316,7 @@
+this.__localize('Save')
+'</button>')


}

footer = typeof options.footer === 'function' ? options.footer(this) : options.footer
Expand Down Expand Up @@ -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>\
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should also add the other supported icon libs like fontawesome and fontawesome v3 like the rest of the buttons

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I was thinking of that too.

<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
Expand All @@ -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
Expand Down Expand Up @@ -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()

Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -1011,7 +1053,7 @@
e.replaceSelection('- '+chunk)
// Set the cursor
cursor = selected.start+2

} else {
if (selected.text.indexOf('\n') < 0) {
chunk = selected.text
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -1136,7 +1178,7 @@
e.replaceSelection('> '+chunk)
// Set the cursor
cursor = selected.start+2

} else {
if (selected.text.indexOf('\n') < 0) {
chunk = selected.text
Expand Down
Loading