caojiezi2003/Stackedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed layout overflow

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -9,7 +9,7 @@
<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="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="msvalidate.01" content="5E47EE6F67B069C17E3CDD418351A612"
/>

3
public/res/core.js
View File

@ -11,14 +11,13 @@ define([
"settings",
"eventMgr",
"shortcutMgr",
"mousetrap",
"text!html/bodyIndex.html",
"text!html/bodyViewer.html",
"text!html/settingsTemplateTooltip.html",
"text!html/settingsUserCustomExtensionTooltip.html",
"storage",
'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 = {};

84
public/res/layout.js
View File

@ -25,6 +25,10 @@ define([
var documentPanelWidth = 320;
var windowSize;
var wrapperL1, wrapperL2, wrapperL3;
var navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer;
var animate = false;
function DomObject(selector) {
this.selector = selector;
this.elt = document.querySelector(selector);
@ -33,12 +37,6 @@ define([
var laterCssTimeoutId;
var laterCssQueue = [];
var wrapperL1, wrapperL2, wrapperL3;
var navbar, menuPanel, documentPanel, editor, previewPanel, previewContainer, navbarToggler, previewToggler, previewResizer;
var animate = false;
function applyCssLater() {
if(laterCssQueue.length === 0) {
wrapperL1.$elt.removeClass('layout-animate');
@ -90,7 +88,7 @@ define([
laterCssTimeoutId = setTimeout(applyCssLater, 350);
};
DomObject.prototype.createToggler = function(backdrop) {
DomObject.prototype.createToggler = function(backdrop, onToggle) {
var backdropElt;
this.toggle = function(show) {
if(show === this.isOpen) {
@ -105,6 +103,7 @@ define([
}, this));
this.$elt.addClass('bring-to-front');
}
onToggle && onToggle(this.isOpen);
}
else {
backdropElt && backdropElt.removeBackdrop();
@ -112,6 +111,7 @@ define([
laterCssQueue.push(_.bind(function() {
!this.isOpen && this.$elt.find('.in').collapse('hide');
this.$elt.toggleClass('panel-open', this.isOpen).toggleClass('bring-to-front', (!!backdrop && this.isOpen));
onToggle && onToggle(this.isOpen);
}, this));
}
animate = true;
@ -134,15 +134,25 @@ define([
}
var editorContentElt;
var previewContentElt;
var editorMarginElt;
function onResize() {
var padding = (editor.elt.offsetWidth - getMaxWidth()) / 2;
if(padding < constants.EDITOR_DEFAULT_PADDING) {
padding = constants.EDITOR_DEFAULT_PADDING;
var editorPadding = (editor.elt.offsetWidth - getMaxWidth()) / 2;
if(editorPadding < constants.EDITOR_DEFAULT_PADDING) {
editorPadding = constants.EDITOR_DEFAULT_PADDING;
}
editorContentElt.style.paddingLeft = padding + 'px';
editorContentElt.style.paddingRight = padding + 'px';
editorMarginElt.style.width = padding + 'px',
editorContentElt.style.paddingLeft = editorPadding + 'px';
editorContentElt.style.paddingRight = editorPadding + '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();
}
@ -171,7 +181,7 @@ define([
wrapperL3.height = wrapperL1.height - navbarHeight;
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;
return resizeAll();
}
@ -183,7 +193,6 @@ define([
previewPanel.height = (wrapperL3.height + resizerSize) / 2;
}
if(previewPanel.height < previewMinSize.height) {
previewPanel.halfSize = false;
previewPanel.height = previewMinSize.height;
}
previewPanel.y = wrapperL3.height - previewPanel.height;
@ -191,13 +200,11 @@ define([
var previewPanelHeight = wrapperL3.height - editorMinSize.height;
if(previewPanelHeight < previewMinSize.height) {
previewPanel.isOpen = false;
}
else {
previewPanel.halfSize = false;
previewPanel.height = previewPanelHeight;
}
return resizeAll();
}
previewPanel.height = previewPanelHeight;
previewPanel.y = wrapperL3.height - previewPanel.height;
}
}
previewPanel.width = wrapperL3.width;
editor.height = previewPanel.y;
@ -211,7 +218,7 @@ define([
previewResizer.width = previewContainer.width;
}
else {
if(navbar.isOpen && wrapperL3.height < editorMinSize.height) {
if(navbar.isOpen && wrapperL3.height < editorMinSize.height + resizerSize) {
navbar.isOpen = false;
return resizeAll();
}
@ -223,7 +230,6 @@ define([
previewPanel.width = (wrapperL3.width + resizerSize) / 2;
}
if(previewPanel.width < previewMinSize.width) {
previewPanel.halfSize = false;
previewPanel.width = previewMinSize.width;
}
previewPanel.x = wrapperL3.width - previewPanel.width;
@ -231,13 +237,11 @@ define([
var previewPanelWidth = wrapperL3.width - editorMinSize.width;
if(previewPanelWidth < previewMinSize.width) {
previewPanel.isOpen = false;
}
else {
previewPanel.halfSize = false;
previewPanel.width = previewPanelWidth;
}
return resizeAll();
}
previewPanel.width = previewPanelWidth;
previewPanel.x = wrapperL3.width - previewPanel.width;
}
}
previewPanel.height = wrapperL3.height;
editor.width = previewPanel.x;
@ -265,9 +269,6 @@ define([
previewResizer.applyCss();
navbarToggler.applyCss();
onResize();
}
layout.resizeAll = resizeAll;
@ -287,7 +288,9 @@ define([
previewResizer = new DomObject('.layout-resizer-preview');
editorContentElt = editor.elt.querySelector('.editor-content');
previewContentElt = document.getElementById('preview-contents');
editorMarginElt = editor.elt.querySelector('.editor-margin');
var $previewButtonsElt = $('.extension-preview-buttons');
wrapperL1.$elt.toggleClass('layout-vertical', isVertical);
@ -296,7 +299,9 @@ define([
navbarToggler.$elt.click(_.bind(navbar.toggle, navbar));
previewPanel.isOpen = true;
previewPanel.createToggler();
previewPanel.createToggler(false, function(isOpen) {
$previewButtonsElt.toggleClass('hide', !isOpen);
});
previewPanel.halfSize = true;
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)");
};
$(window).resize(resizeAll);
$(document.body).on('touchmove', function(evt) {
evt.preventDefault();
});
var styleContent = '';
@ -409,19 +410,6 @@ define([
applyFont(17, 600);
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
var style = crel('style', {
type : 'text/css'

15
public/res/styles/main.less
View File

@ -137,11 +137,17 @@
@state-danger-border: fade(spin(@logo-orange, -4), 20%);
body {
tab-size: 4;
html, body {
overflow: hidden;
}
body {
.layout-panel();
bottom: 0;
right: 0;
tab-size: 4;
}
* {
outline: none !important;
}
@ -789,8 +795,8 @@ a {
.extension-preview-buttons {
position: absolute;
z-index: 1;
margin-top: 6px;
right: 35px;
margin-top: 6px;
.ui-layout-resizer-south-closed & {
display: none !important;
}
@ -1357,8 +1363,7 @@ a {
}
#preview-contents {
padding: 35px;
margin: 0 auto 200px;
margin: 0 0 200px;
text-align: justify;
}

2
public/viewer.html
View File

@ -8,7 +8,7 @@
<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="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"
/>
<script>