I have been struggling for the past few hours to get a button click to work. The button contains text and an SVG, when clicking on it it opens a popover component.
The popover calculates its position on the element that was clicked upon. This works when clicking on the button itself, but when clicking on the SVG inside of the button, the dimensions/offsets from the SVG are used to calculate popover position instead.
What am I looking for: a way to bubble the click on the SVG to the button, then using the event object from the button click to calculate the popover position.
How my button with events looks like right now:
<button type="button"
#click="popButtonClicked">
Go do magical stuff
<svg path="" />
</button>
I have tried playing with #click.modifiers on both the button and SVG, but to no avail.. Hope someone has the answer for me! :)
You can get the button's reference by passing the $event as a parameter to your function, and then accessing the .currentTarget of that reference:
<button type="button"
#click="popButtonClicked($event)">
Go do magical stuff
<svg path="" />
</button>
And then in your function:
popButtonClicked (event) {
console.log(event.currentTarget)
}
Working codepen: https://codepen.io/anon/pen/gdBBdz
Related
After changing programmatically the "disabled" parameter of Material UI button the labels' color won't change on Safari. (It works for Chrome).
CodeSandbox link:
https://codesandbox.io/embed/material-demo-forked-8ly0d
According to this issue https://github.com/mui-org/material-ui/issues/26251
you need to add a prop key to your <Button> component to force it to re-render:
<Button key={`${disabled}`} disabled={disabled} />
I am trying to position the edit button in FilePond but it is not working, here is what i've tried:
<file-pond
ref="pond"
stylePanelLayout="compact"
captureMethod="camera"
:allow-multiple="false"
:imageEditor="myEditor"
:files="myFiles"
styleImageEditButtonEditItemPosition="top right"
/>
I am trying to set a clear button in text field using clearbuttonmode where it is working fine with Ios Platform and is not showing up in android.
Since clearButtonMode (check your spelling) is only available for iOS as you can see in the documentation I would go the multiplatform way and create a own button and add it next to the TextField. The buttons just sets the TextField value to "" to clear the field. You could even put everything inside a <View> with a white background and a border so it will look like the clear Button is inside the TextField
pseudo code:
<View height="Ti.UI.SIZE" width="300">
<TextField left="0" right="40"/>
<Button width="40" right="0"/>
</View>
I have a ListView a bit like this:
<ListView>
<Templates>
<ItemTemplate name="example">
<View id="wrapper" onClick="onClickExampleButton">
<Label>Click Me</Label>
</View>
</ItemTemplate>
</Templates>
<ListSection id="ls">
<ListItem template="example"></ListItem>
<ListItem template="example"></ListItem>
<ListItem template="example"></ListItem>
</ListSection>
</ListView>
I want to prevent double click on the onClickExampleButton function.
So far in the controller I have code like this:
function onClickExampleButton(e) {
var item = $.ls.getItemAt(e.itemIndex);
// TODO: I want to disable the onClick eventListener here
someLongAsyncFuncToServer(function() {
// TODO: I want to re-enable the onClick eventListener here
})
}
Usually removing event listeners is as simple as
$.objId.removeEventListener(onClickExampleButton)
and re-adding it is as simple as:
$.objId.addEventListener(onClickExampleButton)
However, I am not sure how to achieve this on a ListItem
I believe you can achieve this by using source id of event fired by element. The only thing you need to take care of that since events are bubbled up to parent hierarchy, so any child-view can also invoke click event giving you unexpected source ids.
To resolve your query, you can safely use this code:
function onClickExampleButton(e) {
var item = $.ls.getItemAt(e.itemIndex);
// TODO: I want to disable the onClick eventListener here
e.source.touchEnabled = false;
someLongAsyncFuncToServer(function() {
// TODO: I want to re-enable the onClick eventListener here
e.source.touchEnabled = true;
})
}
And make a little change in your XML code like this:
<ListView>
<Templates>
<ItemTemplate name="example">
<View id="wrapper" onClick="onClickExampleButton">
<Label touchEnabled="false">Click Me</Label>
</View>
</ItemTemplate>
</Templates>
<ListSection id="ls">
<ListItem template="example"></ListItem>
<ListItem template="example"></ListItem>
<ListItem template="example"></ListItem>
</ListSection>
</ListView>
The catch here is that first of all you set touchEnabled = 'false' on Label inside View (with id = wrapper), it will make sure that click event won't be fired by Label, and will be bubbled up & fired by parent only.
Next thing is that, in click event method, you are using e.source which is now your wrapper View.
If you do not set touchEnabled=false on Label, then e.source can also contain Label reference. You can read more about events bubbling which will help you understand how you can work with event handling in Titanium efficiently.
I would put a property on the object and use it to determine status. For example,
set a variable when you click the button and then change it after the long running Async function... This way, if the status is running, then ignore the click. Once it is not running any longer, then accept the click.
Below is code for my button, so what properties should I add to make button invisible but content must be visible.
<Button x:Name="PART_PreviousButton"
DockPanel.Dock="Left"
Content="<"
Focusable="False"
Opacity="0" />
You need to edit the button Template to have this kind of result.
This link explains it pretty well, the easiest way is to do it with blend: http://msdn.microsoft.com/en-us/library/bb613598.aspx