|
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 if (!ed.settings.inline_styles) { |
|
58 args = tinymce.extend(args, { |
|
59 vspace : nl.vspace.value, |
|
60 hspace : nl.hspace.value, |
|
61 border : nl.border.value, |
|
62 align : getSelectValue(f, 'align') |
|
63 }); |
|
64 } else |
|
65 args.style = this.styleVal; |
|
66 |
|
67 tinymce.extend(args, { |
|
68 src : f.src.value, |
|
69 alt : f.alt.value, |
|
70 width : f.width.value, |
|
71 height : f.height.value |
|
72 }); |
|
73 |
|
74 el = ed.selection.getNode(); |
|
75 |
|
76 if (el && el.nodeName == 'IMG') { |
|
77 ed.dom.setAttribs(el, args); |
|
78 } else { |
|
79 ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" src="javascript:;" />'); |
|
80 ed.dom.setAttribs('__mce_tmp', args); |
|
81 ed.dom.setAttrib('__mce_tmp', 'id', ''); |
|
82 } |
|
83 |
|
84 tinyMCEPopup.close(); |
|
85 }, |
|
86 |
|
87 updateStyle : function() { |
|
88 var dom = tinyMCEPopup.dom, st, v, f = document.forms[0]; |
|
89 |
|
90 if (tinyMCEPopup.editor.settings.inline_styles) { |
|
91 st = tinyMCEPopup.dom.parseStyle(this.styleVal); |
|
92 |
|
93 // Handle align |
|
94 v = getSelectValue(f, 'align'); |
|
95 if (v) { |
|
96 if (v == 'left' || v == 'right') { |
|
97 st['float'] = v; |
|
98 delete st['vertical-align']; |
|
99 } else { |
|
100 st['vertical-align'] = v; |
|
101 delete st['float']; |
|
102 } |
|
103 } else { |
|
104 delete st['float']; |
|
105 delete st['vertical-align']; |
|
106 } |
|
107 |
|
108 // Handle border |
|
109 v = f.border.value; |
|
110 if (v || v == '0') { |
|
111 if (v == '0') |
|
112 st['border'] = '0'; |
|
113 else |
|
114 st['border'] = v + 'px solid black'; |
|
115 } else |
|
116 delete st['border']; |
|
117 |
|
118 // Handle hspace |
|
119 v = f.hspace.value; |
|
120 if (v) { |
|
121 delete st['margin']; |
|
122 st['margin-left'] = v + 'px'; |
|
123 st['margin-right'] = v + 'px'; |
|
124 } else { |
|
125 delete st['margin-left']; |
|
126 delete st['margin-right']; |
|
127 } |
|
128 |
|
129 // Handle vspace |
|
130 v = f.vspace.value; |
|
131 if (v) { |
|
132 delete st['margin']; |
|
133 st['margin-top'] = v + 'px'; |
|
134 st['margin-bottom'] = v + 'px'; |
|
135 } else { |
|
136 delete st['margin-top']; |
|
137 delete st['margin-bottom']; |
|
138 } |
|
139 |
|
140 // Merge |
|
141 st = tinyMCEPopup.dom.parseStyle(dom.serializeStyle(st)); |
|
142 this.styleVal = dom.serializeStyle(st); |
|
143 } |
|
144 }, |
|
145 |
|
146 getAttrib : function(e, at) { |
|
147 var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2; |
|
148 |
|
149 if (ed.settings.inline_styles) { |
|
150 switch (at) { |
|
151 case 'align': |
|
152 if (v = dom.getStyle(e, 'float')) |
|
153 return v; |
|
154 |
|
155 if (v = dom.getStyle(e, 'vertical-align')) |
|
156 return v; |
|
157 |
|
158 break; |
|
159 |
|
160 case 'hspace': |
|
161 v = dom.getStyle(e, 'margin-left') |
|
162 v2 = dom.getStyle(e, 'margin-right'); |
|
163 if (v && v == v2) |
|
164 return parseInt(v.replace(/[^0-9]/g, '')); |
|
165 |
|
166 break; |
|
167 |
|
168 case 'vspace': |
|
169 v = dom.getStyle(e, 'margin-top') |
|
170 v2 = dom.getStyle(e, 'margin-bottom'); |
|
171 if (v && v == v2) |
|
172 return parseInt(v.replace(/[^0-9]/g, '')); |
|
173 |
|
174 break; |
|
175 |
|
176 case 'border': |
|
177 v = 0; |
|
178 |
|
179 tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) { |
|
180 sv = dom.getStyle(e, 'border-' + sv + '-width'); |
|
181 |
|
182 // False or not the same as prev |
|
183 if (!sv || (sv != v && v !== 0)) { |
|
184 v = 0; |
|
185 return false; |
|
186 } |
|
187 |
|
188 if (sv) |
|
189 v = sv; |
|
190 }); |
|
191 |
|
192 if (v) |
|
193 return parseInt(v.replace(/[^0-9]/g, '')); |
|
194 |
|
195 break; |
|
196 } |
|
197 } |
|
198 |
|
199 if (v = dom.getAttrib(e, at)) |
|
200 return v; |
|
201 |
|
202 return ''; |
|
203 }, |
|
204 |
|
205 resetImageData : function() { |
|
206 var f = document.forms[0]; |
|
207 |
|
208 f.width.value = f.height.value = ""; |
|
209 }, |
|
210 |
|
211 updateImageData : function() { |
|
212 var f = document.forms[0], t = ImageDialog; |
|
213 |
|
214 if (f.width.value == "") |
|
215 f.width.value = t.preloadImg.width; |
|
216 |
|
217 if (f.height.value == "") |
|
218 f.height.value = t.preloadImg.height; |
|
219 }, |
|
220 |
|
221 getImageData : function() { |
|
222 var f = document.forms[0]; |
|
223 |
|
224 this.preloadImg = new Image(); |
|
225 this.preloadImg.onload = this.updateImageData; |
|
226 this.preloadImg.onerror = this.resetImageData; |
|
227 this.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.src.value); |
|
228 } |
|
229 }; |
|
230 |
|
231 ImageDialog.preInit(); |
|
232 tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog); |