Skip to content

Instantly share code, notes, and snippets.

@lipusz

lipusz/aui-tree-node.js.diff Secret

Last active December 25, 2015 02:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lipusz/0f9280029b303d469037 to your computer and use it in GitHub Desktop.
Save lipusz/0f9280029b303d469037 to your computer and use it in GitHub Desktop.
Download ZIP
alloy-ui/2.0.x | Proposed fix for https://issues.liferay.com/browse/LPS-40574
Raw
aui-tree-node.js.diff
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();
+ }
},
/**
Raw
aui-tree-view.js.diff
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);
Raw
index.html
<!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
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
Copy link

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
Copy link

blzaugg commented Oct 9, 2013

@marc, I added context to the diff.

@lipusz
Copy link
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
Copy link
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
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
Copy link
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
Copy link
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
Copy link

io-request can locate local storage: https://github.com/liferay/alloy-ui/blob/master/demos/io/index.html

@lipusz
Copy link
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
Copy link
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
Copy link
Author

lipusz commented Oct 10, 2013

See: https://issues.liferay.com/browse/AUI-1014

@natecavanaugh
Copy link

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