I'm opening the context menu when the picture in the node gets hovered. As a result, I'm unable to drag the node without closing it. Would be better if there is an option to close the context menu when drag is attempted.
GoJS version - GoJS 2.0
Sample gif
Assuming you want to use the ContextMenuTool and are using GoJS context menus (i.e. Adornments instead of HTMLInfos), then you could do something like:
$(go.Diagram, . . .,
{ . . .,
"contextMenuTool.doMouseDown": function() {
if (this.isActive &&
this.currentContextMenu instanceof go.Adornment &&
!this.currentContextMenu.actualBounds.containsPoint(this.diagram.lastInput.documentPoint)) {
this.stopTool();
this.diagram.toolManager.doMouseDown();
return;
}
go.ContextMenuTool.prototype.doMouseDown.call(this);
}
})
Related
I'm trying to build a simple accordion Polymer component. I have it working so when I click on an item in the list, an open class is added to the item which shows its contents.
I don't want to be able to have multiple items open at a time, so in my click function, I essentially want to say:
$(".list-item").on("click", function() {
$("list-item").removeClass("open");
$(this).addClass("open");
}
Of course this is in jQuery and not Dart...so that doesn't help me much.
What's the above equivalent in Dart?
Here's what I have working right now (just opens each clicked item, but doesn't close others in the process).
_openedChanged: function() {
if (this.opened) {
this.toggleClass('open', true);
}
else {
this.toggleClass('open', false);
}
this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
}
To remove a class from all list-item elements in Dart, you could do:
querySelectorAll('list-item').forEach((item) => item.classes.remove('open'));
We've created solution where user has a table with files, each entry has checkbox. He can select as many as he like and then click download button.
We are using such resource, it should allow dynamically download, depending on selected items
private StreamResource createResource(final IndexedContainer container) {
return new StreamResource(new StreamSource() {
#Override
public InputStream getStream() {
for (Object o : container.getItemIds()) {
CheckBox checkbox = (CheckBox) container.getItem(o).getItemProperty(C_CHECK_BOX).getValue();
if (checkbox.getValue()) {
selectedFiles.add(o);
}
}
// do some magic to get stream of selected files
}
}, "download.zip");
}
The problem is that only second and following click on button is giving expected restults.
It's turns out that FileDownoader is getting resource from server and then it is sending current status of component . It is the reason why first click is giving stale result.
Do you have any idea how to overcome this? Is it possible to force: first update component and then download the resource?
Many thanks
Pawel
CheckBox in Vaadin is non-immediate by default, which means that it won't send a request to server when the checkbox is checked (or unchecked) on the browser. Immediate components send queued non-immediate events also to server but it seems that FileDownloader doesn't cause an event that would send non-immediate checkbox values to server.
The only thing you need to do is to set your checkboxes to be immediate when you create those:
checkBox.setImmediate(true);
FileDownloader will not suit your needs. As you can read in the documentation:
Download should be started directly when the user clicks e.g. a Button without going through a server-side click listener to avoid triggering security warnings in some browsers.
That means you cannot dynamically generate download.zip file determined by checkboxes values because that requires a trip to server.
You have at least 2 options. Either create new FileDownloader and generate new Resource download.zip every time user make changes to the checkboxes. Or you can add simple ClickListener to you Button with this line of code:
getUI().getPage().open(resource, "_blank", false);
Related: Vaadin - How to open BrowserWindowOpener from a SINGLE BUTTON
There is also alternative solution to set checkBox.setImmediate(true); . It is possible to send current state of all components, just before click, instead of sending each checkBox change.
This solution is based on this answer: https://stackoverflow.com/a/30643199/1344546
You need to create file downloader button and hide it:
Button hiddenButton = new Button();
hiddenButton.setId(HIDDEN_ID);
hiddenButton.addStyleName("InvisibleButton");
StreamResource zipResource = createResource(container);
FileDownloader fd = new FileDownloader(zipResource);
fd.extend(hiddenButton);
Add css rule to your theme
.InvisibleButton {
display: none;
}
And then create another button, which 1st update state, and then click hidden button.
Button zipDownload = new Button("Download as ZIP file");
zipDownload.addClickListener(new Button.ClickListener() {
#Override
public void buttonClick(Button.ClickEvent event) {
Page.getCurrent().getJavaScript()
.execute(String.format("document.getElementById('%s').click();", HIDDEN_ID));
}
});
I am trying to implement Drag and Drop using c0deformer's jQuery UI implementation (see here: http://codef0rmer.github.io/angular-dragdrop/#/) The dragging part works fine, but I can't seem to get the functionality I am after in terms of the drop. In this application, I want to be able to drop the draggable items anywhere within a target div, i.e., I don't want the destination scope to be limited to a list-type structure (or a set of repeated divs). Mainly this is because the user will be dragging items on the fly and there will be no way of knowing how many items the user will drag and drop in advance.
I have scoured the web and cannot find an example in Angular that uses drag and drop without effectively dragging from one list to another list. Can this be done? If so, I am not sure how I would appropriately update the scope after an item has been dragged. In this example code below, the dropped items are pushed into the scope of a second list and the new scope is applied. Ideally, the scope of the dropped items is the target div I mentioned above. I'm really new to Angular, so any advice is immensely appreciated.
Snippet from c0deformer:
app.directive('droppable', function($compile) {
return {
restrict: 'A',
link: function(scope,element,attrs){
//This makes an element Droppable
element.droppable({
drop:function(event,ui) {
var dragIndex = angular.element(ui.draggable).data('index'),
dragEl = angular.element(ui.draggable).parent(),
dropEl = angular.element(this);
console.log(dropEl);
if (dragEl.hasClass('list1') && !dropEl.hasClass('list1') && reject !== true) {
scope.list2.push(scope.list1[dragIndex]);
scope.list1.splice(dragIndex, 1);
} else if (dragEl.hasClass('list2') && !dropEl.hasClass('list2') && reject !== true) {
scope.list1.push(scope.list2[dragIndex]);
scope.list2.splice(dragIndex, 1);
}
scope.$apply();
}
});
}
};
});
I recently created an angular directive for drag and drop that doesn't rely on jquery-ui. It uses the html5 drag and drop api. It also doesn't have any requirements on the format of the data to be dragged or dropped, it simply sets up a hook for you to be notified when one element is dragged onto another.
Post here: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/
Demo here: http://logicbomb.github.io/ng-directives/drag-drop.html
I am working on contextmenu for jstree, and apparently needed a clone functionality in right click menu which will actually be simulation of copy , paste and rename, so that once user right clicks on an item and then clicks on clone, a node is copied (copied and pasted in the tree , and focused with rename highlight so that user could rename it right there.
I tried code below for custom clone menu item, but it doesn't work
cloneItem: { // The "clone" menu item
label: "Clone",
action: function (obj)
{
this.copy(obj);
this.paste(obj);
}
}
Any help is very much appreciated.
After research I figured out how this clone could be implemented, the key to do this was as paste goes on parent node of copied node. here is code.
cloneItem: {
label: "Clone",
action: function (obj)
{
var currentId = this._get_node(obj).attr("id");
var parentId = this._get_node(obj)[0].firstChild.parentElement.parentNode.parentElement.id;
$("#TreeDiv").jstree("copy");
$("#TreeDiv").jstree("select_node","#"+parentId);
$("#TreeDiv").jstree("paste");
$("#TreeDiv").jstree("deselect_node","#"+parentId)
$("#TreeDiv").jstree("deselect_node", "#"+currentId)
$("#TreeDiv").jstree("select_node","#copy_"+currentId);
$("#TreeDiv").jstree("rename");
}
},
steps to do this are
copy the current item using .jstree("copy");
select the parent node of copied item using .jstree("select_node","#"+parentId);
paste the copied item ( its copied over selected item , means parent ) using .jstree("paste");
now deselect both parent and copied element using .jstree("deselect_node","#"+parentId) and .jstree("deselect_node", "#"+currentId)
Before renaming select the copied node, the copied items gets id as copy_, so do this by .jstree("select_node","#copy_"+currentId);
and the final step to do is by .jstree("rename");
I hope it will help someone, who needs clone in jstree.
On right click, the context menu appears and provides few selenium
commands. It does not provides all selenium commands.
The list of commands is dynamic and gets updated with mostly used
selenium commands.
I want to make the command list static for context menu.
Any idea how can I do that?
It's easy to extend the Selenium IDE to add your own custom commands to the right-click context menu.
Specifically, you need to write some Javascript to add the extra commands you need to CommandBuilders.
Adding Command Builders. Command Builders help users adding
commands to the test by showing
available commands in the context menu
when you right-click the element.
There's a number of examples on the Selenium extensions page, for example, this one is a great demonstration of how to make commands related to HTML select elements appear in the menu:
CommandBuilders.add('accessor', function(window) {
// Define the command that we will return
var result = { accessor: "selectedLabel", disabled: true };
// Determine if the user has clicked on a select tag
var element = this.getRecorder(window).clickedElement;
if (element && element.tagName && 'select' == element.tagName.toLowerCase()) {
// The target is the select element
result.target = this.getRecorder(window).clickedElementLocators;
result.disabled = false;
var selectedIndex = element.selectedIndex;
if (selectedIndex == -1) {
// Handle no selection as the empty string
result.value = '';
}
else {
// Capture the inner HTML (the text shown in the select) as the value to be matched
var selectedOption = element.options[selectedIndex];
result.value = exactMatchPattern(selectedOption.innerHTML);
}
}
return result;
});
Once you've created your extensions, you can easily load them manually in the Selenium IDE under Options->Options, or bundle them as part of a Firefox plugin (a good tutorial for which is here)