Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(modal): added bootstrap3 support
Browse files Browse the repository at this point in the history
  • Loading branch information
@pkozlowski-opensource
Justin Hall authored and pkozlowski-opensource committed Dec 28, 2013
1 parent 428f147 commit 444c488
Show file tree
Hide file tree
Showing 5 changed files with 23 additions and 22 deletions.
2 changes: 1 addition & 1 deletion src/modal/docs/demo.html
View file
Expand Up @@ -17,6 +17,6 @@ <h3>I'm a modal!</h3>
</div>
</script>

<button class="btn" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
33 changes: 16 additions & 17 deletions src/modal/modal.js
View file
Expand Up @@ -57,7 +57,7 @@ angular.module('ui.bootstrap.modal', [])
/**
* A helper directive for the $modal service. It creates a backdrop element.
*/
.directive('modalBackdrop', ['$modalStack', '$timeout', function ($modalStack, $timeout) {
.directive('modalBackdrop', ['$timeout', function ($timeout) {
return {
restrict: 'EA',
replace: true,
Expand All @@ -70,20 +70,11 @@ angular.module('ui.bootstrap.modal', [])
$timeout(function () {
scope.animate = true;
});

scope.close = function (evt) {
var modal = $modalStack.getTop();
if (modal && modal.value.backdrop && modal.value.backdrop != 'static') {
evt.preventDefault();
evt.stopPropagation();
$modalStack.dismiss(modal.key, 'backdrop click');
}
};
}
};
}])

.directive('modalWindow', ['$timeout', function ($timeout) {
.directive('modalWindow', ['$modalStack', '$timeout', function ($modalStack, $timeout) {
return {
restrict: 'EA',
scope: {
Expand All @@ -95,13 +86,21 @@ angular.module('ui.bootstrap.modal', [])
link: function (scope, element, attrs) {
scope.windowClass = attrs.windowClass || '';

// focus a freshly-opened modal
element[0].focus();

$timeout(function () {
// trigger CSS transitions
scope.animate = true;
// focus a freshly-opened modal
element[0].focus();
});

scope.close = function (evt) {
var modal = $modalStack.getTop();
if (modal && modal.value.backdrop && modal.value.backdrop != 'static' && (evt.target === evt.currentTarget)) {
evt.preventDefault();
evt.stopPropagation();
$modalStack.dismiss(modal.key, 'backdrop click');
}
};
}
};
}])
Expand Down Expand Up @@ -195,9 +194,9 @@ angular.module('ui.bootstrap.modal', [])
};

$modalStack.close = function (modalInstance, result) {
var modal = openedWindows.get(modalInstance);
if (modal) {
modal.value.deferred.resolve(result);
var modalWindow = openedWindows.get(modalInstance).value;
if (modalWindow) {
modalWindow.deferred.resolve(result);
removeModalWindow(modalInstance);
}
};
Expand Down
4 changes: 2 additions & 2 deletions src/modal/test/modal.spec.js
View file
Expand Up @@ -56,7 +56,7 @@ describe('$modal', function () {

toHaveModalOpenWithContent: function(content, selector) {

var contentToCompare, modalDomEls = this.actual.find('body > div.modal');
var contentToCompare, modalDomEls = this.actual.find('body > div.modal > div.modal-dialog > div.modal-content');

this.message = function() {
return "Expected '" + angular.mock.dump(modalDomEls) + "' to be open with '" + content + "'.";
Expand Down Expand Up @@ -154,7 +154,7 @@ describe('$modal', function () {
var modal = open({template: '<div>Content</div>'});
expect($document).toHaveModalsOpen(1);

$document.find('body > div.modal-backdrop').click();
$document.find('body > div.modal').click();
$rootScope.$digest();

expect($document).toHaveModalsOpen(0);
Expand Down
2 changes: 1 addition & 1 deletion template/modal/backdrop.html
View file
@@ -1 +1 @@
<div class="modal-backdrop fade" ng-class="{in: animate}" ng-style="{'z-index': 1040 + index*10}" ng-click="close($event)"></div>
<div class="modal-backdrop fade" ng-class="{in: animate}" ng-style="{'z-index': 1040 + index*10}"></div>
4 changes: 3 additions & 1 deletion template/modal/window.html
View file
@@ -1 +1,3 @@
<div tabindex="-1" class="modal fade {{ windowClass }}" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10}" ng-transclude></div>
<div tabindex="-1" class="modal fade {{ windowClass }}" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)">

This comment has been minimized.

Sign in to view

Copy link
@HugoLnx

HugoLnx Mar 18, 2015

There's a problem if I send a PR with this "display: 'block'" in the CSS file instead of inline styling? Or it must be that way? @hallister
<div class="modal-dialog"><div class="modal-content" ng-transclude></div></div>

This comment has been minimized.

Sign in to view

Copy link
@gschuager

gschuager Jan 8, 2014

Before this change, it was possible to change the modal width by including a div.modal-dialog element in our templates (dialog content) with additional classes (modal-lg, modal-sm, etc)... but now, since the ng-transclude directive was moved to an inner element, the only way to achieve this is to override the whole template (or by specifying a windowClass in the $modal call, which I don't like because I think that's a view concern).

This comment has been minimized.

Sign in to view

Copy link
@pkozlowski-opensource

pkozlowski-opensource Jan 8, 2014

Member

@shaungrady I hear what you say. But the only other alternative would be to force people to repeat code from this template over and over again for each and every modal. This would be very bad as you would have to repeat all the logic we've got in a template right now.

Could you elaborate on your use-case?

What I was thinking of is to introduce something like "modal types" where you could specify modal's "visual type" while opening a modal. Each "type" would then have a set of window+backdrop templates. The reasoning here is that in a given application modals tend to be uniform - I mean - we are assuming that it is a more common use case to have many different modals with the same template for modal's window.

This comment has been minimized.

Sign in to view

Copy link
@gschuager

gschuager Jan 9, 2014

My use case is as follows:
I have a CRUD application were edit forms are opened in modal dialogs.
Some entities require much more information on screen so we use a bigger modal for those.
The code that opens the modal is generic and don't know about the size of the modal being opened, that is currently specified adding different classes (modal-lg, modal-sm, etc) to the div.modal-dialog element in each individual template.
I don't care about repeating the same markup for each template, but I do care if I have to specify a view concern in code rather than in the view template.

That being said, replacing the template in the $templateCache was pretty straightforward.
</div>

0 comments on commit 444c488

Please sign in to comment.