mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
7faeeda099
To prevent unwanted clicks from happening, such as an input getting focus after clicking “OK” on a popup, keep the backdrop visible for a longer period of time. The simulated click is what closes the popup’s backdrop, but the native click will still happen 300ms later, which may cause another input to receive focus. Closes #1536
88 lines
2.0 KiB
JavaScript
88 lines
2.0 KiB
JavaScript
/**
|
|
* @ngdoc service
|
|
* @name $ionicBackdrop
|
|
* @module ionic
|
|
* @description
|
|
* Shows and hides a backdrop over the UI. Appears behind popups, loading,
|
|
* and other overlays.
|
|
*
|
|
* Often, multiple UI components require a backdrop, but only one backdrop is
|
|
* ever needed in the DOM at a time.
|
|
*
|
|
* Therefore, each component that requires the backdrop to be shown calls
|
|
* `$ionicBackdrop.retain()` when it wants the backdrop, then `$ionicBackdrop.release()`
|
|
* when it is done with the backdrop.
|
|
*
|
|
* For each time `retain` is called, the backdrop will be shown until `release` is called.
|
|
*
|
|
* For example, if `retain` is called three times, the backdrop will be shown until `release`
|
|
* is called three times.
|
|
*
|
|
* @usage
|
|
*
|
|
* ```js
|
|
* function MyController($scope, $ionicBackdrop, $timeout) {
|
|
* //Show a backdrop for one second
|
|
* $scope.action = function() {
|
|
* $ionicBackdrop.retain();
|
|
* $timeout(function() {
|
|
* $ionicBackdrop.release();
|
|
* }, 1000);
|
|
* };
|
|
* }
|
|
* ```
|
|
*/
|
|
IonicModule
|
|
.factory('$ionicBackdrop', [
|
|
'$document',
|
|
function($document) {
|
|
|
|
var el = jqLite('<div class="backdrop">');
|
|
var backdropHolds = 0;
|
|
|
|
$document[0].body.appendChild(el[0]);
|
|
|
|
return {
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicBackdrop#retain
|
|
* @description Retains the backdrop.
|
|
*/
|
|
retain: retain,
|
|
/**
|
|
* @ngdoc method
|
|
* @name $ionicBackdrop#release
|
|
* @description
|
|
* Releases the backdrop.
|
|
*/
|
|
release: release,
|
|
|
|
getElement: getElement,
|
|
|
|
// exposed for testing
|
|
_element: el
|
|
};
|
|
|
|
function retain() {
|
|
if ( (++backdropHolds) === 1 ) {
|
|
el.addClass('visible');
|
|
ionic.requestAnimationFrame(function() {
|
|
backdropHolds && el.addClass('active');
|
|
});
|
|
}
|
|
}
|
|
function release() {
|
|
if ( (--backdropHolds) === 0 ) {
|
|
el.removeClass('active');
|
|
setTimeout(function() {
|
|
!backdropHolds && el.removeClass('visible');
|
|
}, 400);
|
|
}
|
|
}
|
|
|
|
function getElement() {
|
|
return el;
|
|
}
|
|
|
|
}]);
|