summaryrefslogtreecommitdiff
path: root/swat/apps/qooxdoo-examples/test/Tree_6.html
diff options
context:
space:
mode:
Diffstat (limited to 'swat/apps/qooxdoo-examples/test/Tree_6.html')
-rw-r--r--swat/apps/qooxdoo-examples/test/Tree_6.html231
1 files changed, 231 insertions, 0 deletions
diff --git a/swat/apps/qooxdoo-examples/test/Tree_6.html b/swat/apps/qooxdoo-examples/test/Tree_6.html
new file mode 100644
index 0000000000..0a1e2b85fc
--- /dev/null
+++ b/swat/apps/qooxdoo-examples/test/Tree_6.html
@@ -0,0 +1,231 @@
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>qooxdoo &raquo; Demo</title>
+ <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
+ <!--[if IE]>
+ <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
+ <![endif]-->
+ <script type="text/javascript" src="../../script/qx.js"></script>
+</head>
+<body>
+ <script type="text/javascript" src="../../script/layout.js"></script>
+
+ <div id="demoDescription">
+ <p>Drag and Drop between trees and inside a tree.</p>
+ <p>Added support for positioned move/insert (not complete yet!)</p>
+ </div>
+
+ <script type="text/javascript">
+ qx.core.Init.getInstance().defineMain(function()
+ {
+ var vLastIndex = null;
+
+ function handleDragStart(e)
+ {
+ e.addData("qx.ui.tree.AbstractTreeElement", e.getCurrentTarget());
+ e.addAction("move");
+ e.startDrag();
+ };
+
+ function handleDragDrop(e)
+ {
+ var vType = e.getDropDataTypes()[0];
+ var vSource = e.getData(vType);
+ var vTarget = e.getCurrentTarget();
+
+ vSource.getTree().getManager().deselectAll();
+
+ // this.debug("Add At: " + vLastIndex);
+
+ vLastIndex == null ? vTarget.addAtEnd(vSource) : vTarget.addBefore(vSource, vLastIndex);
+ vLastIndex = null;
+
+ e.stopPropagation();
+ treeMarkerLine.setStyleProperty("display", "none");
+ };
+
+ function supportsDrop(vDragCache) {
+ return !vDragCache.sourceWidget.contains(this);
+ };
+
+ function handleDragOver(e)
+ {
+ var l = e.getTarget().getLabelObject();
+ l.setStyleProperty("textDecoration", "underline");
+ };
+
+ function handleDragOut(e)
+ {
+ var l = e.getTarget().getLabelObject();
+ l.removeStyleProperty("textDecoration");
+ };
+
+ function handleDragEnd(e)
+ {
+ vLastIndex = null;
+ treeMarkerLine.setStyleProperty("display", "none");
+ };
+
+ function handleDragMove(e)
+ {
+ vLastIndex = null;
+
+ var vTarget = e.getTarget();
+
+ if (!vTarget || !(vTarget instanceof qx.ui.tree.TreeFolder))
+ {
+ treeMarkerLine.setStyleProperty("display", "none");
+ return;
+ };
+
+ var vContainer = vTarget.getContainerObject();
+
+ if (!vContainer)
+ {
+ treeMarkerLine.setStyleProperty("display", "none");
+ return;
+ };
+
+ var vChildren = vContainer.getVisibleChildren();
+ var vChildrenLength = vChildren.length;
+ var vEventTop = e.getPageY();
+
+ for (var i=0, vChild, vTop; i<vChildrenLength; i++)
+ {
+ vChild = vChildren[i];
+
+ vTop = qx.dom.DomLocation.getPageBoxTop(vChild.getElement());
+ if ((vTop - vEventTop) > -4 && (vTop - vEventTop) < 4)
+ {
+ if (vEventTop > vTop && vChild.isFirstChild()) {
+ continue;
+ };
+
+ treeMarkerLine._applyRuntimeTop(vTop+1);
+ treeMarkerLine._applyRuntimeLeft(QxDom.getComputedPageBoxLeft(vChild.getLabelObject().getElement()) - 20);
+
+ treeMarkerLine.removeStyleProperty("display");
+
+ // this.debug("Index: " + vLastIndex + " :: " + vEventTop + " <> " + vTop);
+ vLastIndex = vChild;
+
+ return;
+ };
+ };
+
+ treeMarkerLine.setStyleProperty("display", "none");
+ };
+
+
+
+ var treeMarkerLine = new qx.ui.basic.Terminator;
+
+ treeMarkerLine.setHeight(2);
+ treeMarkerLine.setBackgroundColor("#335EA8");
+ treeMarkerLine.setWidth(20);
+ treeMarkerLine.setZIndex(1e7);
+ treeMarkerLine.setAnonymous(true);
+ treeMarkerLine.setStyleProperty("display", "none");
+
+ qx.ui.core.ClientDocument.getInstance().add(treeMarkerLine);
+
+
+
+ var treeSource = new qx.ui.tree.Tree("Source");
+
+ with(treeSource)
+ {
+ setBackgroundColor(255);
+ setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
+ setOverflow("scrollY");
+
+ setHeight(null);
+ setTop(48);
+ setLeft(20);
+ setWidth(200);
+ setBottom(48);
+
+ addEventListener("dragdrop", handleDragDrop);
+ addEventListener("dragover", handleDragOver);
+ addEventListener("dragout", handleDragOut);
+ addEventListener("dragmove", handleDragMove);
+
+ setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
+ };
+
+ qx.ui.core.ClientDocument.getInstance().add(treeSource);
+
+ for (var i=1, f; i<3; i++)
+ {
+ f = new qx.ui.tree.TreeFolder("Folder " + i);
+
+ f.addEventListener("dragstart", handleDragStart);
+ f.addEventListener("dragdrop", handleDragDrop);
+ f.addEventListener("dragover", handleDragOver);
+ f.addEventListener("dragout", handleDragOut);
+ f.addEventListener("dragend", handleDragEnd);
+
+ f.setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
+ f.supportsDrop = supportsDrop;
+
+ treeSource.add(f);
+
+ for (var j=1, g; j<6; j++)
+ {
+ g = new qx.ui.tree.TreeFolder("Subfolder " + j);
+
+ g.addEventListener("dragstart", handleDragStart);
+ g.addEventListener("dragdrop", handleDragDrop);
+ g.addEventListener("dragover", handleDragOver);
+ g.addEventListener("dragout", handleDragOut);
+ g.addEventListener("dragend", handleDragEnd);
+
+ g.setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
+ g.supportsDrop = supportsDrop;
+
+ f.add(g);
+
+ for (var k=1, h; k<9; k++)
+ {
+ h = new qx.ui.tree.TreeFile("File " + k);
+
+ h.addEventListener("dragstart", handleDragStart);
+
+ g.add(h);
+ };
+ };
+ };
+
+
+
+
+
+
+ var treeDest = new qx.ui.tree.Tree("Dest");
+
+ with(treeDest)
+ {
+ setBackgroundColor(255);
+ setBorder(qx.renderer.border.BorderPresets.getInstance().thinInset);
+ setOverflow("scrollY");
+
+ setHeight(null);
+ setTop(48);
+ setLeft(240);
+ setWidth(200);
+ setBottom(48);
+
+ addEventListener("dragdrop", handleDragDrop);
+ addEventListener("dragover", handleDragOver);
+ addEventListener("dragout", handleDragOut);
+ addEventListener("dragmove", handleDragMove);
+
+ setDropDataTypes(["qx.ui.tree.AbstractTreeElement"]);
+ };
+
+ qx.ui.core.ClientDocument.getInstance().add(treeDest);
+ });
+ </script>
+</body>
+</html>