annotate media/js/tiny_mce/plugins/advimage/image.htm @ 133:c515b7401078

Use the new common way to apply markItUp to textareas and to get the smiley and markdown help dialogs for all the remaining apps except for forums and comments.
author Brian Neal <bgneal@gmail.com>
date Fri, 27 Nov 2009 00:21:47 +0000
parents a5b4c5ce0658
children 149c3567fec1
rev   line source
bgneal@45 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
bgneal@45 2 <html xmlns="http://www.w3.org/1999/xhtml">
bgneal@45 3 <head>
bgneal@45 4 <title>{#advimage_dlg.dialog_title}</title>
bgneal@45 5 <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
bgneal@45 6 <script type="text/javascript" src="../../utils/mctabs.js"></script>
bgneal@45 7 <script type="text/javascript" src="../../utils/form_utils.js"></script>
bgneal@45 8 <script type="text/javascript" src="../../utils/validate.js"></script>
bgneal@45 9 <script type="text/javascript" src="../../utils/editable_selects.js"></script>
bgneal@45 10 <script type="text/javascript" src="js/image.js"></script>
bgneal@45 11 <link href="css/advimage.css" rel="stylesheet" type="text/css" />
bgneal@45 12 </head>
bgneal@45 13 <body id="advimage" style="display: none">
bgneal@45 14 <form onsubmit="ImageDialog.insert();return false;" action="#">
bgneal@45 15 <div class="tabs">
bgneal@45 16 <ul>
bgneal@45 17 <li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{#advimage_dlg.tab_general}</a></span></li>
bgneal@45 18 <li id="appearance_tab"><span><a href="javascript:mcTabs.displayTab('appearance_tab','appearance_panel');" onmousedown="return false;">{#advimage_dlg.tab_appearance}</a></span></li>
bgneal@45 19 <li id="advanced_tab"><span><a href="javascript:mcTabs.displayTab('advanced_tab','advanced_panel');" onmousedown="return false;">{#advimage_dlg.tab_advanced}</a></span></li>
bgneal@45 20 </ul>
bgneal@45 21 </div>
bgneal@45 22
bgneal@45 23 <div class="panel_wrapper">
bgneal@45 24 <div id="general_panel" class="panel current">
bgneal@45 25 <fieldset>
bgneal@45 26 <legend>{#advimage_dlg.general}</legend>
bgneal@45 27
bgneal@45 28 <table class="properties">
bgneal@45 29 <tr>
bgneal@45 30 <td class="column1"><label id="srclabel" for="src">{#advimage_dlg.src}</label></td>
bgneal@45 31 <td colspan="2"><table border="0" cellspacing="0" cellpadding="0">
bgneal@45 32 <tr>
bgneal@45 33 <td><input name="src" type="text" id="src" value="" class="mceFocus" onchange="ImageDialog.showPreviewImage(this.value);" /></td>
bgneal@45 34 <td id="srcbrowsercontainer">&nbsp;</td>
bgneal@45 35 </tr>
bgneal@45 36 </table></td>
bgneal@45 37 </tr>
bgneal@45 38 <tr>
bgneal@45 39 <td><label for="src_list">{#advimage_dlg.image_list}</label></td>
bgneal@45 40 <td><select id="src_list" name="src_list" onchange="document.getElementById('src').value=this.options[this.selectedIndex].value;document.getElementById('alt').value=this.options[this.selectedIndex].text;document.getElementById('title').value=this.options[this.selectedIndex].text;ImageDialog.showPreviewImage(this.options[this.selectedIndex].value);"><option value=""></option></select></td>
bgneal@45 41 </tr>
bgneal@45 42 <tr>
bgneal@45 43 <td class="column1"><label id="altlabel" for="alt">{#advimage_dlg.alt}</label></td>
bgneal@45 44 <td colspan="2"><input id="alt" name="alt" type="text" value="" /></td>
bgneal@45 45 </tr>
bgneal@45 46 <tr>
bgneal@45 47 <td class="column1"><label id="titlelabel" for="title">{#advimage_dlg.title}</label></td>
bgneal@45 48 <td colspan="2"><input id="title" name="title" type="text" value="" /></td>
bgneal@45 49 </tr>
bgneal@45 50 </table>
bgneal@45 51 </fieldset>
bgneal@45 52
bgneal@45 53 <fieldset>
bgneal@45 54 <legend>{#advimage_dlg.preview}</legend>
bgneal@45 55 <div id="prev"></div>
bgneal@45 56 </fieldset>
bgneal@45 57 </div>
bgneal@45 58
bgneal@45 59 <div id="appearance_panel" class="panel">
bgneal@45 60 <fieldset>
bgneal@45 61 <legend>{#advimage_dlg.tab_appearance}</legend>
bgneal@45 62
bgneal@45 63 <table border="0" cellpadding="4" cellspacing="0">
bgneal@45 64 <tr>
bgneal@45 65 <td class="column1"><label id="alignlabel" for="align">{#advimage_dlg.align}</label></td>
bgneal@45 66 <td><select id="align" name="align" onchange="ImageDialog.updateStyle('align');ImageDialog.changeAppearance();">
bgneal@45 67 <option value="">{#not_set}</option>
bgneal@45 68 <option value="baseline">{#advimage_dlg.align_baseline}</option>
bgneal@45 69 <option value="top">{#advimage_dlg.align_top}</option>
bgneal@45 70 <option value="middle">{#advimage_dlg.align_middle}</option>
bgneal@45 71 <option value="bottom">{#advimage_dlg.align_bottom}</option>
bgneal@45 72 <option value="text-top">{#advimage_dlg.align_texttop}</option>
bgneal@45 73 <option value="text-bottom">{#advimage_dlg.align_textbottom}</option>
bgneal@45 74 <option value="left">{#advimage_dlg.align_left}</option>
bgneal@45 75 <option value="right">{#advimage_dlg.align_right}</option>
bgneal@45 76 </select>
bgneal@45 77 </td>
bgneal@45 78 <td rowspan="6" valign="top">
bgneal@45 79 <div class="alignPreview">
bgneal@45 80 <img id="alignSampleImg" src="img/sample.gif" alt="{#advimage_dlg.example_img}" />
bgneal@45 81 Lorem ipsum, Dolor sit amet, consectetuer adipiscing loreum ipsum edipiscing elit, sed diam
bgneal@45 82 nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Loreum ipsum
bgneal@45 83 edipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
bgneal@45 84 erat volutpat.
bgneal@45 85 </div>
bgneal@45 86 </td>
bgneal@45 87 </tr>
bgneal@45 88
bgneal@45 89 <tr>
bgneal@45 90 <td class="column1"><label id="widthlabel" for="width">{#advimage_dlg.dimensions}</label></td>
bgneal@45 91 <td class="nowrap">
bgneal@45 92 <input name="width" type="text" id="width" value="" size="5" maxlength="5" class="size" onchange="ImageDialog.changeHeight();" /> x
bgneal@45 93 <input name="height" type="text" id="height" value="" size="5" maxlength="5" class="size" onchange="ImageDialog.changeWidth();" /> px
bgneal@45 94 </td>
bgneal@45 95 </tr>
bgneal@45 96
bgneal@45 97 <tr>
bgneal@45 98 <td>&nbsp;</td>
bgneal@45 99 <td><table border="0" cellpadding="0" cellspacing="0">
bgneal@45 100 <tr>
bgneal@45 101 <td><input id="constrain" type="checkbox" name="constrain" class="checkbox" /></td>
bgneal@45 102 <td><label id="constrainlabel" for="constrain">{#advimage_dlg.constrain_proportions}</label></td>
bgneal@45 103 </tr>
bgneal@45 104 </table></td>
bgneal@45 105 </tr>
bgneal@45 106
bgneal@45 107 <tr>
bgneal@45 108 <td class="column1"><label id="vspacelabel" for="vspace">{#advimage_dlg.vspace}</label></td>
bgneal@45 109 <td><input name="vspace" type="text" id="vspace" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('vspace');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('vspace');ImageDialog.changeAppearance();" />
bgneal@45 110 </td>
bgneal@45 111 </tr>
bgneal@45 112
bgneal@45 113 <tr>
bgneal@45 114 <td class="column1"><label id="hspacelabel" for="hspace">{#advimage_dlg.hspace}</label></td>
bgneal@45 115 <td><input name="hspace" type="text" id="hspace" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('hspace');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('hspace');ImageDialog.changeAppearance();" /></td>
bgneal@45 116 </tr>
bgneal@45 117
bgneal@45 118 <tr>
bgneal@45 119 <td class="column1"><label id="borderlabel" for="border">{#advimage_dlg.border}</label></td>
bgneal@45 120 <td><input id="border" name="border" type="text" value="" size="3" maxlength="3" class="number" onchange="ImageDialog.updateStyle('border');ImageDialog.changeAppearance();" onblur="ImageDialog.updateStyle('border');ImageDialog.changeAppearance();" /></td>
bgneal@45 121 </tr>
bgneal@45 122
bgneal@45 123 <tr>
bgneal@45 124 <td><label for="class_list">{#class_name}</label></td>
bgneal@45 125 <td colspan="2"><select id="class_list" name="class_list" class="mceEditableSelect"><option value=""></option></select></td>
bgneal@45 126 </tr>
bgneal@45 127
bgneal@45 128 <tr>
bgneal@45 129 <td class="column1"><label id="stylelabel" for="style">{#advimage_dlg.style}</label></td>
bgneal@45 130 <td colspan="2"><input id="style" name="style" type="text" value="" onchange="ImageDialog.changeAppearance();" /></td>
bgneal@45 131 </tr>
bgneal@45 132
bgneal@45 133 <!-- <tr>
bgneal@45 134 <td class="column1"><label id="classeslabel" for="classes">{#advimage_dlg.classes}</label></td>
bgneal@45 135 <td colspan="2"><input id="classes" name="classes" type="text" value="" onchange="selectByValue(this.form,'classlist',this.value,true);" /></td>
bgneal@45 136 </tr> -->
bgneal@45 137 </table>
bgneal@45 138 </fieldset>
bgneal@45 139 </div>
bgneal@45 140
bgneal@45 141 <div id="advanced_panel" class="panel">
bgneal@45 142 <fieldset>
bgneal@45 143 <legend>{#advimage_dlg.swap_image}</legend>
bgneal@45 144
bgneal@45 145 <input type="checkbox" id="onmousemovecheck" name="onmousemovecheck" class="checkbox" onclick="ImageDialog.setSwapImage(this.checked);" />
bgneal@45 146 <label id="onmousemovechecklabel" for="onmousemovecheck">{#advimage_dlg.alt_image}</label>
bgneal@45 147
bgneal@45 148 <table border="0" cellpadding="4" cellspacing="0" width="100%">
bgneal@45 149 <tr>
bgneal@45 150 <td class="column1"><label id="onmouseoversrclabel" for="onmouseoversrc">{#advimage_dlg.mouseover}</label></td>
bgneal@45 151 <td><table border="0" cellspacing="0" cellpadding="0">
bgneal@45 152 <tr>
bgneal@45 153 <td><input id="onmouseoversrc" name="onmouseoversrc" type="text" value="" /></td>
bgneal@45 154 <td id="onmouseoversrccontainer">&nbsp;</td>
bgneal@45 155 </tr>
bgneal@45 156 </table></td>
bgneal@45 157 </tr>
bgneal@45 158 <tr>
bgneal@45 159 <td><label for="over_list">{#advimage_dlg.image_list}</label></td>
bgneal@45 160 <td><select id="over_list" name="over_list" onchange="document.getElementById('onmouseoversrc').value=this.options[this.selectedIndex].value;"><option value=""></option></select></td>
bgneal@45 161 </tr>
bgneal@45 162 <tr>
bgneal@45 163 <td class="column1"><label id="onmouseoutsrclabel" for="onmouseoutsrc">{#advimage_dlg.mouseout}</label></td>
bgneal@45 164 <td class="column2"><table border="0" cellspacing="0" cellpadding="0">
bgneal@45 165 <tr>
bgneal@45 166 <td><input id="onmouseoutsrc" name="onmouseoutsrc" type="text" value="" /></td>
bgneal@45 167 <td id="onmouseoutsrccontainer">&nbsp;</td>
bgneal@45 168 </tr>
bgneal@45 169 </table></td>
bgneal@45 170 </tr>
bgneal@45 171 <tr>
bgneal@45 172 <td><label for="out_list">{#advimage_dlg.image_list}</label></td>
bgneal@45 173 <td><select id="out_list" name="out_list" onchange="document.getElementById('onmouseoutsrc').value=this.options[this.selectedIndex].value;"><option value=""></option></select></td>
bgneal@45 174 </tr>
bgneal@45 175 </table>
bgneal@45 176 </fieldset>
bgneal@45 177
bgneal@45 178 <fieldset>
bgneal@45 179 <legend>{#advimage_dlg.misc}</legend>
bgneal@45 180
bgneal@45 181 <table border="0" cellpadding="4" cellspacing="0">
bgneal@45 182 <tr>
bgneal@45 183 <td class="column1"><label id="idlabel" for="id">{#advimage_dlg.id}</label></td>
bgneal@45 184 <td><input id="id" name="id" type="text" value="" /></td>
bgneal@45 185 </tr>
bgneal@45 186
bgneal@45 187 <tr>
bgneal@45 188 <td class="column1"><label id="dirlabel" for="dir">{#advimage_dlg.langdir}</label></td>
bgneal@45 189 <td>
bgneal@45 190 <select id="dir" name="dir" onchange="ImageDialog.changeAppearance();">
bgneal@45 191 <option value="">{#not_set}</option>
bgneal@45 192 <option value="ltr">{#advimage_dlg.ltr}</option>
bgneal@45 193 <option value="rtl">{#advimage_dlg.rtl}</option>
bgneal@45 194 </select>
bgneal@45 195 </td>
bgneal@45 196 </tr>
bgneal@45 197
bgneal@45 198 <tr>
bgneal@45 199 <td class="column1"><label id="langlabel" for="lang">{#advimage_dlg.langcode}</label></td>
bgneal@45 200 <td>
bgneal@45 201 <input id="lang" name="lang" type="text" value="" />
bgneal@45 202 </td>
bgneal@45 203 </tr>
bgneal@45 204
bgneal@45 205 <tr>
bgneal@45 206 <td class="column1"><label id="usemaplabel" for="usemap">{#advimage_dlg.map}</label></td>
bgneal@45 207 <td>
bgneal@45 208 <input id="usemap" name="usemap" type="text" value="" />
bgneal@45 209 </td>
bgneal@45 210 </tr>
bgneal@45 211
bgneal@45 212 <tr>
bgneal@45 213 <td class="column1"><label id="longdesclabel" for="longdesc">{#advimage_dlg.long_desc}</label></td>
bgneal@45 214 <td><table border="0" cellspacing="0" cellpadding="0">
bgneal@45 215 <tr>
bgneal@45 216 <td><input id="longdesc" name="longdesc" type="text" value="" /></td>
bgneal@45 217 <td id="longdesccontainer">&nbsp;</td>
bgneal@45 218 </tr>
bgneal@45 219 </table></td>
bgneal@45 220 </tr>
bgneal@45 221 </table>
bgneal@45 222 </fieldset>
bgneal@45 223 </div>
bgneal@45 224 </div>
bgneal@45 225
bgneal@45 226 <div class="mceActionPanel">
bgneal@45 227 <div style="float: left">
bgneal@45 228 <input type="submit" id="insert" name="insert" value="{#insert}" />
bgneal@45 229 </div>
bgneal@45 230
bgneal@45 231 <div style="float: right">
bgneal@45 232 <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
bgneal@45 233 </div>
bgneal@45 234 </div>
bgneal@45 235 </form>
bgneal@45 236 </body>
bgneal@45 237 </html>