From 45543f6fd82c99ee3c50b6d72b37c78826388c37 Mon Sep 17 00:00:00 2001 From: benweet Date: Fri, 18 Apr 2014 00:41:35 +0100 Subject: [PATCH] Dynamic navbar layout --- public/res/core.js | 34 +---- public/res/extensions/scrollSync.js | 2 +- public/res/extensions/shortcuts.js | 7 + .../res/extensions/shortcutsDefaultMapping.js | 10 +- public/res/html/bodyIndex.html | 22 +-- ...lock.html => scrollSyncSettingsBlock.html} | 0 public/res/html/settingsShortcutEntry.html | 13 -- .../settingsShortcutsExtensionTooltip.html | 16 ++ public/res/layout.js | 47 +++++- public/res/settings.js | 3 +- public/res/shortcutMgr.js | 139 ------------------ public/res/storage.js | 5 + public/res/styles/base.less | 1 + public/res/styles/main.less | 3 +- 14 files changed, 92 insertions(+), 210 deletions(-) rename public/res/html/{scrollLinkSettingsBlock.html => scrollSyncSettingsBlock.html} (100%) delete mode 100644 public/res/html/settingsShortcutEntry.html create mode 100644 public/res/html/settingsShortcutsExtensionTooltip.html delete mode 100644 public/res/shortcutMgr.js diff --git a/public/res/core.js b/public/res/core.js index 16e87e74..0d0d7c28 100644 --- a/public/res/core.js +++ b/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!

', 'NOTE: Backlinks in Stack Exchange Q/A are not welcome.' ].join('')); + createTooltip(".tooltip-shortcuts-extension", settingsShortcutsExtensionTooltipHTML); createTooltip(".tooltip-usercustom-extension", settingsUserCustomExtensionTooltipHTML); createTooltip(".tooltip-template", settingsTemplateTooltipHTML); diff --git a/public/res/extensions/scrollSync.js b/public/res/extensions/scrollSync.js index 0b8ba669..f949c2cc 100644 --- a/public/res/extensions/scrollSync.js +++ b/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 ) { diff --git a/public/res/extensions/shortcuts.js b/public/res/extensions/shortcuts.js index 5087d53e..c56f3140 100644 --- a/public/res/extensions/shortcuts.js +++ b/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 */ diff --git a/public/res/extensions/shortcutsDefaultMapping.js b/public/res/extensions/shortcutsDefaultMapping.js index 86764098..1c20c4f4 100644 --- a/public/res/extensions/shortcutsDefaultMapping.js +++ b/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() { - require('editor').replacePreviousText('==> ', '⇒ '); - }, 0); + expand('==> ', '⇒ '); }, '< = = space': function() { - setTimeout(function() { - require('editor').replacePreviousText('<== ', '⇐ '); - }, 0); + expand('<== ', '⇐ '); }, 'S t a c k E d i t': function() { eventMgr.onMessage("You are stunned!!! Aren't you?"); diff --git a/public/res/html/bodyIndex.html b/public/res/html/bodyIndex.html index 4ac00a0a..78f2ef89 100644 --- a/public/res/html/bodyIndex.html +++ b/public/res/html/bodyIndex.html @@ -907,8 +907,6 @@ href="#tabpane-settings-basic" data-toggle="tab">Basic
  • Advanced
    • -
  • Shortcuts
  • Extensions
  • - +
    -
    -
    -
    @@ -1151,10 +1143,6 @@
    -
    -
    -
    -
    diff --git a/public/res/html/settingsShortcutsExtensionTooltip.html b/public/res/html/settingsShortcutsExtensionTooltip.html new file mode 100644 index 00000000..1b02ce6c --- /dev/null +++ b/public/res/html/settingsShortcutsExtensionTooltip.html @@ -0,0 +1,16 @@ +You can create expanding macros like this: +
    +
    +'- - > space': function() { +
    + expand('--> ', '→ '); +
    +} +
    +
    +    More + info +
    +
    + Careful! This is subject to malicious code. Don't copy/paste untrusted content. diff --git a/public/res/layout.js b/public/res/layout.js index d416e9df..3fb1a965 100644 --- a/public/res/layout.js +++ 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.toggle(false); - }); + menuPanel.$elt.on('click', 'a[data-toggle!=collapse]', _.bind(menuPanel.toggle, menuPanel, 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 diff --git a/public/res/settings.js b/public/res/settings.js index 8f8625cc..d763d60e 100644 --- a/public/res/settings.js +++ b/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: {} }; diff --git a/public/res/shortcutMgr.js b/public/res/shortcutMgr.js deleted file mode 100644 index 12b7b560..00000000 --- a/public/res/shortcutMgr.js +++ /dev/null @@ -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; -}); diff --git a/public/res/storage.js b/public/res/storage.js index 4dc49659..92447737 100644 --- a/public/res/storage.js +++ b/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"; } diff --git a/public/res/styles/base.less b/public/res/styles/base.less index 78bc2634..1c29d6f5 100644 --- a/public/res/styles/base.less +++ b/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; } diff --git a/public/res/styles/main.less b/public/res/styles/main.less index cd6a39d5..14309475 100644 --- a/public/res/styles/main.less +++ b/public/res/styles/main.less @@ -1128,8 +1128,7 @@ a { padding-bottom: 230px; } > .editor-margin { - position: absolute; - top: 0; + .layout-panel(); .discussion { font-size: 17px; &.new {