ui-codemirror.js 4.4 KB

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