Dynamic navbar layout

public/res/core.js

@@ -10,14 +10,14 @@ define([
     "storage",
     "settings",
     "eventMgr",
-    "shortcutMgr",
     "text!html/bodyIndex.html",
     "text!html/bodyViewer.html",
     "text!html/settingsTemplateTooltip.html",
+    "text!html/settingsShortcutsExtensionTooltip.html",
     "text!html/settingsUserCustomExtensionTooltip.html",
     "storage",
     'pagedown',
-], function($, _, crel, editor, layout, constants, utils, storage, settings, eventMgr, shortcutMgr, bodyIndexHTML, bodyViewerHTML, settingsTemplateTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
+], function($, _, crel, editor, layout, constants, utils, storage, settings, eventMgr, bodyIndexHTML, bodyViewerHTML, settingsTemplateTooltipHTML, settingsShortcutsExtensionTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
 
     var core = {};
 
@@ -122,7 +122,7 @@ define([
         // Default content
         utils.setInputValue("#textarea-settings-default-content", settings.defaultContent);
         // Edit mode
-        utils.setInputRadio("radio-settings-mode", settings.editMode);
+        utils.setInputRadio("radio-settings-edit-mode", settings.editMode);
         // Commit message
         utils.setInputValue("#input-settings-publish-commit-msg", settings.commitMsg);
         // Gdrive multi-accounts
@@ -142,9 +142,6 @@ define([
         // SSH proxy
         utils.setInputValue("#input-settings-ssh-proxy", settings.sshProxy);
 
-        // Load shortcuts settings
-        shortcutMgr.loadSettings();
-
         // Load extension settings
         eventMgr.onLoadSettings();
     }
@@ -170,7 +167,7 @@ define([
         // Default content
         newSettings.defaultContent = utils.getInputValue("#textarea-settings-default-content");
         // Edit mode
-        newSettings.editMode = utils.getInputRadio("radio-settings-mode");
+        newSettings.editMode = utils.getInputRadio("radio-settings-edit-mode");
         // Commit message
         newSettings.commitMsg = utils.getInputTextValue("#input-settings-publish-commit-msg", event);
         // Gdrive multi-accounts
@@ -190,9 +187,6 @@ define([
         // SSH proxy
         newSettings.sshProxy = utils.checkUrl(utils.getInputTextValue("#input-settings-ssh-proxy", event), true);
 
-        // Save shortcuts settings
-        shortcutMgr.saveSettings(newSettings);
-
         // Save extension settings
         newSettings.extensionSettings = {};
         eventMgr.onSaveSettings(newSettings.extensionSettings, event);
@@ -206,7 +200,7 @@ define([
             storage.themeV3 = theme;
         }
     }
-
+/*
     var $navbarElt;
     var $leftBtnElts;
     var $rightBtnElts;
@@ -235,7 +229,7 @@ define([
             }
         }
     }
-
+*/
     // Create the PageDown editor
     var pagedownEditor;
     var fileDesc;
@@ -316,7 +310,7 @@ define([
     // Initialize multiple things and then fire eventMgr.onReady
     core.onReady = function() {
         // Add RTL class
-        settings.editMode == 'rtl' && $(document.body).addClass('rtl');
+        document.body.className += ' ' + settings.editMode;
 
         if(window.viewerMode === true) {
             document.body.innerHTML = bodyViewerHTML;
@@ -325,19 +319,9 @@ define([
             document.body.innerHTML = bodyIndexHTML;
         }
 
-        $navbarElt = $('.navbar');
-        $leftBtnElts = $navbarElt.find('.left-buttons');
-        $rightBtnElts = $navbarElt.find('.right-buttons');
-        $btnDropdown = $navbarElt.find('.buttons-dropdown');
-        $titleContainer = $navbarElt.find('.title-container');
-        $(window).bind("resize", adjustWindow);
-
         // Initialize utils library
         utils.init();
 
-        // Populate shortcuts in settings
-        shortcutMgr.addSettingEntries();
-
         // listen to online/offline events
         $(window).on('offline', core.setOffline);
         $(window).on('online', setOnline);
@@ -362,9 +346,6 @@ define([
         }, 1000);
 
         eventMgr.onReady();
-
-        // Adjust the layout after the dom has changed
-        adjustWindow();
     };
 
     // Other initialization that are not prioritary
@@ -550,6 +531,7 @@ define([
             'Thanks for supporting StackEdit by adding a backlink in your documents!<br/><br/>',
             '<b class="text-danger">NOTE: Backlinks in Stack Exchange Q/A are not welcome.</b>'
         ].join(''));
+        createTooltip(".tooltip-shortcuts-extension", settingsShortcutsExtensionTooltipHTML);
         createTooltip(".tooltip-usercustom-extension", settingsUserCustomExtensionTooltipHTML);
         createTooltip(".tooltip-template", settingsTemplateTooltipHTML);
 

public/res/extensions/scrollSync.js

@@ -5,7 +5,7 @@ define([
     "text!html/scrollSyncSettingsBlock.html"
 ], function($, _, Extension, scrollSyncSettingsBlockHTML) {
 
-    var scrollSync = new Extension("scrollSync", "Scroll Link", true, true);
+    var scrollSync = new Extension("scrollSync", "Scroll Sync", true, true);
     scrollSync.settingsBlock = scrollSyncSettingsBlockHTML;
 
     $.easing.easeOutSine = function( p ) {

public/res/extensions/shortcuts.js

@@ -48,6 +48,13 @@ define([
         };
     }
 
+    function expand(text, replacement) {
+        utils.defer(function() {
+            require('editor').replacePreviousText(text, replacement);
+        });
+    }
+
+    /*jshint unused:true */
     shortcuts.onInit = function() {
         try {
             /*jshint evil: true */

public/res/extensions/shortcutsDefaultMapping.js

@@ -12,19 +12,15 @@
     'mod+z': bindPagedownButton('undo'),
     'mod+y': bindPagedownButton('redo'),
     'mod+shift+z': bindPagedownButton('redo'),
-    'mod+d': function(evt) {
+    'mod+p': function(evt) {
         $('.button-open-discussion').click();
         evt.preventDefault();
     },
     '= = > space': function() {
-        setTimeout(function() {
+        expand('==> ', '⇒ ');
-            require('editor').replacePreviousText('==> ', '⇒ ');
-        }, 0);
     },
     '< = = space': function() {
-        setTimeout(function() {
+        expand('<== ', '⇐ ');
-            require('editor').replacePreviousText('<== ', '⇐ ');
-        }, 0);
     },
     'S t a c k E d i t': function() {
         eventMgr.onMessage("You are stunned!!! Aren't you?");

public/res/html/bodyIndex.html

@@ -907,8 +907,6 @@
 						href="#tabpane-settings-basic" data-toggle="tab">Basic</a></li>
 					<li><a class="action-load-settings"
 						href="#tabpane-settings-advanced" data-toggle="tab">Advanced</a></li>
-					<li><a class="action-load-settings tab-settings-shortcuts"
-						href="#tabpane-settings-shortcuts" data-toggle="tab">Shortcuts</a></li>
 					<li><a class="action-load-settings"
 						href="#tabpane-settings-extensions" data-toggle="tab">Extensions</a></li>
 					<li><a class="action-load-settings"
@@ -984,24 +982,18 @@
 					<div class="tab-pane" id="tabpane-settings-advanced">
 						<div class="form-horizontal">
 							<div class="form-group">
-								<label class="col-sm-4 control-label">Mode</label>
+								<label class="col-sm-4 control-label">Edit mode</label>
 								<div class="col-sm-7">
 									<div class="radio">
 										<label> <input type="radio"
-											name="radio-settings-mode" value="_ace_">
+											name="radio-settings-edit-mode" value="ltr">
-											Normal (ACE)
+											Left-To-Right
 										</label>
 									</div>
 									<div class="radio">
 										<label> <input type="radio"
-											name="radio-settings-mode" value="_light_">
+											name="radio-settings-edit-mode" value="rtl">
-											Light (textarea)
+											Right-To-Left
-										</label>
-									</div>
-									<div class="radio">
-										<label> <input type="radio"
-											name="radio-settings-mode" value="_light_rtl_">
-											Light + Right-to-left
 										</label>
 									</div>
 								</div>
@@ -1151,10 +1143,6 @@
 							</div>
 						</div>
 					</div>
-					<div class="tab-pane" id="tabpane-settings-shortcuts">
-						<div class="form-horizontal">
-						</div>
-					</div>
 					<div class="tab-pane" id="tabpane-settings-extensions">
 						<div class="panel-group accordion-extensions"></div>
 						<span class="help-block pull-right"><a target="_blank"

public/res/html/settingsShortcutEntry.html

@@ -1,13 +0,0 @@
-<div class="form-group">
-	<label class="col-sm-4 control-label"
-		for="input-settings-shortcut-<%= shortcut.name %>"><%= shortcut.title %></label>
-	<div class="col-sm-8 form-inline">
-		<input type="text" id="input-settings-shortcut-<%= shortcut.name %>"
-			class="form-control col-sm-4">
-		<label class="col-sm-2 control-label"
-		    for="input-settings-shortcut-<%= shortcut.name %>-mac">Mac</label>
-        <input type="text"
-			id="input-settings-shortcut-<%= shortcut.name %>-mac"
-			class="form-control col-sm-4">
-	</div>
-</div>

public/res/html/settingsShortcutsExtensionTooltip.html

@@ -0,0 +1,16 @@
+You can create expanding macros like this:
+<br />
+<br />
+'- - > space': function() {
+<br />
+	expand('--> ', '→ ');
+<br />
+}
+<br />
+<br />
+<a target="_blank"
+	href="http://craig.is/killing/mice">More
+	info</a>
+<br />
+<br />
+<b class="text-danger"><i class="icon-attention"></i> Careful! This is subject to malicious code. Don't copy/paste untrusted content.</b>

public/res/layout.js

@@ -143,6 +143,17 @@ define([
     var editorContentElt;
     var previewContentElt;
     var editorMarginElt;
+    var navbarInnerElt;
+    var navbarDropdownElt;
+    var $navbarDropdownBtnElt;
+    var navbarTitleElt;
+    var navbarBtnGroups = [];
+    var navbarBtnGroupsWidth = [80, 80, 160, 160, 80, 40].map(function(width) {
+        return width + 18; // Add margin
+    });
+    var navbarMarginWidth = 18 * 2 + 25 + 25;
+    var buttonsDropdownWidth = 40;
+    var titleWidth = 18 + 350;
     function onResize() {
 
         var editorPadding = (editor.elt.offsetWidth - getMaxWidth()) / 2;
@@ -160,6 +171,20 @@ define([
         previewContentElt.style.paddingLeft = previewPadding + 'px';
         previewContentElt.style.paddingRight = previewPadding + 'px';
 
+        if(!window.viewerMode) {
+            var maxWidth = navbarMarginWidth + titleWidth + buttonsDropdownWidth;
+            navbarBtnGroups.forEach(function(group, index) {
+                maxWidth += group.width;
+                index === navbarBtnGroups.length - 1 && (maxWidth -= buttonsDropdownWidth);
+                if(windowSize.width < maxWidth) {
+                    navbarDropdownElt.appendChild(group.elt);
+                }
+                else {
+                    navbarInnerElt.insertBefore(group.elt, navbarTitleElt);
+                }
+            });
+            $navbarDropdownBtnElt.toggleClass('hide', navbarDropdownElt.children.length === 0);
+        }
 
         eventMgr.onLayoutResize();
     }
@@ -295,6 +320,23 @@ define([
         previewContentElt = document.getElementById('preview-contents');
         editorMarginElt = editor.elt.querySelector('.editor-margin');
         var $previewButtonsElt = $('.extension-preview-buttons');
+        navbarInnerElt = navbar.elt.querySelector('.navbar-inner');
+        navbarDropdownElt = navbar.elt.querySelector('.buttons-dropdown .dropdown-menu');
+        $navbarDropdownBtnElt = navbar.$elt.find('.buttons-dropdown');
+        navbarTitleElt = navbar.elt.querySelector('.title-container');
+
+        _.each(navbar.elt.querySelectorAll('.right-buttons'), function(btnGroupElt) {
+            navbarBtnGroups.push({
+                elt: btnGroupElt,
+                width: navbarBtnGroupsWidth.shift()
+            });
+        });
+        _.each(navbar.elt.querySelectorAll('.left-buttons'), function(btnGroupElt) {
+            navbarBtnGroups.push({
+                elt: btnGroupElt,
+                width: navbarBtnGroupsWidth.shift()
+            });
+        });
 
         wrapperL1.$elt.toggleClass('layout-vertical', isVertical);
 
@@ -319,9 +361,8 @@ define([
         documentPanel.$elt.find('.toggle-button').click(_.bind(documentPanel.toggle, documentPanel));
 
         // Hide menu panel when clicking 'Save as' button
-        $('.collapse-save-as a').click(function() {
+        menuPanel.$elt.on('click', 'a[data-toggle!=collapse]', _.bind(menuPanel.toggle, menuPanel, false));
-            menuPanel.toggle(false);
+        documentPanel.$elt.on('click', 'a[data-toggle!=collapse]', _.bind(documentPanel.toggle, documentPanel, false));
-        });
 
         menuPanel.$elt.on('show.bs.collapse', function() {
             // Close all open sub-menus when one submenu opens

public/res/settings.js

@@ -6,7 +6,7 @@ define([
 
     var settings = {
         layoutOrientation: "horizontal",
-        mode: 'ltr',
+        editMode: 'ltr',
         lazyRendering: true,
         editorFontClass: 'font-rich',
         editorFontFamily: 'Menlo, Consolas, "Courier New", Courier, monospace',
@@ -56,7 +56,6 @@ define([
         ].join(""),
         pdfPageSize: 'A4',
         sshProxy: constants.SSH_PROXY_URL,
-        shortcuts: {},
         extensionSettings: {}
     };
 

public/res/shortcutMgr.js

@@ -1,139 +0,0 @@
-define([
-    "underscore",
-    "eventMgr",
-    "settings",
-    "utils",
-    "text!html/settingsShortcutEntry.html",
-], function(_, eventMgr, settings, utils, settingsShortcutEntryHTML) {
-
-    var shortcutMgr = {};
-
-    var shortcuts = {
-        'bold': {
-            title: 'Strong',
-            defaultKey: {
-                win: 'Ctrl-B',
-                mac: 'Command-B|Ctrl-B',
-            },
-        },
-        'italic': {
-            title: 'Emphasis',
-            defaultKey: {
-                win: 'Ctrl-I',
-                mac: 'Command-I|Ctrl-I',
-            },
-        },
-        'link': {
-            title: 'Hyperlink',
-            defaultKey: {
-                win: 'Ctrl-L',
-                mac: 'Command-L|Ctrl-L',
-            },
-        },
-        'quote': {
-            title: 'Blockquote',
-            defaultKey: {
-                win: 'Ctrl-Q',
-                mac: 'Command-Q|Ctrl-Q',
-            },
-        },
-        'code': {
-            title: 'Code Sample',
-            defaultKey: {
-                win: 'Ctrl-K',
-                mac: 'Command-K|Ctrl-K',
-            },
-        },
-        'image': {
-            title: 'Image',
-            defaultKey: {
-                win: 'Ctrl-G',
-                mac: 'Command-G|Ctrl-G',
-            },
-        },
-        'olist': {
-            title: 'Numbered List',
-            defaultKey: {
-                win: 'Ctrl-O',
-                mac: 'Command-O|Ctrl-O',
-            },
-        },
-        'ulist': {
-            title: 'Bulleted List',
-            defaultKey: {
-                win: 'Ctrl-U',
-                mac: 'Command-U|Ctrl-U',
-            },
-        },
-        'heading': {
-            title: 'Heading',
-            defaultKey: {
-                win: 'Ctrl-H',
-                mac: 'Command-H|Ctrl-H',
-            },
-        },
-        'hr': {
-            title: 'Horizontal Rule',
-            defaultKey: {
-                win: 'Ctrl-R',
-                mac: 'Command-R|Ctrl-R',
-            },
-        },
-        'undo': {
-            title: 'Undo',
-            defaultKey: {
-                win: 'Ctrl-Z',
-                mac: 'Command-Z',
-            },
-        },
-        'redo': {
-            title: 'Redo',
-            defaultKey: {
-                win: 'Ctrl-Y|Ctrl-Shift-Z',
-                mac: 'Command-Y|Command-Shift-Z',
-            },
-        },
-    };
-
-    _.each(shortcuts, function(shortcut, key) {
-        shortcut.name = key;
-        shortcut.bindKey = settings.shortcuts[key] || shortcut.defaultKey;
-    });
-
-    shortcutMgr.getPagedownKeyStrokes = function() {
-        return _.chain(shortcuts).where({
-            isPageDown: true
-        }).map(function(shortcut) {
-            return [shortcut.name, shortcut.bindKey];
-        }).object().value();
-    };
-
-    shortcutMgr.addSettingEntries = function() {
-        var shortcutEntries = _.reduce(shortcuts, function(result, shortcut) {
-            return result + _.template(settingsShortcutEntryHTML, {
-                shortcut: shortcut
-            });
-        }, '');
-        var settingsFormElement = document.querySelector('#tabpane-settings-shortcuts .form-horizontal');
-        settingsFormElement && (settingsFormElement.innerHTML = shortcutEntries);
-    };
-
-    shortcutMgr.loadSettings = function() {
-        _.each(shortcuts, function(shortcut) {
-            utils.setInputValue("#input-settings-shortcut-" + shortcut.name, shortcut.bindKey.win);
-            utils.setInputValue("#input-settings-shortcut-" + shortcut.name + '-mac', shortcut.bindKey.mac);
-        });
-    };
-
-    shortcutMgr.saveSettings = function(newSettings) {
-        newSettings.shortcuts = {};
-        _.each(shortcuts, function(shortcut, key) {
-            var newShortcut = {};
-            newShortcut.win = utils.getInputValue("#input-settings-shortcut-" + shortcut.name);
-            newShortcut.mac = utils.getInputValue("#input-settings-shortcut-" + shortcut.name + '-mac');
-            newSettings.shortcuts[key] = newShortcut;
-        });
-    };
-
-    return shortcutMgr;
-});

public/res/storage.js

@@ -216,6 +216,11 @@ define([
     if(version == "v16" || version == "v17") {
         localStorage.removeItem('focusMode');
         localStorage.removeItem('mode');
+        if(_.has(localStorage, 'settings')) {
+            settings = JSON.parse(localStorage.settings);
+            delete settings.shortcuts;
+            localStorage.settings = JSON.stringify(settings);
+        }
         version = "v18";
     }
 

public/res/styles/base.less

@@ -381,6 +381,7 @@ body.rtl {
     .input-file-title,
     .search-bar input,
     .modal-document-manager input,
+    .comments-popover,
     .container {
         direction: rtl;
     }

public/res/styles/main.less

@@ -1128,8 +1128,7 @@ a {
         padding-bottom: 230px;
     }
     > .editor-margin {
-        position: absolute;
+        .layout-panel();
-		top: 0;
 		.discussion {
 			font-size: 17px;
 			&.new {