Fixed vertical layout
This commit is contained in:
parent
2c1e1fe131
commit
b5475d1669
@ -258,7 +258,7 @@ define([
|
||||
}
|
||||
var selectionRange = this.createRange(startOffset, endOffset);
|
||||
var selectionRect = selectionRange.getBoundingClientRect();
|
||||
y = selectionRect.top + selectionRect.height / 2 - inputElt.offsetTop + inputElt.scrollTop;
|
||||
y = selectionRect.top + selectionRect.height / 2 - inputElt.getBoundingClientRect().top + inputElt.scrollTop;
|
||||
selectionRange.detach();
|
||||
}
|
||||
return {
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div class="layout-outer-wrapper">
|
||||
<div class="layout-inner-wrapper">
|
||||
<div class="layout-wrapper-l1">
|
||||
<div class="layout-wrapper-l2">
|
||||
<div class="navbar navbar-default ui-layout-north">
|
||||
<div class="navbar-inner">
|
||||
<div class="nav left-space"></div>
|
||||
@ -49,16 +49,18 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<pre id="wmd-input" class="ui-layout-center form-control"><div class="editor-content" contenteditable=true></div><div class="editor-margin"></div></pre>
|
||||
<div class="preview-panel">
|
||||
<div class="extension-preview-buttons"></div>
|
||||
<div class="layout-resizer layout-resizer-preview"></div>
|
||||
<div class="layout-toggler layout-toggler-navbar btn btn-info"><i class="icon-th"></i></div>
|
||||
<div class="layout-toggler layout-toggler-preview btn btn-info"><i class="icon-none"></i></div>
|
||||
<div class="extension-editor-buttons"></div>
|
||||
<div class="preview-container">
|
||||
<div id="preview-contents">
|
||||
<div id="wmd-preview" class="preview-content"></div>
|
||||
<div class="layout-wrapper-l3">
|
||||
<pre id="wmd-input" class="ui-layout-center form-control"><div class="editor-content" contenteditable=true></div><div class="editor-margin"></div></pre>
|
||||
<div class="preview-panel">
|
||||
<div class="extension-preview-buttons"></div>
|
||||
<div class="layout-resizer layout-resizer-preview"></div>
|
||||
<div class="layout-toggler layout-toggler-navbar btn btn-info"><i class="icon-th"></i></div>
|
||||
<div class="layout-toggler layout-toggler-preview btn btn-info"><i class="icon-none"></i></div>
|
||||
<div class="extension-editor-buttons"></div>
|
||||
<div class="preview-container">
|
||||
<div id="preview-contents">
|
||||
<div id="wmd-preview" class="preview-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -3,17 +3,24 @@ define([
|
||||
'underscore',
|
||||
'utils',
|
||||
'constants',
|
||||
'settings',
|
||||
'eventMgr',
|
||||
'crel',
|
||||
'mousetrap',
|
||||
], function($, _, utils, constants, eventMgr, crel, mousetrap) {
|
||||
], function($, _, utils, constants, settings, eventMgr, crel, mousetrap) {
|
||||
var layout = {};
|
||||
|
||||
var resizerSize = 32;
|
||||
var togglerSize = 60;
|
||||
var navbarHeight = 50;
|
||||
var editorMaxWidth = 250;
|
||||
var previewMaxWidth = 330;
|
||||
var editorMinSize = {
|
||||
width: 250,
|
||||
height: 180
|
||||
};
|
||||
var previewMinSize = {
|
||||
width: 330,
|
||||
height: 200
|
||||
};
|
||||
var menuPanelWidth = 280;
|
||||
var documentPanelWidth = 320;
|
||||
var windowSize;
|
||||
@ -27,13 +34,14 @@ define([
|
||||
var laterCssTimeoutId;
|
||||
var laterCssQueue = [];
|
||||
|
||||
var outerWrapper, innerWrapper, navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer;
|
||||
var wrapperL1, wrapperL2, wrapperL3;
|
||||
var navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer;
|
||||
|
||||
var animate = false;
|
||||
|
||||
function applyCssLater() {
|
||||
if(laterCssQueue.length === 0) {
|
||||
outerWrapper.$elt.removeClass('layout-animate');
|
||||
wrapperL1.$elt.removeClass('layout-animate');
|
||||
animate = false;
|
||||
return onResize();
|
||||
}
|
||||
@ -92,7 +100,7 @@ define([
|
||||
if(this.isOpen) {
|
||||
this.$elt.addClass('panel-open');
|
||||
if(backdrop) {
|
||||
$(backdropElt = utils.createBackdrop(outerWrapper.elt)).click(_.bind(function() {
|
||||
$(backdropElt = utils.createBackdrop(wrapperL1.elt)).click(_.bind(function() {
|
||||
this.toggle(false);
|
||||
}, this));
|
||||
this.$elt.addClass('bring-to-front');
|
||||
@ -107,7 +115,7 @@ define([
|
||||
}, this));
|
||||
}
|
||||
animate = true;
|
||||
outerWrapper.$elt.addClass('layout-animate');
|
||||
wrapperL1.$elt.addClass('layout-animate');
|
||||
resizeAll();
|
||||
};
|
||||
};
|
||||
@ -125,6 +133,8 @@ define([
|
||||
}).maxWidth;
|
||||
}
|
||||
|
||||
var editorContentElt;
|
||||
var editorMarginElt;
|
||||
function onResize() {
|
||||
var padding = (editor.elt.offsetWidth - getMaxWidth()) / 2;
|
||||
if(padding < constants.EDITOR_DEFAULT_PADDING) {
|
||||
@ -137,89 +147,135 @@ define([
|
||||
eventMgr.onLayoutResize();
|
||||
}
|
||||
|
||||
var editorContentElt;
|
||||
var editorMarginElt;
|
||||
var isVertical = settings.layoutOrientation == "vertical";
|
||||
function resizeAll() {
|
||||
windowSize = {
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
};
|
||||
|
||||
// Layout outer wrapper
|
||||
outerWrapper.y = navbar.isOpen ? 0 : -navbarHeight;
|
||||
outerWrapper.x = menuPanel.isOpen ? 0 : documentPanel.isOpen ? -(menuPanelWidth + documentPanelWidth) : -menuPanelWidth;
|
||||
outerWrapper.width = windowSize.width + menuPanelWidth + documentPanelWidth;
|
||||
outerWrapper.height = windowSize.height - outerWrapper.y;
|
||||
outerWrapper.applyCss();
|
||||
// Layout wrapper level 1
|
||||
wrapperL1.y = navbar.isOpen ? 0 : -navbarHeight;
|
||||
wrapperL1.x = menuPanel.isOpen ? 0 : documentPanel.isOpen ? -(menuPanelWidth + documentPanelWidth) : -menuPanelWidth;
|
||||
wrapperL1.width = windowSize.width + menuPanelWidth + documentPanelWidth;
|
||||
wrapperL1.height = windowSize.height - wrapperL1.y;
|
||||
|
||||
// Layout inner wrapper
|
||||
innerWrapper.left = menuPanelWidth;
|
||||
innerWrapper.width = windowSize.width;
|
||||
innerWrapper.height = outerWrapper.height;
|
||||
innerWrapper.applyCss();
|
||||
// Layout wrapper level 2
|
||||
wrapperL2.left = menuPanelWidth;
|
||||
wrapperL2.width = windowSize.width;
|
||||
wrapperL2.height = wrapperL1.height;
|
||||
|
||||
// Preview panel
|
||||
if(!previewPanel.isOpen) {
|
||||
previewPanel.x = innerWrapper.width - resizerSize;
|
||||
}
|
||||
else {
|
||||
if(previewPanel.halfSize) {
|
||||
previewPanel.width = (windowSize.width + resizerSize) / 2;
|
||||
// Layout wrapper level 3
|
||||
wrapperL3.top = navbarHeight;
|
||||
wrapperL3.width = windowSize.width;
|
||||
wrapperL3.height = wrapperL1.height - navbarHeight;
|
||||
|
||||
if(isVertical) {
|
||||
if(navbar.isOpen && wrapperL3.height < editorMinSize.height + (previewPanel.isOpen ? previewMinSize.height : 0)) {
|
||||
navbar.isOpen = false;
|
||||
return resizeAll();
|
||||
}
|
||||
if(previewPanel.width < previewMaxWidth) {
|
||||
previewPanel.halfSize = false;
|
||||
previewPanel.width = previewMaxWidth;
|
||||
if(!previewPanel.isOpen) {
|
||||
previewPanel.y = wrapperL3.height - resizerSize;
|
||||
}
|
||||
previewPanel.x = innerWrapper.width - previewPanel.width;
|
||||
if(previewPanel.x < editorMaxWidth) {
|
||||
previewPanel.halfSize = false;
|
||||
previewPanel.x = editorMaxWidth;
|
||||
previewPanel.width = innerWrapper.width - previewPanel.x;
|
||||
if(previewPanel.width < previewMaxWidth) {
|
||||
previewPanel.isOpen = false;
|
||||
previewPanel.width = previewMaxWidth;
|
||||
previewPanel.x = innerWrapper.width - resizerSize;
|
||||
else {
|
||||
if(previewPanel.halfSize) {
|
||||
previewPanel.height = (wrapperL3.height + resizerSize) / 2;
|
||||
}
|
||||
if(previewPanel.height < previewMinSize.height) {
|
||||
previewPanel.halfSize = false;
|
||||
previewPanel.height = previewMinSize.height;
|
||||
}
|
||||
previewPanel.y = wrapperL3.height - previewPanel.height;
|
||||
if(previewPanel.y < editorMinSize.height) {
|
||||
var previewPanelHeight = wrapperL3.height - editorMinSize.height;
|
||||
if(previewPanelHeight < previewMinSize.height) {
|
||||
previewPanel.isOpen = false;
|
||||
}
|
||||
else {
|
||||
previewPanel.halfSize = false;
|
||||
previewPanel.height = previewPanelHeight;
|
||||
}
|
||||
return resizeAll();
|
||||
}
|
||||
}
|
||||
previewPanel.width = wrapperL3.width;
|
||||
editor.height = previewPanel.y;
|
||||
editor.width = wrapperL3.width;
|
||||
previewContainer.top = resizerSize;
|
||||
previewContainer.height = previewPanel.height - resizerSize;
|
||||
previewContainer.width = previewPanel.width;
|
||||
navbarToggler.width = togglerSize;
|
||||
previewToggler.width = togglerSize;
|
||||
previewToggler.x = (previewPanel.width - togglerSize) / 2;
|
||||
previewResizer.width = previewContainer.width;
|
||||
}
|
||||
else {
|
||||
if(navbar.isOpen && wrapperL3.height < editorMinSize.height) {
|
||||
navbar.isOpen = false;
|
||||
return resizeAll();
|
||||
}
|
||||
if(!previewPanel.isOpen) {
|
||||
previewPanel.x = wrapperL3.width - resizerSize;
|
||||
}
|
||||
else {
|
||||
if(previewPanel.halfSize) {
|
||||
previewPanel.width = (wrapperL3.width + resizerSize) / 2;
|
||||
}
|
||||
if(previewPanel.width < previewMinSize.width) {
|
||||
previewPanel.halfSize = false;
|
||||
previewPanel.width = previewMinSize.width;
|
||||
}
|
||||
previewPanel.x = wrapperL3.width - previewPanel.width;
|
||||
if(previewPanel.x < editorMinSize.width) {
|
||||
var previewPanelWidth = wrapperL3.width - editorMinSize.width;
|
||||
if(previewPanelWidth < previewMinSize.width) {
|
||||
previewPanel.isOpen = false;
|
||||
}
|
||||
else {
|
||||
previewPanel.halfSize = false;
|
||||
previewPanel.width = previewPanelWidth;
|
||||
}
|
||||
return resizeAll();
|
||||
}
|
||||
}
|
||||
previewPanel.height = wrapperL3.height;
|
||||
editor.width = previewPanel.x;
|
||||
editor.height = wrapperL3.height;
|
||||
previewContainer.left = resizerSize;
|
||||
previewContainer.width = previewPanel.width - resizerSize;
|
||||
previewContainer.height = previewPanel.height;
|
||||
navbarToggler.height = togglerSize;
|
||||
previewToggler.height = togglerSize;
|
||||
previewToggler.y = (previewPanel.height - togglerSize) / 2;
|
||||
previewResizer.height = previewContainer.height;
|
||||
}
|
||||
|
||||
previewPanel.top = navbarHeight;
|
||||
previewPanel.height = innerWrapper.height - previewPanel.top;
|
||||
previewPanel.applyCss();
|
||||
|
||||
// Editor
|
||||
editor.top = navbarHeight;
|
||||
editor.width = previewPanel.x;
|
||||
editor.height = innerWrapper.height - editor.top;
|
||||
editor.applyCss();
|
||||
|
||||
// Preview container
|
||||
previewContainer.left = resizerSize;
|
||||
previewContainer.width = previewPanel.width - resizerSize;
|
||||
previewContainer.height = previewPanel.height;
|
||||
previewContainer.applyCss();
|
||||
|
||||
// Navbar toggler
|
||||
navbarToggler.applyCss();
|
||||
navbarToggler.$elt.toggleClass('open', navbar.isOpen);
|
||||
|
||||
// Preview toggler
|
||||
previewToggler.y = (previewPanel.height - togglerSize) / 2;
|
||||
previewToggler.applyCss();
|
||||
previewToggler.$elt.toggleClass('open', previewPanel.isOpen);
|
||||
|
||||
// Preview resizer
|
||||
previewResizer.height = previewContainer.height;
|
||||
previewResizer.applyCss();
|
||||
previewResizer.$elt.toggleClass('open', previewPanel.isOpen);
|
||||
|
||||
wrapperL1.applyCss();
|
||||
wrapperL2.applyCss();
|
||||
wrapperL3.applyCss();
|
||||
editor.applyCss();
|
||||
previewPanel.applyCss();
|
||||
previewContainer.applyCss();
|
||||
previewToggler.applyCss();
|
||||
previewResizer.applyCss();
|
||||
navbarToggler.applyCss();
|
||||
|
||||
|
||||
|
||||
|
||||
onResize();
|
||||
}
|
||||
layout.resizeAll = resizeAll;
|
||||
|
||||
layout.init = function() {
|
||||
outerWrapper = new DomObject('.layout-outer-wrapper');
|
||||
innerWrapper = new DomObject('.layout-inner-wrapper');
|
||||
wrapperL1 = new DomObject('.layout-wrapper-l1');
|
||||
wrapperL2 = new DomObject('.layout-wrapper-l2');
|
||||
wrapperL3 = new DomObject('.layout-wrapper-l3');
|
||||
navbar = new DomObject('.navbar');
|
||||
menuPanel = new DomObject('.menu-panel');
|
||||
documentPanel = new DomObject('.document-panel');
|
||||
@ -233,6 +289,8 @@ define([
|
||||
editorContentElt = editor.elt.querySelector('.editor-content');
|
||||
editorMarginElt = editor.elt.querySelector('.editor-margin');
|
||||
|
||||
wrapperL1.$elt.toggleClass('layout-vertical', isVertical);
|
||||
|
||||
navbar.isOpen = true;
|
||||
navbar.createToggler();
|
||||
navbarToggler.$elt.click(_.bind(navbar.toggle, navbar));
|
||||
@ -263,9 +321,9 @@ define([
|
||||
});
|
||||
|
||||
var isDragging = false;
|
||||
var desiredWidth;
|
||||
var desiredWidth, desiredHeight;
|
||||
var lastCoord;
|
||||
outerWrapper.$elt.on('mousemove', function(evt) {
|
||||
wrapperL1.$elt.on('mousemove', function(evt) {
|
||||
if(!isDragging) {
|
||||
return;
|
||||
}
|
||||
@ -277,7 +335,13 @@ define([
|
||||
x: evt.pageX,
|
||||
y: evt.pageY,
|
||||
};
|
||||
if(lastCoord.x !== newCoord.x) {
|
||||
if(isVertical && lastCoord.y !== newCoord.y) {
|
||||
desiredHeight += lastCoord.y - newCoord.y;
|
||||
previewPanel.height = desiredHeight;
|
||||
previewPanel.halfSize = false;
|
||||
resizeAll();
|
||||
}
|
||||
if(!isVertical && lastCoord.x !== newCoord.x) {
|
||||
desiredWidth += lastCoord.x - newCoord.x;
|
||||
previewPanel.width = desiredWidth;
|
||||
previewPanel.halfSize = false;
|
||||
@ -292,6 +356,7 @@ define([
|
||||
if(evt.which === 1) {
|
||||
isDragging = true;
|
||||
desiredWidth = previewPanel.width;
|
||||
desiredHeight = previewPanel.height;
|
||||
lastCoord = {
|
||||
x: evt.pageX,
|
||||
y: evt.pageY,
|
||||
|
@ -958,17 +958,15 @@ a {
|
||||
* Layout
|
||||
*********************************/
|
||||
|
||||
.layout-outer-wrapper {
|
||||
.layout-wrapper-l1,
|
||||
.layout-wrapper-l2,
|
||||
.layout-wrapper-l3 {
|
||||
.layout-panel();
|
||||
overflow: hidden;
|
||||
&.layout-animate {
|
||||
.transition(350ms ease-in-out all);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-inner-wrapper {
|
||||
.layout-panel();
|
||||
overflow: hidden;
|
||||
.layout-animate {
|
||||
.transition(350ms ease-in-out all);
|
||||
}
|
||||
|
||||
.layout-resizer {
|
||||
@ -977,6 +975,9 @@ a {
|
||||
height: @resizer-size;
|
||||
&.open {
|
||||
cursor: e-resize;
|
||||
.layout-vertical & {
|
||||
cursor: s-resize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -985,21 +986,30 @@ a {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: @resizer-size;
|
||||
height: 60px;
|
||||
height: @resizer-size;
|
||||
i {
|
||||
font-size: 22px;
|
||||
}
|
||||
&.layout-toggler-preview {
|
||||
line-height: 55px;
|
||||
.layout-animate & {
|
||||
.transition(350ms ease-in-out all);
|
||||
}
|
||||
line-height: 55px;
|
||||
i:before {
|
||||
content: '\e87d';
|
||||
}
|
||||
&.open > i:before {
|
||||
content: '\e87e';
|
||||
}
|
||||
.layout-vertical & {
|
||||
line-height: 1.45;
|
||||
i:before {
|
||||
content: '\e87f';
|
||||
}
|
||||
&.open > i:before {
|
||||
content: '\e880';
|
||||
}
|
||||
}
|
||||
}
|
||||
&.layout-toggler-navbar {
|
||||
line-height: 0;
|
||||
@ -1338,7 +1348,7 @@ a {
|
||||
.preview-panel {
|
||||
.layout-panel();
|
||||
overflow: hidden;
|
||||
border-left: 1px solid fade(@secondary, 6%);
|
||||
.box-shadow(inset 1px 0 fade(@secondary, 6%));
|
||||
background-color: @secondary-bg-light;
|
||||
z-index: 10;
|
||||
.layout-animate & {
|
||||
|
Loading…
Reference in New Issue
Block a user