FEATURE: Highlighting searched or coded paragraphs

When some text is coded or searched, the result is provided with a link 
pointing to the field memo where the text comes from. When such a link 
is followed, the field memo is opened and scrolled to the matching 
paragraph, that is highlighted in yellow for a few seconds.

This (long-awaited) feature pursues the direction opened with  
948d2af (#106).

app/_attachments/main.css

@@ -385,6 +385,21 @@ a.dropdown-item, .create-leave, a.dropdown-toggle,
   color: transparent;
 }
 
+.highlight {
+  background-color: yellow;
+  color: red;
+  -webkit-transition: 2s all ease-in-out;
+  -moz-transition: 2s all ease-in-out;
+  -o-transition: 2s all ease-in-out;
+  transition: 2s all ease-in-out;
+  transition-delay: 2s;
+}
+
+.fadeout {
+  background-color: transparent;
+  color: black;
+}
+
 .card>h5{
   color: blue;
   margin-top:  1rem;

app/lib/shared.js

@@ -168,6 +168,9 @@ var shared = {
     stickToHeader();\
   });\
   var reload = function() {\
+    var here = '{{_id}}';\
+    if (anchor > 0) here += '#'+anchor;\
+    self.location = here;\
     if (refresh) location.reload();\
   };\
   String.prototype.trimLeft = String.prototype.trimLeft || function() {\
@@ -230,7 +233,7 @@ var shared = {
       create(classlist[classlist.length - 1], $('#leave-name').val().trim(), $('#kwic').val());\
     }\
   });\
-  function create(type, name, highlight) {\
+  function create(type, name, highlight, anchor) {\
     $('.spinner').removeClass('d-none');\
     name = name.replace(/\t/g, ' ');\
     if (name.replace(/[ ,]/g, '') == '' && type != 'diagram') {\
@@ -260,7 +263,7 @@ var shared = {
           i = existing_memos.rows.map(function(e) { return e.value.name; }).indexOf(name);\
         }\
         if (i != -1) {\
-          if(existing_memos.rows[i].value.groundings.indexOf('{{_id}}') != -1) {\
+          if(existing_memos.rows[i].value.groundings.indexOf('{{_id}}') != -1 && highlight.length < 1) {\
             $('.spinner').addClass('d-none');\
             alert('{{i18n.i_memo_already_linked}}');\
           } else {\
@@ -344,7 +347,10 @@ var shared = {
                 'user': user,\
                 'date': new Date().toJSON()\
               };\
-              if (type == 'coding' && highlight.length > 0) data.body += '> '+highlight+'\\n';\
+              if (type == 'coding' && highlight.length > 0) {\
+                if (anchor > 0) highlight = '['+highlight+']({{_id}}#'+anchor+')';\
+                data.body += '> '+highlight+'\\n \\n';\
+              }\
               data.type = type;\
           }\
           if (type) {\

app/lists/kwic.js

@@ -39,6 +39,7 @@ function(head, req) {
         path: path,
         corpus: row.key[0],
         id: row.id,
+        par: v.par,
         context: concord
       });
     }

app/templates/kwic.html

@@ -38,7 +38,7 @@ <h2>{{i18n.i_occurrences}}: {{pattern}}</h2>
           <div class="context">{{pole}}</div>
           <div class="context d-none d-md-inline">{{post}}</div>
           {{/context}}
-          <a class="{{type}}" href="../../{{path}}/{{corpus}}/{{id}}" title="{{title}}">
+          <a class="{{type}}" href="../../{{path}}/{{corpus}}/{{id}}#{{par}}" title="{{title}}">
             <div class="ml-4 d-inline"></div>
             <span class="ml-1 d-none d-xl-inline">{{title}}</span>
           </a>

app/templates/memo.html

@@ -223,6 +223,7 @@ <h1><img src="{{>relpath}}style/{{type}}.svg"/> {{name}}</h1>
   var metrics = {},
       trigrams = {},
       leaf_type = leaf_id = resume = '',
+      anchor = 0,
       userids = [],
       help = [];
   help["field"] = {init: "{{{i18n.i_content.field}}}", next: "{{{i18n.i_next.field}}}"};
@@ -441,6 +442,8 @@ <h1><img src="{{>relpath}}style/{{type}}.svg"/> {{name}}</h1>
           $('#repeated').removeClass('disabled');
         }
       });
+      const par = window.location.hash.substring(1);
+      if (par !== '') highlight(par);
     }
     stickToHeader();
     {{^statements}}
@@ -451,6 +454,14 @@ <h1><img src="{{>relpath}}style/{{type}}.svg"/> {{name}}</h1>
     {{/statements}}
   });
 
+  function highlight(p) {
+    $('.post p').eq(p-1).addClass('highlight');
+    var prev = document.querySelector(".highlight").previousSibling;
+    if (prev == null) prev = document.getElementById('authorization');
+    prev.scrollIntoView({ behavior: 'smooth', block: 'center'});
+    $('.highlight').addClass('fadeout');
+  }
+
   $('#edit').on('click', function() {
     refresh = false;
     if ('{{type}}' == 'transcript') {
@@ -474,10 +485,17 @@ <h1><img src="{{>relpath}}style/{{type}}.svg"/> {{name}}</h1>
       $("#field-leaf").prop("checked", true).trigger("click");
       $('#field_title_dialog').modal('show');
     } else {
-      create(type, $('#leave-name').val().trim(), $('#kwic').val());
+      create(type, $('#leave-name').val().trim(), $('#kwic').val(), anchor);
     }
   });
 
+  $('#content').on('mouseup', function() {
+    var posts = document.getElementsByClassName('post'),
+        selected = window.getSelection().anchorNode.parentNode.parentNode,
+        p = [].indexOf.call(posts[0].childNodes, selected);
+    if (p > -1) anchor = (p/2) + 1;
+  });
+
   $('#create').on('click', function() {
     var name = $('#leave-name').val().trim(),
         classlist = $(this)[0].classList,
@@ -488,7 +506,7 @@ <h1><img src="{{>relpath}}style/{{type}}.svg"/> {{name}}</h1>
       $("#transcript-leaf").prop("checked", true).trigger("click");
       $('#field_title_dialog').modal('show');
     } else {
-      create(type, name, highlight);
+      create(type, name, highlight, anchor);
     }
   });
 
@@ -532,6 +550,7 @@ <h1><img src="{{>relpath}}style/{{type}}.svg"/> {{name}}</h1>
       data: JSON.stringify({
        'action': 'add_grounding',
        'highlight': $('#kwic').val(),
+       'anchor': anchor,
        'value': '{{_id}}'
       }),
       error: function(request) {

app/updates/adapt_memo.js

@@ -20,7 +20,11 @@ function (doc, req) {
     case ('add_grounding'):
       if (!doc.groundings) doc.groundings = [];
       if (doc.groundings.indexOf(obj.value) == -1) doc.groundings.push(obj.value);
-      if (doc.type == 'coding' && obj.highlight) doc.body = doc.body + '\n \n>'+obj.highlight+' \n \n';
+      if (doc.type == 'coding' && obj.highlight) {
+        var highlight = obj.highlight;
+        if (obj.anchor > 0) highlight = '['+highlight+']('+obj.value+'#'+obj.anchor+')';
+        doc.body = doc.body + '\n \n>'+highlight+' \n \n';
+      }
     break;
     case ('remove_grounding'):
       var i = doc.groundings.indexOf(obj.value);

app/views/kwic/map.js

@@ -12,7 +12,7 @@ function (o) {
       body = body.concat(o.speeches);
     } else if (o.body) {
       body = body.concat(o.body.split("\n \n").map(function(i){
-        return {'text': i};
+        return {'text': i+'  '};
       }));
     }
     for (var p in body) {
@@ -36,6 +36,7 @@ function (o) {
           context: speech_text.substr(context_begin, context_length),
           begin: speech_begin,
           end: speech_end,
+          par: p,
           match: speech_begin + match.index
         };
         emit([diary, keyword], value);