From 781f495f3e04b863be58226b5af8e6ab94d9355a Mon Sep 17 00:00:00 2001 From: Yukai Huang Date: Wed, 4 Jan 2017 23:01:44 +0800 Subject: Convert synscroll to es6 --- public/js/index.js | 12 ++-- public/js/syncscroll.js | 169 ++++++++++++++++++++++-------------------------- 2 files changed, 85 insertions(+), 96 deletions(-) (limited to 'public/js') diff --git a/public/js/index.js b/public/js/index.js index 8921eda3..46dfffd9 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -51,11 +51,12 @@ var parseMeta = extra.parseMeta; var exportToHTML = extra.exportToHTML; var exportToRawHTML = extra.exportToRawHTML; -var syncScroll = require('./syncscroll'); -var setupSyncAreas = syncScroll.setupSyncAreas; -var clearMap = syncScroll.clearMap; -var syncScrollToEdit = syncScroll.syncScrollToEdit; -var syncScrollToView = syncScroll.syncScrollToView; +import { + clearMap, + setupSyncAreas, + syncScrollToEdit, + syncScrollToView +} from './syncscroll'; var historyModule = require('./history'); var writeHistory = historyModule.writeHistory; @@ -3693,6 +3694,7 @@ function checkCursorMenuInner() { var offsetLeft = 0; var offsetTop = defaultTextHeight; // set up side down + window.upSideDown = false; var lastUpSideDown = upSideDown = false; // only do when have width and height if (width > 0 && height > 0) { diff --git a/public/js/syncscroll.js b/public/js/syncscroll.js index 47d0e1c4..c9693176 100644 --- a/public/js/syncscroll.js +++ b/public/js/syncscroll.js @@ -1,12 +1,13 @@ // Inject line numbers for sync scroll. -var extra = require('./extra'); -var md = extra.md; +import markdownitContainer from 'markdown-it-container'; + +import { md } from './extra'; function addPart(tokens, idx) { if (tokens[idx].map && tokens[idx].level === 0) { - var startline = tokens[idx].map[0] + 1; - var endline = tokens[idx].map[1]; + const startline = tokens[idx].map[0] + 1; + const endline = tokens[idx].map[1]; tokens[idx].attrJoin('class', 'part'); tokens[idx].attrJoin('data-startline', startline); tokens[idx].attrJoin('data-endline', endline); @@ -16,48 +17,48 @@ function addPart(tokens, idx) { md.renderer.rules.blockquote_open = function (tokens, idx, options, env, self) { tokens[idx].attrJoin('class', 'raw'); addPart(tokens, idx); - return self.renderToken.apply(self, arguments); + return self.renderToken(...arguments); }; md.renderer.rules.table_open = function (tokens, idx, options, env, self) { addPart(tokens, idx); - return self.renderToken.apply(self, arguments); + return self.renderToken(...arguments); }; md.renderer.rules.bullet_list_open = function (tokens, idx, options, env, self) { addPart(tokens, idx); - return self.renderToken.apply(self, arguments); + return self.renderToken(...arguments); }; md.renderer.rules.list_item_open = function (tokens, idx, options, env, self) { tokens[idx].attrJoin('class', 'raw'); if (tokens[idx].map) { - var startline = tokens[idx].map[0] + 1; - var endline = tokens[idx].map[1]; + const startline = tokens[idx].map[0] + 1; + const endline = tokens[idx].map[1]; tokens[idx].attrJoin('data-startline', startline); tokens[idx].attrJoin('data-endline', endline); } - return self.renderToken.apply(self, arguments); + return self.renderToken(...arguments); }; md.renderer.rules.ordered_list_open = function (tokens, idx, options, env, self) { addPart(tokens, idx); - return self.renderToken.apply(self, arguments); + return self.renderToken(...arguments); }; md.renderer.rules.link_open = function (tokens, idx, options, env, self) { addPart(tokens, idx); - return self.renderToken.apply(self, arguments); + return self.renderToken(...arguments); }; md.renderer.rules.paragraph_open = function (tokens, idx, options, env, self) { addPart(tokens, idx); - return self.renderToken.apply(self, arguments); + return self.renderToken(...arguments); }; md.renderer.rules.heading_open = function (tokens, idx, options, env, self) { tokens[idx].attrJoin('class', 'raw'); addPart(tokens, idx); - return self.renderToken.apply(self, arguments); + return self.renderToken(...arguments); }; -md.renderer.rules.fence = function (tokens, idx, options, env, self) { - var token = tokens[idx], - info = token.info ? md.utils.unescapeAll(token.info).trim() : '', - langName = '', - highlighted; +md.renderer.rules.fence = (tokens, idx, options, env, self) => { + const token = tokens[idx]; + const info = token.info ? md.utils.unescapeAll(token.info).trim() : ''; + let langName = ''; + let highlighted; if (info) { langName = info.split(/\s+/g)[0]; @@ -74,38 +75,33 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) { } if (highlighted.indexOf('' - + highlighted - + '\n'; + const startline = tokens[idx].map[0] + 1; + const endline = tokens[idx].map[1]; + return `
${highlighted}
\n`; } - return '
'
-        + highlighted
-        + '
\n'; + return `
${highlighted}
\n`; }; -md.renderer.rules.code_block = function (tokens, idx, options, env, self) { +md.renderer.rules.code_block = (tokens, idx, options, env, self) => { if (tokens[idx].map && tokens[idx].level === 0) { - var startline = tokens[idx].map[0] + 1; - var endline = tokens[idx].map[1]; - return '
' + md.utils.escapeHtml(tokens[idx].content) + '
\n'; + const startline = tokens[idx].map[0] + 1; + const endline = tokens[idx].map[1]; + return `
${md.utils.escapeHtml(tokens[idx].content)}
\n`; } - return '
' + md.utils.escapeHtml(tokens[idx].content) + '
\n'; + return `
${md.utils.escapeHtml(tokens[idx].content)}
\n`; }; function renderContainer(tokens, idx, options, env, self) { tokens[idx].attrJoin('role', 'alert'); tokens[idx].attrJoin('class', 'alert'); - tokens[idx].attrJoin('class', 'alert-' + tokens[idx].info.trim()); + tokens[idx].attrJoin('class', `alert-${tokens[idx].info.trim()}`); addPart(tokens, idx); - return self.renderToken.apply(self, arguments); + return self.renderToken(...arguments); } -var markdownitContainer = require('markdown-it-container'); md.use(markdownitContainer, 'success', { render: renderContainer }); md.use(markdownitContainer, 'info', { render: renderContainer }); md.use(markdownitContainer, 'warning', { render: renderContainer }); @@ -117,18 +113,18 @@ window.syncscroll = true; window.preventSyncScrollToEdit = false; window.preventSyncScrollToView = false; -var editScrollThrottle = 5; -var viewScrollThrottle = 5; -var buildMapThrottle = 100; +const editScrollThrottle = 5; +const viewScrollThrottle = 5; +const buildMapThrottle = 100; -var viewScrolling = false; -var editScrolling = false; +let viewScrolling = false; +let editScrolling = false; -var editArea = null; -var viewArea = null; -var markdownArea = null; +let editArea = null; +let viewArea = null; +let markdownArea = null; -function setupSyncAreas(edit, view, markdown) { +export function setupSyncAreas(edit, view, markdown) { editArea = edit; viewArea = view; markdownArea = markdown; @@ -136,26 +132,24 @@ function setupSyncAreas(edit, view, markdown) { viewArea.on('scroll', _.throttle(syncScrollToEdit, viewScrollThrottle)); } -var scrollMap, lineHeightMap, viewTop, viewBottom; - -window.viewAjaxCallback = clearMap; +let scrollMap, lineHeightMap, viewTop, viewBottom; -function clearMap() { +export function clearMap() { scrollMap = null; lineHeightMap = null; viewTop = null; viewBottom = null; } +window.viewAjaxCallback = clearMap; -var buildMap = _.throttle(buildMapInner, buildMapThrottle); +const buildMap = _.throttle(buildMapInner, buildMapThrottle); // Build offsets for each line (lines can be wrapped) // That's a bit dirty to process each line everytime, but ok for demo. // Optimizations are required only for big texts. function buildMapInner(callback) { if (!viewArea || !markdownArea) return; - var i, offset, nonEmptyList, pos, a, b, _lineHeightMap, linesCount, - acc, _scrollMap; + let i, offset, nonEmptyList, pos, a, b, _lineHeightMap, linesCount, acc, _scrollMap; offset = viewArea.scrollTop() - viewArea.offset().top; _scrollMap = []; @@ -165,10 +159,10 @@ function buildMapInner(callback) { viewBottom = viewArea[0].scrollHeight - viewArea.height(); acc = 0; - var lines = editor.getValue().split('\n'); - var lineHeight = editor.defaultTextHeight(); + const lines = editor.getValue().split('\n'); + const lineHeight = editor.defaultTextHeight(); for (i = 0; i < lines.length; i++) { - var str = lines[i]; + const str = lines[i]; _lineHeightMap.push(acc); @@ -177,7 +171,7 @@ function buildMapInner(callback) { continue; } - var h = editor.heightAtLine(i + 1) - editor.heightAtLine(i); + const h = editor.heightAtLine(i + 1) - editor.heightAtLine(i); acc += Math.round(h / lineHeight); } _lineHeightMap.push(acc); @@ -191,10 +185,10 @@ function buildMapInner(callback) { // make the first line go top _scrollMap[0] = viewTop; - var parts = markdownArea.find('.part').toArray(); + const parts = markdownArea.find('.part').toArray(); for (i = 0; i < parts.length; i++) { - var $el = $(parts[i]), - t = $el.attr('data-startline') - 1; + const $el = $(parts[i]); + let t = $el.attr('data-startline') - 1; if (t === '') { return; } @@ -229,9 +223,9 @@ function buildMapInner(callback) { } // sync view scroll progress to edit -var viewScrollingTimer = null; +let viewScrollingTimer = null; -function syncScrollToEdit(event, preventAnimate) { +export function syncScrollToEdit(event, preventAnimate) { if (currentMode != modeType.both || !syncscroll || !editArea) return; if (preventSyncScrollToEdit) { if (typeof preventSyncScrollToEdit === 'number') { @@ -242,15 +236,15 @@ function syncScrollToEdit(event, preventAnimate) { return; } if (!scrollMap || !lineHeightMap) { - buildMap(function () { + buildMap(() => { syncScrollToEdit(event, preventAnimate); }); return; } if (editScrolling) return; - var scrollTop = viewArea[0].scrollTop; - var lineIndex = 0; + const scrollTop = viewArea[0].scrollTop; + let lineIndex = 0; for (var i = 0, l = scrollMap.length; i < l; i++) { if (scrollMap[i] > scrollTop) { break; @@ -258,8 +252,8 @@ function syncScrollToEdit(event, preventAnimate) { lineIndex = i; } } - var lineNo = 0; - var lineDiff = 0; + let lineNo = 0; + let lineDiff = 0; for (var i = 0, l = lineHeightMap.length; i < l; i++) { if (lineHeightMap[i] > lineIndex) { break; @@ -269,14 +263,14 @@ function syncScrollToEdit(event, preventAnimate) { } } - var posTo = 0; - var topDiffPercent = 0; - var posToNextDiff = 0; - var scrollInfo = editor.getScrollInfo(); - var textHeight = editor.defaultTextHeight(); - var preLastLineHeight = scrollInfo.height - scrollInfo.clientHeight - textHeight; - var preLastLineNo = Math.round(preLastLineHeight / textHeight); - var preLastLinePos = scrollMap[preLastLineNo]; + let posTo = 0; + let topDiffPercent = 0; + let posToNextDiff = 0; + const scrollInfo = editor.getScrollInfo(); + const textHeight = editor.defaultTextHeight(); + const preLastLineHeight = scrollInfo.height - scrollInfo.clientHeight - textHeight; + const preLastLineNo = Math.round(preLastLineHeight / textHeight); + const preLastLinePos = scrollMap[preLastLineNo]; if (scrollInfo.height > scrollInfo.clientHeight && scrollTop >= preLastLinePos) { posTo = preLastLineHeight; @@ -293,7 +287,7 @@ function syncScrollToEdit(event, preventAnimate) { if (preventAnimate) { editArea.scrollTop(posTo); } else { - var posDiff = Math.abs(scrollInfo.top - posTo); + const posDiff = Math.abs(scrollInfo.top - posTo); var duration = posDiff / 50; duration = duration >= 100 ? duration : 100; editArea.stop(true, true).animate({ @@ -311,9 +305,9 @@ function viewScrollingTimeoutInner() { } // sync edit scroll progress to view -var editScrollingTimer = null; +let editScrollingTimer = null; -function syncScrollToView(event, preventAnimate) { +export function syncScrollToView(event, preventAnimate) { if (currentMode != modeType.both || !syncscroll || !viewArea) return; if (preventSyncScrollToView) { if (typeof preventSyncScrollToView === 'number') { @@ -324,20 +318,20 @@ function syncScrollToView(event, preventAnimate) { return; } if (!scrollMap || !lineHeightMap) { - buildMap(function () { + buildMap(() => { syncScrollToView(event, preventAnimate); }); return; } if (viewScrolling) return; - var lineNo, posTo; - var topDiffPercent, posToNextDiff; - var scrollInfo = editor.getScrollInfo(); - var textHeight = editor.defaultTextHeight(); + let lineNo, posTo; + let topDiffPercent, posToNextDiff; + const scrollInfo = editor.getScrollInfo(); + const textHeight = editor.defaultTextHeight(); lineNo = Math.floor(scrollInfo.top / textHeight); // if reach the last line, will start lerp to the bottom - var diffToBottom = (scrollInfo.top + scrollInfo.clientHeight) - (scrollInfo.height - textHeight); + const diffToBottom = (scrollInfo.top + scrollInfo.clientHeight) - (scrollInfo.height - textHeight); if (scrollInfo.height > scrollInfo.clientHeight && diffToBottom > 0) { topDiffPercent = diffToBottom / textHeight; posTo = scrollMap[lineNo + 1]; @@ -353,7 +347,7 @@ function syncScrollToView(event, preventAnimate) { if (preventAnimate) { viewArea.scrollTop(posTo); } else { - var posDiff = Math.abs(viewArea.scrollTop() - posTo); + const posDiff = Math.abs(viewArea.scrollTop() - posTo); var duration = posDiff / 50; duration = duration >= 100 ? duration : 100; viewArea.stop(true, true).animate({ @@ -369,10 +363,3 @@ function syncScrollToView(event, preventAnimate) { function editScrollingTimeoutInner() { editScrolling = false; } - -module.exports = { - setupSyncAreas: setupSyncAreas, - clearMap: clearMap, - syncScrollToEdit: syncScrollToEdit, - syncScrollToView: syncScrollToView -}; -- cgit v1.2.3