From 6556c284e504790bd9ed0facac3322320e0c347b Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Tue, 7 Mar 2017 22:35:54 +0800 Subject: Extract editor related code - in public/js/lib/editor/index.js --- public/js/lib/editor/index.js | 459 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 459 insertions(+) create mode 100644 public/js/lib/editor/index.js (limited to 'public/js/lib/editor/index.js') diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js new file mode 100644 index 00000000..ec22ac92 --- /dev/null +++ b/public/js/lib/editor/index.js @@ -0,0 +1,459 @@ +import * as utils from './utils'; + +/* config section */ +const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault; +const defaultEditorMode = 'gfm'; +const viewportMargin = 20; + +const jumpToAddressBarKeymapName = isMac ? "Cmd-L" : "Ctrl-L"; + +export default class Editor { + constructor() { + this.editor = null; + + this.defaultExtraKeys = { + "F10": function (cm) { + cm.setOption("fullScreen", !cm.getOption("fullScreen")); + }, + "Esc": function (cm) { + if (cm.getOption('keyMap').substr(0, 3) === 'vim') return CodeMirror.Pass; + else if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); + }, + "Cmd-S": function () { + return false; + }, + "Ctrl-S": function () { + return false; + }, + "Enter": "newlineAndIndentContinueMarkdownList", + "Tab": function (cm) { + var tab = '\t'; + + // contruct x length spaces + var spaces = Array(parseInt(cm.getOption("indentUnit")) + 1).join(" "); + + //auto indent whole line when in list or blockquote + var cursor = cm.getCursor(); + var line = cm.getLine(cursor.line); + + // this regex match the following patterns + // 1. blockquote starts with "> " or ">>" + // 2. unorder list starts with *+- + // 3. order list starts with "1." or "1)" + var regex = /^(\s*)(>[> ]*|[*+-]\s|(\d+)([.)]))/; + + var match; + var multiple = cm.getSelection().split('\n').length > 1 || cm.getSelections().length > 1; + + if (multiple) { + cm.execCommand('defaultTab'); + } else if ((match = regex.exec(line)) !== null) { + var ch = match[1].length; + var pos = { + line: cursor.line, + ch: ch + }; + if (cm.getOption('indentWithTabs')) + cm.replaceRange(tab, pos, pos, '+input'); + else + cm.replaceRange(spaces, pos, pos, '+input'); + } else { + if (cm.getOption('indentWithTabs')) + cm.execCommand('defaultTab'); + else { + cm.replaceSelection(spaces); + } + } + }, + "Cmd-Left": "goLineLeftSmart", + "Cmd-Right": "goLineRight", + "Ctrl-C": function (cm) { + if (!isMac && cm.getOption('keyMap').substr(0, 3) === 'vim') { + document.execCommand("copy"); + } else { + return CodeMirror.Pass; + } + }, + "Ctrl-*": (cm) => { + utils.wrapTextWith(this.editor, cm, '*'); + }, + "Shift-Ctrl-8": (cm) => { + utils.wrapTextWith(this.editor, cm, '*'); + }, + "Ctrl-_": (cm) => { + utils.wrapTextWith(this.editor, cm, '_'); + }, + "Shift-Ctrl--": (cm) => { + utils.wrapTextWith(this.editor, cm, '_'); + }, + "Ctrl-~": (cm) => { + utils.wrapTextWith(this.editor, cm, '~'); + }, + "Shift-Ctrl-`": (cm) => { + utils.wrapTextWith(this.editor, cm, '~'); + }, + "Ctrl-^": (cm) => { + utils.wrapTextWith(this.editor, cm, '^'); + }, + "Shift-Ctrl-6": (cm) => { + utils.wrapTextWith(this.editor, cm, '^'); + }, + "Ctrl-+": (cm) => { + utils.wrapTextWith(this.editor, cm, '+'); + }, + "Shift-Ctrl-=": (cm) => { + utils.wrapTextWith(this.editor, cm, '+'); + }, + "Ctrl-=": (cm) => { + utils.wrapTextWith(this.editor, cm, '='); + }, + "Shift-Ctrl-Backspace": (cm) => { + utils.wrapTextWith(this.editor, cm, 'Backspace'); + } + }; + + this.jumpToAddressBarKeymapValue = null; + } + + getStatusBarTemplate(callback) { + $.get(window.serverurl + '/views/statusbar.html', (template) => { + this.statusBarTemplate = template; + if (callback) callback(); + }); + } + + addStatusBar() { + if (!this.statusBarTemplate) { + this.getStatusBarTemplate(this.addStatusBar); + return; + } + this.statusBar = $(this.statusBarTemplate); + this.statusCursor = this.statusBar.find('.status-cursor'); + this.statusFile = this.statusBar.find('.status-file'); + this.statusIndicators = this.statusBar.find('.status-indicators'); + this.statusIndent = this.statusBar.find('.status-indent'); + this.statusKeymap = this.statusBar.find('.status-keymap'); + this.statusLength = this.statusBar.find('.status-length'); + this.statusTheme = this.statusBar.find('.status-theme'); + this.statusSpellcheck = this.statusBar.find('.status-spellcheck'); + this.statusPreferences = this.statusBar.find('.status-preferences'); + this.statusPanel = this.editor.addPanel(this.statusBar[0], { + position: "bottom" + }); + + this.setIndent(); + this.setKeymap(); + this.setTheme(); + this.setSpellcheck(); + this.setPreferences(); + } + + setIndent() { + var cookieIndentType = Cookies.get('indent_type'); + var cookieTabSize = parseInt(Cookies.get('tab_size')); + var cookieSpaceUnits = parseInt(Cookies.get('space_units')); + if (cookieIndentType) { + if (cookieIndentType == 'tab') { + this.editor.setOption('indentWithTabs', true); + if (cookieTabSize) + this.editor.setOption('indentUnit', cookieTabSize); + } else if (cookieIndentType == 'space') { + this.editor.setOption('indentWithTabs', false); + if (cookieSpaceUnits) + this.editor.setOption('indentUnit', cookieSpaceUnits); + } + } + if (cookieTabSize) + this.editor.setOption('tabSize', cookieTabSize); + + var type = this.statusIndicators.find('.indent-type'); + var widthLabel = this.statusIndicators.find('.indent-width-label'); + var widthInput = this.statusIndicators.find('.indent-width-input'); + + const setType = () => { + if (this.editor.getOption('indentWithTabs')) { + Cookies.set('indent_type', 'tab', { + expires: 365 + }); + type.text('Tab Size:'); + } else { + Cookies.set('indent_type', 'space', { + expires: 365 + }); + type.text('Spaces:'); + } + } + setType(); + + const setUnit = () => { + var unit = this.editor.getOption('indentUnit'); + if (this.editor.getOption('indentWithTabs')) { + Cookies.set('tab_size', unit, { + expires: 365 + }); + } else { + Cookies.set('space_units', unit, { + expires: 365 + }); + } + widthLabel.text(unit); + } + setUnit(); + + type.click(() => { + if (this.editor.getOption('indentWithTabs')) { + this.editor.setOption('indentWithTabs', false); + cookieSpaceUnits = parseInt(Cookies.get('space_units')); + if (cookieSpaceUnits) + this.editor.setOption('indentUnit', cookieSpaceUnits) + } else { + this.editor.setOption('indentWithTabs', true); + cookieTabSize = parseInt(Cookies.get('tab_size')); + if (cookieTabSize) { + this.editor.setOption('indentUnit', cookieTabSize); + this.editor.setOption('tabSize', cookieTabSize); + } + } + setType(); + setUnit(); + }); + widthLabel.click(() => { + if (widthLabel.is(':visible')) { + widthLabel.addClass('hidden'); + widthInput.removeClass('hidden'); + widthInput.val(this.editor.getOption('indentUnit')); + widthInput.select(); + } else { + widthLabel.removeClass('hidden'); + widthInput.addClass('hidden'); + } + }); + widthInput.on('change', () => { + var val = parseInt(widthInput.val()); + if (!val) val = this.editor.getOption('indentUnit'); + if (val < 1) val = 1; + else if (val > 10) val = 10; + + if (this.editor.getOption('indentWithTabs')) { + this.editor.setOption('tabSize', val); + } + this.editor.setOption('indentUnit', val); + setUnit(); + }); + widthInput.on('blur', function () { + widthLabel.removeClass('hidden'); + widthInput.addClass('hidden'); + }); + } + + setKeymap() { + var cookieKeymap = Cookies.get('keymap'); + if (cookieKeymap) + this.editor.setOption('keyMap', cookieKeymap); + + var label = this.statusIndicators.find('.ui-keymap-label'); + var sublime = this.statusIndicators.find('.ui-keymap-sublime'); + var emacs = this.statusIndicators.find('.ui-keymap-emacs'); + var vim = this.statusIndicators.find('.ui-keymap-vim'); + + const setKeymapLabel = () => { + var keymap = this.editor.getOption('keyMap'); + Cookies.set('keymap', keymap, { + expires: 365 + }); + label.text(keymap); + this.restoreOverrideEditorKeymap(); + this.setOverrideBrowserKeymap(); + } + setKeymapLabel(); + + sublime.click(() => { + this.editor.setOption('keyMap', 'sublime'); + setKeymapLabel(); + }); + emacs.click(() => { + this.editor.setOption('keyMap', 'emacs'); + setKeymapLabel(); + }); + vim.click(() => { + this.editor.setOption('keyMap', 'vim'); + setKeymapLabel(); + }); + } + + setTheme() { + var cookieTheme = Cookies.get('theme'); + if (cookieTheme) { + this.editor.setOption('theme', cookieTheme); + } + + var themeToggle = this.statusTheme.find('.ui-theme-toggle'); + + const checkTheme = () => { + var theme = this.editor.getOption('theme'); + if (theme == "one-dark") { + themeToggle.removeClass('active'); + } else { + themeToggle.addClass('active'); + } + } + + themeToggle.click(() => { + var theme = this.editor.getOption('theme'); + if (theme == "one-dark") { + theme = "default"; + } else { + theme = "one-dark"; + } + this.editor.setOption('theme', theme); + Cookies.set('theme', theme, { + expires: 365 + }); + + checkTheme(); + }); + + checkTheme(); + } + + setSpellcheck() { + var cookieSpellcheck = Cookies.get('spellcheck'); + if (cookieSpellcheck) { + var mode = null; + if (cookieSpellcheck === 'true' || cookieSpellcheck === true) { + mode = 'spell-checker'; + } else { + mode = defaultEditorMode; + } + if (mode && mode !== this.editor.getOption('mode')) { + this.editor.setOption('mode', mode); + } + } + + var spellcheckToggle = this.statusSpellcheck.find('.ui-spellcheck-toggle'); + + const checkSpellcheck = () => { + var mode = this.editor.getOption('mode'); + if (mode == defaultEditorMode) { + spellcheckToggle.removeClass('active'); + } else { + spellcheckToggle.addClass('active'); + } + } + + spellcheckToggle.click(() => { + var mode = this.editor.getOption('mode'); + if (mode == defaultEditorMode) { + mode = "spell-checker"; + } else { + mode = defaultEditorMode; + } + if (mode && mode !== this.editor.getOption('mode')) { + this.editor.setOption('mode', mode); + } + Cookies.set('spellcheck', (mode == "spell-checker"), { + expires: 365 + }); + + checkSpellcheck(); + }); + + checkSpellcheck(); + + //workaround spellcheck might not activate beacuse the ajax loading + if (window.num_loaded < 2) { + var spellcheckTimer = setInterval(() => { + if (window.num_loaded >= 2) { + if (this.editor.getOption('mode') == "spell-checker") { + this.editor.setOption('mode', "spell-checker"); + } + clearInterval(spellcheckTimer); + } + }, 100); + } + } + + resetEditorKeymapToBrowserKeymap() { + var keymap = this.editor.getOption('keyMap'); + if (!this.jumpToAddressBarKeymapValue) { + this.jumpToAddressBarKeymapValue = CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName]; + delete CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName]; + } + } + + restoreOverrideEditorKeymap() { + var keymap = this.editor.getOption('keyMap'); + if (this.jumpToAddressBarKeymapValue) { + CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName] = this.jumpToAddressBarKeymapValue; + this.jumpToAddressBarKeymapValue = null; + } + } + setOverrideBrowserKeymap() { + var overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]'); + if (overrideBrowserKeymap.is(":checked")) { + Cookies.set('preferences-override-browser-keymap', true, { + expires: 365 + }); + this.restoreOverrideEditorKeymap(); + } else { + Cookies.remove('preferences-override-browser-keymap'); + this.resetEditorKeymapToBrowserKeymap(); + } + } + + setPreferences() { + var overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]'); + var cookieOverrideBrowserKeymap = Cookies.get('preferences-override-browser-keymap'); + if (cookieOverrideBrowserKeymap && cookieOverrideBrowserKeymap === "true") { + overrideBrowserKeymap.prop('checked', true); + } else { + overrideBrowserKeymap.prop('checked', false); + } + this.setOverrideBrowserKeymap(); + + overrideBrowserKeymap.change(() => { + this.setOverrideBrowserKeymap(); + }); + } + + init(textit) { + this.editor = CodeMirror.fromTextArea(textit, { + mode: defaultEditorMode, + backdrop: defaultEditorMode, + keyMap: "sublime", + viewportMargin: viewportMargin, + styleActiveLine: true, + lineNumbers: true, + lineWrapping: true, + showCursorWhenSelecting: true, + highlightSelectionMatches: true, + indentUnit: 4, + continueComments: "Enter", + theme: "one-dark", + inputStyle: "textarea", + matchBrackets: true, + autoCloseBrackets: true, + matchTags: { + bothTags: true + }, + autoCloseTags: true, + foldGutter: true, + gutters: ["CodeMirror-linenumbers", "authorship-gutters", "CodeMirror-foldgutter"], + extraKeys: this.defaultExtraKeys, + flattenSpans: true, + addModeClass: true, + readOnly: true, + autoRefresh: true, + otherCursors: true, + placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)" + }); + + this.getStatusBarTemplate(); + + return this.editor; + } + + getEditor() { + return this.editor; + } +} -- cgit v1.2.3 From 9b513f619fe74a579fadd807f86bd38f1049c56b Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Thu, 9 Mar 2017 15:39:42 +0800 Subject: Use JavaScript standard style --- public/js/lib/editor/index.js | 875 ++++++++++++++++++++++-------------------- 1 file changed, 449 insertions(+), 426 deletions(-) (limited to 'public/js/lib/editor/index.js') diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js index ec22ac92..a97fd976 100644 --- a/public/js/lib/editor/index.js +++ b/public/js/lib/editor/index.js @@ -1,459 +1,482 @@ -import * as utils from './utils'; +import * as utils from './utils' /* config section */ -const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault; -const defaultEditorMode = 'gfm'; -const viewportMargin = 20; +const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault +const defaultEditorMode = 'gfm' +const viewportMargin = 20 -const jumpToAddressBarKeymapName = isMac ? "Cmd-L" : "Ctrl-L"; +const jumpToAddressBarKeymapName = isMac ? 'Cmd-L' : 'Ctrl-L' export default class Editor { - constructor() { - this.editor = null; - - this.defaultExtraKeys = { - "F10": function (cm) { - cm.setOption("fullScreen", !cm.getOption("fullScreen")); - }, - "Esc": function (cm) { - if (cm.getOption('keyMap').substr(0, 3) === 'vim') return CodeMirror.Pass; - else if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); - }, - "Cmd-S": function () { - return false; - }, - "Ctrl-S": function () { - return false; - }, - "Enter": "newlineAndIndentContinueMarkdownList", - "Tab": function (cm) { - var tab = '\t'; - - // contruct x length spaces - var spaces = Array(parseInt(cm.getOption("indentUnit")) + 1).join(" "); - - //auto indent whole line when in list or blockquote - var cursor = cm.getCursor(); - var line = cm.getLine(cursor.line); - - // this regex match the following patterns - // 1. blockquote starts with "> " or ">>" - // 2. unorder list starts with *+- - // 3. order list starts with "1." or "1)" - var regex = /^(\s*)(>[> ]*|[*+-]\s|(\d+)([.)]))/; - - var match; - var multiple = cm.getSelection().split('\n').length > 1 || cm.getSelections().length > 1; - - if (multiple) { - cm.execCommand('defaultTab'); - } else if ((match = regex.exec(line)) !== null) { - var ch = match[1].length; - var pos = { - line: cursor.line, - ch: ch - }; - if (cm.getOption('indentWithTabs')) - cm.replaceRange(tab, pos, pos, '+input'); - else - cm.replaceRange(spaces, pos, pos, '+input'); - } else { - if (cm.getOption('indentWithTabs')) - cm.execCommand('defaultTab'); - else { - cm.replaceSelection(spaces); - } - } - }, - "Cmd-Left": "goLineLeftSmart", - "Cmd-Right": "goLineRight", - "Ctrl-C": function (cm) { - if (!isMac && cm.getOption('keyMap').substr(0, 3) === 'vim') { - document.execCommand("copy"); - } else { - return CodeMirror.Pass; - } - }, - "Ctrl-*": (cm) => { - utils.wrapTextWith(this.editor, cm, '*'); - }, - "Shift-Ctrl-8": (cm) => { - utils.wrapTextWith(this.editor, cm, '*'); - }, - "Ctrl-_": (cm) => { - utils.wrapTextWith(this.editor, cm, '_'); - }, - "Shift-Ctrl--": (cm) => { - utils.wrapTextWith(this.editor, cm, '_'); - }, - "Ctrl-~": (cm) => { - utils.wrapTextWith(this.editor, cm, '~'); - }, - "Shift-Ctrl-`": (cm) => { - utils.wrapTextWith(this.editor, cm, '~'); - }, - "Ctrl-^": (cm) => { - utils.wrapTextWith(this.editor, cm, '^'); - }, - "Shift-Ctrl-6": (cm) => { - utils.wrapTextWith(this.editor, cm, '^'); - }, - "Ctrl-+": (cm) => { - utils.wrapTextWith(this.editor, cm, '+'); - }, - "Shift-Ctrl-=": (cm) => { - utils.wrapTextWith(this.editor, cm, '+'); - }, - "Ctrl-=": (cm) => { - utils.wrapTextWith(this.editor, cm, '='); - }, - "Shift-Ctrl-Backspace": (cm) => { - utils.wrapTextWith(this.editor, cm, 'Backspace'); - } - }; - - this.jumpToAddressBarKeymapValue = null; + constructor () { + this.editor = null + + this.defaultExtraKeys = { + F10: function (cm) { + cm.setOption('fullScreen', !cm.getOption('fullScreen')) + }, + Esc: function (cm) { + if (cm.getOption('keyMap').substr(0, 3) === 'vim') { + return CodeMirror.Pass + } else if (cm.getOption('fullScreen')) { + cm.setOption('fullScreen', false) + } + }, + 'Cmd-S': function () { + return false + }, + 'Ctrl-S': function () { + return false + }, + Enter: 'newlineAndIndentContinueMarkdownList', + Tab: function (cm) { + var tab = '\t' + + // contruct x length spaces + var spaces = Array(parseInt(cm.getOption('indentUnit')) + 1).join(' ') + + // auto indent whole line when in list or blockquote + var cursor = cm.getCursor() + var line = cm.getLine(cursor.line) + + // this regex match the following patterns + // 1. blockquote starts with "> " or ">>" + // 2. unorder list starts with *+- + // 3. order list starts with "1." or "1)" + var regex = /^(\s*)(>[> ]*|[*+-]\s|(\d+)([.)]))/ + + var match + var multiple = cm.getSelection().split('\n').length > 1 || + cm.getSelections().length > 1 + + if (multiple) { + cm.execCommand('defaultTab') + } else if ((match = regex.exec(line)) !== null) { + var ch = match[1].length + var pos = { + line: cursor.line, + ch: ch + } + if (cm.getOption('indentWithTabs')) { + cm.replaceRange(tab, pos, pos, '+input') + } else { + cm.replaceRange(spaces, pos, pos, '+input') + } + } else { + if (cm.getOption('indentWithTabs')) { + cm.execCommand('defaultTab') + } else { + cm.replaceSelection(spaces) + } + } + }, + 'Cmd-Left': 'goLineLeftSmart', + 'Cmd-Right': 'goLineRight', + 'Ctrl-C': function (cm) { + if (!isMac && cm.getOption('keyMap').substr(0, 3) === 'vim') { + document.execCommand('copy') + } else { + return CodeMirror.Pass + } + }, + 'Ctrl-*': cm => { + utils.wrapTextWith(this.editor, cm, '*') + }, + 'Shift-Ctrl-8': cm => { + utils.wrapTextWith(this.editor, cm, '*') + }, + 'Ctrl-_': cm => { + utils.wrapTextWith(this.editor, cm, '_') + }, + 'Shift-Ctrl--': cm => { + utils.wrapTextWith(this.editor, cm, '_') + }, + 'Ctrl-~': cm => { + utils.wrapTextWith(this.editor, cm, '~') + }, + 'Shift-Ctrl-`': cm => { + utils.wrapTextWith(this.editor, cm, '~') + }, + 'Ctrl-^': cm => { + utils.wrapTextWith(this.editor, cm, '^') + }, + 'Shift-Ctrl-6': cm => { + utils.wrapTextWith(this.editor, cm, '^') + }, + 'Ctrl-+': cm => { + utils.wrapTextWith(this.editor, cm, '+') + }, + 'Shift-Ctrl-=': cm => { + utils.wrapTextWith(this.editor, cm, '+') + }, + 'Ctrl-=': cm => { + utils.wrapTextWith(this.editor, cm, '=') + }, + 'Shift-Ctrl-Backspace': cm => { + utils.wrapTextWith(this.editor, cm, 'Backspace') + } } - getStatusBarTemplate(callback) { - $.get(window.serverurl + '/views/statusbar.html', (template) => { - this.statusBarTemplate = template; - if (callback) callback(); - }); - } + this.jumpToAddressBarKeymapValue = null + } - addStatusBar() { - if (!this.statusBarTemplate) { - this.getStatusBarTemplate(this.addStatusBar); - return; - } - this.statusBar = $(this.statusBarTemplate); - this.statusCursor = this.statusBar.find('.status-cursor'); - this.statusFile = this.statusBar.find('.status-file'); - this.statusIndicators = this.statusBar.find('.status-indicators'); - this.statusIndent = this.statusBar.find('.status-indent'); - this.statusKeymap = this.statusBar.find('.status-keymap'); - this.statusLength = this.statusBar.find('.status-length'); - this.statusTheme = this.statusBar.find('.status-theme'); - this.statusSpellcheck = this.statusBar.find('.status-spellcheck'); - this.statusPreferences = this.statusBar.find('.status-preferences'); - this.statusPanel = this.editor.addPanel(this.statusBar[0], { - position: "bottom" - }); - - this.setIndent(); - this.setKeymap(); - this.setTheme(); - this.setSpellcheck(); - this.setPreferences(); - } + getStatusBarTemplate (callback) { + $.get(window.serverurl + '/views/statusbar.html', template => { + this.statusBarTemplate = template + if (callback) callback() + }) + } - setIndent() { - var cookieIndentType = Cookies.get('indent_type'); - var cookieTabSize = parseInt(Cookies.get('tab_size')); - var cookieSpaceUnits = parseInt(Cookies.get('space_units')); - if (cookieIndentType) { - if (cookieIndentType == 'tab') { - this.editor.setOption('indentWithTabs', true); - if (cookieTabSize) - this.editor.setOption('indentUnit', cookieTabSize); - } else if (cookieIndentType == 'space') { - this.editor.setOption('indentWithTabs', false); - if (cookieSpaceUnits) - this.editor.setOption('indentUnit', cookieSpaceUnits); - } - } - if (cookieTabSize) - this.editor.setOption('tabSize', cookieTabSize); - - var type = this.statusIndicators.find('.indent-type'); - var widthLabel = this.statusIndicators.find('.indent-width-label'); - var widthInput = this.statusIndicators.find('.indent-width-input'); - - const setType = () => { - if (this.editor.getOption('indentWithTabs')) { - Cookies.set('indent_type', 'tab', { - expires: 365 - }); - type.text('Tab Size:'); - } else { - Cookies.set('indent_type', 'space', { - expires: 365 - }); - type.text('Spaces:'); - } + addStatusBar () { + if (!this.statusBarTemplate) { + this.getStatusBarTemplate(this.addStatusBar) + return + } + this.statusBar = $(this.statusBarTemplate) + this.statusCursor = this.statusBar.find('.status-cursor') + this.statusFile = this.statusBar.find('.status-file') + this.statusIndicators = this.statusBar.find('.status-indicators') + this.statusIndent = this.statusBar.find('.status-indent') + this.statusKeymap = this.statusBar.find('.status-keymap') + this.statusLength = this.statusBar.find('.status-length') + this.statusTheme = this.statusBar.find('.status-theme') + this.statusSpellcheck = this.statusBar.find('.status-spellcheck') + this.statusPreferences = this.statusBar.find('.status-preferences') + this.statusPanel = this.editor.addPanel(this.statusBar[0], { + position: 'bottom' + }) + + this.setIndent() + this.setKeymap() + this.setTheme() + this.setSpellcheck() + this.setPreferences() + } + + setIndent () { + var cookieIndentType = Cookies.get('indent_type') + var cookieTabSize = parseInt(Cookies.get('tab_size')) + var cookieSpaceUnits = parseInt(Cookies.get('space_units')) + if (cookieIndentType) { + if (cookieIndentType === 'tab') { + this.editor.setOption('indentWithTabs', true) + if (cookieTabSize) { + this.editor.setOption('indentUnit', cookieTabSize) } - setType(); - - const setUnit = () => { - var unit = this.editor.getOption('indentUnit'); - if (this.editor.getOption('indentWithTabs')) { - Cookies.set('tab_size', unit, { - expires: 365 - }); - } else { - Cookies.set('space_units', unit, { - expires: 365 - }); - } - widthLabel.text(unit); + } else if (cookieIndentType === 'space') { + this.editor.setOption('indentWithTabs', false) + if (cookieSpaceUnits) { + this.editor.setOption('indentUnit', cookieSpaceUnits) } - setUnit(); - - type.click(() => { - if (this.editor.getOption('indentWithTabs')) { - this.editor.setOption('indentWithTabs', false); - cookieSpaceUnits = parseInt(Cookies.get('space_units')); - if (cookieSpaceUnits) - this.editor.setOption('indentUnit', cookieSpaceUnits) - } else { - this.editor.setOption('indentWithTabs', true); - cookieTabSize = parseInt(Cookies.get('tab_size')); - if (cookieTabSize) { - this.editor.setOption('indentUnit', cookieTabSize); - this.editor.setOption('tabSize', cookieTabSize); - } - } - setType(); - setUnit(); - }); - widthLabel.click(() => { - if (widthLabel.is(':visible')) { - widthLabel.addClass('hidden'); - widthInput.removeClass('hidden'); - widthInput.val(this.editor.getOption('indentUnit')); - widthInput.select(); - } else { - widthLabel.removeClass('hidden'); - widthInput.addClass('hidden'); - } - }); - widthInput.on('change', () => { - var val = parseInt(widthInput.val()); - if (!val) val = this.editor.getOption('indentUnit'); - if (val < 1) val = 1; - else if (val > 10) val = 10; - - if (this.editor.getOption('indentWithTabs')) { - this.editor.setOption('tabSize', val); - } - this.editor.setOption('indentUnit', val); - setUnit(); - }); - widthInput.on('blur', function () { - widthLabel.removeClass('hidden'); - widthInput.addClass('hidden'); - }); + } } - - setKeymap() { - var cookieKeymap = Cookies.get('keymap'); - if (cookieKeymap) - this.editor.setOption('keyMap', cookieKeymap); - - var label = this.statusIndicators.find('.ui-keymap-label'); - var sublime = this.statusIndicators.find('.ui-keymap-sublime'); - var emacs = this.statusIndicators.find('.ui-keymap-emacs'); - var vim = this.statusIndicators.find('.ui-keymap-vim'); - - const setKeymapLabel = () => { - var keymap = this.editor.getOption('keyMap'); - Cookies.set('keymap', keymap, { - expires: 365 - }); - label.text(keymap); - this.restoreOverrideEditorKeymap(); - this.setOverrideBrowserKeymap(); - } - setKeymapLabel(); - - sublime.click(() => { - this.editor.setOption('keyMap', 'sublime'); - setKeymapLabel(); - }); - emacs.click(() => { - this.editor.setOption('keyMap', 'emacs'); - setKeymapLabel(); - }); - vim.click(() => { - this.editor.setOption('keyMap', 'vim'); - setKeymapLabel(); - }); + if (cookieTabSize) { + this.editor.setOption('tabSize', cookieTabSize) } - setTheme() { - var cookieTheme = Cookies.get('theme'); - if (cookieTheme) { - this.editor.setOption('theme', cookieTheme); + var type = this.statusIndicators.find('.indent-type') + var widthLabel = this.statusIndicators.find('.indent-width-label') + var widthInput = this.statusIndicators.find('.indent-width-input') + + const setType = () => { + if (this.editor.getOption('indentWithTabs')) { + Cookies.set('indent_type', 'tab', { + expires: 365 + }) + type.text('Tab Size:') + } else { + Cookies.set('indent_type', 'space', { + expires: 365 + }) + type.text('Spaces:') + } + } + setType() + + const setUnit = () => { + var unit = this.editor.getOption('indentUnit') + if (this.editor.getOption('indentWithTabs')) { + Cookies.set('tab_size', unit, { + expires: 365 + }) + } else { + Cookies.set('space_units', unit, { + expires: 365 + }) + } + widthLabel.text(unit) + } + setUnit() + + type.click(() => { + if (this.editor.getOption('indentWithTabs')) { + this.editor.setOption('indentWithTabs', false) + cookieSpaceUnits = parseInt(Cookies.get('space_units')) + if (cookieSpaceUnits) { + this.editor.setOption('indentUnit', cookieSpaceUnits) } - - var themeToggle = this.statusTheme.find('.ui-theme-toggle'); - - const checkTheme = () => { - var theme = this.editor.getOption('theme'); - if (theme == "one-dark") { - themeToggle.removeClass('active'); - } else { - themeToggle.addClass('active'); - } + } else { + this.editor.setOption('indentWithTabs', true) + cookieTabSize = parseInt(Cookies.get('tab_size')) + if (cookieTabSize) { + this.editor.setOption('indentUnit', cookieTabSize) + this.editor.setOption('tabSize', cookieTabSize) } + } + setType() + setUnit() + }) + widthLabel.click(() => { + if (widthLabel.is(':visible')) { + widthLabel.addClass('hidden') + widthInput.removeClass('hidden') + widthInput.val(this.editor.getOption('indentUnit')) + widthInput.select() + } else { + widthLabel.removeClass('hidden') + widthInput.addClass('hidden') + } + }) + widthInput.on('change', () => { + var val = parseInt(widthInput.val()) + if (!val) val = this.editor.getOption('indentUnit') + if (val < 1) val = 1 + else if (val > 10) val = 10 + + if (this.editor.getOption('indentWithTabs')) { + this.editor.setOption('tabSize', val) + } + this.editor.setOption('indentUnit', val) + setUnit() + }) + widthInput.on('blur', function () { + widthLabel.removeClass('hidden') + widthInput.addClass('hidden') + }) + } + + setKeymap () { + var cookieKeymap = Cookies.get('keymap') + if (cookieKeymap) { + this.editor.setOption('keyMap', cookieKeymap) + } - themeToggle.click(() => { - var theme = this.editor.getOption('theme'); - if (theme == "one-dark") { - theme = "default"; - } else { - theme = "one-dark"; - } - this.editor.setOption('theme', theme); - Cookies.set('theme', theme, { - expires: 365 - }); + var label = this.statusIndicators.find('.ui-keymap-label') + var sublime = this.statusIndicators.find('.ui-keymap-sublime') + var emacs = this.statusIndicators.find('.ui-keymap-emacs') + var vim = this.statusIndicators.find('.ui-keymap-vim') + + const setKeymapLabel = () => { + var keymap = this.editor.getOption('keyMap') + Cookies.set('keymap', keymap, { + expires: 365 + }) + label.text(keymap) + this.restoreOverrideEditorKeymap() + this.setOverrideBrowserKeymap() + } + setKeymapLabel() + + sublime.click(() => { + this.editor.setOption('keyMap', 'sublime') + setKeymapLabel() + }) + emacs.click(() => { + this.editor.setOption('keyMap', 'emacs') + setKeymapLabel() + }) + vim.click(() => { + this.editor.setOption('keyMap', 'vim') + setKeymapLabel() + }) + } + + setTheme () { + var cookieTheme = Cookies.get('theme') + if (cookieTheme) { + this.editor.setOption('theme', cookieTheme) + } - checkTheme(); - }); + var themeToggle = this.statusTheme.find('.ui-theme-toggle') - checkTheme(); + const checkTheme = () => { + var theme = this.editor.getOption('theme') + if (theme === 'one-dark') { + themeToggle.removeClass('active') + } else { + themeToggle.addClass('active') + } } - setSpellcheck() { - var cookieSpellcheck = Cookies.get('spellcheck'); - if (cookieSpellcheck) { - var mode = null; - if (cookieSpellcheck === 'true' || cookieSpellcheck === true) { - mode = 'spell-checker'; - } else { - mode = defaultEditorMode; - } - if (mode && mode !== this.editor.getOption('mode')) { - this.editor.setOption('mode', mode); - } - } - - var spellcheckToggle = this.statusSpellcheck.find('.ui-spellcheck-toggle'); + themeToggle.click(() => { + var theme = this.editor.getOption('theme') + if (theme === 'one-dark') { + theme = 'default' + } else { + theme = 'one-dark' + } + this.editor.setOption('theme', theme) + Cookies.set('theme', theme, { + expires: 365 + }) + + checkTheme() + }) + + checkTheme() + } + + setSpellcheck () { + var cookieSpellcheck = Cookies.get('spellcheck') + if (cookieSpellcheck) { + var mode = null + if (cookieSpellcheck === 'true' || cookieSpellcheck === true) { + mode = 'spell-checker' + } else { + mode = defaultEditorMode + } + if (mode && mode !== this.editor.getOption('mode')) { + this.editor.setOption('mode', mode) + } + } - const checkSpellcheck = () => { - var mode = this.editor.getOption('mode'); - if (mode == defaultEditorMode) { - spellcheckToggle.removeClass('active'); - } else { - spellcheckToggle.addClass('active'); - } - } + var spellcheckToggle = this.statusSpellcheck.find('.ui-spellcheck-toggle') - spellcheckToggle.click(() => { - var mode = this.editor.getOption('mode'); - if (mode == defaultEditorMode) { - mode = "spell-checker"; - } else { - mode = defaultEditorMode; - } - if (mode && mode !== this.editor.getOption('mode')) { - this.editor.setOption('mode', mode); - } - Cookies.set('spellcheck', (mode == "spell-checker"), { - expires: 365 - }); - - checkSpellcheck(); - }); - - checkSpellcheck(); - - //workaround spellcheck might not activate beacuse the ajax loading - if (window.num_loaded < 2) { - var spellcheckTimer = setInterval(() => { - if (window.num_loaded >= 2) { - if (this.editor.getOption('mode') == "spell-checker") { - this.editor.setOption('mode', "spell-checker"); - } - clearInterval(spellcheckTimer); - } - }, 100); - } + const checkSpellcheck = () => { + var mode = this.editor.getOption('mode') + if (mode === defaultEditorMode) { + spellcheckToggle.removeClass('active') + } else { + spellcheckToggle.addClass('active') + } } - resetEditorKeymapToBrowserKeymap() { - var keymap = this.editor.getOption('keyMap'); - if (!this.jumpToAddressBarKeymapValue) { - this.jumpToAddressBarKeymapValue = CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName]; - delete CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName]; - } + spellcheckToggle.click(() => { + var mode = this.editor.getOption('mode') + if (mode === defaultEditorMode) { + mode = 'spell-checker' + } else { + mode = defaultEditorMode + } + if (mode && mode !== this.editor.getOption('mode')) { + this.editor.setOption('mode', mode) + } + Cookies.set('spellcheck', mode === 'spell-checker', { + expires: 365 + }) + + checkSpellcheck() + }) + + checkSpellcheck() + + // workaround spellcheck might not activate beacuse the ajax loading + if (window.num_loaded < 2) { + var spellcheckTimer = setInterval( + () => { + if (window.num_loaded >= 2) { + if (this.editor.getOption('mode') === 'spell-checker') { + this.editor.setOption('mode', 'spell-checker') + } + clearInterval(spellcheckTimer) + } + }, + 100, + ) } + } - restoreOverrideEditorKeymap() { - var keymap = this.editor.getOption('keyMap'); - if (this.jumpToAddressBarKeymapValue) { - CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName] = this.jumpToAddressBarKeymapValue; - this.jumpToAddressBarKeymapValue = null; - } - } - setOverrideBrowserKeymap() { - var overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]'); - if (overrideBrowserKeymap.is(":checked")) { - Cookies.set('preferences-override-browser-keymap', true, { - expires: 365 - }); - this.restoreOverrideEditorKeymap(); - } else { - Cookies.remove('preferences-override-browser-keymap'); - this.resetEditorKeymapToBrowserKeymap(); - } + resetEditorKeymapToBrowserKeymap () { + var keymap = this.editor.getOption('keyMap') + if (!this.jumpToAddressBarKeymapValue) { + this.jumpToAddressBarKeymapValue = CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName] + delete CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName] } + } - setPreferences() { - var overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]'); - var cookieOverrideBrowserKeymap = Cookies.get('preferences-override-browser-keymap'); - if (cookieOverrideBrowserKeymap && cookieOverrideBrowserKeymap === "true") { - overrideBrowserKeymap.prop('checked', true); - } else { - overrideBrowserKeymap.prop('checked', false); - } - this.setOverrideBrowserKeymap(); - - overrideBrowserKeymap.change(() => { - this.setOverrideBrowserKeymap(); - }); + restoreOverrideEditorKeymap () { + var keymap = this.editor.getOption('keyMap') + if (this.jumpToAddressBarKeymapValue) { + CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName] = this.jumpToAddressBarKeymapValue + this.jumpToAddressBarKeymapValue = null } - - init(textit) { - this.editor = CodeMirror.fromTextArea(textit, { - mode: defaultEditorMode, - backdrop: defaultEditorMode, - keyMap: "sublime", - viewportMargin: viewportMargin, - styleActiveLine: true, - lineNumbers: true, - lineWrapping: true, - showCursorWhenSelecting: true, - highlightSelectionMatches: true, - indentUnit: 4, - continueComments: "Enter", - theme: "one-dark", - inputStyle: "textarea", - matchBrackets: true, - autoCloseBrackets: true, - matchTags: { - bothTags: true - }, - autoCloseTags: true, - foldGutter: true, - gutters: ["CodeMirror-linenumbers", "authorship-gutters", "CodeMirror-foldgutter"], - extraKeys: this.defaultExtraKeys, - flattenSpans: true, - addModeClass: true, - readOnly: true, - autoRefresh: true, - otherCursors: true, - placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)" - }); - - this.getStatusBarTemplate(); - - return this.editor; + } + setOverrideBrowserKeymap () { + var overrideBrowserKeymap = $( + '.ui-preferences-override-browser-keymap label > input[type="checkbox"]', + ) + if (overrideBrowserKeymap.is(':checked')) { + Cookies.set('preferences-override-browser-keymap', true, { + expires: 365 + }) + this.restoreOverrideEditorKeymap() + } else { + Cookies.remove('preferences-override-browser-keymap') + this.resetEditorKeymapToBrowserKeymap() } - - getEditor() { - return this.editor; + } + + setPreferences () { + var overrideBrowserKeymap = $( + '.ui-preferences-override-browser-keymap label > input[type="checkbox"]', + ) + var cookieOverrideBrowserKeymap = Cookies.get( + 'preferences-override-browser-keymap', + ) + if (cookieOverrideBrowserKeymap && cookieOverrideBrowserKeymap === 'true') { + overrideBrowserKeymap.prop('checked', true) + } else { + overrideBrowserKeymap.prop('checked', false) } + this.setOverrideBrowserKeymap() + + overrideBrowserKeymap.change(() => { + this.setOverrideBrowserKeymap() + }) + } + + init (textit) { + this.editor = CodeMirror.fromTextArea(textit, { + mode: defaultEditorMode, + backdrop: defaultEditorMode, + keyMap: 'sublime', + viewportMargin: viewportMargin, + styleActiveLine: true, + lineNumbers: true, + lineWrapping: true, + showCursorWhenSelecting: true, + highlightSelectionMatches: true, + indentUnit: 4, + continueComments: 'Enter', + theme: 'one-dark', + inputStyle: 'textarea', + matchBrackets: true, + autoCloseBrackets: true, + matchTags: { + bothTags: true + }, + autoCloseTags: true, + foldGutter: true, + gutters: [ + 'CodeMirror-linenumbers', + 'authorship-gutters', + 'CodeMirror-foldgutter' + ], + extraKeys: this.defaultExtraKeys, + flattenSpans: true, + addModeClass: true, + readOnly: true, + autoRefresh: true, + otherCursors: true, + placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)" + }) + + this.getStatusBarTemplate() + + return this.editor + } + + getEditor () { + return this.editor + } } -- cgit v1.2.3 From cc30d370f7cf662eb4ea21fb93148a30bd8764d2 Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Mon, 13 Mar 2017 22:00:20 +0800 Subject: Fix variable exporting error --- public/js/lib/editor/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'public/js/lib/editor/index.js') diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js index a97fd976..6ae40d82 100644 --- a/public/js/lib/editor/index.js +++ b/public/js/lib/editor/index.js @@ -10,7 +10,7 @@ const jumpToAddressBarKeymapName = isMac ? 'Cmd-L' : 'Ctrl-L' export default class Editor { constructor () { this.editor = null - + this.jumpToAddressBarKeymapValue = null this.defaultExtraKeys = { F10: function (cm) { cm.setOption('fullScreen', !cm.getOption('fullScreen')) @@ -116,8 +116,6 @@ export default class Editor { utils.wrapTextWith(this.editor, cm, 'Backspace') } } - - this.jumpToAddressBarKeymapValue = null } getStatusBarTemplate (callback) { -- cgit v1.2.3