javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +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.enter(element, angular.element($document[0].body));
} }
$animate.addClass(element, this.animation); $animate.addClass(element, this.animation);
ionic.views.Modal.prototype.show.call(this);
}, },
// Hide the modal // Hide the modal
hide: function() { hide: function() {
var element = angular.element(this.el); var element = angular.element(this.el);
$animate.removeClass(element, this.animation); $animate.removeClass(element, this.animation);
ionic.views.Modal.prototype.hide.call(this);
}, },
// Remove and destroy the modal scope // 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({ ionic.views.Modal = ionic.views.View.inherit({
initialize: function(opts) { initialize: function(opts) {
opts = ionic.extend({
focusFirstInput: true
}, opts);
ionic.extend(this, opts);
this.el = opts.el; this.el = opts.el;
}, },
show: function() { show: function() {
this.el.classList.add('active'); this.el.classList.add('active');
if(this.focusFirstInput) {
var input = this.el.querySelector('input, textarea');
input && input.focus && input.focus();
}
}, },
hide: function() { hide: function() {
this.el.classList.remove('active'); 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.enter(element, angular.element($document[0].body));
} }
$animate.addClass(element, this.animation); $animate.addClass(element, this.animation);
ionic.views.Modal.prototype.show.call(this);
}, },
// Hide the modal // Hide the modal
hide: function() { hide: function() {
var element = angular.element(this.el); var element = angular.element(this.el);
$animate.removeClass(element, this.animation); $animate.removeClass(element, this.animation);
ionic.views.Modal.prototype.hide.call(this);
}, },
// Remove and destroy the modal scope // Remove and destroy the modal scope

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

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

17
js/views/modalView.js
View File

@ -3,13 +3,30 @@
ionic.views.Modal = ionic.views.View.inherit({ ionic.views.Modal = ionic.views.View.inherit({
initialize: function(opts) { initialize: function(opts) {
opts = ionic.extend({
focusFirstInput: true
}, opts);
ionic.extend(this, opts);
this.el = opts.el; this.el = opts.el;
}, },
show: function() { show: function() {
this.el.classList.add('active'); this.el.classList.add('active');
if(this.focusFirstInput) {
var input = this.el.querySelector('input, textarea');
input && input.focus && input.focus();
}
}, },
hide: function() { hide: function() {
this.el.classList.remove('active'); 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();
}
} }
}); });