From 90cd1eced2d74325a48027552dd3e8813cd8d815 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Sun, 5 May 2019 15:26:50 -0700
Subject: [PATCH] afMoncao - While hovering on editor, 2-finger scroll should
 only affect editor

---
 ext/afform/html/ang/afMoncao.js | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/ext/afform/html/ang/afMoncao.js b/ext/afform/html/ang/afMoncao.js
index 1b829fafc3..142dba8f66 100644
--- a/ext/afform/html/ang/afMoncao.js
+++ b/ext/afform/html/ang/afMoncao.js
@@ -3,16 +3,17 @@
 
   // "afMonaco" is a basic skeletal directive.
   // Example usage: <div af-monaco ng-model="my.content"></div>
-  angular.module('afMoncao').directive('afMonaco', function() {
+  angular.module('afMoncao').directive('afMonaco', function($timeout) {
     return {
       restrict: 'AE',
       require: 'ngModel',
-      template: '<div id="myContainer" style="width:800px;height:600px;border:1px solid grey"></div>',
+      template: '<div class="af-monaco-container" style="width:800px;height:600px;border:1px solid grey"></div>',
       link: function($scope, $el, $attr, ngModel) {
         var editor;
         require.config({paths: CRM.afMoncao.paths});
         require(['vs/editor/editor.main'], function() {
-          editor = monaco.editor.create(document.getElementById('myContainer'), {
+          var editorEl = $el.find('.af-monaco-container');
+          editor = monaco.editor.create(editorEl[0], {
             value: ngModel.$modelValue,
             language: 'html',
             theme: 'vs-dark',
@@ -44,7 +45,25 @@
             // FIXME: else: retry?
           };
 
+          // FIXME: This makes vertical scrolling much better, but horizontal is still weird.
+          var origOverflow;
+          function bodyScrollSuspend() {
+            if (origOverflow !== undefined) return;
+            origOverflow = $('body').css('overflow');
+            $('body').css('overflow', 'hidden');
+          }
+          function bodyScrollRestore() {
+            if (origOverflow === undefined) return;
+            $('body').css('overflow', origOverflow);
+            origOverflow = undefined;
+          }
+          editorEl.on('mouseenter', bodyScrollSuspend);
+          editorEl.on('mouseleave', bodyScrollRestore);
+          editor.onDidFocusEditorWidget(bodyScrollSuspend);
+          editor.onDidBlurEditorWidget(bodyScrollRestore);
+
           $scope.$on('$destroy', function () {
+            bodyScrollRestore();
             if (editor) editor.dispose();
           });
         });
-- 
2.25.1