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
  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                         ge.editNode = node;
  55                         ge.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             var tree = new Tree.TreePanel(viewEl, {
  79                 animate:true,
  80                 enableDD:true,
  81                 containerScroll: true,
  82                 ddGroup: 'organizerDD',
  83                 rootVisible:false
  84             });
  85             var root = new Tree.TreeNode({
  86                 text: 'Albums',
  87                 allowDrag:false,
  88                 allowDrop:false
  89             });
  90             tree.setRootNode(root);
  91
  92             root.appendChild(
  93                 new Tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}),
  94                 new Tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}),
  95                 new Tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false})
  96             );
  97
  98             tree.render();
  99             root.expand();
 100
 101             // add an inline editor for the nodes
 102             var ge = new Roo.tree.TreeEditor(tree, {
 103                 allowBlank:false,
 104                 blankText:'A name is required',
 105                 selectOnFocus:true
 106             });
 107
 108             // create the required templates
 109                 var tpl = new Roo.Template(
 110                         '<div class="thumb-wrap" id="{name}">' +
 111                         '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>' +
 112                         '<span>{shortName}</span></div>'
 113                 );
 114
 115                 var qtipTpl = new Roo.Template(
 116                     '<div class="image-tip"><img src="../view/{url}" align="left">'+
 117                         '<b>Image Name:</b>' +
 118                         '<span>{name}</span>' +
 119                         '<b>Size:</b>' +
 120                         '<span>{sizeString}</span></div>'
 121                 );
 122                 qtipTpl.compile();
 123
 124                 // initialize the View
 125                 var view = new Roo.JsonView(imgBody, tpl, {
 126                         multiSelect: true,
 127                         jsonRoot: 'images'
 128                 });
 129
 130                 var lookup = {};
 131
 132                 view.prepareData = function(data){
 133                 data.shortName = data.name.ellipse(15);
 134                 data.sizeString = (Math.round(((data.size*10) / 1024))/10) + " KB";
 135                 //data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
 136                 data.qtip = new String(qtipTpl.applyTemplate(data));
 137                 lookup[data.name] = data;
 138                 return data;
 139             };
 140
 141             var dragZone = new ImageDragZone(view, {containerScroll:true,
 142                 ddGroup: 'organizerDD'});
 143
 144             view.load({
 145                 url: '../view/get-images.php'
 146             });
 147
 148             var rz = new Roo.Resizable('layout', {
 149                 wrap:true,
 150                 pinned:true,
 151                 adjustments:[-6,-6],
 152                 minWidth:300
 153             });
 154             rz.on('resize', function(){
 155                 layout.layout();
 156             });
 157             rz.resizeTo(650, 350);
 158         }
 159     };
 160 }();
 161
 162 Roo.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
 163
 164 /**
 165  * Create a DragZone instance for our JsonView
 166  */
 167 ImageDragZone = function(view, config){
 168     this.view = view;
 169     ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
 170 };
 171 Roo.extend(ImageDragZone, Roo.dd.DragZone, {
 172     // We don't want to register our image elements, so let's
 173     // override the default registry lookup to fetch the image
 174     // from the event instead
 175     getDragData : function(e){
 176         e = Roo.EventObject.setEvent(e);
 177         var target = e.getTarget('.thumb-wrap');
 178         if(target){
 179             var view = this.view;
 180             if(!view.isSelected(target)){
 181                 view.select(target, e.ctrlKey);
 182             }
 183             var selNodes = view.getSelectedNodes();
 184             var dragData = {
 185                 nodes: selNodes
 186             };
 187             if(selNodes.length == 1){
 188                 dragData.ddel = target.firstChild.firstChild; // the img element
 189                 dragData.single = true;
 190             }else{
 191                 var div = document.createElement('div'); // create the multi element drag "ghost"
 192                 div.className = 'multi-proxy';
 193                 for(var i = 0, len = selNodes.length; i < len; i++){
 194                     div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true));
 195                     if((i+1) % 3 == 0){
 196                         div.appendChild(document.createElement('br'));
 197                     }
 198                 }
 199                 dragData.ddel = div;
 200                 dragData.multi = true;
 201             }
 202             return dragData;
 203         }
 204         return false;
 205     },
 206
 207     // this method is called by the TreeDropZone after a node drop
 208     // to get the new tree node (there are also other way, but this is easiest)
 209     getTreeNode : function(){
 210         var treeNodes = [];
 211         var nodeData = this.view.getNodeData(this.dragData.nodes);
 212         for(var i = 0, len = nodeData.length; i < len; i++){
 213             var data = nodeData[i];
 214             treeNodes.push(new Roo.tree.TreeNode({
 215                 text: data.name,
 216                 icon: data.url,
 217                 data: data,
 218                 leaf:true,
 219                 cls: 'image-node',
 220                 qtip: data.qtip
 221             }));
 222         }
 223         return treeNodes;
 224     },
 225
 226     // the default action is to "highlight" after a bad drop
 227     // but since an image can't be highlighted, let's frame it
 228     afterRepair:function(){
 229         for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
 230             Roo.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
 231         }
 232         this.dragging = false;
 233     },
 234
 235     // override the default repairXY with one offset for the margins and padding
 236     getRepairXY : function(e){
 237         if(!this.dragData.multi){
 238             var xy = Roo.Element.fly(this.dragData.ddel).getXY();
 239             xy[0]+=3;xy[1]+=3;
 240             return xy;
 241         }
 242         return false;
 243     }
 244 });
 245
 246 // Utility functions
 247
 248 String.prototype.ellipse = function(maxLength){
 249     if(this.length > maxLength){
 250         return this.substr(0, maxLength-3) + '...';
 251     }
 252     return this;
 253 };