fix(esl-footnotes): fix the sort order of notes

exadel-inc · Jan 12, 2022 · e299def · e299def
1 parent e97e438
commit e299def
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/src/modules/esl-footnotes/core/esl-footnotes-data.ts b/src/modules/esl-footnotes/core/esl-footnotes-data.ts
@@ -6,7 +6,7 @@ export interface FootnotesItem {
   text: string;
 }
 
-/** Convert notes list to footnotes items list */
+/** Converts notes list to footnotes items list */
 function convertNotesToFootnotesList(notes: ESLNote[]): FootnotesItem[] {
   return notes.map(({index, renderedIndex, html}) => ({
     index: [`${index}`],
@@ -15,12 +15,12 @@ function convertNotesToFootnotesList(notes: ESLNote[]): FootnotesItem[] {
   }));
 }
 
-/** Compile footnotes non-grouped list */
+/** Compiles footnotes non-grouped list */
 export function compileFootnotesNongroupedList(notes: ESLNote[]): FootnotesItem[] {
   return convertNotesToFootnotesList(notes);
 }
 
-/** Compile footnotes grouped list */
+/** Compiles footnotes grouped list */
 export function compileFootnotesGroupedList(notes: ESLNote[]): FootnotesItem[] {
   const map = new Map() ;
   convertNotesToFootnotesList(notes).forEach((note) => {
@@ -36,11 +36,15 @@ export function compileFootnotesGroupedList(notes: ESLNote[]): FootnotesItem[] {
   return groupedList;
 }
 
-/** Sort notes list */
+/** Sorts notes list */
 export function sortFootnotes(notes: ESLNote[]): ESLNote[] {
-  return notes.sort((note1: ESLNote, note2: ESLNote) => {
-    const rect1 = note1.getBoundingClientRect();
-    const rect2 = note2.getBoundingClientRect();
-    return rect1.top - rect2.top || rect1.left - rect2.left;
+  return notes.sort((note1: ESLNote, note2: ESLNote): number => {
+    if (note1 === note2) return 0;
+    // eslint-disable-next-line no-bitwise
+    if (note1.compareDocumentPosition(note2) & 2) {
+      // note2 comes before note1
+      return 1;
+    }
+    return -1;
   });
 }
diff --git a/src/modules/esl-footnotes/core/esl-footnotes.ts b/src/modules/esl-footnotes/core/esl-footnotes.ts
@@ -43,7 +43,7 @@ export class ESLFootnotes extends ESLBaseElement {
 
   /** Reindexes the list of notes */
   public reindex(): void {
-    this._notes = sortFootnotes(this._notes);
+    this._sortNotes();
     this._notes.forEach((note, index) => note.index = index + 1);
   }
 
@@ -123,6 +123,11 @@ export class ESLFootnotes extends ESLBaseElement {
     return `<span class="esl-footnotes-back-to-note" tabindex="0" title="${this.backToNoteLabel}"></span>`;
   }
 
+  /** Sorts linked notes */
+  protected _sortNotes(): void {
+    this._notes = sortFootnotes(this._notes);
+  }
+
   /** Handles `response` event from note */
   @bind
   protected _onNoteSubscribe(e: CustomEvent): void {