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

refactor(clickBlock): add click-block div to body

Browse Source 
Instead of using pointer-events: none to disable unwanted clicks which
can cause flickering, we’re now using a click-block div that covers the
view during transitions. Similar concept to pointer-events: none
applied to the body tag, but in tests its showing to be more effective
to not cause any flickers.
This commit is contained in:
Adam Bradley
2014-08-27 12:56:12 -05:00
parent 2c3f1c9f02
commit e9f0fcf556
5 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
js/angular/service/clickBlock.js vendored Normal file
View File

@@ -0,0 +1,24 @@
IonicModule
.factory('$ionicClickBlock', [
'$document',
'$ionicBody',
'$timeout',
function($document, $ionicBody, $timeout) {
var cb = $document[0].createElement('div');
cb.className = 'click-block';
return {
show: function() {
if(cb.parentElement) {
cb.classList.remove('hide');
} else {
$ionicBody.append(cb);
}
$timeout(function(){
cb.classList.add('hide');
}, 500);
},
hide: function() {
cb.classList.add('hide');
}
};
}]);

9
js/angular/service/viewService.js vendored
View File

@@ -94,7 +94,8 @@ function($rootScope, $state, $location, $document, $animate, $ionicPlatform, $io
'$injector',
'$animate',
'$ionicNavViewConfig',
function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavViewConfig) {
'$ionicClickBlock',
function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavViewConfig, $ionicClickBlock) {
var View = function(){};
View.prototype.initialize = function(data) {
@@ -477,17 +478,17 @@ function($rootScope, $state, $location, $window, $injector, $animate, $ionicNavV
setAnimationClass();
element.addClass('ng-enter');
document.body.classList.add('disable-pointer-events');
$ionicClickBlock.show();
$animate.enter(element, navViewElement, null, function() {
document.body.classList.remove('disable-pointer-events');
$ionicClickBlock.hide();
if (animationClass) {
navViewElement[0].classList.remove(animationClass);
}
});
return;
} else if(!doAnimation) {
document.body.classList.remove('disable-pointer-events');
$ionicClickBlock.hide();
}
// no animation

12
scss/_util.scss
View File

@@ -60,6 +60,18 @@
-ms-content-zooming: none;
}
// Fill the screen to block clicks (a better pointer-events: none) for the body
// to avoid full-page reflows and paints which can cause flickers
.click-block {
position: absolute;
top: 0;
left: 0;
z-index: $z-index-click-block;
width: 100%;
height: 100%;
background: transparent;
}
.no-resize {
resize: none;
}

41
scss/_variables.scss
View File

@@ -671,34 +671,35 @@ $badge-default-text: #AAAAAA !default;
// Z-Indexes
// -------------------------------
$z-index-action-sheet: 11 !default;
$z-index-badge: 1 !default;
$z-index-backdrop: 11 !default;
$z-index-bar: 10 !default;
$z-index-bar-title: 0 !default;
$z-index-bar-button: 1 !default;
$z-index-item: 2 !default;
$z-index-item-reorder: 3 !default;
$z-index-item-checkbox: 3 !default;
$z-index-item-drag: 0 !default;
$z-index-item-edit: 0 !default;
$z-index-item-options: 1 !default;
$z-index-item-radio: 3 !default;
$z-index-item-reordering: 9 !default;
$z-index-item-toggle: 3 !default;
$z-index-loading: 13 !default;
$z-index-menu: 0 !default;
$z-index-menu-bar-header: 11 !default;
$z-index-badge: 1 !default;
$z-index-bar-button: 1 !default;
$z-index-item-options: 1 !default;
$z-index-pane: 1 !default;
$z-index-slider-pager: 1 !default;
$z-index-view: 1 !default;
$z-index-item: 2 !default;
$z-index-item-checkbox: 3 !default;
$z-index-item-radio: 3 !default;
$z-index-item-reorder: 3 !default;
$z-index-item-toggle: 3 !default;
$z-index-tabs: 5 !default;
$z-index-item-reordering: 9 !default;
$z-index-bar: 10 !default;
$z-index-menu-scroll-content: 10 !default;
$z-index-modal: 10 !default;
$z-index-pane: 1 !default;
$z-index-popup: 12 !default;
$z-index-popover: 10 !default;
$z-index-scroll-bar: 9999 !default;
$z-index-action-sheet: 11 !default;
$z-index-backdrop: 11 !default;
$z-index-menu-bar-header: 11 !default;
$z-index-scroll-content-false: 11 !default;
$z-index-slider-pager: 1 !default;
$z-index-tabs: 5 !default;
$z-index-view: 1 !default;
$z-index-popup: 12 !default;
$z-index-loading: 13 !default;
$z-index-scroll-bar: 9999 !default;
$z-index-click-block: 99999 !default;
// Platform

2
test/unit/angular/controller/scrollController.unit.js
View File

@@ -323,7 +323,7 @@ describe('$ionicScroll Controller', function() {
}
};
module('ionic', function($provide) {
$provide.value('$document', [ { getElementById: function(){ return ele; } } ]);
$provide.value('$document', [ { getElementById: function(){ return ele; }, createElement: function(tagName){ return document.createElement(tagName); } } ]);
});
inject(function($controller, $rootScope, $location, $timeout) {
var scrollCtrl = $controller('$ionicScroll', {