Added support of resizable editor

This commit is contained in:
Wu Cheng-Han 2015-09-25 18:46:08 +08:00
parent b86a695f9c
commit 529c5f6c13
19 changed files with 47 additions and 2 deletions

View file

@ -42,15 +42,23 @@ body {
cursor: pointer; cursor: pointer;
margin: 2px; margin: 2px;
} }
.row { .ui-content {
height: 100%;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.ui-edit-area { .ui-edit-area {
height: 100%;
/*padding-left: 15px;*/ /*padding-left: 15px;*/
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
} }
.ui-edit-area .ui-resizable-handle.ui-resizable-e {
cursor: col-resize;
width: 5px;
background-color: white;
box-shadow: 5px 0px 10px #e7e7e7;
}
.ui-view-area { .ui-view-area {
/*overflow-y: scroll;*/ /*overflow-y: scroll;*/
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

View file

@ -511,6 +511,8 @@ function checkResponsive() {
emitUserStatus(); emitUserStatus();
} }
var lastEditorWidth = 0;
function checkEditorStyle() { function checkEditorStyle() {
var scrollbarStyle = editor.getOption('scrollbarStyle'); var scrollbarStyle = editor.getOption('scrollbarStyle');
if (scrollbarStyle == 'overlay' || currentMode == modeType.both) { if (scrollbarStyle == 'overlay' || currentMode == modeType.both) {
@ -531,6 +533,15 @@ function checkEditorStyle() {
//set sizer height to make it at least height as editor //set sizer height to make it at least height as editor
var editorSizerHeight = ui.area.edit.height() - (statusBar ? statusBar.outerHeight() : 0); var editorSizerHeight = ui.area.edit.height() - (statusBar ? statusBar.outerHeight() : 0);
$('.CodeMirror-sizer').css('height', editorSizerHeight + 'px'); $('.CodeMirror-sizer').css('height', editorSizerHeight + 'px');
//make editor resizable
ui.area.edit.resizable({
handles: 'e',
maxWidth: $(window).width() * 0.7,
minWidth: $(window).width() * 0.2,
stop: function (e) {
lastEditorWidth = ui.area.edit.width();
}
});
} }
function checkTocStyle() { function checkTocStyle() {
@ -657,7 +668,7 @@ function changeMode(type) {
ui.area.codemirror.addClass(scrollClass); ui.area.codemirror.addClass(scrollClass);
ui.area.edit.addClass(responsiveClass).show(); ui.area.edit.addClass(responsiveClass).show();
ui.area.view.addClass(scrollClass); ui.area.view.addClass(scrollClass);
ui.area.view.addClass(responsiveClass).show(); ui.area.view.show();
break; break;
} }
if (currentMode != modeType.view && visibleLG) { if (currentMode != modeType.view && visibleLG) {
@ -685,6 +696,17 @@ function changeMode(type) {
} else { } else {
$(document.body).css('background-color', ui.area.codemirror.css('background-color')); $(document.body).css('background-color', ui.area.codemirror.css('background-color'));
} }
//check resizable editor style
if (currentMode == modeType.both) {
if (lastEditorWidth > 0)
ui.area.edit.css('width', lastEditorWidth + 'px');
else
ui.area.edit.css('width', '');
ui.area.edit.find('.ui-resizable-handle').show();
} else {
ui.area.edit.css('width', '');
ui.area.edit.find('.ui-resizable-handle').hide();
}
windowResizeInner(); windowResizeInner();

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 335 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 207 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 332 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

7
public/vendor/jquery-ui/jquery-ui.min.css vendored Executable file

File diff suppressed because one or more lines are too long

6
public/vendor/jquery-ui/jquery-ui.min.js vendored Executable file

File diff suppressed because one or more lines are too long

View file

@ -13,6 +13,7 @@
<script src="/vendor/greensock-js/TweenMax.min.js" defer></script> <script src="/vendor/greensock-js/TweenMax.min.js" defer></script>
<script src="/vendor/greensock-js/jquery.gsap.min.js" defer></script> <script src="/vendor/greensock-js/jquery.gsap.min.js" defer></script>
<% } %> <% } %>
<script src="/vendor/jquery-ui/jquery-ui.min.js" defer></script>
<!--codemirror--> <!--codemirror-->
<script src="/vendor/codemirror/codemirror.min.js" defer></script> <script src="/vendor/codemirror/codemirror.min.js" defer></script>
<script src="/vendor/inlineAttachment/inline-attachment.js" defer></script> <script src="/vendor/inlineAttachment/inline-attachment.js" defer></script>

View file

@ -16,6 +16,7 @@
<link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap-social.css"> <link rel="stylesheet" href="/css/bootstrap-social.css">
<% } %> <% } %>
<link rel="stylesheet" href="/vendor/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" href="/vendor/codemirror/lib/codemirror.css"> <link rel="stylesheet" href="/vendor/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="/vendor/codemirror/addon/fold/foldgutter.css"> <link rel="stylesheet" href="/vendor/codemirror/addon/fold/foldgutter.css">
<link rel="stylesheet" href="/vendor/codemirror/addon/dialog/dialog.css"> <link rel="stylesheet" href="/vendor/codemirror/addon/dialog/dialog.css">