javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

FIxed #109 - modal auto focus and unfocus on close

Browse Source
This commit is contained in:
Max Lynch
2013-11-10 18:43:09 -06:00
parent 94824c9a66
commit 787101708d
5 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/js/ionic-angular.js vendored
View File

@ -167,11 +167,15 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
$animate.enter(element, angular.element($document[0].body));
}
$animate.addClass(element, this.animation);
ionic.views.Modal.prototype.show.call(this);
},
// Hide the modal
hide: function() {
var element = angular.element(this.el);
$animate.removeClass(element, this.animation);
ionic.views.Modal.prototype.hide.call(this);
},
// Remove and destroy the modal scope

17
dist/js/ionic.js vendored
View File

@ -3318,13 +3318,30 @@ window.ionic = {
ionic.views.Modal = ionic.views.View.inherit({
initialize: function(opts) {
opts = ionic.extend({
focusFirstInput: true
}, opts);
ionic.extend(this, opts);
this.el = opts.el;
},
show: function() {
this.el.classList.add('active');
if(this.focusFirstInput) {
var input = this.el.querySelector('input, textarea');
input && input.focus && input.focus();
}
},
hide: function() {
this.el.classList.remove('active');
// Unfocus all elements
var inputs = this.el.querySelectorAll('input, textarea');
for(var i = 0; i < inputs.length; i++) {
inputs[i].blur && inputs[i].blur();
}
}
});

4
js/ext/angular/src/service/ionicModal.js vendored
View File

@ -14,11 +14,15 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
$animate.enter(element, angular.element($document[0].body));
}
$animate.addClass(element, this.animation);
ionic.views.Modal.prototype.show.call(this);
},
// Hide the modal
hide: function() {
var element = angular.element(this.el);
$animate.removeClass(element, this.animation);
ionic.views.Modal.prototype.hide.call(this);
},
// Remove and destroy the modal scope

1
js/ext/angular/test/modal.html
View File

@ -25,6 +25,7 @@
</header>
<content>
Realllllyyy long content
<input type="text">
<div style="height: 2000px; background-color: red;"></div>
</content>
</div>

17
js/views/modalView.js
View File

@ -3,13 +3,30 @@
ionic.views.Modal = ionic.views.View.inherit({
initialize: function(opts) {
opts = ionic.extend({
focusFirstInput: true
}, opts);
ionic.extend(this, opts);
this.el = opts.el;
},
show: function() {
this.el.classList.add('active');
if(this.focusFirstInput) {
var input = this.el.querySelector('input, textarea');
input && input.focus && input.focus();
}
},
hide: function() {
this.el.classList.remove('active');
// Unfocus all elements
var inputs = this.el.querySelectorAll('input, textarea');
for(var i = 0; i < inputs.length; i++) {
inputs[i].blur && inputs[i].blur();
}
}
});