I want Dojo Tree Context Menu NOT fired for some nodes? - javascript

I have a Dojo Tree and a related Dojo Menu. I want this context menu popup for certain types of nodes and not for the others. The Tree is not static and items are added at runtime.
Is there an Event (onBefore) of Menu that is fired before popping up and behaves according to your return value ?
Is there a Property of Menu that keeps it silent for some time ? Like I have this Tree.onMouseDown handler and if the item right-clicked should not show a context menu, then I untrigger the Menu or it ignores the RightClick so that it does not popup ?

dijit/Menu has a property called "targetNodeIds". It's an array of target node IDs that you can populate at startup.
Subsequent nodes can be attached through dijit/Menu's "bindDomNode(node)" method.
There is also a "selector" property for dijit/Menu, that allows you to specify a class on the nodes you want to use as a target. Just create your tree nodes with a particular class and set this class name to be the "selector" property.
See http://livedocs.dojotoolkit.org/dijit/Menu#attaching-to-multiple-nodes

Related

How do I get node data by clicking a node in the diagram?

I'm making a dynamic genogram in GoJS, where I want to be able to click a parent node, click a button in HTML that adds the child and links it to the parents. For this I need to be able to get the key from the parent node by clicking on it in the diagram.
I was thinking I'd have to use the addDiagramListener() function but I think that function is only for changes in appearance of the node e.g. changing the color of the node on click and not for getting node data.
You have several options. The two most common are to implement a "ChangedSelection" Diagram event, and looking at all selected nodes (or just the first one: myDiagram.selection.first()) and inspecting the node.data or just node.key (which is a shortcut for node.data.key)
And to do something similar on each individual node by setting selectionChanged on your Node template. This function will be called every time a given node is selected or deselected.
There's a simple live example of selectionChanged being used here: https://gojs.net/latest/intro/selection.html#SelectionAppearanceChanges

chrome.contextMenus exclude type

Is there a way to exclude one of the type of contextMenu if they overlapping?
example:
I have two context items, editable and selection.
In situation when both of those types match, (selection inside editable)
Chrome gives sub-menu for both actions.
I would like to have only one.
How can I prioritize or exclude one of those types in this specific situation?
If the menu item types are identical (i.e. same type, type, etc.), then you can declare the context menu and specify multiple contexts. Then the menu item will show up if any of the contexts match.
You've however stated that you really need separate context menu declarations:
Menu item with title "Make note" for the "selection" context.
Menu item with title "Insert note" for the "editable" context.
Menu item with title "Make note" when both contexts apply, e.g. when text is selected in an input field (so without the "Insert note" menu item).
The contextMenus API does not directly support this use case. So the next best alternative is to remove the context menu for the "editable" before the context menu appears in the third situation (and restore the context menu when the third situation is no longer relevant).
In your situation, I would use selectionchange to detect when the user (de)selects text. Upon selecting text, check whether an input field is in the selection (to do so you can combine the Selection, Range and/or DOM (traversal) APIs). If you find an input field, remove your desired context menu item.
Regardless of whether you find a menu item, add listeners for key and/or mouse events to detect whether the user's pointer is on an input field.
Here is an example that uses selectionchange (https://stackoverflow.com/a/13673942/938089) and another one for Showing context menu buttons only when right-clicked on classes that start with “Story”.

Add event listeners to buttons within a ListView - WinJS

I have a list of items within a ListView which contain buttons. I can't find a way to add event listeners to the buttons...
This is the code:
JS:
downloadsListView = document.getElementById('downloads').winControl
downloadsListView.itemDataSource = JobList.dataSource
downloadsListView.onloadingstatechanged = function() {
var _this = this;
return WinJS.Utilities.query("button.play_pause_button", document.getElementById('downloads')).forEach(function(element) {
console.log(element);
return element.onclick = _this._play_pause_download;
});
};
I can assure that the function does loop over the buttons via the console output. But clicking on the buttons fires nothing.
I hope someone can help. Thanks :)
I think Dominic's comment is your best bet. The ListView.itemTemplate property page on MSDN says...
Adding interactive elements to an item template The item template can contain most other controls, but it can't contain a FlipView or
another ListView.
Normally, when the user interacts with an element, the ListView
captures that interaction and uses it to determine whether the user
selected or invoked an item or is panning through items. For an
interactive element, such as a control, to receive input, you must
attach the win-interactive class to the interactive element or one of
its parent elements. That element and its children receive the
interaction and no longer trigger events for the ListView.
When you attach the win-interactive to an element in a item template,
be sure that the element doesn't fill the entire item, otherwise the
user won't have a way to select or invoke that item.
To add interactive elements to your item template, you must use a
templating function instead of a WinJS.Binding.Template.
Why don't just add an event listener to the ListViewItem, that fires when the user taps/clicks on the element? This is the proper way of doing it.
ListView has onItemInvoked. Mor info on that can be found here.
Example in your case:
<div id="downloads" data-win-control="WinJS.UI.ListView"
data-win-options="{oniteminvoked : _play_pause_download}">
</div>

How to fix dynamic added elements aren't dragging or sorting jquery

I have one button, and when i click it it adds elements that are with same class, for example my class is image_class, the default added elements are being dragged, but when i add new element with the class i can't drag it or sort it.How can i fix that ?I want when dynamically added element shows up to be dragged or sorted .There is no problem with the default ones.
I'm using jquery ui
Okay, here's one way of doing it (and since I have no idea what your button code does...)
http://jsfiddle.net/TrowthePlow/qZz5j/
By default, events are added at runtime and not bound to elements created after the point of binding, even when they have the same selector.
To make sure that events are bound to items with the same selector dynamically, make sure you use the jQuery live method to bind your events.
$('.clickme').live('click', function() {
// Live handler called.
});

How can I have two different drop down menus depend on the same parent menu?

I have two drop down menus that I want populated with identical data depending on what is selected on the parent drop down menu. Right now, I am using a javascript library that populates one child drop down menu based on a parent, but I need to have two drop down menus populated simultaneously.
This javascript library contains a function called PrintOptions that is supposed to populate the dropdown menu when something is selected from the parent menu. I have tried calling the same function twice one for each drop down menu, but it doesn't seem to be working.
This is where I got the library: http://www.javascripttoolbox.com/lib/dynamicoptionlist/documentation.php
Reading the document you list, it seems there's a section that allows you to specify multiple child components from the parent:
To create the DynamicOptionList object, pass the names of the fields that are dependent on each other, with the parent field first.
Create the object by passing field names
var dol = new DynamicOptionList("Field1","Child1","Child2");
Or create an empty object and then pass the field names
var dol = new DynamicOptionList();
dol.addDependentFields("Field1","Child1","Child2");
Instead of trying to call the function more than once, just add the 2nd child component's name to the DynamicOptionList constructor, as in the first example above. As I read the docs that means whatever happens to Child1 will also happen to Child2 when Field1 is selected.
In the event handler you have for your parent drop down, you are probably having some other code populate that child drop down. Simply add the code again, but instead reference the second drop down. That's the rough approach. There are some details and style guidance I'm leaving out, but that'll get the job done.

Categories

Resources