/dev/adei-asec

To get this branch, use:
bzr branch http://darksoft.org/webbzr/dev/adei-asec

« back to all changes in this revision

Viewing changes to js/dialog_dragger.js

  • Committer: Suren A. Chilingaryan
  • Date: 2012-11-08 23:44:29 UTC
  • Revision ID: csa@dside.dyndns.org-20121108234429-jx24pcd77svhtjjs
Resizing of sidebar popups

Show diffs side-by-side

added added

removed removed

Lines of Context:
js/dialog_dragger.js
1
1
function DIALOG_DRAGGER(dialog) {
2
 
    this.dialog = dialog;
 
2
    if (typeof dialog.node == "undefined") {
 
3
        this.dialog = new Object;
 
4
        this.dialog.node = dialog;
 
5
        this.dialog.maximize_node = null;
 
6
        this.dialog.titlebar = null;
 
7
        this.dialog.content = null;
 
8
        
 
9
        this.float_mode = false;
 
10
    } else {
 
11
        this.dialog = dialog;
 
12
        
 
13
        this.float_mode = true;
 
14
    }
3
15
    
4
16
    this.resizeCornerSize = 16;
5
17
        /* If set to small, we will hide scrollbars of content window and
24
36
    
25
37
    this.is_moved = false;
26
38
    this.is_resized = false;
27
 
}
28
 
 
 
39
    
 
40
    this.cb_start = null;
 
41
    this.cb_step = null;
 
42
    this.cb_end = null;
 
43
    this.cb_attr = null;
 
44
    
 
45
    this.ctrl_min = false;
 
46
    
 
47
    this.allow_move = true;
 
48
    this.allow_resize = true;
 
49
    this.allow_resize_e = true;
 
50
    this.allow_resize_w = true;
 
51
    this.allow_resize_n = true;
 
52
    this.allow_resize_s = true;
 
53
}
 
54
 
 
55
DIALOG_DRAGGER.prototype.RegisterCallbacks = function(cb_start, cb_step, cb_done, cbattr) {
 
56
    this.cb_start = cb_start;
 
57
    this.cb_step = cb_step;
 
58
    this.cb_end = cb_done;
 
59
    this.cb_attr = cbattr;
 
60
}
 
61
 
 
62
DIALOG_DRAGGER.prototype.ControlMinimumSize = function(min_width, min_height) {
 
63
    if ((Prototype.Browser.Gecko)&&(domGetStyleProp(this.dialog.node, this.dialog.node.style.minWidth, "min-width"))) {
 
64
        this.ctrl_min = true;
 
65
        this.min_width = min_width;
 
66
        this.min_height = min_height;
 
67
    }
 
68
}
 
69
 
 
70
DIALOG_DRAGGER.prototype.Disable = function(move, resize) {
 
71
    if (!move) this.allow_move = false;
 
72
    if (typeof resize == "string") {
 
73
        if (resize.indexOf('n') >= 0) this.allow_resize_n = false;
 
74
        if (resize.indexOf('s') >= 0) this.allow_resize_s = false;
 
75
        if (resize.indexOf('w') >= 0) this.allow_resize_w = false;
 
76
        if (resize.indexOf('e') >= 0) this.allow_resize_e = false;
 
77
    } else if (!resize) this.allow_resize = false;
 
78
}
29
79
 
30
80
DIALOG_DRAGGER.prototype.Setup = function() {
31
 
        // IE7 :) needs it to adjust widths of sub-divs
32
 
    domSetWidth(this.dialog.node, this.dialog.node.offsetWidth);
 
81
    if (this.dialog.content) {
 
82
        // IE7 and not only :) needs it to adjust widths of sub-divs
 
83
        domSetWidth(this.dialog.node, this.dialog.node.offsetWidth);
33
84
    
34
85
        // 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 );
 
86
        if (this.dialog.iframe) {
 
87
            this.SaveDimenssions();
 
88
            this.Restore();
 
89
        }
 
90
    }
 
91
 
 
92
    if (this.dialog.maximize_node)
 
93
        Event.observe(this.dialog.maximize_node, 'click', this.MaximizeBind );
 
94
 
 
95
    if ((this.allow_move)&&(this.dialog.titlebar))
 
96
        Event.observe(this.dialog.titlebar, 'mousedown', this.MoveBind );
 
97
 
 
98
    if (this.allow_resize)
 
99
        Event.observe(this.dialog.node, 'mousedown', this.ResizeBind );
 
100
 
42
101
    Event.observe(this.dialog.node, 'mousemove', this.MouseMoveBind );
43
102
    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
103
}
50
104
 
51
105
DIALOG_DRAGGER.prototype.Clean = function() {
52
 
    Event.stopObserving(this.dialog.maximize_node, 'click', this.MaximizeBind );
 
106
    if (this.dialog.maximize_node)
 
107
        Event.stopObserving(this.dialog.maximize_node, 'click', this.MaximizeBind );
 
108
 
 
109
    if ((this.allow_move)&&(this.dialog.titlebar))
 
110
        Event.stopObserving(this.dialog.titlebar, 'mousedown', this.MoveBind );
 
111
 
 
112
    if (this.allow_resize)
 
113
        Event.stopObserving(this.dialog.node, 'mousedown', this.ResizeBind );
 
114
 
53
115
    Event.stopObserving(this.dialog.node, 'mousemove', this.MouseMoveBind );
54
116
    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
117
}
58
118
 
59
119
DIALOG_DRAGGER.prototype.MouseMove = function(ev) {
65
125
        this.dialog.node.style.cursor = "";
66
126
        return;
67
127
    }
68
 
    
 
128
 
69
129
    var width = this.dialog.node.offsetWidth;
70
130
    var height = this.dialog.node.offsetHeight;
71
 
    
 
131
 
72
132
    var offset = domGetEventLayerOffset(ev);
 
133
    
73
134
    var xOff = offset[0];
74
135
    var yOff = offset[1];
75
 
  
 
136
    
 
137
    if (!this.float_mode) {
 
138
        var node_offset = domGetNodeOffset(this.dialog.node);
 
139
        xOff -= node_offset[0];
 
140
        yOff -= node_offset[1];
 
141
    }
 
142
    
76
143
    var resizeDirection = ""
77
 
    if (yOff < this.resizeCornerSize)
 
144
    if ((this.allow_resize_n)&&(yOff < this.resizeCornerSize))
78
145
        resizeDirection += "n";
79
 
    else if (yOff > (height - this.resizeCornerSize))
 
146
    else if ((this.allow_resize_s)&&(yOff > (height - this.resizeCornerSize)))
80
147
        resizeDirection += "s";
81
 
    if (xOff < this.resizeCornerSize)
 
148
    if ((this.allow_resize_w)&&(xOff < this.resizeCornerSize))
82
149
        resizeDirection += "w";
83
 
    else if (xOff > (width - this.resizeCornerSize))
 
150
    else if ((this.allow_resize_e)&&(xOff > (width - this.resizeCornerSize)))
84
151
        resizeDirection += "e";
85
152
 
86
153
    if (resizeDirection) {
117
184
 
118
185
DIALOG_DRAGGER.prototype.SaveDimenssions = function() {
119
186
    var node = this.dialog.node;
120
 
    var mnode = this.dialog.content;
121
187
 
122
188
    this.oldLeft = parseInt(domGetStyleProp(node, node.style.left, "left") ,10);
123
189
    this.oldTop = parseInt(domGetStyleProp(node, node.style.top, "top"), 10);
131
197
    this.corr_x = csize[0] - size[0];
132
198
    this.corr_y = csize[1] - size[1];
133
199
    
134
 
 
135
200
    this.oldWidth = size[0] - this.corr_x;//parseInt(domGetStyleProp(node, node.style.width, "width"), 10);
136
201
    this.oldHeight = size[1] - this.corr_y;//parseInt(domGetStyleProp(node, node.style.height, "height"), 10);
137
202
 
138
203
    node.style.width = this.oldWidth + "px";
139
204
    node.style.height = this.oldHeight + "px";
140
205
 
141
 
        // Obtaining content element size
142
 
    size = domGetNodeSize(mnode);
 
206
    if (this.ctrl_min) {
 
207
        node.style.minWidth = this.min_width + "px";
 
208
        node.style.minHeight = this.min_height + "px";
 
209
    }
 
210
 
 
211
    if (this.dialog.content) {
 
212
        var mnode = this.dialog.content;
 
213
            // Obtaining content element size
 
214
        size = domGetNodeSize(mnode);
143
215
 
144
216
//    mnode.style.width = size[0] + "px";
145
 
    mnode.style.height = size[1] + "px";
 
217
        mnode.style.height = size[1] + "px";
146
218
 
147
 
    var csize = domGetNodeSize(mnode);
 
219
        var csize = domGetNodeSize(mnode);
148
220
//    this.corr_cx = csize[0] - size[0];
149
 
    this.corr_cy = csize[1] - size[1];
 
221
        this.corr_cy = csize[1] - size[1];
150
222
 
151
223
//    this.cWidth = size[0] - this.corr_cx;
152
 
    this.cHeight = size[1] - this.corr_cy;
 
224
        this.cHeight = size[1] - this.corr_cy;
153
225
    
154
226
//    mnode.style.width = this.cWidth + "px";
155
 
    mnode.style.height = this.cHeight + "px";
 
227
        mnode.style.height = this.cHeight + "px";
 
228
    }
156
229
}
157
230
 
158
231
DIALOG_DRAGGER.prototype.Resize = function(ev) {
159
232
    var target = domGetEventTarget(ev);
160
233
    if (target != this.dialog.node) return;
161
 
    
 
234
 
162
235
    var node = this.dialog.node;
163
 
    var lnode = this.dialog.titlebar;
164
 
    
 
236
 
165
237
    Event.observe(document, 'mousemove', this.TrackBind );
166
238
    Event.observe(document, 'mouseup', this.DoneBind );
167
239
 
168
240
    this.in_resize = true;
169
241
 
170
242
        // 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);
 
243
    if (this.dialog.titlebar) {
 
244
        var tb = this.dialog.titlebar;
 
245
        var mh = parseInt(domGetStyleProp(tb, tb.style.maxHeight, "max-height"),10);
 
246
        if ((!mh)||((tb.offsetHeight - mh)>10)) {
 
247
            domSetWidth(node, node.offsetWidth);
 
248
            if (mh>0) domSetHeight(tb, mh);
 
249
            else domSetHeight(tb, 21);
 
250
        }
177
251
    }
178
252
    
179
 
    if (!this.label_width) {
180
 
        this.label_width = this.dialog.label.offsetWidth + this.dialog.label.offsetLeft;
 
253
    if (this.dialog.label) {
 
254
        if (!this.label_width) {
 
255
            this.label_width = this.dialog.label.offsetWidth + this.dialog.label.offsetLeft;
 
256
        }
181
257
    }
182
258
 
183
259
    var offset = domGetEventPageOffset(ev);
184
260
    this.xPosition = offset[0];
185
261
    this.yPosition = offset[1];
186
 
    
 
262
 
187
263
    this.SaveDimenssions();    
188
 
    
 
264
 
189
265
        // 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;
 
266
    if (this.dialog.titlebar) {
 
267
        var lnode = this.dialog.titlebar;
 
268
        var size = domGetNodeSize(lnode);
 
269
        size[1] += this.corr_y;
 
270
        if ((size[1] + 10) > this.minimumHeight) this.minimumHeight = size[1] + 10;
 
271
    }
193
272
}
194
273
 
195
274
DIALOG_DRAGGER.prototype.Restore = function(ev) {
235
314
 
236
315
DIALOG_DRAGGER.prototype.Track = function(ev) {
237
316
    var node = this.dialog.node;
238
 
    var mnode = this.dialog.content;
239
317
 
240
318
    if (this.in_resize) {
241
319
        var north = false;
243
321
        var east  = false;
244
322
        var west  = false;
245
323
        
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;
 
324
        if (this.resizeDirection.charAt(0) == "n") north = this.allow_resize_n;
 
325
        if (this.resizeDirection.charAt(0) == "s") south = this.allow_resize_s;
 
326
        if (this.resizeDirection.charAt(0) == "e" || this.resizeDirection.charAt(1) == "e") east = this.allow_resize_e;
 
327
        if (this.resizeDirection.charAt(0) == "w" || this.resizeDirection.charAt(1) == "w") west = this.allow_resize_w;
250
328
 
251
329
        var offset = domGetEventPageOffset(ev);
252
330
        var dx = offset[0] - this.xPosition;
284
362
            node.style.width = w + "px";
285
363
            if (west) node.style.left = (this.oldLeft - dx) + "px";
286
364
        }
287
 
        
 
365
 
288
366
        if (north || south) {
289
367
            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
 
                }
 
368
 
 
369
            if (this.dialog.content) {
 
370
                var mnode = this.dialog.content;
 
371
                if ((this.cHeight + dy) < 0) mnode.style.height = 0 + "px";
 
372
                else mnode.style.height = (this.cHeight  + dy) + "px";
 
373
                if (dy < 0) {
 
374
                    var size = domGetNodeSize(mnode);
 
375
                    var rdy = size[1] - this.corr_cy - this.cHeight;
 
376
                    if (rdy > dy) {
 
377
                        node.style.height = (this.oldHeight + rdy) + "px";
 
378
                    }
 
379
                }
298
380
            }
299
 
            
 
381
 
300
382
            if (north) node.style.top  = (this.oldTop  - dy) + "px";
301
383
        }
302
384
        
320
402
    if (this.in_move) {
321
403
        this.in_move = false;
322
404
    }
323
 
    
 
405
 
324
406
    Event.stopObserving(document, 'mousemove', this.TrackBind );
325
407
    Event.stopObserving(document, 'mouseup', this.DoneBind );
326
408
 
327
409
    Event.stop(ev);
 
410
 
 
411
    if (this.cb_end) {
 
412
        this.cb_end(this.cb_attr, this);
 
413
    }
328
414
}