← Back to branch summary

~vcs-imports/almidon/trunk

« back to all changes in this revision

Viewing changes to core/pub2/js/tiny_mce/plugins/advimage/js/image.js

  • Committer: christian
  • Date: 2010-09-11 20:55:52 UTC
  • Revision ID: svn-v4:924a4236-293c-0410-b38f-c0813de1d4fd:trunk:381
Change name to pub directory

Show diffs side-by-side

added added

removed removed

Lines of Context:
core/pub2/js/tiny_mce/plugins/advimage/js/image.js
1
 
var ImageDialog = {
2
 
        preInit : function() {
3
 
                var url;
4
 
 
5
 
                tinyMCEPopup.requireLangPack();
6
 
 
7
 
                if (url = tinyMCEPopup.getParam("external_image_list_url"))
8
 
                        document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>');
9
 
        },
10
 
 
11
 
        init : function(ed) {
12
 
                var f = document.forms[0], nl = f.elements, ed = tinyMCEPopup.editor, dom = ed.dom, n = ed.selection.getNode();
13
 
 
14
 
                tinyMCEPopup.resizeToInnerSize();
15
 
                this.fillClassList('class_list');
16
 
                this.fillFileList('src_list', 'tinyMCEImageList');
17
 
                this.fillFileList('over_list', 'tinyMCEImageList');
18
 
                this.fillFileList('out_list', 'tinyMCEImageList');
19
 
                TinyMCE_EditableSelects.init();
20
 
 
21
 
                if (n.nodeName == 'IMG') {
22
 
                        nl.src.value = dom.getAttrib(n, 'src');
23
 
                        nl.width.value = dom.getAttrib(n, 'width');
24
 
                        nl.height.value = dom.getAttrib(n, 'height');
25
 
                        nl.alt.value = dom.getAttrib(n, 'alt');
26
 
                        nl.title.value = dom.getAttrib(n, 'title');
27
 
                        nl.vspace.value = this.getAttrib(n, 'vspace');
28
 
                        nl.hspace.value = this.getAttrib(n, 'hspace');
29
 
                        nl.border.value = this.getAttrib(n, 'border');
30
 
                        selectByValue(f, 'align', this.getAttrib(n, 'align'));
31
 
                        selectByValue(f, 'class_list', dom.getAttrib(n, 'class'), true, true);
32
 
                        nl.style.value = dom.getAttrib(n, 'style');
33
 
                        nl.id.value = dom.getAttrib(n, 'id');
34
 
                        nl.dir.value = dom.getAttrib(n, 'dir');
35
 
                        nl.lang.value = dom.getAttrib(n, 'lang');
36
 
                        nl.usemap.value = dom.getAttrib(n, 'usemap');
37
 
                        nl.longdesc.value = dom.getAttrib(n, 'longdesc');
38
 
                        nl.insert.value = ed.getLang('update');
39
 
 
40
 
                        if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseover')))
41
 
                                nl.onmouseoversrc.value = dom.getAttrib(n, 'onmouseover').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
42
 
 
43
 
                        if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseout')))
44
 
                                nl.onmouseoutsrc.value = dom.getAttrib(n, 'onmouseout').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
45
 
 
46
 
                        if (ed.settings.inline_styles) {
47
 
                                // Move attribs to styles
48
 
                                if (dom.getAttrib(n, 'align'))
49
 
                                        this.updateStyle('align');
50
 
 
51
 
                                if (dom.getAttrib(n, 'hspace'))
52
 
                                        this.updateStyle('hspace');
53
 
 
54
 
                                if (dom.getAttrib(n, 'border'))
55
 
                                        this.updateStyle('border');
56
 
 
57
 
                                if (dom.getAttrib(n, 'vspace'))
58
 
                                        this.updateStyle('vspace');
59
 
                        }
60
 
                }
61
 
 
62
 
                // Setup browse button
63
 
                document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','src','image','theme_advanced_image');
64
 
                if (isVisible('srcbrowser'))
65
 
                        document.getElementById('src').style.width = '260px';
66
 
 
67
 
                // Setup browse button
68
 
                document.getElementById('onmouseoversrccontainer').innerHTML = getBrowserHTML('overbrowser','onmouseoversrc','image','theme_advanced_image');
69
 
                if (isVisible('overbrowser'))
70
 
                        document.getElementById('onmouseoversrc').style.width = '260px';
71
 
 
72
 
                // Setup browse button
73
 
                document.getElementById('onmouseoutsrccontainer').innerHTML = getBrowserHTML('outbrowser','onmouseoutsrc','image','theme_advanced_image');
74
 
                if (isVisible('outbrowser'))
75
 
                        document.getElementById('onmouseoutsrc').style.width = '260px';
76
 
 
77
 
                // If option enabled default contrain proportions to checked
78
 
                if (ed.getParam("advimage_constrain_proportions", true))
79
 
                        f.constrain.checked = true;
80
 
 
81
 
                // Check swap image if valid data
82
 
                if (nl.onmouseoversrc.value || nl.onmouseoutsrc.value)
83
 
                        this.setSwapImage(true);
84
 
                else
85
 
                        this.setSwapImage(false);
86
 
 
87
 
                this.changeAppearance();
88
 
                this.showPreviewImage(nl.src.value, 1);
89
 
        },
90
 
 
91
 
        insert : function(file, title) {
92
 
                var ed = tinyMCEPopup.editor, t = this, f = document.forms[0];
93
 
 
94
 
                if (f.src.value === '') {
95
 
                        if (ed.selection.getNode().nodeName == 'IMG') {
96
 
                                ed.dom.remove(ed.selection.getNode());
97
 
                                ed.execCommand('mceRepaint');
98
 
                        }
99
 
 
100
 
                        tinyMCEPopup.close();
101
 
                        return;
102
 
                }
103
 
 
104
 
                if (tinyMCEPopup.getParam("accessibility_warnings", 1)) {
105
 
                        if (!f.alt.value) {
106
 
                                tinyMCEPopup.confirm(tinyMCEPopup.getLang('advimage_dlg.missing_alt'), function(s) {
107
 
                                        if (s)
108
 
                                                t.insertAndClose();
109
 
                                });
110
 
 
111
 
                                return;
112
 
                        }
113
 
                }
114
 
 
115
 
                t.insertAndClose();
116
 
        },
117
 
 
118
 
        insertAndClose : function() {
119
 
                var ed = tinyMCEPopup.editor, f = document.forms[0], nl = f.elements, v, args = {}, el;
120
 
 
121
 
                tinyMCEPopup.restoreSelection();
122
 
 
123
 
                // Fixes crash in Safari
124
 
                if (tinymce.isWebKit)
125
 
                        ed.getWin().focus();
126
 
 
127
 
                if (!ed.settings.inline_styles) {
128
 
                        args = {
129
 
                                vspace : nl.vspace.value,
130
 
                                hspace : nl.hspace.value,
131
 
                                border : nl.border.value,
132
 
                                align : getSelectValue(f, 'align')
133
 
                        };
134
 
                } else {
135
 
                        // Remove deprecated values
136
 
                        args = {
137
 
                                vspace : '',
138
 
                                hspace : '',
139
 
                                border : '',
140
 
                                align : ''
141
 
                        };
142
 
                }
143
 
 
144
 
                tinymce.extend(args, {
145
 
                        src : nl.src.value,
146
 
                        width : nl.width.value,
147
 
                        height : nl.height.value,
148
 
                        alt : nl.alt.value,
149
 
                        title : nl.title.value,
150
 
                        'class' : getSelectValue(f, 'class_list'),
151
 
                        style : nl.style.value,
152
 
                        id : nl.id.value,
153
 
                        dir : nl.dir.value,
154
 
                        lang : nl.lang.value,
155
 
                        usemap : nl.usemap.value,
156
 
                        longdesc : nl.longdesc.value
157
 
                });
158
 
 
159
 
                args.onmouseover = args.onmouseout = '';
160
 
 
161
 
                if (f.onmousemovecheck.checked) {
162
 
                        if (nl.onmouseoversrc.value)
163
 
                                args.onmouseover = "this.src='" + nl.onmouseoversrc.value + "';";
164
 
 
165
 
                        if (nl.onmouseoutsrc.value)
166
 
                                args.onmouseout = "this.src='" + nl.onmouseoutsrc.value + "';";
167
 
                }
168
 
 
169
 
                el = ed.selection.getNode();
170
 
 
171
 
                if (el && el.nodeName == 'IMG') {
172
 
                        ed.dom.setAttribs(el, args);
173
 
                } else {
174
 
                        ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', {skip_undo : 1});
175
 
                        ed.dom.setAttribs('__mce_tmp', args);
176
 
                        ed.dom.setAttrib('__mce_tmp', 'id', '');
177
 
                        ed.undoManager.add();
178
 
                }
179
 
 
180
 
                tinyMCEPopup.close();
181
 
        },
182
 
 
183
 
        getAttrib : function(e, at) {
184
 
                var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2;
185
 
 
186
 
                if (ed.settings.inline_styles) {
187
 
                        switch (at) {
188
 
                                case 'align':
189
 
                                        if (v = dom.getStyle(e, 'float'))
190
 
                                                return v;
191
 
 
192
 
                                        if (v = dom.getStyle(e, 'vertical-align'))
193
 
                                                return v;
194
 
 
195
 
                                        break;
196
 
 
197
 
                                case 'hspace':
198
 
                                        v = dom.getStyle(e, 'margin-left')
199
 
                                        v2 = dom.getStyle(e, 'margin-right');
200
 
 
201
 
                                        if (v && v == v2)
202
 
                                                return parseInt(v.replace(/[^0-9]/g, ''));
203
 
 
204
 
                                        break;
205
 
 
206
 
                                case 'vspace':
207
 
                                        v = dom.getStyle(e, 'margin-top')
208
 
                                        v2 = dom.getStyle(e, 'margin-bottom');
209
 
                                        if (v && v == v2)
210
 
                                                return parseInt(v.replace(/[^0-9]/g, ''));
211
 
 
212
 
                                        break;
213
 
 
214
 
                                case 'border':
215
 
                                        v = 0;
216
 
 
217
 
                                        tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) {
218
 
                                                sv = dom.getStyle(e, 'border-' + sv + '-width');
219
 
 
220
 
                                                // False or not the same as prev
221
 
                                                if (!sv || (sv != v && v !== 0)) {
222
 
                                                        v = 0;
223
 
                                                        return false;
224
 
                                                }
225
 
 
226
 
                                                if (sv)
227
 
                                                        v = sv;
228
 
                                        });
229
 
 
230
 
                                        if (v)
231
 
                                                return parseInt(v.replace(/[^0-9]/g, ''));
232
 
 
233
 
                                        break;
234
 
                        }
235
 
                }
236
 
 
237
 
                if (v = dom.getAttrib(e, at))
238
 
                        return v;
239
 
 
240
 
                return '';
241
 
        },
242
 
 
243
 
        setSwapImage : function(st) {
244
 
                var f = document.forms[0];
245
 
 
246
 
                f.onmousemovecheck.checked = st;
247
 
                setBrowserDisabled('overbrowser', !st);
248
 
                setBrowserDisabled('outbrowser', !st);
249
 
 
250
 
                if (f.over_list)
251
 
                        f.over_list.disabled = !st;
252
 
 
253
 
                if (f.out_list)
254
 
                        f.out_list.disabled = !st;
255
 
 
256
 
                f.onmouseoversrc.disabled = !st;
257
 
                f.onmouseoutsrc.disabled  = !st;
258
 
        },
259
 
 
260
 
        fillClassList : function(id) {
261
 
                var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
262
 
 
263
 
                if (v = tinyMCEPopup.getParam('theme_advanced_styles')) {
264
 
                        cl = [];
265
 
 
266
 
                        tinymce.each(v.split(';'), function(v) {
267
 
                                var p = v.split('=');
268
 
 
269
 
                                cl.push({'title' : p[0], 'class' : p[1]});
270
 
                        });
271
 
                } else
272
 
                        cl = tinyMCEPopup.editor.dom.getClasses();
273
 
 
274
 
                if (cl.length > 0) {
275
 
                        lst.options.length = 0;
276
 
                        lst.options[lst.options.length] = new Option(tinyMCEPopup.getLang('not_set'), '');
277
 
 
278
 
                        tinymce.each(cl, function(o) {
279
 
                                lst.options[lst.options.length] = new Option(o.title || o['class'], o['class']);
280
 
                        });
281
 
                } else
282
 
                        dom.remove(dom.getParent(id, 'tr'));
283
 
        },
284
 
 
285
 
        fillFileList : function(id, l) {
286
 
                var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
287
 
 
288
 
                l = window[l];
289
 
                lst.options.length = 0;
290
 
 
291
 
                if (l && l.length > 0) {
292
 
                        lst.options[lst.options.length] = new Option('', '');
293
 
 
294
 
                        tinymce.each(l, function(o) {
295
 
                                lst.options[lst.options.length] = new Option(o[0], o[1]);
296
 
                        });
297
 
                } else
298
 
                        dom.remove(dom.getParent(id, 'tr'));
299
 
        },
300
 
 
301
 
        resetImageData : function() {
302
 
                var f = document.forms[0];
303
 
 
304
 
                f.elements.width.value = f.elements.height.value = '';
305
 
        },
306
 
 
307
 
        updateImageData : function(img, st) {
308
 
                var f = document.forms[0];
309
 
 
310
 
                if (!st) {
311
 
                        f.elements.width.value = img.width;
312
 
                        f.elements.height.value = img.height;
313
 
                }
314
 
 
315
 
                this.preloadImg = img;
316
 
        },
317
 
 
318
 
        changeAppearance : function() {
319
 
                var ed = tinyMCEPopup.editor, f = document.forms[0], img = document.getElementById('alignSampleImg');
320
 
 
321
 
                if (img) {
322
 
                        if (ed.getParam('inline_styles')) {
323
 
                                ed.dom.setAttrib(img, 'style', f.style.value);
324
 
                        } else {
325
 
                                img.align = f.align.value;
326
 
                                img.border = f.border.value;
327
 
                                img.hspace = f.hspace.value;
328
 
                                img.vspace = f.vspace.value;
329
 
                        }
330
 
                }
331
 
        },
332
 
 
333
 
        changeHeight : function() {
334
 
                var f = document.forms[0], tp, t = this;
335
 
 
336
 
                if (!f.constrain.checked || !t.preloadImg) {
337
 
                        return;
338
 
                }
339
 
 
340
 
                if (f.width.value == "" || f.height.value == "")
341
 
                        return;
342
 
 
343
 
                tp = (parseInt(f.width.value) / parseInt(t.preloadImg.width)) * t.preloadImg.height;
344
 
                f.height.value = tp.toFixed(0);
345
 
        },
346
 
 
347
 
        changeWidth : function() {
348
 
                var f = document.forms[0], tp, t = this;
349
 
 
350
 
                if (!f.constrain.checked || !t.preloadImg) {
351
 
                        return;
352
 
                }
353
 
 
354
 
                if (f.width.value == "" || f.height.value == "")
355
 
                        return;
356
 
 
357
 
                tp = (parseInt(f.height.value) / parseInt(t.preloadImg.height)) * t.preloadImg.width;
358
 
                f.width.value = tp.toFixed(0);
359
 
        },
360
 
 
361
 
        updateStyle : function(ty) {
362
 
                var dom = tinyMCEPopup.dom, st, v, f = document.forms[0], img = dom.create('img', {style : dom.get('style').value});
363
 
 
364
 
                if (tinyMCEPopup.editor.settings.inline_styles) {
365
 
                        // Handle align
366
 
                        if (ty == 'align') {
367
 
                                dom.setStyle(img, 'float', '');
368
 
                                dom.setStyle(img, 'vertical-align', '');
369
 
 
370
 
                                v = getSelectValue(f, 'align');
371
 
                                if (v) {
372
 
                                        if (v == 'left' || v == 'right')
373
 
                                                dom.setStyle(img, 'float', v);
374
 
                                        else
375
 
                                                img.style.verticalAlign = v;
376
 
                                }
377
 
                        }
378
 
 
379
 
                        // Handle border
380
 
                        if (ty == 'border') {
381
 
                                dom.setStyle(img, 'border', '');
382
 
 
383
 
                                v = f.border.value;
384
 
                                if (v || v == '0') {
385
 
                                        if (v == '0')
386
 
                                                img.style.border = '0';
387
 
                                        else
388
 
                                                img.style.border = v + 'px solid black';
389
 
                                }
390
 
                        }
391
 
 
392
 
                        // Handle hspace
393
 
                        if (ty == 'hspace') {
394
 
                                dom.setStyle(img, 'marginLeft', '');
395
 
                                dom.setStyle(img, 'marginRight', '');
396
 
 
397
 
                                v = f.hspace.value;
398
 
                                if (v) {
399
 
                                        img.style.marginLeft = v + 'px';
400
 
                                        img.style.marginRight = v + 'px';
401
 
                                }
402
 
                        }
403
 
 
404
 
                        // Handle vspace
405
 
                        if (ty == 'vspace') {
406
 
                                dom.setStyle(img, 'marginTop', '');
407
 
                                dom.setStyle(img, 'marginBottom', '');
408
 
 
409
 
                                v = f.vspace.value;
410
 
                                if (v) {
411
 
                                        img.style.marginTop = v + 'px';
412
 
                                        img.style.marginBottom = v + 'px';
413
 
                                }
414
 
                        }
415
 
 
416
 
                        // Merge
417
 
                        dom.get('style').value = dom.serializeStyle(dom.parseStyle(img.style.cssText), 'img');
418
 
                }
419
 
        },
420
 
 
421
 
        changeMouseMove : function() {
422
 
        },
423
 
 
424
 
        showPreviewImage : function(u, st) {
425
 
                if (!u) {
426
 
                        tinyMCEPopup.dom.setHTML('prev', '');
427
 
                        return;
428
 
                }
429
 
 
430
 
                if (!st && tinyMCEPopup.getParam("advimage_update_dimensions_onchange", true))
431
 
                        this.resetImageData();
432
 
 
433
 
                u = tinyMCEPopup.editor.documentBaseURI.toAbsolute(u);
434
 
 
435
 
                if (!st)
436
 
                        tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this);" onerror="ImageDialog.resetImageData();" />');
437
 
                else
438
 
                        tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this, 1);" />');
439
 
        }
440
 
};
441
 
 
442
 
ImageDialog.preInit();
443
 
tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog);