insert widget in dojo/dnd source - javascript

I am using dojo/dnd to drag and drop and rearrange an array of widgets
Current I am inserting nodes to drag and drop source using following code
dragDropSourceNode.insertNodes(false, [widget.domNode]);
Instead of inserting the domNode can I insert the widget itself.
My widgets have widget_number attribute(property) assigned to it and I have an array of widgets.
Every Time there is a drag and drop, I need to change the widget_number. Also i need to rearrange the array.
But since I am sending the domNode inside, there is no way I can change the widget itself or call any function of the widget.
Is there a way to link both of them?

From domNode get widget_id and do registry.byId to get the widget and everytime there is a drag drop event, recreate the array based on the updated nodes in drag drop object.

Related

Proper method to use keyboard bindings to focus a dynamic menu/sub-menu in React

The Context
I am using BlueprintJS to create a custom data-table with type-ahead results which return in a Menu component (think Google Sheets with typeaheads). I would like to be able to use the keyboard arrow keys to navigate through this menu. I'm able to focus the menu when the ArrowDown key is pressed. Then using a keyboard handler on the Menu, I keep track of the index of the current selected item and highlight it with CSS, quasi-focusing each menu item.
Here is an example of what I'm working with. Simple Input with Menu
The Problem
First and foremost, this method doesn't actually focus the list item, which destroys any accessibility. Second, using this method I can't move between submenus since the key handler is only keeping track of the top level elements of the menu.
Potential idea
When the list data changes (as it is a dynamic typeahead), create an object of Refs and pass this to the MyMenu function, and create a clever keypress handler, calling ref.current.focus() on each keypress navigation. This would properly focus the list item for accessibility, but not sure if this is the correct way to do this.
Question
What would the proper way of handling this? Is there a different component structure I should be thinking about?

working with jQuery sortable and draggable

I've built a sortable and connected with a draggable list just like plenty of others. However, if I don't use the clone helper on the draggable, the drag placeholder gets offset and the placement of it gets messed up. But when I do use clone, the cloned item doesn't have the item ID, which I was intending to pass back to the server on stop.
What's the best way to handle this? Should I use a data element on the li to store the 'value' of the li?
Second questions-- on stop I want to remove a class from the dropped element, and add a new class. However I can't figure out how to reference this element. this doesn't work, and the other objects passed in to the stop event are ui and event-- ui.helper looked like it may have the info I need, but this doesn't seem to work either.
Thanks!
Fiddle here:http://jsfiddle.net/37tdS/

AngularJS ui.sortable with connected lists

I made editor using JQuery for data structure showed here, features:
click on [X] triggers deleting parent node and all child nodes linked to this node
click on [V] triggers showing drop-down container with child nodes and copy of parent node
click on [x] triggers deleting child node
user can perform drag-sorting for parent nodes (outlined with ++++)
user can perform drag-sorting inside parent's drop-down container including copy of parent node
etc.
I'd like to translate it to AngularJS for education purposes. I implemented parent nodes sorting, but I have a trouble implementing sorting for children nodes. Is there best approach for doing things like that w/o changing data structure?

jquery full calendar: initialize an array from source every time new events are fetched

I want to initialize a global array of events everytime new events are fetched from the database. T explain some more, i want my events in a global array on the client side so that i can filter events without an ajax call. For example, if i have events, and each event has a country associated with it, i have multiple select box where you can select one or more country. I use the clientEvents functions to filter events taht match the criteria but the problem comes when the user starts reducing the filters. Then i need the events that i have already filtered out and for that i dont want to make an ajax call. So my approach is to have a global array of events, and when the user clears the filters, i just simply refectch all the events from that array.
Now the problem is , where to initialize that array?? if i do it in eventAfterRender, it changes in when the filtered events are being rendered, if i do it in viewDisplay, it isnt even initialized, i dont know why, i read somewhere that viewDisplay gets called before the events are rendered if you are using json feed. So i am stuck.... Please any help would be great.
You could use a function as the feed:
http://arshaw.com/fullcalendar/docs/event_data/events_function/
Then you can load the events from wherever you want and combine your array with data from a json source. It is up to your function to decide where to grab the data.
I suppose you will have to call the refetchEvents method after some external factors like choosing another country is done (your function providing events should take the selection of countries into concideration when generating the events to display).

How to trigger rendering of JQuery treeview

I use jquery tree plugin to render hierarchical data.
I have coded additional functions which would allow user to interact with this data (like adding/deleting nodes, swapping nodes, etc...)
Currently this plugin supports that whenever you want to add any node, you can call following method,
$("#browser").treeview({
add: branches
});
here branches is jQuery object created with the HTML block, which would represent a particular node.
However, for delete and swapping of nodes, I use common JQuery functions like,
for delete,
$("#topnd2").remove();
for swapping,
var next = $("#topnd2").next();
$("#topnd2").insertAfter(next);
topnd2 is an id of any particular tree node.
The nodes get deleted / swapped properly but the problem is the tree does not get rendered and therefore the tree images (mainly vertical lines denoting branches) are not set properly.
For example, if I delete the last node then that node will be removed from rendered treeview but the remaining sibling node should get L as branch line image but not | .
I tried calling
$("#browser").treeview();
Please let me know your ideas.
Thanks,
Jatan
I found some workaround as given below,
Once the node is swapped up, virtually add its previous node to its child,
$("#browser").treeview({add:$("#topnd2").insertBefore(previous).next()});
If node is swapped down, virtuall add the current node to its next node.
$("#browser").treeview({add:$("#topnd2").insertAfter(next)});
currently it's working fine, will update this post, if I find any problems in this approach. Also please validate this approach if you know.
Regards,
Jatan
If you try to refresh the treeview again after node removal, the link will work but not the [+] or [-] icon. Tried this on several browsers..

Categories