Fixed layout overflow
This commit is contained in:
parent
b5475d1669
commit
a608c2e0fe
@ -9,7 +9,7 @@
|
|||||||
<link rel="shortcut icon" sizes="196x196" href="res-min/img/nice-highres.png">
|
<link rel="shortcut icon" sizes="196x196" href="res-min/img/nice-highres.png">
|
||||||
<meta name="description" content="Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.">
|
<meta name="description" content="Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.">
|
||||||
<meta name="author" content="Benoit Schweblin">
|
<meta name="author" content="Benoit Schweblin">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612"
|
<meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612"
|
||||||
/>
|
/>
|
||||||
|
@ -11,14 +11,13 @@ define([
|
|||||||
"settings",
|
"settings",
|
||||||
"eventMgr",
|
"eventMgr",
|
||||||
"shortcutMgr",
|
"shortcutMgr",
|
||||||
"mousetrap",
|
|
||||||
"text!html/bodyIndex.html",
|
"text!html/bodyIndex.html",
|
||||||
"text!html/bodyViewer.html",
|
"text!html/bodyViewer.html",
|
||||||
"text!html/settingsTemplateTooltip.html",
|
"text!html/settingsTemplateTooltip.html",
|
||||||
"text!html/settingsUserCustomExtensionTooltip.html",
|
"text!html/settingsUserCustomExtensionTooltip.html",
|
||||||
"storage",
|
"storage",
|
||||||
'pagedown',
|
'pagedown',
|
||||||
], function($, _, crel, editor, layout, constants, utils, storage, settings, eventMgr, shortcutMgr, mousetrap, bodyIndexHTML, bodyViewerHTML, settingsTemplateTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
|
], function($, _, crel, editor, layout, constants, utils, storage, settings, eventMgr, shortcutMgr, bodyIndexHTML, bodyViewerHTML, settingsTemplateTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
|
||||||
|
|
||||||
var core = {};
|
var core = {};
|
||||||
|
|
||||||
|
@ -25,6 +25,10 @@ define([
|
|||||||
var documentPanelWidth = 320;
|
var documentPanelWidth = 320;
|
||||||
var windowSize;
|
var windowSize;
|
||||||
|
|
||||||
|
var wrapperL1, wrapperL2, wrapperL3;
|
||||||
|
var navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer;
|
||||||
|
var animate = false;
|
||||||
|
|
||||||
function DomObject(selector) {
|
function DomObject(selector) {
|
||||||
this.selector = selector;
|
this.selector = selector;
|
||||||
this.elt = document.querySelector(selector);
|
this.elt = document.querySelector(selector);
|
||||||
@ -33,12 +37,6 @@ define([
|
|||||||
|
|
||||||
var laterCssTimeoutId;
|
var laterCssTimeoutId;
|
||||||
var laterCssQueue = [];
|
var laterCssQueue = [];
|
||||||
|
|
||||||
var wrapperL1, wrapperL2, wrapperL3;
|
|
||||||
var navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer;
|
|
||||||
|
|
||||||
var animate = false;
|
|
||||||
|
|
||||||
function applyCssLater() {
|
function applyCssLater() {
|
||||||
if(laterCssQueue.length === 0) {
|
if(laterCssQueue.length === 0) {
|
||||||
wrapperL1.$elt.removeClass('layout-animate');
|
wrapperL1.$elt.removeClass('layout-animate');
|
||||||
@ -90,7 +88,7 @@ define([
|
|||||||
laterCssTimeoutId = setTimeout(applyCssLater, 350);
|
laterCssTimeoutId = setTimeout(applyCssLater, 350);
|
||||||
};
|
};
|
||||||
|
|
||||||
DomObject.prototype.createToggler = function(backdrop) {
|
DomObject.prototype.createToggler = function(backdrop, onToggle) {
|
||||||
var backdropElt;
|
var backdropElt;
|
||||||
this.toggle = function(show) {
|
this.toggle = function(show) {
|
||||||
if(show === this.isOpen) {
|
if(show === this.isOpen) {
|
||||||
@ -105,6 +103,7 @@ define([
|
|||||||
}, this));
|
}, this));
|
||||||
this.$elt.addClass('bring-to-front');
|
this.$elt.addClass('bring-to-front');
|
||||||
}
|
}
|
||||||
|
onToggle && onToggle(this.isOpen);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
backdropElt && backdropElt.removeBackdrop();
|
backdropElt && backdropElt.removeBackdrop();
|
||||||
@ -112,6 +111,7 @@ define([
|
|||||||
laterCssQueue.push(_.bind(function() {
|
laterCssQueue.push(_.bind(function() {
|
||||||
!this.isOpen && this.$elt.find('.in').collapse('hide');
|
!this.isOpen && this.$elt.find('.in').collapse('hide');
|
||||||
this.$elt.toggleClass('panel-open', this.isOpen).toggleClass('bring-to-front', (!!backdrop && this.isOpen));
|
this.$elt.toggleClass('panel-open', this.isOpen).toggleClass('bring-to-front', (!!backdrop && this.isOpen));
|
||||||
|
onToggle && onToggle(this.isOpen);
|
||||||
}, this));
|
}, this));
|
||||||
}
|
}
|
||||||
animate = true;
|
animate = true;
|
||||||
@ -134,15 +134,25 @@ define([
|
|||||||
}
|
}
|
||||||
|
|
||||||
var editorContentElt;
|
var editorContentElt;
|
||||||
|
var previewContentElt;
|
||||||
var editorMarginElt;
|
var editorMarginElt;
|
||||||
function onResize() {
|
function onResize() {
|
||||||
var padding = (editor.elt.offsetWidth - getMaxWidth()) / 2;
|
|
||||||
if(padding < constants.EDITOR_DEFAULT_PADDING) {
|
var editorPadding = (editor.elt.offsetWidth - getMaxWidth()) / 2;
|
||||||
padding = constants.EDITOR_DEFAULT_PADDING;
|
if(editorPadding < constants.EDITOR_DEFAULT_PADDING) {
|
||||||
|
editorPadding = constants.EDITOR_DEFAULT_PADDING;
|
||||||
}
|
}
|
||||||
editorContentElt.style.paddingLeft = padding + 'px';
|
editorContentElt.style.paddingLeft = editorPadding + 'px';
|
||||||
editorContentElt.style.paddingRight = padding + 'px';
|
editorContentElt.style.paddingRight = editorPadding + 'px';
|
||||||
editorMarginElt.style.width = padding + 'px',
|
editorMarginElt.style.width = editorPadding + 'px';
|
||||||
|
|
||||||
|
var previewPadding = (previewContainer.elt.offsetWidth - getMaxWidth()) / 2;
|
||||||
|
if(previewPadding < constants.EDITOR_DEFAULT_PADDING) {
|
||||||
|
previewPadding = constants.EDITOR_DEFAULT_PADDING;
|
||||||
|
}
|
||||||
|
previewContentElt.style.paddingLeft = previewPadding + 'px';
|
||||||
|
previewContentElt.style.paddingRight = previewPadding + 'px';
|
||||||
|
|
||||||
|
|
||||||
eventMgr.onLayoutResize();
|
eventMgr.onLayoutResize();
|
||||||
}
|
}
|
||||||
@ -171,7 +181,7 @@ define([
|
|||||||
wrapperL3.height = wrapperL1.height - navbarHeight;
|
wrapperL3.height = wrapperL1.height - navbarHeight;
|
||||||
|
|
||||||
if(isVertical) {
|
if(isVertical) {
|
||||||
if(navbar.isOpen && wrapperL3.height < editorMinSize.height + (previewPanel.isOpen ? previewMinSize.height : 0)) {
|
if(navbar.isOpen && wrapperL3.height < editorMinSize.height + resizerSize) {
|
||||||
navbar.isOpen = false;
|
navbar.isOpen = false;
|
||||||
return resizeAll();
|
return resizeAll();
|
||||||
}
|
}
|
||||||
@ -183,7 +193,6 @@ define([
|
|||||||
previewPanel.height = (wrapperL3.height + resizerSize) / 2;
|
previewPanel.height = (wrapperL3.height + resizerSize) / 2;
|
||||||
}
|
}
|
||||||
if(previewPanel.height < previewMinSize.height) {
|
if(previewPanel.height < previewMinSize.height) {
|
||||||
previewPanel.halfSize = false;
|
|
||||||
previewPanel.height = previewMinSize.height;
|
previewPanel.height = previewMinSize.height;
|
||||||
}
|
}
|
||||||
previewPanel.y = wrapperL3.height - previewPanel.height;
|
previewPanel.y = wrapperL3.height - previewPanel.height;
|
||||||
@ -191,12 +200,10 @@ define([
|
|||||||
var previewPanelHeight = wrapperL3.height - editorMinSize.height;
|
var previewPanelHeight = wrapperL3.height - editorMinSize.height;
|
||||||
if(previewPanelHeight < previewMinSize.height) {
|
if(previewPanelHeight < previewMinSize.height) {
|
||||||
previewPanel.isOpen = false;
|
previewPanel.isOpen = false;
|
||||||
|
return resizeAll();
|
||||||
}
|
}
|
||||||
else {
|
previewPanel.height = previewPanelHeight;
|
||||||
previewPanel.halfSize = false;
|
previewPanel.y = wrapperL3.height - previewPanel.height;
|
||||||
previewPanel.height = previewPanelHeight;
|
|
||||||
}
|
|
||||||
return resizeAll();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
previewPanel.width = wrapperL3.width;
|
previewPanel.width = wrapperL3.width;
|
||||||
@ -211,7 +218,7 @@ define([
|
|||||||
previewResizer.width = previewContainer.width;
|
previewResizer.width = previewContainer.width;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
if(navbar.isOpen && wrapperL3.height < editorMinSize.height) {
|
if(navbar.isOpen && wrapperL3.height < editorMinSize.height + resizerSize) {
|
||||||
navbar.isOpen = false;
|
navbar.isOpen = false;
|
||||||
return resizeAll();
|
return resizeAll();
|
||||||
}
|
}
|
||||||
@ -223,7 +230,6 @@ define([
|
|||||||
previewPanel.width = (wrapperL3.width + resizerSize) / 2;
|
previewPanel.width = (wrapperL3.width + resizerSize) / 2;
|
||||||
}
|
}
|
||||||
if(previewPanel.width < previewMinSize.width) {
|
if(previewPanel.width < previewMinSize.width) {
|
||||||
previewPanel.halfSize = false;
|
|
||||||
previewPanel.width = previewMinSize.width;
|
previewPanel.width = previewMinSize.width;
|
||||||
}
|
}
|
||||||
previewPanel.x = wrapperL3.width - previewPanel.width;
|
previewPanel.x = wrapperL3.width - previewPanel.width;
|
||||||
@ -231,12 +237,10 @@ define([
|
|||||||
var previewPanelWidth = wrapperL3.width - editorMinSize.width;
|
var previewPanelWidth = wrapperL3.width - editorMinSize.width;
|
||||||
if(previewPanelWidth < previewMinSize.width) {
|
if(previewPanelWidth < previewMinSize.width) {
|
||||||
previewPanel.isOpen = false;
|
previewPanel.isOpen = false;
|
||||||
|
return resizeAll();
|
||||||
}
|
}
|
||||||
else {
|
previewPanel.width = previewPanelWidth;
|
||||||
previewPanel.halfSize = false;
|
previewPanel.x = wrapperL3.width - previewPanel.width;
|
||||||
previewPanel.width = previewPanelWidth;
|
|
||||||
}
|
|
||||||
return resizeAll();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
previewPanel.height = wrapperL3.height;
|
previewPanel.height = wrapperL3.height;
|
||||||
@ -265,9 +269,6 @@ define([
|
|||||||
previewResizer.applyCss();
|
previewResizer.applyCss();
|
||||||
navbarToggler.applyCss();
|
navbarToggler.applyCss();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
onResize();
|
onResize();
|
||||||
}
|
}
|
||||||
layout.resizeAll = resizeAll;
|
layout.resizeAll = resizeAll;
|
||||||
@ -287,7 +288,9 @@ define([
|
|||||||
previewResizer = new DomObject('.layout-resizer-preview');
|
previewResizer = new DomObject('.layout-resizer-preview');
|
||||||
|
|
||||||
editorContentElt = editor.elt.querySelector('.editor-content');
|
editorContentElt = editor.elt.querySelector('.editor-content');
|
||||||
|
previewContentElt = document.getElementById('preview-contents');
|
||||||
editorMarginElt = editor.elt.querySelector('.editor-margin');
|
editorMarginElt = editor.elt.querySelector('.editor-margin');
|
||||||
|
var $previewButtonsElt = $('.extension-preview-buttons');
|
||||||
|
|
||||||
wrapperL1.$elt.toggleClass('layout-vertical', isVertical);
|
wrapperL1.$elt.toggleClass('layout-vertical', isVertical);
|
||||||
|
|
||||||
@ -296,7 +299,9 @@ define([
|
|||||||
navbarToggler.$elt.click(_.bind(navbar.toggle, navbar));
|
navbarToggler.$elt.click(_.bind(navbar.toggle, navbar));
|
||||||
|
|
||||||
previewPanel.isOpen = true;
|
previewPanel.isOpen = true;
|
||||||
previewPanel.createToggler();
|
previewPanel.createToggler(false, function(isOpen) {
|
||||||
|
$previewButtonsElt.toggleClass('hide', !isOpen);
|
||||||
|
});
|
||||||
previewPanel.halfSize = true;
|
previewPanel.halfSize = true;
|
||||||
previewToggler.$elt.click(_.bind(previewPanel.toggle, previewPanel));
|
previewToggler.$elt.click(_.bind(previewPanel.toggle, previewPanel));
|
||||||
|
|
||||||
@ -379,11 +384,7 @@ define([
|
|||||||
return menuPanel.isOpen || documentPanel.isOpen || isModalShown || $(element).is("input, select, textarea:not(.ace_text-input)");
|
return menuPanel.isOpen || documentPanel.isOpen || isModalShown || $(element).is("input, select, textarea:not(.ace_text-input)");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
$(window).resize(resizeAll);
|
$(window).resize(resizeAll);
|
||||||
$(document.body).on('touchmove', function(evt) {
|
|
||||||
evt.preventDefault();
|
|
||||||
});
|
|
||||||
|
|
||||||
var styleContent = '';
|
var styleContent = '';
|
||||||
|
|
||||||
@ -409,19 +410,6 @@ define([
|
|||||||
applyFont(17, 600);
|
applyFont(17, 600);
|
||||||
applyFont(18, 1200);
|
applyFont(18, 1200);
|
||||||
|
|
||||||
function applyMaxWidth(maxWidth, screenWidth) {
|
|
||||||
styleContent += [
|
|
||||||
'@media (min-width: ' + screenWidth + 'px) {',
|
|
||||||
'#preview-contents {',
|
|
||||||
' max-width: ' + (maxWidth + 30) + 'px;',
|
|
||||||
'}',
|
|
||||||
'}',
|
|
||||||
].join('\n');
|
|
||||||
}
|
|
||||||
_.each(maxWidthMap, function(entry) {
|
|
||||||
applyMaxWidth(entry.maxWidth, entry.screenWidth);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Apply dynamic stylesheet
|
// Apply dynamic stylesheet
|
||||||
var style = crel('style', {
|
var style = crel('style', {
|
||||||
type : 'text/css'
|
type : 'text/css'
|
||||||
|
@ -137,11 +137,17 @@
|
|||||||
@state-danger-border: fade(spin(@logo-orange, -4), 20%);
|
@state-danger-border: fade(spin(@logo-orange, -4), 20%);
|
||||||
|
|
||||||
|
|
||||||
body {
|
html, body {
|
||||||
tab-size: 4;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
.layout-panel();
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
tab-size: 4;
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
}
|
}
|
||||||
@ -789,8 +795,8 @@ a {
|
|||||||
.extension-preview-buttons {
|
.extension-preview-buttons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
right: 35px;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
right: 35px;
|
|
||||||
.ui-layout-resizer-south-closed & {
|
.ui-layout-resizer-south-closed & {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
@ -1357,8 +1363,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#preview-contents {
|
#preview-contents {
|
||||||
padding: 35px;
|
margin: 0 0 200px;
|
||||||
margin: 0 auto 200px;
|
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
<link rel="shortcut icon" href="res-min/img/stackedit-32.ico" type="image/x-icon">
|
<link rel="shortcut icon" href="res-min/img/stackedit-32.ico" type="image/x-icon">
|
||||||
<meta name="description" content="Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.">
|
<meta name="description" content="Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.">
|
||||||
<meta name="author" content="Benoit Schweblin">
|
<meta name="author" content="Benoit Schweblin">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||||
<meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612"
|
<meta name="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612"
|
||||||
/>
|
/>
|
||||||
<script>
|
<script>
|
||||||
|
Loading…
Reference in New Issue
Block a user