working in both mobile and normal view

scroll-to-line-with-scroll.js
John McLear 2020-12-11 19:02:55 +00:00
parent 7440dd15fc
commit 114656cd84
1 changed files with 57 additions and 48 deletions

View File

@ -41,54 +41,17 @@ const padeditor = (function () {
function aceReady() { function aceReady() {
$('#editorloadingbox').hide(); $('#editorloadingbox').hide();
const $outerdoc = $('iframe[name="ace_outer"]').contents().find('#outerdocbody');
if (readyFunc) { if (readyFunc) {
// If a number is in the URI IE #L124 go to that line number readyFunc();
const lineNumber = window.location.hash.substr(1);
if (lineNumber) {
if (lineNumber[0] === 'L') {
const lineNumberInt = parseInt(lineNumber.replace('L', ''));
if (lineNumberInt) {
const $inner = $('iframe[name="ace_outer"]').contents().find('iframe')
.contents().find('#innerdocbody');
const line = $inner.find(`div:nth-child(${lineNumberInt})`);
if (line.length !== 0) {
let offsetTop = line.offset().top;
offsetTop += parseInt($outerdoc.css('padding-top').replace('px', ''));
offsetTop += parseInt($inner.css('padding-top').replace('px', ''));
const $outerdocHTML = $('iframe[name="ace_outer"]').contents()
.find('#outerdocbody').parent();
$outerdoc.css({top: `${offsetTop}px`}); // Chrome
$outerdocHTML.animate({scrollTop: offsetTop}); // needed for FF
const node = line[0];
self.ace.callWithAce((ace) => {
const selection = {
startPoint: {
index: 0,
focusAtStart: true,
maxIndex: 1,
node,
},
endPoint: {
index: 0,
focusAtStart: true,
maxIndex: 1,
node,
},
};
ace.ace_setSelection(selection);
});
}
}
}
}
// Listen for clicks on sidediv items // Listen for clicks on sidediv items
const $outerdoc = $('iframe[name="ace_outer"]').contents().find('#outerdocbody');
$outerdoc.find('#sidedivinner').on('click', 'div', function () { $outerdoc.find('#sidedivinner').on('click', 'div', function () {
const targetLineNumber = $(this).index() + 1; const targetLineNumber = $(this).index() + 1;
window.location.hash = `L${targetLineNumber}`; window.location.hash = `L${targetLineNumber}`;
}); });
readyFunc(); exports.focusOnLine(self.ace);
} }
} }
@ -100,11 +63,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')));
@ -121,8 +83,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
@ -134,9 +96,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')) {
@ -210,3 +172,50 @@ 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
const lineNumber = window.location.hash.substr(1);
if (lineNumber) {
if (lineNumber[0] === 'L') {
const $outerdoc = $('iframe[name="ace_outer"]').contents().find('#outerdocbody');
const lineNumberInt = parseInt(lineNumber.replace('L', ''));
if (lineNumberInt) {
const $inner = $('iframe[name="ace_outer"]').contents().find('iframe')
.contents().find('#innerdocbody');
const line = $inner.find(`div:nth-child(${lineNumberInt})`);
if (line.length !== 0) {
let offsetTop = line.offset().top;
offsetTop += parseInt($outerdoc.css('padding-top').replace('px', ''));
const hasMobileLayout = $('body').hasClass('mobile-layout');
if (!hasMobileLayout) {
offsetTop += parseInt($inner.css('padding-top').replace('px', ''));
}
const $outerdocHTML = $('iframe[name="ace_outer"]').contents()
.find('#outerdocbody').parent();
$outerdoc.css({top: `${offsetTop}px`}); // Chrome
$outerdocHTML.animate({scrollTop: offsetTop}); // needed for FF
const node = line[0];
ace.callWithAce((ace) => {
const selection = {
startPoint: {
index: 0,
focusAtStart: true,
maxIndex: 1,
node,
},
endPoint: {
index: 0,
focusAtStart: true,
maxIndex: 1,
node,
},
};
ace.ace_setSelection(selection);
});
}
}
}
}
// End of setSelection / set Y position of editor
};