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:
|
||||
|
||||
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
|
||||
|
@ -66,3 +66,10 @@ Example: `lang=ar` (translates the interface into Arabic)
|
|||
Default: true
|
||||
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;
|
||||
padding: 0 14px 0 10px;
|
||||
font-family: monospace;
|
||||
cursor: pointer;
|
||||
}
|
||||
.plugin-ep_author_neat #sidedivinner.authorColors .line-number {
|
||||
padding-right: 10px;
|
||||
|
|
|
@ -682,6 +682,7 @@ function Ace2Inner() {
|
|||
editorInfo.ace_doReturnKey = doReturnKey;
|
||||
editorInfo.ace_isBlockElement = isBlockElement;
|
||||
editorInfo.ace_getLineListType = getLineListType;
|
||||
editorInfo.ace_scroll = scroll;
|
||||
|
||||
editorInfo.ace_callWithAce = function (fn, callStack, normalize) {
|
||||
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 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 settings = undefined;
|
||||
|
||||
var self = {
|
||||
const self = {
|
||||
ace: null,
|
||||
// this is accessed directly from other files
|
||||
viewZoom: 100,
|
||||
|
@ -42,9 +43,17 @@ const padeditor = (function () {
|
|||
$('#editorloadingbox').hide();
|
||||
if (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.init('editorcontainer', '', aceReady);
|
||||
self.ace.setProperty('wraps', true);
|
||||
|
@ -53,11 +62,10 @@ const padeditor = (function () {
|
|||
}
|
||||
self.initViewOptions();
|
||||
self.setViewOptions(initialViewOptions);
|
||||
|
||||
// view bar
|
||||
$('#viewbarcontents').show();
|
||||
},
|
||||
initViewOptions() {
|
||||
initViewOptions: () => {
|
||||
// Line numbers
|
||||
padutils.bindCheckboxChange($('#options-linenoscheck'), () => {
|
||||
pad.changeViewOption('showLineNumbers', padutils.getCheckbox($('#options-linenoscheck')));
|
||||
|
@ -74,8 +82,8 @@ const padeditor = (function () {
|
|||
pad.changeViewOption('rtlIsTrue', padutils.getCheckbox($('#options-rtlcheck')));
|
||||
});
|
||||
html10n.bind('localized', () => {
|
||||
pad.changeViewOption('rtlIsTrue', ('rtl' == html10n.getDirection()));
|
||||
padutils.setCheckbox($('#options-rtlcheck'), ('rtl' == html10n.getDirection()));
|
||||
pad.changeViewOption('rtlIsTrue', ('rtl' === html10n.getDirection()));
|
||||
padutils.setCheckbox($('#options-rtlcheck'), ('rtl' === html10n.getDirection()));
|
||||
});
|
||||
|
||||
// font family change
|
||||
|
@ -87,9 +95,9 @@ const padeditor = (function () {
|
|||
html10n.bind('localized', () => {
|
||||
$('#languagemenu').val(html10n.getLanguage());
|
||||
// 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
|
||||
// also, a value which has been set by the user will be not overwritten since a user-edited <input>
|
||||
// does *not* have the editempty-class
|
||||
// this does not interfere with html10n's normal value-setting because html10n
|
||||
// just ingores <input>s also, a value which has been set by the user will be not
|
||||
// overwritten since a user-edited <input> does *not* have the editempty-class
|
||||
$('input[data-l10n-id]').each((key, input) => {
|
||||
input = $(input);
|
||||
if (input.hasClass('editempty')) {
|
||||
|
@ -100,23 +108,23 @@ const padeditor = (function () {
|
|||
$('#languagemenu').val(html10n.getLanguage());
|
||||
$('#languagemenu').change(() => {
|
||||
Cookies.set('language', $('#languagemenu').val());
|
||||
window.html10n.localize([$("#languagemenu").val(), 'en']);
|
||||
window.html10n.localize([$('#languagemenu').val(), 'en']);
|
||||
if ($('select').niceSelect) {
|
||||
$('select').niceSelect('update');
|
||||
}
|
||||
});
|
||||
},
|
||||
setViewOptions(newOptions) {
|
||||
function getOption(key, defaultValue) {
|
||||
setViewOptions: (newOptions) => {
|
||||
const getOption = (key, defaultValue) => {
|
||||
const value = String(newOptions[key]);
|
||||
if (value == 'true') return true;
|
||||
if (value == 'false') return false;
|
||||
if (value === 'true') return true;
|
||||
if (value === 'false') return false;
|
||||
return defaultValue;
|
||||
}
|
||||
};
|
||||
|
||||
let v;
|
||||
|
||||
v = getOption('rtlIsTrue', ('rtl' == html10n.getDirection()));
|
||||
v = getOption('rtlIsTrue', ('rtl' === html10n.getDirection()));
|
||||
self.ace.setProperty('rtlIsTrue', v);
|
||||
padutils.setCheckbox($('#options-rtlcheck'), v);
|
||||
|
||||
|
@ -137,24 +145,24 @@ const padeditor = (function () {
|
|||
|
||||
self.ace.setProperty('textface', newOptions.padFontFamily || '');
|
||||
},
|
||||
dispose() {
|
||||
dispose: () => {
|
||||
if (self.ace) {
|
||||
self.ace.destroy();
|
||||
self.ace = null;
|
||||
}
|
||||
},
|
||||
enable() {
|
||||
enable: () => {
|
||||
if (self.ace) {
|
||||
self.ace.setEditable(true);
|
||||
}
|
||||
},
|
||||
disable() {
|
||||
disable: () => {
|
||||
if (self.ace) {
|
||||
self.ace.setProperty('grayedOut', true);
|
||||
self.ace.setEditable(false);
|
||||
}
|
||||
},
|
||||
restoreRevisionText(dataFromServer) {
|
||||
restoreRevisionText: (dataFromServer) => {
|
||||
pad.addHistoricalAuthors(dataFromServer.historicalAuthorData);
|
||||
self.ace.importAText(dataFromServer.atext, dataFromServer.apool, true);
|
||||
},
|
||||
|
@ -163,3 +171,28 @@ const padeditor = (function () {
|
|||
}());
|
||||
|
||||
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 () {
|
||||
let $iframe; const
|
||||
|
@ -29,10 +30,9 @@ var helper = {};
|
|||
|
||||
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
|
||||
*/
|
||||
|
||||
const win = $iframe[0].contentWindow;
|
||||
const doc = win.document;
|
||||
|
||||
|
@ -68,7 +68,8 @@ var helper = {};
|
|||
// I don't fully understand it, but this function seems to properly simulate
|
||||
// padCookie.setPref in the client code
|
||||
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
|
||||
|
@ -102,8 +103,13 @@ var helper = {};
|
|||
}
|
||||
|
||||
// if opts.params is set we manipulate the URL to include URL parameters IE ?foo=Bah.
|
||||
let encodedParams;
|
||||
if (opts.params) {
|
||||
var encodedParams = `?${$.param(opts.params)}`;
|
||||
encodedParams = `?${$.param(opts.params)}`;
|
||||
}
|
||||
let hash;
|
||||
if (opts.hash) {
|
||||
hash = `#${opts.hash}`;
|
||||
}
|
||||
|
||||
// clear cookies
|
||||
|
@ -112,8 +118,7 @@ var helper = {};
|
|||
}
|
||||
|
||||
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
|
||||
const origPadName = padName;
|
||||
|
||||
|
@ -132,7 +137,8 @@ var helper = {};
|
|||
if (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.padInner$ = getFrameJQuery(helper.padOuter$('iframe[name="ace_inner"]'));
|
||||
|
||||
|
@ -175,7 +181,7 @@ var helper = {};
|
|||
};
|
||||
|
||||
helper.waitFor = function (conditionFunc, timeoutTime = 1900, intervalTime = 10) {
|
||||
const deferred = $.Deferred();
|
||||
const deferred = $.Deferred(); // eslint-disable-line
|
||||
|
||||
const _fail = deferred.fail.bind(deferred);
|
||||
let listenForFail = false;
|
||||
|
@ -245,7 +251,7 @@ var helper = {};
|
|||
selection.addRange(range);
|
||||
};
|
||||
|
||||
var getTextNodeAndOffsetOf = function ($targetLine, targetOffsetAtLine) {
|
||||
const getTextNodeAndOffsetOf = function ($targetLine, targetOffsetAtLine) {
|
||||
const $textNodes = $targetLine.find('*').contents().filter(function () {
|
||||
return this.nodeType === Node.TEXT_NODE;
|
||||
});
|
||||
|
@ -268,7 +274,7 @@ var helper = {};
|
|||
});
|
||||
|
||||
// edge cases
|
||||
if (textNodeWhereOffsetIs === null) {
|
||||
if (textNodeWhereOffsetIs == null) {
|
||||
// there was no text node inside $targetLine, so it is an empty line (<br>).
|
||||
// Use beginning of line
|
||||
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