ext/afform/html/ang/afMonaco.js

   1 (function(angular, $, _) {
   2   angular.module('afMonaco', CRM.angRequires('afMonaco'));
   3
   4   // "afMonaco" is a basic skeletal directive.
   5   // Example usage: <div af-monaco ng-model="my.content"></div>
   6   angular.module('afMonaco').directive('afMonaco', function($timeout) {
   7     return {
   8       restrict: 'AE',
   9       require: 'ngModel',
  10       template: '<div class="af-monaco-container"></div>',
  11       link: function($scope, $el, $attr, ngModel) {
  12         var heightPct = 0.70;
  13         var editor;
  14         require.config({paths: CRM.afMonaco.paths});
  15         require(['vs/editor/editor.main'], function() {
  16           var editorEl = $el.find('.af-monaco-container');
  17           editorEl.css({height: Math.round(heightPct * $(window).height())});
  18           editor = monaco.editor.create(editorEl[0], {
  19             value: ngModel.$modelValue,
  20             language: 'html',
  21             // theme: 'vs-dark',
  22             theme: 'vs',
  23             minimap: {
  24               enabled: false
  25             },
  26             automaticLayout: true,
  27             scrollbar: {
  28               useShadows: false,
  29               verticalHasArrows: true,
  30               horizontalHasArrows: true,
  31               vertical: 'visible',
  32               horizontal: 'visible',
  33               verticalScrollbarSize: 17,
  34               horizontalScrollbarSize: 17,
  35               arrowSize: 30
  36             }
  37           });
  38
  39           editor.onDidChangeModelContent(_.debounce(function () {
  40             $scope.$apply(function () {
  41               ngModel.$setViewValue(editor.getValue());
  42             });
  43           }, 150));
  44
  45           ngModel.$render = function() {
  46             if (editor) {
  47               editor.setValue(ngModel.$modelValue);
  48             }
  49             // FIXME: else: retry?
  50           };
  51
  52           // FIXME: This makes vertical scrolling much better, but horizontal is still weird.
  53           var origOverflow;
  54           function bodyScrollSuspend() {
  55             if (origOverflow !== undefined) return;
  56             origOverflow = $('body').css('overflow');
  57             $('body').css('overflow', 'hidden');
  58           }
  59           function bodyScrollRestore() {
  60             if (origOverflow === undefined) return;
  61             $('body').css('overflow', origOverflow);
  62             origOverflow = undefined;
  63           }
  64           editorEl.on('mouseenter', bodyScrollSuspend);
  65           editorEl.on('mouseleave', bodyScrollRestore);
  66           editor.onDidFocusEditorWidget(bodyScrollSuspend);
  67           editor.onDidBlurEditorWidget(bodyScrollRestore);
  68
  69           $scope.$on('$destroy', function () {
  70             bodyScrollRestore();
  71             if (editor) editor.dispose();
  72           });
  73         });
  74       }
  75     };
  76   });
  77
  78 })(angular, CRM.$, CRM._);