javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(scroll): calling ionic scroll methods blur any selected input elements. Closes #2244

Browse Source
This commit is contained in:
Perry Govier
2014-10-27 16:45:01 -05:00
parent 8fae474252
commit 8ee83777f7
3 changed files with 98 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/angular/controller/scrollController.js vendored
View File

@@ -134,12 +134,14 @@ function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $loca
};
this.scrollTop = function(shouldAnimate) {
ionic.DomUtil.blurAll();
this.resize().then(function() {
scrollView.scrollTo(0, 0, !!shouldAnimate);
});
};
this.scrollBottom = function(shouldAnimate) {
ionic.DomUtil.blurAll();
this.resize().then(function() {
var max = scrollView.getScrollMax();
scrollView.scrollTo(max.left, max.top, !!shouldAnimate);
@@ -147,30 +149,35 @@ function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $loca
};
this.scrollTo = function(left, top, shouldAnimate) {
ionic.DomUtil.blurAll();
this.resize().then(function() {
scrollView.scrollTo(left, top, !!shouldAnimate);
});
};
this.zoomTo = function(zoom, shouldAnimate, originLeft, originTop) {
ionic.DomUtil.blurAll();
this.resize().then(function() {
scrollView.zoomTo(zoom, !!shouldAnimate, originLeft, originTop);
});
};
this.zoomBy = function(zoom, shouldAnimate, originLeft, originTop) {
ionic.DomUtil.blurAll();
this.resize().then(function() {
scrollView.zoomBy(zoom, !!shouldAnimate, originLeft, originTop);
});
};
this.scrollBy = function(left, top, shouldAnimate) {
ionic.DomUtil.blurAll();
this.resize().then(function() {
scrollView.scrollBy(left, top, !!shouldAnimate);
});
};
this.anchorScroll = function(shouldAnimate) {
ionic.DomUtil.blurAll();
this.resize().then(function() {
var hash = $location.hash();
var elm = hash && $document[0].getElementById(hash);
@@ -201,6 +208,7 @@ function($scope, scrollViewOptions, $timeout, $window, $$scrollValueCache, $loca
this._rememberScrollId = null;
};
this.scrollToRememberedPosition = function(shouldAnimate) {
ionic.DomUtil.blurAll();
var values = $$scrollValueCache[this._rememberScrollId];
if (values) {
this.resize().then(function() {

16
js/utils/dom.js
View File

@@ -14,7 +14,7 @@
if (!isDomReady){
document.addEventListener('DOMContentLoaded', domReady);
}
// From the man himself, Mr. Paul Irish.
// The requestAnimationFrame polyfill
@@ -254,6 +254,20 @@
if(x < x1 || x > x2) return false;
if(y < y1 || y > y2) return false;
return true;
},
/**
* @ngdoc method
* @name ionic.DomUtil#blurAll
* @description
* Blurs any currently focused input element
* @returns {DOMElement} The element blurred or null
*/
blurAll: function() {
if (document.activeElement && document.activeElement != document.body){
document.activeElement.blur();
return document.activeElement;
}
return null;
}
};

75
test/html/scroll-set-top.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="../../dist/css/ionic.min.css" rel="stylesheet">
<script src="../../dist/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic Scroll Top Test</h1>
<button class="button"
ng-click="scrollTop()">
ScrollTop
</button>
</div>
</ion-header-bar>
<ion-content delegate-handle="my-handle">
<ion-list show-delete="data.showDelete" show-reorder="data.showReorder" can-swipe="true">
<div class="item item-divider">
Scroll Down
</div>
<ion-item ng-repeat="item in items"
ng-click="alert(item.id)"
type="item-avatar">
<img src="{{item.image}}">
<h2>Item {{ item.id }}</h2>
<p>{{item.id}}</p>
<ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
<!--
Search bar
-->
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input id="searchKey" type="search" ng-model="query" ng-focus="focused()" placeholder="search" ng-model="searchKey" autocorrect="off" >
<button class="button button-clear icon ion-close-circled placeholder-icon smallicon" ng-click="clearSearch()"></button>
<!--i class="icon ion-close-circled placeholder-icon" ng-click="clearSearch()"></i-->
</label>
</div>
</ion-content>
<script>
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicScrollDelegate, $timeout) {
$scope.scrollTop = function(){
$ionicScrollDelegate.$getByHandle('my-handle').scrollTop();
};
$scope.focused = function(){
$timeout($scope.scrollTop, 2000);
};
$scope.items = [];
for (var i=0; i<15; i++) {
$scope.items.push({id:i});
}
});
</script>
</body>
</html>