github/meteor-ionic
2
0
Fork 0
mirror of https://github.com/donl/meteor-ionic.git synced 2026-06-02 06:12:28 -06:00
Code Issues Projects Packages Wiki Activity Actions

fix input focus / scroll issue

Browse source
This commit is contained in:
Gwen 2015-07-23 18:57:28 +02:00
parent 1187591925
commit 3328f3eede
3 changed files with 57 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

46
components/ionKeyboard/ionFocus.js Normal file
View file

@ -0,0 +1,46 @@
Meteor.startup(function() {
if (Meteor.isCordova) {
// Scroll to make input on top of the page
// #TODO Correct behavior should be: if the input is behind the keyboard, scroll to make it visible on top of the keyboard
var scrollToFocusedElement = function($focused) {
$focused = $focused || $(':focus');
var $container = $($focused.parents('.content.overflow-scroll').get(0));
if (!$focused.length || !$container.length) return;
var contentOffset = $container.offset().top;
var padding = 10;
var scrollTo = $container.scrollTop() + $focused.offset().top - contentOffset - padding;
setTimeout(function() {
$container.animate({ scrollTop: scrollTo }, 400, function() {
// #TODO fix floating input cursor bug (https://github.com/twbs/bootstrap/issues/14708, https://github.com/cubiq/iscroll/issues/178)
var display = $focused.css('display');
$focused.css({ display: 'none' }).css({ display: display });
});
// $container.scrollTop(scrollTo);
}, 0);
}
var scrollPosStart, scrollPosEnd, scrollDistance, scrollHappened, scrollThreshold = 10;
// Fix for input not getting focused on long touch (more than a few ms)
$(document).on('touchstart', function(event) {
scrollPosStart = $('.content.overflow-scroll').scrollTop();
});
$(document).on('touchend', function(event) {
scrollPosEnd = $('.content.overflow-scroll').scrollTop();
scrollDistance = Math.abs(scrollPosStart - scrollPosEnd);
scrollHappened = scrollDistance > scrollThreshold;
var $target = $(event.target);
var isInput = _.contains(['INPUT', 'TEXTAREA'], event.target.tagName);
var isFocused = $target.is(':focus');
if (!isInput || isFocused || scrollHappened) return;
$target.focus();
});
$(document).delegate('input, textarea', 'focus', function(event) {
scrollToFocusedElement($(event.currentTarget));
});
}
});

21
components/ionKeyboard/ionKeyboard.js
View file

@ -66,26 +66,8 @@ window.addEventListener('native.keyboardshow', function (event) {
});
Meteor.startup(function() {
if (Meteor.isCordova) {
// Scroll to make input on top of the page
// #TODO Correct behavior should be: if the input is behind the keyboard, scroll to make it visible on top of the keyboard
$(document).delegate('input, textarea', 'touchstart, focus', function(event) {
var $input = $(event.currentTarget);
var $container = $($(event.currentTarget).parents('.content.overflow-scroll').get(0));
var contentOffset = $container.offset().top;
var padding = 10;
var scrollTo = $container.scrollTop() + $input.offset().top - contentOffset - padding;
setTimeout(function() {
$container.scrollTop(scrollTo);
}, 0);
});
}
});
window.addEventListener('native.keyboardhide', function (event) {
// TODO: Android is having problems
if (Platform.isAndroid()) {
return;
@ -103,4 +85,5 @@ window.addEventListener('native.keyboardhide', function (event) {
$('.content.overflow-scroll').each(function (index, el) {
$(el).css({bottom: $(el).data('ionkeyboard.bottom')});
});
});

10
package.js
View file

@ -11,7 +11,14 @@ Cordova.depends({
Package.onUse(function(api) {
api.versionsFrom("1.0");
api.use(["templating", "underscore", "fastclick", "iron:router@1.0.0", "tracker", "session"], "client");
api.use([
"templating",
"underscore",
"fastclick",
"iron:router@1.0.0",
"tracker",
"session"
], "client");
api.addFiles([
"vendor/snap.js",
@ -46,6 +53,7 @@ Package.onUse(function(api) {
"components/ionItem/ionItem.js",
"components/ionKeyboard/ionKeyboard.js",
"components/ionKeyboard/ionFocus.js",
"components/ionList/ionList.html",
"components/ionList/ionList.js",