Otaku-Projects /
AngularJS-CRUD-PHP
| @@ 3556-3648 (lines=93) @@ | ||
| 3553 | }]) |
|
| 3554 | ||
| 3555 | .directive('uibModalWindow', ['$uibModalStack', '$q', '$animateCss', '$document', |
|
| 3556 | function($modalStack, $q, $animateCss, $document) { |
|
| 3557 | return { |
|
| 3558 | scope: { |
|
| 3559 | index: '@' |
|
| 3560 | }, |
|
| 3561 | replace: true, |
|
| 3562 | transclude: true, |
|
| 3563 | templateUrl: function(tElement, tAttrs) { |
|
| 3564 | return tAttrs.templateUrl || 'uib/template/modal/window.html'; |
|
| 3565 | }, |
|
| 3566 | link: function(scope, element, attrs) { |
|
| 3567 | element.addClass(attrs.windowClass || ''); |
|
| 3568 | element.addClass(attrs.windowTopClass || ''); |
|
| 3569 | scope.size = attrs.size; |
|
| 3570 | ||
| 3571 | scope.close = function(evt) { |
|
| 3572 | var modal = $modalStack.getTop(); |
|
| 3573 | if (modal && modal.value.backdrop && |
|
| 3574 | modal.value.backdrop !== 'static' && |
|
| 3575 | evt.target === evt.currentTarget) { |
|
| 3576 | evt.preventDefault(); |
|
| 3577 | evt.stopPropagation(); |
|
| 3578 | $modalStack.dismiss(modal.key, 'backdrop click'); |
|
| 3579 | } |
|
| 3580 | }; |
|
| 3581 | ||
| 3582 | // moved from template to fix issue #2280 |
|
| 3583 | element.on('click', scope.close); |
|
| 3584 | ||
| 3585 | // This property is only added to the scope for the purpose of detecting when this directive is rendered. |
|
| 3586 | // We can detect that by using this property in the template associated with this directive and then use |
|
| 3587 | // {@link Attribute#$observe} on it. For more details please see {@link TableColumnResize}. |
|
| 3588 | scope.$isRendered = true; |
|
| 3589 | ||
| 3590 | // Deferred object that will be resolved when this modal is render. |
|
| 3591 | var modalRenderDeferObj = $q.defer(); |
|
| 3592 | // Observe function will be called on next digest cycle after compilation, ensuring that the DOM is ready. |
|
| 3593 | // In order to use this way of finding whether DOM is ready, we need to observe a scope property used in modal's template. |
|
| 3594 | attrs.$observe('modalRender', function(value) { |
|
| 3595 | if (value === 'true') { |
|
| 3596 | modalRenderDeferObj.resolve(); |
|
| 3597 | } |
|
| 3598 | }); |
|
| 3599 | ||
| 3600 | modalRenderDeferObj.promise.then(function() { |
|
| 3601 | var animationPromise = null; |
|
| 3602 | ||
| 3603 | if (attrs.modalInClass) { |
|
| 3604 | animationPromise = $animateCss(element, { |
|
| 3605 | addClass: attrs.modalInClass |
|
| 3606 | }).start(); |
|
| 3607 | ||
| 3608 | scope.$on($modalStack.NOW_CLOSING_EVENT, function(e, setIsAsync) { |
|
| 3609 | var done = setIsAsync(); |
|
| 3610 | $animateCss(element, { |
|
| 3611 | removeClass: attrs.modalInClass |
|
| 3612 | }).start().then(done); |
|
| 3613 | }); |
|
| 3614 | } |
|
| 3615 | ||
| 3616 | ||
| 3617 | $q.when(animationPromise).then(function() { |
|
| 3618 | // Notify {@link $modalStack} that modal is rendered. |
|
| 3619 | var modal = $modalStack.getTop(); |
|
| 3620 | if (modal) { |
|
| 3621 | $modalStack.modalRendered(modal.key); |
|
| 3622 | } |
|
| 3623 | ||
| 3624 | /** |
|
| 3625 | * If something within the freshly-opened modal already has focus (perhaps via a |
|
| 3626 | * directive that causes focus). then no need to try and focus anything. |
|
| 3627 | */ |
|
| 3628 | if (!($document[0].activeElement && element[0].contains($document[0].activeElement))) { |
|
| 3629 | var inputWithAutofocus = element[0].querySelector('[autofocus]'); |
|
| 3630 | /** |
|
| 3631 | * Auto-focusing of a freshly-opened modal element causes any child elements |
|
| 3632 | * with the autofocus attribute to lose focus. This is an issue on touch |
|
| 3633 | * based devices which will show and then hide the onscreen keyboard. |
|
| 3634 | * Attempts to refocus the autofocus element via JavaScript will not reopen |
|
| 3635 | * the onscreen keyboard. Fixed by updated the focusing logic to only autofocus |
|
| 3636 | * the modal element if the modal does not contain an autofocus element. |
|
| 3637 | */ |
|
| 3638 | if (inputWithAutofocus) { |
|
| 3639 | inputWithAutofocus.focus(); |
|
| 3640 | } else { |
|
| 3641 | element[0].focus(); |
|
| 3642 | } |
|
| 3643 | } |
|
| 3644 | }); |
|
| 3645 | }); |
|
| 3646 | } |
|
| 3647 | }; |
|
| 3648 | }]) |
|
| 3649 | ||
| 3650 | .directive('uibModalAnimationClass', function() { |
|
| 3651 | return { |
|
| @@ 3555-3647 (lines=93) @@ | ||
| 3552 | }]) |
|
| 3553 | ||
| 3554 | .directive('uibModalWindow', ['$uibModalStack', '$q', '$animateCss', '$document', |
|
| 3555 | function($modalStack, $q, $animateCss, $document) { |
|
| 3556 | return { |
|
| 3557 | scope: { |
|
| 3558 | index: '@' |
|
| 3559 | }, |
|
| 3560 | replace: true, |
|
| 3561 | transclude: true, |
|
| 3562 | templateUrl: function(tElement, tAttrs) { |
|
| 3563 | return tAttrs.templateUrl || 'uib/template/modal/window.html'; |
|
| 3564 | }, |
|
| 3565 | link: function(scope, element, attrs) { |
|
| 3566 | element.addClass(attrs.windowClass || ''); |
|
| 3567 | element.addClass(attrs.windowTopClass || ''); |
|
| 3568 | scope.size = attrs.size; |
|
| 3569 | ||
| 3570 | scope.close = function(evt) { |
|
| 3571 | var modal = $modalStack.getTop(); |
|
| 3572 | if (modal && modal.value.backdrop && |
|
| 3573 | modal.value.backdrop !== 'static' && |
|
| 3574 | evt.target === evt.currentTarget) { |
|
| 3575 | evt.preventDefault(); |
|
| 3576 | evt.stopPropagation(); |
|
| 3577 | $modalStack.dismiss(modal.key, 'backdrop click'); |
|
| 3578 | } |
|
| 3579 | }; |
|
| 3580 | ||
| 3581 | // moved from template to fix issue #2280 |
|
| 3582 | element.on('click', scope.close); |
|
| 3583 | ||
| 3584 | // This property is only added to the scope for the purpose of detecting when this directive is rendered. |
|
| 3585 | // We can detect that by using this property in the template associated with this directive and then use |
|
| 3586 | // {@link Attribute#$observe} on it. For more details please see {@link TableColumnResize}. |
|
| 3587 | scope.$isRendered = true; |
|
| 3588 | ||
| 3589 | // Deferred object that will be resolved when this modal is render. |
|
| 3590 | var modalRenderDeferObj = $q.defer(); |
|
| 3591 | // Observe function will be called on next digest cycle after compilation, ensuring that the DOM is ready. |
|
| 3592 | // In order to use this way of finding whether DOM is ready, we need to observe a scope property used in modal's template. |
|
| 3593 | attrs.$observe('modalRender', function(value) { |
|
| 3594 | if (value === 'true') { |
|
| 3595 | modalRenderDeferObj.resolve(); |
|
| 3596 | } |
|
| 3597 | }); |
|
| 3598 | ||
| 3599 | modalRenderDeferObj.promise.then(function() { |
|
| 3600 | var animationPromise = null; |
|
| 3601 | ||
| 3602 | if (attrs.modalInClass) { |
|
| 3603 | animationPromise = $animateCss(element, { |
|
| 3604 | addClass: attrs.modalInClass |
|
| 3605 | }).start(); |
|
| 3606 | ||
| 3607 | scope.$on($modalStack.NOW_CLOSING_EVENT, function(e, setIsAsync) { |
|
| 3608 | var done = setIsAsync(); |
|
| 3609 | $animateCss(element, { |
|
| 3610 | removeClass: attrs.modalInClass |
|
| 3611 | }).start().then(done); |
|
| 3612 | }); |
|
| 3613 | } |
|
| 3614 | ||
| 3615 | ||
| 3616 | $q.when(animationPromise).then(function() { |
|
| 3617 | // Notify {@link $modalStack} that modal is rendered. |
|
| 3618 | var modal = $modalStack.getTop(); |
|
| 3619 | if (modal) { |
|
| 3620 | $modalStack.modalRendered(modal.key); |
|
| 3621 | } |
|
| 3622 | ||
| 3623 | /** |
|
| 3624 | * If something within the freshly-opened modal already has focus (perhaps via a |
|
| 3625 | * directive that causes focus). then no need to try and focus anything. |
|
| 3626 | */ |
|
| 3627 | if (!($document[0].activeElement && element[0].contains($document[0].activeElement))) { |
|
| 3628 | var inputWithAutofocus = element[0].querySelector('[autofocus]'); |
|
| 3629 | /** |
|
| 3630 | * Auto-focusing of a freshly-opened modal element causes any child elements |
|
| 3631 | * with the autofocus attribute to lose focus. This is an issue on touch |
|
| 3632 | * based devices which will show and then hide the onscreen keyboard. |
|
| 3633 | * Attempts to refocus the autofocus element via JavaScript will not reopen |
|
| 3634 | * the onscreen keyboard. Fixed by updated the focusing logic to only autofocus |
|
| 3635 | * the modal element if the modal does not contain an autofocus element. |
|
| 3636 | */ |
|
| 3637 | if (inputWithAutofocus) { |
|
| 3638 | inputWithAutofocus.focus(); |
|
| 3639 | } else { |
|
| 3640 | element[0].focus(); |
|
| 3641 | } |
|
| 3642 | } |
|
| 3643 | }); |
|
| 3644 | }); |
|
| 3645 | } |
|
| 3646 | }; |
|
| 3647 | }]) |
|
| 3648 | ||
| 3649 | .directive('uibModalAnimationClass', function() { |
|
| 3650 | return { |
|
