source: branches/1.2/workflow/js/htmlarea/plugins/UploadImage/popups/ImageEditor/test.html @ 1349

Revision 1349, 13.1 KB checked in by niltonneto, 15 years ago (diff)

Ticket #561 - Inclusão do módulo Workflow faltante nessa versão.
  • Property svn:executable set to *
Line 
1<html style="width:580px; height:550;">
2<HEAD>
3<TITLE> New Document </TITLE>
4<META NAME="Generator" CONTENT="EditPlus">
5<META NAME="Author" CONTENT="">
6<META NAME="Keywords" CONTENT="">
7<META NAME="Description" CONTENT="">
8<link href="ImageEditor.css" rel="stylesheet" type="text/css">
9<script language="JavaScript" type="text/JavaScript">
10<!--
11
12function MM_findObj(n, d) { //v4.01
13  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
14    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
15  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
16  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
17  if(!x && d.getElementById) x=d.getElementById(n); return x;
18}
19
20
21function pviiClassNew(obj, new_style) { //v2.6 by PVII
22  obj.className=new_style;
23}
24
25function toggleMarker()
26{
27        //alert("Toggle");
28        var marker = MM_findObj("markerImg");
29       
30        //alert(marker.src);
31        if(marker != null && marker.src != null) {
32                //alert(marker.src);
33                if(marker.src.indexOf("t_black.gif")>0) {
34                        marker.src = "t_white.gif";
35                }
36                else
37                        marker.src = "t_black.gif";
38                //alert(marker.src);
39                editor.toggleMarker();
40        }
41}
42
43function updateMarker(mode)
44{
45        if (mode == 'crop')
46        {
47                var t_cx = MM_findObj('cx');
48                var t_cy = MM_findObj('cy');
49                var t_cw = MM_findObj('cw');
50                var t_ch = MM_findObj('ch');
51
52                editor.setMarker(parseInt(t_cx.value), parseInt(t_cy.value), parseInt(t_cw.value), parseInt(t_ch.value));
53        }
54        else if(mode == 'scale') {
55                var s_sw = MM_findObj('sw');
56                var s_sh = MM_findObj('sh');
57                editor.setMarker(0, 0, parseInt(s_sw.value), parseInt(s_sh.value));
58        }
59}
60
61
62var current_action = null;
63var actions = ['crop', 'scale', 'rotate', 'measure', 'save'];
64function toggle(action)
65{
66        if(action != current_action) {
67                var toolbar = MM_findObj('bar_'+action);
68                var icon = MM_findObj('icon_'+action);
69                var btn = MM_findObj('btn_'+action);
70                btn.className='iconsSel';
71                current_action = action;
72                toolbar.style.display = "block";
73                icon.style.display = "block";
74               
75                for (var i in actions)
76                {
77                        if(current_action != actions[i]) {
78                                var tool = MM_findObj('bar_'+actions[i]);
79                                tool.style.display = "none";
80                                var icon = MM_findObj('icon_'+actions[i]);
81                                icon.style.display = "none";
82                                var btn =  MM_findObj('btn_'+actions[i]);
83                                btn.className = 'icons';
84                        }
85                }
86
87                editor.setMode(current_action);
88        }
89        //alert(action);
90}
91
92function changeClass(obj,action)
93{
94        if(action == current_action) {
95                obj.className = 'iconsSel';
96        }
97        else
98        {
99                obj.className = 'icons';
100        }
101}
102
103function rotatePreset(selection)
104{
105        var value = selection.options[selection.selectedIndex].value;
106       
107        if(value.length > 0 && parseInt(value) != 0) {
108                var ra = MM_findObj('ra');
109                ra.value = parseInt(value);
110        }
111}
112
113function updateFormat(selection)
114{
115        var selected = selection.options[selection.selectedIndex].value;
116
117        var values = selected.split(",");
118        //alert(values.length);
119        if(values.length >1) {
120                updateSlider(parseInt(values[1]));
121        }
122
123}
124
125var editImage = '';
126
127if(location.href.indexOf('?')>0) {
128        var parameters = location.href.split('?');
129                editImage = parameters[1];
130}
131       
132//-->
133</script>
134<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
135</HEAD>
136
137<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
138<table width="100%" height="100%" cellspacing="1" >
139        <tr bgcolor="#EEEEFF" height="40">
140        <td class="topBar" width="60" ><table width="100%" border="0" cellspacing="8" cellpadding="2">
141        <tr>
142          <td class="icons">
143                  <div id="icon_crop" style="display:none">
144                        <img src="crop.gif" width="20" height="20" border="0">
145                  </div>
146                  <div id="icon_scale" style="display:none">
147                        <img src="scale.gif" width="20" height="20" border="0">
148                  </div>
149                  <div id="icon_rotate" style="display:none">
150                        <img src="rotate.gif" width="20" height="20" border="0">
151                  </div>
152                  <div id="icon_measure" style="display:none">
153                        <img src="ruler.gif" width="20" height="20" border="0">
154                  </div>
155                  <div id="icon_save" style="display:none">
156                        <img src="save.gif" width="20" height="20" border="0">
157                  </div>
158                  </td>
159        </tr>
160      </table></td>
161         
162    <td>
163<!-- crop -->
164<div id="bar_crop" style="display:none">
165        <table border="0" cellspacing="5" cellpadding="2">
166        <tr>
167          <td class="topBar">Start X:
168            <INPUT TYPE="text" id="cx" style="width:3em" NAME="cx" onChange="updateMarker('crop')">
169            Start Y:
170            <INPUT TYPE="text" id="cy" style="width:3em" NAME="cy" onChange="updateMarker('crop')">
171            Width:
172            <INPUT TYPE="text" id="cw" style="width:3em" NAME="cw" onChange="updateMarker('crop')">
173            Height:
174            <INPUT TYPE="text"  id="ch" style="width:3em" NAME="ch" onChange="updateMarker('crop')"> </td>
175          <td><img src="div.gif" width="2" height="30"></td>
176          <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" width="30" height="30" border="0"></a></td>
177          <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('crop');"><img src="btn_ok.gif" width="30" height="30" border="0"></a></td>
178        </tr>
179      </table>
180</div>
181<!-- //crop -->
182<!-- measure -->
183<div id="bar_measure" style="display:none">
184      <table border="0" cellspacing="5" cellpadding="2">
185        <tr>
186          <td class="topBar">X:
187            <span id="sx" class="measureStats"></span>
188            Y:
189            <span id="sy" class="measureStats"></span></td>
190          <td class="topBar"><img src="div.gif" width="2" height="30"></td>
191          <td class="topBar"> W:
192            <span id="mw" class="measureStats"></span>
193            H:
194            <span id="mh" class="measureStats"></span>
195          </td>
196          <td><img src="div.gif" width="2" height="30"></td>
197          <td class="topBar">A:
198            <span id="ma" class="measureStats"></span>
199            D: <span id="md" class="measureStats"></span>
200          </td>
201          <td class="icons"><img src="div.gif" width="2" height="30"></td>
202          <td class="icons"><input type="button" name="Button" value="Clear" onClick="editor.reset()"></td>
203        </tr>
204      </table>
205</div>
206<!-- //measure -->
207<!-- scale -->
208<div id="bar_scale" style="display:none">
209      <table border="0" cellspacing="5" cellpadding="2">
210        <tr>
211          <td class="topBar">Width:
212            <input type="text" id="sw" style="width:3em" name="sw" onChange="updateMarker('scale')">
213          </td>
214          <td class="topBar"><img src="locked.gif" width="8" height="14"></td>
215          <td class="topBar"> Height:
216            <INPUT TYPE="text"  id="sh" style="width:3em" NAME="sh" onChange="updateMarker('scale')">
217          </td>
218          <td><img src="div.gif" width="2" height="30"></td>
219          <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" width="30" height="30" border="0"></a></td>
220          <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('scale');"><img src="btn_ok.gif" width="30" height="30" border="0"></a></td>
221        </tr>
222      </table>
223</div>
224<!-- //scale -->
225<!-- rotate -->
226<div id="bar_rotate" style="display:none">
227      <table border="0" cellspacing="5" cellpadding="2">
228        <tr>
229          <td width="115" class="topBar"><select id="flip" name="flip">
230              <option selected>Flip Image</option>
231              <option>-----------------</option>
232              <option value="hoz">Flip Horizontal</option>
233              <option value="ver">Flip Virtical</option>
234            </select></td>
235          <td width="115" class="topBar"><select name="rotate" onChange="rotatePreset(this)">
236              <option selected>Rotate Image</option>
237              <option>-----------------</option>
238              <option value="180">Rotate 180 &deg;</option>
239              <option value="90">Rotate 90 &deg; CW</option>
240              <option value="-90">Rotate 90 &deg; CCW</option>
241            </select></td>
242          <td width="87" class="topBar"> Angle:
243            <INPUT TYPE="text"  id="ra" style="width:3em" NAME="ra" onChange="updateMarker('rotate')">
244          </td>
245          <td width="2"><img src="div.gif" width="2" height="30"></td>
246          <td width="32" class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" width="30" height="30" border="0"></a></td>
247          <td width="32" class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('rotate');"><img src="btn_ok.gif" width="30" height="30" border="0"></a></td>
248        </tr>
249      </table>
250</div>
251<!-- //rotate -->
252<!-- save -->
253<div id="bar_save" style="display:none">
254      <table border="0" cellspacing="5" cellpadding="2">
255        <tr>
256          <td class="topBar">Filename:
257            <input type="filename" id="save_filename" value="padpc_1.jpg" name="textfield"></td>
258          <td class="topBar"> <select name="format" id="save_format" onChange="updateFormat(this)">
259              <option selected>Image Format</option>
260              <option>---------------------</option>
261              <option value="jpeg,85">JPEG High</option>
262              <option value="jpeg,60">JPEG Medium</option>
263              <option value="jpeg,35">JPEG Low</option>
264              <option value="png">PNG</option>
265              <option value="gif">GIF</option>
266            </select></td>
267          <td class="topBar">Quality:
268                  </td>
269                  <td width="120">
270        <div id="slidercasing">
271<div id="slidertrack" style="width:100px"><IMG SRC="spacer.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT="track"></div>
272                                <div id="sliderbar" style="left:50px" onmousedown="captureStart()"><IMG SRC="spacer.gif" WIDTH="1" HEIGHT="1" BORDER="0" ALT="track"></div></div>
273                  </td>
274          <td class="topBar">
275<INPUT TYPE="text" id="quality" NAME="quality" onChange="updateSlider(this.value)" style="width:2em">
276<script type="text/javascript" src="jscripts/slider.js"></script>
277<script language="JavaScript1.2">
278<!--
279
280updateSlider(85);
281
282//-->
283</script>
284
285
286          </td>
287          <td><img src="div.gif" width="2" height="30"></td>
288          <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.reset();"><img src="btn_cancel.gif" width="30" height="30" border="0"></a></td>
289          <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a href="#" onClick="editor.doSubmit('save');"><img src="btn_ok.gif" width="30" height="30" border="0"></a></td>
290        </tr>
291      </table>
292</div>
293<!--//save -->
294          </td>
295        </tr>
296        <tr>
297               
298    <td bgcolor="#EEEEFF" width="60" valign="top" align="center" nowrap><table width="100%" border="0" cellspacing="8" cellpadding="2">
299        <tr>
300          <td class="icons" id='btn_crop' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'crop')"><a href="#" class="iconText" onClick="javascript:toggle('crop')"><img src="crop.gif" width="20" height="20" border="0"><br>
301            Crop</a> </td>
302        </tr>
303        <tr>
304          <td class="icons" id='btn_scale' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'scale')"><a href="#" class="iconText" onClick="javascript:toggle('scale')"><img src="scale.gif" width="20" height="20" border="0"><br>
305            Resize</a> </td>
306        </tr>
307        <tr>
308          <td class="icons" id='btn_rotate' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'rotate')"><a href="#" class="iconText"  onClick="javascript:toggle('rotate')"><img src="rotate.gif" width="20" height="20" border="0"><br>
309            Rotate</a> </td>
310        </tr>
311        <tr>
312          <td class="icons" id='btn_measure' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'measure')"><a href="#" class="iconText"  onClick="javascript:toggle('measure')"><img src="ruler.gif" width="20" height="20" border="0"><br>
313            Measure</a></td>
314        </tr>
315        <tr>
316          <td class="icons" onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="pviiClassNew(this,'icons')"><a class="iconText" href="#" onClick="toggleMarker();"><img src="t_black.gif" name="markerImg" id="markerImg" width="20" height="20" border="0"><br>
317            Marker</a></td>
318        </tr>
319        <tr>
320          <td class="icons" id='btn_save' onMouseOver="pviiClassNew(this,'iconsOver')" onMouseOut="changeClass(this,'save')"><a href="#" class="iconText"  onClick="javascript:toggle('save')"><img src="save.gif" width="20" height="20" border="0"><br>
321            Save</a> </td>
322        </tr>
323      </table>
324    </td>
325                <td width="99%" >
326                <iframe width="100%" height="100%" id="editor" name="editor" src="load_image.php" marginwidth="0" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0" background="gray">
327                </iframe>
328                </td>
329        </tr>
330</table>
331</BODY>
332</HTML>
Note: See TracBrowser for help on using the repository browser.