From 114656cd846d9152beb85156f70f548cac9af338 Mon Sep 17 00:00:00 2001 From: John McLear Date: Fri, 11 Dec 2020 19:02:55 +0000 Subject: [PATCH] working in both mobile and normal view --- src/static/js/pad_editor.js | 105 +++++++++++++++++++----------------- 1 file changed, 57 insertions(+), 48 deletions(-) diff --git a/src/static/js/pad_editor.js b/src/static/js/pad_editor.js index e918ded6d..74b285f64 100644 --- a/src/static/js/pad_editor.js +++ b/src/static/js/pad_editor.js @@ -41,54 +41,17 @@ const padeditor = (function () { function aceReady() { $('#editorloadingbox').hide(); - const $outerdoc = $('iframe[name="ace_outer"]').contents().find('#outerdocbody'); if (readyFunc) { - // 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 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); - }); - } - } - } - } + 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}`; }); - readyFunc(); + exports.focusOnLine(self.ace); } } @@ -100,11 +63,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'))); @@ -121,8 +83,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 @@ -134,9 +96,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 s - // also, a value which has been set by the user will be not overwritten since a user-edited - // does *not* have the editempty-class + // this does not interfere with html10n's normal value-setting because html10n + // just ingores s also, a value which has been set by the user will be not + // overwritten since a user-edited does *not* have the editempty-class $('input[data-l10n-id]').each((key, input) => { input = $(input); if (input.hasClass('editempty')) { @@ -210,3 +172,50 @@ const padeditor = (function () { }()); 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 +};