order = document.getElementById("eventorder");
order.value = DragDrop.serData('g1', null);
return order.value;
-}
\ No newline at end of file
+}
+
+/**************************************************
+ * dom-drag.js
+ * 09.25.2001
+ * www.youngpup.net
+ **************************************************
+ * 10.28.2001 - fixed minor bug where events
+ * sometimes fired off the handle, not the root.
+ **************************************************/
+
+var DOMDrag = {
+
+ obj : null,
+
+ init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) {
+ o.onmousedown = DOMDrag.start;
+
+ o.hmode = bSwapHorzRef ? false : true ;
+ o.vmode = bSwapVertRef ? false : true ;
+
+ o.root = oRoot && oRoot != null ? oRoot : o ;
+
+ if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
+ if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
+ if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
+ if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
+
+ o.minX = typeof minX != 'undefined' ? minX : null;
+ o.minY = typeof minY != 'undefined' ? minY : null;
+ o.max = typeof maxX != 'undefined' ? maxX : null;
+ o.maxY = typeof maxY != 'undefined' ? maxY : null;
+
+ o.xMapper = fXMapper ? fXMapper : null;
+ o.yMapper = fYMapper ? fYMapper : null;
+
+ o.root.onDragStart = new Function();
+ o.root.onDragEnd = new Function();
+ o.root.onDrag = new Function();
+ },
+
+ start : function(e) {
+ var o = DOMDrag.obj = this;
+ e = DOMDrag.fixE(e);
+ var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
+ var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
+ o.root.onDragStart(x, y);
+
+ o.lastMouseX = e.clientX;
+ o.lastMouseY = e.clientY;
+
+ if (o.hmode) {
+ if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
+ if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
+ } else {
+ if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
+ if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
+ }
+
+ if (o.vmode) {
+ if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
+ if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
+ } else {
+ if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
+ if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
+ }
+
+ document.onmousemove = DOMDrag.drag;
+ document.onmouseup = DOMDrag.end;
+
+ return false;
+ },
+
+ drag : function(e) {
+ e = DOMDrag.fixE(e);
+ var o = DOMDrag.obj;
+
+ var ey = e.clientY;
+ var ex = e.clientX;
+ var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
+ var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
+ var nx, ny;
+
+ if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
+ if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
+ if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
+ if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
+
+ nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
+ ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
+
+ if (o.xMapper) nx = o.xMapper(y)
+ else if (o.yMapper) ny = o.yMapper(x)
+
+ DOMDrag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
+ DOMDrag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
+ DOMDrag.obj.lastMouseX = ex;
+ DOMDrag.obj.lastMouseY = ey;
+
+ DOMDrag.obj.root.onDrag(nx, ny);
+ return false;
+ },
+
+ end : function() {
+ document.onmousemove = null;
+ document.onmouseup = null;
+ DOMDrag.obj.root.onDragEnd( parseInt(DOMDrag.obj.root.style[DOMDrag.obj.hmode ? "left" : "right"]),
+ parseInt(DOMDrag.obj.root.style[DOMDrag.obj.vmode ? "top" : "bottom"]));
+ DOMDrag.obj = null;
+ },
+
+ fixE : function(e) {
+ if (typeof e == 'undefined') e = window.event;
+ if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
+ if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
+ return e;
+ }
+};
\ No newline at end of file
--- /dev/null
+/**************************************************\r
+ * imgedit.js\r
+ * 2003-10-17\r
+ * www.sonnd.com / www.supergarv.de\r
+ *\r
+ * COPYRIGHT (C) BY sonnd / Garvin Hicking\r
+ * Published as GPL. Copyright notice has to stay in effect.\r
+ **************************************************/\r
+\r
+// Gets a position of an element on a certain axis\r
+function imgedit_position(element, axis) {\r
+ if (axis == 'x') {\r
+ return (element.x) ? element.x : imgedit_subposition(element, 'Left');\r
+ } else {\r
+ return (element.y) ? element.y : imgedit_subposition(element, 'Top');\r
+ }\r
+}\r
+\r
+// Calculate possible referenced subpositions to really get the absolute position.\r
+function imgedit_subposition(element, axis) {\r
+ currentPos = 0;\r
+ while (element != null) {\r
+ currentPos += element['offset' + axis];\r
+ element = element.offsetParent;\r
+ }\r
+\r
+ return currentPos;\r
+}\r
+\r
+// Places the cropping area to a certain X/Y coordinate. Then clips the overlay picture correspondingly\r
+function imgedit_placeArea(new_x, new_y) {\r
+ o_area.style.left = new_x + 'px';\r
+ o_area.style.top = new_y + 'px';\r
+ o_overlay.style.clip = "rect(" + (new_y+area_border) + " " + (new_x+inner_area_x) + " " + (new_y+inner_area_y) + " " + (new_x+area_border) + ")";\r
+}\r
+\r
+// Set correct restraints of the cropping area inside which it can move\r
+function imgedit_setMax(new_width, new_height) {\r
+ o_area.maxX = imgedit_getMax('x', new_width, area_orientation);\r
+ o_area.maxY = imgedit_getMax('y', new_height, area_orientation);\r
+}\r
+\r
+// Toggle the current area orientation to the opposite one\r
+function imgedit_areaOrientation() {\r
+ if (area_orientation == 'h') {\r
+ imgedit_toggleAreaOrientation('v');\r
+ } else {\r
+ imgedit_toggleAreaOrientation('h');\r
+ }\r
+\r
+ return false;\r
+}\r
+\r
+// Toggle the current area orientation\r
+function imgedit_toggleAreaOrientation(new_orientation) {\r
+ if (new_orientation == area_orientation) {\r
+ return;\r
+ }\r
+\r
+ // Display the corresponding cropping area and hide the other one.\r
+ if (new_orientation == 'h') {\r
+ area_orientation = 'h';\r
+ o_area = o_harea;\r
+ area_x = harea_x;\r
+ area_y = harea_y;\r
+ inner_area_x = inner_harea_x;\r
+ inner_area_y = inner_harea_y;\r
+\r
+ o_varea.style.visibility = 'hidden';\r
+ o_area.style.left = o_varea.style.left;\r
+ o_area.style.top = o_varea.style.top;\r
+ o_area.style.visibility = 'visible';\r
+ } else {\r
+ area_orientation = 'v';\r
+ o_area = o_varea;\r
+ area_x = varea_x;\r
+ area_y = varea_y;\r
+ inner_area_x = inner_varea_x;\r
+ inner_area_y = inner_varea_y;\r
+\r
+ o_harea.style.visibility = 'hidden';\r
+ o_area.style.left = o_harea.style.left;\r
+ o_area.style.top = o_harea.style.top;\r
+ o_area.style.visibility = 'visible';\r
+ }\r
+\r
+ // Set the new clipping inside the cropping area\r
+ imgedit_setMax(o_backdrop.width, o_backdrop.height);\r
+ o_overlay.style.clip = "rect(" + (parseInt(o_area.style.top)+area_border) + " " + (parseInt(o_area.style.left)+inner_area_x) + " " + (parseInt(o_area.style.top)+inner_area_y) + " " + (parseInt(o_area.style.left)+area_border) + ")";\r
+}\r
+\r
+// Zoom the image. Takes a given stepping (can be negative)\r
+function imgedit_zoom(step) {\r
+ pos = parseInt(o_zoombutton.style.top);\r
+ if (pos+step > slider_top && pos+step < slider_bottom) {\r
+ imgedit_zoomTo(position(o_zoombutton, 'y') + step);\r
+ o_zoombutton.style.top = pos + step + 'px';\r
+ }\r
+\r
+ return false;\r
+}\r
+\r
+// Automatically resize the window to fit cropping area\r
+function imgedit_autoSize(flip) {\r
+\r
+ // First find the largest side\r
+ if (real_x > real_y) {\r
+ // The image is a horizontal one. Resize height to fit.\r
+ fitmode = 'height';\r
+ } else {\r
+ // The image is a vertical one. Resize width to fit.\r
+ fitmode = 'width';\r
+ }\r
+\r
+ // Check if the size should be flipped. If it is 'true' the image will completely fit inside the cropping area.\r
+ // If it is 'false', it will only fit one side inside the cropping area\r
+ if (flip == 'true') {\r
+ if (fitmode == 'width') {\r
+ fitmode = 'height';\r
+ } else {\r
+ fitmode = 'width';\r
+ }\r
+ }\r
+\r
+ // Get new width/height of the image\r
+ if (fitmode == 'width') {\r
+ new_width = inner_area_x - area_border;\r
+ ratio = new_width / real_x;\r
+ new_height = real_y * ratio;\r
+ } else {\r
+ new_height = inner_area_y - area_border;\r
+ ratio = new_height / real_y;\r
+ new_width = real_x * ratio;\r
+ }\r
+\r
+ // Place cropping area to (0|0), because the image has been resized?\r
+ imgedit_scaleIMG(new_width, new_height);\r
+ imgedit_placeArea(-area_border, -area_border);\r
+\r
+ // Place the slider to corresponding ratio.\r
+ o_zoombutton.style.top = slider_bottom - parseInt(ratio/2 * (slider_middle/3)) + 'px';\r
+\r
+ // Adjust some settings inside the HTML form.\r
+ document.getElementById('scaletext').style.visibility = 'visible';\r
+ document.getElementById('autoguess_clicked').value = 'true';\r
+ new_ratio = ratio;\r
+\r
+ return false;\r
+}\r
+\r
+// Get the maximum width/height for a certain axis the cropping area is allowed to move to\r
+function imgedit_getMax(axis, pixels, area_orientation) {\r
+\r
+ // Which is the size we should get?\r
+ if (area_orientation == 'h') {\r
+ maxarea_x = harea_x;\r
+ maxarea_y = harea_y\r
+ } else if (area_orientation == 'v') {\r
+ maxarea_x = varea_x;\r
+ maxarea_y = varea_y\r
+ } else {\r
+ maxarea_x = area_x;\r
+ maxarea_y = area_y\r
+ }\r
+\r
+ if (axis == 'x') {\r
+ value = pixels - maxarea_x + area_border;\r
+ } else {\r
+ value = pixels - maxarea_y + area_border;\r
+ }\r
+\r
+ if (value < -area_border) {\r
+ value = -area_border;\r
+ }\r
+\r
+ return value;\r
+}\r
+\r
+// Scales the background image to a certain size\r
+function imgedit_scaleIMG(new_width, new_height) {\r
+ o_backdrop.width = new_width;\r
+ o_backdrop.height = new_height;\r
+\r
+ o_overlay.width = new_width;\r
+ o_overlay.height = new_height;\r
+\r
+ imgedit_setMax(new_width, new_height);\r
+\r
+ return true;\r
+}\r
+\r
+// Zooms the image to a certain stepping\r
+function imgedit_zoomTo(y) {\r
+ current = slider_bottom - y;\r
+\r
+ temp_height = current - slider_middle;\r
+ temp_ratio = temp_height / (slider_middle*3);\r
+\r
+ if (current > slider_middle) {\r
+ // make smaller than 100%\r
+ new_ratio = 1 + (temp_ratio+temp_ratio);\r
+ } else {\r
+ // make larger than 100%\r
+ new_ratio = 1 + (temp_ratio+temp_ratio);\r
+ }\r
+\r
+ new_width = parseInt(real_x * new_ratio);\r
+ new_height = parseInt(real_y * new_ratio);\r
+\r
+ imgedit_scaleIMG(new_width, new_height);\r
+\r
+ return true;\r
+}\r
+\r
+// OnSubmit catch. Parses current JS values into the form\r
+function imgedit_getCoordinates() {\r
+ document.getElementById('zoombox_x').value = parseInt(o_area.style.left);\r
+ document.getElementById('zoombox_y').value = parseInt(o_area.style.top);\r
+ document.getElementById('zoombox_factor').value = new_ratio;\r
+ document.getElementById('area_orientation').value = area_orientation;\r
+\r
+ return true;\r
+}\r
+\r
+// Initializes everything\r
+function imgedit_init(zoombox_width, init_area_border, pad_left, pad_top, init_area_orientation) {\r
+ // Store objects\r
+ o_backdrop = document.getElementById("backdrop");\r
+ o_overlay = document.getElementById("overlay");\r
+ o_harea = document.getElementById("harea");\r
+ o_varea = document.getElementById("varea");\r
+ o_zoombutton = document.getElementById("zoombutton");\r
+\r
+ // Object sizes\r
+ full_x = parseInt(o_backdrop.width);\r
+ full_y = parseInt(o_backdrop.height);\r
+\r
+ real_x = document.getElementById('real_img_width').value;\r
+ real_y = document.getElementById('real_img_height').value;\r
+\r
+ area_border = init_area_border;\r
+\r
+ harea_x = parseInt(o_harea.width);\r
+ harea_y = parseInt(o_harea.height);\r
+\r
+ varea_x = parseInt(o_varea.width);\r
+ varea_y = parseInt(o_varea.height);\r
+\r
+ inner_harea_x = harea_x - area_border;\r
+ inner_harea_y = harea_y - area_border;\r
+\r
+ inner_varea_x = varea_x - area_border;\r
+ inner_varea_y = varea_y - area_border;\r
+\r
+ new_ratio = document.getElementById('zoombox_factor').value;\r
+\r
+ slider_width = 10;\r
+ slider_top = 0;\r
+ slider_bottom = 95;\r
+ slider_space = slider_bottom - slider_top;\r
+ slider_middle = slider_space / 2;\r
+ zoombox_left = -(o_zoombutton.width/2) + (slider_width/2);\r
+\r
+ // Make objects dragabble\r
+ DOMDrag.init(o_harea, null, -area_border, imgedit_getMax('x', full_x, 'h'), -area_border, imgedit_getMax('y', full_y, 'h'));\r
+ DOMDrag.init(o_varea, null, -area_border, imgedit_getMax('x', full_x, 'v'), -area_border, imgedit_getMax('y', full_y, 'v'));\r
+ DOMDrag.init(o_zoombutton, null, zoombox_left, zoombox_left, slider_top, slider_bottom);\r
+\r
+ o_harea.onDrag = function (x, y) {\r
+ o_overlay.style.clip = "rect(" + (y+area_border) + " " + (x+inner_harea_x) + " " + (y+inner_harea_y) + " " + (x+area_border) + ")";\r
+ }\r
+\r
+ o_varea.onDrag = function (x, y) {\r
+ o_overlay.style.clip = "rect(" + (y+area_border) + " " + (x+inner_varea_x) + " " + (y+inner_varea_y) + " " + (x+area_border) + ")";\r
+ }\r
+\r
+ o_zoombutton.onDrag = function (x, y) {\r
+ imgedit_zoomTo(y);\r
+ }\r
+\r
+ o_zoombutton.style.left = zoombox_left + 'px';\r
+\r
+ zf = document.getElementById('zoombox_factor').value;\r
+ if (zf != 1) {\r
+ o_zoombutton.style.top = slider_bottom - parseInt(zf/2 * (slider_middle/3)) + 'px';\r
+ } else {\r
+ o_zoombutton.style.top = slider_top + slider_middle + 'px';\r
+ }\r
+\r
+ o_zoombutton.style.visibility = 'visible';\r
+\r
+ o_harea.style.cursor = 'move';\r
+ o_harea.style.left = pad_left + 'px';\r
+ o_harea.style.top = pad_top + 'px';\r
+\r
+ o_varea.style.cursor = 'move';\r
+ o_varea.style.left = pad_left + 'px';\r
+ o_varea.style.top = pad_top + 'px';\r
+\r
+ area_orientation = '';\r
+ imgedit_toggleAreaOrientation(init_area_orientation);\r
+}
\ No newline at end of file
Version 1.1-alpha7()
------------------------------------------------------------------------
+ * Support to crop images from within the media database. Pick a
+ picture in the MDB, go to the property section of that image
+ and click on the "EDIT" link. (garvinhicking)
+
+ TODO:
+ - Operate also on PNG, TIFF etc. (currently only JPEG!)
+ - Support image magick (currently ony gdlib!)
+ - Currently backup files are scattered around, fix this.
+ - Interface cleanup
+ - Add options to only affect the images thumbnail instead
+ of always saving the whole picture.
+ - Internationalization!
+
* Move the DB charset option to serendipity_config_local.inc.php to
issue propper DB connections instantly. (garvinhicking)
}
switch ($serendipity['GET']['adminAction']) {
+ case 'imgedit':
+ echo '<div class="warning js_warning"><em>' . PREFERENCE_USE_JS_WARNING . '</em></div>';
+
+ if (!isset($serendipity['eyecandy']) || serendipity_db_bool($serendipity['eyecandy'])) {
+ } else {
+ return true;
+ }
+
+ include(S9Y_INCLUDE_PATH . "include/functions_images_crop.inc.php");
+ $media['is_imgedit'] = true;
+ $media['css_imgedit'] = serendipity_getTemplateFile('admin/imgedit.css');
+
+ if (isset($serendipity['GET']['fid'])) {
+ $file = serendipity_fetchImageFromDatabase($serendipity['GET']['fid']);
+ if (!is_array($file) || !serendipity_checkPermission('adminImagesDelete') || (!serendipity_checkPermission('adminImagesMaintainOthers') && $file['authorid'] != '0' && $file['authorid'] != $serendipity['authorid'])) {
+ return;
+ }
+
+ $fullfile = $serendipity['serendipityPath'] . $serendipity['uploadPath'] . $file['path'] . $file['name'] . '.' . $file['extension'];
+ $httpfile = $serendipity['serendipityHTTPPath'] . $serendipity['uploadHTTPPath'] . $file['path'] . $file['name'] . '.' . $file['extension'];
+
+ $img = new imgedit($fullfile, $httpfile);
+
+ // Set the filenames used for the cropping areas. Width/Height are automagically detected. Orientation is either horizontal or vertical.
+ $img->setArea('imgedit_area.gif', 'h');
+ $img->setArea('imgedit_varea.gif', 'v');
+
+ // Let the IMGEditor do its magic. It will parse its results straightly into a template variable array.
+ $img->main();
+ $serendipity['smarty']->assign('imgedit', $img->imgedit_smarty);
+ serendipity_smarty_fetch('IMGEDIT', $img->output_template);
+ }
+ break;
+
case 'sync':
if (!serendipity_checkPermission('adminImagesSync')) {
break;
$infile = $serendipity['serendipityPath'] . $serendipity['uploadPath'] . $directory . $file;
+ echo 'From: ' . $infile . '<br />';
if ($is_temporary) {
$temppath = dirname($thumbname);
if (!is_dir($temppath)) {
} else {
$outfile = $serendipity['serendipityPath'] . $serendipity['uploadPath'] . $directory . $f . '.' . $thumbname . '.' . $suf;
}
+ echo 'To: ' . $outfile . '<br />';
$fdim = @serendipity_getimagesize($infile, '', $suf);
if (isset($fdim['noimage'])) {
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo LANG_CHARSET; ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $css_file; ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo serendipity_getTemplateFile('admin/pluginmanager.css'); ?>" />
+
<script type="text/javascript">
function spawn() {
if (self.Spawnextended) {
--- /dev/null
+#zoomslider {\r
+ position: relative;\r
+ display: block;\r
+ width: 10px; /* If you change the width of this, also change the JavaScript variable "slider_width"!!! */\r
+ height: 100px;\r
+ border: 1px solid yellow;\r
+ background-color: yellow;\r
+ color: black;\r
+ margin-left: auto;\r
+ margin-right: auto;\r
+ text-align: center;\r
+ margin-top: 5px;\r
+ margin-bottom: 5px;\r
+}\r
+\r
+#zoombutton {\r
+ position: absolute;\r
+ display: inline;\r
+ background-color: red;\r
+ margin: 0px;\r
+ padding: 0px;\r
+ border: 0px;\r
+ cursor: move;\r
+ z-index: 4;\r
+ visibility: hidden;\r
+}\r
+\r
+.smallcaps {\r
+ font-family: Verdana;\r
+ font-size: 7pt;\r
+ color: white;\r
+}\r
+\r
+.nospace {\r
+ margin: 0px;\r
+ padding: 0px;\r
+}\r
+\r
+.button {\r
+ border: 1px solid gray;\r
+ font-family: Verdana;\r
+ font-size: 7pt;\r
+ color: white;\r
+ background-color: #303030;\r
+ padding: 3px;\r
+}\r
+\r
+.specialbutton {\r
+ border: 1px solid gray;\r
+ font-family: Verdana;\r
+ font-size: 8pt;\r
+ color: white;\r
+ background-color: red;\r
+ padding: 3px;\r
+\r
+ margin: 5px;\r
+}\r
+\r
+.small {\r
+ width: 25px;\r
+ margin-top: 5px;\r
+}\r
+\r
+.center {\r
+ margin-left: auto;\r
+ margin-right: auto;\r
+ text-align: center;\r
+ vertical-align: middle;\r
+}\r
+\r
+.center span {\r
+ position: relative;\r
+ top: -5px;\r
+}\r
+\r
+#imgedit {\r
+ position: absolute;\r
+ left: 10px;\r
+ top: 25px;\r
+ margin: 15px;\r
+ padding: 5px;\r
+}\r
+\r
+#outer {\r
+ display: block;\r
+ position: absolute;\r
+ z-index: 1;\r
+}\r
+\r
+#backdrop {\r
+ display: block;\r
+ position: absolute;\r
+ z-index: 2;\r
+ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55);\r
+ -moz-opacity: 0.55;\r
+}\r
+\r
+#overlay {\r
+ position: absolute;\r
+ display: block;\r
+ z-index: 3;\r
+ cursor: move;\r
+ overflow: hidden;\r
+}\r
+\r
+#harea {\r
+ position: absolute;\r
+ display: block;\r
+ z-index: 4;\r
+}\r
+\r
+#varea {\r
+ position: absolute;\r
+ display: block;\r
+ z-index: 4;\r
+}\r
+\r
+#zoom {\r
+ display: block;\r
+ float: left;\r
+ height: 140px;\r
+ border: 1px solid red;\r
+ vertical-align: middle;\r
+ margin-left: auto;\r
+ margin-right: auto;\r
+ text-align: center;\r
+ position: absolute;\r
+}\r
+\r
+#scaletext {\r
+ display: inline;\r
+}\r
+\r
+\r
+#cropimage {\r
+ overflow: hidden;\r
+ display: block;\r
+ position: absolute;\r
+ top: 1px;\r
+}\r
+\r
+.info {\r
+ display: block;\r
+ position: relative;\r
+ border: 1px solid black;\r
+ color: black;\r
+ background-color: #A0A0A0;\r
+ margin: 20px;\r
+ padding: 10px;\r
+}\r
+\r
+legend {\r
+ background-color: #A0A0A0;\r
+ font-family: Verdana;\r
+ font-size: 12pt;\r
+ font-weight: bold;\r
+ -moz-border-radius-topleft: 10px;\r
+ -moz-border-radius-topright: 10px;\r
+ border-left: 1px solid black;\r
+ border-right: 1px solid black;\r
+ padding: 3px;\r
+ color: white;\r
+}\r
+\r
+.error {\r
+ color: red;\r
+}\r
+\r
+code {\r
+ color: white;\r
+ font-size: 8pt;\r
+}\r
+\r
<meta http-equiv="Content-Type" content="text/html; charset={$CONST.LANG_CHARSET}" />
<link rel="stylesheet" type="text/css" href="{$media.css}" />
<link rel="stylesheet" type="text/css" href="{$media.css_tree}" />
+ <link rel="stylesheet" type="text/css" href="{$media.css_imgedit}" />
+
+ {if $media.is_imgedit}
+ <style type="text/css">
+ #outer {ldelim}
+ left: {$imgedit.zoombox_padding}px;
+ {rdelim}
+
+ #overlay {ldelim}
+ clip: rect({$imgedit.overlay_clip_top} {$imgedit.overlay_clip_right} {$imgedit.overlay_clip_bottom} {$imgedit.overlay_clip_left});
+ {rdelim}
+
+ #harea {ldelim}
+ left: {$imgedit.zoombox_x}px;
+ top: {$imgedit.zoombox_y}px;
+ visibility: {$imgedit.harea_visibility};
+ {rdelim}
+
+ #varea {ldelim}
+ left: {$imgedit.zoombox_x}px;
+ top: {$imgedit.zoombox_y}px;
+ visibility: {$imgedit.varea_visibility};
+ {rdelim}
+
+ #zoom {ldelim}
+ width: {$imgedit.zoombox_width}px;
+ {rdelim}
+
+ #scaletext {ldelim}
+ visibility: {$imgedit.scale_visibility};
+ {rdelim}
+
+ #outer {ldelim}
+ width: {$imgedit.img_width}px;
+ height: {$imgedit.img_height}px;
+ border: 1px solid red;
+ position: relative;
+ display: block;
+ {rdelim}
+
+
+ </style>
+ <script type="text/javascript" src="bundled-libs/dragdrop.js" ></script>
+ <script type="text/javascript" src="bundled-libs/imgedit.js" ></script>
+ {/if}
+
<script type="text/javascript" src="bundled-libs/YahooUI/treeview/YAHOO.js"></script>
<script type="text/javascript" src="bundled-libs/YahooUI/treeview/treeview.js" ></script>
</head>
</script>
{/if}
{$media.external}
+
+ {if $media.is_imgedit}
+ {$IMGEDIT}
+ {/if}
+
<!-- EXTERNAL MEDIA END -->
{elseif $media.case == 'default'}
--- /dev/null
+ <div id="imgedit">\r
+ <form class="nospace" method="post" action="{$imgedit.my_url}" onsubmit="imgedit_getCoordinates()">\r
+ <div class="smallcaps center">\r
+ <input class="specialbutton" type="submit" name="crop" value="Crop this image! I'm serious!" />\r
+ <div id="scaletext">\r
+ <span>OR</span> <input class="specialbutton" type="submit" onclick="return imgedit_autoSize('true');" name="scale" value="Just get that crap somehow inside, will ya? (Equals to: Fit image to largest side)" />\r
+ </div>\r
+ </div>\r
+\r
+ <input type="hidden" id="area_orientation" name="area_orientation" value="{$imgedit.area_orientation}" />\r
+ <input type="hidden" id="zoombox_factor" name="zoombox_factor" value="{$imgedit.zoombox_factor}" />\r
+ <input type="hidden" id="zoombox_x" name="zoombox_x" value="{$imgedit.zoombox_x}" />\r
+ <input type="hidden" id="zoombox_y" name="zoombox_y" value="{$imgedit.zoombox_y}" />\r
+ <input type="hidden" id="real_img_width" name="real_img_width" value="{$imgedit.real_img_width}" />\r
+ <input type="hidden" id="real_img_height" name="real_img_height" value="{$imgedit.real_img_height}" />\r
+ <input type="hidden" id="autoguess_clicked" name="autoguess_clicked" value="{$imgedit.autoguess_clicked}" />\r
+\r
+ <div id="zoom">\r
+ <div class="smallcaps">\r
+ <input type="submit" name="action[enlarge]" onclick="return imgedit_zoom(-2); this.blur();" value="Enlarge" class="button" />\r
+ </div>\r
+\r
+ <script language="JavaScript" type="text/javascript">\r
+ document.write('<div id="zoomslider"><img id="zoombutton" src="{serendipity_getFile file="admin/img/imgedit_slider.gif"}" width="25" height="5" alt="[Slider]" /></div>');\r
+ </script>\r
+\r
+ <noscript>\r
+ <div class="smallcaps">Zoom: {$imgedit.zoombox_factor}x</div>\r
+ </noscript>\r
+\r
+ <div class="smallcaps"><input type="submit" name="action[reduce]" onclick="return imgedit_zoom(2); this.blur();" value="Reduce" class="button" /></div>\r
+ <div class="smallcaps"><input type="submit" name="autoscale" onclick="return imgedit_autoSize('false');" value="Best Guess" class="button" /></div>\r
+\r
+ <!-- BEGIN ORIENTATION_AVAILABLE -->\r
+ <div class="smallcaps"><input type="image" name="toggle_area_orientation" onclick="return imgedit_areaOrientation();" title="Toggle Orientation" alt="Toggle Orientation" src="{serendipity_getFile file="admin/img/imgedit_orientation.gif"}" /></div>\r
+ <!-- END ORIENTATION_AVAILABLE -->\r
+ <noscript>\r
+ <br />\r
+ <input class="button" type="submit" name="action[moveup]" onclick="this.blur();" value="^" /><br />\r
+ <input class="button" type="submit" name="action[moveleft]" onclick="this.blur();" value="<" />\r
+ <input class="button" type="submit" name="action[moveright]" onclick="this.blur();" value=">" /><br />\r
+ <input class="button" type="submit" name="action[movedown]" onclick="this.blur();" value="V" /><br />\r
+ <span class="smallcaps">Move by <input class="button small" type="text" name="move_increase" value="{$imgedit.move_increase}" />px</span>\r
+ </noscript>\r
+ </div>\r
+\r
+ <div id="outer">\r
+ <img id="backdrop" src="{$imgedit.http_img_name}" alt="Backdrop" width="{$imgedit.img_width}" height="{$imgedit.img_height}" />\r
+ <img id="overlay" src="{$imgedit.http_img_name}" alt="Overlay" width="{$imgedit.img_width}" height="{$imgedit.img_height}" />\r
+ <img id="harea" src="{$imgedit.harea_img_name}" alt="[Crop area]" width="{$imgedit.harea_width}" height="{$imgedit.harea_height}" />\r
+ <img id="varea" src="{$imgedit.varea_img_name}" alt="[Crop area]" width="{$imgedit.varea_width}" height="{$imgedit.varea_height}" />\r
+ </div>\r
+ </form>\r
+ </div>\r
+ <script language="JavaScript" type="text/javascript">imgedit_init({$imgedit.zoombox_width}, {$imgedit.area_border}, {$imgedit.zoombox_x}, {$imgedit.zoombox_y}, '{$imgedit.area_orientation}');</script>\r
+ </body>\r
+</html>
\ No newline at end of file
--- /dev/null
+ <fieldset class="info" id="fs_info">\r
+ <legend>Output Information</legend>\r
+\r
+ Your image was {$imgedit.real_img_width} x {$imgedit.real_img_height} pixels (Orientation: {$imgedit.area_orientation}).<br />\r
+ Depending on your zoom of {$imgedit.zoombox_factor}x, it was {$imgedit.zoom_img_width} x {$imgedit.zoom_img_height} pixels.<br />\r
+ It got scaled to {$imgedit.img_width} x {$imgedit.img_height} pixels.<br />\r
+ Then a rectangle starting from ({$imgedit.slice_from_x}|{$imgedit.slice_from_y}) to ({$imgedit.slice_to_x}|{$imgedit.slice_to_y}) has been sliced from it.<br />\r
+ <br />\r
+\r
+ {if $imgedit.image_cut}\r
+ The image has been correctly cropped and only the part inside of the rectangle is going to be shown.\r
+ {/if}\r
+\r
+ {if $imgedit.image_no_cut}\r
+ Because the source dimensions were smaller than the destination dimensions, the image does not fill up the complete space.\r
+ {/if}\r
+\r
+ {if $imgedit.image_error}\r
+ <span class="error">However, there were errors processing your image.</span>\r
+ {/if}\r
+ </fieldset>\r
+\r
+ <fieldset class="info" style="height: 200px">\r
+ <legend>Image Result</legend>\r
+\r
+ Cropped Image:<br />\r
+\r
+ <div id="outer">\r
+ <img id="cropimage" alt="Cropped image" src="{$imgedit.http_img_name}?{$imgedit.refresh_line}" width="{$imgedit.img_width}" height="{$imgedit.img_height}" class="crop" />\r
+ </div>\r
+ </fieldset>\r
+\r
+ <fieldset class="info">\r
+ <legend>Play it again, Sam</legend>\r
+\r
+ That was great! So, please once more, with feeling!.\r
+ </fieldset>
\ No newline at end of file
{/foreach}
</select>
</div>
+ {if $file.is_image}
+ <div>
+ <br /><a target="_blank" class="serendipityPrettyButton" href="serendipity_admin_image_selector.php?serendipity[adminModule]=images&serendipity[adminAction]=imgedit&serendipity[fid]={$file.id}">{$CONST.EDIT}</a>
+ </div>
+ {/if}
</div>
<h3>{$CONST.MEDIA_KEYWORDS}</h3>
projects / s9y.git / commitdiff
