1 |
3 |
ahitrov@rambler.ru |
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), 'img'); |
155 |
|
|
this.styleVal = dom.serializeStyle(st, 'img'); |
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); |