mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-22 08:26:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 26

working page down and semi working page up

Browse source
This commit is contained in:
John McLear 2020-12-28 09:12:45 +00:00
parent d6075bd042
commit 0253b54803
4 changed files with 24 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

0
src/static/js/= Normal file
View file

8
src/static/js/ace2_inner.js
View file

@ -3071,8 +3071,8 @@ function Ace2Inner() {
if (isPageDown) { if (isPageDown) {
// go to the bottom of the last visible content // go to the bottom of the last visible content
rep.selStart[0] += visibleLineRange[1]; rep.selStart[0] += visibleLineRange[1] - 1;
rep.selEnd[0] += visibleLineRange[1]; rep.selEnd[0] += visibleLineRange[1] - 1;
// if the new rep is beyond the viewport, put the caret on the last line // if the new rep is beyond the viewport, put the caret on the last line
if (rep.selStart[0] > linesLength) { if (rep.selStart[0] > linesLength) {
rep.selStart = [linesLength - 1, 0]; rep.selStart = [linesLength - 1, 0];
@ -3082,7 +3082,9 @@ function Ace2Inner() {
} }
updateBrowserSelectionFromRep(); // works updateBrowserSelectionFromRep(); // works
scroll.scrollNodeVerticallyIntoView(); // TODO: always slightly off... scroll.scrollNodeVerticallyIntoView(null, null, isPageUp, isPageDown);
// TODO: always slightly off...
// TODO: if enough content is visible below show all of that content
} }
// scroll to viewport when user presses arrow keys and caret is out of the viewport // scroll to viewport when user presses arrow keys and caret is out of the viewport

27
src/static/js/scroll.js
View file

@ -273,24 +273,35 @@ Scroll.prototype._triggerScrollWithAnimation =
// needed to be completely in view. If the value is greater than 0 and less than or equal to 1, // needed to be completely in view. If the value is greater than 0 and less than or equal to 1,
// besides of scrolling the minimum needed to be visible, it scrolls additionally // besides of scrolling the minimum needed to be visible, it scrolls additionally
// (viewport height * scrollAmountWhenFocusLineIsOutOfViewport) pixels // (viewport height * scrollAmountWhenFocusLineIsOutOfViewport) pixels
Scroll.prototype.scrollNodeVerticallyIntoView = function (rep, innerHeight) { Scroll.prototype.scrollNodeVerticallyIntoView = function (rep, innerHeight, isPageUp, isPageDown) {
const viewport = this._getViewPortTopBottom(); const viewport = this._getViewPortTopBottom();
// when the selection changes outside of the viewport the browser automatically scrolls the line // when the selection changes outside of the viewport the browser automatically scrolls the line
// to inside of the viewport. Tested on IE, Firefox, Chrome in releases from 2015 until now // to inside of the viewport. Tested on IE, Firefox, Chrome in releases from 2015 until now
// So, when the line scrolled gets outside of the viewport we let the browser handle it. // So, when the line scrolled gets outside of the viewport we let the browser handle it.
const linePosition = caretPosition.getPosition(); const linePosition = caretPosition.getPosition();
if (linePosition) {
// top.console.log('linepos', linePosition); if (isPageUp) {
// redraw entire page into view putting rep.selStart[0] at top left
const distanceOfTopOfViewport = linePosition.top - viewport.top; const distanceOfTopOfViewport = linePosition.top - viewport.top;
// TODO: Replace the below hack with the current caret location line height const pixelsToScroll =
const HACK = 20; distanceOfTopOfViewport - this._getPixelsRelativeToPercentageOfViewport(innerHeight, true);
const distanceOfBottomOfViewport = viewport.bottom - linePosition.bottom - HACK; this._scrollYPage(pixelsToScroll);
// guessed value.. The above line needs to know the height of this element! return;
}
if (isPageDown) {
// redraw entire page into view putting rep.selStart[0] at top left
this._scrollYPage(linePosition.top);
return;
}
if (linePosition) {
const distanceOfTopOfViewport = linePosition.top - viewport.top;
const distanceOfBottomOfViewport = viewport.bottom - linePosition.bottom;
const caretIsAboveOfViewport = distanceOfTopOfViewport < 0; const caretIsAboveOfViewport = distanceOfTopOfViewport < 0;
const caretIsBelowOfViewport = distanceOfBottomOfViewport < 0; const caretIsBelowOfViewport = distanceOfBottomOfViewport < 0;
// top.console.log('isbelow', caretIsBelowOfViewport);
if (caretIsAboveOfViewport) { if (caretIsAboveOfViewport) {
const pixelsToScroll = const pixelsToScroll =
distanceOfTopOfViewport - this._getPixelsRelativeToPercentageOfViewport(innerHeight, true); distanceOfTopOfViewport - this._getPixelsRelativeToPercentageOfViewport(innerHeight, true);

0
src/static/js/viewportBottom Normal file
View file