Pointerup and browser computability with jspanel4

[AviHafner]

REFERS TO jsPanel VERSION 4 Hi Stefan It took me a little time to realize that in jspanel4 you were producing the event pointerup in your jspanel4 on the callback example jsPanel.pointerup.forEach(function (evt) {

When I check which browser support the pointerup event include apple Safari, I realize that it’s not support in desktop and mobile Safari. Please check the Browser compatibility in https://developer.mozilla.org/en-US/docs/Web/Events/pointerup

yours Avi Hafner

[Flyer53]

REFERS TO jsPanel VERSION 4 Hi Avi, That's not fully correct. Which event is used by jsPanel v4 depends on which event APIs are supported by the browser being used. In other words jsPanel.pointerup is always an array whose content depends on which event APIs are supported. Example:

• on Chrome jsPanel.pointerup will be ['pointerup'] because Chrome supports the pointerEvent API
• on Safari mobile, which doesn't support the pointerEvent API jsPanel.pointerup will be ['touchend', 'mouseup']

Please see e.g.: http://jspanel.de/docs/#global/pointerup

This contruct allows jsPanel to be used with Pointer events AND Touch events AND Mouse events all at the same time because handlers are, depending on browser support, bound to pointerup OR touchend AND mouseup. So for example on a laptop with touchscreen the jsPanel controls and drag/resize works with both touch AND mouse. -> On my iPad Safari with iOS 11.2.2 jsPanel.pointerup results in ['touchend', 'mouseup']. In other words ... jsPanel works just fine on Safari Mobile.

Hope I could help... don't hesitate to ask again id something is still unclear.

Best Regards,

Stefan

[AviHafner]

Hello Stephen thanks a lot for your support.

My problem or my lack of understanding. I trigger jspanel with the event click. How do you suggest me to choose the event that triggers jspanel. I need to put the same events in the footerToolbar, There I put the command e.stopPropagation(), for examples bouton for close or print.

I experienced a problem in mobile when the user pressing a button on the panel, And in the mobile its activates a button under the panel, so I used e.stopPropagation (), And stopPropagation requires the same event in all places.

yours Avi Hafner

[Flyer53]

@AviHafner Don't worry Avi ... everything's fine 😄 Just please do me the favor and post issues concerning jsPanel version 4 within the version 4 repository, not here within version 3.

What events do I suggest to trigger a panel. Well, that depends on your application, your needs ... so that's completely up to you. All over the documentation pages of jsPanel I use click as well and I don't see any problems. The issue that an underlying button is activated upon clicking a control in a jsPanel is new to me. Thanks for the report! It seems to happen only on mobiles and only when hitting the close control or another button closing the panel. For the time being I have no idea why this happens :( but will try to find out of course.

Best Regards, Stefan

[AviHafner]

Hi Stefan Thanks for all the knowledge. 🥇

From the experience with problems that I have with old iPhones , I had to add the lines: if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); before : panel.close();

I asked one of our students that has old iPhone to test the site, to be sure that it's indeed work on an old iPhone .

yours Avi Hafner

[AviHafner]

Hi Stefan I need your help please.

I need to know what event you are going to supply in call back. With jsPanel.pointerup.forEach(function (evt) { How can I know what value going to be in evt

In my application my biggest problem 👎 The issue that an under layer of the panel, you can find existing button that is activated upon clicking on a control in the jPanel . And I need to trig the panel according to the same event that you Production in evt to issue e.stopPropagation();

Best Regards, Avi

[Flyer53]

REFERS TO jsPanel VERSION 4 Hi Avi, "With jsPanel.pointerup.forEach(function (evt) {}); How can I know what value going to be in evt?" That depends on what Event API is supported by the browser used.

If the browser supports

• the PointerEvent API jsPanel.pointerup is ['pointerup'] -> the forEach loop will have only one iteration and evt will be only 'pointerup'
• the TouchEvent API but NOT the PointerEvent API jsPanel.pointerup is ['touchend', 'mouseup'] -> the forEach loop will have two iterations and evt will be 'touchend' in the first iteration and 'mouseup' in the second iteration. This is to make sure that the jsPanel controls on a touch device work with touch input AND with mouse input
• only the MouseEvent API jsPanel.pointerup is ['mouseup'] -> the forEach loop will have only one iteration and evt will be only 'mouseup'

This is all described here by the way: http://jspanel.de/docs/#global/pointerup

The issue that on a touch device a button "under" the panel is activated upon a click on the close control if the close control is "over" the respective button is known to me. But I couldn't find the reason for this behaviour yet. I will try to find and fix it of course ...

Please post issues concerning jsPanel version 4 in the jsPanel4 repo, not here in the jsPanel3 repo. Feel free to open a new issue under https://github.com/Flyer53/jsPanel4/issues

Happy coding 😏 Stefan

[AviHafner]

thanks a lot for everything .