Skip to content

Commit d4b6643

Browse files
trazektrazek
committed
changed service to a provider to allow modal configuration
1 parent c00f5b1 commit d4b6643

File tree

4 files changed

+140
-15
lines changed

4 files changed

+140
-15
lines changed

‎README.md

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,21 @@ angular.module('app', [
2020
~~~
2121

2222
_If you are not using ES6, you can use browserify to transpile and manually reference the file in your index.html file_
23-
_Or you can reference the es5 version of the file, found in `dist/` called `ionic-modal-nav-es5.js` (credit to @zeeshan-m for this)_
23+
_Or you can reference the es5 version of the file, found in `src/` called `ionic-modal-nav-es5.js` (credit to @zeeshan-m for this)_
24+
25+
Optionally configure modal options:
26+
27+
~~~
28+
angular.module('app')
29+
.config((IonicModalNavServiceProvider) => {
30+
IonicModalNavServiceProvider.setModalOptions({
31+
animation: "slide-in-up", //supports whatever Ionic supports
32+
focusFirstInput: false,
33+
backdropClickToClose: true,
34+
hardwareBackButtonClose: true
35+
});
36+
});
37+
~~~
2438

2539
Inject into your controllers:
2640

@@ -46,6 +60,24 @@ $stateProvider.state('modal-view', {
4660

4761
## API
4862

63+
##### IonicModalServiceProvider.setModalOptions({options})
64+
Allows users to configure the modal nav similar to how Ionic allows.
65+
66+
~~~
67+
@params.options
68+
69+
@params.options.animation - The animation to show & hide with.
70+
71+
@params.options.focusFirstInput - Whether to autofocus the first input of the modal when shown.
72+
Will only show the keyboard on iOS, to force the keyboard to show on Android,
73+
please use the Ionic keyboard plugin.
74+
75+
@params.options.backdropClickToClose - Whether to close the modal on clicking the backdrop.
76+
77+
@params.options.hardwareBackButtonClose - Whether the modal can be closed using the hardware back
78+
button on Android and similar devices.
79+
~~~
80+
4981
##### IonicModalNavService.show(modalState, data)
5082
Open the modal and transition to the given modal state with no animation.
5183
Cache the `backView` and the `currentView` so we can restore proper state once

‎index.js

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ var MODAL_CLOSE_DATA = "ionicModalNav:closeData";
3535
*/
3636

3737
var IonicModalNavService = function () {
38-
function IonicModalNavService($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher) {
38+
function IonicModalNavService($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher, modalOptions) {
3939
var _this = this;
4040

4141
_classCallCheck(this, IonicModalNavService);
@@ -54,7 +54,11 @@ var IonicModalNavService = function () {
5454
if (!this._modal) {
5555
//Set up modal with a separate named ion-nav-view
5656
this._modal = $ionicModal.fromTemplate("\n <ion-modal-view> \n <ion-nav-view name=\"ionic-modal-nav\"></ion-nav-view>\n </ion-modal-view>\n ", {
57-
scope: $rootScope
57+
scope: $rootScope,
58+
animation: modalOptions.animation,
59+
focusFirstInput: modalOptions.focusFirstInput,
60+
backdropClickToClose: modalOptions.backdropClickToClose,
61+
hardwareBackButtonClose: modalOptions.hardwareBackButtonClose
5862
});
5963

6064
/**
@@ -228,10 +232,40 @@ var IonicModalNavService = function () {
228232
return IonicModalNavService;
229233
}();
230234

231-
IonicModalNavService.$inject = ['$ionicModal', '$rootScope', '$state', '$ionicHistory', '$ionicViewSwitcher'];
235+
var IonicModalNavServiceConfig = function () {
236+
function IonicModalNavServiceConfig() {
237+
_classCallCheck(this, IonicModalNavServiceConfig);
238+
239+
this.options = {
240+
animation: "slide-in-up",
241+
focusFirstInput: false,
242+
backdropClickToClose: true,
243+
hardwareBackButtonClose: true
244+
};
245+
}
246+
247+
_createClass(IonicModalNavServiceConfig, [{
248+
key: "setModalOptions",
249+
value: function setModalOptions(options) {
250+
this.options.animation = options ? options.animation : this.options.animation;
251+
this.options.focusFirstInput = options ? options.focusFirstInput : this.options.focusFirstInput;
252+
this.options.backdropClickToClose = options ? options.backdropClickToClose : this.options.backdropClickToClose;
253+
this.options.hardwareBackButtonClose = options ? options.hardwareBackButtonClose : this.options.hardwareBackButtonClose;
254+
}
255+
}, {
256+
key: "$get",
257+
value: function $get($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher) {
258+
return new IonicModalNavService($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher, this.options);
259+
}
260+
}]);
261+
262+
return IonicModalNavServiceConfig;
263+
}();
264+
265+
// --- Declare module --
232266

233267
var moduleName = 'IonicModalNav';
234268

235-
angular.module(moduleName, []).service('IonicModalNavService', IonicModalNavService);
269+
angular.module(moduleName, []).provider('IonicModalNavService', IonicModalNavServiceConfig);
236270

237-
exports.default = moduleName;
271+
exports.default = moduleName;

‎src/ionic-modal-nav-es5.js

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ var MODAL_CLOSE_DATA = "ionicModalNav:closeData";
3636
*/
3737

3838
var IonicModalNavService = function () {
39-
function IonicModalNavService($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher) {
39+
function IonicModalNavService($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher, modalOptions) {
4040
var _this = this;
4141

4242
_classCallCheck(this, IonicModalNavService);
@@ -55,7 +55,11 @@ var IonicModalNavService = function () {
5555
if (!this._modal) {
5656
//Set up modal with a separate named ion-nav-view
5757
this._modal = $ionicModal.fromTemplate("\n <ion-modal-view> \n <ion-nav-view name=\"ionic-modal-nav\"></ion-nav-view>\n </ion-modal-view>\n ", {
58-
scope: $rootScope
58+
scope: $rootScope,
59+
animation: modalOptions.animation,
60+
focusFirstInput: modalOptions.focusFirstInput,
61+
backdropClickToClose: modalOptions.backdropClickToClose,
62+
hardwareBackButtonClose: modalOptions.hardwareBackButtonClose
5963
});
6064

6165
/**
@@ -229,12 +233,41 @@ var IonicModalNavService = function () {
229233
return IonicModalNavService;
230234
}();
231235

232-
IonicModalNavService.$inject = ['$ionicModal', '$rootScope', '$state', '$ionicHistory', '$ionicViewSwitcher'];
236+
var IonicModalNavServiceConfig = function () {
237+
function IonicModalNavServiceConfig() {
238+
_classCallCheck(this, IonicModalNavServiceConfig);
239+
240+
this.options = {
241+
animation: "slide-in-up",
242+
focusFirstInput: false,
243+
backdropClickToClose: true,
244+
hardwareBackButtonClose: true
245+
};
246+
}
247+
248+
_createClass(IonicModalNavServiceConfig, [{
249+
key: "setModalOptions",
250+
value: function setModalOptions(options) {
251+
this.options.animation = options ? options.animation : this.options.animation;
252+
this.options.focusFirstInput = options ? options.focusFirstInput : this.options.focusFirstInput;
253+
this.options.backdropClickToClose = options ? options.backdropClickToClose : this.options.backdropClickToClose;
254+
this.options.hardwareBackButtonClose = options ? options.hardwareBackButtonClose : this.options.hardwareBackButtonClose;
255+
}
256+
}, {
257+
key: "$get",
258+
value: function $get($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher) {
259+
return new IonicModalNavService($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher, this.options);
260+
}
261+
}]);
262+
263+
return IonicModalNavServiceConfig;
264+
}();
265+
266+
// --- Declare module --
233267

234268
var moduleName = 'IonicModalNav';
235269

236-
angular.module(moduleName, []).service('IonicModalNavService', IonicModalNavService);
270+
angular.module(moduleName, []).provider('IonicModalNavService', IonicModalNavServiceConfig);
237271

238272
exports.default = moduleName;
239-
240273
},{}]},{},[1]);

‎src/ionic-modal-nav.js

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const MODAL_CLOSE_DATA = "ionicModalNav:closeData";
2525
*/
2626

2727
class IonicModalNavService {
28-
constructor($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher) {
28+
constructor($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher, modalOptions) {
2929

3030
this._$rootScope = $rootScope;
3131
this._$state = $state;
@@ -45,7 +45,11 @@ class IonicModalNavService {
4545
<ion-nav-view name="ionic-modal-nav"></ion-nav-view>
4646
</ion-modal-view>
4747
`, {
48-
scope: $rootScope
48+
scope: $rootScope,
49+
animation: modalOptions.animation,
50+
focusFirstInput: modalOptions.focusFirstInput,
51+
backdropClickToClose: modalOptions.backdropClickToClose,
52+
hardwareBackButtonClose: modalOptions.hardwareBackButtonClose
4953
});
5054

5155
/**
@@ -190,11 +194,33 @@ class IonicModalNavService {
190194
}
191195
}
192196

193-
IonicModalNavService.$inject = ['$ionicModal', '$rootScope', '$state', '$ionicHistory', '$ionicViewSwitcher'];
197+
class IonicModalNavServiceConfig {
198+
constructor() {
199+
this.options = {
200+
animation: "slide-in-up",
201+
focusFirstInput: false,
202+
backdropClickToClose: true,
203+
hardwareBackButtonClose: true
204+
};
205+
}
206+
207+
setModalOptions(options) {
208+
this.options.animation = (options) ? options.animation : this.options.animation;
209+
this.options.focusFirstInput = (options) ? options.focusFirstInput : this.options.focusFirstInput;
210+
this.options.backdropClickToClose = (options) ? options.backdropClickToClose : this.options.backdropClickToClose;
211+
this.options.hardwareBackButtonClose = (options) ? options.hardwareBackButtonClose : this.options.hardwareBackButtonClose;
212+
}
213+
214+
$get($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher) {
215+
return new IonicModalNavService($ionicModal, $rootScope, $state, $ionicHistory, $ionicViewSwitcher, this.options);
216+
}
217+
}
218+
219+
// --- Declare module --
194220

195221
let moduleName = 'IonicModalNav';
196222

197223
angular.module(moduleName, [])
198-
.service('IonicModalNavService', IonicModalNavService);
224+
.provider('IonicModalNavService', IonicModalNavServiceConfig)
199225

200226
export default moduleName;

0 commit comments

Comments
 (0)