source: trunk/web/addons/job_monarch/lib/extjs/examples/desktop/js/TaskBar.js @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

  • added new AJAX dependancies: ExtJS, pChart, Lightbox2
File size: 13.9 KB
Line 
1/*
2 * Ext JS Library 2.2.1
3 * Copyright(c) 2006-2009, Ext JS, LLC.
4 * licensing@extjs.com
5 *
6 * http://extjs.com/license
7 */
8
9/**
10 * @class Ext.ux.TaskBar
11 * @extends Ext.util.Observable
12 */
13Ext.ux.TaskBar = function(app){
14    this.app = app;
15    this.init();
16}
17
18Ext.extend(Ext.ux.TaskBar, Ext.util.Observable, {
19    init : function(){
20                this.startMenu = new Ext.ux.StartMenu(Ext.apply({
21                        iconCls: 'user',
22                        height: 300,
23                        shadow: true,
24                        title: 'Jack Slocum',
25                        width: 300
26                }, this.app.startConfig));
27               
28                this.startBtn = new Ext.Button({
29            text: 'Start',
30            id: 'ux-startbutton',
31            iconCls:'start',
32            menu: this.startMenu,
33            menuAlign: 'bl-tl',
34            renderTo: 'ux-taskbar-start',
35            clickEvent:'mousedown',
36            template: new Ext.Template(
37                                '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
38                                '<td class="ux-startbutton-left"><i>&#160;</i></td><td class="ux-startbutton-center"><em unselectable="on"><button class="x-btn-text" type="{1}" style="height:30px;">{0}</button></em></td><td class="ux-startbutton-right"><i>&#160;</i></td>',
39                                "</tr></tbody></table>")
40        });
41       
42        var width = Ext.get('ux-startbutton').getWidth()+10;
43       
44        var sbBox = new Ext.BoxComponent({
45                        el: 'ux-taskbar-start',
46                id: 'TaskBarStart',
47                minWidth: width,
48                        region:'west',
49                        split: true,
50                        width: width
51                });
52               
53                this.tbPanel = new Ext.ux.TaskButtonsPanel({
54                        el: 'ux-taskbuttons-panel',
55                        id: 'TaskBarButtons',
56                        region:'center'
57                });
58                               
59        var container = new Ext.ux.TaskBarContainer({
60                        el: 'ux-taskbar',
61                        layout: 'border',
62                        items: [sbBox,this.tbPanel]
63                });
64               
65                return this;
66    },
67   
68    addTaskButton : function(win){
69                return this.tbPanel.addButton(win, 'ux-taskbuttons-panel');
70        },
71       
72        removeTaskButton : function(btn){
73                this.tbPanel.removeButton(btn);
74        },
75       
76        setActiveButton : function(btn){
77                this.tbPanel.setActiveButton(btn);
78        }
79});
80
81
82
83/**
84 * @class Ext.ux.TaskBarContainer
85 * @extends Ext.Container
86 */
87Ext.ux.TaskBarContainer = Ext.extend(Ext.Container, {
88    initComponent : function() {
89        Ext.ux.TaskBarContainer.superclass.initComponent.call(this);
90       
91        this.el = Ext.get(this.el) || Ext.getBody();
92        this.el.setHeight = Ext.emptyFn;
93        this.el.setWidth = Ext.emptyFn;
94        this.el.setSize = Ext.emptyFn;
95        this.el.setStyle({
96            overflow:'hidden',
97            margin:'0',
98            border:'0 none'
99        });
100        this.el.dom.scroll = 'no';
101        this.allowDomMove = false;
102        this.autoWidth = true;
103        this.autoHeight = true;
104        Ext.EventManager.onWindowResize(this.fireResize, this);
105        this.renderTo = this.el;
106    },
107
108    fireResize : function(w, h){
109        this.fireEvent('resize', this, w, h, w, h);
110    }
111});
112
113
114
115/**
116 * @class Ext.ux.TaskButtonsPanel
117 * @extends Ext.BoxComponent
118 */
119Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
120        activeButton: null,
121        enableScroll: true,
122        scrollIncrement: 0,
123    scrollRepeatInterval: 400,
124    scrollDuration: .35,
125    animScroll: true,
126    resizeButtons: true,
127    buttonWidth: 168,
128    minButtonWidth: 118,
129    buttonMargin: 2,
130    buttonWidthSet: false,
131       
132        initComponent : function() {
133        Ext.ux.TaskButtonsPanel.superclass.initComponent.call(this);
134        this.on('resize', this.delegateUpdates);
135        this.items = [];
136       
137        this.stripWrap = Ext.get(this.el).createChild({
138                cls: 'ux-taskbuttons-strip-wrap',
139                cn: {
140                tag:'ul', cls:'ux-taskbuttons-strip'
141            }
142                });
143        this.stripSpacer = Ext.get(this.el).createChild({
144                cls:'ux-taskbuttons-strip-spacer'
145        });
146        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
147       
148        this.edge = this.strip.createChild({
149                tag:'li',
150                cls:'ux-taskbuttons-edge'
151        });
152        this.strip.createChild({
153                cls:'x-clear'
154        });
155        },
156       
157        addButton : function(win){
158                var li = this.strip.createChild({tag:'li'}, this.edge); // insert before the edge
159        var btn = new Ext.ux.TaskBar.TaskButton(win, li);
160               
161                this.items.push(btn);
162               
163                if(!this.buttonWidthSet){
164                        this.lastButtonWidth = btn.container.getWidth();
165                }
166               
167                this.setActiveButton(btn);
168                return btn;
169        },
170       
171        removeButton : function(btn){
172                var li = document.getElementById(btn.container.id);
173                btn.destroy();
174                li.parentNode.removeChild(li);
175               
176                var s = [];
177                for(var i = 0, len = this.items.length; i < len; i++) {
178                        if(this.items[i] != btn){
179                                s.push(this.items[i]);
180                        }
181                }
182                this.items = s;
183               
184                this.delegateUpdates();
185        },
186       
187        setActiveButton : function(btn){
188                this.activeButton = btn;
189                this.delegateUpdates();
190        },
191       
192        delegateUpdates : function(){
193                /*if(this.suspendUpdates){
194            return;
195        }*/
196        if(this.resizeButtons && this.rendered){
197            this.autoSize();
198        }
199        if(this.enableScroll && this.rendered){
200            this.autoScroll();
201        }
202    },
203   
204    autoSize : function(){
205        var count = this.items.length;
206        var ow = this.el.dom.offsetWidth;
207        var aw = this.el.dom.clientWidth;
208
209        if(!this.resizeButtons || count < 1 || !aw){ // !aw for display:none
210            return;
211        }
212       
213        var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.buttonMargin, this.buttonWidth), this.minButtonWidth); // -4 for float errors in IE
214        var btns = this.stripWrap.dom.getElementsByTagName('button');
215       
216        this.lastButtonWidth = Ext.get(btns[0].id).findParent('li').offsetWidth;
217       
218        for(var i = 0, len = btns.length; i < len; i++) {           
219            var btn = btns[i];
220           
221            var tw = Ext.get(btns[i].id).findParent('li').offsetWidth;
222            var iw = btn.offsetWidth;
223           
224            btn.style.width = (each - (tw-iw)) + 'px';
225        }
226    },
227   
228    autoScroll : function(){
229        var count = this.items.length;
230        var ow = this.el.dom.offsetWidth;
231        var tw = this.el.dom.clientWidth;
232       
233        var wrap = this.stripWrap;
234        var cw = wrap.dom.offsetWidth;
235        var pos = this.getScrollPos();
236        var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
237       
238        if(!this.enableScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
239            return;
240        }
241       
242        wrap.setWidth(tw); // moved to here because of problem in Safari
243       
244        if(l <= tw){
245            wrap.dom.scrollLeft = 0;
246            //wrap.setWidth(tw); moved from here because of problem in Safari
247            if(this.scrolling){
248                this.scrolling = false;
249                this.el.removeClass('x-taskbuttons-scrolling');
250                this.scrollLeft.hide();
251                this.scrollRight.hide();
252            }
253        }else{
254            if(!this.scrolling){
255                this.el.addClass('x-taskbuttons-scrolling');
256            }
257            tw -= wrap.getMargins('lr');
258            wrap.setWidth(tw > 20 ? tw : 20);
259            if(!this.scrolling){
260                if(!this.scrollLeft){
261                    this.createScrollers();
262                }else{
263                    this.scrollLeft.show();
264                    this.scrollRight.show();
265                }
266            }
267            this.scrolling = true;
268            if(pos > (l-tw)){ // ensure it stays within bounds
269                wrap.dom.scrollLeft = l-tw;
270            }else{ // otherwise, make sure the active button is still visible
271                                this.scrollToButton(this.activeButton, true); // true to animate
272            }
273            this.updateScrollButtons();
274        }
275    },
276
277    createScrollers : function(){
278        var h = this.el.dom.offsetHeight; //var h = this.stripWrap.dom.offsetHeight;
279               
280        // left
281        var sl = this.el.insertFirst({
282            cls:'ux-taskbuttons-scroller-left'
283        });
284        sl.setHeight(h);
285        sl.addClassOnOver('ux-taskbuttons-scroller-left-over');
286        this.leftRepeater = new Ext.util.ClickRepeater(sl, {
287            interval : this.scrollRepeatInterval,
288            handler: this.onScrollLeft,
289            scope: this
290        });
291        this.scrollLeft = sl;
292
293        // right
294        var sr = this.el.insertFirst({
295            cls:'ux-taskbuttons-scroller-right'
296        });
297        sr.setHeight(h);
298        sr.addClassOnOver('ux-taskbuttons-scroller-right-over');
299        this.rightRepeater = new Ext.util.ClickRepeater(sr, {
300            interval : this.scrollRepeatInterval,
301            handler: this.onScrollRight,
302            scope: this
303        });
304        this.scrollRight = sr;
305    },
306   
307    getScrollWidth : function(){
308        return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
309    },
310
311    getScrollPos : function(){
312        return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
313    },
314
315    getScrollArea : function(){
316        return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
317    },
318
319    getScrollAnim : function(){
320        return {
321                duration: this.scrollDuration,
322                callback: this.updateScrollButtons,
323                scope: this
324        };
325    },
326
327    getScrollIncrement : function(){
328        return (this.scrollIncrement || this.lastButtonWidth+2);
329    },
330   
331    /* getBtnEl : function(item){
332        return document.getElementById(item.id);
333    }, */
334   
335    scrollToButton : function(item, animate){
336        item = item.el.dom.parentNode; // li
337        if(!item){ return; }
338        var el = item; //this.getBtnEl(item);
339        var pos = this.getScrollPos(), area = this.getScrollArea();
340        var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
341        var right = left + el.offsetWidth;
342        if(left < pos){
343            this.scrollTo(left, animate);
344        }else if(right > (pos + area)){
345            this.scrollTo(right - area, animate);
346        }
347    },
348   
349    scrollTo : function(pos, animate){
350        this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
351        if(!animate){
352            this.updateScrollButtons();
353        }
354    },
355   
356    onScrollRight : function(){
357        var sw = this.getScrollWidth()-this.getScrollArea();
358        var pos = this.getScrollPos();
359        var s = Math.min(sw, pos + this.getScrollIncrement());
360        if(s != pos){
361                this.scrollTo(s, this.animScroll);
362        }       
363    },
364
365    onScrollLeft : function(){
366        var pos = this.getScrollPos();
367        var s = Math.max(0, pos - this.getScrollIncrement());
368        if(s != pos){
369            this.scrollTo(s, this.animScroll);
370        }
371    },
372   
373    updateScrollButtons : function(){
374        var pos = this.getScrollPos();
375        this.scrollLeft[pos == 0 ? 'addClass' : 'removeClass']('ux-taskbuttons-scroller-left-disabled');
376        this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('ux-taskbuttons-scroller-right-disabled');
377    }
378});
379
380
381
382/**
383 * @class Ext.ux.TaskBar.TaskButton
384 * @extends Ext.Button
385 */
386Ext.ux.TaskBar.TaskButton = function(win, el){
387        this.win = win;
388    Ext.ux.TaskBar.TaskButton.superclass.constructor.call(this, {
389        iconCls: win.iconCls,
390        text: Ext.util.Format.ellipsis(win.title, 12),
391        renderTo: el,
392        handler : function(){
393            if(win.minimized || win.hidden){
394                win.show();
395            }else if(win == win.manager.getActive()){
396                win.minimize();
397            }else{
398                win.toFront();
399            }
400        },
401        clickEvent:'mousedown',
402        template: new Ext.Template(
403                        '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
404                        '<td class="ux-taskbutton-left"><i>&#160;</i></td><td class="ux-taskbutton-center"><em unselectable="on"><button class="x-btn-text" type="{1}" style="height:28px;">{0}</button></em></td><td class="ux-taskbutton-right"><i>&#160;</i></td>',
405                        "</tr></tbody></table>")
406    });
407};
408
409Ext.extend(Ext.ux.TaskBar.TaskButton, Ext.Button, {
410    onRender : function(){
411        Ext.ux.TaskBar.TaskButton.superclass.onRender.apply(this, arguments);
412
413        this.cmenu = new Ext.menu.Menu({
414            items: [{
415                text: 'Restore',
416                handler: function(){
417                    if(!this.win.isVisible()){
418                        this.win.show();
419                    }else{
420                        this.win.restore();
421                    }
422                },
423                scope: this
424            },{
425                text: 'Minimize',
426                handler: this.win.minimize,
427                scope: this.win
428            },{
429                text: 'Maximize',
430                handler: this.win.maximize,
431                scope: this.win
432            }, '-', {
433                text: 'Close',
434                handler: this.closeWin.createDelegate(this, this.win, true),
435                scope: this.win
436            }]
437        });
438
439        this.cmenu.on('beforeshow', function(){
440            var items = this.cmenu.items.items;
441            var w = this.win;
442            items[0].setDisabled(w.maximized !== true && w.hidden !== true);
443            items[1].setDisabled(w.minimized === true);
444            items[2].setDisabled(w.maximized === true || w.hidden === true);
445        }, this);
446
447        this.el.on('contextmenu', function(e){
448            e.stopEvent();
449            if(!this.cmenu.el){
450                this.cmenu.render();
451            }
452            var xy = e.getXY();
453            xy[1] -= this.cmenu.el.getHeight();
454            this.cmenu.showAt(xy);
455        }, this);
456    },
457   
458    closeWin : function(cMenu, e, win){
459                if(!win.isVisible()){
460                        win.show();
461                }else{
462                        win.restore();
463                }
464                win.close();
465        }
466});
Note: See TracBrowser for help on using the repository browser.