From a608c2e0fe98a18fa698f9ab55171feb80b3383e Mon Sep 17 00:00:00 2001 From: benweet Date: Tue, 15 Apr 2014 00:32:10 +0100 Subject: [PATCH] Fixed layout overflow --- public/index.html | 2 +- public/res/core.js | 3 +- public/res/layout.js | 84 ++++++++++++++++--------------------- public/res/styles/main.less | 15 ++++--- public/viewer.html | 2 +- 5 files changed, 49 insertions(+), 57 deletions(-) diff --git a/public/index.html b/public/index.html index 58ba2e3f..0af97050 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@ - + diff --git a/public/res/core.js b/public/res/core.js index 34aa0325..80868c67 100644 --- a/public/res/core.js +++ b/public/res/core.js @@ -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 = {}; diff --git a/public/res/layout.js b/public/res/layout.js index 1e902124..0a37951f 100644 --- a/public/res/layout.js +++ b/public/res/layout.js @@ -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,12 +200,10 @@ define([ var previewPanelHeight = wrapperL3.height - editorMinSize.height; if(previewPanelHeight < previewMinSize.height) { previewPanel.isOpen = false; + return resizeAll(); } - else { - previewPanel.halfSize = false; - previewPanel.height = previewPanelHeight; - } - return resizeAll(); + previewPanel.height = previewPanelHeight; + previewPanel.y = wrapperL3.height - previewPanel.height; } } previewPanel.width = wrapperL3.width; @@ -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,12 +237,10 @@ define([ var previewPanelWidth = wrapperL3.width - editorMinSize.width; if(previewPanelWidth < previewMinSize.width) { previewPanel.isOpen = false; + return resizeAll(); } - else { - previewPanel.halfSize = false; - previewPanel.width = previewPanelWidth; - } - return resizeAll(); + previewPanel.width = previewPanelWidth; + previewPanel.x = wrapperL3.width - previewPanel.width; } } previewPanel.height = wrapperL3.height; @@ -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' diff --git a/public/res/styles/main.less b/public/res/styles/main.less index 9fdcc116..ece17309 100644 --- a/public/res/styles/main.less +++ b/public/res/styles/main.less @@ -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; + right: 35px; margin-top: 6px; - right: 35px; .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; } diff --git a/public/viewer.html b/public/viewer.html index 42029e33..7f433d47 100644 --- a/public/viewer.html +++ b/public/viewer.html @@ -8,7 +8,7 @@ - +