1 define([], function () {
4 angular.module('app.yangman').directive('uiCodemirror', uiCodemirrorDirective);
9 function uiCodemirrorDirective($timeout, ymUiCodemirrorConfig) {
14 compile: function compile() {
17 if (angular.isUndefined(window.CodeMirror)) {
18 throw new Error('ui-codemirror needs CodeMirror to work... (o rly?)');
25 function postLink(scope, iElement, iAttrs, ngModel) {
26 var codemirrorOptions = angular.extend(
27 {value: iElement.text()},
28 ymUiCodemirrorConfig.codemirror || {},
29 scope.$eval(iAttrs.uiCodemirror),
30 scope.$eval(iAttrs.uiCodemirrorOpts)
33 var codemirror = newCodemirrorEditor(iElement, codemirrorOptions);
37 iAttrs.uiCodemirror || iAttrs.uiCodemirrorOpts,
41 configNgModelLink(codemirror, ngModel, scope);
43 configUiRefreshAttribute(codemirror, iAttrs.uiRefresh, scope);
45 // Allow access to the CodeMirror instance through a broadcasted event
46 // eg: $broadcast('CodeMirror', function(cm){...});
47 scope.$on('CodeMirror', function (event, callback) {
48 if (angular.isFunction(callback)) {
51 throw new Error('the CodeMirror event requires a callback function');
56 if (angular.isFunction(codemirrorOptions.onLoad)) {
57 codemirrorOptions.onLoad(codemirror);
61 function newCodemirrorEditor(iElement, codemirrorOptions) {
64 if (iElement[0].tagName === 'TEXTAREA') {
65 // Might bug but still ...
66 codemirrot = window.CodeMirror.fromTextArea(iElement[0], codemirrorOptions);
69 codemirrot = new window.CodeMirror(function (cm_el) {
70 iElement.append(cm_el);
71 }, codemirrorOptions);
77 function configOptionsWatcher(codemirrot, uiCodemirrorAttr, scope) {
78 if (!uiCodemirrorAttr) {
82 var codemirrorDefaultsKeys = Object.keys(window.CodeMirror.defaults);
83 scope.$watch(uiCodemirrorAttr, updateOptions, true);
84 function updateOptions(newValues, oldValue) {
85 if (!angular.isObject(newValues)) {
88 codemirrorDefaultsKeys.forEach(function (key) {
89 if (newValues.hasOwnProperty(key)) {
91 if (oldValue && newValues[key] === oldValue[key]) {
95 codemirrot.setOption(key, newValues[key]);
101 function configNgModelLink(codemirror, ngModel, scope) {
105 // CodeMirror expects a string, so make sure it gets one.
106 // This does not change the model.
107 ngModel.$formatters.push(function (value) {
108 if (angular.isUndefined(value) || value === null) {
110 } else if (angular.isObject(value) || angular.isArray(value)) {
111 throw new Error('ui-codemirror cannot use an object or an array as a model');
117 // Override the ngModelController $render method, which is what gets called when the model is updated.
118 // This takes care of the synchronizing the codeMirror element with the underlying model, in the case that it is changed by something else.
119 ngModel.$render = function () {
120 //Code mirror expects a string so make sure it gets one
121 //Although the formatter have already done this, it can be possible that another formatter returns undefined (for example the required directive)
122 var safeViewValue = ngModel.$viewValue || '';
123 codemirror.setValue(safeViewValue);
127 // Keep the ngModel in sync with changes from CodeMirror
128 codemirror.on('change', function (instance) {
129 var newValue = instance.getValue();
130 if (newValue !== ngModel.$viewValue) {
131 scope.$evalAsync(function () {
132 ngModel.$setViewValue(newValue);
138 // Fix for using codemirror in tabs (or modal window)
139 codemirror.on('changes', function (instance, changes) {
140 $timeout(function () {
146 function configUiRefreshAttribute(codeMirror, uiRefreshAttr, scope) {
147 if (!uiRefreshAttr) {
151 scope.$watch(uiRefreshAttr, function (newVal, oldVal) {
152 // Skip the initial watch firing
153 if (newVal !== oldVal) {
154 $timeout(function () {
155 codeMirror.refresh();
163 uiCodemirrorDirective.$inject = ['$timeout', 'ymUiCodemirrorConfig'];