colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added basic markdown scroll syncing

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
Show Stats 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) { link: function (scope, element, attrs) {
// Elements // Elements
var input = element.find('textarea[markdown-input]'); const input = element.find('textarea[markdown-input]');
var insertImage = element.find('button[data-action="insertImage"]'); 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; 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 // Insert image shortcut
input.keydown((event) => { input.keydown(event => {
if (event.which === 73 && event.ctrlKey && event.shiftKey) { if (event.which === 73 && event.ctrlKey && event.shiftKey) {
event.preventDefault(); event.preventDefault();
var caretPos = input[0].selectionStart; var caretPos = input[0].selectionStart;
@ -289,8 +320,8 @@ module.exports = function (ngApp, events) {
}); });
// Insert image from image manager // Insert image from image manager
insertImage.click((event) => { insertImage.click(event => {
window.ImageManager.showExternal((image) => { window.ImageManager.showExternal(image => {
var caretPos = currentCaretPos; var caretPos = currentCaretPos;
var currentContent = input.val(); var currentContent = input.val();
var mdImageText = "![" + image.name + "](" + image.url + ")"; var mdImageText = "![" + image.name + "](" + image.url + ")";

2
resources/views/pages/form.blade.php
View File

@ -61,7 +61,7 @@
<button class="text-button" type="button" data-action="insertImage"><i class="zmdi zmdi-image"></i>Insert Image</button> <button class="text-button" type="button" data-action="insertImage"><i class="zmdi zmdi-image"></i>Insert Image</button>
</div> </div>
</div> </div>
<textarea markdown-input md-change="editorChange" md-model="editContent" name="markdown" rows="5" <textarea markdown-input md-change="editorChange" id="markdown-editor-input" md-model="editContent" name="markdown" rows="5"
@if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea> @if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
</div> </div>