Fixed layout overflow

This commit is contained in:
benweet 2014-04-15 00:32:10 +01:00
parent b5475d1669
commit a608c2e0fe
5 changed files with 49 additions and 57 deletions

View File

@ -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"
/> />

View File

@ -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 = {};

View File

@ -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,13 +200,11 @@ 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;
}
else {
previewPanel.halfSize = false;
previewPanel.height = previewPanelHeight;
}
return resizeAll(); return resizeAll();
} }
previewPanel.height = previewPanelHeight;
previewPanel.y = wrapperL3.height - previewPanel.height;
}
} }
previewPanel.width = wrapperL3.width; previewPanel.width = wrapperL3.width;
editor.height = previewPanel.y; editor.height = previewPanel.y;
@ -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,13 +237,11 @@ 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;
}
else {
previewPanel.halfSize = false;
previewPanel.width = previewPanelWidth;
}
return resizeAll(); return resizeAll();
} }
previewPanel.width = previewPanelWidth;
previewPanel.x = wrapperL3.width - previewPanel.width;
}
} }
previewPanel.height = wrapperL3.height; previewPanel.height = wrapperL3.height;
editor.width = previewPanel.x; editor.width = previewPanel.x;
@ -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'

View File

@ -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;
margin-top: 6px;
right: 35px; right: 35px;
margin-top: 6px;
.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;
} }

View File

@ -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>