Ticket #1293: image.html

File image.html, 9.4 KB (added by barns, 12 years ago)

Image dialog with preview patch

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<!--
3 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
4 * Copyright (C) 2003-2007 Frederico Caldeira Knabben
5 *
6 * == BEGIN LICENSE ==
7 *
8 * Licensed under the terms of any of the following licenses at your
9 * choice:
10 *
11 *  - GNU General Public License Version 2 or later (the "GPL")
12 *    http://www.gnu.org/licenses/gpl.html
13 *
14 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
15 *    http://www.gnu.org/licenses/lgpl.html
16 *
17 *  - Mozilla Public License Version 1.1 or later (the "MPL")
18 *    http://www.mozilla.org/MPL/MPL-1.1.html
19 *
20 * == END LICENSE ==
21 *
22 * Image dialog window.
23-->
24<html>
25<head>
26        <title>Image Properties</title>
27        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
28        <meta name="robots" content="noindex, nofollow" />
29        <script type="text/javascript">
30
31var oEditor             = window.parent.InnerDialogLoaded() ;
32var FCK                 = oEditor.FCK ;
33var FCKLang             = oEditor.FCKLang ;
34var FCKConfig   = oEditor.FCKConfig ;
35var FCKRegexLib = oEditor.FCKRegexLib ;
36var FCKTools    = oEditor.FCKTools ;
37
38document.write( '<script src="' + FCKConfig.BasePath + 'dialog/common/fck_dialog_common.js" type="text/javascript"><\/script>' ) ;
39
40        </script>
41        <script type="text/javascript">
42
43// Get the selected image (if available).
44var oImage = FCK.Selection.GetSelectedElement() ;
45
46if ( oImage && oImage.tagName != 'IMG' )
47        oImage = null ;
48
49window.onload = function()
50{
51        // Translate the dialog box texts.
52        oEditor.FCKLanguageManager.TranslatePage(document) ;
53
54        // Load the selected element information (if any).
55        LoadSelection() ;
56
57//      UpdateOriginal() ;
58
59        window.parent.SetAutoSize( true ) ;
60        window.parent.SetOkButton( true ) ;
61}
62
63function LoadSelection()
64{
65        if ( ! oImage ) return ;
66
67        var sUrl = GetAttribute( oImage, '_fcksavedurl', '' ) ;
68        if ( sUrl.length == 0 )
69                sUrl = GetAttribute( oImage, 'src', '' ) ;
70
71        GetE('txtUrl').value    = GetAttribute( oImage, '_fck_mw_filename', '' ) ;
72        GetE('txtAlt').value    = GetAttribute( oImage, 'alt', '' ) ;
73        GetE('xType').value             = GetAttribute( oImage, '_fck_mw_type', '' ) ;
74        GetE('cmbAlign').value  = GetAttribute( oImage, '_fck_mw_location', '' ) ;
75
76        GetE('txtWidth').value  = GetAttribute( oImage, '_fck_mw_width', '' ) ;
77        GetE('txtHeight').value = GetAttribute( oImage, '_fck_mw_height', '' ) ;
78       
79        UpdatePreview();
80}
81
82//#### The OK button was hit.
83function Ok()
84{
85        if ( GetE('txtUrl').value.length == 0 )
86        {
87                GetE('txtUrl').focus() ;
88                return false ;
89        }
90       
91        window.parent.document.getElementById( 'btnOk' ).disabled = true ;
92        window.parent.document.getElementById( 'btnCancel' ).disabled = true ;
93
94        var imgName             = GetE('txtUrl').value ;
95        var imgCaption  = GetE('txtAlt').value ;
96        var imgType             = GetE('xType').value ;
97        var imgLocation = GetE('cmbAlign').value ;
98        var imgWidth    = GetE('txtWidth').value ;
99        var imgHeight   = GetE('txtHeight').value ;
100
101        var ajaxArg = imgName ;
102
103        if ( imgType.length > 0 )
104                ajaxArg += '|' + imgType ;
105
106        if ( imgLocation.length > 0 )
107                ajaxArg += '|' + imgLocation ;
108
109        if ( imgWidth.length > 0 )
110        {
111                ajaxArg += '|' + imgWidth ;
112
113                if ( imgHeight.length > 0 )
114                        ajaxArg += 'x' + imgHeight ;
115
116                ajaxArg += 'px' ;
117        }
118
119        if ( imgCaption.length > 0 )
120                ajaxArg += '|' + imgCaption ;
121
122        oEditor.window.parent.sajax_request_type = 'GET' ;
123        oEditor.window.parent.sajax_do_call( 'wfSajaxGetImageUrl', [ajaxArg], UpdateImageFromAjax ) ;
124
125        return false ;
126}
127
128function UpdateImageFromAjax( response )
129{
130        var bHasImage = ( oImage != null ) ;
131
132        if ( !bHasImage )
133                oImage = FCK.CreateElement( 'IMG' ) ;
134        else
135                oEditor.FCKUndo.SaveUndoStep() ;
136
137        UpdateImage( oImage, response.responseText ) ;
138
139        // Call it using setTimeout to avoid a strange behavior in Firefox.
140        window.setTimeout( window.parent.Cancel, 0 ) ;
141}
142
143function UpdateImage( e, realUrl )
144{
145        var imgType = GetE('xType').value ;
146        var imgLocation = GetE('cmbAlign').value ;
147
148        SetAttribute( e, "_fck_mw_filename", GetE('txtUrl').value ) ;
149        SetAttribute( e, "alt", GetE('txtAlt').value ) ;
150        SetAttribute( e, "_fck_mw_type", imgType ) ;
151        SetAttribute( e, "_fck_mw_location", imgLocation ) ;
152        SetAttribute( e, "_fck_mw_width", GetE('txtWidth').value ) ;
153        SetAttribute( e, "_fck_mw_height", GetE('txtHeight').value ) ;
154
155        SetAttribute( e, "width" , GetE('txtWidth').value ) ;
156        SetAttribute( e, "height", GetE('txtHeight').value ) ;
157
158        if ( imgType == 'thumb' || imgType == 'frame' )
159        {
160                e.className = 'fck_mw_frame' ;
161
162                if ( imgLocation.length == 0 )
163                        imgLocation = 'right' ;
164        }
165
166        if ( imgLocation.length > 0 )
167                e.className += ' fck_mw_' + imgLocation ;
168
169        if ( realUrl.length == 0 )
170        {
171                e.className += ' fck_mw_notfound' ;
172                realUrl = 'about:blank' ;
173        }
174       
175        e.src = realUrl ;
176        SetAttribute( e, "_fcksavedurl", realUrl ) ;
177}
178
179var searchTimer ;
180
181//#### Called while the user types the URL.
182function OnUrlChange()
183{
184        var link = GetE('txtUrl').value.Trim() ;
185
186        if ( searchTimer )
187                window.clearTimeout( searchTimer ) ;
188
189        if ( link.length < 3  )
190        {
191                ClearSearch() ;
192
193                if ( link.length == 0 )
194                        SetSearchMessage( 'start typing in the above field' ) ;
195                else
196                        SetSearchMessage( 'too short... type more' ) ;
197                return ;
198        }
199
200        SetSearchMessage( 'stop typing to search' ) ;
201        searchTimer = window.setTimeout( StartSearch, 500 ) ;
202}
203
204function StartSearch()
205{
206        var link = GetE('txtUrl').value.Trim() ;
207
208        if ( link.length < 3  )
209                return ;
210
211        SetSearchMessage( 'searching...' ) ;
212
213        // Make an Ajax search for the pages.
214        oEditor.window.parent.sajax_request_type = 'GET' ;
215        oEditor.window.parent.sajax_do_call( 'wfSajaxSearchImageFCKeditor', [link], LoadSearchResults ) ;
216}
217
218function LoadSearchResults( result )
219{
220        var results = result.responseText.Trim().split( '\n' ) ;
221        var select = GetE( 'xWikiResults' ) ;
222
223        ClearSearch() ;
224
225        if ( results.length == 0 || ( results.length == 1 && results[0].length == 0 ) )
226        {
227                SetSearchMessage( 'no images found' ) ;
228        }
229        else
230        {
231                if ( results.length == 1 )
232                        SetSearchMessage( 'one image found' ) ;
233                else
234                        SetSearchMessage( results.length + ' images found' ) ;
235
236                for ( var i = 0 ; i < results.length ; i++ )
237                        FCKTools.AddSelectOption( select, results[i], results[i] ) ;
238        }
239}
240
241function ClearSearch()
242{
243        var select = GetE( 'xWikiResults' ) ;
244
245        while ( select.options.length > 0 )
246                select.remove( 0 )
247}
248
249function SetSearchMessage( message )
250{
251        GetE('xWikiSearchStatus').innerHTML = message ;
252}
253
254function SetUrl( url )
255{
256        if ( url.length > 0 )
257                GetE('txtUrl').value = url ;
258}
259
260function UpdatePreviewFromAjax( response )
261{
262        var eImgPreview = window.document.getElementById('prevImg');
263        eImgPreview.src = response.responseText ;
264        SetAttribute(eImgPreview, "width" , '180px' ) ;
265        SetAttribute(eImgPreview, "height", '130px' ) ;
266        //UpdateImage( eImgPreview, response.responseText ) ;
267}
268
269function UpdatePreview()
270{
271        var ajaxArg = GetE('txtUrl').value + '|180x130px';
272        oEditor.window.parent.sajax_request_type = 'GET' ;
273        oEditor.window.parent.sajax_do_call( 'wfSajaxGetImageUrl', [ajaxArg], UpdatePreviewFromAjax ) ;
274}
275
276        </script>
277</head>
278<body scroll="no" style="overflow: hidden">
279        <div id="divInfo">
280                <table cellspacing="1" cellpadding="1" border="0" width="100%">
281                        <tr valign="center">
282                                <td>
283                                        <span>Image file name</span><br />
284                                        <input id="txtUrl" style="width: 100%" type="text" onkeyup="OnUrlChange();" />
285                                        <br />
286                                        Automatic search results (<span id="xWikiSearchStatus">start typing in the above field</span>)<br />
287                                        <select id="xWikiResults" size="5" style="width: 100%; height: 70px" onclick="SetUrl( this.value );UpdatePreview();">
288                                        </select>
289                                </td>
290                                <td width="180px" height="130px"><div style="width:180; height:130; border:solid 1px black;" valign="center" align="center">
291                                        <img id="prevImg" width="180px" height="130px" alt="Preview"></div>
292                                </td>
293                        </tr>
294                        <tr>
295                                <td colspan="2">
296                                        <span>Caption</span><br />
297                                        <input id="txtAlt" style="width: 100%" type="text"><br />
298                                </td>
299                        </tr>
300                        <tr>
301                                <td valign="top" colspan="2">
302                                        <table cellspacing="0" cellpadding="0" border="0">
303                                                <tr>
304                                                        <td nowrap="nowrap">
305                                                                Special Type<br />
306                                                                <select id="xType">
307                                                                        <option value="" selected="selected"></option>
308                                                                        <option value="thumb">Thumbnail</option>
309                                                                        <option value="frame">Frame</option>
310                                                                        <option value="border">Border</option>
311                                                                </select>
312                                                        </td>
313                                                        <td style="padding-left:7px;">
314                                                                <span fcklang="DlgImgAlign">Align</span><br />
315                                                                <select id="cmbAlign" onchange="UpdatePreview();">
316                                                                        <option value="" selected></option>
317                                                                        <option fcklang="DlgImgAlignRight" value="right">Right</option>
318                                                                        <option fcklang="DlgImgAlignLeft" value="left">Left</option>
319                                                                        <option value="center">Center</option>
320                                                                </select>
321                                                        </td>
322                                                        <td style="padding-left:7px;">
323                                                                <span fcklang="DlgImgWidth">Width</span><br />
324                                                                <input type="text" size="3" id="txtWidth">
325                                                        </td>
326                                                        <td style="padding-left:7px;">
327                                                                <span fcklang="DlgImgHeight">Height</span><br />
328                                                                <input type="text" size="3" id="txtHeight">
329                                                        </td>
330                                                </tr>
331                                        </table>
332                                </td>
333                        </tr>
334                </table>
335        </div>
336</body>
337</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy