/
ionicModal.js
126 lines (98 loc) · 3.47 KB
/
ionicModal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.service.platform', 'ngAnimate'])
.factory('$ionicModal', ['$rootScope', '$document', '$compile', '$animate', '$q', '$timeout', '$ionicPlatform', '$ionicTemplateLoader', function($rootScope, $document, $compile, $animate, $q, $timeout, $ionicPlatform, $ionicTemplateLoader) {
var ModalView = ionic.views.Modal.inherit({
initialize: function(opts) {
ionic.views.Modal.prototype.initialize.call(this, opts);
this.animation = opts.animation || 'slide-in-up';
},
// Show the modal
show: function() {
var self = this;
var element = angular.element(self.el);
document.body.classList.add('modal-open');
self._isShown = true;
if(!element.parent().length) {
self.el.classList.add(self.animation);
$document[0].body.appendChild(self.el);
}
element.addClass('ng-enter active');
element.removeClass('ng-leave ng-leave-active');
$timeout(function(){
element.addClass('ng-enter-active');
if(!self.didInitEvents) {
var onHardwareBackButton = function() {
self.hide();
};
self.scope.$on('$destroy', function() {
$ionicPlatform.offHardwareBackButton(onHardwareBackButton);
});
// Support Android back button to close
$ionicPlatform.onHardwareBackButton(onHardwareBackButton);
self.didInitEvents = true;
}
self.scope.$parent.$broadcast('modal.shown');
}, 20);
},
// Hide the modal
hide: function() {
this._isShown = false;
var element = angular.element(this.el);
element.addClass('ng-leave');
$timeout(function(){
element.addClass('ng-leave-active');
element.removeClass('ng-enter ng-enter-active active');
}, 20);
$timeout(function(){
document.body.classList.remove('modal-open');
}, 400);
ionic.views.Modal.prototype.hide.call(this);
this.scope.$parent.$broadcast('modal.hidden');
},
// Remove and destroy the modal scope
remove: function() {
var self = this;
self.hide();
self.scope.$parent.$broadcast('modal.removed');
$timeout(function(){
self.scope.$destroy();
}, 500);
},
isShown: function() {
return !!this._isShown;
}
});
var createModal = function(templateString, options) {
// Create a new scope for the modal
var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
// Compile the template
var element = $compile(templateString)(scope);
options.el = element[0];
var modal = new ModalView(options);
modal.scope = scope;
// If this wasn't a defined scope, we can assign 'modal' to the isolated scope
// we created
if(!options.scope) {
scope.modal = modal;
}
return modal;
};
return {
/**
* Load a modal with the given template string.
*
* A new isolated scope will be created for the
* modal and the new element will be appended into the body.
*/
fromTemplate: function(templateString, options) {
var modal = createModal(templateString, options || {});
return modal;
},
fromTemplateUrl: function(url, cb, options) {
return $ionicTemplateLoader.load(url).then(function(templateString) {
var modal = createModal(templateString, options || {});
cb ? cb(modal) : null;
return modal;
});
}
};
}]);