Fixed layout overflow

2014-04-15 00:32:10 +01:00 · 2014-04-15 00:32:10 +01:00 · a608c2e0fe
commit a608c2e0fe
parent b5475d1669
5 changed files with 49 additions and 57 deletions
--- a/public/index.html
+++ b/public/index.html
@ -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"
        />
--- 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 = {};

--- 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'
--- 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;
 }

--- a/public/viewer.html
+++ b/public/viewer.html
@ -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>