danielepiccone / ng-pageslide

AngularJS sliding panel for serving additional content from off the page
http://danielepiccone.github.io/ng-pageslide/examples/
451 stars 160 forks source link

open and close events does not work on mobile #164

Open nuryagdym opened 7 years ago

nuryagdym commented 7 years ago

On PC it is working, but on mobile when I click button ng-click="toggle()". $scope.checked value is always stay false, I dont know why but when I run it on mobile th value of $scope.checked should be reversed but it stays in same value. edit: This is issue occurs when close button is outside, and when I click that button it conflicts with click outside event thus it is not closing

antonio-rodrigues commented 7 years ago

Plus: on iPad devices the onBodyClick(e) is always called twice when clicking on a button/div to trigger the display.

CosyStudios commented 7 years ago

I believe this is something to do with the body click auto close function . Setting ps-click-outside="false" seems to resolve this -

Presumbly this might be because of the phantom "double click" in some mobile browsers, particularly idevices. ...i.e the button is clicked , ps-open set to true , but then the body click handler is also fired

Could be resolved with a temporary ignore to the body click which then switches the behaviour back on after a timeout ?

CosyStudios commented 7 years ago

Perhaps ps-open could include a $scope.isopening = true; and include a $timeout(function() {$scope.isopening = false;}, 500);

then ` function onBodyClick(e) { var target = e.touches && e.touches[0] || e.target; if( isOpen && body.contains(target) && !slider.contains(target) ) { isOpen = false; scope.psOpen = false; scope.$apply(); }

                    if(scope.psOpen) {
                        isOpen = true;
                    }
                }`

could be changed to

function onBodyClick(e) { var target = e.touches && e.touches[0] || e.target; if( isOpen && (!$scope.isopening) body.contains(target) && !slider.contains(target) ) { isOpen = false; scope.psOpen = false; scope.$apply(); }

                    if(scope.psOpen) {
                        isOpen = true;
                    }
                }
CosyStudios commented 7 years ago

Just a punt..

SergkeiM commented 6 years ago

Hi

Change: In function psOpen(slider, param) { $document.on('touchend click', onBodyClick); to $document.on('click', onBodyClick);

In function psClose(slider, param) { $document.off('touchend click', onBodyClick); to $document.off('click', onBodyClick);

Worked for me.