|
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() { |
|
12 var f = document.forms[0], ed = tinyMCEPopup.editor; |
|
13 |
|
14 // Setup browse button |
|
15 document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','src','image','theme_advanced_image'); |
|
16 if (isVisible('srcbrowser')) |
|
17 document.getElementById('src').style.width = '180px'; |
|
18 |
|
19 e = ed.selection.getNode(); |
|
20 |
|
21 this.fillFileList('image_list', 'tinyMCEImageList'); |
|
22 |
|
23 if (e.nodeName == 'IMG') { |
|
24 f.src.value = ed.dom.getAttrib(e, 'src'); |
|
25 f.alt.value = ed.dom.getAttrib(e, 'alt'); |
|
26 f.border.value = this.getAttrib(e, 'border'); |
|
27 f.vspace.value = this.getAttrib(e, 'vspace'); |
|
28 f.hspace.value = this.getAttrib(e, 'hspace'); |
|
29 f.width.value = ed.dom.getAttrib(e, 'width'); |
|
30 f.height.value = ed.dom.getAttrib(e, 'height'); |
|
31 f.insert.value = ed.getLang('update'); |
|
32 this.styleVal = ed.dom.getAttrib(e, 'style'); |
|
33 selectByValue(f, 'image_list', f.src.value); |
|
34 selectByValue(f, 'align', this.getAttrib(e, 'align')); |
|
35 this.updateStyle(); |
|
36 } |
|
37 }, |
|
38 |
|
39 fillFileList : function(id, l) { |
|
40 var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl; |
|
41 |
|
42 l = window[l]; |
|
43 |
|
44 if (l && l.length > 0) { |
|
45 lst.options[lst.options.length] = new Option('', ''); |
|
46 |
|
47 tinymce.each(l, function(o) { |
|
48 lst.options[lst.options.length] = new Option(o[0], o[1]); |
|
49 }); |
|
50 } else |
|
51 dom.remove(dom.getParent(id, 'tr')); |
|
52 }, |
|
53 |
|
54 update : function() { |
|
55 var f = document.forms[0], nl = f.elements, ed = tinyMCEPopup.editor, args = {}, el; |
|
56 |
|
57 tinyMCEPopup.restoreSelection(); |
|
58 |
|
59 if (f.src.value === '') { |
|
60 if (ed.selection.getNode().nodeName == 'IMG') { |
|
61 ed.dom.remove(ed.selection.getNode()); |
|
62 ed.execCommand('mceRepaint'); |
|
63 } |
|
64 |
|
65 tinyMCEPopup.close(); |
|
66 return; |
|
67 } |
|
68 |
|
69 if (!ed.settings.inline_styles) { |
|
70 args = tinymce.extend(args, { |
|
71 vspace : nl.vspace.value, |
|
72 hspace : nl.hspace.value, |
|
73 border : nl.border.value, |
|
74 align : getSelectValue(f, 'align') |
|
75 }); |
|
76 } else |
|
77 args.style = this.styleVal; |
|
78 |
|
79 tinymce.extend(args, { |
|
80 src : f.src.value, |
|
81 alt : f.alt.value, |
|
82 width : f.width.value, |
|
83 height : f.height.value |
|
84 }); |
|
85 |
|
86 el = ed.selection.getNode(); |
|
87 |
|
88 if (el && el.nodeName == 'IMG') { |
|
89 ed.dom.setAttribs(el, args); |
|
90 } else { |
|
91 ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', {skip_undo : 1}); |
|
92 ed.dom.setAttribs('__mce_tmp', args); |
|
93 ed.dom.setAttrib('__mce_tmp', 'id', ''); |
|
94 ed.undoManager.add(); |
|
95 } |
|
96 |
|
97 tinyMCEPopup.close(); |
|
98 }, |
|
99 |
|
100 updateStyle : function() { |
|
101 var dom = tinyMCEPopup.dom, st, v, f = document.forms[0]; |
|
102 |
|
103 if (tinyMCEPopup.editor.settings.inline_styles) { |
|
104 st = tinyMCEPopup.dom.parseStyle(this.styleVal); |
|
105 |
|
106 // Handle align |
|
107 v = getSelectValue(f, 'align'); |
|
108 if (v) { |
|
109 if (v == 'left' || v == 'right') { |
|
110 st['float'] = v; |
|
111 delete st['vertical-align']; |
|
112 } else { |
|
113 st['vertical-align'] = v; |
|
114 delete st['float']; |
|
115 } |
|
116 } else { |
|
117 delete st['float']; |
|
118 delete st['vertical-align']; |
|
119 } |
|
120 |
|
121 // Handle border |
|
122 v = f.border.value; |
|
123 if (v || v == '0') { |
|
124 if (v == '0') |
|
125 st['border'] = '0'; |
|
126 else |
|
127 st['border'] = v + 'px solid black'; |
|
128 } else |
|
129 delete st['border']; |
|
130 |
|
131 // Handle hspace |
|
132 v = f.hspace.value; |
|
133 if (v) { |
|
134 delete st['margin']; |
|
135 st['margin-left'] = v + 'px'; |
|
136 st['margin-right'] = v + 'px'; |
|
137 } else { |
|
138 delete st['margin-left']; |
|
139 delete st['margin-right']; |
|
140 } |
|
141 |
|
142 // Handle vspace |
|
143 v = f.vspace.value; |
|
144 if (v) { |
|
145 delete st['margin']; |
|
146 st['margin-top'] = v + 'px'; |
|
147 st['margin-bottom'] = v + 'px'; |
|
148 } else { |
|
149 delete st['margin-top']; |
|
150 delete st['margin-bottom']; |
|
151 } |
|
152 |
|
153 // Merge |
|
154 st = tinyMCEPopup.dom.parseStyle(dom.serializeStyle(st)); |
|
155 this.styleVal = dom.serializeStyle(st); |
|
156 } |
|
157 }, |
|
158 |
|
159 getAttrib : function(e, at) { |
|
160 var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2; |
|
161 |
|
162 if (ed.settings.inline_styles) { |
|
163 switch (at) { |
|
164 case 'align': |
|
165 if (v = dom.getStyle(e, 'float')) |
|
166 return v; |
|
167 |
|
168 if (v = dom.getStyle(e, 'vertical-align')) |
|
169 return v; |
|
170 |
|
171 break; |
|
172 |
|
173 case 'hspace': |
|
174 v = dom.getStyle(e, 'margin-left') |
|
175 v2 = dom.getStyle(e, 'margin-right'); |
|
176 if (v && v == v2) |
|
177 return parseInt(v.replace(/[^0-9]/g, '')); |
|
178 |
|
179 break; |
|
180 |
|
181 case 'vspace': |
|
182 v = dom.getStyle(e, 'margin-top') |
|
183 v2 = dom.getStyle(e, 'margin-bottom'); |
|
184 if (v && v == v2) |
|
185 return parseInt(v.replace(/[^0-9]/g, '')); |
|
186 |
|
187 break; |
|
188 |
|
189 case 'border': |
|
190 v = 0; |
|
191 |
|
192 tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) { |
|
193 sv = dom.getStyle(e, 'border-' + sv + '-width'); |
|
194 |
|
195 // False or not the same as prev |
|
196 if (!sv || (sv != v && v !== 0)) { |
|
197 v = 0; |
|
198 return false; |
|
199 } |
|
200 |
|
201 if (sv) |
|
202 v = sv; |
|
203 }); |
|
204 |
|
205 if (v) |
|
206 return parseInt(v.replace(/[^0-9]/g, '')); |
|
207 |
|
208 break; |
|
209 } |
|
210 } |
|
211 |
|
212 if (v = dom.getAttrib(e, at)) |
|
213 return v; |
|
214 |
|
215 return ''; |
|
216 }, |
|
217 |
|
218 resetImageData : function() { |
|
219 var f = document.forms[0]; |
|
220 |
|
221 f.width.value = f.height.value = ""; |
|
222 }, |
|
223 |
|
224 updateImageData : function() { |
|
225 var f = document.forms[0], t = ImageDialog; |
|
226 |
|
227 if (f.width.value == "") |
|
228 f.width.value = t.preloadImg.width; |
|
229 |
|
230 if (f.height.value == "") |
|
231 f.height.value = t.preloadImg.height; |
|
232 }, |
|
233 |
|
234 getImageData : function() { |
|
235 var f = document.forms[0]; |
|
236 |
|
237 this.preloadImg = new Image(); |
|
238 this.preloadImg.onload = this.updateImageData; |
|
239 this.preloadImg.onerror = this.resetImageData; |
|
240 this.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.src.value); |
|
241 } |
|
242 }; |
|
243 |
|
244 ImageDialog.preInit(); |
|
245 tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog); |