github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-28 19:06:39 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Added basic markdown scroll syncing

Browse Source
This commit is contained in:
Dan Brown
2016-05-28 13:24:07 +01:00
parent 9d3f329bc9
commit f602b088ac
2 changed files with 39 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
resources/assets/js/directives.js
View File

@ -265,17 +265,48 @@ module.exports = function (ngApp, events) {
link: function (scope, element, attrs) {
// Elements
var input = element.find('textarea[markdown-input]');
var insertImage = element.find('button[data-action="insertImage"]');
const input = element.find('textarea[markdown-input]');
const display = element.find('.markdown-display').first();
const insertImage = element.find('button[data-action="insertImage"]');
var currentCaretPos = 0;
let currentCaretPos = 0;
input.blur((event) => {
input.blur(event => {
currentCaretPos = input[0].selectionStart;
});
// Scroll sync
let inputScrollHeight,
inputHeight,
displayScrollHeight,
displayHeight;
function setScrollHeights() {
inputScrollHeight = input[0].scrollHeight;
inputHeight = input.height();
displayScrollHeight = display[0].scrollHeight;
displayHeight = display.height();
}
setTimeout(() => {
setScrollHeights();
}, 200);
window.addEventListener('resize', setScrollHeights);
let scrollDebounceTime = 800;
let lastScroll = 0;
input.on('scroll', event => {
let now = Date.now();
if (now - lastScroll > scrollDebounceTime) {
setScrollHeights()
}
let scrollPercent = (input.scrollTop() / (inputScrollHeight-inputHeight));
let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
display.scrollTop(displayScrollY);
lastScroll = now;
});
// Insert image shortcut
input.keydown((event) => {
input.keydown(event => {
if (event.which === 73 && event.ctrlKey && event.shiftKey) {
event.preventDefault();
var caretPos = input[0].selectionStart;
@ -289,8 +320,8 @@ module.exports = function (ngApp, events) {
});
// Insert image from image manager
insertImage.click((event) => {
window.ImageManager.showExternal((image) => {
insertImage.click(event => {
window.ImageManager.showExternal(image => {
var caretPos = currentCaretPos;
var currentContent = input.val();
var mdImageText = "![" + image.name + "](" + image.url + ")";