In my recent Cue Project, I have following situation:
I've got a weather div which, when editing-mode is enabled, has a delete- span on the bottom left which contains the ref="edit" attribute (Look here).
On the outer div, there's an click event with #click="eventHandler"
The eventhandler looks like this:
eventHandler(e){
if(e.target !== this.$refs.edit){
this.$router.push({name: "Weather", params: {city: this.city.city}} )
}
}
The event handler should not fire when clicking on the edit-span on the bottom left, so he if-condition above should test this.
But when logging both, e.target and this.$refs.edit to the console, it shows that one is a html-element and the other a proxy.
So is there any good way to test in vue3, whether the click was on the edit-element or not to only fire the router-algorithm when the click was not on it?
Thanks for your help!
Related
I used the example code to create an info button (https://resources.jointjs.com/tutorial/element-tools). But I would like it to change when clicked. (I actually modified the example to show a "+" instead of a blue info circle, by using text and textContent instead of a path in the markup definition. But I would be happy to learn how to make the original example change when clicked, too.)
So when you click it I want it to show some info and change to a "-". And then if you click the "-", change back to a "+". I don't see how to change the textContent of the elementTools.Button programmatically or in an event. It was easy enough to change the label of the associated Rectangle. Inside the event I just did this.model.attr("label/text", "whatever"). But how to do it to the element tool Button?
There is an example that's pretty good, using a custom element containing subelements not tools (halfway through https://resources.jointjs.com/tutorial/events). Does it mean I can't use an element tool, that element tools can't change on an event?
The behaviour of the Button tool can be adjusted in the callback function in options.action.
joint.elementTools.InfoButton = joint.elementTools.Button.extend({
name: 'info-button',
options: {
action: function(evt, elementView, buttonView) {
// your action
}
}
});
Although, in your case I would probably go with the example using custom events you linked in your question. It is probably more flexible to work with an element rather than a tool in this instance.
I would like to know, just by subscribing to the Interactable OnClick event, if I pressed the button with my left or right hand. Would that even be possible without passing this information along with the OnClick event?
The button has quite the logic to go through until it decides to accept a click request, so replicating all of that via global listener is not feasible.
Is it possible to get that information OnClick from somewhere else? Is it possible to query the potential click sources for who that was?
Without altering the Interactable class the only way I found was to query the FocusProvider for the active pointer, which must have been the one pressing the button (in my case):
https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/Input/Pointers.html
https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/Input/Controllers.html
Setup your controllers, take note of the axis name, in code you can do something like this in any GameObject's update loop:
if (Input.GetAxis("Axis1D.PrimaryHandButton") > 0.5f) {
// this axis (button) is pressed do something
}
I can't seem to "click" on these select boxes using vue-test-utils and Vue 2. I am using mocha + webpack.
I am determining this by seeing that the visible-change event is never triggered as it should on click. Here is how my spec file is like:
...
const wrapper = mount(EntityItem, { propsData });
const selectBox = wrapper.find("el-select");
// I tried these:
selectBox.trigger("click");
selectBox.trigger("click.native");
As last resort if this doesn't work, I'd have to manually change the model attribute to simulate the component change.
----UPDATE----
When I set up a callback for the click event I see something, but I am unable to "select" anything in this select input component.
the component you are using does not use select input element. In order to simulate selecting an option, you would do something like this.
wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click'); // simulates clicking of one of the options
if you want to simulate clicking of select element itself(to show the dropdown). you could do the following.
wrapper.find('.el-select-dropdown').trigger('click');
Whitespace's answer above helped, however also needed to ensure you use
await Vue.nextTick()
before your expect statement. Like so:
wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click');
await Vue.nextTick();
expect(enterResultBtn.is('[disabled]')).toBe(true);
This allows the DOM to update it's cycle, more info here
I'm making a Master/Details app with Template 10. The Master/Details Template 10 sample uses a CommandBar to get full control over when the back button is shown, but I'd like to show the back button on a PageHeader or on the shell. The problem is, since there is no back stack, the button refuses to be shown. How should I handle this?
Override the OnNavigatedTo event and set AppViewBackButtonVisibility to Visible in the code-behind file for each page that you want to enable the title bar back button.
Take a look here: http://grogansoft.com/blog/?p=1116
The important part is "AppViewBackButtonVisibility"
if (rootFrame.CanGoBack)
{
// Show UI in title bar if opted-in and in-app backstack is not empty.
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
AppViewBackButtonVisibility.Visible;
}
I also suggest you take a look at the AppBar properties.
Especially the Visibility which gets or sets the visibility of a UIElement and you could force the visibility of an item:
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.appbar.aspx
So I've created a hacky solution to this. Basically I'm adding a dummy value onto the stack so that the back button thinks there is something to go back to.
var entry = new PageStackEntry(typeof(bool), null, null);
Frame.BackStack.Insert(0, entry);
Then I've added a BootStrapper.BackRequested event which sets HandledEventArgs.Handled to true so Template10 doesnt actually pop the page. That way I've got full control over the back stack and the back visibility.
I'm writing a Primefaces 5.1 portlet.
It consists in a unique page containing a panelMenu, and I need that it starts with any panel collapsed everytime a user change page (on page loading).
But, if I open a panel, then change page, it will start showing that panel still opened.
I wasn't able to find any option to achieve this goal (e.g. collapsed=true, ignoreCookie=true or something similar).
The only solution I found was the following Javascript code:
PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);
The problem is that this code will collapse any opened panel (so on page loading user is able to see panel menu collapsing animation) but it seems it doesn't store this state in its cookie/localstorage... the result is that on any page loading user can see this animation.
I'm sure it doesn't save its state, because the only way to "solve" the problem is to manually re-open and re-collapse the panels... then, on following page change, these menus start closed (and there is no animation).
I also tried to use PrimeFaces.widgets.sideMenuPanel.saveState() after collapsing, but with no success.
Do you have any idea about?
Thank you...
I found a solution to the problem.
If you read my discussion with Kukeltje (comments on my question), you will find that latest Primefaces' versions will solve the problem.
Otherwise, if you want to avoid upgrade or modify sources, and you need a quick fix based on Javascript only please read the following part of the answer.
It directly works on the component's state using JavaScript.
First of all you need to have a variable reference to your component:
<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />
Then you should add the following JS code on document ready:
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
// following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
//clearSidePanelMenuPreferences();
// 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
// We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});
The function called to clear preferences are the following:
function clearSidePanelMenuPreferences() {
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState(); // store this information
}
Hope it helps
Please check this block of code
PF('myPanelMenu').headers.each(
function(){
var header = jQuery(this);
PF('myPanelMenu').collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
);
I prefer to do this in order to execute this method only once and keep the menu option selected.
$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState();
}
});