1 (function(angular
, $, _
) {
2 angular
.module('crmMonaco', CRM
.angRequires('crmMonaco'));
4 // "crmMonaco" is a basic skeletal directive.
5 // Example usage: <div crm-monaco ng-model="my.content"></div>
6 // Example usage: <div crm-monaco="{readOnly: true}" ng-model="my.content"></div>
7 angular
.module('crmMonaco').directive('crmMonaco', function($timeout
, $parse
) {
11 template
: '<div class="crm-monaco-container"></div>',
12 link: function($scope
, $el
, $attr
, ngModel
) {
15 require
.config({paths
: CRM
.crmMonaco
.paths
});
16 require(['vs/editor/editor.main'], function() {
23 if ($attr
.crmMonaco
) {
24 angular
.extend(options
, $parse($attr
.crmMonaco
)($scope
));
26 angular
.extend(options
, {
27 value
: ngModel
.$modelValue
,
31 automaticLayout
: true,
34 verticalHasArrows
: true,
35 horizontalHasArrows
: true,
37 horizontal
: 'visible',
38 verticalScrollbarSize
: 17,
39 horizontalScrollbarSize
: 17,
44 var editorEl
= $el
.find('.crm-monaco-container');
45 editorEl
.css({height
: Math
.round(heightPct
* $(window
).height())});
46 editor
= monaco
.editor
.create(editorEl
[0], options
);
48 editor
.onDidChangeModelContent(_
.debounce(function () {
49 $scope
.$apply(function () {
50 ngModel
.$setViewValue(editor
.getValue());
54 ngModel
.$render = function() {
56 editor
.setValue(ngModel
.$modelValue
);
58 // FIXME: else: retry?
61 // FIXME: This makes vertical scrolling much better, but horizontal is still weird.
63 function bodyScrollSuspend() {
64 if (origOverflow
!== undefined) return;
65 origOverflow
= $('body').css('overflow');
66 $('body').css('overflow', 'hidden');
68 function bodyScrollRestore() {
69 if (origOverflow
=== undefined) return;
70 $('body').css('overflow', origOverflow
);
71 origOverflow
= undefined;
73 editorEl
.on('mouseenter', bodyScrollSuspend
);
74 editorEl
.on('mouseleave', bodyScrollRestore
);
75 editor
.onDidFocusEditorWidget(bodyScrollSuspend
);
76 editor
.onDidBlurEditorWidget(bodyScrollRestore
);
78 $scope
.$on('$destroy', function () {
80 if (editor
) editor
.dispose();
87 })(angular
, CRM
.$, CRM
._
);