ba94f8318d74fd7bb3aa47a1053164e78705c1b9
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / htmlarea / plugins / DefaultImage / popups / insert_image.html
1 <!--
2 /***************************************************************
3 * Copyright notice
4 *
5 * (c) 2002-2004, interactivetools.com, inc.
6 * (c) 2003-2004 dynarch.com
7 * (c) 2004-2008 Stanislas Rolland <stanislas.rolland(arobas)fructifor.ca>
8 * All rights reserved
9 *
10 * This script is part of the TYPO3 project. The TYPO3 project is
11 * free software; you can redistribute it and/or modify
12 * it under the terms of the GNU General Public License as published by
13 * the Free Software Foundation; either version 2 of the License, or
14 * (at your option) any later version.
15 *
16 * The GNU General Public License can be found at
17 * http://www.gnu.org/copyleft/gpl.html.
18 * A copy is found in the textfile GPL.txt and important notices to the license
19 * from the author is found in LICENSE.txt distributed with these scripts.
20 *
21 *
22 * This script is distributed in the hope that it will be useful,
23 * but WITHOUT ANY WARRANTY; without even the implied warranty of
24 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
25 * GNU General Public License for more details.
26 *
27 * This script is a modified version of a script published under the htmlArea License.
28 * A copy of the htmlArea License may be found in the textfile HTMLAREA_LICENSE.txt.
29 *
30 * This copyright notice MUST APPEAR in all copies of the script!
31 ***************************************************************/
32 /*
33 * Insert Image window for TYPO3 htmlArea RTE
34 *
35 * TYPO3 SVN ID: $Id$
36 */
37 -->
38 <html class="popupwin">
39 <head>
40 <title>Insert Image</title>
41 <meta http-equiv="Content-Style-Type" content="text/css" />
42 <script type="text/javascript">
43 /*<![CDATA[*/
44 <!--
45 var dialog = window.opener.HTMLArea.Dialog["DefaultImage"];
46 function Init() {
47 dialog.initialize(false, true);
48 if (dialog.plugin.removeItems) {
49 var items = dialog.plugin.removeItems;
50 for (var i = 0, length = items.length; i < length; ++i) {
51 if (document.getElementById(items[i])) document.getElementById(items[i]).style.display = "none";
52 }
53 }
54 var param = dialog.arguments;
55 if (param) {
56 document.getElementById("f_url").value = param["f_url"];
57 document.getElementById("f_alt").value = param["f_alt"];
58 document.getElementById("f_border").value = param["f_border"];
59 var select = document.getElementById("f_align");
60 for (var i = select.options.length; --i >= 0;) {
61 if (param["f_align"] == select.options[i].value) {
62 select.selectedIndex = i;
63 break;
64 }
65 }
66 document.getElementById("f_top").value = param["f_top"];
67 document.getElementById("f_right").value = param["f_right"];
68 document.getElementById("f_bottom").value = param["f_bottom"];
69 document.getElementById("f_left").value = param["f_left"];
70 var select = document.getElementById("f_float");
71 for (var i = select.options.length; --i >= 0;) {
72 if (param["f_float"] == select.options[i].value) {
73 select.selectedIndex = i;
74 break;
75 }
76 }
77 window.ipreview.location.replace(param.f_url);
78 }
79 dialog.resize();
80 document.getElementById("f_url").focus();
81 return false;
82 };
83
84 function onOK() {
85 var required = { "f_url": "image_url_required" };
86 for (var i in required) {
87 var el = document.getElementById(i);
88 if (!el.value) {
89 alert(dialog.plugin.localize(required[i]));
90 el.focus();
91 return false;
92 }
93 }
94 // pass data back to the calling window
95 var fields = ["f_url", "f_alt", "f_align", "f_border", "f_top", "f_right", "f_bottom", "f_left", "f_float"];
96 var param = new Object();
97 for (var i in fields) {
98 var id = fields[i];
99 var el = document.getElementById(id);
100 param[id] = el.value;
101 }
102 dialog.performAction(param);
103 return false;
104 };
105
106 function onCancel() {
107 dialog.close();
108 return false;
109 };
110
111 function onPreview() {
112 var f_url = document.getElementById("f_url");
113 var url = f_url.value;
114 if (!url) {
115 alert(dialog.plugin.localize("image_url_first"));
116 f_url.focus();
117 return false;
118 }
119 window.ipreview.location.replace(url);
120 return false;
121 };
122 // -->
123 /*]]>*/
124 </script>
125 </head>
126 <body class="popupwin" onload="Init();">
127 <div class="title">Insert Image</div>
128 <form action="" method="get">
129 <label for="f_url" class="field">Image URL:</label>
130 <input type="text" id="f_url" name="url" size="65" title="Enter the image URL here" />
131 <button name="preview" onclick="return onPreview();" title="Preview the image in a new window">Preview</button>
132 <div class="space"></div>
133 <div id="alt">
134 <label for="f_alt" class="field">Alternate text:</label>
135 <input type="text" name="alt" id="f_alt" size="80" title="For browsers that dont support images" />
136 </div>
137 <div class="space"></div>
138 <fieldset id="layout" class="floating">
139 <legend>Layout</legend>
140 <ul>
141 <li id="align">
142 <label for="f_align" class="fl">Image alignment:</label>
143 <select class="alignment" size="1" name="align" id="f_align" title="Positioning of this image">
144 <option value="bottom">Bottom</option>
145 <option value="middle" selected="selected">Middle</option>
146 <option value="top">Top</option>
147 </select>
148 </li>
149 <li id="border">
150 <label for="f_border" class="fl">Border thickness:</label>
151 <input type="text" name="border" id="f_border" size="5" title="Leave empty for no border" />
152 </li>
153 <li id="float">
154 <label for="f_float" class="fl">Float:</label>
155 <select class="float" size="1" name="style" id="f_float" title="Where the image should float">
156 <option value="none">Non-floating</option>
157 <option value="left">Left</option>
158 <option value="right">Right</option>
159 </select>
160 </li>
161 </ul>
162 </fieldset>
163 <fieldset id="padding">
164 <legend>Spacing and padding</legend>
165 <ul>
166 <li id="paddingTop">
167 <label for="f_top" class="fl">Top:</label>
168 <input type="text" name="f_top" id="f_top" size="5" title="Top padding" />
169 </li>
170 <li id="paddingRight">
171 <label for="f_right" class="fl">Right:</label>
172 <input type="text" name="f_right" id="f_right" size="5" title="Right padding" />
173 </li>
174 <li id="paddingBottom">
175 <label for="f_bottom" class="fl">Bottom:</label>
176 <input type="text" name="f_bottom" id="f_bottom" size="5" title="Bottom padding" />
177 </li>
178 <li id="paddingLeft">
179 <label for="f_left" class="fl">Left:</label>
180 <input type="text" name="f_left" id="f_left" size="5" title="Left padding" />
181 </li>
182 </ul>
183 </fieldset>
184 <div class="space" style="clear: both;"></div>
185 <fieldset>
186 <legend>Image Preview</legend>
187 <div class="imagepreview">
188 <iframe name="ipreview" id="ipreview" frameborder="0" src="";></iframe>
189 </div>
190 </fieldset>
191 <div class="buttons">
192 <button type="button" name="ok" onclick="return onOK();">OK</button>
193 <button type="button" name="cancel" onclick="return onCancel();">Cancel</button>
194 </div>
195 </form>
196 </body>
197 </html>