git.roojs.org Git - roojs1/blob - examples/tree/organizer.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11  \r
  12 Roo.tree.TreeNodeUI.prototype.initEvents =\r
  13 Roo.tree.TreeNodeUI.prototype.initEvents.createSequence(function(){\r
  14       if(this.node.attributes.tipCfg){\r
  15           var o = this.node.attributes.tipCfg;\r
  16           o.target = Roo.id(this.textNode);\r
  17           Roo.QuickTips.register(o);\r
  18       }\r
  19 });\r
  20 \r
  21 var TreeTest = function(){\r
  22     // shorthand\r
  23     var Tree = Roo.tree;\r
  24     var newIndex = 3;\r
  25     \r
  26     return {\r
  27         init : function(){\r
  28             Roo.QuickTips.init();\r
  29             var layout = new Roo.BorderLayout('layout', {\r
  30                 west: {\r
  31                     initialSize:200,\r
  32                     split:true,\r
  33                     titlebar:true\r
  34                 },\r
  35                 center: {\r
  36                     alwaysShowTabs:true,\r
  37                     tabPosition:'top'\r
  38                 }\r
  39             });\r
  40             \r
  41             var albums = layout.getEl().createChild({tag:'div', id:'albums'});\r
  42             var tb = new Roo.Toolbar(albums.createChild({tag:'div'}));\r
  43             tb.addButton({\r
  44                 text: 'New Album',\r
  45                 cls: 'x-btn-text-icon album-btn',\r
  46                 handler: function(){\r
  47                     var node = root.appendChild(new Tree.TreeNode({\r
  48                         text:'Album ' + (++newIndex), \r
  49                         cls:'album-node', \r
  50                         allowDrag:false\r
  51                     }));\r
  52                     tree.getSelectionModel().select(node);\r
  53                     setTimeout(function(){\r
  54                         ge.editNode = node;\r
  55                         ge.startEdit(node.ui.textNode);\r
  56                     }, 10);\r
  57                 }\r
  58             });\r
  59             var viewEl = albums.createChild({tag:'div', id:'folders'});\r
  60             \r
  61             var folders = layout.add('west', new Roo.ContentPanel(albums, {\r
  62                 title:'My Albums', \r
  63                 fitToFrame:true,\r
  64                 autoScroll:true,\r
  65                 autoCreate:true,\r
  66                 toolbar: tb,\r
  67                 resizeEl:viewEl\r
  68             }));\r
  69             \r
  70             var images = layout.add('center', new Roo.ContentPanel('images', {\r
  71                 title:'My Images', \r
  72                 fitToFrame:true,\r
  73                 autoScroll:true,\r
  74                 autoCreate:true\r
  75             }));\r
  76             var imgBody = images.getEl();\r
  77             \r
  78             var tree = new Tree.TreePanel(viewEl, {\r
  79                 animate:true, \r
  80                 enableDD:true,\r
  81                 containerScroll: true,\r
  82                 ddGroup: 'organizerDD',\r
  83                 rootVisible:false\r
  84             });\r
  85             var root = new Tree.TreeNode({\r
  86                 text: 'Albums', \r
  87                 allowDrag:false,\r
  88                 allowDrop:false\r
  89             });\r
  90             tree.setRootNode(root);\r
  91             \r
  92             root.appendChild(\r
  93                 new Tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),\r
  94                 new Tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),\r
  95                 new Tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})\r
  96             );\r
  97             \r
  98             tree.render();\r
  99             root.expand();\r
 100             \r
 101             // add an inline editor for the nodes\r
 102             var ge = new Roo.tree.TreeEditor(tree, {\r
 103                 allowBlank:false,\r
 104                 blankText:'A name is required',\r
 105                 selectOnFocus:true\r
 106             });\r
 107             \r
 108             // create the required templates\r
 109                 var tpl = new Roo.Template(\r
 110                         '<div class="thumb-wrap" id="{name}">' +\r
 111                         '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>' +\r
 112                         '<span>{shortName}</span></div>'\r
 113                 );\r
 114                 \r
 115                 var qtipTpl = new Roo.Template(\r
 116                     '<div class="image-tip"><img src="../view/{url}" align="left">'+\r
 117                         '<b>Image Name:</b>' +\r
 118                         '<span>{name}</span>' +\r
 119                         '<b>Size:</b>' +\r
 120                         '<span>{sizeString}</span></div>'\r
 121                 );\r
 122                 qtipTpl.compile();      \r
 123                 \r
 124                 // initialize the View          \r
 125                 var view = new Roo.JsonView(imgBody, tpl, {\r
 126                         multiSelect: true,\r
 127                         jsonRoot: 'images'\r
 128                 });\r
 129                 \r
 130                 var lookup = {};\r
 131                 \r
 132                 view.prepareData = function(data){\r
 133                 data.shortName = data.name.ellipse(15);\r
 134                 data.sizeString = (Math.round(((data.size*10) / 1024))/10) + " KB";\r
 135                 //data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");\r
 136                 data.qtip = new String(qtipTpl.applyTemplate(data));\r
 137                 lookup[data.name] = data;\r
 138                 return data;\r
 139             };\r
 140             \r
 141             var dragZone = new ImageDragZone(view, {containerScroll:true,\r
 142                 ddGroup: 'organizerDD'});\r
 143             \r
 144             view.load({\r
 145                 url: '../view/get-images.php'\r
 146             });\r
 147             \r
 148             var rz = new Roo.Resizable('layout', {\r
 149                 wrap:true, \r
 150                 pinned:true, \r
 151                 adjustments:[-6,-6],\r
 152                 minWidth:300\r
 153             });\r
 154             rz.on('resize', function(){\r
 155                 layout.layout();\r
 156             });\r
 157             rz.resizeTo(650, 350);\r
 158         }\r
 159     };\r
 160 }();\r
 161 \r
 162 Roo.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);\r
 163 \r
 164 /**\r
 165  * Create a DragZone instance for our JsonView\r
 166  */\r
 167 ImageDragZone = function(view, config){\r
 168     this.view = view;\r
 169     ImageDragZone.superclass.constructor.call(this, view.getEl(), config);\r
 170 };\r
 171 Roo.extend(ImageDragZone, Roo.dd.DragZone, {\r
 172     // We don't want to register our image elements, so let's \r
 173     // override the default registry lookup to fetch the image \r
 174     // from the event instead\r
 175     getDragData : function(e){\r
 176         e = Roo.EventObject.setEvent(e);\r
 177         var target = e.getTarget('.thumb-wrap');\r
 178         if(target){\r
 179             var view = this.view;\r
 180             if(!view.isSelected(target)){\r
 181                 view.select(target, e.ctrlKey);\r
 182             }\r
 183             var selNodes = view.getSelectedNodes();\r
 184             var dragData = {\r
 185                 nodes: selNodes\r
 186             };\r
 187             if(selNodes.length == 1){\r
 188                 dragData.ddel = target.firstChild.firstChild; // the img element\r
 189                 dragData.single = true;\r
 190             }else{\r
 191                 var div = document.createElement('div'); // create the multi element drag "ghost"\r
 192                 div.className = 'multi-proxy';\r
 193                 for(var i = 0, len = selNodes.length; i < len; i++){\r
 194                     div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true));\r
 195                     if((i+1) % 3 == 0){\r
 196                         div.appendChild(document.createElement('br'));\r
 197                     }\r
 198                 }\r
 199                 dragData.ddel = div;\r
 200                 dragData.multi = true;\r
 201             }\r
 202             return dragData;\r
 203         }\r
 204         return false;\r
 205     },\r
 206     \r
 207     // this method is called by the TreeDropZone after a node drop \r
 208     // to get the new tree node (there are also other way, but this is easiest)\r
 209     getTreeNode : function(){\r
 210         var treeNodes = [];\r
 211         var nodeData = this.view.getNodeData(this.dragData.nodes);\r
 212         for(var i = 0, len = nodeData.length; i < len; i++){\r
 213             var data = nodeData[i];\r
 214             treeNodes.push(new Roo.tree.TreeNode({\r
 215                 text: data.name,\r
 216                 icon: data.url,\r
 217                 data: data,\r
 218                 leaf:true,\r
 219                 cls: 'image-node',\r
 220                 qtip: data.qtip\r
 221             }));\r
 222         }\r
 223         return treeNodes;\r
 224     },\r
 225     \r
 226     // the default action is to "highlight" after a bad drop\r
 227     // but since an image can't be highlighted, let's frame it \r
 228     afterRepair:function(){\r
 229         for(var i = 0, len = this.dragData.nodes.length; i < len; i++){\r
 230             Roo.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);\r
 231         }\r
 232         this.dragging = false;    \r
 233     },\r
 234     \r
 235     // override the default repairXY with one offset for the margins and padding\r
 236     getRepairXY : function(e){\r
 237         if(!this.dragData.multi){\r
 238             var xy = Roo.Element.fly(this.dragData.ddel).getXY();\r
 239             xy[0]+=3;xy[1]+=3;\r
 240             return xy;\r
 241         }\r
 242         return false;\r
 243     }\r
 244 });\r
 245 \r
 246 // Utility functions\r
 247 \r
 248 String.prototype.ellipse = function(maxLength){\r
 249     if(this.length > maxLength){\r
 250         return this.substr(0, maxLength-3) + '...';\r
 251     }\r
 252     return this;\r
 253 };