From 675eca88e755c39a92d6256fbc4fff79300d1448 Mon Sep 17 00:00:00 2001
From: rlx <rlx@rolux.org>
Date: Fri, 1 Feb 2019 16:26:05 +0530
Subject: [PATCH] scroll selected annotation into view if needed

---
 static/js/annotation.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/static/js/annotation.js b/static/js/annotation.js
index 5fcc4e8..d0c9556 100644
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@@ -1,7 +1,7 @@
 'use strict';
 
 oml.ui.annotation = function(annotation, $iframe) {
-    var $quotetext = Ox.Element()
+    var $quoteText = Ox.Element()
         .addClass('OxSelectable OMLQuote')
         .html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>'))
         .on({
@@ -11,18 +11,19 @@ oml.ui.annotation = function(annotation, $iframe) {
                     id: annotation.id
                 })
             }
-        })
+        });
+    var $quoteBackground = Ox.Element().addClass('OMLQuoteBackground');
     var $quote = Ox.Element()
         .addClass('OMLQuoteBox')
         .append(
-            Ox.Element().addClass('OMLQuoteBackground')
+            $quoteBackground
         ).append(
-            $quotetext
-        )
+            $quoteText
+        );
     var notes = annotation.notes.length ? annotation.notes.map(function(note) {
         note.editable = !note.user
         return note
-    }) : []
+    }) : [];
     var $notes = Ox.ArrayEditable({
         editing: true,
         items: notes,
@@ -96,6 +97,7 @@ oml.ui.annotation = function(annotation, $iframe) {
         selected && selected.classList.remove('selected')
         that.addClass('selected')
         that.gainFocus()
+        that[0].scrollIntoViewIfNeeded()
     }
     return that;
 };