* Fork - LGPL
* <script type="text/javascript">
*/
- \r
-Roo.tree.TreeNodeUI.prototype.initEvents =\r
-Roo.tree.TreeNodeUI.prototype.initEvents.createSequence(function(){\r
- if(this.node.attributes.tipCfg){\r
- var o = this.node.attributes.tipCfg;\r
- o.target = Roo.id(this.textNode);\r
- Roo.QuickTips.register(o);\r
- }\r
-});\r
-\r
-var TreeTest = function(){\r
- // shorthand\r
- var Tree = Roo.tree;\r
- var newIndex = 3;\r
- \r
- return {\r
- init : function(){\r
- Roo.QuickTips.init();\r
- var layout = new Roo.BorderLayout('layout', {\r
- west: {\r
- initialSize:200,\r
- split:true,\r
- titlebar:true\r
- },\r
- center: {\r
- alwaysShowTabs:true,\r
- tabPosition:'top'\r
- }\r
- });\r
- \r
- var albums = layout.getEl().createChild({tag:'div', id:'albums'});\r
- var tb = new Roo.Toolbar(albums.createChild({tag:'div'}));\r
- tb.addButton({\r
- text: 'New Album',\r
- cls: 'x-btn-text-icon album-btn',\r
- handler: function(){\r
- var node = root.appendChild(new Tree.TreeNode({\r
- text:'Album ' + (++newIndex), \r
- cls:'album-node', \r
- allowDrag:false\r
- }));\r
- tree.getSelectionModel().select(node);\r
- setTimeout(function(){\r
- ge.editNode = node;\r
- ge.startEdit(node.ui.textNode);\r
- }, 10);\r
- }\r
- });\r
- var viewEl = albums.createChild({tag:'div', id:'folders'});\r
- \r
- var folders = layout.add('west', new Roo.ContentPanel(albums, {\r
- title:'My Albums', \r
- fitToFrame:true,\r
- autoScroll:true,\r
- autoCreate:true,\r
- toolbar: tb,\r
- resizeEl:viewEl\r
- }));\r
- \r
- var images = layout.add('center', new Roo.ContentPanel('images', {\r
- title:'My Images', \r
- fitToFrame:true,\r
- autoScroll:true,\r
- autoCreate:true\r
- }));\r
- var imgBody = images.getEl();\r
- \r
- var tree = new Tree.TreePanel(viewEl, {\r
- animate:true, \r
- enableDD:true,\r
- containerScroll: true,\r
- ddGroup: 'organizerDD',\r
- rootVisible:false\r
- });\r
- var root = new Tree.TreeNode({\r
- text: 'Albums', \r
- allowDrag:false,\r
- allowDrop:false\r
- });\r
- tree.setRootNode(root);\r
- \r
- root.appendChild(\r
- new Tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),\r
- new Tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),\r
- new Tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})\r
- );\r
- \r
- tree.render();\r
- root.expand();\r
- \r
- // add an inline editor for the nodes\r
- var ge = new Roo.tree.TreeEditor(tree, {\r
- allowBlank:false,\r
- blankText:'A name is required',\r
- selectOnFocus:true\r
- });\r
- \r
- // create the required templates\r
- var tpl = new Roo.Template(\r
- '<div class="thumb-wrap" id="{name}">' +\r
- '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>' +\r
- '<span>{shortName}</span></div>'\r
- );\r
- \r
- var qtipTpl = new Roo.Template(\r
- '<div class="image-tip"><img src="../view/{url}" align="left">'+\r
- '<b>Image Name:</b>' +\r
- '<span>{name}</span>' +\r
- '<b>Size:</b>' +\r
- '<span>{sizeString}</span></div>'\r
- );\r
- qtipTpl.compile(); \r
- \r
- // initialize the View \r
- var view = new Roo.JsonView(imgBody, tpl, {\r
- multiSelect: true,\r
- jsonRoot: 'images'\r
- });\r
- \r
- var lookup = {};\r
- \r
- view.prepareData = function(data){\r
- data.shortName = data.name.ellipse(15);\r
- data.sizeString = (Math.round(((data.size*10) / 1024))/10) + " KB";\r
- //data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");\r
- data.qtip = new String(qtipTpl.applyTemplate(data));\r
- lookup[data.name] = data;\r
- return data;\r
- };\r
- \r
- var dragZone = new ImageDragZone(view, {containerScroll:true,\r
- ddGroup: 'organizerDD'});\r
- \r
- view.load({\r
- url: '../view/get-images.php'\r
- });\r
- \r
- var rz = new Roo.Resizable('layout', {\r
- wrap:true, \r
- pinned:true, \r
- adjustments:[-6,-6],\r
- minWidth:300\r
- });\r
- rz.on('resize', function(){\r
- layout.layout();\r
- });\r
- rz.resizeTo(650, 350);\r
- }\r
- };\r
-}();\r
-\r
-Roo.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);\r
-\r
-/**\r
- * Create a DragZone instance for our JsonView\r
- */\r
-ImageDragZone = function(view, config){\r
- this.view = view;\r
- ImageDragZone.superclass.constructor.call(this, view.getEl(), config);\r
-};\r
-Roo.extend(ImageDragZone, Roo.dd.DragZone, {\r
- // We don't want to register our image elements, so let's \r
- // override the default registry lookup to fetch the image \r
- // from the event instead\r
- getDragData : function(e){\r
- e = Roo.EventObject.setEvent(e);\r
- var target = e.getTarget('.thumb-wrap');\r
- if(target){\r
- var view = this.view;\r
- if(!view.isSelected(target)){\r
- view.select(target, e.ctrlKey);\r
- }\r
- var selNodes = view.getSelectedNodes();\r
- var dragData = {\r
- nodes: selNodes\r
- };\r
- if(selNodes.length == 1){\r
- dragData.ddel = target.firstChild.firstChild; // the img element\r
- dragData.single = true;\r
- }else{\r
- var div = document.createElement('div'); // create the multi element drag "ghost"\r
- div.className = 'multi-proxy';\r
- for(var i = 0, len = selNodes.length; i < len; i++){\r
- div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true));\r
- if((i+1) % 3 == 0){\r
- div.appendChild(document.createElement('br'));\r
- }\r
- }\r
- dragData.ddel = div;\r
- dragData.multi = true;\r
- }\r
- return dragData;\r
- }\r
- return false;\r
- },\r
- \r
- // this method is called by the TreeDropZone after a node drop \r
- // to get the new tree node (there are also other way, but this is easiest)\r
- getTreeNode : function(){\r
- var treeNodes = [];\r
- var nodeData = this.view.getNodeData(this.dragData.nodes);\r
- for(var i = 0, len = nodeData.length; i < len; i++){\r
- var data = nodeData[i];\r
- treeNodes.push(new Roo.tree.TreeNode({\r
- text: data.name,\r
- icon: data.url,\r
- data: data,\r
- leaf:true,\r
- cls: 'image-node',\r
- qtip: data.qtip\r
- }));\r
- }\r
- return treeNodes;\r
- },\r
- \r
- // the default action is to "highlight" after a bad drop\r
- // but since an image can't be highlighted, let's frame it \r
- afterRepair:function(){\r
- for(var i = 0, len = this.dragData.nodes.length; i < len; i++){\r
- Roo.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);\r
- }\r
- this.dragging = false; \r
- },\r
- \r
- // override the default repairXY with one offset for the margins and padding\r
- getRepairXY : function(e){\r
- if(!this.dragData.multi){\r
- var xy = Roo.Element.fly(this.dragData.ddel).getXY();\r
- xy[0]+=3;xy[1]+=3;\r
- return xy;\r
- }\r
- return false;\r
- }\r
-});\r
-\r
-// Utility functions\r
-\r
-String.prototype.ellipse = function(maxLength){\r
- if(this.length > maxLength){\r
- return this.substr(0, maxLength-3) + '...';\r
- }\r
- return this;\r
+
+Roo.tree.TreeNodeUI.prototype.initEvents =
+Roo.tree.TreeNodeUI.prototype.initEvents.createSequence(function(){
+ if(this.node.attributes.tipCfg){
+ var o = this.node.attributes.tipCfg;
+ o.target = Roo.id(this.textNode);
+ Roo.QuickTips.register(o);
+ }
+});
+
+var TreeTest = function(){
+ // shorthand
+ var Tree = Roo.tree;
+ var newIndex = 3;
+
+ return {
+ init : function(){
+ Roo.QuickTips.init();
+ var layout = new Roo.BorderLayout('layout', {
+ west: {
+ initialSize:200,
+ split:true,
+ titlebar:true
+ },
+ center: {
+ alwaysShowTabs:true,
+ tabPosition:'top'
+ }
+ });
+
+ var albums = layout.getEl().createChild({tag:'div', id:'albums'});
+ var tb = new Roo.Toolbar(albums.createChild({tag:'div'}));
+ tb.addButton({
+ text: 'New Album',
+ cls: 'x-btn-text-icon album-btn',
+ handler: function(){
+ var node = root.appendChild(new Tree.TreeNode({
+ text:'Album ' + (++newIndex),
+ cls:'album-node',
+ allowDrag:false
+ }));
+ tree.getSelectionModel().select(node);
+ setTimeout(function(){
+ ge.editNode = node;
+ ge.startEdit(node.ui.textNode);
+ }, 10);
+ }
+ });
+ var viewEl = albums.createChild({tag:'div', id:'folders'});
+
+ var folders = layout.add('west', new Roo.ContentPanel(albums, {
+ title:'My Albums',
+ fitToFrame:true,
+ autoScroll:true,
+ autoCreate:true,
+ toolbar: tb,
+ resizeEl:viewEl
+ }));
+
+ var images = layout.add('center', new Roo.ContentPanel('images', {
+ title:'My Images',
+ fitToFrame:true,
+ autoScroll:true,
+ autoCreate:true
+ }));
+ var imgBody = images.getEl();
+
+ var tree = new Tree.TreePanel(viewEl, {
+ animate:true,
+ enableDD:true,
+ containerScroll: true,
+ ddGroup: 'organizerDD',
+ rootVisible:false
+ });
+ var root = new Tree.TreeNode({
+ text: 'Albums',
+ allowDrag:false,
+ allowDrop:false
+ });
+ tree.setRootNode(root);
+
+ root.appendChild(
+ new Tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),
+ new Tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),
+ new Tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})
+ );
+
+ tree.render();
+ root.expand();
+
+ // add an inline editor for the nodes
+ var ge = new Roo.tree.TreeEditor(tree, {
+ allowBlank:false,
+ blankText:'A name is required',
+ selectOnFocus:true
+ });
+
+ // create the required templates
+ var tpl = new Roo.Template(
+ '<div class="thumb-wrap" id="{name}">' +
+ '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>' +
+ '<span>{shortName}</span></div>'
+ );
+
+ var qtipTpl = new Roo.Template(
+ '<div class="image-tip"><img src="../view/{url}" align="left">'+
+ '<b>Image Name:</b>' +
+ '<span>{name}</span>' +
+ '<b>Size:</b>' +
+ '<span>{sizeString}</span></div>'
+ );
+ qtipTpl.compile();
+
+ // initialize the View
+ var view = new Roo.JsonView(imgBody, tpl, {
+ multiSelect: true,
+ jsonRoot: 'images'
+ });
+
+ var lookup = {};
+
+ view.prepareData = function(data){
+ data.shortName = data.name.ellipse(15);
+ data.sizeString = (Math.round(((data.size*10) / 1024))/10) + " KB";
+ //data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
+ data.qtip = new String(qtipTpl.applyTemplate(data));
+ lookup[data.name] = data;
+ return data;
+ };
+
+ var dragZone = new ImageDragZone(view, {containerScroll:true,
+ ddGroup: 'organizerDD'});
+
+ view.load({
+ url: '../view/get-images.php'
+ });
+
+ var rz = new Roo.Resizable('layout', {
+ wrap:true,
+ pinned:true,
+ adjustments:[-6,-6],
+ minWidth:300
+ });
+ rz.on('resize', function(){
+ layout.layout();
+ });
+ rz.resizeTo(650, 350);
+ }
+ };
+}();
+
+Roo.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
+
+/**
+ * Create a DragZone instance for our JsonView
+ */
+ImageDragZone = function(view, config){
+ this.view = view;
+ ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
+};
+Roo.extend(ImageDragZone, Roo.dd.DragZone, {
+ // We don't want to register our image elements, so let's
+ // override the default registry lookup to fetch the image
+ // from the event instead
+ getDragData : function(e){
+ e = Roo.EventObject.setEvent(e);
+ var target = e.getTarget('.thumb-wrap');
+ if(target){
+ var view = this.view;
+ if(!view.isSelected(target)){
+ view.select(target, e.ctrlKey);
+ }
+ var selNodes = view.getSelectedNodes();
+ var dragData = {
+ nodes: selNodes
+ };
+ if(selNodes.length == 1){
+ dragData.ddel = target.firstChild.firstChild; // the img element
+ dragData.single = true;
+ }else{
+ var div = document.createElement('div'); // create the multi element drag "ghost"
+ div.className = 'multi-proxy';
+ for(var i = 0, len = selNodes.length; i < len; i++){
+ div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true));
+ if((i+1) % 3 == 0){
+ div.appendChild(document.createElement('br'));
+ }
+ }
+ dragData.ddel = div;
+ dragData.multi = true;
+ }
+ return dragData;
+ }
+ return false;
+ },
+
+ // this method is called by the TreeDropZone after a node drop
+ // to get the new tree node (there are also other way, but this is easiest)
+ getTreeNode : function(){
+ var treeNodes = [];
+ var nodeData = this.view.getNodeData(this.dragData.nodes);
+ for(var i = 0, len = nodeData.length; i < len; i++){
+ var data = nodeData[i];
+ treeNodes.push(new Roo.tree.TreeNode({
+ text: data.name,
+ icon: data.url,
+ data: data,
+ leaf:true,
+ cls: 'image-node',
+ qtip: data.qtip
+ }));
+ }
+ return treeNodes;
+ },
+
+ // the default action is to "highlight" after a bad drop
+ // but since an image can't be highlighted, let's frame it
+ afterRepair:function(){
+ for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
+ Roo.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
+ }
+ this.dragging = false;
+ },
+
+ // override the default repairXY with one offset for the margins and padding
+ getRepairXY : function(e){
+ if(!this.dragData.multi){
+ var xy = Roo.Element.fly(this.dragData.ddel).getXY();
+ xy[0]+=3;xy[1]+=3;
+ return xy;
+ }
+ return false;
+ }
+});
+
+// Utility functions
+
+String.prototype.ellipse = function(maxLength){
+ if(this.length > maxLength){
+ return this.substr(0, maxLength-3) + '...';
+ }
+ return this;
};
\ No newline at end of file
projects / roojs1 / commitdiff