Highlight sync: visit-tree node <-> note-section

public/css/style.css

@@ -1992,8 +1992,11 @@ body.in-iframe .main-row > .sidebar {
     background-color: aliceblue;
     color: #0d59af !important;
 }
-.note-container .note-lhs-tree .note-tree-node.active>a {
+.note-container .note-lhs-tree .note-tree-node:hover>a,
+.note-container .note-lhs-tree .note-tree-node.hovered>a {
     background-color: aliceblue;
+}
+.note-container .note-lhs-tree .note-tree-node.active>a {
     font-weight: bold !important;
     color: #0d59af !important;
 }

resources/views/app/patient/note/dashboard_script.blade.php

@@ -5,6 +5,24 @@
 
             function init() {
 
+                // on note-section hover, highlight the according left-tree node(s)
+                $(document)
+                    .off('mouseenter', '.note-section')
+                    .on('mouseenter', '.note-section', function(){
+                        $('.note-tree-node').removeClass('hovered');
+                        let target = $('.note-tree-node a[data-segment-uid="' + $(this).attr('data-segment-uid') + '"]');
+                        target.parent().addClass('hovered');
+                        target.parent().parents('.note-tree-node').addClass('hovered');
+                        return false;
+                    });
+
+                $(document)
+                    .off('mouseleave', '.note-section')
+                    .on('mouseleave', '.note-section', () => {
+                        $('.note-tree-node').removeClass('hovered');
+                        return false;
+                    });
+
                 // print note
                 $(document)
                     .off('click.print', '.print-note')