Dojo emit click event to dojox.mobile.ToolBarButton - dojo

Im trying to fire a click event on a tool bar button Dojo 1.8.1.
<div data-dojo-type="dojox.mobile.ToolBarButton" class="backButton" moveTo="cartView" transition="slide">
I have tried
function backClick(){
var backButton = dojo.query(".backButton", dojo.byId(currentView.id))[0];
writeLog("backClick::"+backButton);
if(backButton){
var backDijit = dijit.registry.byId(backButton.id);
writeLog("backDijit::" + backDijit.id);
writeLog("emit Click");
backDijit.emit("click", {bubbles:true});
writeLog("emit mousedown");
backDijit.emit("mousedown",{bubbles:true});
writeLog("emit mouseup");
backDijit.emit("mouseup",{bubbles:true});
writeLog("touchstart");
backDijit.emit("touchstart");
writeLog("touchEnd");
backDijit.emit("touchend");
}else{
//Exit App notification
navigator.app.exitApp();
}
}
mousedown/mouseup combo works on the browser.
But on the device it does not work(Android). What is the event that i have to send to 'click' the button on a device?

It seems that the sequence of events that will activate the toolbar button 'click' on a touch device is touchstart followed by touchend.
I suppose that your example do not work because the synthetic touch events that you are emitting do not contains any data, which fails the different methods that handle it.
Another way to trigger the click handler of the toolbar button would be to call its _onClick method.

Related

How do I trigger a click event on a button within a popup?

I have a button in a popup and I want to be able to call a method in my vue component, when it is clicked. I am already using vue leaflet, but in this case I have to use leaflet's native popup functions.
I have tried using this L.DomEvent and using the popupopen event but since I have so many popups, the onclick gets called several times.
L.popup().setLatLng(bounds.getCenter()).setContent(this.getPopupDisplayContent()).openOn(map);
getPopupDisplayContent() {
return (
`<div><button type="button" id="add-button">Add</button></div>`
);
}

How to have a div rather than a button for pivot link

I want to customize a PivotItem to make it close-able (kind of like browser tabs).
I provided a custom onRenderItemLink implementation do display an X icon on the right side of the tab, and an onClick method on that icon that will close the tab.
The main issue I'm facing is that this PivotItem is wrapped with a button (Pivot.Base.tsx renders a Commandbutton), that intercepts all onClick events on Firefox.
Firefox does not allow onClick events under a Button (this seems to be in accordance with the standard, so it's not considered a bug), so i can never close a tab on Firefox.
Is there any way to force Fabric UI to create a div rather than a button in this scenario?
Is there any other way to force a div there (some way to intercept what fabric ui creates and switch the button with a div)?
Advice appreciated.
Ended up closing the tab if the button was clicked on its right side
const clickX = clickEvent.pageX;
const buttonRight = clickEvent.currentTarget.offsetLeft + clickEvent.currentTarget.offsetWidth ;
if (buttonRight - clickX <= 40) {
removeTab(tab);
}

Disable user interaction to current page

In my Xamarin forms application I want to disable the user interaction to current page when displaying a custom popup. How can I block user interaction to the toolbar also. User cannot touch the toolbar when showing the default alert box using the following method
DisplayAlert(...);
But i am using a custom popup. Please help me.
this.Content.IsEnabled = false;
It would turn off touch for all the content.
The most MVVM way would be to bind the IsEnabled property to a boolean value in your viewModel. On showing the popup you could toggle the value to false and then revert on dismissing the popup:
var label = new Label();
label.setBinding<ViewModel>(Label.IsEnabledProperty, vm=>vm.IsEnabledToggle);

Safari Extension: window.open(...) doesn't work sometimes?

I have an injected stylesheet that calls a popup with window...open() on two occasions. One when the user clicks an HTML button, and two, when a user clicks on a context menu item. To listen for the context menu item, I need to add a listener on the injected script like so
safari.self.addEventListener("message", messageCallBack, false); // Message comes from global.html when context menu item is clicked
And the following callback
function messageCallBack(msgEvent) {
...
window.open(...)
...
}
For some reason, the popup works when the button calls window.open, but NOT when the message callback calls window.open. I'm assuming it maybe have something to do with the window object.
I suspect this is due to restrictions on window.open designed to combat pop-up ads. This means it will only work in response to a click event.
To get around this, I would recommend you open the new window from your global page using the safari.application API:
safari.application.openBrowserWindow();
safari.application.activeBrowserWindow.activeTab.url = '...';
You can also open new tabs with:
safari.application.activeBrowserWindow.openTab('foreground').url = '...';
To achieve this, you may need to send a message from your injected script to the global page.

Cancel WinJS.UI.Animation.pointerDown if not clicked

I'm using WinJS.UI.Animation.pointerDown and WinJS.UI.Animation.pointerUp within a WinJS repeater's item template.
The problem is if a user holds their finger or the mouse button down on an item and moves off it, the pointerUp animation doesn't seem to fire or it fires but has no effect because the element that the up event is on is not the same as the one before. The best example of this is in the animation sample in example 6 (tap and click). Hold down the mouse button on a tile and move it off. It will stay in it's animated state and won't fire the pointerup event. Here's the code I'm using.
How can I cancel the pointerdown animation if the user moves off the element?
target1.addEventListener("pointerdown", function () {
WinJS.UI.Animation.pointerDown(this);
}, false);
target1.addEventListener("pointerup", function () {
WinJS.UI.Animation.pointerUp(this);
}, false);
target1.addEventListener("click", function () {
//do something spectacular
}, false);
I'm using the click event to commit the click action so that the right click remains clear for launching the navigation at the top of the app.
Have you tried adding an event listener for pointerout? That's the event that's dispatched when a pointing device (e.g. mouse cursor or finger) is moved out of the hit test boundaries of an element.
See the docs on pointer events here:
http://msdn.microsoft.com/en-us/library/ie/hh772103(v=vs.85).aspx