Annotation of /mambo/branches/4.6/mambots/editors/mostlyce/jscripts/tiny_mce/filemanager/frmimageeditor.html
Parent Directory
| 
Revision Log
Revision 1053 - (view) (download) (as text)
| 1 : | cauld | 1053 | <!-- |
| 2 : | * FCKeditor - The text editor for internet | ||
| 3 : | * Copyright (C) 2003-2005 Frederico Caldeira Knabben | ||
| 4 : | * | ||
| 5 : | * Licensed under the terms of the GNU Lesser General Public License: | ||
| 6 : | * http://www.opensource.org/licenses/lgpl-license.php | ||
| 7 : | * | ||
| 8 : | * For further information visit: | ||
| 9 : | * http://www.fckeditor.net/ | ||
| 10 : | * | ||
| 11 : | * File Name: frmimageeditor.html | ||
| 12 : | * This page facilitates the editing of images. | ||
| 13 : | * | ||
| 14 : | * File Authors: | ||
| 15 : | * Grant French (grant@mcpuk.net) | ||
| 16 : | --> | ||
| 17 : | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | ||
| 18 : | <html> | ||
| 19 : | <head> | ||
| 20 : | <link href="browser.css" type="text/css" rel="stylesheet"> | ||
| 21 : | <script type="text/javascript" src="js/fckxml.js"></script> | ||
| 22 : | <script type="text/javascript" src="js/common.js"></script> | ||
| 23 : | <script type="text/javascript" src="js/wz_jsgraphics.js"></script> | ||
| 24 : | <script type="text/javascript" src="js/EditorContent.js"></script> | ||
| 25 : | <script language="javascript" type="text/javascript"> | ||
| 26 : | <!-- | ||
| 27 : | |||
| 28 : | oConnector.CurrentFolder = GetMyUrlParam( 'CurrentFolder' ) ; | ||
| 29 : | var fileName=GetMyUrlParam( 'FileName' ) ; | ||
| 30 : | var fileURL=unescape( GetMyUrlParam( 'FileURL' ) ); | ||
| 31 : | |||
| 32 : | var cursor_X, cursor_Y; | ||
| 33 : | var imageEditorLoaded=false; | ||
| 34 : | |||
| 35 : | var bottomFrame1, bottomFrame2, bottomFrame3; | ||
| 36 : | /* | ||
| 37 : | var t_cx, t_cy, t_cw, t_ch; | ||
| 38 : | var m_sx, m_sy, m_w, m_h, m_a, m_d; | ||
| 39 : | var s_sw, s_sh; | ||
| 40 : | |||
| 41 : | var r_ra; | ||
| 42 : | var constrained; | ||
| 43 : | var pattern = "images/2x2.gif";*/ | ||
| 44 : | |||
| 45 : | function RenameFile( fileName, fileUrl ) | ||
| 46 : | { | ||
| 47 : | var promptMsg='Please enter the new name for ' + fileName + ':'; | ||
| 48 : | var newName=prompt(promptMsg,fileName); | ||
| 49 : | |||
| 50 : | if ((newName!=null)&&(newName!='')&&(newName!=fileName)) { | ||
| 51 : | oConnector.SendCommand( 'RenameFile', "FileName=" + escape( fileName ) + "&NewName=" + escape( newName ), RenameFileCallBack ) ; | ||
| 52 : | } | ||
| 53 : | } | ||
| 54 : | |||
| 55 : | function RenameFolder( folderName ) | ||
| 56 : | { | ||
| 57 : | var promptMsg='Please enter the new name for ' + folderName + ':'; | ||
| 58 : | var newName=prompt(promptMsg,folderName); | ||
| 59 : | |||
| 60 : | if ((newName!=null)&&(newName!='')&&(newName!=folderName)) { | ||
| 61 : | oConnector.SendCommand( 'RenameFolder', "FolderName=" + escape( folderName ) + "&NewName=" + escape ( newName ), RenameFolderCallBack ) ; | ||
| 62 : | } | ||
| 63 : | } | ||
| 64 : | |||
| 65 : | function LoadResources( resourceType, folderPath ) | ||
| 66 : | { | ||
| 67 : | oListManager.Clear() ; | ||
| 68 : | oConnector.ResourceType = resourceType ; | ||
| 69 : | oConnector.CurrentFolder = folderPath | ||
| 70 : | oConnector.SendCommand( 'GetFoldersAndFiles', null, GetFoldersAndFilesCallBack ) ; | ||
| 71 : | } | ||
| 72 : | |||
| 73 : | function Refresh() | ||
| 74 : | { | ||
| 75 : | LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ; | ||
| 76 : | } | ||
| 77 : | |||
| 78 : | function RenameFolderCallBack ( fckXml ) | ||
| 79 : | { | ||
| 80 : | var oNodes = fckXml.SelectNodes( 'Connector/Error' ); | ||
| 81 : | if (oNodes.length>0) { | ||
| 82 : | var errNo = parseInt(oNodes[0].attributes.getNamedItem('number').value) ; | ||
| 83 : | |||
| 84 : | switch (errNo) { | ||
| 85 : | case 0 : | ||
| 86 : | break; | ||
| 87 : | |||
| 88 : | case 602 : | ||
| 89 : | alert('Failed to rename folder.'); | ||
| 90 : | break; | ||
| 91 : | |||
| 92 : | default: | ||
| 93 : | alert('Invalid XML response from connector..'); | ||
| 94 : | } | ||
| 95 : | } else { | ||
| 96 : | alert('Invalid XML response from connector.'); | ||
| 97 : | } | ||
| 98 : | Refresh(); | ||
| 99 : | } | ||
| 100 : | |||
| 101 : | |||
| 102 : | function drawFramework() | ||
| 103 : | { | ||
| 104 : | bottomFrame1 = top.frames['frmCreateFolder'].document; | ||
| 105 : | bottomFrame2 = top.frames['frmUpload'].document; | ||
| 106 : | bottomFrame3 = top.frames['frmFolders'].document; | ||
| 107 : | |||
| 108 : | bottomFrame1.body.innerHTML='<table style="border-width: 0px; border-style: none;" align="center" cellpadding="2" id="toolbar1"><table>'; | ||
| 109 : | bottomFrame2.body.innerHTML='<table style="height: 100%; border-width: 0px; border-style: none;" cellpadding="4"><tr id="toolbar2"></tr><table>'; | ||
| 110 : | bottomFrame3.body.innerHTML='<table style="border-width: 0px; border-style: none;" align="center" cellpadding="8" id="toolbar3"><table>'; | ||
| 111 : | |||
| 112 : | var toolbar1 = bottomFrame1.getElementById('toolbar1'); | ||
| 113 : | var toolbar2 = bottomFrame2.getElementById('toolbar2'); | ||
| 114 : | var toolbar3 = bottomFrame3.getElementById('toolbar3'); | ||
| 115 : | |||
| 116 : | |||
| 117 : | /*#######################*/ | ||
| 118 : | /* START OF MAIN TOOLBAR */ | ||
| 119 : | /*#######################*/ | ||
| 120 : | |||
| 121 : | /* --- Save Image --- */ | ||
| 122 : | var row = toolbar3.insertRow(-1); | ||
| 123 : | var oCell = row.insertCell(-1); | ||
| 124 : | oCell.innerHTML = '<a href="" title="Save Image">' + | ||
| 125 : | '<img src="images/toolbar/save.gif" style="width: 22px; height: 22px;" /><br />' + | ||
| 126 : | 'Save' + | ||
| 127 : | '</a>'; | ||
| 128 : | oCell.noWrap = true; | ||
| 129 : | oCell.align = 'center'; | ||
| 130 : | |||
| 131 : | |||
| 132 : | /* --- Close Image --- */ | ||
| 133 : | var row = toolbar3.insertRow(-1); | ||
| 134 : | var oCell = row.insertCell(-1); | ||
| 135 : | oCell.innerHTML = '<a href="#" title="Close Image" onclick="window.top.location.reload();">' + | ||
| 136 : | '<img src="images/toolbar/close.gif" style="width: 22px; height: 22px;" /><br />' + | ||
| 137 : | 'Close' + | ||
| 138 : | '</a>'; | ||
| 139 : | oCell.noWrap = true; | ||
| 140 : | oCell.align = 'center'; | ||
| 141 : | |||
| 142 : | |||
| 143 : | /* --- Seperator --- */ | ||
| 144 : | var row = toolbar3.insertRow(-1); | ||
| 145 : | var oCell = row.insertCell(-1); | ||
| 146 : | oCell.innerHTML = '<hr /><br />'; | ||
| 147 : | |||
| 148 : | oCell.noWrap = true; | ||
| 149 : | oCell.align = 'center'; | ||
| 150 : | |||
| 151 : | |||
| 152 : | /* --- Resize Image --- */ | ||
| 153 : | var row = toolbar3.insertRow(-1); | ||
| 154 : | var oCell = row.insertCell(-1); | ||
| 155 : | oCell.innerHTML = '<a href="javascript: top.frames[\'frmResourcesList\'].setMode(\'resize\');" class="tb_item" id="tb_scale" title="Resize Image">' + | ||
| 156 : | '<img src="images/toolbar/resize.gif" style="width: 22px; height: 22px;" /><br />' + | ||
| 157 : | 'Resize' + | ||
| 158 : | '</a>'; | ||
| 159 : | oCell.noWrap = true; | ||
| 160 : | oCell.align = 'center'; | ||
| 161 : | |||
| 162 : | |||
| 163 : | /* --- Crop Image --- */ | ||
| 164 : | var row = toolbar3.insertRow(-1); | ||
| 165 : | var oCell = row.insertCell(-1); | ||
| 166 : | oCell.innerHTML = '<a href="javascript: top.frames[\'frmResourcesList\'].setMode(\'crop\');" class="tb_item" id="tb_crop" title="Crop Image">' + | ||
| 167 : | '<img src="images/toolbar/crop.gif" style="width: 22px; height: 22px;" /><br />' + | ||
| 168 : | 'Crop' + | ||
| 169 : | '</a>'; | ||
| 170 : | oCell.noWrap = true; | ||
| 171 : | oCell.align = 'center'; | ||
| 172 : | |||
| 173 : | |||
| 174 : | /* --- Rotate Image --- */ | ||
| 175 : | var row = toolbar3.insertRow(-1); | ||
| 176 : | var oCell = row.insertCell(-1); | ||
| 177 : | oCell.innerHTML = '<a href="javascript: top.frames[\'frmResourcesList\'].setMode(\'rotate\');" class="tb_item" id="tb_rotate" title="Rotate Image">' + | ||
| 178 : | '<img src="images/toolbar/rotate.gif" style="width: 22px; height: 22px;" /><br />' + | ||
| 179 : | 'Rotate' + | ||
| 180 : | '</a>'; | ||
| 181 : | oCell.noWrap = true; | ||
| 182 : | oCell.align = 'center'; | ||
| 183 : | |||
| 184 : | |||
| 185 : | /* --- Flip Image --- */ | ||
| 186 : | var row = toolbar3.insertRow(-1); | ||
| 187 : | var oCell = row.insertCell(-1); | ||
| 188 : | oCell.innerHTML = '<a href="javascript: top.frames[\'frmResourcesList\'].setMode(\'flip\');" class="tb_item" id="tb_flip" title="Flip Image">' + | ||
| 189 : | '<img src="images/toolbar/flip.gif" style="width: 22px; height: 22px;" /><br />' + | ||
| 190 : | 'Flip' + | ||
| 191 : | '</a>'; | ||
| 192 : | oCell.noWrap = true; | ||
| 193 : | oCell.align = 'center'; | ||
| 194 : | |||
| 195 : | |||
| 196 : | |||
| 197 : | /*###################*/ | ||
| 198 : | /* START OF INFO BAR */ | ||
| 199 : | /*###################*/ | ||
| 200 : | /* --- X Position --- */ | ||
| 201 : | var row = toolbar1.insertRow(-1); | ||
| 202 : | var oCell = row.insertCell(-1); | ||
| 203 : | oCell.innerHTML = '<div style="display: inline;">X: <div style="display: inline;" id="cursor_x">0</div>px</div>'; | ||
| 204 : | oCell.noWrap = true; | ||
| 205 : | oCell.align = 'center'; | ||
| 206 : | cursor_X=bottomFrame1.getElementById('cursor_x'); | ||
| 207 : | |||
| 208 : | /* --- Y Posision --- */ | ||
| 209 : | var row = toolbar1.insertRow(-1); | ||
| 210 : | var oCell = row.insertCell(-1); | ||
| 211 : | oCell.innerHTML = '<div style="display: inline;">Y: <div style="display: inline;" id="cursor_y">0</div>px</div>'; | ||
| 212 : | oCell.noWrap = true; | ||
| 213 : | oCell.align = 'center'; | ||
| 214 : | cursor_Y=bottomFrame1.getElementById('cursor_y'); | ||
| 215 : | |||
| 216 : | |||
| 217 : | /*#####################*/ | ||
| 218 : | /* START OF MANUAL BAR */ | ||
| 219 : | /*#####################*/ | ||
| 220 : | |||
| 221 : | /* --- X Position --- */ | ||
| 222 : | //var row = toolbar2.insertRow(-1); | ||
| 223 : | var oCell = toolbar2.insertCell(-1); | ||
| 224 : | oCell.innerHTML = '<input type="text" id="cx" />' + | ||
| 225 : | '<input type="text" id="cy" />'; | ||
| 226 : | |||
| 227 : | oCell.noWrap = true; | ||
| 228 : | oCell.align = 'center'; | ||
| 229 : | cursor_X=bottomFrame1.getElementById('cursor_x'); | ||
| 230 : | |||
| 231 : | |||
| 232 : | } | ||
| 233 : | |||
| 234 : | window.onload = function() | ||
| 235 : | { | ||
| 236 : | drawFramework(); | ||
| 237 : | document.getElementById('theImage').src=fileURL; | ||
| 238 : | |||
| 239 : | jg_doc = new jsGraphics("imgCanvas"); // draw directly into document | ||
| 240 : | jg_doc.setColor("#000000"); // black | ||
| 241 : | |||
| 242 : | // top.frames['frmResourcesList'].setMode('scale'); | ||
| 243 : | imageEditorLoaded=true; | ||
| 244 : | // top.frames['frmResourcesList'].setMode('scale'); | ||
| 245 : | } | ||
| 246 : | |||
| 247 : | function updateXY(eventObject) | ||
| 248 : | { | ||
| 249 : | if (imageEditorLoaded) { | ||
| 250 : | cursor_X.innerHTML = eventObject.pageX; | ||
| 251 : | cursor_Y.innerHTML = eventObject.pageY; | ||
| 252 : | } | ||
| 253 : | } | ||
| 254 : | |||
| 255 : | //--> | ||
| 256 : | |||
| 257 : | </script> | ||
| 258 : | <style type="text/css"> | ||
| 259 : | body { margin: 0; padding: 0; background-color: #eee; } | ||
| 260 : | table { width: 100%; } | ||
| 261 : | table td { text-align: center; } | ||
| 262 : | .crop{cursor:crosshair;} | ||
| 263 : | .selection { border: dotted 1px #000000; position:absolute; width: 0px; height: 1px; z-index:5; } | ||
| 264 : | .selectionWhite{ border: dotted 1px #FFFFFF; position:absolute; width: 0px; height: 1px; z-index:5; } | ||
| 265 : | .handleBox{ z-index:105; } | ||
| 266 : | .error { font-size:large; font-weight:bold; color:#c00; font-family: Helvetica, sans-serif; } | ||
| 267 : | </style> | ||
| 268 : | </head> | ||
| 269 : | <body class="FileArea" bottomMargin="10" leftMargin="10" topMargin="10" rightMargin="10"> | ||
| 270 : | <div id="status"></div> | ||
| 271 : | <div id="ant" class="selection" style="visibility:hidden"><img src="img/spacer.gif" width="0" height="0" border="0" alt="" id="cropContent"></div> | ||
| 272 : | <br /><table style="margin-left: auto; margin-right: auto;"> | ||
| 273 : | <tr> | ||
| 274 : | <td> | ||
| 275 : | <span id="imgCanvas" class="crop"><img src="" alt="" id="theImage" name="theImage"></span> | ||
| 276 : | </td> | ||
| 277 : | </tr> | ||
| 278 : | </table> | ||
| 279 : | </body> | ||
| 280 : | </html> |
| ViewVC Help | |
| Powered by ViewVC 1.0.0 |
Web Hosting provided by Network Redux.