Compare commits
10 Commits
develop
...
scroll-to-
Author | SHA1 | Date |
---|---|---|
webzwo0i | b83589fc73 | |
John McLear | 7fe37cd49c | |
John McLear | 114656cd84 | |
John McLear | 7440dd15fc | |
John McLear | 78fe277ac6 | |
John McLear | 1956b29093 | |
John McLear | a2a7322226 | |
John McLear | 1a577d53bd | |
John McLear | 46805d80d6 | |
John McLear | ea2c2949c1 |
|
@ -3,10 +3,10 @@ You can easily embed your etherpad-lite into any webpage by using iframes. You c
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
Cut and paste the following code into any webpage to embed a pad. The parameters below will hide the chat and the line numbers.
|
Cut and paste the following code into any webpage to embed a pad. The parameters below will hide the chat and the line numbers and will auto-focus on Line 4.
|
||||||
|
|
||||||
```
|
```
|
||||||
<iframe src='http://pad.test.de/p/PAD_NAME?showChat=false&showLineNumbers=false' width=600 height=400></iframe>
|
<iframe src='http://pad.test.de/p/PAD_NAME#L4?showChat=false&showLineNumbers=false' width=600 height=400></iframe>
|
||||||
```
|
```
|
||||||
|
|
||||||
## showLineNumbers
|
## showLineNumbers
|
||||||
|
@ -66,3 +66,10 @@ Example: `lang=ar` (translates the interface into Arabic)
|
||||||
Default: true
|
Default: true
|
||||||
Displays pad text from right to left.
|
Displays pad text from right to left.
|
||||||
|
|
||||||
|
## #L
|
||||||
|
* Int
|
||||||
|
|
||||||
|
Default: 0
|
||||||
|
Focuses pad at specific line number and places caret at beginning of this line
|
||||||
|
Special note: Is not a URL parameter but instead of a Hash value
|
||||||
|
|
||||||
|
|
|
@ -101,6 +101,7 @@ body.mozilla, body.safari {
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
padding: 0 14px 0 10px;
|
padding: 0 14px 0 10px;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.plugin-ep_author_neat #sidedivinner.authorColors .line-number {
|
.plugin-ep_author_neat #sidedivinner.authorColors .line-number {
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
|
|
|
@ -682,6 +682,7 @@ function Ace2Inner() {
|
||||||
editorInfo.ace_doReturnKey = doReturnKey;
|
editorInfo.ace_doReturnKey = doReturnKey;
|
||||||
editorInfo.ace_isBlockElement = isBlockElement;
|
editorInfo.ace_isBlockElement = isBlockElement;
|
||||||
editorInfo.ace_getLineListType = getLineListType;
|
editorInfo.ace_getLineListType = getLineListType;
|
||||||
|
editorInfo.ace_scroll = scroll;
|
||||||
|
|
||||||
editorInfo.ace_callWithAce = function (fn, callStack, normalize) {
|
editorInfo.ace_callWithAce = function (fn, callStack, normalize) {
|
||||||
let wrapper = function () {
|
let wrapper = function () {
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
'use strict';
|
||||||
/**
|
/**
|
||||||
* This code is mostly from the old Etherpad. Please help us to comment this code.
|
* This code is mostly from the old Etherpad. Please help us to comment this code.
|
||||||
* This helps other people to understand this code better and helps them to improve it.
|
* This helps other people to understand this code better and helps them to improve it.
|
||||||
|
@ -29,7 +30,7 @@ const padeditor = (function () {
|
||||||
let pad = undefined;
|
let pad = undefined;
|
||||||
let settings = undefined;
|
let settings = undefined;
|
||||||
|
|
||||||
var self = {
|
const self = {
|
||||||
ace: null,
|
ace: null,
|
||||||
// this is accessed directly from other files
|
// this is accessed directly from other files
|
||||||
viewZoom: 100,
|
viewZoom: 100,
|
||||||
|
@ -42,9 +43,17 @@ const padeditor = (function () {
|
||||||
$('#editorloadingbox').hide();
|
$('#editorloadingbox').hide();
|
||||||
if (readyFunc) {
|
if (readyFunc) {
|
||||||
readyFunc();
|
readyFunc();
|
||||||
|
|
||||||
|
// Listen for clicks on sidediv items
|
||||||
|
const $outerdoc = $('iframe[name="ace_outer"]').contents().find('#outerdocbody');
|
||||||
|
$outerdoc.find('#sidedivinner').on('click', 'div', function () {
|
||||||
|
const targetLineNumber = $(this).index() + 1;
|
||||||
|
window.location.hash = `L${targetLineNumber}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => exports.focusOnLine(self.ace), 2000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
self.ace = new Ace2Editor();
|
self.ace = new Ace2Editor();
|
||||||
self.ace.init('editorcontainer', '', aceReady);
|
self.ace.init('editorcontainer', '', aceReady);
|
||||||
self.ace.setProperty('wraps', true);
|
self.ace.setProperty('wraps', true);
|
||||||
|
@ -53,11 +62,10 @@ const padeditor = (function () {
|
||||||
}
|
}
|
||||||
self.initViewOptions();
|
self.initViewOptions();
|
||||||
self.setViewOptions(initialViewOptions);
|
self.setViewOptions(initialViewOptions);
|
||||||
|
|
||||||
// view bar
|
// view bar
|
||||||
$('#viewbarcontents').show();
|
$('#viewbarcontents').show();
|
||||||
},
|
},
|
||||||
initViewOptions() {
|
initViewOptions: () => {
|
||||||
// Line numbers
|
// Line numbers
|
||||||
padutils.bindCheckboxChange($('#options-linenoscheck'), () => {
|
padutils.bindCheckboxChange($('#options-linenoscheck'), () => {
|
||||||
pad.changeViewOption('showLineNumbers', padutils.getCheckbox($('#options-linenoscheck')));
|
pad.changeViewOption('showLineNumbers', padutils.getCheckbox($('#options-linenoscheck')));
|
||||||
|
@ -74,8 +82,8 @@ const padeditor = (function () {
|
||||||
pad.changeViewOption('rtlIsTrue', padutils.getCheckbox($('#options-rtlcheck')));
|
pad.changeViewOption('rtlIsTrue', padutils.getCheckbox($('#options-rtlcheck')));
|
||||||
});
|
});
|
||||||
html10n.bind('localized', () => {
|
html10n.bind('localized', () => {
|
||||||
pad.changeViewOption('rtlIsTrue', ('rtl' == html10n.getDirection()));
|
pad.changeViewOption('rtlIsTrue', ('rtl' === html10n.getDirection()));
|
||||||
padutils.setCheckbox($('#options-rtlcheck'), ('rtl' == html10n.getDirection()));
|
padutils.setCheckbox($('#options-rtlcheck'), ('rtl' === html10n.getDirection()));
|
||||||
});
|
});
|
||||||
|
|
||||||
// font family change
|
// font family change
|
||||||
|
@ -87,9 +95,9 @@ const padeditor = (function () {
|
||||||
html10n.bind('localized', () => {
|
html10n.bind('localized', () => {
|
||||||
$('#languagemenu').val(html10n.getLanguage());
|
$('#languagemenu').val(html10n.getLanguage());
|
||||||
// translate the value of 'unnamed' and 'Enter your name' textboxes in the userlist
|
// translate the value of 'unnamed' and 'Enter your name' textboxes in the userlist
|
||||||
// this does not interfere with html10n's normal value-setting because html10n just ingores <input>s
|
// this does not interfere with html10n's normal value-setting because html10n
|
||||||
// also, a value which has been set by the user will be not overwritten since a user-edited <input>
|
// just ingores <input>s also, a value which has been set by the user will be not
|
||||||
// does *not* have the editempty-class
|
// overwritten since a user-edited <input> does *not* have the editempty-class
|
||||||
$('input[data-l10n-id]').each((key, input) => {
|
$('input[data-l10n-id]').each((key, input) => {
|
||||||
input = $(input);
|
input = $(input);
|
||||||
if (input.hasClass('editempty')) {
|
if (input.hasClass('editempty')) {
|
||||||
|
@ -100,23 +108,23 @@ const padeditor = (function () {
|
||||||
$('#languagemenu').val(html10n.getLanguage());
|
$('#languagemenu').val(html10n.getLanguage());
|
||||||
$('#languagemenu').change(() => {
|
$('#languagemenu').change(() => {
|
||||||
Cookies.set('language', $('#languagemenu').val());
|
Cookies.set('language', $('#languagemenu').val());
|
||||||
window.html10n.localize([$("#languagemenu").val(), 'en']);
|
window.html10n.localize([$('#languagemenu').val(), 'en']);
|
||||||
if ($('select').niceSelect) {
|
if ($('select').niceSelect) {
|
||||||
$('select').niceSelect('update');
|
$('select').niceSelect('update');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
setViewOptions(newOptions) {
|
setViewOptions: (newOptions) => {
|
||||||
function getOption(key, defaultValue) {
|
const getOption = (key, defaultValue) => {
|
||||||
const value = String(newOptions[key]);
|
const value = String(newOptions[key]);
|
||||||
if (value == 'true') return true;
|
if (value === 'true') return true;
|
||||||
if (value == 'false') return false;
|
if (value === 'false') return false;
|
||||||
return defaultValue;
|
return defaultValue;
|
||||||
}
|
};
|
||||||
|
|
||||||
let v;
|
let v;
|
||||||
|
|
||||||
v = getOption('rtlIsTrue', ('rtl' == html10n.getDirection()));
|
v = getOption('rtlIsTrue', ('rtl' === html10n.getDirection()));
|
||||||
self.ace.setProperty('rtlIsTrue', v);
|
self.ace.setProperty('rtlIsTrue', v);
|
||||||
padutils.setCheckbox($('#options-rtlcheck'), v);
|
padutils.setCheckbox($('#options-rtlcheck'), v);
|
||||||
|
|
||||||
|
@ -137,24 +145,24 @@ const padeditor = (function () {
|
||||||
|
|
||||||
self.ace.setProperty('textface', newOptions.padFontFamily || '');
|
self.ace.setProperty('textface', newOptions.padFontFamily || '');
|
||||||
},
|
},
|
||||||
dispose() {
|
dispose: () => {
|
||||||
if (self.ace) {
|
if (self.ace) {
|
||||||
self.ace.destroy();
|
self.ace.destroy();
|
||||||
self.ace = null;
|
self.ace = null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
enable() {
|
enable: () => {
|
||||||
if (self.ace) {
|
if (self.ace) {
|
||||||
self.ace.setEditable(true);
|
self.ace.setEditable(true);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
disable() {
|
disable: () => {
|
||||||
if (self.ace) {
|
if (self.ace) {
|
||||||
self.ace.setProperty('grayedOut', true);
|
self.ace.setProperty('grayedOut', true);
|
||||||
self.ace.setEditable(false);
|
self.ace.setEditable(false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
restoreRevisionText(dataFromServer) {
|
restoreRevisionText: (dataFromServer) => {
|
||||||
pad.addHistoricalAuthors(dataFromServer.historicalAuthorData);
|
pad.addHistoricalAuthors(dataFromServer.historicalAuthorData);
|
||||||
self.ace.importAText(dataFromServer.atext, dataFromServer.apool, true);
|
self.ace.importAText(dataFromServer.atext, dataFromServer.apool, true);
|
||||||
},
|
},
|
||||||
|
@ -163,3 +171,28 @@ const padeditor = (function () {
|
||||||
}());
|
}());
|
||||||
|
|
||||||
exports.padeditor = padeditor;
|
exports.padeditor = padeditor;
|
||||||
|
|
||||||
|
exports.focusOnLine = (ace) => {
|
||||||
|
// If a number is in the URI IE #L124 go to that line number
|
||||||
|
let lineNumber = window.location.hash.substr(1);
|
||||||
|
if (lineNumber && lineNumber[0] === 'L' && (lineNumber = parseInt(lineNumber.substr(1)))) {
|
||||||
|
ace.callWithAce((ace) => {
|
||||||
|
const rep = ace.ace_getRep();
|
||||||
|
if (lineNumber <= 0 || lineNumber - 1 > rep.lines.length()) return;
|
||||||
|
// we assume that rep.lines.atIndex is successful now
|
||||||
|
|
||||||
|
const lineNode = rep.lines.atIndex(lineNumber - 1).lineNode;
|
||||||
|
// offset of the first line and editor space
|
||||||
|
// const editorTop = ace.ace_scroll._getEditorPositionTop();
|
||||||
|
// const firstLineOffset = rep.lines.atIndex(0).lineNode.offsetTop;
|
||||||
|
// ace.ace_scroll.setScrollY(lineNode.offsetTop + editorTop + firstLineOffset);
|
||||||
|
ace.ace_scroll.setScrollY(lineNode.offsetTop);
|
||||||
|
|
||||||
|
// place the caret on the beginning of the new line
|
||||||
|
// rep.lines.atIndex(lineNumber-1).lineMarker)
|
||||||
|
rep.selEnd = [lineNumber - 1, 0];
|
||||||
|
rep.selStart = [lineNumber - 1, 0];
|
||||||
|
ace.ace_updateBrowserSelectionFromRep();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
var helper = {};
|
'use strict';
|
||||||
|
const helper = {}; // eslint-disable-line
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
let $iframe; const
|
let $iframe; const
|
||||||
|
@ -29,10 +30,9 @@ var helper = {};
|
||||||
|
|
||||||
const getFrameJQuery = function ($iframe) {
|
const getFrameJQuery = function ($iframe) {
|
||||||
/*
|
/*
|
||||||
I tried over 9000 ways to inject javascript into iframes.
|
I tried over 9001 ways to inject javascript into iframes.
|
||||||
This is the only way I found that worked in IE 7+8+9, FF and Chrome
|
This is the only way I found that worked in IE 7+8+9, FF and Chrome
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const win = $iframe[0].contentWindow;
|
const win = $iframe[0].contentWindow;
|
||||||
const doc = win.document;
|
const doc = win.document;
|
||||||
|
|
||||||
|
@ -68,7 +68,8 @@ var helper = {};
|
||||||
// I don't fully understand it, but this function seems to properly simulate
|
// I don't fully understand it, but this function seems to properly simulate
|
||||||
// padCookie.setPref in the client code
|
// padCookie.setPref in the client code
|
||||||
helper.setPadPrefCookie = function (prefs) {
|
helper.setPadPrefCookie = function (prefs) {
|
||||||
helper.padChrome$.document.cookie = (`prefsHttp=${escape(JSON.stringify(prefs))};expires=Thu, 01 Jan 3000 00:00:00 GMT`);
|
helper.padChrome$.document.cookie =
|
||||||
|
(`prefsHttp=${escape(JSON.stringify(prefs))};expires=Thu, 01 Jan 3000 00:00:00 GMT`);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Functionality for knowing what key event type is required for tests
|
// Functionality for knowing what key event type is required for tests
|
||||||
|
@ -102,8 +103,13 @@ var helper = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
// if opts.params is set we manipulate the URL to include URL parameters IE ?foo=Bah.
|
// if opts.params is set we manipulate the URL to include URL parameters IE ?foo=Bah.
|
||||||
|
let encodedParams;
|
||||||
if (opts.params) {
|
if (opts.params) {
|
||||||
var encodedParams = `?${$.param(opts.params)}`;
|
encodedParams = `?${$.param(opts.params)}`;
|
||||||
|
}
|
||||||
|
let hash;
|
||||||
|
if (opts.hash) {
|
||||||
|
hash = `#${opts.hash}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// clear cookies
|
// clear cookies
|
||||||
|
@ -112,8 +118,7 @@ var helper = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!padName) padName = `FRONTEND_TEST_${helper.randomString(20)}`;
|
if (!padName) padName = `FRONTEND_TEST_${helper.randomString(20)}`;
|
||||||
$iframe = $(`<iframe src='/p/${padName}${encodedParams || ''}'></iframe>`);
|
$iframe = $(`<iframe src='/p/${padName}${hash || ''}${encodedParams || ''}'></iframe>`);
|
||||||
|
|
||||||
// needed for retry
|
// needed for retry
|
||||||
const origPadName = padName;
|
const origPadName = padName;
|
||||||
|
|
||||||
|
@ -132,7 +137,8 @@ var helper = {};
|
||||||
if (opts.padPrefs) {
|
if (opts.padPrefs) {
|
||||||
helper.setPadPrefCookie(opts.padPrefs);
|
helper.setPadPrefCookie(opts.padPrefs);
|
||||||
}
|
}
|
||||||
helper.waitFor(() => !$iframe.contents().find('#editorloadingbox').is(':visible'), 10000).done(() => {
|
helper.waitFor(() => !$iframe.contents().find('#editorloadingbox')
|
||||||
|
.is(':visible'), 10000).done(() => {
|
||||||
helper.padOuter$ = getFrameJQuery(helper.padChrome$('iframe[name="ace_outer"]'));
|
helper.padOuter$ = getFrameJQuery(helper.padChrome$('iframe[name="ace_outer"]'));
|
||||||
helper.padInner$ = getFrameJQuery(helper.padOuter$('iframe[name="ace_inner"]'));
|
helper.padInner$ = getFrameJQuery(helper.padOuter$('iframe[name="ace_inner"]'));
|
||||||
|
|
||||||
|
@ -175,7 +181,7 @@ var helper = {};
|
||||||
};
|
};
|
||||||
|
|
||||||
helper.waitFor = function (conditionFunc, timeoutTime = 1900, intervalTime = 10) {
|
helper.waitFor = function (conditionFunc, timeoutTime = 1900, intervalTime = 10) {
|
||||||
const deferred = $.Deferred();
|
const deferred = $.Deferred(); // eslint-disable-line
|
||||||
|
|
||||||
const _fail = deferred.fail.bind(deferred);
|
const _fail = deferred.fail.bind(deferred);
|
||||||
let listenForFail = false;
|
let listenForFail = false;
|
||||||
|
@ -245,7 +251,7 @@ var helper = {};
|
||||||
selection.addRange(range);
|
selection.addRange(range);
|
||||||
};
|
};
|
||||||
|
|
||||||
var getTextNodeAndOffsetOf = function ($targetLine, targetOffsetAtLine) {
|
const getTextNodeAndOffsetOf = function ($targetLine, targetOffsetAtLine) {
|
||||||
const $textNodes = $targetLine.find('*').contents().filter(function () {
|
const $textNodes = $targetLine.find('*').contents().filter(function () {
|
||||||
return this.nodeType === Node.TEXT_NODE;
|
return this.nodeType === Node.TEXT_NODE;
|
||||||
});
|
});
|
||||||
|
@ -268,7 +274,7 @@ var helper = {};
|
||||||
});
|
});
|
||||||
|
|
||||||
// edge cases
|
// edge cases
|
||||||
if (textNodeWhereOffsetIs === null) {
|
if (textNodeWhereOffsetIs == null) {
|
||||||
// there was no text node inside $targetLine, so it is an empty line (<br>).
|
// there was no text node inside $targetLine, so it is an empty line (<br>).
|
||||||
// Use beginning of line
|
// Use beginning of line
|
||||||
textNodeWhereOffsetIs = $targetLine.get(0);
|
textNodeWhereOffsetIs = $targetLine.get(0);
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
describe('scrolls to line', function () {
|
||||||
|
// create a new pad with URL hash set before each test run
|
||||||
|
beforeEach(function (cb) {
|
||||||
|
helper.newPad({
|
||||||
|
hash: 'L4',
|
||||||
|
cb,
|
||||||
|
});
|
||||||
|
this.timeout(10000);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Scrolls down to Line 4', function (done) {
|
||||||
|
this.timeout(10000);
|
||||||
|
const chrome$ = helper.padChrome$;
|
||||||
|
helper.waitFor(() => {
|
||||||
|
const topOffset = parseInt(chrome$('iframe').first('iframe')
|
||||||
|
.contents().find('#outerdocbody').css('top'));
|
||||||
|
return (topOffset >= 100);
|
||||||
|
});
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('doesnt break on weird hash input', function () {
|
||||||
|
// create a new pad with URL hash set before each test run
|
||||||
|
beforeEach(function (cb) {
|
||||||
|
helper.newPad({
|
||||||
|
hash: '#DEEZ123123NUTS',
|
||||||
|
cb,
|
||||||
|
});
|
||||||
|
this.timeout(10000);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Does NOT change scroll', function (done) {
|
||||||
|
this.timeout(10000);
|
||||||
|
const chrome$ = helper.padChrome$;
|
||||||
|
helper.waitFor(() => {
|
||||||
|
const topOffset = parseInt(chrome$('iframe').first('iframe')
|
||||||
|
.contents().find('#outerdocbody').css('top'));
|
||||||
|
return (!topOffset); // no css top should be set.
|
||||||
|
});
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue