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

Dynamic navbar layout

Browse Source
This commit is contained in:
benweet 2014-04-18 00:41:35 +01:00
parent 9af0858186
commit 45543f6fd8
14 changed files with 92 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
public/res/core.js
View File

@ -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);

2
public/res/extensions/scrollSync.js
View File

@ -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 ) {

7
public/res/extensions/shortcuts.js
View File

@ -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 */

10
public/res/extensions/shortcutsDefaultMapping.js
View File

@ -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?");

22
public/res/html/bodyIndex.html
View File

@ -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_">
Normal (ACE)
name="radio-settings-edit-mode" value="ltr">
Left-To-Right
</label>
</div>
<div class="radio">
<label> <input type="radio"
name="radio-settings-mode" value="_light_">
Light (textarea)
</label>
</div>
<div class="radio">
<label> <input type="radio"
name="radio-settings-mode" value="_light_rtl_">
Light + Right-to-left
name="radio-settings-edit-mode" value="rtl">
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"

0
public/res/html/scrollLinkSettingsBlock.html → public/res/html/scrollSyncSettingsBlock.html
View File

13
public/res/html/settingsShortcutEntry.html
View File

@ -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>

16
public/res/html/settingsShortcutsExtensionTooltip.html Normal file
View File

@ -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>

47
public/res/layout.js
View File

@ -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

3
public/res/settings.js
View File

@ -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: {}
};

139
public/res/shortcutMgr.js
View File

@ -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;
});

5
public/res/storage.js
View File

@ -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";
}

1
public/res/styles/base.less
View File

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

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

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