Mercurial > public > sg101

annotate media/js/tiny_mce/plugins/advimage/image.htm @ 265:1ba2c6bf6eb7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Closing #98. Animated GIFs were losing their transparency and animated properties when saved as avatars. Reworked the avatar save process to only run the avatar through PIL if it is too big. This preserves the original uploaded file if it is within the desired size settings. This may still mangle big animated gifs. If this becomes a problem, then maybe look into calling the PIL Image.resize() method directly. Moved the PIL image specific functions from bio.forms to a new module: core.image for better reusability in the future.
author Brian Neal <bgneal@gmail.com>
date Fri, 24 Sep 2010 02:12:09 +0000
parents 149c3567fec1
children
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@183 227 <input type="submit" id="insert" name="insert" value="{#insert}" />
bgneal@183 228 <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
bgneal@45 229 </div>
bgneal@45 230 </form>
bgneal@45 231 </body>
bgneal@45 232 </html>