1 /**
  2  * An object for selecting toolsets.
  3  * @extends Monk.component.Component
  4  * @author Andrew
  5  */
  6 
  7 Monk.component.ToolsetSelector = function(args) {
  8 
  9     this.toolsets = feature.toolsets;
 10     
 11     this.panel = new Ext.Panel({
 12         layout: 'column',
 13         border: false,
 14         items: [{
 15             title: '',
 16             columnWidth: 0.25,
 17             border: false,
 18             html: '<h2>create or edit toolsets</h2>'+ 
 19             '<div id="toolset-new" class="draggable-tool">'+
 20             '<img src="resources/images/toolsets/Toolset-default.gif" alt="new toolset" title="new toolset"/>'+
 21             '<span style="float: left; clear: left;">new toolset</span>'+
 22             '</div>'
 23         },{
 24             title: '',
 25             columnWidth: 0.25,
 26             border: false,
 27             html: '<div id="toolset-drag-here">'+
 28             "<h2>TO START<br />drag n' drop a toolset here</h2>"+
 29             '</div>'
 30         },{
 31             title: '',
 32             columnWidth: 0.5,
 33             border: false,
 34             html: '<h2>or get started with one of our toolsets</h2>'+this.getToolsetElements()
 35         }]
 36     });
 37     
 38     // function to call after panel is rendered
 39     this.afterRenderFirstTime = function() {
 40         this.initializeDragDrop();
 41     } 
 42 
 43     Monk.component.ToolsetSelector.superclass.constructor.call(this, args);
 44 }
 45 
 46 Workbench.extend(Monk.component.ToolsetSelector, Monk.component.Component, {
 47     
 48     id: 'toolset-selector',
 49     label : "Toolsets",
 50     "window": this.window,
 51     
 52     getToolsetElements : function() {
 53         var toolsetHTML = '<div style="float: left; width: 100%; height: 100%;">';
 54         
 55         var toolsetTemplate = new Ext.Template(
 56             '<div id="{id}" class="draggable-tool">',
 57                 '<img style="float: left;" src="{icon}" alt="{label}" title="{label}"/>',
 58                 '<span style="float: left; clear: left;">{label}</span>',
 59             '</div>'
 60         );
 61         
 62         // loop starts at 1 since 0 is the new toolset
 63         for (var i = 1; i < this.toolsets.length; i++) {
 64             toolsetHTML += toolsetTemplate.apply({id: this.toolsets[i].id, icon: this.toolsets[i].icon, label: this.toolsets[i].label});
 65         }
 66         
 67         toolsetHTML += '</div>';
 68         
 69         return toolsetHTML;
 70     },
 71     
 72     /**
 73      * Called when a toolset gets dropped on the 'toolset-drag-here' box.
 74      * @param {Object} selectedToolsetEl
 75      */
 76     toolsetSelected : function(selectedToolsetEl) {
 77         // get the tools associated with this toolset
 78         var tools = [];
 79         var label = "";
 80         for (var i = 0; i < this.toolsets.length; i++) {
 81             var toolset = this.toolsets[i];
 82             if (toolset.id == selectedToolsetEl.id) {
 83                 tools = toolset.tools;
 84                 label = toolset.label;
 85                 break;
 86             }
 87         }
 88         
 89         var toolsetEditor = feature.flowManager.getStep('toolset-editor');
 90         if (toolsetEditor == null) {
 91             // initialize the toolset editor
 92             toolsetEditor = new Monk.component.ToolsetEditor();
 93             
 94             feature.flowManager.addStep(toolsetEditor);
 95         } else {
 96             // reset parameters
 97             toolsetEditor.reset();
 98         }
 99         
100         toolsetEditor.initialToolsteps = tools;
101         toolsetEditor.setToolsetLabel(label);
102 		
103 		feature.flowManager.goToStep('toolset-editor');
104     },
105     
106 //    /**
107 //     * Recursive method to move the toolsets to the toolset list.
108 //     * To use, call it initially with 0 as a param.
109 //     * @param {Integer} toolsetIndex
110 //     */
111 //    moveToolset : function(toolsetIndex) {
112 //        Ext.getCmp('toolsets-panel').expand();
113 //        
114 //        var toolset = this.toolsets[toolsetIndex];
115 //        if (toolset) {
116 //            var toolsetsParentEl = Ext.get('toolsetsParent');
117 //            var parentXY = toolsetsParentEl.getXY();
118 //            
119 //            var toolsetEl = Ext.get(toolset.id);
120 //            var xy = toolsetEl.getXY();
121 //            
122 //            var clone = toolsetEl.dom.cloneNode(true);
123 //            clone.setAttribute('id', toolsetEl.id+'-clone');
124 //            this.window.document.body.appendChild(clone);
125 //            
126 //            var cloneEl = Ext.get(clone);
127 //            cloneEl.setStyle('z-index','2000');
128 //            cloneEl.setStyle('position','absolute');
129 //            cloneEl.setXY(xy);
130 //            
131 //            var offset = toolsetEl.getWidth(false) + 10;
132 //            
133 //            var newX = ((parentXY[0] + offset) * toolsetIndex) + 6;
134 //            toolsetIndex++;
135 //            var newY = parentXY[1] + 5;
136 //            
137 //            var deleteClones = false;
138 //            if (toolsetIndex == this.toolsets.length) deleteClones = true;
139 //            
140 //            toolsetEl.hide();
141 //            cloneEl.shift({
142 //                x: newX,
143 //                y: newY,
144 //                duration: 1,
145 //                callback: this.copyToolset.createDelegate(this, [toolsetEl, cloneEl, deleteClones])
146 //            });
147 //            
148 //            this.moveToolset.defer(100, this, [toolsetIndex]);
149 //        }
150 //    },
151 //    
152 //    copyToolset : function(toolsetEl, cloneEl, deleteClones) {
153 //        var toolsetsParentEl = Ext.get('toolsetsParent');
154 //        toolsetsParentEl.appendChild(toolsetEl);
155 //        toolsetEl.show();
156 //        cloneEl.hide();
157 //        if (deleteClones) {
158 //            // have to delete clones after every toolset's been moved, otherwise it messes up
159 //            for (var i = 0; i < this.toolsets.length; i++) {
160 //                var toolset = this.toolsets[i];
161 //                var id = toolset.id + '-clone';
162 //                Ext.get(id).remove();
163 //            }
164 //            feature.flowManager.goToStep('toolset-editor');
165 //        }
166 //    },
167     
168     // called after tools have been rendered
169     initializeDragDrop : function() {      
170         var dragHereDropzone = new Ext.dd.DropZone('toolset-drag-here', {ddGroup:'toolsetsDD'});
171         
172         Ext.ux.SelectorDDProxy = Ext.extend(Ext.dd.DDProxy, {
173             parent : this,
174             
175 			// constrain dragging to the barriers of the screen
176             constrain: function(element) {
177                 var windowWidth = Ext.lib.Dom.getViewWidth();
178                 var windowHeight = Ext.lib.Dom.getViewHeight();
179                 var leftConstraint = element.getX();
180                 var rightConstraint = windowWidth  - leftConstraint - element.getWidth();
181                 var topConstraint = element.getY();
182                 var bottomConstraint = windowHeight - topConstraint - element.getHeight();
183                 this.setXConstraint(leftConstraint, rightConstraint);
184                 this.setYConstraint(topConstraint, bottomConstraint);
185             },
186 			
187             // overrides of DDProxy methods
188             startDrag: function(x, y) {
189                 var dragEl = Ext.get(this.getDragEl());
190                 var el = Ext.get(this.getEl());
191                 
192                 dragEl.applyStyles({border:'','z-index':2000});
193                 dragEl.update(el.dom.innerHTML);
194                 dragEl.addClass(el.dom.className + ' dd-proxy');
195             },
196             
197             onDragOver: function(e, targetId) {
198                 var target = Ext.get(targetId);
199                 if (target != this.lastTarget) {
200                     this.lastTarget = target;
201                     target.addClass('target-over');
202                 }
203             },
204             onDragOut: function(e, targetId) {
205                 var target = Ext.get(targetId);
206                 this.lastTarget = null;
207                 target.removeClass('target-over');
208             },
209             
210             endDrag: function() {                
211                 var dragEl = Ext.get(this.getDragEl());
212                 var el = Ext.get(this.getEl());
213                 
214                 if (this.lastTarget != null) {
215                     if (this.lastTarget.id == 'toolset-drag-here') {
216                         // clone selected toolset and fade it out
217                         // TODO make it expand/fan out into the tools in the toolset editor
218                         var clone = el.dom.cloneNode(true);
219                         clone.id = clone.id + '-selected';
220                         var xy = dragEl.getXY();
221                         window.document.body.appendChild(clone);
222                         
223                         var cloneEl = Ext.get(clone);
224                         
225                         cloneEl.setXY(xy);
226                         cloneEl.setOpacity(0.4);
227                         cloneEl.fadeOut({
228                             endOpacity: 0,
229                             duration: 2,
230                             remove: true
231                         });
232                         
233                         el.applyStyles({position:'', width:''});
234                         this.parent.toolsetSelected(el);
235                     }
236                 }
237                 
238                 Ext.get('toolset-drag-here').removeClass('target-over');
239             }
240         });
241         
242         // make toolsets drag n droppable
243         // some toolsets are disabled for now
244         for (var i = 0; i < this.toolsets.length; i++) {
245             var toolsetId = this.toolsets[i].id;
246             if (i == 0 || i == 1 || i == 2) { // TODO remove this condition once we have actual toolsets
247                 var toolsetDD = Ext.get(toolsetId);
248                 toolsetDD.dd = new Ext.ux.SelectorDDProxy(toolsetId, 'toolsetsDD', {isTarget: false});
249 				toolsetDD.dd.constrain(toolsetDD);
250             } else {
251                 Ext.get(toolsetId).addClass('disabled');
252             }
253         }
254     }
255      
256 });