I was able to successfully init all the examples of jsTree, but there was no example on how to create a new div on-the-fly and have it as a legitimate object for dropping into jsTree.
I tried playing a bit with drag_target, dnd_prepare but no luck.
I tried this code:
"dnd" : {
"drop_finish" : function () {
alert("DROP");
},
"drag_check" : function (data) {
alert("drag_check");
if(data.r.attr("id") == "phtml_1") {
return false;
}
return {
after : false,
before : false,
inside : true
};
},
"drag_finish" : function (data) {
alert("DRAG OK");
}
But none of the alert boxes was called.
(I am referring to http://www.jstree.com/documentation of course)
ok I've found my mystake. One set class as 'jstree-draggable' on another div which will serve as the basis for cloning
Related
Preface:
I am aware that there is a duplicate question out there. I am posting it again because it has no answers (and it's from 4 years ago).
General description of what I want:
I want to be able to hide a DOM-element (adding Element.style.display = "none") before the DOM is loaded into the view.
What I've tried:
Other posts point to using a MutationObserver and running it on the document element.
To ensure that we are able to hide an element before the DOM is loaded, we are to run the script containing the MutationObserver as a content_script with "run_at":"document_start".
I did all of this, and I still see a flicker (the elements appear when I load a page and then quickly disappear).
What I'm trying to do:
There's a ul which contains some li with some text on the page I inject my content_script.js into. I populate my popup.html with <text, checkbox> pairs. If the checkbox is checked, the li containing said text is visible, else it is hidden. I want it to persist between refreshes, hence the use of storage.
Things work - but there's a flicker whenever I refresh the page. The elements are there, then they're gone. I don't want them to show up in the first place!
My code:
When I detect that the DOM elements I may remove have loaded, I generate an Object that indicates whether I should hide or keep visible that specific DOM element.
I then set its Element.style.display to none or block accordingly.
/**manifest.json
...
"content_scripts": [
{
"matches": [
"some_website_url"
],
"js": [
"content_script.js"
],
"run_at": "document_start"
}
]
...
*/
///content_script.js
const mutationObserver = new MutationObserver((mutations) => {
for (const { addedNodes } of mutations) {
for (const node of addedNodes) {
if (node.tagName) {
if (node.querySelector(potentially_hidden_element_selector)) {
chrome.storage.sync.get("courses", ({ courses }) => {
chrome.storage.sync.set({ "courses": generateCourseList(courses) }, () => {
const courseElements = Array.from(node.closest('ul').querySelectorAll('a[data-parent-key="mycourses"]'))
courseElements.forEach(courseElement => {
const courseName = getCourseName(courseElement)
const isVisible = courses[courseName]
updateCourseElementInSidebar(courseElement, isVisible)
})
})
})
// We found what we were looking for so stop searching
mutationObserver.disconnect()
}
}
}
}
})
mutationObserver.observe(document, { childList: true, subtree: true })
EDIT 1:
My generateCourseList method depends on the DOM elements I may try to hide - so I can't call the chrome.storage.set method before the DOM has loaded I think.
When I refresh the page, a list of courses eventually populates the DOM.
I then populate the storage's courses object based on these course elements' innerText properties. I set each of these elements' visibility to true or false based on one of two factors: if this course is already defined in the courses object, keep its visibility status, if it isn't, set it to true (visible by default).
I can't make certain DOM elements visible/hidden if I don't have reference to them though. So if I try to call generateCourseList before those specific DOM elements have loaded, I end up trying to retrieve all the course elements (document.querySelectorAll('a[data-parent-key="mycourses"]')) and get returned nothing. I end up setting courses in chrome.storage to nothing because of this chrome.storage.sync.set({ "courses": generateCourseList(courses) }....
EDIT 2:
Here is all of my code. I try to chrome.storage.sync.get as soon as I can, and I try to not depend on the result of chrome.storage.sync.set.
I try to delete the elements as soon as I can, but I'm having difficulty doing so. This is because I have difficulty knowing when the content I want to access (the course elements) have fully loaded. Previously, I was detecting when one course element was visible, and when it was, I assumed all were. This was a mistake. I was able to access the one courselement the moment it popped up, but sometimes only 4 of the 6 course elements were actually loaded. I can't hardcode this number, because it changes from person to person. I can't just tackle them one by one, because then I wouldn't know when to disconnect the MutationObserver. I used the debugger and tried to find what element is loaded soon after all 6 course elements are loaded, and that is the header#page-header.row element. I still get a flicker, though less noticeable than before.
Anything I can do to make it even less noticeable?
function start_mutation_observer() {
chrome.storage.sync.get({ 'savedCourses': {} }, ({ savedCourses }) => {
const observer = new MutationObserver((mutations) => {
for (const { addedNodes } of mutations) {
for (const node of addedNodes) {
// The page header gets updated AFTER the courseList is updated - so once it's in the page, we know the courseElements are too
if (document.querySelector('header#page-header.row')) {
observer.disconnect()
const generatedCourses = generateCourseList(savedCourses)
const courseElements = getCourseElements()
// Set visibility of course elements
courseElements.forEach(courseElement => {
const courseName = getCourseElementTextContent(courseElement);
const isShown = generatedCourses[courseName];
setCourseElementVisibility(courseElement, isShown);
});
chrome.storage.sync.set({ 'savedCourses': generatedCourses });
return
}
}
}
});
observer.observe(document, { childList: true, subtree: true });
// In case the content script has been injected when some of the DOM has already loaded
onMutation([{ addedNodes: [document.documentElement] }]);
});
}
function getCourseElements() {
const COURSE_ELEMENT_SELECTOR = 'ul > li > a[data-parent-key="mycourses"]'
return Array.from(document.querySelectorAll(COURSE_ELEMENT_SELECTOR))
}
function getCourseElementTextContent(courseElement) {
const COURSE_ELEMENT_TEXT_CONTAINER_SELECTOR = 'a[data-parent-key="mycourses"] > div > div > span.media-body'
return courseElement.querySelector(COURSE_ELEMENT_TEXT_CONTAINER_SELECTOR).textContent
}
function generateCourseList(savedCourses) {
// Turns [[a, b], [b,c]] into {a:b, b:c}
return Object.fromEntries(getCourseElements().map(courseElement => {
const courseName = getCourseElementTextContent(courseElement)
const isShown = savedCourses[courseName] ?? true
return [courseName, isShown]
}))
}
function setCourseElementVisibility(courseElement, isShown) {
if (isShown) {
courseElement.style.display = "block"
} else {
courseElement.style.display = "none"
}
}
start_mutation_observer()
EDIT 3:
I think it's as good as can be now. I only refresh the visibility of the course elements that were just loaded into the DOM. There's essentially no flicker now (there is a slight one, but its' the same amount of flickering without my extension).
Here is the code for the MutationObserver
function start_mutation_observer() {
let handledCourseElements = new Set()
chrome.storage.sync.get({ 'savedCourses': {} }, ({ savedCourses }) => {
const observer = new MutationObserver((mutations) => {
for (const { addedNodes } of mutations) {
for (const node of addedNodes) {
const courseElements = getCourseElements()
const courseElementsAdded = courseElements.length > handledCourseElements.size
// If a courseElement was added, update visibility of those that weren't already processed
if (courseElementsAdded) {
const generatedCourses = generateCourseList(savedCourses)
courseElements
.filter(courseElement => !handledCourseElements.has(courseElement))
.forEach(courseElement => {
const courseName = getCourseElementTextContent(courseElement)
const courseShouldBeVisible = generatedCourses[courseName];
setCourseElementVisibility(courseElement, courseShouldBeVisible);
handledCourseElements.add(courseElement)
})
}
// The page header gets updated AFTER the courseList is updated - so once it's in the page, we know the courseElements are too
if (document.querySelector('header#page-header.row')) {
observer.disconnect()
chrome.storage.sync.set({ 'savedCourses': generateCourseList(savedCourses) });
return
}
}
}
});
observer.observe(document, { childList: true, subtree: true });
// In case the content script has been injected when some of the DOM has already loaded
onMutation([{ addedNodes: [document.documentElement] }]);
});
}
Reading storage is slow and asynchronous, so you need to do it at the beginning:
chrome.storage.sync.get('courses', ({ courses }) => {
chrome.storage.sync.set({ 'courses': generateCourseList(courses) });
const observer = new MutationObserver(onMutation);
observer.observe(document, { childList: true, subtree: true });
onMutation([{addedNodes: [document.documentElement]}]);
function onMutation(mutations) {
for (const { addedNodes } of mutations) {
for (const node of addedNodes) {
if (node.tagName && node.querySelector(potentially_hidden_element_selector)) {
observer.disconnect();
processNode(node, courses);
}
}
}
}
});
function processNode(node, courses) {
const courseElements = Array.from(
node.closest('ul').querySelectorAll('a[data-parent-key="mycourses"]'));
courseElements.forEach(courseElement => {
const courseName = getCourseName(courseElement);
const isVisible = courses[courseName];
updateCourseElementInSidebar(courseElement, isVisible);
});
}
My first question why I cant get into 'check_node.jstree' event although I check a checkbox in tree..
And second. Here is my tree definition each time I click expand button which trigger 'before_open.jstree' event and refresh tree with new datas.. but after it rebuild tree it triggs the the event again and post to server.. how can I just refresh tree then stop the work.
$('#tree_2').jstree({
'plugins': ["checkbox","types","json_data" ,"ui"],
'core': {
"themes" : {
"responsive": true,
"icons":true
},
'data': [{}]
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
}
}).bind('check_node.jstree', function (e, data) {
debugger
alert("check_node.jstree")
}).bind('before_open.jstree', function (e, datap) {
$.ajax({
url: "../../Controller/ActiveDirectoryController.php5",
type: "POST",
dataType: "json",
data: datap.node.text,//selected node text
success: function (result) {
debugger
if(result.Objects.length>0)
{
passOpen=false;
treeData_ = prepareObjectsforTree(result.Objects);
resfreshJSTree(treeData_);
}
},
error: function (a, b, c) {
}
})
})
and rebuild jstree with response data:
function resfreshJSTree(treeDataa) {
$('#tree_2').jstree(true).settings.core.data = treeDataa;
$('#tree_2').jstree("refresh");
}
check_node.jstree will only fire if checkbox.tie_selection is set to false in your config. If it is not - listen for select_node.jstree (or changed.jstree).
As for the second question - do not implement lazy loading this way - please read the docs on lazy loading - that is not the way to achieve it.
In jsTree component available a ContextMenu plugin.
But it's available only when user clicked on specific node.
I need to add context menu by clicking on component's background (to add root nodes, for example).
Is it possible to attach a context menu plugin for background ?
Yes you can, but you need to define all actions you need to be available, as the defaults are related to a node, so they won't work (rename, delete, etc).
This will show a menu when the tree container is clicked and will show an option to create a root node:
$('#tree').on('contextmenu.jstree', function (e) {
e.preventDefault();
if($(e.target).is('#tree')) {
$(document).one("context_show.vakata.jstree", $.proxy(function (e, data) {
var cls = 'jstree-contextmenu jstree-default-contextmenu';
$(data.element).addClass(cls);
}, this));
$.vakata.context.show($(this), { 'x' : e.pageX, 'y' : e.pageY }, {
"create" : {
"separator_before" : false,
"separator_after" : false,
"_disabled" : false,
"label" : "Create",
"action" : function (data) {
var inst = $.jstree.reference(e.target);
inst.create_node(null, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); },0);
});
}
}
});
}
});
I want to show an explicit tooltip while drag-drop tree node inside treeview.
example: "Node 1 will be moved before/after/inside Node 2"
From move_node callback argument, we can get the position ("before/after/inside") but not from check_move callback (neither from prepare_move).
Tooltip should be displayed while drag-droping, so move_node is too late.
The same problem when drag-drop external object to treeview, the drag_check callback from dnd plugin has no information about the position (we just know the target node but not if it is before, after or inside).
In that case, even for drag_finish callback we don't have the information.
Is there somebody who can help me solving this issue ?
I just tested this and its working fine for me on prepare_move ...
.bind("prepare_move.jstree",function(event, data) {
console.log("o : " + data.rslt.o.attr("id"));
console.log("r : " + data.rslt.r.attr("id"));
console.log("p : " + data.rslt.p);
})
this is what is logged
o : item_3
r : item_2
p : inside
I am using JSTree v1.0RC2
Here what I use to do it with jQuery plugin jDialog (or you can replace it with a simple jAlert function):
.bind("move_node.jstree", function (e, data) {
var id = data.rslt.o.attr("id").replace("node_","");
var name = data.inst.get_text(data.rslt.obj);
jConfirm('Moving node name:' + name, 'dialog title'), function(answer) {
if (answer == true){
$.post("/js_trees/"+ id,
{
"_method" : "put",
"operation" : "moving_my_node",
"id" : data.rslt.o.attr("id").replace("node_",""),
"ref" : data.rslt.np.attr("id").replace("node_",""),
"position" : data.rslt.cp,
"title" : data.rslt.name,
"copy" : data.rslt.cy ? 1 : 0
},
function (r) {
if(!r.status) {
$.jstree.rollback(data.rlbk);
} else {
$(data.rslt.oc).attr("id", "node_" + r.id);
if(data.rslt.cy && oc.children("UL").length) {
data.inst.refresh(data.rslt.oc);
}
}
}
);
}else{
$.jstree.rollback(data.rlbk);
}
});
})
Often I find that I need to use jeditable on several areas each requiring different parameter settings.
For example I use jeditable with autosuggest input type, and then I need to pass different data sources to the different inputs.
I wanted to use just one instance of the editable plugin, and have tried to assign attr-values to the script, but obviously this does not work the way I'm approaching it..
I'm hoping someone can guide me a bit..
Essentially I would like to be able to set a jeditable parameter value based on the value of an ttribute of the dom element it is manipulating.
something like:
$('.editme').editable('savedata.php',{
loadurl : 'loaddata.php',
loaddata : { handle: $(this).attr('rel') }
});
then I could simply specify different load sources with:
<div id="fruits" class="editme" rel="myfruits">apples</div>
I didn't find the keyword this to work in this way..
How can I access the attributes of the dom element being manipulated dynamically for each jeditable binding?
here is another example of what I want to do:
authorsList = "".split(",");
// extend jeditable with autocomplete
$.editable.addInputType('autoc', {
element: function(settings, original) {
var input = $("<input />").autocomplete(settings.mdata, settings.autoc);
$(this).append(input);
return input; }
});
$('.editable.authors').editable('savedata.php',{
type : "autoc",
mdata : $(this).attr('rel'), // should hold the name 'authorsList'
onblur : 'ignore',
autoc : { multiple: true,
multipleSeparator: ',' },
loadurl : 'loaddata.php',
loadtype : 'POST',
loaddata : {handle: function(){ return eval($("#objhandle").val())}, lookuptype: 'mirror'},
submit : 'save',
cancel : 'cancel',
tooltip : "Click to edit",
style : "inherit",
cssclass : 'jedi',
id : "field",
name : "data",
submitdata : {
storetype: 'mirror',
handle: function(){return eval($("#objhandle").val())},
timestamp: function(){return eval($("#objtimestamp").val())}
}
});
Warning, totally untested code but something like following should work:
$('.editme').each(function() {
$(this).editable('savedata.php',{
loadurl : 'loaddata.php',
loaddata : { handle: $(this).attr('rel') }
});
});
This way the score of this should be correct when initializing Jeditable on the element.
this worked for me
$(this).data('rel)
and for the html
<div id="fruits" class="editme" data-rel="myfruits">apples</div>