is a line)
- Browser Line = each vertical line. A
can be break into more than one
- browser line.
-*/
-const caretPosition = require('./caretPosition');
-
-function Scroll(outerWin) {
- // scroll settings
- this.scrollSettings = parent.parent.clientVars.scrollWhenFocusLineIsOutOfViewport;
-
- // DOM reference
- this.outerWin = outerWin;
- this.doc = this.outerWin.contentDocument;
- this.rootDocument = parent.parent.document;
-}
-
-Scroll.prototype.scrollWhenCaretIsInTheLastLineOfViewportWhenNecessary =
- function (rep, isScrollableEvent, innerHeight) {
- // are we placing the caret on the line at the bottom of viewport?
- // And if so, do we need to scroll the editor, as defined on the settings.json?
- const shouldScrollWhenCaretIsAtBottomOfViewport =
- this.scrollSettings.scrollWhenCaretIsInTheLastLineOfViewport;
- if (shouldScrollWhenCaretIsAtBottomOfViewport) {
- // avoid scrolling when selection includes multiple lines --
- // user can potentially be selecting more lines
- // than it fits on viewport
- const multipleLinesSelected = rep.selStart[0] !== rep.selEnd[0];
-
- // avoid scrolling when pad loads
- if (isScrollableEvent && !multipleLinesSelected && this._isCaretAtTheBottomOfViewport(rep)) {
- // when scrollWhenFocusLineIsOutOfViewport.percentage is 0, pixelsToScroll is 0
- const pixelsToScroll = this._getPixelsRelativeToPercentageOfViewport(innerHeight);
- this._scrollYPage(pixelsToScroll);
- }
- }
- };
-
-Scroll.prototype.scrollWhenPressArrowKeys = function (arrowUp, rep, innerHeight) {
- // if percentageScrollArrowUp is 0, let the scroll to be handled as default, put the previous
- // rep line on the top of the viewport
- if (this._arrowUpWasPressedInTheFirstLineOfTheViewport(arrowUp, rep)) {
- const pixelsToScroll = this._getPixelsToScrollWhenUserPressesArrowUp(innerHeight);
-
- // by default, the browser scrolls to the middle of the viewport. To avoid the twist made
- // when we apply a second scroll, we made it immediately (without animation)
- this._scrollYPageWithoutAnimation(-pixelsToScroll);
- } else {
- this.scrollNodeVerticallyIntoView(rep, innerHeight);
- }
-};
-
-// Some plugins might set a minimum height to the editor (ex: ep_page_view), so checking
-// if (caretLine() === rep.lines.length() - 1) is not enough. We need to check if there are
-// other lines after caretLine(), and all of them are out of viewport.
-Scroll.prototype._isCaretAtTheBottomOfViewport = function (rep) {
- // computing a line position using getBoundingClientRect() is expensive.
- // (obs: getBoundingClientRect() is called on caretPosition.getPosition())
- // To avoid that, we only call this function when it is possible that the
- // caret is in the bottom of viewport
- const caretLine = rep.selStart[0];
- const lineAfterCaretLine = caretLine + 1;
- const firstLineVisibleAfterCaretLine = caretPosition.getNextVisibleLine(lineAfterCaretLine, rep);
- const caretLineIsPartiallyVisibleOnViewport =
- this._isLinePartiallyVisibleOnViewport(caretLine, rep);
- const lineAfterCaretLineIsPartiallyVisibleOnViewport =
- this._isLinePartiallyVisibleOnViewport(firstLineVisibleAfterCaretLine, rep);
- if (caretLineIsPartiallyVisibleOnViewport || lineAfterCaretLineIsPartiallyVisibleOnViewport) {
- // check if the caret is in the bottom of the viewport
- const caretLinePosition = caretPosition.getPosition();
- const viewportBottom = this._getViewPortTopBottom().bottom;
- const nextLineBottom = caretPosition.getBottomOfNextBrowserLine(caretLinePosition, rep);
- const nextLineIsBelowViewportBottom = nextLineBottom > viewportBottom;
- return nextLineIsBelowViewportBottom;
- }
- return false;
-};
-
-Scroll.prototype._isLinePartiallyVisibleOnViewport = function (lineNumber, rep) {
- const lineNode = rep.lines.atIndex(lineNumber);
- const linePosition = this._getLineEntryTopBottom(lineNode);
- const lineTop = linePosition.top;
- const lineBottom = linePosition.bottom;
- const viewport = this._getViewPortTopBottom();
- const viewportBottom = viewport.bottom;
- const viewportTop = viewport.top;
-
- const topOfLineIsAboveOfViewportBottom = lineTop < viewportBottom;
- const bottomOfLineIsOnOrBelowOfViewportBottom = lineBottom >= viewportBottom;
- const topOfLineIsBelowViewportTop = lineTop >= viewportTop;
- const topOfLineIsAboveViewportBottom = lineTop <= viewportBottom;
- const bottomOfLineIsAboveViewportBottom = lineBottom <= viewportBottom;
- const bottomOfLineIsBelowViewportTop = lineBottom >= viewportTop;
-
- return (topOfLineIsAboveOfViewportBottom && bottomOfLineIsOnOrBelowOfViewportBottom) ||
- (topOfLineIsBelowViewportTop && topOfLineIsAboveViewportBottom) ||
- (bottomOfLineIsAboveViewportBottom && bottomOfLineIsBelowViewportTop);
-};
-
-Scroll.prototype._getViewPortTopBottom = function () {
- const theTop = this.getScrollY();
- const doc = this.doc;
- const 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)
- const viewportExtraSpacesAndPosition =
- this._getEditorPositionTop() + this._getPaddingTopAddedWhenPageViewIsEnable();
- return {
- top: theTop,
- bottom: (theTop + height - viewportExtraSpacesAndPosition),
- };
-};
-
-Scroll.prototype._getEditorPositionTop = function () {
- const editor = parent.document.getElementsByTagName('iframe');
- const editorPositionTop = editor[0].offsetTop;
- return editorPositionTop;
-};
-
-// ep_page_view adds padding-top, which makes the viewport smaller
-Scroll.prototype._getPaddingTopAddedWhenPageViewIsEnable = function () {
- const aceOuter = this.rootDocument.getElementsByName('ace_outer');
- const aceOuterPaddingTop = parseInt($(aceOuter).css('padding-top'));
- return aceOuterPaddingTop;
-};
-
-Scroll.prototype._getScrollXY = function () {
- const win = this.outerWin;
- const odoc = this.doc;
- if (typeof (win.pageYOffset) === 'number') {
- return {
- x: win.pageXOffset,
- y: win.pageYOffset,
- };
- }
- const docel = odoc.documentElement;
- if (docel && typeof (docel.scrollTop) === 'number') {
- return {
- x: docel.scrollLeft,
- y: docel.scrollTop,
- };
- }
-};
-
-Scroll.prototype.getScrollX = function () {
- return this._getScrollXY().x;
-};
-
-Scroll.prototype.getScrollY = function () {
- return this._getScrollXY().y;
-};
-
-Scroll.prototype.setScrollX = function (x) {
- this.outerWin.scrollTo(x, this.getScrollY());
-};
-
-Scroll.prototype.setScrollY = function (y) {
- this.outerWin.scrollTo(this.getScrollX(), y);
-};
-
-Scroll.prototype.setScrollXY = function (x, y) {
- this.outerWin.scrollTo(x, y);
-};
-
-Scroll.prototype._isCaretAtTheTopOfViewport = function (rep) {
- const caretLine = rep.selStart[0];
- const linePrevCaretLine = caretLine - 1;
- const firstLineVisibleBeforeCaretLine =
- caretPosition.getPreviousVisibleLine(linePrevCaretLine, rep);
- const caretLineIsPartiallyVisibleOnViewport =
- this._isLinePartiallyVisibleOnViewport(caretLine, rep);
- const lineBeforeCaretLineIsPartiallyVisibleOnViewport =
- this._isLinePartiallyVisibleOnViewport(firstLineVisibleBeforeCaretLine, rep);
- if (caretLineIsPartiallyVisibleOnViewport || lineBeforeCaretLineIsPartiallyVisibleOnViewport) {
- const caretLinePosition = caretPosition.getPosition(); // get the position of the browser line
- const viewportPosition = this._getViewPortTopBottom();
- const viewportTop = viewportPosition.top;
- const viewportBottom = viewportPosition.bottom;
- const caretLineIsBelowViewportTop = caretLinePosition.bottom >= viewportTop;
- const caretLineIsAboveViewportBottom = caretLinePosition.top < viewportBottom;
- const caretLineIsInsideOfViewport =
- caretLineIsBelowViewportTop && caretLineIsAboveViewportBottom;
- if (caretLineIsInsideOfViewport) {
- const prevLineTop = caretPosition.getPositionTopOfPreviousBrowserLine(caretLinePosition, rep);
- const previousLineIsAboveViewportTop = prevLineTop < viewportTop;
- return previousLineIsAboveViewportTop;
- }
- }
- return false;
-};
-
-// By default, when user makes an edition in a line out of viewport, this line goes
-// to the edge of viewport. This function gets the extra pixels necessary to get the
-// caret line in a position X relative to Y% viewport.
-Scroll.prototype._getPixelsRelativeToPercentageOfViewport =
- function (innerHeight, aboveOfViewport) {
- let pixels = 0;
- const scrollPercentageRelativeToViewport = this._getPercentageToScroll(aboveOfViewport);
- if (scrollPercentageRelativeToViewport > 0 && scrollPercentageRelativeToViewport <= 1) {
- pixels = parseInt(innerHeight * scrollPercentageRelativeToViewport);
- }
- return pixels;
- };
-
-// we use different percentages when change selection. It depends on if it is
-// either above the top or below the bottom of the page
-Scroll.prototype._getPercentageToScroll = function (aboveOfViewport) {
- let percentageToScroll = this.scrollSettings.percentage.editionBelowViewport;
- if (aboveOfViewport) {
- percentageToScroll = this.scrollSettings.percentage.editionAboveViewport;
- }
- return percentageToScroll;
-};
-
-Scroll.prototype._getPixelsToScrollWhenUserPressesArrowUp = function (innerHeight) {
- let pixels = 0;
- const percentageToScrollUp = this.scrollSettings.percentageToScrollWhenUserPressesArrowUp;
- if (percentageToScrollUp > 0 && percentageToScrollUp <= 1) {
- pixels = parseInt(innerHeight * percentageToScrollUp);
- }
- return pixels;
-};
-
-Scroll.prototype._scrollYPage = function (pixelsToScroll) {
- const durationOfAnimationToShowFocusline = this.scrollSettings.duration;
- if (durationOfAnimationToShowFocusline) {
- this._scrollYPageWithAnimation(pixelsToScroll, durationOfAnimationToShowFocusline);
- } else {
- this._scrollYPageWithoutAnimation(pixelsToScroll);
- }
-};
-
-Scroll.prototype._scrollYPageWithoutAnimation = function (pixelsToScroll) {
- this.outerWin.scrollBy(0, pixelsToScroll);
-};
-
-Scroll.prototype._scrollYPageWithAnimation =
- function (pixelsToScroll, durationOfAnimationToShowFocusline) {
- const outerDocBody = this.doc.getElementById('outerdocbody');
-
- // it works on later versions of Chrome
- const $outerDocBody = $(outerDocBody);
- this._triggerScrollWithAnimation(
- $outerDocBody, pixelsToScroll, durationOfAnimationToShowFocusline);
-
- // it works on Firefox and earlier versions of Chrome
- const $outerDocBodyParent = $outerDocBody.parent();
- this._triggerScrollWithAnimation(
- $outerDocBodyParent, pixelsToScroll, durationOfAnimationToShowFocusline);
- };
-
-// using a custom queue and clearing it, we avoid creating a queue of scroll animations.
-// So if this function is called twice quickly, only the last one runs.
-Scroll.prototype._triggerScrollWithAnimation =
- function ($elem, pixelsToScroll, durationOfAnimationToShowFocusline) {
- // clear the queue of animation
- $elem.stop('scrollanimation');
- $elem.animate({
- scrollTop: `+=${pixelsToScroll}`,
- }, {
- duration: durationOfAnimationToShowFocusline,
- queue: 'scrollanimation',
- }).dequeue('scrollanimation');
- };
-
-// scrollAmountWhenFocusLineIsOutOfViewport is set to 0 (default), scroll it the minimum distance
-// 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
-// (viewport height * scrollAmountWhenFocusLineIsOutOfViewport) pixels
-Scroll.prototype.scrollNodeVerticallyIntoView = function (rep, innerHeight) {
- const viewport = this._getViewPortTopBottom();
-
- // 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
- // So, when the line scrolled gets outside of the viewport we let the browser handle it.
- const linePosition = caretPosition.getPosition();
- if (linePosition) {
- const distanceOfTopOfViewport = linePosition.top - viewport.top;
- const distanceOfBottomOfViewport = viewport.bottom - linePosition.bottom - linePosition.height;
- const caretIsAboveOfViewport = distanceOfTopOfViewport < 0;
- const caretIsBelowOfViewport = distanceOfBottomOfViewport < 0;
- if (caretIsAboveOfViewport) {
- const pixelsToScroll =
- distanceOfTopOfViewport - this._getPixelsRelativeToPercentageOfViewport(innerHeight, true);
- this._scrollYPage(pixelsToScroll);
- } else if (caretIsBelowOfViewport) {
- // setTimeout is required here as line might not be fully rendered onto the pad
- setTimeout(() => {
- const outer = window.parent;
- // scroll to the very end of the pad outer
- outer.scrollTo(0, outer[0].innerHeight);
- }, 150);
- // if the above setTimeout and functionality is removed then hitting an enter
- // key while on the last line wont be an optimal user experience
- // Details at: https://github.com/ether/etherpad-lite/pull/4639/files
- }
- }
-};
-
-Scroll.prototype._partOfRepLineIsOutOfViewport = function (viewportPosition, rep) {
- const focusLine = (rep.selFocusAtStart ? rep.selStart[0] : rep.selEnd[0]);
- const line = rep.lines.atIndex(focusLine);
- const linePosition = this._getLineEntryTopBottom(line);
- const lineIsAboveOfViewport = linePosition.top < viewportPosition.top;
- const lineIsBelowOfViewport = linePosition.bottom > viewportPosition.bottom;
-
- return lineIsBelowOfViewport || lineIsAboveOfViewport;
-};
-
-Scroll.prototype._getLineEntryTopBottom = function (entry, destObj) {
- const dom = entry.lineNode;
- const top = dom.offsetTop;
- const height = dom.offsetHeight;
- const obj = (destObj || {});
- obj.top = top;
- obj.bottom = (top + height);
- return obj;
-};
-
-Scroll.prototype._arrowUpWasPressedInTheFirstLineOfTheViewport = function (arrowUp, rep) {
- const percentageScrollArrowUp = this.scrollSettings.percentageToScrollWhenUserPressesArrowUp;
- return percentageScrollArrowUp && arrowUp && this._isCaretAtTheTopOfViewport(rep);
-};
-
-Scroll.prototype.getVisibleLineRange = function (rep) {
- const viewport = this._getViewPortTopBottom();
- // console.log("viewport top/bottom: %o", viewport);
- const obj = {};
- const self = this;
- const start = rep.lines.search((e) => self._getLineEntryTopBottom(e, obj).bottom > viewport.top);
- // return the first line that the top position is greater or equal than
- // the viewport. That is the first line that is below the viewport bottom.
- // So the line that is in the bottom of the viewport is the very previous one.
- let end = rep.lines.search((e) => self._getLineEntryTopBottom(e, obj).top >= viewport.bottom);
- if (end < start) end = start; // unlikely
- // top.console.log(start+","+(end -1));
- return [start, end - 1];
-};
-
-Scroll.prototype.getVisibleCharRange = function (rep) {
- const lineRange = this.getVisibleLineRange(rep);
- return [rep.lines.offsetOfIndex(lineRange[0]), rep.lines.offsetOfIndex(lineRange[1])];
-};
-
-exports.init = (outerWin) => new Scroll(outerWin);
diff --git a/src/static/js/scroll.ts b/src/static/js/scroll.ts
new file mode 100644
index 000000000..0d2dac44c
--- /dev/null
+++ b/src/static/js/scroll.ts
@@ -0,0 +1,337 @@
+import {getBottomOfNextBrowserLine, getNextVisibleLine, getPosition, getPositionTopOfPreviousBrowserLine, getPreviousVisibleLine} from './caretPosition';
+
+
+class Scroll {
+ private readonly outerWin: HTMLIFrameElement;
+ private readonly doc: Document;
+ private rootDocument: Document;
+ private scrollSettings: any;
+
+ constructor(outerWin: HTMLIFrameElement) {
+ this.scrollSettings = window.clientVars.scrollWhenFocusLineIsOutOfViewport;
+
+ // DOM reference
+ this.outerWin = outerWin;
+ this.doc = this.outerWin.contentDocument!;
+ this.rootDocument = parent.parent.document;
+ }
+
+ scrollWhenCaretIsInTheLastLineOfViewportWhenNecessary(rep, isScrollableEvent, innerHeight) {
+ // are we placing the caret on the line at the bottom of viewport?
+ // And if so, do we need to scroll the editor, as defined on the settings.json?
+ const shouldScrollWhenCaretIsAtBottomOfViewport =
+ this.scrollSettings.scrollWhenCaretIsInTheLastLineOfViewport;
+ if (shouldScrollWhenCaretIsAtBottomOfViewport) {
+ // avoid scrolling when selection includes multiple lines --
+ // user can potentially be selecting more lines
+ // than it fits on viewport
+ const multipleLinesSelected = rep.selStart[0] !== rep.selEnd[0];
+
+ // avoid scrolling when pad loads
+ if (isScrollableEvent && !multipleLinesSelected && this._isCaretAtTheBottomOfViewport(rep)) {
+ // when scrollWhenFocusLineIsOutOfViewport.percentage is 0, pixelsToScroll is 0
+ const pixelsToScroll = this._getPixelsRelativeToPercentageOfViewport(innerHeight);
+ this._scrollYPage(pixelsToScroll);
+ }
+ }
+ }
+
+ scrollWhenPressArrowKeys(arrowUp, rep, innerHeight) {
+ // if percentageScrollArrowUp is 0, let the scroll to be handled as default, put the previous
+ // rep line on the top of the viewport
+ if (this._arrowUpWasPressedInTheFirstLineOfTheViewport(arrowUp, rep)) {
+ const pixelsToScroll = this._getPixelsToScrollWhenUserPressesArrowUp(innerHeight);
+
+ // by default, the browser scrolls to the middle of the viewport. To avoid the twist made
+ // when we apply a second scroll, we made it immediately (without animation)
+ this._scrollYPageWithoutAnimation(-pixelsToScroll);
+ } else {
+ this.scrollNodeVerticallyIntoView(rep, innerHeight);
+ }
+ }
+
+ _isCaretAtTheBottomOfViewport(rep) {
+ // computing a line position using getBoundingClientRect() is expensive.
+ // (obs: getBoundingClientRect() is called on caretPosition.getPosition())
+ // To avoid that, we only call this function when it is possible that the
+ // caret is in the bottom of viewport
+ const caretLine = rep.selStart[0];
+ const lineAfterCaretLine = caretLine + 1;
+ const firstLineVisibleAfterCaretLine = getNextVisibleLine(lineAfterCaretLine, rep);
+ const caretLineIsPartiallyVisibleOnViewport =
+ this._isLinePartiallyVisibleOnViewport(caretLine, rep);
+ const lineAfterCaretLineIsPartiallyVisibleOnViewport =
+ this._isLinePartiallyVisibleOnViewport(firstLineVisibleAfterCaretLine, rep);
+ if (caretLineIsPartiallyVisibleOnViewport || lineAfterCaretLineIsPartiallyVisibleOnViewport) {
+ // check if the caret is in the bottom of the viewport
+ const caretLinePosition = getPosition();
+ const viewportBottom = this._getViewPortTopBottom().bottom;
+ const nextLineBottom = getBottomOfNextBrowserLine(caretLinePosition, rep);
+ const nextLineIsBelowViewportBottom = nextLineBottom > viewportBottom;
+ return nextLineIsBelowViewportBottom;
+ }
+ return false;
+ };
+
+ _isLinePartiallyVisibleOnViewport(lineNumber, rep){
+ const lineNode = rep.lines.atIndex(lineNumber);
+ const linePosition = this._getLineEntryTopBottom(lineNode);
+ const lineTop = linePosition.top;
+ const lineBottom = linePosition.bottom;
+ const viewport = this._getViewPortTopBottom();
+ const viewportBottom = viewport.bottom;
+ const viewportTop = viewport.top;
+
+ const topOfLineIsAboveOfViewportBottom = lineTop < viewportBottom;
+ const bottomOfLineIsOnOrBelowOfViewportBottom = lineBottom >= viewportBottom;
+ const topOfLineIsBelowViewportTop = lineTop >= viewportTop;
+ const topOfLineIsAboveViewportBottom = lineTop <= viewportBottom;
+ const bottomOfLineIsAboveViewportBottom = lineBottom <= viewportBottom;
+ const bottomOfLineIsBelowViewportTop = lineBottom >= viewportTop;
+
+ return (topOfLineIsAboveOfViewportBottom && bottomOfLineIsOnOrBelowOfViewportBottom) ||
+ (topOfLineIsBelowViewportTop && topOfLineIsAboveViewportBottom) ||
+ (bottomOfLineIsAboveViewportBottom && bottomOfLineIsBelowViewportTop);
+ };
+
+ _getViewPortTopBottom() {
+ const theTop = this.getScrollY();
+ const doc = this.doc;
+ const 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)
+ const viewportExtraSpacesAndPosition =
+ this._getEditorPositionTop() + this._getPaddingTopAddedWhenPageViewIsEnable();
+ return {
+ top: theTop,
+ bottom: (theTop + height - viewportExtraSpacesAndPosition),
+ };
+ };
+
+ _getEditorPositionTop() {
+ const editor = parent.document.getElementsByTagName('iframe');
+ const editorPositionTop = editor[0].offsetTop;
+ return editorPositionTop;
+ };
+
+ _getPaddingTopAddedWhenPageViewIsEnable() {
+ const aceOuter = this.rootDocument.getElementsByName('ace_outer');
+ const aceOuterPaddingTop = parseInt($(aceOuter).css('padding-top'));
+ return aceOuterPaddingTop;
+ };
+
+ _getScrollXY() {
+ const win = this.outerWin;
+ const odoc = this.doc;
+ if (typeof (win.pageYOffset) === 'number') {
+ return {
+ x: win.pageXOffset,
+ y: win.pageYOffset,
+ };
+ }
+ const docel = odoc.documentElement;
+ if (docel && typeof (docel.scrollTop) === 'number') {
+ return {
+ x: docel.scrollLeft,
+ y: docel.scrollTop,
+ };
+ }
+ };
+
+ getScrollX() {
+ return this._getScrollXY().x;
+ };
+
+ getScrollY () {
+ return this._getScrollXY().y;
+ };
+
+ setScrollX(x) {
+ this.outerWin.scrollTo(x, this.getScrollY());
+ };
+
+ setScrollY(y) {
+ this.outerWin.scrollTo(this.getScrollX(), y);
+ };
+
+ setScrollXY(x, y) {
+ this.outerWin.scrollTo(x, y);
+ };
+
+ _isCaretAtTheTopOfViewport(rep) {
+ const caretLine = rep.selStart[0];
+ const linePrevCaretLine = caretLine - 1;
+ const firstLineVisibleBeforeCaretLine =
+ getPreviousVisibleLine(linePrevCaretLine, rep);
+ const caretLineIsPartiallyVisibleOnViewport =
+ this._isLinePartiallyVisibleOnViewport(caretLine, rep);
+ const lineBeforeCaretLineIsPartiallyVisibleOnViewport =
+ this._isLinePartiallyVisibleOnViewport(firstLineVisibleBeforeCaretLine, rep);
+ if (caretLineIsPartiallyVisibleOnViewport || lineBeforeCaretLineIsPartiallyVisibleOnViewport) {
+ const caretLinePosition = getPosition(); // get the position of the browser line
+ const viewportPosition = this._getViewPortTopBottom();
+ const viewportTop = viewportPosition.top;
+ const viewportBottom = viewportPosition.bottom;
+ const caretLineIsBelowViewportTop = caretLinePosition.bottom >= viewportTop;
+ const caretLineIsAboveViewportBottom = caretLinePosition.top < viewportBottom;
+ const caretLineIsInsideOfViewport =
+ caretLineIsBelowViewportTop && caretLineIsAboveViewportBottom;
+ if (caretLineIsInsideOfViewport) {
+ const prevLineTop = getPositionTopOfPreviousBrowserLine(caretLinePosition, rep);
+ const previousLineIsAboveViewportTop = prevLineTop < viewportTop;
+ return previousLineIsAboveViewportTop;
+ }
+ }
+ return false;
+ };
+
+ // By default, when user makes an edition in a line out of viewport, this line goes
+// to the edge of viewport. This function gets the extra pixels necessary to get the
+// caret line in a position X relative to Y% viewport.
+ _getPixelsRelativeToPercentageOfViewport(innerHeight, aboveOfViewport) {
+ let pixels = 0;
+ const scrollPercentageRelativeToViewport = this._getPercentageToScroll(aboveOfViewport);
+ if (scrollPercentageRelativeToViewport > 0 && scrollPercentageRelativeToViewport <= 1) {
+ pixels = parseInt(innerHeight * scrollPercentageRelativeToViewport);
+ }
+ return pixels;
+ };
+
+ // we use different percentages when change selection. It depends on if it is
+// either above the top or below the bottom of the page
+ _getPercentageToScroll(aboveOfViewport: boolean) {
+ let percentageToScroll = this.scrollSettings.percentage.editionBelowViewport;
+ if (aboveOfViewport) {
+ percentageToScroll = this.scrollSettings.percentage.editionAboveViewport;
+ }
+ return percentageToScroll;
+ };
+
+ _getPixelsToScrollWhenUserPressesArrowUp(innerHeight) {
+ let pixels = 0;
+ const percentageToScrollUp = this.scrollSettings.percentageToScrollWhenUserPressesArrowUp;
+ if (percentageToScrollUp > 0 && percentageToScrollUp <= 1) {
+ pixels = parseInt(innerHeight * percentageToScrollUp);
+ }
+ return pixels;
+ };
+
+ _scrollYPage(pixelsToScroll) {
+ const durationOfAnimationToShowFocusline = this.scrollSettings.duration;
+ if (durationOfAnimationToShowFocusline) {
+ this._scrollYPageWithAnimation(pixelsToScroll, durationOfAnimationToShowFocusline);
+ } else {
+ this._scrollYPageWithoutAnimation(pixelsToScroll);
+ }
+ };
+
+ _scrollYPageWithoutAnimation(pixelsToScroll) {
+ this.outerWin.scrollBy(0, pixelsToScroll);
+ };
+
+ _scrollYPageWithAnimation(pixelsToScroll, durationOfAnimationToShowFocusline) {
+ const outerDocBody = this.doc.getElementById('outerdocbody');
+
+ // it works on later versions of Chrome
+ const $outerDocBody = $(outerDocBody);
+ this._triggerScrollWithAnimation(
+ $outerDocBody, pixelsToScroll, durationOfAnimationToShowFocusline);
+
+ // it works on Firefox and earlier versions of Chrome
+ const $outerDocBodyParent = $outerDocBody.parent();
+ this._triggerScrollWithAnimation(
+ $outerDocBodyParent, pixelsToScroll, durationOfAnimationToShowFocusline);
+ };
+
+ _triggerScrollWithAnimation($elem, pixelsToScroll, durationOfAnimationToShowFocusline) {
+ // clear the queue of animation
+ $elem.stop('scrollanimation');
+ $elem.animate({
+ scrollTop: `+=${pixelsToScroll}`,
+ }, {
+ duration: durationOfAnimationToShowFocusline,
+ queue: 'scrollanimation',
+ }).dequeue('scrollanimation');
+ };
+
+
+
+ scrollNodeVerticallyIntoView(rep, innerHeight) {
+ const viewport = this._getViewPortTopBottom();
+
+ // 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
+ // So, when the line scrolled gets outside of the viewport we let the browser handle it.
+ const linePosition = getPosition();
+ if (linePosition) {
+ const distanceOfTopOfViewport = linePosition.top - viewport.top;
+ const distanceOfBottomOfViewport = viewport.bottom - linePosition.bottom - linePosition.height;
+ const caretIsAboveOfViewport = distanceOfTopOfViewport < 0;
+ const caretIsBelowOfViewport = distanceOfBottomOfViewport < 0;
+ if (caretIsAboveOfViewport) {
+ const pixelsToScroll =
+ distanceOfTopOfViewport - this._getPixelsRelativeToPercentageOfViewport(innerHeight, true);
+ this._scrollYPage(pixelsToScroll);
+ } else if (caretIsBelowOfViewport) {
+ // setTimeout is required here as line might not be fully rendered onto the pad
+ setTimeout(() => {
+ const outer = window.parent;
+ // scroll to the very end of the pad outer
+ outer.scrollTo(0, outer[0].innerHeight);
+ }, 150);
+ // if the above setTimeout and functionality is removed then hitting an enter
+ // key while on the last line wont be an optimal user experience
+ // Details at: https://github.com/ether/etherpad-lite/pull/4639/files
+ }
+ }
+ };
+
+ _partOfRepLineIsOutOfViewport(viewportPosition, rep) {
+ const focusLine = (rep.selFocusAtStart ? rep.selStart[0] : rep.selEnd[0]);
+ const line = rep.lines.atIndex(focusLine);
+ const linePosition = this._getLineEntryTopBottom(line);
+ const lineIsAboveOfViewport = linePosition.top < viewportPosition.top;
+ const lineIsBelowOfViewport = linePosition.bottom > viewportPosition.bottom;
+
+ return lineIsBelowOfViewport || lineIsAboveOfViewport;
+ };
+
+ _getLineEntryTopBottom(entry, destObj) {
+ const dom = entry.lineNode;
+ const top = dom.offsetTop;
+ const height = dom.offsetHeight;
+ const obj = (destObj || {});
+ obj.top = top;
+ obj.bottom = (top + height);
+ return obj;
+ };
+
+ _arrowUpWasPressedInTheFirstLineOfTheViewport(arrowUp, rep) {
+ const percentageScrollArrowUp = this.scrollSettings.percentageToScrollWhenUserPressesArrowUp;
+ return percentageScrollArrowUp && arrowUp && this._isCaretAtTheTopOfViewport(rep);
+ };
+
+ getVisibleLineRange(rep) {
+ const viewport = this._getViewPortTopBottom();
+ // console.log("viewport top/bottom: %o", viewport);
+ const obj = {};
+ const self = this;
+ const start = rep.lines.search((e) => self._getLineEntryTopBottom(e, obj).bottom > viewport.top);
+ // return the first line that the top position is greater or equal than
+ // the viewport. That is the first line that is below the viewport bottom.
+ // So the line that is in the bottom of the viewport is the very previous one.
+ let end = rep.lines.search((e) => self._getLineEntryTopBottom(e, obj).top >= viewport.bottom);
+ if (end < start) end = start; // unlikely
+ // top.console.log(start+","+(end -1));
+ return [start, end - 1];
+ };
+
+ getVisibleCharRange(rep) {
+ const lineRange = this.getVisibleLineRange(rep);
+ return [rep.lines.offsetOfIndex(lineRange[0]), rep.lines.offsetOfIndex(lineRange[1])];
+ };
+}
+
+export default Scroll
From b7e0e6b216bbbf3afe5086ceac60931805887172 Mon Sep 17 00:00:00 2001
From: SamTV12345 <40429738+samtv12345@users.noreply.github.com>
Date: Sat, 13 Jul 2024 21:26:57 +0200
Subject: [PATCH 05/13] Fixed caret positioning
---
src/static/js/ace2_inner.js | 4 ++--
src/static/js/caretPosition.ts | 2 +-
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/static/js/ace2_inner.js b/src/static/js/ace2_inner.js
index f2966203c..dd83f36d3 100644
--- a/src/static/js/ace2_inner.js
+++ b/src/static/js/ace2_inner.js
@@ -3010,7 +3010,7 @@ function Ace2Inner(editorInfo, cssManagers) {
};
}
};
- const browserSelection = window.getSelection();
+ const browserSelection = targetDoc.getSelection();
if (browserSelection) {
browserSelection.removeAllRanges();
if (selection) {
@@ -3153,7 +3153,7 @@ function Ace2Inner(editorInfo, cssManagers) {
browserSelection.anchorOffset === range.endOffset,
};
- if (selection.startPoint.node.ownerDocument !== window.document) {
+ if (selection.startPoint.node.ownerDocument !== targetDoc) {
return null;
}
diff --git a/src/static/js/caretPosition.ts b/src/static/js/caretPosition.ts
index 23e956d30..236584a4c 100644
--- a/src/static/js/caretPosition.ts
+++ b/src/static/js/caretPosition.ts
@@ -5,7 +5,6 @@
// is represented by the browser
export const getPosition = () => {
const range = getSelectionRange();
- console.log("Getting range", range)
if (!range || $(range.endContainer).closest('body')[0].id !== 'innerdocbody') return null;
// When there's a
or any element that has no height, we can't get the dimension of the
// element where the caret is. As we can't get the element height, we create a text node to get
@@ -190,6 +189,7 @@ const getDimensionOfFirstBrowserLineOfRepLine = (line, rep) => {
};
const getSelectionRange = () => {
+ console.log("Selection is",window.frameElement)
if (!window.getSelection) {
return;
}
From 85dc9c088f7c39b80868604fb5b359cc5976c53c Mon Sep 17 00:00:00 2001
From: SamTV12345 <40429738+samtv12345@users.noreply.github.com>
Date: Sat, 13 Jul 2024 21:45:25 +0200
Subject: [PATCH 06/13] Added support for plugins
---
src/node/hooks/express/specialpages.ts | 1 +
src/static/js/pluginfw/shared.js | 8 ++++----
src/templates/padBootstrap.js | 2 +-
3 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/src/node/hooks/express/specialpages.ts b/src/node/hooks/express/specialpages.ts
index 714d7b3dd..0905abf03 100644
--- a/src/node/hooks/express/specialpages.ts
+++ b/src/node/hooks/express/specialpages.ts
@@ -90,6 +90,7 @@ exports.expressCreateServer = async (hookName: string, args: any, cb: Function)
const pluginModules = new Set();
for (const part of plugins.parts) {
for (const [, hookFnName] of Object.entries(part.client_hooks || {})) {
+ console.log(hookFnName.split(':')[0])
pluginModules.add(hookFnName.split(':')[0]);
}
}
diff --git a/src/static/js/pluginfw/shared.js b/src/static/js/pluginfw/shared.js
index 2c81ccd81..7d58412c0 100644
--- a/src/static/js/pluginfw/shared.js
+++ b/src/static/js/pluginfw/shared.js
@@ -9,7 +9,7 @@ const disabledHookReasons = {
},
};
-const loadFn = (path, hookName) => {
+const loadFn = (path, hookName, modules) => {
let functionName;
const parts = path.split(':');
@@ -24,7 +24,7 @@ const loadFn = (path, hookName) => {
functionName = parts[1];
}
- let fn = require(path);
+ let fn = modules ? modules.get(path) : require(/* webpackIgnore: true */ path);
functionName = functionName ? functionName : hookName;
for (const name of functionName.split('.')) {
@@ -33,7 +33,7 @@ const loadFn = (path, hookName) => {
return fn;
};
-const extractHooks = (parts, hookSetName, normalizer) => {
+const extractHooks = (parts, hookSetName, normalizer, modules) => {
const hooks = {};
for (const part of parts) {
for (const [hookName, regHookFnName] of Object.entries(part[hookSetName] || {})) {
@@ -53,7 +53,7 @@ const extractHooks = (parts, hookSetName, normalizer) => {
}
let hookFn;
try {
- hookFn = loadFn(hookFnName, hookName);
+ hookFn = loadFn(hookFnName, hookName, modules);
if (!hookFn) throw new Error('Not a function');
} catch (err) {
console.error(`Failed to load hook function "${hookFnName}" for plugin "${part.plugin}" ` +
diff --git a/src/templates/padBootstrap.js b/src/templates/padBootstrap.js
index 77861758c..62dd44b58 100644
--- a/src/templates/padBootstrap.js
+++ b/src/templates/padBootstrap.js
@@ -27,7 +27,7 @@
window.plugins.baseURL = basePath;
await window.plugins.update(new Map([
<% for (const module of pluginModules) { %>
- [<%- JSON.stringify(module) %>, require(<%- JSON.stringify(module) %>)],
+ [<%- JSON.stringify(module) %>, require("../../src/plugin_packages/"+<%- JSON.stringify(module) %>)],
<% } %>
]));
// Mechanism for tests to register hook functions (install fake plugins).
From 1ccd27e2d342d28dac756e480718448d8fec5405 Mon Sep 17 00:00:00 2001
From: SamTV12345 <40429738+samtv12345@users.noreply.github.com>
Date: Sat, 13 Jul 2024 21:59:16 +0200
Subject: [PATCH 07/13] Fixed get undefined.
---
src/static/js/pluginfw/shared.js | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/src/static/js/pluginfw/shared.js b/src/static/js/pluginfw/shared.js
index 7d58412c0..b2c2337f6 100644
--- a/src/static/js/pluginfw/shared.js
+++ b/src/static/js/pluginfw/shared.js
@@ -24,7 +24,13 @@ const loadFn = (path, hookName, modules) => {
functionName = parts[1];
}
- let fn = modules ? modules.get(path) : require(/* webpackIgnore: true */ path);
+ let fn
+ if (modules === undefined || !("get" in modules)) {
+ fn = require(/* webpackIgnore: true */ path);
+ } else {
+ fn = modules.get(path);
+ }
+
functionName = functionName ? functionName : hookName;
for (const name of functionName.split('.')) {
From 5d0da514f9c8ee437a27d0a9d854bd64bdc618de Mon Sep 17 00:00:00 2001
From: SamTV12345 <40429738+samtv12345@users.noreply.github.com>
Date: Sat, 13 Jul 2024 22:14:57 +0200
Subject: [PATCH 08/13] Removed require of socketio, l10n, html10n and error
reporter
---
src/static/js/l10n.js | 3 ++-
src/static/js/socketio.js | 2 +-
src/static/js/vendors/html10n.js | 6 +++++-
src/templates/pad.html | 4 ----
src/templates/padBootstrap.js | 4 ++++
5 files changed, 12 insertions(+), 7 deletions(-)
diff --git a/src/static/js/l10n.js b/src/static/js/l10n.js
index 7206f913b..ab80ef3ca 100644
--- a/src/static/js/l10n.js
+++ b/src/static/js/l10n.js
@@ -1,4 +1,5 @@
-'use strict';
+import html10n from '../js/vendors/html10n';
+
((document) => {
// Set language for l10n
diff --git a/src/static/js/socketio.js b/src/static/js/socketio.js
index 1d3739775..cdc1c9a23 100644
--- a/src/static/js/socketio.js
+++ b/src/static/js/socketio.js
@@ -1,4 +1,4 @@
-'use strict';
+import io from 'socket.io-client';
/**
* Creates a socket.io connection.
diff --git a/src/static/js/vendors/html10n.js b/src/static/js/vendors/html10n.js
index 50b6d2279..1f6a11728 100644
--- a/src/static/js/vendors/html10n.js
+++ b/src/static/js/vendors/html10n.js
@@ -22,7 +22,7 @@
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
-window.html10n = (function(window, document, undefined) {
+export let html10n = (function(window, document, undefined) {
// fix console
(function() {
@@ -1054,3 +1054,7 @@ window.html10n = (function(window, document, undefined) {
return html10n
})(window, document)
+
+export default html10n
+
+window.html10n = html10n
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 0d7072f82..08437b628 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -34,7 +34,6 @@
for the JavaScript code in this page.|
*/
-
@@ -53,8 +52,6 @@
<% e.end_block(); %>
-
-
<% e.begin_block("body"); %>
@@ -441,7 +438,6 @@
<% e.begin_block("scripts"); %>
-
diff --git a/src/templates/padBootstrap.js b/src/templates/padBootstrap.js
index 62dd44b58..c86d170c1 100644
--- a/src/templates/padBootstrap.js
+++ b/src/templates/padBootstrap.js
@@ -1,5 +1,8 @@
(async () => {
+
+ require('../../src/static/js/l10n')
+
window.clientVars = {
// This is needed to fetch /pluginfw/plugin-definitions.json, which happens before the server
// sends the CLIENT_VARS message.
@@ -23,6 +26,7 @@
window.padeditbar = require('../../src/static/js/pad_editbar').padeditbar;
window.padimpexp = require('../../src/static/js/pad_impexp').padimpexp;
require('../../src/static/js/skin_variants');
+ require('../../src/static/js/basic_error_handler')
window.plugins.baseURL = basePath;
await window.plugins.update(new Map([
From ea5073ce13a72e7579d8b46eff2d43f15ab0bb37 Mon Sep 17 00:00:00 2001
From: SamTv12345
Date: Tue, 16 Jul 2024 12:43:21 +0200
Subject: [PATCH 09/13] Fixed popup not showing
---
src/node/utils/toolbar.ts | 29 +++++++++++++++--------------
src/static/js/ace2_inner.js | 8 ++++----
src/static/js/pad_savedrevs.js | 2 +-
src/static/js/pad_utils.js | 1 -
src/static/js/vendors/gritter.js | 6 +++---
5 files changed, 23 insertions(+), 23 deletions(-)
diff --git a/src/node/utils/toolbar.ts b/src/node/utils/toolbar.ts
index aac3fb3d3..f0ef45479 100644
--- a/src/node/utils/toolbar.ts
+++ b/src/node/utils/toolbar.ts
@@ -2,7 +2,7 @@
/**
* The Toolbar Module creates and renders the toolbars and buttons
*/
-const _ = require('underscore');
+import {isString, reduce, each, isUndefined, map, first, last, extend, escape} from 'underscore';
const removeItem = (array: string[], what: string) => {
let ax;
@@ -21,7 +21,7 @@ const defaultButtonAttributes = (name: string, overrides?: boolean) => ({
const tag = (name: string, attributes: AttributeObj, contents?: string) => {
const aStr = tagAttributes(attributes);
- if (_.isString(contents) && contents!.length > 0) {
+ if (isString(contents) && contents!.length > 0) {
return `<${name}${aStr}>${contents}`;
} else {
return `<${name}${aStr}>`;
@@ -34,14 +34,14 @@ type AttributeObj = {
}
const tagAttributes = (attributes: AttributeObj) => {
- attributes = _.reduce(attributes || {}, (o: AttributeObj, val: string, name: string) => {
- if (!_.isUndefined(val)) {
+ attributes = reduce(attributes || {}, (o: AttributeObj, val: string, name: string) => {
+ if (!isUndefined(val)) {
o[name] = val;
}
return o;
}, {});
- return ` ${_.map(attributes, (val: string, name: string) => `${name}="${_.escape(val)}"`).join(' ')}`;
+ return ` ${map(attributes, (val: string, name: string) => `${name}="${escape(val)}"`).join(' ')}`;
};
type ButtonGroupType = {
@@ -58,7 +58,7 @@ class ButtonGroup {
public static fromArray = function (array: string[]) {
const btnGroup = new ButtonGroup();
- _.each(array, (btnName: string) => {
+ each(array, (btnName: string) => {
const button = Button.load(btnName) as Button
btnGroup.addButton(button);
});
@@ -70,18 +70,19 @@ class ButtonGroup {
return this;
}
- render() {
+ render(): string {
if (this.buttons && this.buttons.length === 1) {
this.buttons[0].grouping = '';
} else if (this.buttons && this.buttons.length > 1) {
- _.first(this.buttons).grouping = 'grouped-left';
- _.last(this.buttons).grouping = 'grouped-right';
- _.each(this.buttons.slice(1, -1), (btn: Button) => {
+ first(this.buttons)!.grouping = 'grouped-left';
+ last(this.buttons)!.grouping = 'grouped-right';
+ each(this.buttons.slice(1, -1), (btn: Button) => {
btn.grouping = 'grouped-middle';
});
}
- return _.map(this.buttons, (btn: ButtonGroup) => {
+ // @ts-ignore
+ return map(this.buttons, (btn: ButtonGroup) => {
if (btn) return btn.render();
}).join('\n');
}
@@ -151,8 +152,8 @@ class SelectButton extends Button {
select(attributes: AttributeObj) {
const options: string[] = [];
- _.each(this.options, (opt: AttributeSelect) => {
- const a = _.extend({
+ each(this.options, (opt: AttributeSelect) => {
+ const a = extend({
value: opt.value,
}, opt.attributes);
@@ -299,7 +300,7 @@ module.exports = {
buttons[0].push('savedrevision');
}
- const groups = _.map(buttons, (group: string[]) => ButtonGroup.fromArray(group).render());
+ const groups = map(buttons, (group: string[]) => ButtonGroup.fromArray(group).render());
return groups.join(this.separator());
},
};
diff --git a/src/static/js/ace2_inner.js b/src/static/js/ace2_inner.js
index dd83f36d3..90abcb7b8 100644
--- a/src/static/js/ace2_inner.js
+++ b/src/static/js/ace2_inner.js
@@ -3188,10 +3188,10 @@ function Ace2Inner(editorInfo, cssManagers) {
editorInfo.ace_getInInternationalComposition = () => inInternationalComposition;
const bindTheEventHandlers = () => {
- $(document).on('keydown', handleKeyEvent);
- $(document).on('keypress', handleKeyEvent);
- $(document).on('keyup', handleKeyEvent);
- $(document).on('click', handleClick);
+ $(targetDoc).on('keydown', handleKeyEvent);
+ $(targetDoc).on('keypress', handleKeyEvent);
+ $(targetDoc).on('keyup', handleKeyEvent);
+ $(targetDoc).on('click', handleClick);
// dropdowns on edit bar need to be closed on clicks on both pad inner and pad outer
$(outerDoc).on('click', hideEditBarDropdowns);
diff --git a/src/static/js/pad_savedrevs.js b/src/static/js/pad_savedrevs.js
index b5868f699..4082e0380 100644
--- a/src/static/js/pad_savedrevs.js
+++ b/src/static/js/pad_savedrevs.js
@@ -20,7 +20,7 @@ let pad;
exports.saveNow = () => {
pad.collabClient.sendMessage({type: 'SAVE_REVISION'});
- $.gritter.add({
+ window.$.gritter.add({
// (string | mandatory) the heading of the notification
title: html10n.get('pad.savedrevs.marked'),
// (string | mandatory) the text inside the notification
diff --git a/src/static/js/pad_utils.js b/src/static/js/pad_utils.js
index 6601cb2c3..467a8adc9 100644
--- a/src/static/js/pad_utils.js
+++ b/src/static/js/pad_utils.js
@@ -356,7 +356,6 @@ const padutils = {
let globalExceptionHandler = null;
padutils.setupGlobalExceptionHandler = () => {
if (globalExceptionHandler == null) {
- require('./vendors/gritter');
globalExceptionHandler = (e) => {
let type;
let err;
diff --git a/src/static/js/vendors/gritter.js b/src/static/js/vendors/gritter.js
index a20cb4de9..1b8b9a759 100644
--- a/src/static/js/vendors/gritter.js
+++ b/src/static/js/vendors/gritter.js
@@ -42,8 +42,8 @@
return Gritter.add(params || {});
} catch(e) {
- var err = 'Gritter Error: ' + e;
- (typeof(console) != 'undefined' && console.error) ?
+ const err = 'Gritter Error: ' + e;
+ (typeof(console) != 'undefined' && console.error) ?
console.error(err, params) :
alert(err);
@@ -289,7 +289,7 @@
*/
_runSetup: function(){
- for(opt in $.gritter.options){
+ for(let opt in $.gritter.options){
this[opt] = $.gritter.options[opt];
}
this._is_setup = 1;
From a3e9f29558e7bf2470b421e42b2f7c14e96061d8 Mon Sep 17 00:00:00 2001
From: SamTv12345
Date: Tue, 16 Jul 2024 13:47:59 +0200
Subject: [PATCH 10/13] Fixed timeslider
---
src/node/hooks/express/specialpages.ts | 47 ++++++++++++++++++++++++-
src/static/js/vendors/html10n.js | 2 +-
src/templates/timeSliderBootstrap.js | 37 ++++++++++++++++++++
src/templates/timeslider.html | 48 +-------------------------
4 files changed, 85 insertions(+), 49 deletions(-)
create mode 100644 src/templates/timeSliderBootstrap.js
diff --git a/src/node/hooks/express/specialpages.ts b/src/node/hooks/express/specialpages.ts
index 0905abf03..11d02c001 100644
--- a/src/node/hooks/express/specialpages.ts
+++ b/src/node/hooks/express/specialpages.ts
@@ -98,10 +98,30 @@ exports.expressCreateServer = async (hookName: string, args: any, cb: Function)
})(),
settings,
}));
+
+ await fsp.writeFile(
+ path.join(settings.root, 'var/js/timesliderBootstrap.js'),
+ eejs.require('ep_etherpad-lite/templates/timeSliderBootstrap.js', {
+ pluginModules: (() => {
+ const pluginModules = new Set();
+ for (const part of plugins.parts) {
+ for (const [, hookFnName] of Object.entries(part.client_hooks || {})) {
+ console.log(hookFnName.split(':')[0])
+ pluginModules.add(hookFnName.split(':')[0]);
+ }
+ }
+ return [...pluginModules];
+ })(),
+ settings,
+ }));
+
const hash = createHash('sha256').update(fs.readFileSync(path.join(settings.root, 'var/js/padbootstrap.js'))).digest('hex');
+ const hashTimeSlider = createHash('sha256').update(fs.readFileSync(path.join(settings.root, 'var/js/timeSliderBootstrap.js'))).digest('hex');
const fileName = `padbootstrap-${hash.substring(0,16)}.min.js`
- const result = buildSync({
+ const fileNameTimeSlider = `timeSliderBootstrap-${hash.substring(0,16)}.min.js`
+
+ buildSync({
entryPoints: [settings.root + "/var/js/padbootstrap.js"], // Entry file(s)
bundle: true, // Bundle the files together
minify: false, // Minify the output
@@ -114,6 +134,19 @@ exports.expressCreateServer = async (hookName: string, args: any, cb: Function)
outfile: settings.root + `/var/js/${fileName}`, // Output file
})
+ buildSync({
+ entryPoints: [settings.root + "/var/js/timesliderBootstrap.js"], // Entry file(s)
+ bundle: true, // Bundle the files together
+ minify: false, // Minify the output
+ sourcemap: true, // Generate source maps
+ sourceRoot: settings.root+"/src/static/js/",
+ target: ['es2020'], // Target ECMAScript version
+ metafile: true,
+
+ write: true, // Do not write to file system,
+ outfile: settings.root + `/var/js/${fileNameTimeSlider}`, // Output file
+ })
+
args.app.get(`/${fileName}`, (req: any, res: any) => {
res.sendFile(settings.root+`/var/js/${fileName}`)
@@ -123,6 +156,17 @@ exports.expressCreateServer = async (hookName: string, args: any, cb: Function)
res.sendFile(settings.root+`/var/js/${fileName}.map`)
})
+ args.app.get(`/${fileNameTimeSlider}`, (req: any, res: any) => {
+ res.sendFile(settings.root+`/var/js/${fileNameTimeSlider}`)
+ })
+
+ args.app.get(`/${fileNameTimeSlider}.map`, (req: any, res: any) => {
+ res.sendFile(settings.root+`/var/js/${fileNameTimeSlider}.map`)
+ })
+
+
+
+
// serve pad.html under /p
args.app.get('/p/:pad', (req: any, res: any, next: Function) => {
@@ -153,6 +197,7 @@ exports.expressCreateServer = async (hookName: string, args: any, cb: Function)
res.send(eejs.require('ep_etherpad-lite/templates/timeslider.html', {
req,
toolbar,
+ entrypoint: "/"+fileNameTimeSlider
}));
});
diff --git a/src/static/js/vendors/html10n.js b/src/static/js/vendors/html10n.js
index 1f6a11728..6fe5e307f 100644
--- a/src/static/js/vendors/html10n.js
+++ b/src/static/js/vendors/html10n.js
@@ -725,7 +725,7 @@ export let html10n = (function(window, document, undefined) {
return;
// initialize _pluralRules
- if (!this._pluralRules)
+ if (!("_pluralRules" in this))
this._pluralRules = getPluralRules(html10n.language);
var index = this._pluralRules(n);
diff --git a/src/templates/timeSliderBootstrap.js b/src/templates/timeSliderBootstrap.js
new file mode 100644
index 000000000..e3138cfbd
--- /dev/null
+++ b/src/templates/timeSliderBootstrap.js
@@ -0,0 +1,37 @@
+// @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt
+window.clientVars = {
+ // This is needed to fetch /pluginfw/plugin-definitions.json, which happens before the
+ // server sends the CLIENT_VARS message.
+ randomVersionString: <%-JSON.stringify(settings.randomVersionString)%>,
+};
+let BroadcastSlider;
+
+
+(function () {
+ const timeSlider = require('ep_etherpad-lite/static/js/timeslider')
+ const pathComponents = location.pathname.split('/');
+
+ // Strip 'p', the padname and 'timeslider' from the pathname and set as baseURL
+ const baseURL = pathComponents.slice(0,pathComponents.length-3).join('/') + '/';
+ require('ep_etherpad-lite/static/js/l10n')
+ window.$ = window.jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery; // Expose jQuery #HACK
+ require('ep_etherpad-lite/static/js/vendors/gritter')
+
+ window.browser = require('ep_etherpad-lite/static/js/vendors/browser');
+
+ window.plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins');
+ const socket = timeSlider.socket;
+ BroadcastSlider = timeSlider.BroadcastSlider;
+ plugins.baseURL = baseURL;
+ plugins.update(function () {
+
+
+ /* TODO: These globals shouldn't exist. */
+
+ });
+ const padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar;
+ const padimpexp = require('ep_etherpad-lite/static/js/pad_impexp').padimpexp;
+ timeSlider.baseURL = baseURL;
+ timeSlider.init();
+ padeditbar.init()
+})();
diff --git a/src/templates/timeslider.html b/src/templates/timeslider.html
index 71346f21e..e2178e54e 100644
--- a/src/templates/timeslider.html
+++ b/src/templates/timeslider.html
@@ -47,8 +47,6 @@
<% e.begin_block("timesliderScripts"); %>
-
-
<% e.end_block(); %>
@@ -250,58 +248,14 @@
-
-
-
-
+
<% e.end_block(); %>