Skip to content

Instantly share code, notes, and snippets.

@lipusz lipusz/aui-tree-node.js.diff Secret
Last active Dec 25, 2015

Embed
What would you like to do?
alloy-ui/2.0.x | Proposed fix for https://issues.liferay.com/browse/LPS-40574
diff --git a/src/aui-tree/js/aui-tree-node.js b/src/aui-tree/js/aui-tree-node.js
index 494d1d7..1ee0f27 100644
@@ -1205,8 +1210,9 @@ var TreeNodeIO = A.Component.create({
* Expand the current TreeNodeIO.
*
* @method expand
+ * @param {function} fn callback Optional.
*/
- expand: function() {
+ expand: function(fn) {
var instance = this;
var cache = instance.get(CACHE);
@@ -1231,6 +1237,10 @@ var TreeNodeIO = A.Component.create({
else {
A.TreeNodeIO.superclass.expand.apply(this, arguments);
}
+
+ if (fn) {
+ fn.call();
+ }
},
/**
diff --git a/src/aui-tree/js/aui-tree-view.js b/src/aui-tree/js/aui-tree-view.js
index 00dc266..18fdf25 100644
@@ -838,11 +838,11 @@ var TreeViewDD = A.Component.create({
}
else if (dropAction === APPEND) {
if (dropTreeNode && !dropTreeNode.isLeaf()) {
- dropTreeNode.appendChild(dragTreeNode);
-
if (!dropTreeNode.get(EXPANDED)) {
// expand node when drop a child on it
- dropTreeNode.expand();
+ dropTreeNode.expand(function() {
+ dropTreeNode.appendChild(dragTreeNode);
+ });
}
instance.bubbleEvent('dropAppend', output);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="http://cdn.alloyui.com/2.0.0pr7/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="http://cdn.alloyui.com/2.0.0pr7/aui/aui-min.js"></script>
</head>
<body>
<h1>AlloyUI - Tree</h1>
<div class="container pull-left">
<div class="row-fluid">
<div class="span6">
<h2>TreeView file with IO</h2>
<div id="treeio"></div>
</div>
</div>
</div>
<script>
YUI({ filter: 'raw' }).use('aui-tree', function(Y) {
var dragNode = new Y.TreeNodeTask({
alwaysShowHitArea: true,
children: [],
draggable: true,
expanded: false,
label: 'Drag',
leaf: false
});
var dropNode = new Y.TreeNodeTask({
alwaysShowHitArea: true,
children: [],
draggable: true,
expanded: false,
io: 'assets/solar-system.html',
label: 'Drop',
leaf: false
});
var treeViewDD = new Y.TreeViewDD({
boundingBox: '#treeio',
children: [dragNode, dropNode],
type: 'file'
}).render();
});
</script>
</body>
</html>
@blzaugg

This comment has been minimized.

Copy link

blzaugg commented Oct 9, 2013

I think you'd need to add to aui-tree-view.js.diff:

+                    }
+                    else {
+                        dropTreeNode.appendChild(dragTreeNode);
                     }

                     instance.bubbleEvent('dropAppend', output);
@marclundgren

This comment has been minimized.

Copy link

marclundgren commented Oct 9, 2013

Hi @blzaugg @lipusz

We have an opportunity to clean up and simplify some logic in aui-tree-view.js

_afterDropHit will append dragTreeNode to dropTreeNode if instance.dropAction === "append"

Who sets instance.dropAction to "append"?
answer: _appendState

Who calls _appendState?
answer: _updateNodeState

notice how instance._appendState(nodeContent) is wrapped in the conditional checks dropTreeNode && !dropTreeNode.isLeaf()

if (dropTreeNode && !dropTreeNode.isLeaf()) {

let's remove this redundancy either in _updateNodeState or _afterDropHit

@blzaugg

in your comment above, which if statement would this else block belong to?

@lipusz by inspection I don't see any negative affects of replacing the order of dropTreeNode.expand() and dropTreeNode.appendChild(dragTreeNode). Can you make the change and send a pull request if you feel like this is the proper fix?

@blzaugg

This comment has been minimized.

Copy link

blzaugg commented Oct 9, 2013

@marc, I added context to the diff.

@lipusz

This comment has been minimized.

Copy link
Owner Author

lipusz commented Oct 9, 2013

Hey @blzaugg, @marclundgren

I will create the AUI ticket tomorrow & send a pull. I wanted to create a very simple example (based on the existing "tree" demo) to demonstrate the bug in "poor" alloy, without categories and other stuffs.

As we (almost) always add descriptions to LPS tickets (like, "do this and this in the portal), it would also be nice to have for example, a simple JS/CSS example on every AUI ticket as well.

Well, see my https://gist.github.com/lipusz/0f9280029b303d469037#file-index-html
"dragNode", "dropNode" and "Solar System" nodes are loaded correctly, but the child nodes of solar are not. I cannot see any outgoing IO requests on the Network tab of Firebug. Nothing happens when I try to expand "solar". But when I change the 'url' to 'http://alloyui.com/io/data/content.html', I get "HTTP 405 Not allowed" :), which is more than nothing.

Can AUI/YUI IO handle requests that point to a local (file) resource at all? Or am I missing anything from the code?

My aim is to define lazy-loaded child nodes for the "dropNode".

Changing the value for the 'io' param to 'file://assets/solar-system.html' does not help. :-(

@lipusz

This comment has been minimized.

Copy link
Owner Author

lipusz commented Oct 9, 2013

Note: I use "/home/tibusz/git/liferay-portal/portal-web/docroot/html/js/aui/aui/aui-min.js" because right now I don't have every dependencies of alloy-ui (like nvm, grunt etc.) installed in order to build aui.

@blzaugg

This comment has been minimized.

Copy link

blzaugg commented Oct 9, 2013

@lipusz,

node, grunt, etc. are easy to get installed and building AUI yourself will help you as well as us: https://github.com/liferay/alloy-ui#setup

I'm not sure about the local file usage.

@lipusz

This comment has been minimized.

Copy link
Owner Author

lipusz commented Oct 9, 2013

I think, if aui-io does not support local file-based requests, we should update our demos. Still hoping it does...
I'll try to find external YUI examples. Somebody might have already achieved this. ;-)

About the project dependencies: yep, half of the packages are set in my linux, others are in my TODO queue. :-)

Will send email to keep you updated.

Thanks, Byran for helping me! +1

@lipusz

This comment has been minimized.

Copy link
Owner Author

lipusz commented Oct 9, 2013

Meanwhile (and this was the last for "today"... it's 00:45 AM here :)) I replaced 'assets/solar-system.html' with 'https://raw.github.com/liferay/alloy-ui/2.0.x/demos/tree/assets/solar-system.html'.

Now I can see an XHR in the network panel, and despite the status is "404 Not Found", the response contains the right content. Weird.

But I'm still unable to expand "solar".... :)

TBC

@marclundgren

This comment has been minimized.

Copy link

marclundgren commented Oct 9, 2013

@lipusz

This comment has been minimized.

Copy link
Owner Author

lipusz commented Oct 10, 2013

Hey @marclundgren,

That demo does not work either. I suspect this is a YUI limitation. Only plain XmlHttpRequest seems to work. Could anybody update those demos? They are totally useless in the current state.

Or blame me if I was wrong.

@lipusz

This comment has been minimized.

Copy link
Owner Author

lipusz commented Oct 10, 2013

Finally, I could manage to get it work:

  1. Copied demos/io under ${TOMCAT_HOME}/webapps
  2. Modified the links to aui-min.js & bootstrap.min.css to point to

Then, I navigated to http://localhost:6211/io/index.html (where 6211 represents 6.2.x :) )

Voila, it works! :-)

Maybe these steps are trivial for cores, shouldn't we update our docs to contain a step-by-step guide about how-to run demos?
Or at least add some "usage notes" into the affected index.html files.

@lipusz

This comment has been minimized.

Copy link
Owner Author

lipusz commented Oct 10, 2013

@natecavanaugh

This comment has been minimized.

Copy link

natecavanaugh commented Oct 15, 2013

Hi Tibor:

Can AUI/YUI IO handle requests that point to a local (file) resource at all?

This isn't an AUI/YUI thing, this is a browser security policy. In order to run any ajax call (even XMLHttpRequest), you cannot point to the file system.

I don't know if you're on a mac or linux, but if you are, and have python (macs do by default, though not sure about linux), you can easily make a quick server to test out a demo. Just navigate to the directory and run this command:
python -m SimpleHTTPServer 8000
Just navigate to http://localhost:8000 and you're good to go :)

If you're on Windows, you have my condolences ;) and you might find something like ampss to be useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.