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