|
1 attachHook('editor_gui_toolbar', 'guied_insert_toolbar(ta_wrapper, response.toolbar_templates);'); |
|
2 |
|
3 function guied_insert_toolbar(ta_wrapper, toolbar_templates) |
|
4 { |
|
5 // Init toolbar |
|
6 var toolbar = ''; |
|
7 var head = new templateParser(toolbar_templates.toolbar_start); |
|
8 var button = new templateParser(toolbar_templates.toolbar_button); |
|
9 var label = new templateParser(toolbar_templates.toolbar_label); |
|
10 var tail = new templateParser(toolbar_templates.toolbar_end); |
|
11 |
|
12 button.assign_bool({ |
|
13 show_title: true |
|
14 }); |
|
15 |
|
16 toolbar += head.run(); |
|
17 |
|
18 var buttons = ['bold*', 'italic*', 'underline*', '|', 'intlink', 'extlink', 'image']; |
|
19 |
|
20 // Button: Bold |
|
21 var i; |
|
22 var hide_label = false; |
|
23 for ( i = 0; i < buttons.length; i++ ) |
|
24 { |
|
25 if ( buttons[i] == '|' ) |
|
26 { |
|
27 label.assign_vars({ |
|
28 TITLE: '<img alt="|" src="' + scriptPath + '/plugins/guieditor/icons/separator.png" />' |
|
29 }); |
|
30 toolbar += label.run(); |
|
31 } |
|
32 else |
|
33 { |
|
34 if ( buttons[i].charAt(buttons[i].length - 1) == '*' ) |
|
35 { |
|
36 hide_label = true; |
|
37 buttons[i] = buttons[i].substr(0, buttons[i].length - 1); |
|
38 button.assign_bool({ show_title: false }); |
|
39 } |
|
40 button.assign_vars({ |
|
41 TITLE: $lang.get('guied_btn_' + buttons[i]), |
|
42 IMAGE: cdnPath + '/plugins/guieditor/icons/' + buttons[i] + '.png', |
|
43 FLAGS: 'href="#" onclick="guied_act(\'' + buttons[i] + '\'); return false;"' |
|
44 }); |
|
45 toolbar += button.run(); |
|
46 if ( hide_label ) |
|
47 { |
|
48 button.assign_bool({ show_title: true }); |
|
49 hide_label = false; |
|
50 } |
|
51 } |
|
52 } |
|
53 |
|
54 // End of toolbar |
|
55 toolbar += tail.run(); |
|
56 |
|
57 var wrapperdiv = document.createElement('div'); |
|
58 wrapperdiv.innerHTML = toolbar; |
|
59 ta_wrapper.appendChild(wrapperdiv); |
|
60 } |
|
61 |
|
62 function guied_act(action) |
|
63 { |
|
64 var textarea = document.getElementById('ajaxEditArea'); |
|
65 switch(action) |
|
66 { |
|
67 case 'bold': |
|
68 guied_insert_wikitext_tag(textarea, "'''", "'''", $lang.get('guied_sample_bold')); |
|
69 break; |
|
70 case 'italic': |
|
71 guied_insert_wikitext_tag(textarea, "''", "''", $lang.get('guied_sample_italic')); |
|
72 break; |
|
73 case 'underline': |
|
74 guied_insert_wikitext_tag(textarea, "__", "__", $lang.get('guied_sample_underline')); |
|
75 break; |
|
76 case 'intlink': |
|
77 load_component('autofill'); |
|
78 var selection = guied_get_selection(textarea); |
|
79 var il_mp = miniPrompt(function(div) |
|
80 { |
|
81 div.innerHTML += '<h3>' + $lang.get('guied_intlink_title') + '</h3>'; |
|
82 div.innerHTML += '<table border="0" cellspacing="5" cellpadding="0" style="width: 100%;"> \ |
|
83 <tr> \ |
|
84 <td valign="top" style="white-space: nowrap;"> \ |
|
85 ' + $lang.get('guied_intlink_lbl_page') + ' \ |
|
86 </td> \ |
|
87 <td valign="top"> \ |
|
88 <input type="text" id="guied_intlink_page" class="autofill page" style="width: 100%;" /><br /> \ |
|
89 <small>' + $lang.get('guied_intlink_af_hint') + '</small> \ |
|
90 </td> \ |
|
91 </tr> \ |
|
92 <tr> \ |
|
93 <td valign="top" style="white-space: nowrap;"> \ |
|
94 ' + $lang.get('guied_intlink_lbl_text') + ' \ |
|
95 </td> \ |
|
96 <td valign="top"> \ |
|
97 <input type="text" id="guied_intlink_text" style="width: 100%;" /><br /> \ |
|
98 <small>' + $lang.get('guied_intlink_text_hint') + '</small> \ |
|
99 </td> \ |
|
100 </tr>'; |
|
101 div.innerHTML += '<p style="text-align: right;"> \ |
|
102 <a class="abutton abutton_blue" onclick="guied_intlink_finish(this); return false;" href="#">' + $lang.get('guied_btn_insert') + '</a> \ |
|
103 <a class="abutton abutton_red" onclick="miniPromptDestroy(this); return false;" href="#">' + $lang.get('etc_cancel') + '</a> \ |
|
104 </p>'; |
|
105 }); |
|
106 |
|
107 // This fixes autofill |
|
108 il_mp.style.zIndex = getHighestZ() + 1; |
|
109 |
|
110 autofill_init_element(document.getElementById('guied_intlink_page'), {}); |
|
111 document.getElementById('guied_intlink_page').focus(); |
|
112 $('#guied_intlink_text').val(selection); |
|
113 |
|
114 break; |
|
115 case 'extlink': |
|
116 load_component('autofill'); |
|
117 var selection = guied_get_selection(textarea); |
|
118 var il_mp = miniPrompt(function(div) |
|
119 { |
|
120 div.innerHTML += '<h3>' + $lang.get('guied_extlink_title') + '</h3>'; |
|
121 div.innerHTML += '<table border="0" cellspacing="5" cellpadding="0" style="width: 100%;"> \ |
|
122 <tr> \ |
|
123 <td valign="top" style="white-space: nowrap;"> \ |
|
124 ' + $lang.get('guied_extlink_lbl_link') + ' \ |
|
125 </td> \ |
|
126 <td valign="top"> \ |
|
127 <input type="text" id="guied_extlink_link" style="width: 100%;" /><br /> \ |
|
128 <small>' + $lang.get('guied_extlink_link_hint') + '</small> \ |
|
129 </td> \ |
|
130 </tr> \ |
|
131 <tr> \ |
|
132 <td valign="top" style="white-space: nowrap;"> \ |
|
133 ' + $lang.get('guied_extlink_lbl_text') + ' \ |
|
134 </td> \ |
|
135 <td valign="top"> \ |
|
136 <input type="text" id="guied_extlink_text" style="width: 100%;" /><br /> \ |
|
137 <small>' + $lang.get('guied_extlink_text_hint') + '</small> \ |
|
138 </td> \ |
|
139 </tr>'; |
|
140 div.innerHTML += '<p style="text-align: right;"> \ |
|
141 <a class="abutton abutton_blue" onclick="guied_extlink_finish(this); return false;" href="#">' + $lang.get('guied_btn_insert') + '</a> \ |
|
142 <a class="abutton abutton_red" onclick="miniPromptDestroy(this); return false;" href="#">' + $lang.get('etc_cancel') + '</a> \ |
|
143 </p>'; |
|
144 }); |
|
145 |
|
146 document.getElementById('guied_extlink_link').focus(); |
|
147 $('#guied_extlink_text').val(selection); |
|
148 |
|
149 break; |
|
150 case 'image': |
|
151 // Fuck yeah. |
|
152 load_component('autofill'); |
|
153 var selection = guied_get_selection(textarea); |
|
154 var il_mp = miniPrompt(function(div) |
|
155 { |
|
156 div.innerHTML += '<h3>' + $lang.get('guied_image_title') + '</h3>'; |
|
157 div.innerHTML += '<table border="0" cellspacing="5" cellpadding="0" style="width: 100%;"> \ |
|
158 <tr> \ |
|
159 <td valign="top" style="white-space: nowrap;"> \ |
|
160 ' + $lang.get('guied_image_lbl_image') + ' \ |
|
161 </td> \ |
|
162 <td valign="top"> \ |
|
163 <img id="guied_image_preview" src="' + cdnPath + '/images/spacer.gif" style="display: block;" /> \ |
|
164 <input type="text" id="guied_image_file" class="autofill guied_image" style="width: 100%;" onblur="guied_refresh_image();" /><br /> \ |
|
165 <small>' + $lang.get('guied_image_af_hint') + '</small> \ |
|
166 <div id="guied_upload_body" style="padding: 4px 0;"> \ |
|
167 <a class="abutton icon abutton_green" style="background-image: url(' + scriptPath + '/plugins/guieditor/icons/add.png);" href="#" onclick="guied_image_show_uploader(); return false;">' + $lang.get('guied_image_btn_upload') + '</a> \ |
|
168 </div> \ |
|
169 </td> \ |
|
170 </tr> \ |
|
171 <tr> \ |
|
172 <td valign="top" style="white-space: nowrap;"> \ |
|
173 ' + $lang.get('guied_image_lbl_caption') + ' \ |
|
174 </td> \ |
|
175 <td valign="top"> \ |
|
176 <input type="text" id="guied_image_caption" style="width: 100%;" /> \ |
|
177 </td> \ |
|
178 </tr>'; |
|
179 div.innerHTML += '<p style="text-align: right;"> \ |
|
180 <a class="abutton abutton_blue" onclick="guied_image_finish(this); return false;" href="#">' + $lang.get('guied_btn_insert') + '</a> \ |
|
181 <a class="abutton abutton_red" onclick="miniPromptDestroy(this); return false;" href="#">' + $lang.get('etc_cancel') + '</a> \ |
|
182 </p>'; |
|
183 }); |
|
184 |
|
185 // This fixes autofill |
|
186 il_mp.style.zIndex = getHighestZ() + 1; |
|
187 |
|
188 autofill_init_element(document.getElementById('guied_image_file'), {}); |
|
189 document.getElementById('guied_image_file').focus(); |
|
190 $('#guied_image_caption').val(selection); |
|
191 |
|
192 break; |
|
193 |
|
194 } |
|
195 } |
|
196 |
|
197 function guied_intlink_finish(insertbtn) |
|
198 { |
|
199 var page = $('#guied_intlink_page').val(); |
|
200 var text = $('#guied_intlink_text').val(); |
|
201 var tag = text == '' ? '[[' + page + ']]' : '[[' + page + '|' + text + ']]'; |
|
202 guied_replace_selection(document.getElementById('ajaxEditArea'), tag); |
|
203 |
|
204 miniPromptDestroy(insertbtn); |
|
205 } |
|
206 |
|
207 function guied_extlink_finish(insertbtn) |
|
208 { |
|
209 var link = $('#guied_extlink_link').val(); |
|
210 var text = $('#guied_extlink_text').val(); |
|
211 var tag = text == '' ? '[' + link + ']' : '[' + link + ' ' + text + ']'; |
|
212 guied_replace_selection(document.getElementById('ajaxEditArea'), tag); |
|
213 |
|
214 miniPromptDestroy(insertbtn); |
|
215 } |
|
216 |
|
217 var guied_upl_oldhtml = ''; |
|
218 function guied_image_show_uploader() |
|
219 { |
|
220 var div = document.getElementById('guied_upload_body'); |
|
221 guied_upl_oldhtml = $(div).html(); |
|
222 $(div).html('<form action="' + makeUrlNS('Special', 'UploadFile') + '" target="uploadwin" onsubmit="return guied_upload_popup();" method="post" enctype="multipart/form-data">' + |
|
223 '<p><input type="file" style="width: 100%;" name="data" id="guied_upload_file" /></p>' + |
|
224 '<input type="hidden" value="" name="rename" />' + |
|
225 '<input type="hidden" value="" name="comments" />' + |
|
226 '<p><input type="submit" name="doit" value="' + $lang.get('upload_btn_upload') + '"></p>' + |
|
227 '</form>'); |
|
228 } |
|
229 |
|
230 |
|
231 function guied_upload_popup() |
|
232 { |
|
233 window.open('about:blank', 'uploadwin', 'width=640,height=480,status=no,toolbar=no,menubar=no,location=no,resizable=yes,scrollbars=yes'); |
|
234 var filename = $('#guied_upload_file').val(); |
|
235 if ( filename == "" ) |
|
236 return false; |
|
237 filename = filename.split(/[\/\\\\]/); |
|
238 filename = filename[ filename.length - 1 ]; |
|
239 // sneaky little trick to make onblur get called |
|
240 $('#guied_image_file').val(sanitize_page_id(filename)).focus(); |
|
241 setTimeout('$("#guied_upload_body").html(guied_upl_oldhtml)', 100); |
|
242 return true; |
|
243 } |
|
244 |
|
245 function guied_refresh_image() |
|
246 { |
|
247 $('#guied_image_preview').attr('src', makeUrlNS('Special', 'DownloadFile/' + $('#guied_image_file').val(), 'preview&width=200&height=400')).css('margin-bottom', '5px'); |
|
248 } |
|
249 |
|
250 function guied_image_finish() |
|
251 { |
|
252 // yeah... working on this. |
|
253 } |
|
254 |
|
255 // Client detection from MediaWiki |
|
256 var clientPC = navigator.userAgent.toLowerCase(); // Get client info |
|
257 var is_gecko = ((clientPC.indexOf('gecko')!=-1) && (clientPC.indexOf('spoofer')==-1) |
|
258 && (clientPC.indexOf('khtml') == -1) && (clientPC.indexOf('netscape/7.0')==-1)); |
|
259 |
|
260 // Function adapted from MediaWiki/phpBB |
|
261 function guied_insert_wikitext_tag(txtarea, tagOpen, tagClose, sampleText) |
|
262 { |
|
263 // IE |
|
264 if (document.selection && !is_gecko) { |
|
265 var theSelection = document.selection.createRange().text; |
|
266 if (!theSelection) |
|
267 theSelection=sampleText; |
|
268 txtarea.focus(); |
|
269 if (theSelection.charAt(theSelection.length - 1) == " ") { // exclude ending space char, if any |
|
270 theSelection = theSelection.substring(0, theSelection.length - 1); |
|
271 document.selection.createRange().text = tagOpen + theSelection + tagClose + " "; |
|
272 } else { |
|
273 document.selection.createRange().text = tagOpen + theSelection + tagClose; |
|
274 } |
|
275 |
|
276 // Mozilla |
|
277 } else if(txtarea.selectionStart || txtarea.selectionStart == '0') { |
|
278 var replaced = false; |
|
279 var startPos = txtarea.selectionStart; |
|
280 var endPos = txtarea.selectionEnd; |
|
281 if (endPos-startPos) |
|
282 replaced = true; |
|
283 var scrollTop = txtarea.scrollTop; |
|
284 var myText = (txtarea.value).substring(startPos, endPos); |
|
285 if (!myText) |
|
286 myText=sampleText; |
|
287 if (myText.charAt(myText.length - 1) == " ") { // exclude ending space char, if any |
|
288 subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " "; |
|
289 } else { |
|
290 subst = tagOpen + myText + tagClose; |
|
291 } |
|
292 txtarea.value = txtarea.value.substring(0, startPos) + subst + |
|
293 txtarea.value.substring(endPos, txtarea.value.length); |
|
294 txtarea.focus(); |
|
295 //set new selection |
|
296 if (replaced) { |
|
297 var cPos = startPos+(tagOpen.length+myText.length+tagClose.length); |
|
298 txtarea.selectionStart = cPos; |
|
299 txtarea.selectionEnd = cPos; |
|
300 } else { |
|
301 txtarea.selectionStart = startPos+tagOpen.length; |
|
302 txtarea.selectionEnd = startPos+tagOpen.length+myText.length; |
|
303 } |
|
304 txtarea.scrollTop = scrollTop; |
|
305 |
|
306 // All other browsers get no toolbar. |
|
307 } |
|
308 // reposition cursor if possible |
|
309 if (txtarea.createTextRange) |
|
310 txtarea.caretPos = document.selection.createRange().duplicate(); |
|
311 } |
|
312 |
|
313 function guied_replace_selection(txtarea, text) |
|
314 { |
|
315 // IE |
|
316 if (document.selection && !is_gecko) { |
|
317 txtarea.focus(); |
|
318 document.selection.createRange().text = text; |
|
319 |
|
320 // Mozilla |
|
321 } else if(txtarea.selectionStart || txtarea.selectionStart == '0') { |
|
322 var replaced = false; |
|
323 var startPos = txtarea.selectionStart; |
|
324 var endPos = txtarea.selectionEnd; |
|
325 if (endPos-startPos) |
|
326 replaced = true; |
|
327 var scrollTop = txtarea.scrollTop; |
|
328 var myText = (txtarea.value).substring(startPos, endPos); |
|
329 if (!myText) |
|
330 myText = ''; |
|
331 txtarea.value = txtarea.value.substring(0, startPos) + text + |
|
332 txtarea.value.substring(endPos, txtarea.value.length); |
|
333 txtarea.focus(); |
|
334 //set new selection |
|
335 var cPos = startPos+text.length; |
|
336 txtarea.selectionStart = cPos; |
|
337 txtarea.selectionEnd = cPos; |
|
338 txtarea.scrollTop = scrollTop; |
|
339 |
|
340 } |
|
341 // reposition cursor if possible |
|
342 if (txtarea.createTextRange) |
|
343 txtarea.caretPos = document.selection.createRange().duplicate(); |
|
344 } |
|
345 |
|
346 function guied_get_selection(txtarea, sampleText) |
|
347 { |
|
348 if ( !sampleText ) |
|
349 sampleText = ''; |
|
350 |
|
351 // IE |
|
352 if (document.selection && !is_gecko) { |
|
353 var theSelection = document.selection.createRange().text; |
|
354 if (!theSelection) |
|
355 theSelection=sampleText; |
|
356 return theSelection; |
|
357 |
|
358 // Mozilla |
|
359 } else if(txtarea.selectionStart || txtarea.selectionStart == '0') { |
|
360 var replaced = false; |
|
361 var startPos = txtarea.selectionStart; |
|
362 var endPos = txtarea.selectionEnd; |
|
363 if (endPos-startPos) |
|
364 replaced = true; |
|
365 var scrollTop = txtarea.scrollTop; |
|
366 var myText = (txtarea.value).substring(startPos, endPos); |
|
367 if (!myText) |
|
368 myText=sampleText; |
|
369 return myText; |
|
370 } |
|
371 return sampleText; |
|
372 } |
|
373 |
|
374 // |
|
375 // Autofill schema for images |
|
376 // |
|
377 |
|
378 var autofill_schemas = autofill_schemas || {}; |
|
379 autofill_schemas.guied_image = { |
|
380 init: function(element, fillclass, params) |
|
381 { |
|
382 $(element).autocomplete(makeUrlNS('Special', 'Autofill', 'type=' + fillclass) + '&userinput=', { |
|
383 minChars: 3, |
|
384 formatItem: function(row, _, __) |
|
385 { |
|
386 var html = '<div style="float: left; margin-right: 4px;"><img alt="" src="' + row.thumbnail + '" /></div>'; |
|
387 html += row.title; |
|
388 html += '<div style="clear: both;"></div>'; |
|
389 return html; |
|
390 }, |
|
391 showWhenNoResults: true, |
|
392 noResultsHTML: '<tr><td class="row1" style="font-size: smaller;">' + $lang.get('user_autofill_msg_no_suggestions') + '</td></tr>', |
|
393 onItemSelect: function(li) |
|
394 { |
|
395 // $('#guied_image_file').val(li.selectValue); |
|
396 guied_refresh_image(); |
|
397 } |
|
398 }); |
|
399 } |
|
400 |
|
401 }; |