Commit | Line | Data |
---|---|---|
1aac4625 | 1 | (function(angular, $, _) { |
9a78af90 | 2 | angular.module('crmMonaco', CRM.angRequires('crmMonaco')); |
1aac4625 | 3 | |
9a78af90 TO |
4 | // "crmMonaco" is a basic skeletal directive. |
5 | // Example usage: <div crm-monaco ng-model="my.content"></div> | |
6 | angular.module('crmMonaco').directive('crmMonaco', function($timeout) { | |
1aac4625 TO |
7 | return { |
8 | restrict: 'AE', | |
9 | require: 'ngModel', | |
9a78af90 | 10 | template: '<div class="crm-monaco-container"></div>', |
1aac4625 | 11 | link: function($scope, $el, $attr, ngModel) { |
6cb689b3 | 12 | var heightPct = 0.70; |
1aac4625 | 13 | var editor; |
9a78af90 | 14 | require.config({paths: CRM.crmMonaco.paths}); |
1aac4625 | 15 | require(['vs/editor/editor.main'], function() { |
9a78af90 | 16 | var editorEl = $el.find('.crm-monaco-container'); |
6cb689b3 | 17 | editorEl.css({height: Math.round(heightPct * $(window).height())}); |
90cd1ece | 18 | editor = monaco.editor.create(editorEl[0], { |
1aac4625 TO |
19 | value: ngModel.$modelValue, |
20 | language: 'html', | |
6cb689b3 TO |
21 | // theme: 'vs-dark', |
22 | theme: 'vs', | |
1aac4625 TO |
23 | minimap: { |
24 | enabled: false | |
85933a02 | 25 | }, |
6cb689b3 | 26 | automaticLayout: true, |
85933a02 TO |
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 | |
1aac4625 TO |
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 | ||
90cd1ece TO |
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 | ||
1aac4625 | 69 | $scope.$on('$destroy', function () { |
90cd1ece | 70 | bodyScrollRestore(); |
1aac4625 TO |
71 | if (editor) editor.dispose(); |
72 | }); | |
73 | }); | |
74 | } | |
75 | }; | |
76 | }); | |
77 | ||
78 | })(angular, CRM.$, CRM._); |