modal.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. (function (angular){
  2. "use strict";
  3. angular.module('morph.directives')
  4. .directive('ngMorphModal', ['TemplateHandler', '$compile', 'Morph', function (TemplateHandler, $compile, Morph) {
  5. return {
  6. restrict: 'A',
  7. scope: true,
  8. link: function (scope, element, attrs) {
  9. var wrapper = angular.element('<div></div>').css('visibility', 'hidden');
  10. var settings = scope[attrs.ngMorphModal];
  11. var isMorphed = false;
  12. var compile = function (results) {
  13. var morphTemplate = results.data ? results.data : results;
  14. return $compile(morphTemplate)(scope);
  15. };
  16. var initMorphable = function (content) {
  17. var closeEl = angular.element(content[0].querySelector(settings.closeEl));
  18. var elements = {
  19. morphable: element,
  20. wrapper: wrapper,
  21. content: content
  22. };
  23. // create element for modal fade
  24. if (settings.modal.fade !== false) {
  25. var fade = angular.element('<div></div>');
  26. elements.fade = fade;
  27. }
  28. // add to dom
  29. wrapper.append(content);
  30. element.after(wrapper);
  31. if (fade) wrapper.after(fade);
  32. // set the wrapper bg color
  33. wrapper.css('background', getComputedStyle(content[0]).backgroundColor);
  34. // get bounding rectangles
  35. settings.MorphableBoundingRect = element[0].getBoundingClientRect();
  36. settings.ContentBoundingRect = content[0].getBoundingClientRect();
  37. // bootstrap the modal
  38. var modal = new Morph('Modal', elements, settings);
  39. // attach event listeners
  40. element.bind('click', function () {
  41. settings.MorphableBoundingRect = element[0].getBoundingClientRect();
  42. isMorphed = modal.toggle(isMorphed);
  43. });
  44. if (closeEl) {
  45. closeEl.bind('click', function (event) {
  46. settings.MorphableBoundingRect = element[0].getBoundingClientRect();
  47. isMorphed = modal.toggle(isMorphed);
  48. });
  49. }
  50. // remove event handlers when scope is destroyed
  51. scope.$on('$destroy', function () {
  52. element.unbind('click');
  53. closeEl.unbind('click');
  54. });
  55. };
  56. if (settings.modal.template) {
  57. initMorphable(compile(settings.modal.template));
  58. } else if (settings.modal.templateUrl) {
  59. TemplateHandler
  60. .get(settings.modal.templateUrl)
  61. .then(compile)
  62. .then(initMorphable);
  63. } else {
  64. throw new Error('No template found.');
  65. }
  66. }
  67. };
  68. }]);
  69. })(angular);