modules/yangui-resources/src/main/resources/yangui/directives/ui-codemirror.directive.js

   1 //angular.module('ui.codemirror', [])
   2 //  .constant('uiCodemirrorConfig', {})
   3 //  .directive('uiCodemirror', uiCodemirrorDirective);
   4 define(['app/yangui/yangui.module'], function(yangui) {
   5
   6     yangui.register.constant('uiCodemirrorConfig', {});
   7     yangui.register.directive('uiCodemirror', uiCodemirrorDirective);
   8
   9     /**
  10      * @ngInject
  11      */
  12     function uiCodemirrorDirective($timeout, uiCodemirrorConfig) {
  13
  14       return {
  15         restrict: 'EA',
  16         require: '?ngModel',
  17         compile: function compile() {
  18
  19           // Require CodeMirror
  20           if (angular.isUndefined(window.CodeMirror)) {
  21             throw new Error('ui-codemirror needs CodeMirror to work... (o rly?)');
  22           }
  23
  24           return postLink;
  25         }
  26       };
  27
  28       function postLink(scope, iElement, iAttrs, ngModel) {
  29         var codemirrorOptions = angular.extend(
  30           { value: iElement.text() },
  31           uiCodemirrorConfig.codemirror || {},
  32           scope.$eval(iAttrs.uiCodemirror),
  33           scope.$eval(iAttrs.uiCodemirrorOpts)
  34         );
  35
  36         var codemirror = newCodemirrorEditor(iElement, codemirrorOptions);
  37
  38         configOptionsWatcher(
  39           codemirror,
  40           iAttrs.uiCodemirror || iAttrs.uiCodemirrorOpts,
  41           scope
  42         );
  43
  44         configNgModelLink(codemirror, ngModel, scope);
  45
  46         configUiRefreshAttribute(codemirror, iAttrs.uiRefresh, scope);
  47
  48         // Allow access to the CodeMirror instance through a broadcasted event
  49         // eg: $broadcast('CodeMirror', function(cm){...});
  50         scope.$on('CodeMirror', function(event, callback) {
  51           if (angular.isFunction(callback)) {
  52             callback(codemirror);
  53           } else {
  54             throw new Error('the CodeMirror event requires a callback function');
  55           }
  56         });
  57
  58         // onLoad callback
  59         if (angular.isFunction(codemirrorOptions.onLoad)) {
  60           codemirrorOptions.onLoad(codemirror);
  61         }
  62       }
  63
  64       function newCodemirrorEditor(iElement, codemirrorOptions) {
  65         var codemirrot;
  66
  67         if (iElement[0].tagName === 'TEXTAREA') {
  68           // Might bug but still ...
  69           codemirrot = window.CodeMirror.fromTextArea(iElement[0], codemirrorOptions);
  70         } else {
  71           iElement.html('');
  72           codemirrot = new window.CodeMirror(function(cm_el) {
  73             iElement.append(cm_el);
  74           }, codemirrorOptions);
  75         }
  76
  77         return codemirrot;
  78       }
  79
  80       function configOptionsWatcher(codemirrot, uiCodemirrorAttr, scope) {
  81         if (!uiCodemirrorAttr) { return; }
  82
  83         var codemirrorDefaultsKeys = Object.keys(window.CodeMirror.defaults);
  84         scope.$watch(uiCodemirrorAttr, updateOptions, true);
  85         function updateOptions(newValues, oldValue) {
  86           if (!angular.isObject(newValues)) { return; }
  87           codemirrorDefaultsKeys.forEach(function(key) {
  88             if (newValues.hasOwnProperty(key)) {
  89
  90               if (oldValue && newValues[key] === oldValue[key]) {
  91                 return;
  92               }
  93
  94               codemirrot.setOption(key, newValues[key]);
  95             }
  96           });
  97         }
  98       }
  99
 100       function configNgModelLink(codemirror, ngModel, scope) {
 101         if (!ngModel) { return; }
 102         // CodeMirror expects a string, so make sure it gets one.
 103         // This does not change the model.
 104         ngModel.$formatters.push(function(value) {
 105           if (angular.isUndefined(value) || value === null) {
 106             return '';
 107           } else if (angular.isObject(value) || angular.isArray(value)) {
 108             throw new Error('ui-codemirror cannot use an object or an array as a model');
 109           }
 110           return value;
 111         });
 112
 113
 114         // Override the ngModelController $render method, which is what gets called when the model is updated.
 115         // This takes care of the synchronizing the codeMirror element with the underlying model, in the case that it is changed by something else.
 116         ngModel.$render = function() {
 117           //Code mirror expects a string so make sure it gets one
 118           //Although the formatter have already done this, it can be possible that another formatter returns undefined (for example the required directive)
 119           var safeViewValue = ngModel.$viewValue || '';
 120           codemirror.setValue(safeViewValue);
 121         };
 122
 123
 124         // Keep the ngModel in sync with changes from CodeMirror
 125         codemirror.on('change', function(instance) {
 126           var newValue = instance.getValue();
 127           if (newValue !== ngModel.$viewValue) {
 128             scope.$evalAsync(function() {
 129               ngModel.$setViewValue(newValue);
 130             });
 131           }
 132         });
 133
 134
 135         // Fix for using codemirror in tabs (or modal window)
 136         codemirror.on('changes', function(instance, changes) {
 137             $timeout(function(){
 138                 instance.refresh();
 139             });
 140         });
 141       }
 142
 143       function configUiRefreshAttribute(codeMirror, uiRefreshAttr, scope) {
 144         if (!uiRefreshAttr) { return; }
 145
 146         scope.$watch(uiRefreshAttr, function(newVal, oldVal) {
 147           // Skip the initial watch firing
 148           if (newVal !== oldVal) {
 149             $timeout(function() {
 150               codeMirror.refresh();
 151             });
 152           }
 153         });
 154       }
 155
 156     }
 157     uiCodemirrorDirective.$inject = ["$timeout", "uiCodemirrorConfig"];
 158
 159 });