With Jetpack Compose for Desktop, we can make pretty much any element clickable:
Text("I'm clickable", Modifier.clickable { onClick() })
This causes the element to be included in the tab order, and most of the time that's what you want. But in my case, the interaction that happens on click is also available in another way, so I don't want to force the user to tab through a lot of useless Texts.
How can I exclude the clickable element from the tab order?
Modifier.clickable is a high-level API, you can use a lower-level API to get more flexibility.
To detect tap you can use Modifier.pointerInput with detectTapGestures:
Modifier
.pointerInput(Unit) {
detectTapGestures {
onClick()
}
}
Many of the things clickable does won't be added in this case. For example, see this answer on how to add a ripple effect. See Modifier.clickable source code for other things you may need to add.
Related
I'm using a VIS.JS network diagram as a menu (of sorts) with a master/detail relationship to another area of the screen. Each time a user selects a node I signal the loading of the other area. Since the load is asynchronous and can take time (1-2 sec) I'd like to prevent the network node selection from changing until the details are loaded.
Ideally I'd like for the click to invoke the callback, without changing the node selection. Then receive a notification from the detail pane that the loading is complete, and only then change the node selection through code.
I think the only thing I'm missing is the ability to disable the auto-selection of a node when it is clicked.
Is that possible?
Thanks
-John
I don't know if it'll exactly fit your need but,
I needed to create some node unselectable so I prefix my unselectable node's id with a marker.
And then
const unselectableMarker = 'header-';
network.on('selectNode', (opts) => {
network.setSelection({
nodes: opts.nodes.filter(id => !id.startsWith(unselectableMarker)), // prevent selection of headers nodes
edges: opts.edges,
});
});
I've found nothing in actual doc for preventing events in network context.
Capturing the event and preventing default behaviour should not focus the element.
handleClick (evt) {
evt.preventDefault();
// rest of code
}
I've got a dijit Tree which is populated via a store wrapped in Observable, essentially the example here: http://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html#id7 (Not that the example actually runs from the dojo site though: unless that's just my browser).
It's working well and I can expand and collapse items. However, it displays an expand icon even for the last item in a hierarchy - i.e. an item that doesn't have any children. When you try and expand such an item, it seems to realise this and the expand icon then disappears.
Does anyone know of how to supress the expand icons from appearing in the first place?
Thanks!
Implement the mayHaveChildren() method of the model:
Implementing logic here avoids showing +/- expando icon for nodes that
we know don't have children. (For efficiency reasons we may not want
to check if an element actually has children until user clicks the
expando node)
This method inputs one of your items and outputs true if it can be expanded; false otherwise.
Fairly new to developing for Windows 8, I'm working on an app that has a rather flat model. I have looked and looked, but can't seem to find a clear answer on how to set a WinJS page to prevent backward navigation. I have tried digging into the API, but it doesn't say anything on the matter.
The code I'm attempting to use is
WinJS.Navigation.canGoBack = false;
No luck, it keeps complaining about the property being read only, however, there are no setter methods to change it.
Thanks ahead of time,
~Sean
canGoBack does only have a getter (defined in base.js), and it reflects the absence or presence of the backstack; namely nav.history.backstack.
The appearance of the button itself is controlled by the disabled attribute on the associated button DOM object, which in turn is part of a CSS selector controlling visibility. So if you do tinker with the display of the Back button yourself be aware that the navigation plumbing is doing the same.
Setting the backstack explicitly is possible; there's a sample the Navigation and Navigation History Sample that includes restoring a history as well as preventing navigation using beforenavigate, with the following code:
// in ready
WinJS.Navigation.addEventListener("beforenavigate", this.beforenavigate);
//
beforenavigate: function (eventObject) {
// This function gives you a chance to veto navigation. This demonstrates that capability
if (this.shouldPreventNavigation) {
WinJS.log && WinJS.log("Navigation to " + eventObject.detail.location + " was prevented", "sample", "status");
eventObject.preventDefault();
}
},
You can't change canGoBack, but you can disable the button to hide it and free the history stack.
// disabling and hiding backbutton
document.querySelector(".win-backbutton").disabled = true;
// freeing navigation stack
WinJS.Navigation.history.backStack = [];
This will prevent going backward and still allow going forward.
So lots of searching and attempting different methods of disabling the Back Button, finally found a decent solution. It has been adapted from another stackoverflow question.
Original algorithm: How to Get Element By Class in JavaScript?
MY SOLUTION
At the beginning of a fragment page, right as the page definition starts declaring the ready: function, I used an adapted version of the above algorithm and used the resulting element selection to set the disabled attribute.
// Retrieve Generated Back Button
var elems = document.getElementsByTagName('*'), i;
for (i in elems)
{
if((" "+elems[i].className+" ").indexOf("win-backbutton") > -1)
{
var d = elems[i];
}
}
// Disable the back button
d.setAttribute("disabled", "disabled");
The code gets all elements from the page's DOM and filters it for the generated back button. When the proper element is found, it is assigned to a variable and from there we can set the disabled property.
I couldn't find a lot of documentation on working around the default navigation in a WinJS Navigation app, so here are some methods that failed (for reference purposes):
Getting the element by class and setting | May have failed from doing it wrong, as I have little experience with HTML and javascript.
Using the above method, but setting the attribute within the for loop breaks the app and causes it to freeze for unknown reasons.
Setting the attribute in the default.js before the navigation is finished. | The javascript calls would fail to recognize either methods called or DOM elements, presumably due to initialization state of the page.
There were a few others, but I think there must be a better way to go about retrieving the element after a page loads. If anyone can enlighten me, I would be most grateful.
~Sean R.
in need of EXT JS application design advice. here is a diagram of what I have so far:
http://screencast.com/t/RCdve5dO2
I have a window, with a toolbar. On the tb there are 3 menus, a button and a store to track some info. the window itself is an image which changes upon button click based on the values of the menus. i have a menu handler for this.
this all works fine and well with one window.
the issue i'm having is I can create multiple instances of the window on a drop event (drag from tree on the left). when more than one window is open there is some sort of menu collision. the menus on one window break when select an item on the other window. like so:
http://screencast.com/t/bbJ8RjlQK1b1
it seem all instances of the window seem to be sharing the same handler, or perhaps each window shares the same menu instance? i will need to investigate.
my question:
so taking a step back, the requirement is that each of the duplicate windows (and there could be many) must operate independently. from a design perspective, whats the best way to accomplish this?
Let me guess, you are defining objects or arrays for the component class outside of the initComponent function.
Can you post your code please?
You should declare all non-primatives inside initComponent like this:
Ext.define('SomeComponent', {
extend:'SomeOtherComponent',
title:'a string is a primitive type. so is a number',
initComponent: function(){
Ext.applyIf(this, {
someNonPrimitiveProperty:{ text:'arrays and objects are non-primitive' }
});
this.callParent(arguments); //always call this
}
});
I've been playing around with Dojo over the last couple of days.
The script below changes the background position of the list item when the mouse is over the link.
dojo.query('a[class=main-menu-link]').forEach(function(linkTwo) {
dojo.connect(linkTwo, "onmouseover", function(evt) {
dojo.query('#main-menu ul li').forEach(function(linkThree) {
dojo.style(linkThree, {
"backgroundPosition": "right center",
});
});
You can see it in action in the right hand side menu: http://www.mechanic-one.suburban-glory.com/
I'm trying to work out the best of way of giving it a smooth transition between the two states... I've been looking on the Dojo documentation page but I'm not sure what is the best way of approaching it.
Check out the Animation quickstart. You can animate css properties and select from a set of existing animation effects and easings. Chaining is possible by requiring the NodeList-fx module.