Commit f1fcd168 authored by Joas Souza's avatar Joas Souza Committed by Luiza Pagliari
Browse files

Add settings to scroll on edition out of viewport (#3282)

* Add scroll when it edits a line out of viewport

By default, when there is an edition of a line, which is out of the
viewport, Etherpad scrolls the minimum necessary to make this line
visible. This makes that the line stays either on the top or the bottom
of the viewport. With this commit, we add a setting to make possible to
scroll to a position x% pixels from the viewport. Besides of that, we
add a setting to make an animation of this scroll.
If nothing is changed on settings.json the Etherpad default behavior is
kept
parent 291f7003
......@@ -150,6 +150,34 @@
/* Time (in seconds) to automatically reconnect pad when a "Force reconnect"
message is shown to user. Set to 0 to disable automatic reconnection */
"automaticReconnectionTimeout" : 0,
/*
* By default, when caret is moved out of viewport, it scrolls the minimum height needed to make this
* line visible.
*/
"scrollWhenFocusLineIsOutOfViewport": {
/*
* Percentage of viewport height to be additionally scrolled.
* E.g use "percentage.editionAboveViewport": 0.5, to place caret line in the
* middle of viewport, when user edits a line above of the viewport
* Set to 0 to disable extra scrolling
*/
"percentage": {
"editionAboveViewport": 0,
"editionBelowViewport": 0
},
/* Time (in milliseconds) used to animate the scroll transition. Set to 0 to disable animation */
"duration": 0,
/*
* Flag to control if it should scroll when user places the caret in the last line of the viewport
*/
"scrollWhenCaretIsInTheLastLineOfViewport": false,
/*
* Percentage of viewport height to be additionally scrolled when user presses arrow up
* in the line of the top of the viewport.
* Set to 0 to let the scroll to be handled as default by the Etherpad
*/
"percentageToScrollWhenUserPressesArrowUp": 0
},
/* Users for basic authentication. is_admin = true gives access to /admin.
If you do not uncomment this, /admin will not be available! */
......
......@@ -1216,6 +1216,15 @@ function handleClientReady(client, message)
"parts": plugins.parts,
},
"indentationOnNewLine": settings.indentationOnNewLine,
"scrollWhenFocusLineIsOutOfViewport": {
"percentage" : {
"editionAboveViewport": settings.scrollWhenFocusLineIsOutOfViewport.percentage.editionAboveViewport,
"editionBelowViewport": settings.scrollWhenFocusLineIsOutOfViewport.percentage.editionBelowViewport,
},
"duration": settings.scrollWhenFocusLineIsOutOfViewport.duration,
"scrollWhenCaretIsInTheLastLineOfViewport": settings.scrollWhenFocusLineIsOutOfViewport.scrollWhenCaretIsInTheLastLineOfViewport,
"percentageToScrollWhenUserPressesArrowUp": settings.scrollWhenFocusLineIsOutOfViewport.percentageToScrollWhenUserPressesArrowUp,
},
"initialChangesets": [] // FIXME: REMOVE THIS SHIT
}
......
......@@ -247,6 +247,33 @@ exports.users = {};
*/
exports.showSettingsInAdminPage = true;
/*
* By default, when caret is moved out of viewport, it scrolls the minimum height needed to make this
* line visible.
*/
exports.scrollWhenFocusLineIsOutOfViewport = {
/*
* Percentage of viewport height to be additionally scrolled.
*/
"percentage": {
"editionAboveViewport": 0,
"editionBelowViewport": 0
},
/*
* Time (in milliseconds) used to animate the scroll transition. Set to 0 to disable animation
*/
"duration": 0,
/*
* Flag to control if it should scroll when user places the caret in the last line of the viewport
*/
/*
* Percentage of viewport height to be additionally scrolled when user presses arrow up
* in the line of the top of the viewport.
*/
"percentageToScrollWhenUserPressesArrowUp": 0,
"scrollWhenCaretIsInTheLastLineOfViewport": false
};
//checks if abiword is avaiable
exports.abiwordAvailable = function()
{
......
......@@ -20,7 +20,6 @@
* limitations under the License.
*/
var _, $, jQuery, plugins, Ace2Common;
var browser = require('./browser');
if(browser.msie){
// Honestly fuck IE royally.
......@@ -61,6 +60,7 @@ function Ace2Inner(){
var SkipList = require('./skiplist');
var undoModule = require('./undomodule').undoModule;
var AttributeManager = require('./AttributeManager');
var Scroll = require('./scroll');
var DEBUG = false; //$$ build script replaces the string "var DEBUG=true;//$$" with "var DEBUG=false;"
// changed to false
......@@ -82,6 +82,7 @@ function Ace2Inner(){
var disposed = false;
var editorInfo = parent.editorInfo;
var iframe = window.frameElement;
var outerWin = iframe.ace_outerWin;
iframe.ace_outerWin = null; // prevent IE 6 memory leak
......@@ -89,6 +90,8 @@ function Ace2Inner(){
var lineMetricsDiv = sideDiv.nextSibling;
initLineNumbers();
var scroll = Scroll.init(outerWin);
var outsideKeyDown = noop;
var outsideKeyPress = function(){return true;};
......@@ -424,7 +427,7 @@ function Ace2Inner(){
var undoWorked = false;
try
{
if (evt.eventType == "setup" || evt.eventType == "importText" || evt.eventType == "setBaseText")
if (isPadLoading(evt.eventType))
{
undoModule.clearHistory();
}
......@@ -1208,7 +1211,7 @@ function Ace2Inner(){
updateLineNumbers(); // update line numbers if any time left
if (isTimeUp()) return;
var visibleRange = getVisibleCharRange();
var visibleRange = scroll.getVisibleCharRange(rep);
var docRange = [0, rep.lines.totalWidth()];
//console.log("%o %o", docRange, visibleRange);
finishedImportantWork = true;
......@@ -1670,7 +1673,7 @@ function Ace2Inner(){
});
//p.mark("relex");
//rep.lexer.lexCharRange(getVisibleCharRange(), function() { return false; });
//rep.lexer.lexCharRange(scroll.getVisibleCharRange(rep), function() { return false; });
//var isTimeUp = newTimeLimit(100);
// do DOM inserts
p.mark("insert");
......@@ -2914,6 +2917,15 @@ function Ace2Inner(){
documentAttributeManager: documentAttributeManager,
});
// we scroll when user places the caret at the last line of the pad
// when this settings is enabled
var docTextChanged = currentCallStack.docTextChanged;
if(!docTextChanged){
var isScrollableEvent = !isPadLoading(currentCallStack.type) && isScrollableEditEvent(currentCallStack.type);
var innerHeight = getInnerHeight();
scroll.scrollWhenCaretIsInTheLastLineOfViewportWhenNecessary(rep, isScrollableEvent, innerHeight);
}
return true;
//console.log("selStart: %o, selEnd: %o, focusAtStart: %s", rep.selStart, rep.selEnd,
//String(!!rep.selFocusAtStart));
......@@ -2922,6 +2934,11 @@ function Ace2Inner(){
//console.log("%o %o %s", rep.selStart, rep.selEnd, rep.selFocusAtStart);
}
function isPadLoading(eventType)
{
return (eventType === 'setup') || (eventType === 'setBaseText') || (eventType === 'importText');
}
function doCreateDomLine(nonEmpty)
{
if (browser.msie && (!nonEmpty))
......@@ -3277,50 +3294,36 @@ function Ace2Inner(){
return false;
}
function getLineEntryTopBottom(entry, destObj)
{
var dom = entry.lineNode;
var top = dom.offsetTop;
var height = dom.offsetHeight;
var obj = (destObj || {});
obj.top = top;
obj.bottom = (top + height);
return obj;
}
function getViewPortTopBottom()
{
var theTop = getScrollY();
var theTop = scroll.getScrollY();
var doc = outerWin.document;
var height = doc.documentElement.clientHeight;
var height = doc.documentElement.clientHeight; // includes padding
// we have to get the exactly height of the viewport. So it has to subtract all the values which changes
// the viewport height (E.g. padding, position top)
var viewportExtraSpacesAndPosition = getEditorPositionTop() + getPaddingTopAddedWhenPageViewIsEnable();
return {
top: theTop,
bottom: (theTop + height)
bottom: (theTop + height - viewportExtraSpacesAndPosition)
};
}
function getVisibleLineRange()
function getEditorPositionTop()
{
var viewport = getViewPortTopBottom();
//console.log("viewport top/bottom: %o", viewport);
var obj = {};
var start = rep.lines.search(function(e)
{
return getLineEntryTopBottom(e, obj).bottom > viewport.top;
});
var end = rep.lines.search(function(e)
{
return getLineEntryTopBottom(e, obj).top >= viewport.bottom;
});
if (end < start) end = start; // unlikely
//console.log(start+","+end);
return [start, end];
var editor = parent.document.getElementsByTagName('iframe');
var editorPositionTop = editor[0].offsetTop;
return editorPositionTop;
}
function getVisibleCharRange()
// ep_page_view adds padding-top, which makes the viewport smaller
function getPaddingTopAddedWhenPageViewIsEnable()
{
var lineRange = getVisibleLineRange();
return [rep.lines.offsetOfIndex(lineRange[0]), rep.lines.offsetOfIndex(lineRange[1])];
var rootDocument = parent.parent.document;
var aceOuter = rootDocument.getElementsByName("ace_outer");
var aceOuterPaddingTop = parseInt($(aceOuter).css("padding-top"));
return aceOuterPaddingTop;
}
function handleCut(evt)
......@@ -3966,12 +3969,12 @@ function Ace2Inner(){
doDeleteKey();
specialHandled = true;
}
if((evt.which == 36 && evt.ctrlKey == true) && padShortcutEnabled.ctrlHome){ setScrollY(0); } // Control Home send to Y = 0
if((evt.which == 36 && evt.ctrlKey == true) && padShortcutEnabled.ctrlHome){ scroll.setScrollY(0); } // Control Home send to Y = 0
if((evt.which == 33 || evt.which == 34) && type == 'keydown' && !evt.ctrlKey){
evt.preventDefault(); // This is required, browsers will try to do normal default behavior on page up / down and the default behavior SUCKS
var oldVisibleLineRange = getVisibleLineRange();
var oldVisibleLineRange = scroll.getVisibleLineRange(rep);
var topOffset = rep.selStart[0] - oldVisibleLineRange[0];
if(topOffset < 0 ){
topOffset = 0;
......@@ -3981,7 +3984,7 @@ function Ace2Inner(){
var isPageUp = evt.which === 33;
scheduler.setTimeout(function(){
var newVisibleLineRange = getVisibleLineRange(); // the visible lines IE 1,10
var newVisibleLineRange = scroll.getVisibleLineRange(rep); // the visible lines IE 1,10
var linesCount = rep.lines.length(); // total count of lines in pad IE 10
var numberOfLinesInViewport = newVisibleLineRange[1] - newVisibleLineRange[0]; // How many lines are in the viewport right now?
......@@ -4014,56 +4017,26 @@ function Ace2Inner(){
// sometimes the first selection is -1 which causes problems (Especially with ep_page_view)
// so use focusNode.offsetTop value.
if(caretOffsetTop === -1) caretOffsetTop = myselection.focusNode.offsetTop;
setScrollY(caretOffsetTop); // set the scrollY offset of the viewport on the document
scroll.setScrollY(caretOffsetTop); // set the scrollY offset of the viewport on the document
}, 200);
}
/* Attempt to apply some sanity to cursor handling in Chrome after a copy / paste event
We have to do this the way we do because rep. doesn't hold the value for keyheld events IE if the user
presses and holds the arrow key .. Sorry if this is ugly, blame Chrome's weird handling of viewports after new content is added*/
if((evt.which == 37 || evt.which == 38 || evt.which == 39 || evt.which == 40) && browser.chrome){
var viewport = getViewPortTopBottom();
var myselection = document.getSelection(); // get the current caret selection, can't use rep. here because that only gives us the start position not the current
var caretOffsetTop = myselection.focusNode.parentNode.offsetTop || myselection.focusNode.offsetTop; // get the carets selection offset in px IE 214
var lineHeight = $(myselection.focusNode.parentNode).parent("div").height(); // get the line height of the caret line
// top.console.log("offsetTop", myselection.focusNode.parentNode.parentNode.offsetTop);
try {
lineHeight = $(myselection.focusNode).height() // needed for how chrome handles line heights of null objects
// console.log("lineHeight now", lineHeight);
}catch(e){}
var caretOffsetTopBottom = caretOffsetTop + lineHeight;
var visibleLineRange = getVisibleLineRange(); // the visible lines IE 1,10
if(caretOffsetTop){ // sometimes caretOffsetTop bugs out and returns 0, not sure why, possible Chrome bug? Either way if it does we don't wanna mess with it
// top.console.log(caretOffsetTop, viewport.top, caretOffsetTopBottom, viewport.bottom);
var caretIsNotVisible = (caretOffsetTop < viewport.top || caretOffsetTopBottom >= viewport.bottom); // Is the Caret Visible to the user?
// Expect some weird behavior caretOffsetTopBottom is greater than viewport.bottom on a keypress down
var offsetTopSamePlace = caretOffsetTop == viewport.top; // sometimes moving key left & up leaves the caret at the same point as the viewport.top, technically the caret is visible but it's not fully visible so we should move to it
if(offsetTopSamePlace && (evt.which == 37 || evt.which == 38)){
var newY = caretOffsetTop;
setScrollY(newY);
}
if(caretIsNotVisible){ // is the cursor no longer visible to the user?
// top.console.log("Caret is NOT visible to the user");
// top.console.log(caretOffsetTop,viewport.top,caretOffsetTopBottom,viewport.bottom);
// Oh boy the caret is out of the visible area, I need to scroll the browser window to lineNum.
if(evt.which == 37 || evt.which == 38){ // If left or up arrow
var newY = caretOffsetTop; // That was easy!
}
if(evt.which == 39 || evt.which == 40){ // if down or right arrow
// only move the viewport if we're at the bottom of the viewport, if we hit down any other time the viewport shouldn't change
// NOTE: This behavior only fires if Chrome decides to break the page layout after a paste, it's annoying but nothing I can do
var selection = getSelection();
// top.console.log("line #", rep.selStart[0]); // the line our caret is on
// top.console.log("firstvisible", visibleLineRange[0]); // the first visiblel ine
// top.console.log("lastVisible", visibleLineRange[1]); // the last visible line
// top.console.log(rep.selStart[0], visibleLineRange[1], rep.selStart[0], visibleLineRange[0]);
var newY = viewport.top + lineHeight;
}
if(newY){
setScrollY(newY); // set the scrollY offset of the viewport on the document
}
// scroll to viewport when user presses arrow keys and caret is out of the viewport
if((evt.which == 37 || evt.which == 38 || evt.which == 39 || evt.which == 40)){
// we use arrowKeyWasReleased to avoid triggering the animation when a key is continuously pressed
// this makes the scroll smooth
if(!continuouslyPressingArrowKey(type)){
// We use getSelection() instead of rep to get the caret position. This avoids errors like when
// the caret position is not synchronized with the rep. For example, when an user presses arrow
// down to scroll the pad without releasing the key. When the key is released the rep is not
// synchronized, so we don't get the right node where caret is.
var selection = getSelection();
if(selection){
var arrowUp = evt.which === 38;
var innerHeight = getInnerHeight();
scroll.scrollWhenPressArrowKeys(arrowUp, rep, innerHeight);
}
}
}
......@@ -4121,6 +4094,19 @@ function Ace2Inner(){
var thisKeyDoesntTriggerNormalize = false;
var arrowKeyWasReleased = true;
function continuouslyPressingArrowKey(type) {
var firstTimeKeyIsContinuouslyPressed = false;
if (type == 'keyup') arrowKeyWasReleased = true;
else if (type == 'keydown' && arrowKeyWasReleased) {
firstTimeKeyIsContinuouslyPressed = true;
arrowKeyWasReleased = false;
}
return !firstTimeKeyIsContinuouslyPressed;
}
function doUndoRedo(which)
{
// precond: normalized DOM
......@@ -4837,9 +4823,6 @@ function Ace2Inner(){
setIfNecessary(root.style, "height", "");
}
}
// if near edge, scroll to edge
var scrollX = getScrollX();
var scrollY = getScrollY();
var win = outerWin;
var r = 20;
......@@ -4848,52 +4831,6 @@ function Ace2Inner(){
$(sideDiv).addClass('sidedivdelayed');
}
function getScrollXY()
{
var win = outerWin;
var odoc = outerWin.document;
if (typeof(win.pageYOffset) == "number")
{
return {
x: win.pageXOffset,
y: win.pageYOffset
};
}
var docel = odoc.documentElement;
if (docel && typeof(docel.scrollTop) == "number")
{
return {
x: docel.scrollLeft,
y: docel.scrollTop
};
}
}
function getScrollX()
{
return getScrollXY().x;
}
function getScrollY()
{
return getScrollXY().y;
}
function setScrollX(x)
{
outerWin.scrollTo(x, getScrollY());
}
function setScrollY(y)
{
outerWin.scrollTo(getScrollX(), y);
}
function setScrollXY(x, y)
{
outerWin.scrollTo(x, y);
}
var _teardownActions = [];
function teardown()
......@@ -5214,26 +5151,6 @@ function Ace2Inner(){
return odoc.documentElement.clientWidth;
}
function scrollNodeVerticallyIntoView(node)
{
// requires element (non-text) node;
// if node extends above top of viewport or below bottom of viewport (or top of scrollbar),
// scroll it the minimum distance needed to be completely in view.
var win = outerWin;
var odoc = outerWin.document;
var distBelowTop = node.offsetTop + iframePadTop - win.scrollY;
var distAboveBottom = win.scrollY + getInnerHeight() - (node.offsetTop + iframePadTop + node.offsetHeight);
if (distBelowTop < 0)
{
win.scrollBy(0, distBelowTop);
}
else if (distAboveBottom < 0)
{
win.scrollBy(0, -distAboveBottom);
}
}
function scrollXHorizontallyIntoView(pixelX)
{
var win = outerWin;
......@@ -5255,8 +5172,8 @@ function Ace2Inner(){
{
if (!rep.selStart) return;
fixView();
var focusLine = (rep.selFocusAtStart ? rep.selStart[0] : rep.selEnd[0]);
scrollNodeVerticallyIntoView(rep.lines.atIndex(focusLine).lineNode);
var innerHeight = getInnerHeight();
scroll.scrollNodeVerticallyIntoView(rep, innerHeight);
if (!doesWrap)
{
var browserSelection = getSelection();
......
// One rep.line(div) can be broken in more than one line in the browser.
// This function is useful to get the caret position of the line as
// is represented by the browser
exports.getPosition = function ()
{
var rect, line;
var editor = $('#innerdocbody')[0];
var range = getSelectionRange();
var isSelectionInsideTheEditor = range && $(range.endContainer).closest('body')[0].id === 'innerdocbody';
if(isSelectionInsideTheEditor){
// when we have the caret in an empty line, e.g. a line with only a <br>,
// getBoundingClientRect() returns all dimensions value as 0
var selectionIsInTheBeginningOfLine = range.endOffset > 0;
if (selectionIsInTheBeginningOfLine) {
var clonedRange = createSelectionRange(range);
line = getPositionOfElementOrSelection(clonedRange);
clonedRange.detach()
}
// when there's a <br> or any element that has no height, we can't get
// the dimension of the element where the caret is
if(!rect || rect.height === 0){
var clonedRange = createSelectionRange(range);
// as we can't get the element height, we create a text node to get the dimensions
// on the position
var shadowCaret = $(document.createTextNode("|"));
clonedRange.insertNode(shadowCaret[0]);
clonedRange.selectNode(shadowCaret[0]);
line = getPositionOfElementOrSelection(clonedRange);
clonedRange.detach()
shadowCaret.remove();
}
}
return line;
}
var createSelectionRange = function (range) {
clonedRange = range.cloneRange();
// we set the selection start and end to avoid error when user selects a text bigger than
// the viewport height and uses the arrow keys to expand the selection. In this particular
// case is necessary to know where the selections ends because both edges of the selection
// is out of the viewport but we only use the end of it to calculate if it needs to scroll
clonedRange.setStart(range.endContainer, range.endOffset);
clonedRange.setEnd(range.endContainer, range.endOffset);
return clonedRange;
}
var getPositionOfRepLineAtOffset = function (node, offset) {
// it is not a text node, so we cannot make a selection
if (node.tagName === 'BR' || node.tagName === 'EMPTY') {
return getPositionOfElementOrSelection(node);
}
while (node.length === 0 && node.nextSibling) {
node = node.nextSibling;
}
var newRange = new Range();
newRange.setStart(node, offset);
newRange.setEnd(node, offset);
var linePosition = getPositionOfElementOrSelection(newRange);
newRange.detach(); // performance sake
return linePosition;
}
function getPositionOfElementOrSelection(element) {
var rect = element.getBoundingClientRect();
var linePosition = {
bottom: rect.bottom,
height: rect.height,
top: rect.top
}
return linePosition;
}
// here we have two possibilities:
// [1] the line before the caret line has the same type, so both of them has the same margin, padding
// height, etc. So, we can use the caret line to make calculation necessary to know where is the top
// of the previous line
// [2] the line before is part of another rep line. It's possible this line has different margins
// height. So we have to get the exactly position of the line
exports.getPositionTopOfPreviousBrowserLine = function(caretLinePosition, rep) {
var previousLineTop = caretLinePosition.top - caretLinePosition.height; // [1]
var isCaretLineFirstBrowserLine = caretLineIsFirstBrowserLine(caretLinePosition.top, rep);
// the caret is in the beginning of a rep line, so the previous browser line
// is the last line browser line of the a rep line
if (isCaretLineFirstBrowserLine) { //[2]
var lineBeforeCaretLine = rep.selStart[0] - 1;
var firstLineVisibleBeforeCaretLine = getPreviousVisibleLine(lineBeforeCaretLine, rep);
var linePosition = getDimensionOfLastBrowserLineOfRepLine(firstLineVisibleBeforeCaretLine, rep);
previousLineTop = linePosition.top;
}
return previousLineTop;
}
function caretLineIsFirstBrowserLine(caretLineTop, rep)
{
var caretRepLine = rep.selStart[0];
var lineNode = rep.lines.atIndex(caretRepLine).lineNode;
var firstRootNode = getFirstRootChildNode(lineNode);
// to get the position of the node we get the position of the first char
var positionOfFirstRootNode = getPositionOfRepLineAtOffset(firstRootNode, 1);
return positionOfFirstRootNode.top === caretLineTop;
}
// find the first root node, usually it is a text node
function getFirstRootChildNode(node)
{
if(!node.firstChild){
return node;
}else{
return getFirstRootChildNode(node.firstChild);
}
}
function getPreviousVisibleLine(line, rep)
{
if (line < 0) {
return 0;
}else if (isLineVisible(line, rep)) {
return line;
}else{
return getPreviousVisibleLine(line - 1, rep);
}
}
function getDimensionOfLastBrowserLineOfRepLine(line, rep)
{
var lineNode = rep.lines.atIndex(line).lineNode;
var lastRootChildNode = getLastRootChildNode(lineNode);
// we get the position of the line in the last char of it
var lastRootChildNodePosition = getPositionOfRepLineAtOffset(lastRootChildNode.node, lastRootChildNode.length);
return lastRootChildNodePosition;
}
function getLastRootChildNode(node)
{
if(!node.lastChild){
return {
node: node,
length: node.length
};
}else{
return getLastRootChildNode(node.lastChild);
}
}