Note horizontal scroll inside left/right panels

public/css/style.css

@@ -2594,3 +2594,29 @@ table.table-xs tr td {
     margin-top: 0;
     width: 6px;
 }
+.stag-scrollbar {
+    overflow: overlay;
+}
+.stag-scrollbar .stag-scrollbar-horiz-container {
+    position: fixed;
+    left: 849px;
+    bottom: 35px;
+    width: 633px;
+    height: 7px;
+    /*background: #aaa3;*/
+    transition: opacity 0.2s ease;
+    opacity: 0;
+}
+.stag-scrollbar[stag-h-scrollbar]:hover .stag-scrollbar-horiz-container,
+body.stag-scrollbar-scrolling .stag-scrollbar[stag-h-scrollbar] .stag-scrollbar-horiz-container {
+    opacity: 1;
+}
+.stag-scrollbar .stag-scrollbar-horiz-tracker {
+    height: 7px;
+    background: #ddd;
+    border-radius: 10px;
+}
+.stag-scrollbar .stag-scrollbar-horiz-tracker:hover {
+    background: #ccc;
+    cursor: ew-resize;
+}

public/js/stag-scrollbar.js

@@ -0,0 +1,106 @@
+(function() {
+    function recalculate(_container, _bottomThreshold) {
+        let $container = $(_container);
+        let width = $container.width(), scrollWidth = _container.scrollWidth, scrollLeft = _container.scrollLeft,
+            stagScrollbarUI = $container.find('>.stag-scrollbar-horiz-container').first();
+        if(Math.ceil(scrollWidth) > Math.ceil(width)) {
+            $container.attr({
+                'stag-h-scrollbar': 1,
+                'stag-h-scroll-left': scrollLeft,
+                'stag-h-scroll-width': scrollWidth,
+                'stag-h-width': width,
+            });
+            if($container.offset().top + $container.outerHeight() > $(window).height() + $(window).scrollTop()) {
+                stagScrollbarUI.css({
+                    display: 'block',
+                    left: ($container.offset().left + 4) + 'px',
+                    width: ($container.width() - 4) + 'px',
+                    bottom: _bottomThreshold + 'px',
+                });
+                let trackerWidth = Math.floor((width/scrollWidth)*stagScrollbarUI.width()) + 'px', // ((width/scrollwidth) *  100) %,
+                    trackerLeft = Math.ceil((scrollLeft/scrollWidth)*stagScrollbarUI.width()) + 'px'; // // ((scrollLeft/scrollwidth) *  100) %,
+                stagScrollbarUI.find('.stag-scrollbar-horiz-tracker').css({
+                    marginLeft: trackerLeft,
+                    width: trackerWidth,
+                });
+            }
+            else {
+                stagScrollbarUI.css({
+                    display: 'none'
+                });
+            }
+        }
+        else {
+            $container.removeAttr('stag-h-scrollbar');
+        }
+    }
+    window.initStagScrollbar = function(_bottomThreshold = 0) {
+        $('.stag-scrollbar:not([stag-scrollbar-initialized])').each(function() {
+
+            let scrollbarID = 'stag-scrollbar-' + (Math.random() * 10000);
+
+            let stagScrollbarUI = $('<div/>').addClass('stag-scrollbar-horiz-container');
+            stagScrollbarUI.append($('<div/>').addClass('stag-scrollbar-horiz-tracker'))
+            $(this).append(stagScrollbarUI);
+            recalculate(this, _bottomThreshold);
+            let self = this;
+            $(this)
+                .off('mouseenter.stag-scrollbar')
+                .on('mouseenter.stag-scrollbar', function() {
+                    if(!scrolling) recalculate(this, _bottomThreshold);
+                })
+                .off('scroll.stag-scrollbar')
+                .on('scroll.stag-scrollbar', function() {
+                    if(!scrolling) recalculate(this, _bottomThreshold);
+                })
+                .off('resize.stag-scrollbar')
+                .on('resize.stag-scrollbar', function() {
+                    recalculate(this, _bottomThreshold);
+                });
+            $(window).on('resize', function() {
+                recalculate(self, _bottomThreshold);
+            });
+            $(window).on('scroll', function() {
+                recalculate(self, _bottomThreshold);
+            });
+            $(document).on('v-splitter-change', function() {
+                recalculate(self, _bottomThreshold);
+            });
+
+            let origX = 0, origLeft = 0, scrolling = false, tracker = $(this).find('.stag-scrollbar-horiz-tracker');
+
+            tracker
+                .off('mousedown.' + scrollbarID)
+                .on('mousedown.' + scrollbarID, function (_e) {
+                    origLeft = tracker.offset().left - stagScrollbarUI.offset().left;
+                    origX = _e.screenX;
+                    scrolling = true;
+                    $('body').addClass('stag-scrollbar-scrolling');
+                    return false;
+                });
+            $(document)
+                .off('mousemove.' + scrollbarID)
+                .on('mousemove.' + scrollbarID, function (_e) {
+                    if (!scrolling) return;
+                    let delta = _e.screenX - origX;
+                    if((origLeft + delta) >= 0 && (origLeft + delta + tracker.width()) <= stagScrollbarUI.width()) {
+                        tracker.css({
+                            marginLeft: (origLeft + delta) + 'px'
+                        });
+                        let percentScrolled = delta/(stagScrollbarUI.width() - tracker.width());
+                        $(self).scrollLeft((self.scrollWidth - $(self).width()) * percentScrolled);
+                    }
+                })
+                .off('mouseup.' + scrollbarID)
+                .on('mouseup.' + scrollbarID, function (_e) {
+                    if (!scrolling) return;
+                    scrolling = false;
+                    $('body').removeClass('stag-scrollbar-scrolling');
+                    recalculate(self, _bottomThreshold);
+                });
+
+            $(this).attr('stag-scrollbar-id', scrollbarID).attr('stag-scrollbar-initialized', 1);
+        });
+    }
+    // addMCInitializer('stag-scrollbar', initStagScrollbar);
+}).call(window);

public/v-splitter-px/v-splitter.js

@@ -8,6 +8,7 @@ function initVSplitter(_name, _left, _right, _alignTo = null) {
         var tempFinalLeft = Math.round(parseFloat(localStorage['v-split-rounded-' + _name]));
         _left.css({flex: '0 0 ' + tempFinalLeft + '%'});
         _right.css({flex: '0 0 ' + (100 - tempFinalLeft) + '%'});
+        $(document).trigger('v-splitter-change');
     }
 
     var origLeft = -1, finalLeft = -1, origX = -1, vMoving = false, totalWidth = _left.parent().width();
@@ -52,6 +53,7 @@ function initVSplitter(_name, _left, _right, _alignTo = null) {
             _right.css({flex: '0 0 ' + (100 - tempFinalLeft) + '%'});
             $('.v-split-active').removeClass('v-split-active');
             localStorage['v-split-rounded-' + _name] = tempFinalLeft;
+            $(document).trigger('v-splitter-change');
         });
 
     $(window).off('resize.' + _name).on('resize.' + _name, function(_e) { _setSplitterHeight(); });

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

@@ -539,8 +539,8 @@
                         $shortcuts = "";
                         $latestSectionTS = 0;
                         ?>
-                        <div class="{{ $note->is_signed_by_hcp ? 'note-signed-by-hcp' : '' }} {{$isVisitTemplateBased && $note->visitTemplate->internal_name === 'soap_visit' ? 'w-30 border-right note-left-panel overflow-auto' : ''}}">
-                            <div class="min-width-300px">
+                        <div class="{{ $note->is_signed_by_hcp ? 'note-signed-by-hcp' : '' }} {{$isVisitTemplateBased && $note->visitTemplate->internal_name === 'soap_visit' ? 'w-30 border-right note-left-panel stag-scrollbar' : ''}}">
+                            <div class="min-width-300px stag-scrollbar">
                                 @if($isVisitTemplateBased && $doesVisitTemplateLayoutExist)
                                     @include($visitLayoutPath)
                                 @elseif($isVisitTemplateBased && !$doesVisitTemplateUiConfigExist)
@@ -553,7 +553,7 @@
                             </div>
                         </div>
                         @if($isVisitTemplateBased && $note->visitTemplate->internal_name === 'soap_visit')
-                        <div class="w-70 border-left note-right-panel overflow-auto">
+                        <div class="w-70 border-left note-right-panel stag-scrollbar">
                             <div class="min-width-700px">
                                 @if($isVisitTemplateBased && !$note->is_signed_by_hcp)
                                     @include('app.patient.note.note-segment-list-rhs')
@@ -2661,8 +2661,6 @@
     <script>
         (function() {
             function init() {
-                debugger
-                initVSplitter('stag-note', $('.note-left-panel'), $('.note-right-panel'));
                 @if($note->visitTemplate->internal_name !== 'soap_visit')
                 fixTreeTopAndHeight();
                 $(window).on('resize', fixTreeTopAndHeight);
@@ -2753,6 +2751,7 @@
         (function() {
             function init() {
                 initVSplitter('stag-note', $('.note-left-panel'), $('.note-right-panel'));
+                initStagScrollbar(34);
             }
             addMCInitializer('note-splitter', init, '#note-single-header');
         })();

resources/views/layouts/template.blade.php

@@ -429,6 +429,7 @@
     <script src="/js/dq.js?v={{config('app.asset_version')}}"></script>
     <script src="/js/icd-autocomplete.js?v={{config('app.asset_version')}}"></script>
     <script src="/js/stag-collapsible-card.js?v={{config('app.asset_version')}}"></script>
+    <script src="/js/stag-scrollbar.js?v={{config('app.asset_version')}}"></script>
     @include('app/pdf/viewer')
     @if(config('app.enableSockets'))
     <script>