Ticket #1567: image.html

File image.html, 9.9 KB (added by B_aniaczek, 16 years ago)

Dialog

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' || imgType == 'border' )
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( FCKLang.wikiImgStartTyping ) ;
195                else
196                        SetSearchMessage( FCKLang.wikiImgTooShort ) ;
197                return ;
198        }
199
200        SetSearchMessage( FCKLang.wikiImgStopTyping ) ;
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( FCKLang.wikiImgSearching ) ;
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 plural( thingsToCount, found0, found1, foundSeveral, foundMore ) {     /* english: use the same foundSeveral and foundMore */
219        var cnt = thingsToCount.length;
220
221        if ( cnt == 0 || ( cnt == 1 && thingsToCount[0].length == 0 ) )
222                return ( found0 );
223
224        if ( cnt == 1 )
225                return ( found1 );
226
227        var foundMsg = foundMore;
228        switch ( cnt % 10 ) {
229                case 2:
230                case 3:
231                case 4:
232                        if ( cnt / 10 % 10 != 1)
233                                foundMsg = foundSeveral;
234                        break;
235                default:
236                        break;
237        }
238        return ( foundMsg.replace( '%s', cnt ) );
239}
240
241function LoadSearchResults( result )
242{
243        var results = result.responseText.Trim().split( '\n' ) ;
244        var select = GetE( 'xWikiResults' ) ;
245
246        ClearSearch() ;
247
248        SetSearchMessage( plural( results,
249                                                                FCKLang.wikiImgSearchNothing,
250                                                                FCKLang.wikiImgSearch1Found,
251                                                                FCKLang.wikiImgSearchSeveral,
252                                                                FCKLang.wikiImgSearchALot ) );
253
254        for ( var i = 0 ; i < results.length ; i++ )
255                FCKTools.AddSelectOption( select, results[i], results[i] ) ;
256}
257
258function ClearSearch()
259{
260        var select = GetE( 'xWikiResults' ) ;
261
262        while ( select.options.length > 0 )
263                select.remove( 0 )
264}
265
266function SetSearchMessage( message )
267{
268        GetE('xWikiSearchStatus').innerHTML = message ;
269}
270
271function SetUrl( url )
272{
273        if ( url.length > 0 )
274                GetE('txtUrl').value = url ;
275}
276
277function UpdatePreviewFromAjax( response )
278{
279        var eImgPreview = window.document.getElementById('prevImg');
280        eImgPreview.src = response.responseText ;
281        SetAttribute(eImgPreview, "width" , '180px' ) ;
282        SetAttribute(eImgPreview, "height", '130px' ) ;
283        //UpdateImage( eImgPreview, response.responseText ) ;
284}
285
286function UpdatePreview()
287{
288        var ajaxArg = GetE('txtUrl').value + '|180x130px';
289        oEditor.window.parent.sajax_request_type = 'GET' ;
290        oEditor.window.parent.sajax_do_call( 'wfSajaxGetImageUrl', [ajaxArg], UpdatePreviewFromAjax ) ;
291}
292
293        </script>
294</head>
295<body scroll="no" style="overflow: hidden">
296        <div id="divInfo">
297                <table cellspacing="1" cellpadding="1" border="0" width="100%">
298                        <tr valign="center">
299                                <td>
300                                        <span fcklang="wikiImgFileName"></span><br />
301                                        <input id="txtUrl" style="width: 100%" type="text" onkeyup="OnUrlChange();" />
302                                        <br />
303                                        <span fcklang="wikiImgAutomatic"></span> <b>(<span fcklang="wikiImgStartTyping" id="xWikiSearchStatus"></span>)</b><br />
304                                        <select id="xWikiResults" size="5" style="width: 100%; height: 70px" onclick="SetUrl( this.value );UpdatePreview();">
305                                                <option fcklang="wikiImgNotice1"></option>
306                                                <option fcklang="wikiImgNotice2"></option>
307                                        </select>
308                                </td>
309                                <td width="180px" height="130px"><div style="width:180; height:130; border:solid 1px black;" valign="center" align="center">
310                                        <img id="prevImg" width="180px" height="130px" alt="Preview"></div>
311                                </td>
312                        </tr>
313                        <tr>
314                                <td colspan="2">
315                                        <span fcklang="wikiImgCaption"></span><br />
316                                        <input id="txtAlt" style="width: 100%" type="text"><br />
317                                </td>
318                        </tr>
319                        <tr>
320                                <td valign="top" colspan="2">
321                                        <table cellspacing="0" cellpadding="0" border="0">
322                                                <tr>
323                                                        <td nowrap="nowrap">
324                                                                <span fcklang="wikiImgType"></span><br />
325                                                                <select id="xType">
326                                                                        <option value="" selected="selected"></option>
327                                                                        <option fcklang="wikiImgTypeThumb" value="thumb"></option>
328                                                                        <option fcklang="wikiImgTypeFrame" value="frame"></option>
329                                                                        <option fcklang="wikiImgTypeBorder" value="border"></option>
330                                                                </select>
331                                                        </td>
332                                                        <td style="padding-left:7px;">
333                                                                <span fcklang="DlgImgAlign">Align</span><br />
334                                                                <select id="cmbAlign" onchange="UpdatePreview();">
335                                                                        <option value="" selected></option>
336                                                                        <option fcklang="DlgImgAlignRight" value="right"></option>
337                                                                        <option fcklang="DlgImgAlignLeft" value="left"></option>
338                                                                        <option fcklang="wikiImgAlignLeft" value="center"></option>
339                                                                </select>
340                                                        </td>
341                                                        <td style="padding-left:7px;">
342                                                                <span fcklang="DlgImgWidth"></span><br />
343                                                                <input type="text" size="3" id="txtWidth">
344                                                        </td>
345                                                        <td style="padding-left:7px;">
346                                                                <span fcklang="DlgImgHeight"></span><br />
347                                                                <input type="text" size="3" id="txtHeight">
348                                                        </td>
349                                                </tr>
350                                        </table>
351                                </td>
352                        </tr>
353                </table>
354        </div>
355</body>
356</html>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy