← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/ext/source/widgets/SplitBar.js

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/ext/source/widgets/SplitBar.js
 
1
/*
 
2
 * Ext JS Library 2.2
 
3
 * Copyright(c) 2006-2008, Ext JS, LLC.
 
4
 * licensing@extjs.com
 
5
 * 
 
6
 * http://extjs.com/license
 
7
 */
 
8
 
 
9
/**
 
10
 * @class Ext.SplitBar
 
11
 * @extends Ext.util.Observable
 
12
 * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
 
13
 * <br><br>
 
14
 * Usage:
 
15
 * <pre><code>
 
16
var split = new Ext.SplitBar("elementToDrag", "elementToSize",
 
17
                   Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
 
18
split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
 
19
split.minSize = 100;
 
20
split.maxSize = 600;
 
21
split.animate = true;
 
22
split.on('moved', splitterMoved);
 
23
</code></pre>
 
24
 * @constructor
 
25
 * Create a new SplitBar
 
26
 * @param {Mixed} dragElement The element to be dragged and act as the SplitBar.
 
27
 * @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged
 
28
 * @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
 
29
 * @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or  
 
30
                        Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
 
31
                        position of the SplitBar).
 
32
 */
 
33
Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
 
34
    
 
35
    /** @private */
 
36
    this.el = Ext.get(dragElement, true);
 
37
    this.el.dom.unselectable = "on";
 
38
    /** @private */
 
39
    this.resizingEl = Ext.get(resizingElement, true);
 
40
 
 
41
    /**
 
42
     * @private
 
43
     * The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
 
44
     * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
 
45
     * @type Number
 
46
     */
 
47
    this.orientation = orientation || Ext.SplitBar.HORIZONTAL;
 
48
    
 
49
    /**
 
50
     * The minimum size of the resizing element. (Defaults to 0)
 
51
     * @type Number
 
52
     */
 
53
    this.minSize = 0;
 
54
    
 
55
    /**
 
56
     * The maximum size of the resizing element. (Defaults to 2000)
 
57
     * @type Number
 
58
     */
 
59
    this.maxSize = 2000;
 
60
    
 
61
    /**
 
62
     * Whether to animate the transition to the new size
 
63
     * @type Boolean
 
64
     */
 
65
    this.animate = false;
 
66
    
 
67
    /**
 
68
     * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
 
69
     * @type Boolean
 
70
     */
 
71
    this.useShim = false;
 
72
    
 
73
    /** @private */
 
74
    this.shim = null;
 
75
    
 
76
    if(!existingProxy){
 
77
        /** @private */
 
78
        this.proxy = Ext.SplitBar.createProxy(this.orientation);
 
79
    }else{
 
80
        this.proxy = Ext.get(existingProxy).dom;
 
81
    }
 
82
    /** @private */
 
83
    this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
 
84
    
 
85
    /** @private */
 
86
    this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
 
87
    
 
88
    /** @private */
 
89
    this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
 
90
    
 
91
    /** @private */
 
92
    this.dragSpecs = {};
 
93
    
 
94
    /**
 
95
     * @private The adapter to use to positon and resize elements
 
96
     */
 
97
    this.adapter = new Ext.SplitBar.BasicLayoutAdapter();
 
98
    this.adapter.init(this);
 
99
    
 
100
    if(this.orientation == Ext.SplitBar.HORIZONTAL){
 
101
        /** @private */
 
102
        this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
 
103
        this.el.addClass("x-splitbar-h");
 
104
    }else{
 
105
        /** @private */
 
106
        this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
 
107
        this.el.addClass("x-splitbar-v");
 
108
    }
 
109
    
 
110
    this.addEvents(
 
111
        /**
 
112
         * @event resize
 
113
         * Fires when the splitter is moved (alias for {@link #event-moved})
 
114
         * @param {Ext.SplitBar} this
 
115
         * @param {Number} newSize the new width or height
 
116
         */
 
117
        "resize",
 
118
        /**
 
119
         * @event moved
 
120
         * Fires when the splitter is moved
 
121
         * @param {Ext.SplitBar} this
 
122
         * @param {Number} newSize the new width or height
 
123
         */
 
124
        "moved",
 
125
        /**
 
126
         * @event beforeresize
 
127
         * Fires before the splitter is dragged
 
128
         * @param {Ext.SplitBar} this
 
129
         */
 
130
        "beforeresize",
 
131
 
 
132
        "beforeapply"
 
133
    );
 
134
 
 
135
    Ext.SplitBar.superclass.constructor.call(this);
 
136
};
 
137
 
 
138
Ext.extend(Ext.SplitBar, Ext.util.Observable, {
 
139
    onStartProxyDrag : function(x, y){
 
140
        this.fireEvent("beforeresize", this);
 
141
        this.overlay =  Ext.DomHelper.append(document.body,  {cls: "x-drag-overlay", html: "&#160;"}, true);
 
142
        this.overlay.unselectable();
 
143
        this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
 
144
        this.overlay.show();
 
145
        Ext.get(this.proxy).setDisplayed("block");
 
146
        var size = this.adapter.getElementSize(this);
 
147
        this.activeMinSize = this.getMinimumSize();;
 
148
        this.activeMaxSize = this.getMaximumSize();;
 
149
        var c1 = size - this.activeMinSize;
 
150
        var c2 = Math.max(this.activeMaxSize - size, 0);
 
151
        if(this.orientation == Ext.SplitBar.HORIZONTAL){
 
152
            this.dd.resetConstraints();
 
153
            this.dd.setXConstraint(
 
154
                this.placement == Ext.SplitBar.LEFT ? c1 : c2, 
 
155
                this.placement == Ext.SplitBar.LEFT ? c2 : c1
 
156
            );
 
157
            this.dd.setYConstraint(0, 0);
 
158
        }else{
 
159
            this.dd.resetConstraints();
 
160
            this.dd.setXConstraint(0, 0);
 
161
            this.dd.setYConstraint(
 
162
                this.placement == Ext.SplitBar.TOP ? c1 : c2, 
 
163
                this.placement == Ext.SplitBar.TOP ? c2 : c1
 
164
            );
 
165
         }
 
166
        this.dragSpecs.startSize = size;
 
167
        this.dragSpecs.startPoint = [x, y];
 
168
        Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
 
169
    },
 
170
    
 
171
    /** 
 
172
     * @private Called after the drag operation by the DDProxy
 
173
     */
 
174
    onEndProxyDrag : function(e){
 
175
        Ext.get(this.proxy).setDisplayed(false);
 
176
        var endPoint = Ext.lib.Event.getXY(e);
 
177
        if(this.overlay){
 
178
            this.overlay.remove();
 
179
            delete this.overlay;
 
180
        }
 
181
        var newSize;
 
182
        if(this.orientation == Ext.SplitBar.HORIZONTAL){
 
183
            newSize = this.dragSpecs.startSize + 
 
184
                (this.placement == Ext.SplitBar.LEFT ?
 
185
                    endPoint[0] - this.dragSpecs.startPoint[0] :
 
186
                    this.dragSpecs.startPoint[0] - endPoint[0]
 
187
                );
 
188
        }else{
 
189
            newSize = this.dragSpecs.startSize + 
 
190
                (this.placement == Ext.SplitBar.TOP ?
 
191
                    endPoint[1] - this.dragSpecs.startPoint[1] :
 
192
                    this.dragSpecs.startPoint[1] - endPoint[1]
 
193
                );
 
194
        }
 
195
        newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
 
196
        if(newSize != this.dragSpecs.startSize){
 
197
            if(this.fireEvent('beforeapply', this, newSize) !== false){
 
198
                this.adapter.setElementSize(this, newSize);
 
199
                this.fireEvent("moved", this, newSize);
 
200
                this.fireEvent("resize", this, newSize);
 
201
            }
 
202
        }
 
203
    },
 
204
    
 
205
    /**
 
206
     * Get the adapter this SplitBar uses
 
207
     * @return The adapter object
 
208
     */
 
209
    getAdapter : function(){
 
210
        return this.adapter;
 
211
    },
 
212
    
 
213
    /**
 
214
     * Set the adapter this SplitBar uses
 
215
     * @param {Object} adapter A SplitBar adapter object
 
216
     */
 
217
    setAdapter : function(adapter){
 
218
        this.adapter = adapter;
 
219
        this.adapter.init(this);
 
220
    },
 
221
    
 
222
    /**
 
223
     * Gets the minimum size for the resizing element
 
224
     * @return {Number} The minimum size
 
225
     */
 
226
    getMinimumSize : function(){
 
227
        return this.minSize;
 
228
    },
 
229
    
 
230
    /**
 
231
     * Sets the minimum size for the resizing element
 
232
     * @param {Number} minSize The minimum size
 
233
     */
 
234
    setMinimumSize : function(minSize){
 
235
        this.minSize = minSize;
 
236
    },
 
237
    
 
238
    /**
 
239
     * Gets the maximum size for the resizing element
 
240
     * @return {Number} The maximum size
 
241
     */
 
242
    getMaximumSize : function(){
 
243
        return this.maxSize;
 
244
    },
 
245
    
 
246
    /**
 
247
     * Sets the maximum size for the resizing element
 
248
     * @param {Number} maxSize The maximum size
 
249
     */
 
250
    setMaximumSize : function(maxSize){
 
251
        this.maxSize = maxSize;
 
252
    },
 
253
    
 
254
    /**
 
255
     * Sets the initialize size for the resizing element
 
256
     * @param {Number} size The initial size
 
257
     */
 
258
    setCurrentSize : function(size){
 
259
        var oldAnimate = this.animate;
 
260
        this.animate = false;
 
261
        this.adapter.setElementSize(this, size);
 
262
        this.animate = oldAnimate;
 
263
    },
 
264
    
 
265
    /**
 
266
     * Destroy this splitbar. 
 
267
     * @param {Boolean} removeEl True to remove the element
 
268
     */
 
269
    destroy : function(removeEl){
 
270
        if(this.shim){
 
271
            this.shim.remove();
 
272
        }
 
273
        this.dd.unreg();
 
274
        Ext.removeNode(this.proxy);
 
275
        if(removeEl){
 
276
            this.el.remove();
 
277
        }
 
278
    }
 
279
});
 
280
 
 
281
/**
 
282
 * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
 
283
 */
 
284
Ext.SplitBar.createProxy = function(dir){
 
285
    var proxy = new Ext.Element(document.createElement("div"));
 
286
    proxy.unselectable();
 
287
    var cls = 'x-splitbar-proxy';
 
288
    proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
 
289
    document.body.appendChild(proxy.dom);
 
290
    return proxy.dom;
 
291
};
 
292
 
 
293
/** 
 
294
 * @class Ext.SplitBar.BasicLayoutAdapter
 
295
 * Default Adapter. It assumes the splitter and resizing element are not positioned
 
296
 * elements and only gets/sets the width of the element. Generally used for table based layouts.
 
297
 */
 
298
Ext.SplitBar.BasicLayoutAdapter = function(){
 
299
};
 
300
 
 
301
Ext.SplitBar.BasicLayoutAdapter.prototype = {
 
302
    // do nothing for now
 
303
    init : function(s){
 
304
    
 
305
    },
 
306
    /**
 
307
     * Called before drag operations to get the current size of the resizing element. 
 
308
     * @param {Ext.SplitBar} s The SplitBar using this adapter
 
309
     */
 
310
     getElementSize : function(s){
 
311
        if(s.orientation == Ext.SplitBar.HORIZONTAL){
 
312
            return s.resizingEl.getWidth();
 
313
        }else{
 
314
            return s.resizingEl.getHeight();
 
315
        }
 
316
    },
 
317
    
 
318
    /**
 
319
     * Called after drag operations to set the size of the resizing element.
 
320
     * @param {Ext.SplitBar} s The SplitBar using this adapter
 
321
     * @param {Number} newSize The new size to set
 
322
     * @param {Function} onComplete A function to be invoked when resizing is complete
 
323
     */
 
324
    setElementSize : function(s, newSize, onComplete){
 
325
        if(s.orientation == Ext.SplitBar.HORIZONTAL){
 
326
            if(!s.animate){
 
327
                s.resizingEl.setWidth(newSize);
 
328
                if(onComplete){
 
329
                    onComplete(s, newSize);
 
330
                }
 
331
            }else{
 
332
                s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
 
333
            }
 
334
        }else{
 
335
            
 
336
            if(!s.animate){
 
337
                s.resizingEl.setHeight(newSize);
 
338
                if(onComplete){
 
339
                    onComplete(s, newSize);
 
340
                }
 
341
            }else{
 
342
                s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
 
343
            }
 
344
        }
 
345
    }
 
346
};
 
347
 
 
348
/** 
 
349
 *@class Ext.SplitBar.AbsoluteLayoutAdapter
 
350
 * @extends Ext.SplitBar.BasicLayoutAdapter
 
351
 * Adapter that  moves the splitter element to align with the resized sizing element. 
 
352
 * Used with an absolute positioned SplitBar.
 
353
 * @param {Mixed} container The container that wraps around the absolute positioned content. If it's
 
354
 * document.body, make sure you assign an id to the body element.
 
355
 */
 
356
Ext.SplitBar.AbsoluteLayoutAdapter = function(container){
 
357
    this.basic = new Ext.SplitBar.BasicLayoutAdapter();
 
358
    this.container = Ext.get(container);
 
359
};
 
360
 
 
361
Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
 
362
    init : function(s){
 
363
        this.basic.init(s);
 
364
    },
 
365
    
 
366
    getElementSize : function(s){
 
367
        return this.basic.getElementSize(s);
 
368
    },
 
369
    
 
370
    setElementSize : function(s, newSize, onComplete){
 
371
        this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
 
372
    },
 
373
    
 
374
    moveSplitter : function(s){
 
375
        var yes = Ext.SplitBar;
 
376
        switch(s.placement){
 
377
            case yes.LEFT:
 
378
                s.el.setX(s.resizingEl.getRight());
 
379
                break;
 
380
            case yes.RIGHT:
 
381
                s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
 
382
                break;
 
383
            case yes.TOP:
 
384
                s.el.setY(s.resizingEl.getBottom());
 
385
                break;
 
386
            case yes.BOTTOM:
 
387
                s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
 
388
                break;
 
389
        }
 
390
    }
 
391
};
 
392
 
 
393
/**
 
394
 * Orientation constant - Create a vertical SplitBar
 
395
 * @static
 
396
 * @type Number
 
397
 */
 
398
Ext.SplitBar.VERTICAL = 1;
 
399
 
 
400
/**
 
401
 * Orientation constant - Create a horizontal SplitBar
 
402
 * @static
 
403
 * @type Number
 
404
 */
 
405
Ext.SplitBar.HORIZONTAL = 2;
 
406
 
 
407
/**
 
408
 * Placement constant - The resizing element is to the left of the splitter element
 
409
 * @static
 
410
 * @type Number
 
411
 */
 
412
Ext.SplitBar.LEFT = 1;
 
413
 
 
414
/**
 
415
 * Placement constant - The resizing element is to the right of the splitter element
 
416
 * @static
 
417
 * @type Number
 
418
 */
 
419
Ext.SplitBar.RIGHT = 2;
 
420
 
 
421
/**
 
422
 * Placement constant - The resizing element is positioned above the splitter element
 
423
 * @static
 
424
 * @type Number
 
425
 */
 
426
Ext.SplitBar.TOP = 3;
 
427
 
 
428
/**
 
429
 * Placement constant - The resizing element is positioned under splitter element
 
430
 * @static
 
431
 * @type Number
 
432
 */
 
433
Ext.SplitBar.BOTTOM = 4;