/adei/ui

To get this branch, use:
bzr branch http://darksoft.org/webbzr/adei/ui

« back to all changes in this revision

Viewing changes to js/dialog_dragger.js

  • Committer: Suren A. Chilingaryan
  • Date: 2008-04-02 10:23:22 UTC
  • Revision ID: csa@dside.dyndns.org-20080402102322-okib92sicg2dx3o3
Initial import

Show diffs side-by-side

added added

removed removed

Lines of Context:
js/dialog_dragger.js
 
1
function DIALOG_DRAGGER(dialog) {
 
2
    this.dialog = dialog;
 
3
    
 
4
    this.resizeCornerSize = 16;
 
5
        /* If set to small, we will hide scrollbars of content window and
 
6
        resizing will not be operable any more */
 
7
    this.minimumWidth = 60;
 
8
    this.minimumHeight = 15;
 
9
    
 
10
    this.MouseMoveBind = this.MouseMove.bindAsEventListener( this );
 
11
    this.MouseOutBind = this.MouseOut.bindAsEventListener( this );
 
12
    this.MaximizeBind = this.Maximize.bindAsEventListener( this );
 
13
    this.ResizeBind = this.Resize.bindAsEventListener( this );
 
14
    this.MoveBind = this.Move.bindAsEventListener( this );
 
15
    
 
16
    this.TrackBind = this.Track.bindAsEventListener( this );
 
17
    this.DoneBind = this.Done.bindAsEventListener( this );
 
18
    
 
19
    this.label_displayed = true;
 
20
    
 
21
    this.in_resize = false;
 
22
    this.in_move = false;
 
23
    this.maximized = false;
 
24
    
 
25
    this.is_moved = false;
 
26
    this.is_resized = false;
 
27
}
 
28
 
 
29
 
 
30
DIALOG_DRAGGER.prototype.Setup = function() {
 
31
        // IE7 :) needs it to adjust widths of sub-divs
 
32
    domSetWidth(this.dialog.node, this.dialog.node.offsetWidth);
 
33
    
 
34
        // IE6 :) fixing size for iframes
 
35
    if (this.dialog.iframe) {
 
36
        this.SaveDimenssions();
 
37
        this.Restore();
 
38
    }    
 
39
 
 
40
 
 
41
    Event.observe(this.dialog.maximize_node, 'click', this.MaximizeBind );
 
42
    Event.observe(this.dialog.node, 'mousemove', this.MouseMoveBind );
 
43
    Event.observe(this.dialog.node, 'mouseout', this.MouseOutBind );
 
44
    Event.observe(this.dialog.node, 'mousedown', this.ResizeBind );
 
45
    Event.observe(this.dialog.titlebar, 'mousedown', this.MoveBind );
 
46
    
 
47
    
 
48
    
 
49
}
 
50
 
 
51
DIALOG_DRAGGER.prototype.Clean = function() {
 
52
    Event.stopObserving(this.dialog.maximize_node, 'click', this.MaximizeBind );
 
53
    Event.stopObserving(this.dialog.node, 'mousemove', this.MouseMoveBind );
 
54
    Event.stopObserving(this.dialog.node, 'mouseout', this.MouseOutBind );
 
55
    Event.stopObserving(this.dialog.node, 'mousedown', this.ResizeBind );
 
56
    Event.stopObserving(this.dialog.titlebar, 'mousedown', this.MoveBind );
 
57
}
 
58
 
 
59
DIALOG_DRAGGER.prototype.MouseMove = function(ev) {
 
60
    if ((this.in_resize)||(this.in_move)) return;
 
61
    
 
62
    var target = domGetEventTarget(ev);
 
63
    if (target != this.dialog.node) {
 
64
        this.resizeDirection = "";
 
65
        this.dialog.node.style.cursor = "";
 
66
        return;
 
67
    }
 
68
    
 
69
    var width = this.dialog.node.offsetWidth;
 
70
    var height = this.dialog.node.offsetHeight;
 
71
    
 
72
    var offset = domGetEventLayerOffset(ev);
 
73
    var xOff = offset[0];
 
74
    var yOff = offset[1];
 
75
  
 
76
    var resizeDirection = ""
 
77
    if (yOff < this.resizeCornerSize)
 
78
        resizeDirection += "n";
 
79
    else if (yOff > (height - this.resizeCornerSize))
 
80
        resizeDirection += "s";
 
81
    if (xOff < this.resizeCornerSize)
 
82
        resizeDirection += "w";
 
83
    else if (xOff > (width - this.resizeCornerSize))
 
84
        resizeDirection += "e";
 
85
 
 
86
    if (resizeDirection) {
 
87
        this.resizeDirection = resizeDirection;
 
88
        this.dialog.node.style.cursor = resizeDirection + "-resize";
 
89
    } else {
 
90
        this.resizeDirection = "";
 
91
        this.dialog.node.style.cursor = "";
 
92
    }
 
93
}
 
94
 
 
95
DIALOG_DRAGGER.prototype.MouseOut = function(ev) {
 
96
/* Causes problems in Opera
 
97
    this.dialog.node.style.cursor = "";
 
98
*/
 
99
}
 
100
 
 
101
 
 
102
DIALOG_DRAGGER.prototype.Move = function(ev) {
 
103
    var target = domGetEventTarget(ev);
 
104
    if ((target != this.dialog.titlebar)&&(target != this.dialog.label)) return;
 
105
 
 
106
    Event.observe(document, 'mousemove', this.TrackBind );
 
107
    Event.observe(document, 'mouseup', this.DoneBind );
 
108
 
 
109
    var node = this.dialog.node;
 
110
    var offset = domGetEventPageOffset(ev);
 
111
    this.xOffset = parseInt(domGetStyleProp(node, node.style.left, "left") ,10) - offset[0];
 
112
    this.yOffset = parseInt(domGetStyleProp(node, node.style.top, "top"), 10) - offset[1];
 
113
    
 
114
    this.in_move = true;
 
115
    
 
116
}
 
117
 
 
118
DIALOG_DRAGGER.prototype.SaveDimenssions = function() {
 
119
    var node = this.dialog.node;
 
120
    var mnode = this.dialog.content;
 
121
 
 
122
    this.oldLeft = parseInt(domGetStyleProp(node, node.style.left, "left") ,10);
 
123
    this.oldTop = parseInt(domGetStyleProp(node, node.style.top, "top"), 10);
 
124
 
 
125
        // Obtaining original window size
 
126
    var size = domGetNodeSize(node);
 
127
    node.style.width = size[0] + "px";
 
128
    node.style.height = size[1] + "px";
 
129
 
 
130
    var csize = domGetNodeSize(node);
 
131
    this.corr_x = csize[0] - size[0];
 
132
    this.corr_y = csize[1] - size[1];
 
133
    
 
134
 
 
135
    this.oldWidth = size[0] - this.corr_x;//parseInt(domGetStyleProp(node, node.style.width, "width"), 10);
 
136
    this.oldHeight = size[1] - this.corr_y;//parseInt(domGetStyleProp(node, node.style.height, "height"), 10);
 
137
 
 
138
    node.style.width = this.oldWidth + "px";
 
139
    node.style.height = this.oldHeight + "px";
 
140
 
 
141
        // Obtaining content element size
 
142
    size = domGetNodeSize(mnode);
 
143
 
 
144
//    mnode.style.width = size[0] + "px";
 
145
    mnode.style.height = size[1] + "px";
 
146
 
 
147
    var csize = domGetNodeSize(mnode);
 
148
//    this.corr_cx = csize[0] - size[0];
 
149
    this.corr_cy = csize[1] - size[1];
 
150
 
 
151
//    this.cWidth = size[0] - this.corr_cx;
 
152
    this.cHeight = size[1] - this.corr_cy;
 
153
    
 
154
//    mnode.style.width = this.cWidth + "px";
 
155
    mnode.style.height = this.cHeight + "px";
 
156
}
 
157
 
 
158
DIALOG_DRAGGER.prototype.Resize = function(ev) {
 
159
    var target = domGetEventTarget(ev);
 
160
    if (target != this.dialog.node) return;
 
161
    
 
162
    var node = this.dialog.node;
 
163
    var lnode = this.dialog.titlebar;
 
164
    
 
165
    Event.observe(document, 'mousemove', this.TrackBind );
 
166
    Event.observe(document, 'mouseup', this.DoneBind );
 
167
 
 
168
    this.in_resize = true;
 
169
 
 
170
        // If max-height not supported set titlebar height
 
171
    var tb = this.dialog.titlebar;
 
172
    var mh = parseInt(domGetStyleProp(tb, tb.style.maxHeight, "max-height"),10);
 
173
    if ((!mh)||((tb.offsetHeight - mh)>10)) {
 
174
        domSetWidth(node, node.offsetWidth);
 
175
        if (mh>0) domSetHeight(tb, mh);
 
176
        else domSetHeight(tb, 21);
 
177
    }
 
178
    
 
179
    if (!this.label_width) {
 
180
        this.label_width = this.dialog.label.offsetWidth + this.dialog.label.offsetLeft;
 
181
    }
 
182
 
 
183
    var offset = domGetEventPageOffset(ev);
 
184
    this.xPosition = offset[0];
 
185
    this.yPosition = offset[1];
 
186
    
 
187
    this.SaveDimenssions();    
 
188
    
 
189
        // Obtaining titlebar size (no correction, since preciese size is not important
 
190
    var size = domGetNodeSize(lnode);
 
191
    size[1] += this.corr_y;
 
192
    if ((size[1] + 10) > this.minimumHeight) this.minimumHeight = size[1] + 10;
 
193
}
 
194
 
 
195
DIALOG_DRAGGER.prototype.Restore = function(ev) {
 
196
    var node = this.dialog.node;
 
197
    var mnode = this.dialog.content;
 
198
 
 
199
    node.style.left = this.oldLeft + "px";
 
200
    node.style.top = this.oldTop + "px";
 
201
    node.style.width = this.oldWidth + "px";
 
202
    node.style.height = this.oldHeight + "px";
 
203
    mnode.style.height = this.cHeight + "px";
 
204
 
 
205
    cssSetClass(this.dialog.maximize_node, "maximize");
 
206
    this.maximized = false;
 
207
}
 
208
 
 
209
DIALOG_DRAGGER.prototype.Maximize = function(ev) {
 
210
    var node = this.dialog.node;
 
211
    var mnode = this.dialog.content;
 
212
 
 
213
    if (this.maximized) {
 
214
        this.Restore();
 
215
    } else {
 
216
        this.SaveDimenssions();
 
217
        
 
218
        node.style.left = 0;
 
219
        node.style.top = 0;
 
220
        
 
221
        var ww = windowGetWidth();
 
222
        var wh = windowGetHeight();
 
223
 
 
224
        node.style.width =  (ww - this.corr_x) + "px";
 
225
        
 
226
        if ((wh - this.corr_y) > this.oldHeight) {
 
227
            node.style.height = (wh - this.corr_y) + "px";
 
228
            mnode.style.height = (this.cHeight + (wh - this.corr_y - this.oldHeight)) + "px";
 
229
        }
 
230
 
 
231
        cssSetClass(this.dialog.maximize_node, "restore");
 
232
        this.maximized = true;
 
233
    }
 
234
}
 
235
 
 
236
DIALOG_DRAGGER.prototype.Track = function(ev) {
 
237
    var node = this.dialog.node;
 
238
    var mnode = this.dialog.content;
 
239
 
 
240
    if (this.in_resize) {
 
241
        var north = false;
 
242
        var south = false;
 
243
        var east  = false;
 
244
        var west  = false;
 
245
        
 
246
        if (this.resizeDirection.charAt(0) == "n") north = true;
 
247
        if (this.resizeDirection.charAt(0) == "s") south = true;
 
248
        if (this.resizeDirection.charAt(0) == "e" || this.resizeDirection.charAt(1) == "e") east = true;
 
249
        if (this.resizeDirection.charAt(0) == "w" || this.resizeDirection.charAt(1) == "w") west = true;
 
250
 
 
251
        var offset = domGetEventPageOffset(ev);
 
252
        var dx = offset[0] - this.xPosition;
 
253
        var dy = offset[1] - this.yPosition;
 
254
 
 
255
        if (west) dx = -dx;
 
256
        if (north) dy = -dy;
 
257
 
 
258
        var w = this.oldWidth  + dx;
 
259
        var h = this.oldHeight + dy;
 
260
        
 
261
        if (w < this.minimumWidth) {
 
262
            w = this.minimumWidth;
 
263
            dx = w - this.oldWidth;
 
264
        }
 
265
        
 
266
        if (h < this.minimumHeight) {
 
267
            h = this.minimumHeight;
 
268
            dy = h - this.oldHeight;
 
269
        }
 
270
        
 
271
        if (east || west) {
 
272
            if (w < this.label_width) {
 
273
                if (this.label_displayed) {
 
274
                    this.dialog.titlebar.removeChild(this.dialog.label);
 
275
                    this.label_displayed = false;
 
276
                }
 
277
            } else {
 
278
                if (!this.label_displayed) {
 
279
                    this.dialog.titlebar.appendChild(this.dialog.label);
 
280
                    this.label_displayed = true;
 
281
                }
 
282
            }
 
283
            
 
284
            node.style.width = w + "px";
 
285
            if (west) node.style.left = (this.oldLeft - dx) + "px";
 
286
        }
 
287
        
 
288
        if (north || south) {
 
289
            node.style.height = h + "px";
 
290
            if ((this.cHeight + dy) < 0) mnode.style.height = 0 + "px";
 
291
            else mnode.style.height = (this.cHeight  + dy) + "px";
 
292
            if (dy < 0) {
 
293
                var size = domGetNodeSize(mnode);
 
294
                var rdy = size[1] - this.corr_cy - this.cHeight;
 
295
                if (rdy > dy) {
 
296
                    node.style.height = (this.oldHeight + rdy) + "px";
 
297
                }
 
298
            }
 
299
            
 
300
            if (north) node.style.top  = (this.oldTop  - dy) + "px";
 
301
        }
 
302
        
 
303
        this.is_resized = true;
 
304
    } else if (this.in_move) {
 
305
        var offset = domGetEventPageOffset(ev);
 
306
        node.style.left = (offset[0] + this.xOffset) + "px";
 
307
        node.style.top  = (offset[1] + this.yOffset) + "px";
 
308
        
 
309
        this.is_moved = true;
 
310
    }
 
311
    
 
312
    Event.stop(ev);
 
313
}
 
314
 
 
315
DIALOG_DRAGGER.prototype.Done = function(ev) {
 
316
    if (this.in_resize) {
 
317
        this.in_resize = false;
 
318
    }
 
319
 
 
320
    if (this.in_move) {
 
321
        this.in_move = false;
 
322
    }
 
323
    
 
324
    Event.stopObserving(document, 'mousemove', this.TrackBind );
 
325
    Event.stopObserving(document, 'mouseup', this.DoneBind );
 
326
 
 
327
    Event.stop(ev);
 
328
}