/public/javascripts/lib/ui-codemirror.js

https://github.com/cobyism/strider-on-heroku · JavaScript · 116 lines · 87 code · 16 blank · 13 comment · 20 complexity · c03f903fd86d2f2fc084532400df85ca MD5 · raw file

  1. /*global angular, CodeMirror, Error*/
  2. /**
  3. * Binds a CodeMirror widget to a <textarea> element.
  4. */
  5. angular.module('ui.codemirror', [])
  6. .constant('uiCodemirrorConfig', {})
  7. .directive('uiCodemirror', ['uiCodemirrorConfig', '$timeout', function (uiCodemirrorConfig, $timeout) {
  8. 'use strict';
  9. var events = ["cursorActivity", "viewportChange", "gutterClick", "focus", "blur", "scroll", "update"];
  10. return {
  11. restrict: 'A',
  12. require: 'ngModel',
  13. link: function (scope, elm, attrs, ngModel) {
  14. var options, opts, onChange, deferCodeMirror, codeMirror;
  15. if (elm[0].type !== 'textarea') {
  16. throw new Error('uiCodemirror3 can only be applied to a textarea element');
  17. }
  18. options = uiCodemirrorConfig.codemirror || {};
  19. opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror));
  20. onChange = function (aEvent) {
  21. return function (instance, changeObj) {
  22. var newValue = instance.getValue();
  23. if (newValue !== ngModel.$viewValue) {
  24. ngModel.$setViewValue(newValue);
  25. }
  26. if (typeof aEvent === "function") {
  27. aEvent(instance, changeObj);
  28. }
  29. if (!scope.$$phase) {
  30. scope.$apply();
  31. }
  32. };
  33. };
  34. deferCodeMirror = function () {
  35. codeMirror = CodeMirror.fromTextArea(elm[0], opts);
  36. // Refresh codemirror externally this way...
  37. //$('[ui-codemirror]').trigger('refresh')
  38. elm.on('refresh', function () {
  39. codeMirror.refresh()
  40. });
  41. if (angular.isDefined(scope[attrs.uiCodemirror])) {
  42. scope.$watch(attrs.uiCodemirror, function (newValues) {
  43. for (var key in newValues) {
  44. if (newValues.hasOwnProperty(key)) {
  45. codeMirror.setOption(key, newValues[key]);
  46. }
  47. }
  48. }, true);
  49. }
  50. codeMirror.on("change", onChange(opts.onChange));
  51. for (var i = 0, n = events.length, aEvent; i < n; ++i) {
  52. aEvent = opts["on" + events[i].charAt(0).toUpperCase() + events[i].slice(1)];
  53. if (aEvent === void 0) {
  54. continue;
  55. }
  56. if (typeof aEvent !== "function") {
  57. continue;
  58. }
  59. codeMirror.on(events[i], aEvent);
  60. }
  61. // CodeMirror expects a string, so make sure it gets one.
  62. // This does not change the model.
  63. ngModel.$formatters.push(function (value) {
  64. if (angular.isUndefined(value) || value === null) {
  65. return '';
  66. }
  67. else if (angular.isObject(value) || angular.isArray(value)) {
  68. throw new Error('ui-codemirror cannot use an object or an array as a model');
  69. }
  70. return value;
  71. });
  72. // Override the ngModelController $render method, which is what gets called when the model is updated.
  73. // This takes care of the synchronizing the codeMirror element with the underlying model, in the case that it is changed by something else.
  74. ngModel.$render = function () {
  75. codeMirror.setValue(ngModel.$viewValue);
  76. };
  77. if (!ngModel.$viewValue){
  78. ngModel.$setViewValue(elm.text());
  79. ngModel.$render();
  80. }
  81. // Watch ui-refresh and refresh the directive
  82. if (attrs.uiRefresh) {
  83. scope.$watch(attrs.uiRefresh, function (newVal, oldVal) {
  84. // Skip the initial watch firing
  85. if (newVal !== oldVal) {
  86. $timeout(function () {
  87. codeMirror.refresh();
  88. });
  89. }
  90. });
  91. }
  92. // onLoad callback
  93. if (angular.isFunction(opts.onLoad)) {
  94. opts.onLoad(codeMirror);
  95. }
  96. };
  97. $timeout(deferCodeMirror);
  98. }
  99. };
  100. }]);