use the helper from scroll.js

doc/api/embed_parameters.md

@@ -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
+

src/static/css/iframe_editor.css

@@ -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;

src/static/js/ace2_inner.js

@@ -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 () {

src/static/js/pad_editor.js

@@ -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();
+    });
+  }
+};

tests/frontend/helper.js

@@ -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);

tests/frontend/specs/scrollTo.js

@@ -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();
+  });
+});