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.document;
- 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..95075d807
--- /dev/null
+++ b/src/static/js/scroll.ts
@@ -0,0 +1,338 @@
+import {getBottomOfNextBrowserLine, getNextVisibleLine, getPosition, getPositionTopOfPreviousBrowserLine, getPreviousVisibleLine} from './caretPosition';
+import {Position, RepModel, RepNode, WindowElementWithScrolling} from "./types/RepModel";
+
+
+class Scroll {
+ private readonly outerWin: HTMLIFrameElement;
+ private readonly doc: Document;
+ private rootDocument: Document;
+ private scrollSettings: any;
+
+ constructor(outerWin: HTMLIFrameElement) {
+ // @ts-ignore
+ this.scrollSettings = window.clientVars.scrollWhenFocusLineIsOutOfViewport;
+
+ // DOM reference
+ this.outerWin = outerWin;
+ this.doc = this.outerWin.contentDocument!;
+ this.rootDocument = parent.parent.document;
+ }
+
+ scrollWhenCaretIsInTheLastLineOfViewportWhenNecessary(rep: RepModel, isScrollableEvent: boolean, innerHeight: number) {
+ // 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: boolean, rep: RepModel, innerHeight: number) {
+ // 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: RepModel) {
+ // 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);
+ return nextLineBottom > viewportBottom;
+ }
+ return false;
+ };
+
+ _isLinePartiallyVisibleOnViewport(lineNumber: number, rep: RepModel){
+ 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 as WindowElementWithScrolling;
+ 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: number) {
+ this.outerWin.scrollTo(x, this.getScrollY());
+ };
+
+ setScrollY(y: number) {
+ this.outerWin.scrollTo(this.getScrollX(), y);
+ };
+
+ setScrollXY(x: number, y: number) {
+ this.outerWin.scrollTo(x, y);
+ };
+
+ _isCaretAtTheTopOfViewport(rep: RepModel) {
+ 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: number, aboveOfViewport?: boolean) {
+ let pixels = 0;
+ const scrollPercentageRelativeToViewport = this._getPercentageToScroll(aboveOfViewport);
+ if (scrollPercentageRelativeToViewport > 0 && scrollPercentageRelativeToViewport <= 1) {
+ pixels = parseInt(String(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|undefined) {
+ let percentageToScroll = this.scrollSettings.percentage.editionBelowViewport;
+ if (aboveOfViewport) {
+ percentageToScroll = this.scrollSettings.percentage.editionAboveViewport;
+ }
+ return percentageToScroll;
+ };
+
+ _getPixelsToScrollWhenUserPressesArrowUp(innerHeight: number) {
+ let pixels = 0;
+ const percentageToScrollUp = this.scrollSettings.percentageToScrollWhenUserPressesArrowUp;
+ if (percentageToScrollUp > 0 && percentageToScrollUp <= 1) {
+ pixels = parseInt(String(innerHeight * percentageToScrollUp));
+ }
+ return pixels;
+ };
+
+ _scrollYPage(pixelsToScroll: number) {
+ const durationOfAnimationToShowFocusline = this.scrollSettings.duration;
+ if (durationOfAnimationToShowFocusline) {
+ this._scrollYPageWithAnimation(pixelsToScroll, durationOfAnimationToShowFocusline);
+ } else {
+ this._scrollYPageWithoutAnimation(pixelsToScroll);
+ }
+ };
+
+ _scrollYPageWithoutAnimation(pixelsToScroll: number) {
+ this.outerWin.scrollBy(0, pixelsToScroll);
+ };
+
+ _scrollYPageWithAnimation(pixelsToScroll: number, durationOfAnimationToShowFocusline: number) {
+ 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:any, pixelsToScroll: number, durationOfAnimationToShowFocusline: number) {
+ // clear the queue of animation
+ $elem.stop('scrollanimation');
+ $elem.animate({
+ scrollTop: `+=${pixelsToScroll}`,
+ }, {
+ duration: durationOfAnimationToShowFocusline,
+ queue: 'scrollanimation',
+ }).dequeue('scrollanimation');
+ };
+
+
+
+ scrollNodeVerticallyIntoView(rep: RepModel, innerHeight: number) {
+ 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: Position, rep: RepModel) {
+ 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: RepNode, destObj?: Position) {
+ const dom = entry.lineNode;
+ const top = dom.offsetTop;
+ const height = dom.offsetHeight;
+ const obj = (destObj || {}) as Position;
+ obj.top = top;
+ obj.bottom = (top + height);
+ return obj;
+ };
+
+ _arrowUpWasPressedInTheFirstLineOfTheViewport(arrowUp: boolean, rep: RepModel) {
+ const percentageScrollArrowUp = this.scrollSettings.percentageToScrollWhenUserPressesArrowUp;
+ return percentageScrollArrowUp && arrowUp && this._isCaretAtTheTopOfViewport(rep);
+ };
+
+ getVisibleLineRange(rep: RepModel) {
+ const viewport = this._getViewPortTopBottom();
+ // console.log("viewport top/bottom: %o", viewport);
+ const obj = {} as Position;
+ 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: RepModel) {
+ const lineRange = this.getVisibleLineRange(rep);
+ return [rep.lines.offsetOfIndex(lineRange[0]), rep.lines.offsetOfIndex(lineRange[1])];
+ };
+}
+
+export default Scroll
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/timeslider.js b/src/static/js/timeslider.js
index 4cc5d45a6..8d8604b91 100644
--- a/src/static/js/timeslider.js
+++ b/src/static/js/timeslider.js
@@ -31,7 +31,7 @@ const randomString = require('./pad_utils').randomString;
const hooks = require('./pluginfw/hooks');
const padutils = require('./pad_utils').padutils;
const socketio = require('./socketio');
-
+import html10n from '../js/vendors/html10n'
let token, padId, exportLinks, socket, changesetLoader, BroadcastSlider;
const init = () => {
@@ -117,6 +117,14 @@ const handleClientVars = (message) => {
setInterval(ping, window.clientVars.sessionRefreshInterval);
}
+ if(window.clientVars.mode === "development") {
+ console.warn('Enabling development mode with live update')
+ socket.on('liveupdate', ()=>{
+ console.log('Doing live reload')
+ location.reload()
+ })
+ }
+
// load all script that doesn't work without the clientVars
BroadcastSlider = require('./broadcast_slider')
.loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded);
diff --git a/src/static/js/types/RepModel.ts b/src/static/js/types/RepModel.ts
new file mode 100644
index 000000000..821549e1d
--- /dev/null
+++ b/src/static/js/types/RepModel.ts
@@ -0,0 +1,31 @@
+export type RepModel = {
+ lines: {
+ atIndex: (num: number)=>RepNode,
+ offsetOfIndex: (range: number)=>number,
+ search: (filter: (e: RepNode)=>boolean)=>number,
+ length: ()=>number
+ }
+ selStart: number[],
+ selEnd: number[],
+ selFocusAtStart: boolean
+}
+
+export type Position = {
+ bottom: number,
+ height: number,
+ top: number
+}
+
+export type RepNode = {
+ firstChild: RepNode,
+ lineNode: RepNode
+ length: number,
+ lastChild: RepNode,
+ offsetHeight: number,
+ offsetTop: number
+}
+
+export type WindowElementWithScrolling = HTMLIFrameElement & {
+ pageYOffset: number|string,
+ pageXOffset: number
+}
diff --git a/src/static/js/vendors/farbtastic.js b/src/static/js/vendors/farbtastic.js
index ad832dc72..5d0c4718c 100644
--- a/src/static/js/vendors/farbtastic.js
+++ b/src/static/js/vendors/farbtastic.js
@@ -7,6 +7,7 @@
// Licensed under the terms of the GNU General Public License v2.0:
// https://github.com/mattfarina/farbtastic/blob/71ca15f4a09c8e5a08a1b0d1cf37ef028adf22f0/LICENSE.txt
// edited by Sebastian Castro
on 2020-04-06
+
(function ($) {
var __debug = false;
@@ -172,7 +173,7 @@ $._farbtastic = function (container, options) {
angle2 = d2 * Math.PI * 2,
// Endpoints
x1 = Math.sin(angle1), y1 = -Math.cos(angle1);
- x2 = Math.sin(angle2), y2 = -Math.cos(angle2),
+ let x2 = Math.sin(angle2), y2 = -Math.cos(angle2),
// Midpoint chosen so that the endpoints are tangent to the circle.
am = (angle1 + angle2) / 2,
tan = 1 / Math.cos((angle2 - angle1) / 2),
@@ -329,8 +330,8 @@ $._farbtastic = function (container, options) {
// Update the overlay canvas.
fb.ctxOverlay.clearRect(-fb.mid, -fb.mid, sz, sz);
- for (i in circles) {
- var c = circles[i];
+ for (let i in circles) {
+ const c = circles[i];
fb.ctxOverlay.lineWidth = c.lw;
fb.ctxOverlay.strokeStyle = c.c;
fb.ctxOverlay.beginPath();
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;
diff --git a/src/static/js/vendors/html10n.js b/src/static/js/vendors/html10n.js
deleted file mode 100644
index 50b6d2279..000000000
--- a/src/static/js/vendors/html10n.js
+++ /dev/null
@@ -1,1056 +0,0 @@
-// WARNING: This file has been modified from the Original
-
-/**
- * Copyright (c) 2012 Marcel Klehr
- * Copyright (c) 2011-2012 Fabien Cazenave, Mozilla
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to
- * deal in the Software without restriction, including without limitation the
- * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
- * sell copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-window.html10n = (function(window, document, undefined) {
-
- // fix console
- (function() {
- const noop = function () {
- };
- const names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
- const console = (window.console = window.console || {});
- for (let i = 0; i < names.length; ++i) {
- if (!console[names[i]]) {
- console[names[i]] = noop;
- }
- }
- }());
-
- // fix Array#forEach in IE
- // taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
- if (!Array.prototype.forEach) {
- Array.prototype.forEach = function(fn, scope) {
- let i = 0, len = this.length;
- for(; i < len; ++i) {
- if (i in this) {
- fn.call(scope, this[i], i, this);
- }
- }
- };
- }
-
- // fix Array#indexOf in, guess what, IE! <3
- // taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
- if (!Array.prototype.indexOf) {
- Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
- "use strict";
- if (this == null) {
- throw new TypeError();
- }
- const t = Object(this);
- const len = t.length >>> 0;
- if (len === 0) {
- return -1;
- }
- let n = 0;
- if (arguments.length > 1) {
- n = Number(arguments[1]);
- if (n != n) { // shortcut for verifying if it's NaN
- n = 0;
- } else if (n != 0 && n != Infinity && n != -Infinity) {
- n = (n > 0 || -1) * Math.floor(Math.abs(n));
- }
- }
- if (n >= len) {
- return -1;
- }
- var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
- for (; k < len; k++) {
- if (k in t && t[k] === searchElement) {
- return k;
- }
- }
- return -1;
- }
- }
-
- /**
- * MicroEvent - to make any js object an event emitter (server or browser)
- */
- const MicroEvent = function () {
- };
- MicroEvent.prototype = {
- bind: function(event, fct){
- this._events = this._events || {};
- this._events[event] = this._events[event] || [];
- this._events[event].push(fct);
- },
- unbind: function(event, fct){
- this._events = this._events || {};
- if( event in this._events === false ) return;
- this._events[event].splice(this._events[event].indexOf(fct), 1);
- },
- trigger: function(event /* , args... */){
- this._events = this._events || {};
- if( event in this._events === false ) return;
- for(var i = 0; i < this._events[event].length; i++){
- this._events[event][i].apply(this, Array.prototype.slice.call(arguments, 1))
- }
- }
- };
- /**
- * mixin will delegate all MicroEvent.js function in the destination object
- * @param {Object} the object which will support MicroEvent
- */
- MicroEvent.mixin = function(destObject){
- var props = ['bind', 'unbind', 'trigger'];
- if(!destObject) return;
- for(var i = 0; i < props.length; i ++){
- destObject[props[i]] = MicroEvent.prototype[props[i]];
- }
- }
-
- /**
- * Loader
- * The loader is responsible for loading
- * and caching all necessary resources
- */
- function Loader(resources) {
- this.resources = resources
- this.cache = {} // file => contents
- this.langs = {} // lang => strings
- }
-
- Loader.prototype.load = function(lang, cb) {
- if(this.langs[lang]) return cb()
-
- if (this.resources.length > 0) {
- var reqs = 0;
- for (var i=0, n=this.resources.length; i < n; i++) {
- this.fetch(this.resources[i], lang, function(e) {
- reqs++;
- if(e) console.warn(e)
-
- if (reqs < n) return;// Call back once all reqs are completed
- cb && cb()
- })
- }
- }
- }
-
- Loader.prototype.fetch = function(href, lang, cb) {
- var that = this
-
- if (this.cache[href]) {
- this.parse(lang, href, this.cache[href], cb)
- return;
- }
-
- var xhr = new XMLHttpRequest()
- xhr.open('GET', href, /*async: */true)
- if (xhr.overrideMimeType) {
- xhr.overrideMimeType('application/json; charset=utf-8');
- }
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4) {
- if (xhr.status == 200 || xhr.status === 0) {
- var data = JSON.parse(xhr.responseText)
- that.cache[href] = data
- // Pass on the contents for parsing
- that.parse(lang, href, data, cb)
- } else {
- cb(new Error('Failed to load '+href))
- }
- }
- };
- xhr.send(null);
- }
-
- Loader.prototype.parse = function(lang, currHref, data, cb) {
- if ('object' != typeof data) {
- cb(new Error('A file couldn\'t be parsed as json.'))
- return
- }
-
- // Issue #6129: Fix exceptions caused by browsers
- // Also for fallback, see BCP 47 RFC 4647 section 3.4
- // NOTE: this output the all lowercase form
- function getBcp47LangCode(browserLang) {
- const bcp47Lang = browserLang.toLowerCase();
- // Browser => BCP 47
- const langCodeMap = {
- 'zh-cn': 'zh-hans-cn',
- 'zh-hk': 'zh-hant-hk',
- 'zh-mo': 'zh-hant-mo',
- 'zh-my': 'zh-hans-my',
- 'zh-sg': 'zh-hans-sg',
- 'zh-tw': 'zh-hant-tw',
- };
-
- return langCodeMap[bcp47Lang] ?? bcp47Lang;
- }
-
- // Issue #6129: Fix exceptions
- // NOTE: translatewiki.net use all lowercase form by default ('en-gb' insted of 'en-GB')
- function getJsonLangCode(bcp47Lang) {
- const jsonLang = bcp47Lang.toLowerCase();
- // BCP 47 => JSON
- const langCodeMap = {
- 'sr-cyrl': 'sr-ec',
- 'sr-latn': 'sr-el',
- 'zh-hant-hk': 'zh-hk',
- };
-
- return langCodeMap[jsonLang] ?? jsonLang;
- }
-
- let bcp47LangCode = getBcp47LangCode(lang);
- let jsonLangCode = getJsonLangCode(bcp47LangCode);
-
- // Check if lang exists
- if (!data[jsonLangCode]) {
- // lang not found
- // This may be due to formatting (expected 'ru' but browser sent 'ru-RU')
- // Set err msg before mutating lang (we may need this later)
- const msg = 'Couldn\'t find translations for ' + lang +
- '(lowercase BCP 47 lang tag ' + bcp47LangCode +
- ', JSON lang code ' + jsonLangCode + ')';
-
- // Check for '-' (BCP 47 'ROOT-SCRIPT-REGION-VARIANT') and fallback until found data or ROOT
- // - 'ROOT-SCRIPT-REGION': 'zh-Hans-CN'
- // - 'ROOT-SCRIPT': 'zh-Hans'
- // - 'ROOT-REGION': 'en-GB'
- // - 'ROOT-VARIANT': 'be-tarask'
- while (!data[jsonLangCode] && bcp47LangCode.lastIndexOf('-') > -1) {
- // ROOT-SCRIPT-REGION-VARIANT formatting detected
- bcp47LangCode = bcp47LangCode.substring(0, bcp47LangCode.lastIndexOf('-')); // set lang to ROOT lang
- jsonLangCode = getJsonLangCode(bcp47LangCode);
- }
-
- // Check if already found data or ROOT lang exists (e.g 'ru')
- if (!data[jsonLangCode]) {
- // ROOT lang not found. (e.g 'zh')
- // Loop through langs data. Maybe we have a variant? e.g (zh-hans)
- let l; // langs item. Declare outside of loop
-
- for (l in data) {
- // Is not ROOT?
- // And is variant of ROOT?
- // (NOTE: index of ROOT equals 0 would cause unexpected ISO 639-1 vs. 639-3 issues,
- // so append dash into query string)
- // And is known lang?
- if (bcp47LangCode != l && l.indexOf(lang + '-') === 0 && data[l]) {
- bcp47LangCode = l; // set lang to ROOT-SCRIPT (e.g 'zh-hans')
- jsonLangCode = getJsonLangCode(bcp47LangCode);
- break;
- }
- }
-
- // Did we find a variant? If not, return err.
- if (bcp47LangCode != l) {
- return cb(new Error(msg));
- }
- }
- }
-
- lang = jsonLangCode;
-
- if ('string' == typeof data[lang]) {
- // Import rule
-
- // absolute path
- let importUrl = data[lang];
-
- // relative path
- if(data[lang].indexOf("http") != 0 && data[lang].indexOf("/") != 0) {
- importUrl = currHref+"/../"+data[lang]
- }
-
- this.fetch(importUrl, lang, cb)
- return
- }
-
- if ('object' != typeof data[lang]) {
- cb(new Error('Translations should be specified as JSON objects!'))
- return
- }
-
- this.langs[lang] = data[lang]
- // TODO: Also store accompanying langs
- cb()
- }
-
-
- /**
- * The html10n object
- */
- const html10n =
- {
- language: null
- };
- MicroEvent.mixin(html10n)
-
- html10n.macros = {}
-
- html10n.rtl = ["ar","dv","fa","ha","he","ks","ku","ps","ur","yi"]
-
- /**
- * Get rules for plural forms (shared with JetPack), see:
- * http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html
- * https://github.com/mozilla/addon-sdk/blob/master/python-lib/plural-rules-generator.p
- *
- * @param {string} lang
- * locale (language) used.
- *
- * @return {Function}
- * returns a function that gives the plural form name for a given integer:
- * var fun = getPluralRules('en');
- * fun(1) -> 'one'
- * fun(0) -> 'other'
- * fun(1000) -> 'other'.
- */
- function getPluralRules(lang) {
- var locales2rules = {
- 'af': 3,
- 'ak': 4,
- 'am': 4,
- 'ar': 1,
- 'asa': 3,
- 'az': 0,
- 'be': 11,
- 'bem': 3,
- 'bez': 3,
- 'bg': 3,
- 'bh': 4,
- 'bm': 0,
- 'bn': 3,
- 'bo': 0,
- 'br': 20,
- 'brx': 3,
- 'bs': 11,
- 'ca': 3,
- 'cgg': 3,
- 'chr': 3,
- 'cs': 12,
- 'cy': 17,
- 'da': 3,
- 'de': 3,
- 'dv': 3,
- 'dz': 0,
- 'ee': 3,
- 'el': 3,
- 'en': 3,
- 'eo': 3,
- 'es': 3,
- 'et': 3,
- 'eu': 3,
- 'fa': 0,
- 'ff': 5,
- 'fi': 3,
- 'fil': 4,
- 'fo': 3,
- 'fr': 5,
- 'fur': 3,
- 'fy': 3,
- 'ga': 8,
- 'gd': 24,
- 'gl': 3,
- 'gsw': 3,
- 'gu': 3,
- 'guw': 4,
- 'gv': 23,
- 'ha': 3,
- 'haw': 3,
- 'he': 2,
- 'hi': 4,
- 'hr': 11,
- 'hu': 0,
- 'id': 0,
- 'ig': 0,
- 'ii': 0,
- 'is': 3,
- 'it': 3,
- 'iu': 7,
- 'ja': 0,
- 'jmc': 3,
- 'jv': 0,
- 'ka': 0,
- 'kab': 5,
- 'kaj': 3,
- 'kcg': 3,
- 'kde': 0,
- 'kea': 0,
- 'kk': 3,
- 'kl': 3,
- 'km': 0,
- 'kn': 0,
- 'ko': 0,
- 'ksb': 3,
- 'ksh': 21,
- 'ku': 3,
- 'kw': 7,
- 'lag': 18,
- 'lb': 3,
- 'lg': 3,
- 'ln': 4,
- 'lo': 0,
- 'lt': 10,
- 'lv': 6,
- 'mas': 3,
- 'mg': 4,
- 'mk': 16,
- 'ml': 3,
- 'mn': 3,
- 'mo': 9,
- 'mr': 3,
- 'ms': 0,
- 'mt': 15,
- 'my': 0,
- 'nah': 3,
- 'naq': 7,
- 'nb': 3,
- 'nd': 3,
- 'ne': 3,
- 'nl': 3,
- 'nn': 3,
- 'no': 3,
- 'nr': 3,
- 'nso': 4,
- 'ny': 3,
- 'nyn': 3,
- 'om': 3,
- 'or': 3,
- 'pa': 3,
- 'pap': 3,
- 'pl': 13,
- 'ps': 3,
- 'pt': 3,
- 'rm': 3,
- 'ro': 9,
- 'rof': 3,
- 'ru': 11,
- 'rwk': 3,
- 'sah': 0,
- 'saq': 3,
- 'se': 7,
- 'seh': 3,
- 'ses': 0,
- 'sg': 0,
- 'sh': 11,
- 'shi': 19,
- 'sk': 12,
- 'sl': 14,
- 'sma': 7,
- 'smi': 7,
- 'smj': 7,
- 'smn': 7,
- 'sms': 7,
- 'sn': 3,
- 'so': 3,
- 'sq': 3,
- 'sr': 11,
- 'ss': 3,
- 'ssy': 3,
- 'st': 3,
- 'sv': 3,
- 'sw': 3,
- 'syr': 3,
- 'ta': 3,
- 'te': 3,
- 'teo': 3,
- 'th': 0,
- 'ti': 4,
- 'tig': 3,
- 'tk': 3,
- 'tl': 4,
- 'tn': 3,
- 'to': 0,
- 'tr': 0,
- 'ts': 3,
- 'tzm': 22,
- 'uk': 11,
- 'ur': 3,
- 've': 3,
- 'vi': 0,
- 'vun': 3,
- 'wa': 4,
- 'wae': 3,
- 'wo': 0,
- 'xh': 3,
- 'xog': 3,
- 'yo': 0,
- 'zh': 0,
- 'zu': 3
- };
-
- // utility functions for plural rules methods
- function isIn(n, list) {
- return list.indexOf(n) !== -1;
- }
- function isBetween(n, start, end) {
- return start <= n && n <= end;
- }
-
- // list of all plural rules methods:
- // map an integer to the plural form name to use
- var pluralRules = {
- '0': function(n) {
- return 'other';
- },
- '1': function(n) {
- if ((isBetween((n % 100), 3, 10)))
- return 'few';
- if (n === 0)
- return 'zero';
- if ((isBetween((n % 100), 11, 99)))
- return 'many';
- if (n == 2)
- return 'two';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '2': function(n) {
- if (n !== 0 && (n % 10) === 0)
- return 'many';
- if (n == 2)
- return 'two';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '3': function(n) {
- if (n == 1)
- return 'one';
- return 'other';
- },
- '4': function(n) {
- if ((isBetween(n, 0, 1)))
- return 'one';
- return 'other';
- },
- '5': function(n) {
- if ((isBetween(n, 0, 2)) && n != 2)
- return 'one';
- return 'other';
- },
- '6': function(n) {
- if (n === 0)
- return 'zero';
- if ((n % 10) == 1 && (n % 100) != 11)
- return 'one';
- return 'other';
- },
- '7': function(n) {
- if (n == 2)
- return 'two';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '8': function(n) {
- if ((isBetween(n, 3, 6)))
- return 'few';
- if ((isBetween(n, 7, 10)))
- return 'many';
- if (n == 2)
- return 'two';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '9': function(n) {
- if (n === 0 || n != 1 && (isBetween((n % 100), 1, 19)))
- return 'few';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '10': function(n) {
- if ((isBetween((n % 10), 2, 9)) && !(isBetween((n % 100), 11, 19)))
- return 'few';
- if ((n % 10) == 1 && !(isBetween((n % 100), 11, 19)))
- return 'one';
- return 'other';
- },
- '11': function(n) {
- if ((isBetween((n % 10), 2, 4)) && !(isBetween((n % 100), 12, 14)))
- return 'few';
- if ((n % 10) === 0 ||
- (isBetween((n % 10), 5, 9)) ||
- (isBetween((n % 100), 11, 14)))
- return 'many';
- if ((n % 10) == 1 && (n % 100) != 11)
- return 'one';
- return 'other';
- },
- '12': function(n) {
- if ((isBetween(n, 2, 4)))
- return 'few';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '13': function(n) {
- if ((isBetween((n % 10), 2, 4)) && !(isBetween((n % 100), 12, 14)))
- return 'few';
- if (n != 1 && (isBetween((n % 10), 0, 1)) ||
- (isBetween((n % 10), 5, 9)) ||
- (isBetween((n % 100), 12, 14)))
- return 'many';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '14': function(n) {
- if ((isBetween((n % 100), 3, 4)))
- return 'few';
- if ((n % 100) == 2)
- return 'two';
- if ((n % 100) == 1)
- return 'one';
- return 'other';
- },
- '15': function(n) {
- if (n === 0 || (isBetween((n % 100), 2, 10)))
- return 'few';
- if ((isBetween((n % 100), 11, 19)))
- return 'many';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '16': function(n) {
- if ((n % 10) == 1 && n != 11)
- return 'one';
- return 'other';
- },
- '17': function(n) {
- if (n == 3)
- return 'few';
- if (n === 0)
- return 'zero';
- if (n == 6)
- return 'many';
- if (n == 2)
- return 'two';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '18': function(n) {
- if (n === 0)
- return 'zero';
- if ((isBetween(n, 0, 2)) && n !== 0 && n != 2)
- return 'one';
- return 'other';
- },
- '19': function(n) {
- if ((isBetween(n, 2, 10)))
- return 'few';
- if ((isBetween(n, 0, 1)))
- return 'one';
- return 'other';
- },
- '20': function(n) {
- if ((isBetween((n % 10), 3, 4) || ((n % 10) == 9)) && !(
- isBetween((n % 100), 10, 19) ||
- isBetween((n % 100), 70, 79) ||
- isBetween((n % 100), 90, 99)
- ))
- return 'few';
- if ((n % 1000000) === 0 && n !== 0)
- return 'many';
- if ((n % 10) == 2 && !isIn((n % 100), [12, 72, 92]))
- return 'two';
- if ((n % 10) == 1 && !isIn((n % 100), [11, 71, 91]))
- return 'one';
- return 'other';
- },
- '21': function(n) {
- if (n === 0)
- return 'zero';
- if (n == 1)
- return 'one';
- return 'other';
- },
- '22': function(n) {
- if ((isBetween(n, 0, 1)) || (isBetween(n, 11, 99)))
- return 'one';
- return 'other';
- },
- '23': function(n) {
- if ((isBetween((n % 10), 1, 2)) || (n % 20) === 0)
- return 'one';
- return 'other';
- },
- '24': function(n) {
- if ((isBetween(n, 3, 10) || isBetween(n, 13, 19)))
- return 'few';
- if (isIn(n, [2, 12]))
- return 'two';
- if (isIn(n, [1, 11]))
- return 'one';
- return 'other';
- }
- };
-
- // return a function that gives the plural form name for a given integer
- var index = locales2rules[lang.replace(/-.*$/, '')];
- if (!(index in pluralRules)) {
- console.warn('plural form unknown for [' + lang + ']');
- return function() { return 'other'; };
- }
- return pluralRules[index];
- }
-
- /**
- * pre-defined 'plural' macro
- */
- html10n.macros.plural = function(key, param, opts) {
- var str
- , n = parseFloat(param);
- if (isNaN(n))
- return;
-
- // initialize _pluralRules
- if (!this._pluralRules)
- this._pluralRules = getPluralRules(html10n.language);
- var index = this._pluralRules(n);
-
- // try to find a [zero|one|two] key if it's defined
- if (n === 0 && ('zero') in opts) {
- str = opts['zero'];
- } else if (n == 1 && ('one') in opts) {
- str = opts['one'];
- } else if (n == 2 && ('two') in opts) {
- str = opts['two'];
- } else if (index in opts) {
- str = opts[index];
- }
-
- return str;
- };
-
- /**
- * Localize a document
- * @param langs An array of lang codes defining fallbacks
- */
- html10n.localize = function(langs) {
- var that = this
- // if only one string => create an array
- if ('string' == typeof langs) langs = [langs]
-
- // Expand two-part locale specs
- var i=0
- langs.forEach(function(lang) {
- if(!lang) return;
- langs[i++] = lang;
- if(~lang.indexOf('-')) langs[i++] = lang.substr(0, lang.indexOf('-'));
- })
-
- this.build(langs, function(er, translations) {
- html10n.translations = translations
- html10n.translateElement(translations)
- that.trigger('localized')
- })
- }
-
- /**
- * Triggers the translation process
- * for an element
- * @param translations A hash of all translation strings
- * @param element A DOM element, if omitted, the document element will be used
- */
- html10n.translateElement = function(translations, element) {
- element = element || document.documentElement
-
- var children = element? getTranslatableChildren(element) : document.childNodes;
- for (var i=0, n=children.length; i < n; i++) {
- this.translateNode(translations, children[i])
- }
-
- // translate element itself if necessary
- this.translateNode(translations, element)
- }
-
- function asyncForEach(list, iterator, cb) {
- var i = 0
- , n = list.length
- iterator(list[i], i, function each(err) {
- if(err) console.error(err)
- i++
- if (i < n) return iterator(list[i],i, each);
- cb()
- })
- }
-
- function getTranslatableChildren(element) {
- if(!document.querySelectorAll) {
- if (!element) return []
- var nodes = element.getElementsByTagName('*')
- , l10nElements = []
- for (var i=0, n=nodes.length; i < n; i++) {
- if (nodes[i].getAttribute('data-l10n-id'))
- l10nElements.push(nodes[i]);
- }
- return l10nElements
- }
- return element.querySelectorAll('*[data-l10n-id]')
- }
-
- html10n.get = function(id, args) {
- var translations = html10n.translations
- if(!translations) return console.warn('No translations available (yet)')
- if(!translations[id]) return console.warn('Could not find string '+id)
-
- // apply macros
- var str = translations[id]
-
- str = substMacros(id, str, args)
-
- // apply args
- str = substArguments(str, args)
-
- return str
- }
-
- // replace {{arguments}} with their values or the
- // associated translation string (based on its key)
- function substArguments(str, args) {
- var reArgs = /\{\{\s*([a-zA-Z\.]+)\s*\}\}/
- , match
- var translations = html10n.translations;
- while (match = reArgs.exec(str)) {
- if (!match || match.length < 2)
- return str // argument key not found
-
- var arg = match[1]
- , sub = ''
- if (args && arg in args) {
- sub = args[arg]
- } else if (translations && arg in translations) {
- sub = translations[arg]
- } else {
- console.warn('Could not find argument {{' + arg + '}}')
- return str
- }
-
- str = str.substring(0, match.index) + sub + str.substr(match.index + match[0].length)
- }
-
- return str
- }
-
- // replace {[macros]} with their values
- function substMacros(key, str, args) {
- var regex = /\{\[\s*([a-zA-Z]+)\(([a-zA-Z]+)\)((\s*([a-zA-Z]+)\: ?([ a-zA-Z{}]+),?)+)*\s*\]\}/ //.exec('{[ plural(n) other: are {{n}}, one: is ]}')
- , match
-
- while(match = regex.exec(str)) {
- // a macro has been found
- // Note: at the moment, only one parameter is supported
- var macroName = match[1]
- , paramName = match[2]
- , optv = match[3]
- , opts = {}
-
- if (!(macroName in html10n.macros)) continue
-
- if(optv) {
- optv.match(/(?=\s*)([a-zA-Z]+)\: ?([ a-zA-Z{}]+)(?=,?)/g).forEach(function(arg) {
- var parts = arg.split(':')
- , name = parts[0]
- , value = parts[1].trim()
- opts[name] = value
- })
- }
-
- var param
- if (args && paramName in args) {
- param = args[paramName]
- } else if (paramName in html10n.translations) {
- param = translations[paramName]
- }
-
- // there's no macro parser: it has to be defined in html10n.macros
- var macro = html10n.macros[macroName]
- str = str.substr(0, match.index) + macro(key, param, opts) + str.substr(match.index+match[0].length)
- }
-
- return str
- }
-
- /**
- * Applies translations to a DOM node (recursive)
- */
- html10n.translateNode = function(translations, node) {
- var str = {}
-
- // get id
- str.id = node.getAttribute('data-l10n-id')
- if (!str.id) return
-
- if(!translations[str.id]) return console.warn('Couldn\'t find translation key '+str.id)
-
- // get args
- if(window.JSON) {
- str.args = JSON.parse(node.getAttribute('data-l10n-args'))
- }else{
- try{
- str.args = eval(node.getAttribute('data-l10n-args'))
- }catch(e) {
- console.warn('Couldn\'t parse args for '+str.id)
- }
- }
-
- str.str = html10n.get(str.id, str.args)
-
- // get attribute name to apply str to
- var prop
- , index = str.id.lastIndexOf('.')
- , attrList = // allowed attributes
- { "title": 1
- , "innerHTML": 1
- , "alt": 1
- , "textContent": 1
- , "value": 1
- , "placeholder": 1
- }
- if (index > 0 && str.id.substr(index + 1) in attrList) {
- // an attribute has been specified (example: "my_translation_key.placeholder")
- prop = str.id.substr(index + 1)
- } else { // no attribute: assuming text content by default
- prop = document.body.textContent ? 'textContent' : 'innerText'
- }
-
- // Apply translation
- if (node.children.length === 0 || prop != 'textContent') {
- node[prop] = str.str
- node.setAttribute("aria-label", str.str); // Sets the aria-label
- // The idea of the above is that we always have an aria value
- // This might be a bit of an abrupt solution but let's see how it goes
- } else {
- var children = node.childNodes,
- found = false
- for (var i=0, n=children.length; i < n; i++) {
- if (children[i].nodeType === 3 && /\S/.test(children[i].textContent)) {
- if (!found) {
- children[i].nodeValue = str.str
- found = true
- } else {
- children[i].nodeValue = ''
- }
- }
- }
- if (!found) {
- console.warn('Unexpected error: could not translate element content for key '+str.id, node)
- }
- }
- }
-
- /**
- * Builds a translation object from a list of langs (loads the necessary translations)
- * @param langs Array - a list of langs sorted by priority (default langs should go last)
- */
- html10n.build = function(langs, cb) {
- var that = this
- , build = {}
-
- asyncForEach(langs, function (lang, i, next) {
- if(!lang) return next();
- that.loader.load(lang, next)
- }, function() {
- var lang
- langs.reverse()
-
- // loop through the priority array...
- for (var i=0, n=langs.length; i < n; i++) {
- lang = langs[i]
-
- if(!lang) continue;
- if(!(lang in that.loader.langs)) {// uh, we don't have this lang availbable..
- // then check for related langs
- if(~lang.indexOf('-')) lang = lang.split('-')[0];
- for(var l in that.loader.langs) {
- if(lang != l && l.indexOf(lang) === 0) {
- lang = l
- break;
- }
- }
- if(lang != l) continue;
- }
-
- // ... and apply all strings of the current lang in the list
- // to our build object
- for (var string in that.loader.langs[lang]) {
- build[string] = that.loader.langs[lang][string]
- }
-
- // the last applied lang will be exposed as the
- // lang the page was translated to
- that.language = lang
- }
- cb(null, build)
- })
- }
-
- /**
- * Returns the language that was last applied to the translations hash
- * thus overriding most of the formerly applied langs
- */
- html10n.getLanguage = function() {
- return this.language;
- }
-
- /**
- * Returns the direction of the language returned be html10n#getLanguage
- */
- html10n.getDirection = function() {
- if(!this.language) return
- var langCode = this.language.indexOf('-') == -1? this.language : this.language.substr(0, this.language.indexOf('-'))
- return html10n.rtl.indexOf(langCode) == -1? 'ltr' : 'rtl'
- }
-
- /**
- * Index all s
- */
- html10n.index = function () {
- // Find all s
- var links = document.getElementsByTagName('link')
- , resources = []
- for (var i=0, n=links.length; i < n; i++) {
- if (links[i].type != 'application/l10n+json')
- continue;
- resources.push(links[i].href)
- }
- this.loader = new Loader(resources)
- this.trigger('indexed')
- }
-
- if (document.addEventListener) // modern browsers and IE9+
- document.addEventListener('DOMContentLoaded', function() {
- html10n.index()
- }, false)
- else if (window.attachEvent)
- window.attachEvent('onload', function() {
- html10n.index()
- }, false)
-
- // gettext-like shortcut
- if (window._ === undefined)
- window._ = html10n.get;
-
- return html10n
-})(window, document)
diff --git a/src/static/js/vendors/html10n.ts b/src/static/js/vendors/html10n.ts
new file mode 100644
index 000000000..39da71200
--- /dev/null
+++ b/src/static/js/vendors/html10n.ts
@@ -0,0 +1,993 @@
+import {Func} from "mocha";
+
+
+type PluralFunc = (n: number) => string
+
+export class Html10n {
+ public language?: string
+ private rtl: string[]
+ private _pluralRules?: PluralFunc
+ public mt: MicroEvent
+ private loader: Loader | undefined
+ public translations: Map
+ private macros: Map
+
+ constructor() {
+ this.language = undefined
+ this.rtl = ["ar","dv","fa","ha","he","ks","ku","ps","ur","yi"]
+ this.mt = new MicroEvent()
+ this.translations = new Map()
+ this.macros = new Map()
+
+ this.macros.set('plural', (_key: string, param:string, opts: any)=>{
+ let str
+ , n = parseFloat(param);
+ if (isNaN(n))
+ return;
+
+ // initialize _pluralRules
+ if (this._pluralRules === undefined) {
+ this._pluralRules = this.getPluralRules(this.language!);
+ }
+ let index = this._pluralRules!(n);
+
+ // try to find a [zero|one|two] key if it's defined
+ if (n === 0 && ('zero') in opts) {
+ str = opts['zero'];
+ } else if (n == 1 && ('one') in opts) {
+ str = opts['one'];
+ } else if (n == 2 && ('two') in opts) {
+ str = opts['two'];
+ } else if (index in opts) {
+ str = opts[index];
+ }
+
+ return str;
+ })
+
+ document.addEventListener('DOMContentLoaded', ()=> {
+ this.index()
+ }, false)
+ }
+
+ bind(event: string, fct: Func) {
+ this.mt.bind(event, fct)
+ }
+
+ /**
+ * Get rules for plural forms (shared with JetPack), see:
+ * http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html
+ * https://github.com/mozilla/addon-sdk/blob/master/python-lib/plural-rules-generator.p
+ *
+ * @param {string} lang
+ * locale (language) used.
+ *
+ * @return {PluralFunc}
+ * returns a function that gives the plural form name for a given integer:
+ * var fun = getPluralRules('en');
+ * fun(1) -> 'one'
+ * fun(0) -> 'other'
+ * fun(1000) -> 'other'.
+ */
+ getPluralRules(lang: string): PluralFunc {
+ const locales2rules = new Map([
+ ['af', 3],
+ ['ak', 4],
+ ['am', 4],
+ ['ar', 1],
+ ['asa', 3],
+ ['az', 0],
+ ['be', 11],
+ ['bem', 3],
+ ['bez', 3],
+ ['bg', 3],
+ ['bh', 4],
+ ['bm', 0],
+ ['bn', 3],
+ ['bo', 0],
+ ['br', 20],
+ ['brx', 3],
+ ['bs', 11],
+ ['ca', 3],
+ ['cgg', 3],
+ ['chr', 3],
+ ['cs', 12],
+ ['cy', 17],
+ ['da', 3],
+ ['de', 3],
+ ['dv', 3],
+ ['dz', 0],
+ ['ee', 3],
+ ['el', 3],
+ ['en', 3],
+ ['eo', 3],
+ ['es', 3],
+ ['et', 3],
+ ['eu', 3],
+ ['fa', 0],
+ ['ff', 5],
+ ['fi', 3],
+ ['fil', 4],
+ ['fo', 3],
+ ['fr', 5],
+ ['fur', 3],
+ ['fy', 3],
+ ['ga', 8],
+ ['gd', 24],
+ ['gl', 3],
+ ['gsw', 3],
+ ['gu', 3],
+ ['guw', 4],
+ ['gv', 23],
+ ['ha', 3],
+ ['haw', 3],
+ ['he', 2],
+ ['hi', 4],
+ ['hr', 11],
+ ['hu', 0],
+ ['id', 0],
+ ['ig', 0],
+ ['ii', 0],
+ ['is', 3],
+ ['it', 3],
+ ['iu', 7],
+ ['ja', 0],
+ ['jmc', 3],
+ ['jv', 0],
+ ['ka', 0],
+ ['kab', 5],
+ ['kaj', 3],
+ ['kcg', 3],
+ ['kde', 0],
+ ['kea', 0],
+ ['kk', 3],
+ ['kl', 3],
+ ['km', 0],
+ ['kn', 0],
+ ['ko', 0],
+ ['ksb', 3],
+ ['ksh', 21],
+ ['ku', 3],
+ ['kw', 7],
+ ['lag', 18],
+ ['lb', 3],
+ ['lg', 3],
+ ['ln', 4],
+ ['lo', 0],
+ ['lt', 10],
+ ['lv', 6],
+ ['mas', 3],
+ ['mg', 4],
+ ['mk', 16],
+ ['ml', 3],
+ ['mn', 3],
+ ['mo', 9],
+ ['mr', 3],
+ ['ms', 0],
+ ['mt', 15],
+ ['my', 0],
+ ['nah', 3],
+ ['naq', 7],
+ ['nb', 3],
+ ['nd', 3],
+ ['ne', 3],
+ ['nl', 3],
+ ['nn', 3],
+ ['no', 3],
+ ['nr', 3],
+ ['nso', 4],
+ ['ny', 3],
+ ['nyn', 3],
+ ['om', 3],
+ ['or', 3],
+ ['pa', 3],
+ ['pap', 3],
+ ['pl', 13],
+ ['ps', 3],
+ ['pt', 3],
+ ['rm', 3],
+ ['ro', 9],
+ ['rof', 3],
+ ['ru', 11],
+ ['rwk', 3],
+ ['sah', 0],
+ ['saq', 3],
+ ['se', 7],
+ ['seh', 3],
+ ['ses', 0],
+ ['sg', 0],
+ ['sh', 11],
+ ['shi', 19],
+ ['sk', 12],
+ ['sl', 14],
+ ['sma', 7],
+ ['smi', 7],
+ ['smj', 7],
+ ['smn', 7],
+ ['sms', 7],
+ ['sn', 3],
+ ['so', 3],
+ ['sq', 3],
+ ['sr', 11],
+ ['ss', 3],
+ ['ssy', 3],
+ ['st', 3],
+ ['sv', 3],
+ ['sw', 3],
+ ['syr', 3],
+ ['ta', 3],
+ ['te', 3],
+ ['teo', 3],
+ ['th', 0],
+ ['ti', 4],
+ ['tig', 3],
+ ['tk', 3],
+ ['tl', 4],
+ ['tn', 3],
+ ['to', 0],
+ ['tr', 0],
+ ['ts', 3],
+ ['tzm', 22],
+ ['uk', 11],
+ ['ur', 3],
+ ['ve', 3],
+ ['vi', 0],
+ ['vun', 3],
+ ['wa', 4],
+ ['wae', 3],
+ ['wo', 0],
+ ['xh', 3],
+ ['xog', 3],
+ ['yo', 0],
+ ['zh', 0],
+ ['zu', 3]
+ ])
+
+ function isIn(n: number, list: number[]) {
+ return list.indexOf(n) !== -1;
+ }
+ function isBetween(n: number, start: number, end: number) {
+ return start <= n && n <= end;
+ }
+
+ type PluralFunc = (n: number) => string
+
+
+ const pluralRules: {
+ [key: string]: PluralFunc
+ } = {
+ '0': function() {
+ return 'other';
+ },
+ '1': function(n: number) {
+ if ((isBetween((n % 100), 3, 10)))
+ return 'few';
+ if (n === 0)
+ return 'zero';
+ if ((isBetween((n % 100), 11, 99)))
+ return 'many';
+ if (n == 2)
+ return 'two';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '2': function(n: number) {
+ if (n !== 0 && (n % 10) === 0)
+ return 'many';
+ if (n == 2)
+ return 'two';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '3': function(n: number) {
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '4': function(n: number) {
+ if ((isBetween(n, 0, 1)))
+ return 'one';
+ return 'other';
+ },
+ '5': function(n: number) {
+ if ((isBetween(n, 0, 2)) && n != 2)
+ return 'one';
+ return 'other';
+ },
+ '6': function(n: number) {
+ if (n === 0)
+ return 'zero';
+ if ((n % 10) == 1 && (n % 100) != 11)
+ return 'one';
+ return 'other';
+ },
+ '7': function(n: number) {
+ if (n == 2)
+ return 'two';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '8': function(n: number) {
+ if ((isBetween(n, 3, 6)))
+ return 'few';
+ if ((isBetween(n, 7, 10)))
+ return 'many';
+ if (n == 2)
+ return 'two';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '9': function(n: number) {
+ if (n === 0 || n != 1 && (isBetween((n % 100), 1, 19)))
+ return 'few';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '10': function(n: number) {
+ if ((isBetween((n % 10), 2, 9)) && !(isBetween((n % 100), 11, 19)))
+ return 'few';
+ if ((n % 10) == 1 && !(isBetween((n % 100), 11, 19)))
+ return 'one';
+ return 'other';
+ },
+ '11': function(n: number) {
+ if ((isBetween((n % 10), 2, 4)) && !(isBetween((n % 100), 12, 14)))
+ return 'few';
+ if ((n % 10) === 0 ||
+ (isBetween((n % 10), 5, 9)) ||
+ (isBetween((n % 100), 11, 14)))
+ return 'many';
+ if ((n % 10) == 1 && (n % 100) != 11)
+ return 'one';
+ return 'other';
+ },
+ '12': function(n: number) {
+ if ((isBetween(n, 2, 4)))
+ return 'few';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '13': function(n: number) {
+ if ((isBetween((n % 10), 2, 4)) && !(isBetween((n % 100), 12, 14)))
+ return 'few';
+ if (n != 1 && (isBetween((n % 10), 0, 1)) ||
+ (isBetween((n % 10), 5, 9)) ||
+ (isBetween((n % 100), 12, 14)))
+ return 'many';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '14': function(n: number) {
+ if ((isBetween((n % 100), 3, 4)))
+ return 'few';
+ if ((n % 100) == 2)
+ return 'two';
+ if ((n % 100) == 1)
+ return 'one';
+ return 'other';
+ },
+ '15': function(n: number) {
+ if (n === 0 || (isBetween((n % 100), 2, 10)))
+ return 'few';
+ if ((isBetween((n % 100), 11, 19)))
+ return 'many';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '16': function(n: number) {
+ if ((n % 10) == 1 && n != 11)
+ return 'one';
+ return 'other';
+ },
+ '17': function(n: number) {
+ if (n == 3)
+ return 'few';
+ if (n === 0)
+ return 'zero';
+ if (n == 6)
+ return 'many';
+ if (n == 2)
+ return 'two';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '18': function(n: number) {
+ if (n === 0)
+ return 'zero';
+ if ((isBetween(n, 0, 2)) && n !== 0 && n != 2)
+ return 'one';
+ return 'other';
+ },
+ '19': function(n: number) {
+ if ((isBetween(n, 2, 10)))
+ return 'few';
+ if ((isBetween(n, 0, 1)))
+ return 'one';
+ return 'other';
+ },
+ '20': function(n: number) {
+ if ((isBetween((n % 10), 3, 4) || ((n % 10) == 9)) && !(
+ isBetween((n % 100), 10, 19) ||
+ isBetween((n % 100), 70, 79) ||
+ isBetween((n % 100), 90, 99)
+ ))
+ return 'few';
+ if ((n % 1000000) === 0 && n !== 0)
+ return 'many';
+ if ((n % 10) == 2 && !isIn((n % 100), [12, 72, 92]))
+ return 'two';
+ if ((n % 10) == 1 && !isIn((n % 100), [11, 71, 91]))
+ return 'one';
+ return 'other';
+ },
+ '21': function(n: number) {
+ if (n === 0)
+ return 'zero';
+ if (n == 1)
+ return 'one';
+ return 'other';
+ },
+ '22': function(n: number) {
+ if ((isBetween(n, 0, 1)) || (isBetween(n, 11, 99)))
+ return 'one';
+ return 'other';
+ },
+ '23': function(n: number) {
+ if ((isBetween((n % 10), 1, 2)) || (n % 20) === 0)
+ return 'one';
+ return 'other';
+ },
+ '24': function(n: number) {
+ if ((isBetween(n, 3, 10) || isBetween(n, 13, 19)))
+ return 'few';
+ if (isIn(n, [2, 12]))
+ return 'two';
+ if (isIn(n, [1, 11]))
+ return 'one';
+ return 'other';
+ }
+ };
+
+ const index = locales2rules.get(lang.replace(/-.*$/, ''));
+ // @ts-ignore
+ if (!(index in pluralRules)) {
+ console.warn('plural form unknown for [' + lang + ']');
+ return function() { return 'other'; };
+ }
+ // @ts-ignore
+ return pluralRules[index];
+ }
+
+ getTranslatableChildren(element: HTMLElement) {
+ return element.querySelectorAll('*[data-l10n-id]')
+ }
+
+ localize(langs: (string|undefined)[]|string) {
+ console.log('Available langs ', langs)
+ if ('string' === typeof langs) {
+ langs = [langs];
+ }
+ let i = 0
+ langs.forEach((lang) => {
+ if(!lang) return;
+ langs[i++] = lang;
+ if(~lang.indexOf('-')) langs[i++] = lang.substring(0, lang.indexOf('-'));
+ })
+
+ this.build(langs, (er: null, translations: Map) =>{
+ this.translations = translations
+ this.translateElement(translations)
+ this.mt.trigger('localized')
+ })
+ }
+
+ /**
+ * Triggers the translation process
+ * for an element
+ * @param translations A hash of all translation strings
+ * @param element A DOM element, if omitted, the document element will be used
+ */
+ translateElement(translations: Map, element?: HTMLElement) {
+ element = element || document.documentElement
+ const children = element ? this.getTranslatableChildren(element): document.childNodes
+
+ for (let child of children) {
+ this.translateNode(translations, child as HTMLElement)
+ }
+
+ // translate element itself if necessary
+ this.translateNode(translations, element)
+ }
+
+ asyncForEach(list: (string|undefined)[], iterator: any, cb: Function) {
+ let i = 0
+ , n = list.length
+ iterator(list[i], i, function each(err?: string) {
+ if(err) console.error(err)
+ i++
+ if (i < n) return iterator(list[i],i, each);
+ cb()
+ })
+ }
+
+ /**
+ * Builds a translation object from a list of langs (loads the necessary translations)
+ * @param langs Array - a list of langs sorted by priority (default langs should go last)
+ * @param cb Function - a callback that will be called once all langs have been loaded
+ */
+ build(langs: (string|undefined)[], cb: Function) {
+ const build = new Map()
+
+ this.asyncForEach(langs, (lang: string, _i: number, next:LoaderFunc)=> {
+ if(!lang) return next();
+ this.loader!.load(lang, next)
+ }, () =>{
+ let lang;
+ langs.reverse()
+
+ // loop through the priority array...
+ for (let i=0, n=langs.length; i < n; i++) {
+ lang = langs[i]
+ if(!lang) continue;
+ if(!(lang in langs)) {// uh, we don't have this lang availbable..
+ // then check for related langs
+ if(~lang.indexOf('-') != -1) {
+ lang = lang.split('-')[0];
+ }
+ let l: string|undefined = ''
+ for(l of langs) {
+ if(l && lang != l && l.indexOf(lang) === 0) {
+ lang = l
+ break;
+ }
+ }
+
+ // @ts-ignore
+ if(lang != l) continue;
+ }
+
+
+ // ... and apply all strings of the current lang in the list
+ // to our build object
+ //lang = "de"
+ if (this.loader!.langs.has(lang)) {
+ for (let string in this.loader!.langs.get(lang)) {
+ build.set(string,this.loader!.langs.get(lang)[string])
+ }
+ this.language = lang
+ } else {
+ const loaderLang = lang.split('-')[0]
+ for (let string in this.loader!.langs.get(loaderLang)) {
+ build.set(string,this.loader!.langs.get(loaderLang)[string])
+ }
+ this.language = loaderLang
+ }
+
+ // the last applied lang will be exposed as the
+ // lang the page was translated to
+ }
+ cb(null, build)
+ })
+ }
+
+ /**
+ * Returns the language that was last applied to the translations hash
+ * thus overriding most of the formerly applied langs
+ */
+ getLanguage() {
+ return this.language
+ }
+
+ /**
+ * Returns the direction of the language returned be html10n#getLanguage
+ */
+ getDirection() {
+ if(!this.language) return
+ const langCode = this.language.indexOf('-') == -1? this.language : this.language.substring(0, this.language.indexOf('-'))
+ return this.rtl.indexOf(langCode) == -1? 'ltr' : 'rtl'
+ }
+
+
+ /**
+ * Index all s
+ */
+ index() {
+ // Find all s
+ const links = document.getElementsByTagName('link')
+ , resources = []
+ for (let i=0, n=links.length; i < n; i++) {
+ if (links[i].type != 'application/l10n+json')
+ continue;
+ resources.push(links[i].href)
+ }
+ this.loader = new Loader(resources)
+ this.mt.trigger('indexed')
+ }
+
+ translateNode(translations: Map, node: HTMLElement) {
+ const str: {
+ id?: string,
+ args?: any,
+ str?: string
+
+ } = {}
+
+ // get id
+ str.id = node.getAttribute('data-l10n-id') as string
+ if (!str.id) return
+
+ if(!translations.get(str.id)) return console.warn('Couldn\'t find translation key '+str.id)
+
+ // get args
+ if(window.JSON) {
+ str.args = JSON.parse(node.getAttribute('data-l10n-args') as string)
+ }else{
+ try{
+ //str.args = eval(node.getAttribute('data-l10n-args') as string)
+ console.error("Old eval method invoked!!")
+ }catch(e) {
+ console.warn('Couldn\'t parse args for '+str.id)
+ }
+ }
+
+ str.str = this.get(str.id, str.args)
+
+ // get attribute name to apply str to
+ let prop
+ , index = str.id.lastIndexOf('.')
+ , attrList = // allowed attributes
+ { "title": 1
+ , "innerHTML": 1
+ , "alt": 1
+ , "textContent": 1
+ , "value": 1
+ , "placeholder": 1
+ }
+ if (index > 0 && str.id.substring(index + 1) in attrList) {
+ // an attribute has been specified (example: "my_translation_key.placeholder")
+ prop = str.id.substring(index + 1)
+ } else { // no attribute: assuming text content by default
+ prop = document.body.textContent ? 'textContent' : 'innerText'
+ }
+
+ // Apply translation
+ if (node.children.length === 0 || prop != 'textContent') {
+ // @ts-ignore
+ node[prop] = str.str!
+ node.setAttribute("aria-label", str.str!); // Sets the aria-label
+ // The idea of the above is that we always have an aria value
+ // This might be a bit of an abrupt solution but let's see how it goes
+ } else {
+ let children = node.childNodes,
+ found = false
+ let i = 0, n = children.length;
+ for (; i < n; i++) {
+ if (children[i].nodeType === 3 && /\S/.test(children[i].textContent!)) {
+ if (!found) {
+ children[i].nodeValue = str.str!
+ found = true
+ } else {
+ children[i].nodeValue = ''
+ }
+ }
+ }
+ if (!found) {
+ console.warn('Unexpected error: could not translate element content for key '+str.id, node)
+ }
+ }
+ }
+
+ get(id: string, args?:any) {
+ let translations = this.translations
+ if(!translations) return console.warn('No translations available (yet)')
+ if(!translations.get(id)) return console.warn('Could not find string '+id)
+
+ // apply macros
+ let str = translations.get(id)
+
+ str = this.substMacros(id, str, args)
+
+ // apply args
+ str = this.substArguments(str, args)
+
+ return str
+ }
+
+ substMacros(key: string, str:string, args:any) {
+ let regex = /\{\[\s*([a-zA-Z]+)\(([a-zA-Z]+)\)((\s*([a-zA-Z]+)\: ?([ a-zA-Z{}]+),?)+)*\s*\]\}/ //.exec('{[ plural(n) other: are {{n}}, one: is ]}')
+ , match
+
+ while(match = regex.exec(str)) {
+ // a macro has been found
+ // Note: at the moment, only one parameter is supported
+ let macroName = match[1]
+ , paramName = match[2]
+ , optv = match[3]
+ , opts: {[key:string]:any} = {}
+
+ if (!(this.macros.has(macroName))) continue
+
+ if(optv) {
+ optv.match(/(?=\s*)([a-zA-Z]+)\: ?([ a-zA-Z{}]+)(?=,?)/g)!.forEach(function(arg) {
+ const parts = arg.split(':')
+ , name = parts[0];
+ opts[name] = parts[1].trim()
+ })
+ }
+
+ let param
+ if (args && paramName in args) {
+ param = args[paramName]
+ } else if (paramName in this.translations) {
+ param = this.translations.get(paramName)
+ }
+
+ // there's no macro parser: it has to be defined in html10n.macros
+ let macro = this.macros.get(macroName)!
+ str = str.substring(0, match.index) + macro(key, param, opts) + str.substring(match.index+match[0].length)
+ }
+
+ return str
+ }
+
+ substArguments(str: string, args:any) {
+ let reArgs = /\{\{\s*([a-zA-Z\.]+)\s*\}\}/
+ , match
+ let translations = this.translations;
+ while (match = reArgs.exec(str)) {
+ if (!match || match.length < 2)
+ return str // argument key not found
+
+ let arg = match[1]
+ , sub = ''
+ if (args && arg in args) {
+ sub = args[arg]
+ } else if (translations && arg in translations) {
+ sub = translations.get(arg)
+ } else {
+ console.warn('Could not find argument {{' + arg + '}}')
+ return str
+ }
+
+ str = str.substring(0, match.index) + sub + str.substring(match.index + match[0].length)
+ }
+
+ return str
+ }
+
+}
+
+
+class MicroEvent {
+ private events: Map
+
+ constructor() {
+ this.events = new Map();
+ }
+
+ bind(event: string, fct: Func) {
+ if (this.events.get(event) === undefined) {
+ this.events.set(event, []);
+ }
+
+ this.events.get(event)!.push(fct);
+ }
+
+ unbind(event: string, fct: Func) {
+ if (this.events.get(event) === undefined) {
+ return;
+ }
+
+ const index = this.events.get(event)!.indexOf(fct);
+ if (index !== -1) {
+ this.events.get(event)!.splice(index, 1);
+ }
+ }
+
+ trigger(event: string, ...args: any[]) {
+ if (this.events.get(event) === undefined) {
+ return;
+ }
+
+ for (const fct of this.events.get(event)!) {
+ fct(...args);
+ }
+ }
+
+ mixin(destObject: any) {
+ const props = ['bind', 'unbind', 'trigger'];
+ if (destObject !== undefined) {
+ for (const prop of props) {
+ // @ts-ignore
+ destObject[prop] = this[prop];
+ }
+ }
+ }
+}
+
+type LoaderFunc = () => void
+
+type ErrorFunc = (data?:any)=>void
+
+class Loader {
+ private resources: any
+ private cache: Map
+ langs: Map
+
+ constructor(resources: any) {
+ this.resources = resources;
+ this.cache = new Map();
+ this.langs = new Map();
+ }
+
+ load(lang: string, callback: LoaderFunc) {
+ if (this.langs.get(lang) !== undefined) {
+ callback();
+ return;
+ }
+
+ if (this.resources.length > 0) {
+ let reqs = 0
+ for (const resource of this.resources) {
+ this.fetch(resource, lang, (e)=> {
+ reqs++;
+ if (e) console.warn(e)
+
+ if (reqs < this.resources.length) return;// Call back once all reqs are completed
+ callback && callback()
+ })
+ }
+ }
+ }
+
+ fetch(href: string, lang: string, callback: ErrorFunc) {
+
+ if (this.cache.get(href)) {
+ this.parse(lang, href, this.cache.get(href), callback)
+ return;
+ }
+
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', href, /*async: */true)
+ if (xhr.overrideMimeType) {
+ xhr.overrideMimeType('application/json; charset=utf-8');
+ }
+ xhr.onreadystatechange = ()=> {
+ if (xhr.readyState == 4) {
+ if (xhr.status == 200 || xhr.status === 0) {
+ const data = JSON.parse(xhr.responseText);
+ this.cache.set(href, data)
+ // Pass on the contents for parsing
+ this.parse(lang, href, data, callback)
+ } else {
+ callback(new Error('Failed to load '+href))
+ }
+ }
+ };
+ xhr.send(null);
+ }
+
+
+ parse(lang: string, href: string, data: {
+ [key: string]: string
+ }, callback: ErrorFunc) {
+ if ('object' !== typeof data) {
+ callback(new Error('A file couldn\'t be parsed as json.'))
+ return
+ }
+
+ function getBcp47LangCode(browserLang: string) {
+ const bcp47Lang = browserLang.toLowerCase();
+
+ // Browser => BCP 47
+ const langCodeMap = new Map([
+ ['zh-cn', 'zh-hans-cn'],
+ ['zh-hk', 'zh-hant-hk'],
+ ['zh-mo', 'zh-hant-mo'],
+ ['zh-my', 'zh-hans-my'],
+ ['zh-sg', 'zh-hans-sg'],
+ ['zh-tw', 'zh-hant-tw'],
+ ])
+
+ return langCodeMap.get(bcp47Lang) ?? bcp47Lang;
+ }
+
+ // Issue #6129: Fix exceptions
+ // NOTE: translatewiki.net use all lowercase form by default ('en-gb' insted of 'en-GB')
+ function getJsonLangCode(bcp47Lang: string) {
+ const jsonLang = bcp47Lang.toLowerCase();
+ // BCP 47 => JSON
+ const langCodeMap = new Map([
+ ['sr-ec', 'sr-cyrl'],
+ ['sr-el', 'sr-latn'],
+ ['zh-hk', 'zh-hant-hk'],
+ ])
+
+ return langCodeMap.get(jsonLang) ?? jsonLang;
+ }
+
+ let bcp47LangCode = getBcp47LangCode(lang);
+ let jsonLangCode = getJsonLangCode(bcp47LangCode);
+
+ if (!data[jsonLangCode]) {
+ // lang not found
+ // This may be due to formatting (expected 'ru' but browser sent 'ru-RU')
+ // Set err msg before mutating lang (we may need this later)
+ const msg = 'Couldn\'t find translations for ' + lang +
+ '(lowercase BCP 47 lang tag ' + bcp47LangCode +
+ ', JSON lang code ' + jsonLangCode + ')';
+ // Check for '-' (BCP 47 'ROOT-SCRIPT-REGION-VARIANT') and fallback until found data or ROOT
+ // - 'ROOT-SCRIPT-REGION': 'zh-Hans-CN'
+ // - 'ROOT-SCRIPT': 'zh-Hans'
+ // - 'ROOT-REGION': 'en-GB'
+ // - 'ROOT-VARIANT': 'be-tarask'
+ while (!data[jsonLangCode] && bcp47LangCode.lastIndexOf('-') > -1) {
+ // ROOT-SCRIPT-REGION-VARIANT formatting detected
+ bcp47LangCode = bcp47LangCode.substring(0, bcp47LangCode.lastIndexOf('-')); // set lang to ROOT lang
+ jsonLangCode = getJsonLangCode(bcp47LangCode);
+ }
+
+ if (!data[jsonLangCode]) {
+ // ROOT lang not found. (e.g 'zh')
+ // Loop through langs data. Maybe we have a variant? e.g (zh-hans)
+ let l; // langs item. Declare outside of loop
+
+ for (l in data) {
+ // Is not ROOT?
+ // And is variant of ROOT?
+ // (NOTE: index of ROOT equals 0 would cause unexpected ISO 639-1 vs. 639-3 issues,
+ // so append dash into query string)
+ // And is known lang?
+ if (bcp47LangCode != l && l.indexOf(lang + '-') === 0 && data[l]) {
+ bcp47LangCode = l; // set lang to ROOT-SCRIPT (e.g 'zh-hans')
+ jsonLangCode = getJsonLangCode(bcp47LangCode);
+ break;
+ }
+ }
+
+ // Did we find a variant? If not, return err.
+ if (bcp47LangCode != l) {
+ return callback(new Error(msg));
+ }
+ }
+ }
+
+
+ lang = jsonLangCode
+
+ if('string' === typeof data[lang]) {
+ // Import rule
+
+ // absolute path
+ let importUrl = data[lang];
+
+ // relative path
+ if(data[lang].indexOf("http") != 0 && data[lang].indexOf("/") != 0) {
+ importUrl = href+"/../"+data[lang]
+ }
+
+ this.fetch(importUrl, lang, callback)
+ return
+ }
+
+ if ('object' != typeof data[lang]) {
+ callback(new Error('Translations should be specified as JSON objects!'))
+ return
+ }
+
+ this.langs.set(lang,data[lang])
+ // TODO: Also store accompanying langs
+ callback()
+ }
+}
+
+export default new Html10n()
diff --git a/src/static/js/vendors/nice-select.js b/src/static/js/vendors/nice-select.js
index d19de5332..447ff6413 100644
--- a/src/static/js/vendors/nice-select.js
+++ b/src/static/js/vendors/nice-select.js
@@ -110,10 +110,10 @@
$dropdown.find('.list').css('min-width', $dropdown.outerWidth() + 'px');
}
- $listHeight = $dropdown.find('.list').outerHeight();
- $top = $dropdown.parent().offset().top;
- $bottom = $('body').height() - $top;
- $maxListHeight = $bottom - $dropdown.outerHeight() - 20;
+ let $listHeight = $dropdown.find('.list').outerHeight();
+ let $top = $dropdown.parent().offset().top;
+ let $bottom = $('body').height() - $top;
+ let $maxListHeight = $bottom - $dropdown.outerHeight() - 20;
if ($maxListHeight < 200) {
$dropdown.addClass('reverse');
$maxListHeight = 250;
diff --git a/src/templates/pad.html b/src/templates/pad.html
index c0c56bf24..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"); %>
@@ -442,67 +439,11 @@
<% e.begin_block("scripts"); %>
-
-
-
-
-
-
+
<% e.begin_block("customScripts"); %>
<% e.end_block(); %>
-
-
-
<% e.end_block(); %>
diff --git a/src/templates/padBootstrap.js b/src/templates/padBootstrap.js
new file mode 100644
index 000000000..c86d170c1
--- /dev/null
+++ b/src/templates/padBootstrap.js
@@ -0,0 +1,45 @@
+
+(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.
+ randomVersionString: <%-JSON.stringify(settings.randomVersionString)%>,
+ };
+
+ // Allow other frames to access this frame's modules.
+ //window.require.resolveTmp = require.resolve('ep_etherpad-lite/static/js/pad_cookie');
+
+ const basePath = new URL('..', window.location.href).pathname;
+ window.$ = window.jQuery = require('../../src/static/js/rjquery').jQuery;
+ window.browser = require('../../src/static/js/vendors/browser');
+ const pad = require('../../src/static/js/pad');
+ pad.baseURL = basePath;
+ window.plugins = require('../../src/static/js/pluginfw/client_plugins');
+ const hooks = require('../../src/static/js/pluginfw/hooks');
+
+ // TODO: These globals shouldn't exist.
+ window.pad = pad.pad;
+ window.chat = require('../../src/static/js/chat').chat;
+ 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([
+ <% for (const module of pluginModules) { %>
+ [<%- JSON.stringify(module) %>, require("../../src/plugin_packages/"+<%- JSON.stringify(module) %>)],
+ <% } %>
+]));
+ // Mechanism for tests to register hook functions (install fake plugins).
+ window._postPluginUpdateForTestingDone = false;
+ if (window._postPluginUpdateForTesting != null) window._postPluginUpdateForTesting();
+ window._postPluginUpdateForTestingDone = true;
+ window.pluginDefs = require('../../src/static/js/pluginfw/plugin_defs');
+ pad.init();
+ await new Promise((resolve) => $(resolve));
+ await hooks.aCallAll('documentReady');
+})();
diff --git a/src/templates/padViteBootstrap.js b/src/templates/padViteBootstrap.js
new file mode 100644
index 000000000..05f759077
--- /dev/null
+++ b/src/templates/padViteBootstrap.js
@@ -0,0 +1,41 @@
+window.$ = window.jQuery = await import('../../src/static/js/rjquery').jQuery;
+await import('../../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.
+ randomVersionString: "7a7bdbad",
+};
+
+(async () => {
+ // Allow other frames to access this frame's modules.
+ //window.require.resolveTmp = require.resolve('ep_etherpad-lite/static/js/pad_cookie');
+
+ const basePath = new URL('..', window.location.href).pathname;
+ window.browser = require('../../src/static/js/vendors/browser');
+ const pad = require('../../src/static/js/pad');
+ pad.baseURL = basePath;
+ window.plugins = require('../../src/static/js/pluginfw/client_plugins');
+ const hooks = require('../../src/static/js/pluginfw/hooks');
+
+ // TODO: These globals shouldn't exist.
+ window.pad = pad.pad;
+ window.chat = require('../../src/static/js/chat').chat;
+ 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([
+
+ ]));
+ // Mechanism for tests to register hook functions (install fake plugins).
+ window._postPluginUpdateForTestingDone = false;
+ if (window._postPluginUpdateForTesting != null) window._postPluginUpdateForTesting();
+ window._postPluginUpdateForTestingDone = true;
+ window.pluginDefs = require('../../src/static/js/pluginfw/plugin_defs');
+ pad.init();
+ await new Promise((resolve) => $(resolve));
+ await hooks.aCallAll('documentReady');
+})();
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(); %>