Skip to content

Commit

Permalink
Merge pull request anru#11 from mjumbewu/master
Browse files Browse the repository at this point in the history
Synchronize the scroll positions between the editor and preview panes
  • Loading branch information
anru committed Feb 7, 2012
2 parents 9229b49 + f46ff7b commit dd3fa49
Showing 1 changed file with 42 additions and 2 deletions.
44 changes: 42 additions & 2 deletions static/scripts/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function setPreviewHtml(html) {
doc.writeln(html);
doc.close();
var body = doc.body;

var titleText = null;
var headElem = $('h1', body)[0] || $('h2', body)[0] || $('h3', body)[0] || $('h4', body)[0] || $('h5', body)[0] || $('p', body)[0];
if (headElem) {
Expand All @@ -52,6 +52,43 @@ function setPreviewHtml(html) {
}
}

function getScrollHeight($prevFrame) {
// Different browsers attach the scrollHeight of a document to different
// elements, so handle that here.
if ($prevFrame[0].scrollHeight !== undefined) {
return $prevFrame[0].scrollHeight;
} else if ($prevFrame.find('html')[0].scrollHeight !== undefined &&
$prevFrame.find('html')[0].scrollHeight !== 0) {
return $prevFrame.find('html')[0].scrollHeight;
} else {
return $prevFrame.find('body')[0].scrollHeight;
}
}

/**
* syncScrollPosition
*
* Synchronize the scroll positions between the editor and preview panes.
* Specifically, this function will match the percentages that each pane is
* scrolled (i.e., if one is scrolled 25% of its total scroll height, the
* other will be too).
*/
function syncScrollPosition() {
var $ed = $('textarea#editor');
var $prev = $('#browse');

var editorScrollRange = ($ed[0].scrollHeight - $ed.innerHeight());
var previewScrollRange = (getScrollHeight($prev.contents()) - $prev.innerHeight());

// Find how far along the editor is (0 means it is scrolled to the top, 1
// means it is at the bottom).
var scrollFactor = $ed.scrollTop() / editorScrollRange;

// Set the scroll position of the preview pane to match. jQuery will
// gracefully handle out-of-bounds values.
$prev.contents().scrollTop(scrollFactor * previewScrollRange);
}

var activeXhr = null;
var lastContent = null;

Expand All @@ -72,6 +109,7 @@ function genPreview() {
},
'success': function(response) {
setPreviewHtml(response);
syncScrollPosition();
activeXhr = null;
}
});
Expand All @@ -96,7 +134,7 @@ function adjustBrowse() {

$(function() {
//$('<button>Conver!</button>').click(genPreview).appendTo($('body'));

window.baseTitle = $('head title').text();

$('textarea#editor').bind('change', genPreview).markItUp(mySettings);
Expand All @@ -105,6 +143,8 @@ $(function() {
$('#editor-td > div').css({'width': '100%', 'height': '96%'});
}, 200);

$('textarea#editor').scroll(syncScrollPosition);

$('.themes input').bind('change', function() {
lastContent = null;
genPreview();
Expand Down

0 comments on commit dd3fa49

Please sign in to comment.