Context Navigation

← Previous Changeset
Next Changeset →

Changeset 256

Timestamp:

07/10/05 05:44:48 (8 years ago)

Author:

gogo

Message:

Various updates to ImageManager, see #343

Location:

Files:

: 2 added
: 13 modified

plugins/ImageManager/Classes/ImageEditor.php (modified) (2 diffs)
plugins/ImageManager/Classes/ImageManager.php (modified) (3 diffs)
plugins/ImageManager/assets/imagelist.css (modified) (1 diff)
plugins/ImageManager/assets/images.js (modified) (1 diff)
plugins/ImageManager/assets/manager.css (modified) (2 diffs)
plugins/ImageManager/assets/manager.js (modified) (5 diffs)
plugins/ImageManager/assets/popup.js (modified) (2 diffs)
plugins/ImageManager/backend.php (modified) (1 diff)
plugins/ImageManager/config.inc.php (modified) (5 diffs)
plugins/ImageManager/editorFrame.php (modified) (1 diff)
plugins/ImageManager/image-manager.js (modified) (4 diffs)
plugins/ImageManager/images.php (modified) (5 diffs)
plugins/ImageManager/manager.php (modified) (2 diffs)
plugins/ImageManager/resizer.php (added)
popups/color_picker.js (added)

Legend:

: Unmodified
: Added
: Removed

trunk/plugins/ImageManager/Classes/ImageEditor.php

r111	r256
154	154	//we need to make the relative path once more.
155	155	$newSaveFile = $this->makeRelative($relative, $newSaveFile);
	156	$image['saveFile'] = $newSaveFile;
156	157	$newSaveFullpath = $this->manager->getFullPath($newSaveFile);
157	158	$img->save($newSaveFullpath, $values[0], $quality);
…	…
178	179
179	180	$image['src'] = $newURL;
	181	$image['width'] = $imgInfo[0];
	182	$image['height'] = $imgInfo[1];
180	183	$image['dimensions'] = $imgInfo[3];
181	184	$image['file'] = $newRelative;

trunk/plugins/ImageManager/Classes/ImageManager.php

r111	r256
282	282	$thumbnail = $this->config['thumbnail_prefix'].$path_parts['basename'];
283	283
284		if($this->config['safe_mode'] == true
285		\|\| strlen(trim($this->config['thumbnail_dir'])) == 0)
	284	if( strlen(trim($this->config['thumbnail_dir'])) == 0 \|\| $this->config['safe_mode'] == true)
286	285	{
287	286	Return Files::makeFile($path_parts['dirname'],$thumbnail);
…	…
289	288	else
290	289	{
291		~~if(strlen(trim($this->config['thumbnail_dir'])) > 0)~~
292		{
293	290	$path = Files::makePath($path_parts['dirname'],$this->config['thumbnail_dir']);
294	291	if(!is_dir($path))
295	292	Files::createFolder($path);
296	293	Return Files::makeFile($path,$thumbnail);
297		}
298		~~else //should this ever happen?~~
299		{
300		~~//error_log('ImageManager: Error in creating thumbnail name');~~
301		}
302	294	}
303	295	}
…	…
340	332	}
341	333
	334	}
	335	}
	336
	337
	338	/**
	339	* For a given image file, get the respective resized filename
	340	* no file existence check is done.
	341	* @param string $fullpathfile the full path to the image file
	342	* @param integer $width the intended width
	343	* @param integer $height the intended height
	344	* @param boolean $mkDir whether to attempt to make the resized_dir if it doesn't exist
	345	* @return string of the resized filename
	346	*/
	347	function getResizedName($fullpathfile, $width, $height, $mkDir = TRUE)
	348	{
	349	$path_parts = pathinfo($fullpathfile);
	350
	351	$thumbnail = $this->config['resized_prefix']."_{$width}x{$height}_{$path_parts['basename']}";
	352
	353	if( strlen(trim($this->config['resized_dir'])) == 0 \|\| $this->config['safe_mode'] == true )
	354	{
	355	Return Files::makeFile($path_parts['dirname'],$thumbnail);
	356	}
	357	else
	358	{
	359	$path = Files::makePath($path_parts['dirname'],$this->config['resized_dir']);
	360	if($mkDir && !is_dir($path))
	361	Files::createFolder($path);
	362	Return Files::makeFile($path,$thumbnail);
342	363	}
343	364	}

trunk/plugins/ImageManager/assets/imagelist.css

r43	r256
1	1	body { margin: 0; padding: 0; }
2		.block { height: 98px; width: 98px; border: 1px solid threedface; text-align: center; behavior: url(hover.htc ); }
3		.block a img { border: 0 none; }
4		.block:hover, .block.hover{ background-color: #ffc; }
5		.edit { font-size: 9pt; font-family: "MS Sans Serif", Geneva, sans-serif; padding-top: 3px;}
6		.edit a { border: 1px solid white; padding: 3px; }
7		.edit a:hover { border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; background-color: #ffc; }
8		.edit a img { border: 0 none; vertical-align: bottom; }
	2	.edit { font-size: small; font-family: small-caption, sans-serif; padding-top: 3px;}
	3	.edit a { border: none; padding: 3px; text-decoration:none; }
	4	.edit a:hover { background-color: ButtonHighlight; }
	5	.edit a img { border: none; vertical-align: bottom; }
9	6	.noResult { font-size:large; font-weight:bold; color:#ccc; font-family: Helvetica, sans-serif; text-align: center; padding-top: 60px; }
10	7	.error { color:#c00; font-weight:bold; font-size: medium; font-family: Helvetica, sans-serif; text-align: center; padding-top: 65px;}
	8
	9	.dir_holder, .thumb_holder
	10	{
	11	width:110px; height:132px;
	12	float:left;
	13	margin:6px;
	14	background-color:ButtonFace;
	15	border: 1px outset;
	16	}
	17
	18	.thumb_holder.active
	19	{
	20	background:Highlight;
	21	color:HighlightText;
	22	border:1px dashed Highlight;
	23	}
	24
	25	.dir_holder a.dir, .thumb_holder a.thumb
	26	{
	27	height:100px;
	28	display:block;
	29	text-align:center;
	30	padding:5px;
	31	text-decoration:none;
	32	}
	33
	34	.thumb_holder a.thumb img
	35	{
	36	border:1px solid black;
	37	}
	38
	39	.dir_holder a.dir img
	40	{
	41	border:none;
	42	}

trunk/plugins/ImageManager/assets/images.js

r60	r256
56	56	var obj = topDoc.getElementById('orginal_width'); obj.value = width;
57	57	var obj = topDoc.getElementById('orginal_height'); obj.value = height;
	58	update_selected();
58	59	}
	60
	61	var _current_selected = null;
	62	function update_selected()
	63	{
	64	var topDoc = window.top.document;
	65	if(_current_selected)
	66	{
	67	_current_selected.className = _current_selected.className.replace(/(^\| )active( \|$)/, '$1$2');
	68	_current_selected = null;
	69	}
	70	// Grab the current file, and highlight it if we have it
	71	var c_file = topDoc.getElementById('f_url').value;
	72	var selection = topDoc.getElementById('dirPath');
	73	var currentDir = selection.options[selection.selectedIndex].text;
	74	var dRe = new RegExp('^(' + currentDir.replace(/([\/\^$+?.()\|{}[\]])/g, '\\$1') + ')([^/])$');
	75	if(dRe.test(c_file))
	76	{
	77	var holder = document.getElementById('holder_' + asc2hex(RegExp.$2));
	78	if(holder)
	79	{
	80	_current_selected = holder;
	81	holder.className += ' active';
	82	}
	83	}
	84	}
	85
	86	function asc2hex(str)
	87	{
	88	var hexstr = '';
	89	for(var i = 0; i < str.length; i++)
	90	{
	91	var hex = (str.charCodeAt(i)).toString(16);
	92	if(hex.length == 1) hex = '0' + hex;
	93	hexstr += hex;
	94	}
	95	return hexstr;
	96	}
59	97
60	98	function showMessage(newMessage)

trunk/plugins/ImageManager/assets/manager.css

r43	r256
4	4	.title { background-color: #ddf; color: #000; font-weight: bold; font-size: 120%; padding: 3px 10px; margin-bottom: 10px; border-bottom: 1px solid black; letter-spacing: 2px;}
5	5	form { padding: 0px; margin: 0 auto; width: 550px;}
6		.dirWidth { width: 70%; }
	6
7	7	a { padding: 5px; border: 1px solid ButtonFace; }
8	8	a img { border: 0; }
9	9	a:hover { border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; }
10	10	.dirs { padding: 1em; }
11		.imageFrame { width: ~~525px~~; height: 145px; margin: 0 auto; margin-top: 1em; background-color: White;}
	11	.imageFrame { width: 100%; height: 145px; margin: 0 auto; margin-top: 1em; background-color: White;}
12	12	.smallWidth{ width: 4em; }
13	13	.largelWidth{ width: 22em; }
…	…
18	18	#messages { position: relative; left: 175px; top: 115px; background-color: white; width:200px; float: left; margin-top: -52px; border: 1px solid #ccc; text-align: center; padding: 15px; }
19	19	#message { font-size: 15px; font-weight: bold; color: #69c; }
	20	iframe { border:1px inset; border-right:none; border-left:none; border-bottom:none; }
	21
	22	table { margin-top:10px; }
	23	th, td { padding-right:3px; text-align:left; font-family:small-caption,helvetica,sans-serif; }

trunk/plugins/ImageManager/assets/manager.js

r252	r256
37	37	document.getElementById("f_align").selectedIndex = 0;
38	38
	39	// Hookup color pickers
	40	var bgCol_pick = document.getElementById('bgCol_pick');
	41	var f_backgroundColor = document.getElementById('f_backgroundColor');
	42	var bgColPicker = new colorPicker({cellsize:'5px',callback:function(color){f_backgroundColor.value=color;}});
	43	bgCol_pick.onclick = function() { bgColPicker.open('top,right', f_backgroundColor ); }
	44
	45	var bdCol_pick = document.getElementById('bdCol_pick');
	46	var f_borderColor = document.getElementById('f_borderColor');
	47	var bdColPicker = new colorPicker({cellsize:'5px',callback:function(color){f_borderColor.value=color;}});
	48	bdCol_pick.onclick = function() { bdColPicker.open('top,right', f_borderColor ); }
	49
	50
	51
39	52	var uploadForm = document.getElementById('uploadForm');
40	53	if(uploadForm) uploadForm.target = 'imgManager';
…	…
43	56	if (param)
44	57	{
45		document.getElementById("f_url").value = param["f_url"];
46		document.getElementById("f_alt").value = param["f_alt"];
47		document.getElementById("f_border").value = param["f_border"];
48		document.getElementById("f_vert").value = param["f_vert"];
49		document.getElementById("f_horiz").value = param["f_horiz"];
50		document.getElementById("f_width").value = param["f_width"];
51		document.getElementById("f_height").value = param["f_height"];
	58	var image_src = param.f_url;
	59	var image_regex = new RegExp( '(https?://[^/]*)?' + base_url.replace(/\/$/, '') );
	60	param.f_url = param.f_url.replace( image_regex, "" );
	61
	62	for (var id in param)
	63	{
	64	if(id == 'f_align') continue;
	65	if(document.getElementById(id))
	66	{
	67	document.getElementById(id).value = param[id];
	68	}
	69	}
	70
	71
	72
	73	document.getElementById("orginal_width").value = param["f_width"];
	74	document.getElementById("orginal_height").value = param["f_height"];
52	75	setAlign(param["f_align"]);
53		}
54
55		document.getElementById("f_url").focus();
	76
	77	// Locate to the correct directory
	78	var rd = _resized_dir.replace(HTMLArea.RE_Specials, '\\$1');
	79	var rp = _resized_prefix.replace(HTMLArea.RE_Specials, '\\$1');
	80	var dreg = new RegExp('^(.*/)(?:'+rd+')?(?:'+rp+'_[0-9]+x[0-9]+_)?([^/]+)$');
	81
	82	if(dreg.test(param['f_url']))
	83	{
	84	changeDir(RegExp.$1);
	85	var dirPath = document.getElementById('dirPath');
	86	for(var i = 0; i < dirPath.options.length; i++)
	87	{
	88	if(dirPath.options[i].value == encodeURIComponent(RegExp.$1))
	89	{
	90	dirPath.options[i].selected = true;
	91	break;
	92	}
	93	}
	94	}
	95	}
	96
	97	document.getElementById("f_alt").focus();
	98
	99	// For some reason dialog is not shrinkwrapping correctly in IE so we have to explicitly size it for now.
	100	if(HTMLArea.is_ie) window.resizeTo(600, 460);
56	101	}
57	102
…	…
66	111	{
67	112	// pass data back to the calling window
68		var fields = ["f_url", "f_alt", "f_align", "f_~~border", "f_horiz", "f_vert", "f_height", "f_width~~"];
	113	var fields = ["f_url", "f_alt", "f_align", "f_width", "f_height", "f_padding", "f_margin", "f_border", "f_borderColor", "f_backgroundColor"];
69	114	var param = new Object();
70	115	for (var i in fields)
…	…
83	128	param[id] = makeURL(base_url,el.value);
84	129	}
85		else
	130	else if (el)
86	131	param[id] = el.value;
87		}
	132	else alert("Missing " + fields[i]);
	133
	134	}
	135
	136	// See if we need to resize the image
	137	var origsize =
	138	{
	139	w:document.getElementById('orginal_width').value,
	140	h:document.getElementById('orginal_height').value
	141	}
	142
	143	if( (origsize.w != param.f_width)
	144	\|\| (origsize.h != param.f_height) )
	145	{
	146	// Yup, need to resize
	147	var resized = HTMLArea._geturlcontent(_backend_url + '&__function=resizer&img=' + encodeURIComponent(document.getElementById('f_url').value) + '&width=' + param.f_width + '&height=' + param.f_height);
	148	// alert(resized);
	149	resized = eval(resized);
	150	if(resized)
	151	{
	152	param.f_url = makeURL(base_url, resized);
	153	}
	154	}
	155
	156
88	157	__dlg_close(param);
89	158	return false;
…	…
199	268	message.appendChild(document.createTextNode(i18n(newMessage)));
200	269
201		messages.style.display = ~~"block"~~;
	270	messages.style.display = '';
202	271	}
203	272

trunk/plugins/ImageManager/assets/popup.js

r60	r256
12	12	// $Id: popup.js 26 2004-03-31 02:35:21Z Wei Zhuo $
13	13
14		// Slightly modified for the ImageManager, window resizing is done only
15		// by each window's script. Added translation for a few other HTML elements.
16
17		function getAbsolutePos(el) {
18		var r = { x: el.offsetLeft, y: el.offsetTop };
19		if (el.offsetParent) {
20		var tmp = getAbsolutePos(el.offsetParent);
21		r.x += tmp.x;
22		r.y += tmp.y;
23		}
24		return r;
25		};
26
27		function comboSelectValue(c, val) {
28		var ops = c.getElementsByTagName("option");
29		for (var i = ops.length; --i >= 0;) {
30		var op = ops[i];
31		op.selected = (op.value == val);
32		}
33		c.value = val;
34		};
35
36		function __dlg_onclose() {
37		if(opener.Dialog._return)
38		opener.Dialog._return(null);
39		};
40
41		function __dlg_init(bottom) {
42		var body = document.body;
43		var body_height = 0;
44		if (typeof bottom == "undefined") {
45		var div = document.createElement("div");
46		body.appendChild(div);
47		var pos = getAbsolutePos(div);
48		body_height = pos.y;
49		} else {
50		var pos = getAbsolutePos(bottom);
51		body_height = pos.y + bottom.offsetHeight;
52		}
53		if(opener && opener.Dialog && opener.Dialog._arguments)
54		window.dialogArguments = opener.Dialog._arguments;
55		if (!document.all) {
56		//window.sizeToContent();
57		//window.sizeToContent(); // for reasons beyond understanding,
58		// only if we call it twice we get the
59		// correct size.
60		window.addEventListener("unload", __dlg_onclose, true);
61		// center on parent
62		var x = opener.screenX + (opener.outerWidth - window.outerWidth) / 2;
63		var y = opener.screenY + (opener.outerHeight - window.outerHeight) / 2;
64		window.moveTo(x, y);
65		//window.innerWidth = body.offsetWidth + 5;
66		//window.innerHeight = body_height + 2;
67		} else {
68		// window.dialogHeight = body.offsetHeight + 50 + "px";
69		// window.dialogWidth = body.offsetWidth + "px";
70		//window.resizeTo(body.offsetWidth, body_height);
71		var ch = body.clientHeight;
72		var cw = body.clientWidth;
73		//window.resizeBy(body.offsetWidth - cw, body_height - ch);
74		var W = body.offsetWidth;
75		var H = 2 * body_height - ch;
76		if(ch <= 0) H = body_height;
77		var x = (screen.availWidth - W) / 2;
78		var y = (screen.availHeight - H) / 2;
79
80		window.moveTo(x, y);
81		}
82		document.body.onkeypress = __dlg_close_on_esc;
83		};
	14	// Override the ordinary popup.js translation to add translation for a few other HTML elements.
84	15
85	16	function __dlg_translate(context) {
…	…
108	39	document.title = HTMLArea._lc(document.title, context);
109	40	};
110
111
112		~~// closes the dialog and passes the return info upper.~~
113		~~function __dlg_close(val) {~~
114		~~opener.Dialog._return(val);~~
115		~~window.close();~~
116		};
117
118		~~function __dlg_close_on_esc(ev) {~~
119		~~ev \|\| (ev = window.event);~~
120		~~if (ev.keyCode == 27) {~~
121		~~window.close();~~
122		~~return false;~~
123		}
124		~~return true;~~
125		};

trunk/plugins/ImageManager/backend.php

r48	r256
111	111	break;
112	112
	113	case "resizer":
	114
	115	include_once( $IMConfig['base_dir'] . "/resizer.php" );
	116	exit();
	117
	118	break;
	119
113	120	default:
114	121

trunk/plugins/ImageManager/config.inc.php

r93	r256
1		<?
	1	<?php
2	2	/**
3	3	* Image Manager configuration file.
…	…
113	113	*/
114	114
115		define('IMAGE_CLASS', 'GD');
	115	$IMConfig['IMAGE_CLASS'] = 'GD';
	116
116	117
117	118	// -------------------------------------------------------------------------
…	…
126	127	*/
127	128
128		define('IMAGE_TRANSFORM_LIB_PATH', 'C:/"Program Files"/ImageMagick-5.5.7-Q16/');
	129	$IMConfig['IMAGE_TRANSFORM_LIB_PATH'] ='/usr/bin/';
	130
	131	// For windows, something like
	132	// C:/"Program Files"/ImageMagick-5.5.7-Q16/
129	133
130	134	// -------------------------------------------------------------------------
…	…
160	164
161	165	/**
	166	* Resized prefix
	167	*
	168	* The prefix for resized files, something like .resized will do. The
	169	* resized files will be named <prefix>_<width>x<height>_<original>
	170	* resized files are created when one changes the dimensions of an image
	171	* in the image manager selection dialog - the image is scaled when the
	172	* user clicks the ok button.
	173	*/
	174
	175	$IMConfig['resized_prefix'] = '.resized';
	176
	177	// -------------------------------------------------------------------------
	178
	179	/**
	180	* Resized Directory
	181	*
	182	* Resized images may also be stored in a directory, except in safe mode.
	183	*/
	184
	185	$IMConfig['resized_dir'] = '.resized';
	186
	187	// -------------------------------------------------------------------------
	188
	189	/**
162	190	* Allow New Directories
163	191	*
…	…
243	271
244	272
	273
	274
	275
	276
	277	////////////////////////////////////////////////////////////////////////////////
	278	// ================== END OF CONFIGURATION ======================= //
	279	////////////////////////////////////////////////////////////////////////////////
	280
	281
	282
	283
	284
	285	// If config specified from front end, merge it
	286	if(isset($_REQUEST['backend_config']))
	287	{
	288	// Config specified from front end, check that it's valid
	289	session_start();
	290	$secret = $_SESSION[$_REQUEST['backend_config_secret_key_location']];
	291
	292	if($_REQUEST['backend_config_hash'] !== sha1($_REQUEST['backend_config'] . $secret))
	293	{
	294	die("Backend security error.");
	295	}
	296
	297	$to_merge = unserialize($_REQUEST['backend_config']);
	298	if(!is_array($to_merge))
	299	{
	300	die("Backend config syntax error.");
	301	}
	302
	303	$IMConfig = array_merge($IMConfig, $to_merge);
	304	$IMConfig['backend_url'] .= "backend_config=" . rawurlencode($_REQUEST['backend_config']) . '&';
	305	$IMConfig['backend_url'] .= "backend_config_hash=" . rawurlencode($_REQUEST['backend_config_hash']) . '&';
	306	$IMConfig['backend_url'] .= "backend_config_secret_key_location=" . rawurlencode($_REQUEST['backend_config_secret_key_location']) . '&';
	307
	308	}
	309
	310	define('IMAGE_CLASS', $IMConfig['IMAGE_CLASS']);
	311	define('IMAGE_TRANSFORM_LIB_PATH', $IMConfig['IMAGE_TRANSFORM_LIB_PATH']);
245	312	define( "IM_CONFIG_LOADED", "yes" );
246	313

trunk/plugins/ImageManager/editorFrame.php

r111	r256
43	43	<?php if ($editor->isFileSaved() == 1) { ?>
44	44	alert(i18n('File saved.'));
	45	window.parent.opener.selectImage
	46	(
	47	'<?php echo $imageInfo['savedFile'] ?>',
	48	'<?php echo $imageInfo['savedFile'] ?>'.replace(/^.\/?([^\/])$/, '$1'),
	49	<?php echo $imageInfo['width'] ?>,
	50	<?php echo $imageInfo['height'] ?>
	51	);
	52	window.parent.opener.parent.refresh();
	53	window.parent.close();
45	54	<?php } else if ($editor->isFileSaved() == -1) { ?>
46	55	alert(i18n('File was not saved.'));

trunk/plugins/ImageManager/image-manager.js

r60	r256
43	43	HTMLArea.Config.prototype.ImageManager =
44	44	{
45		'backend' : _editor_url + 'plugins/ImageManager/backend.php?__plugin=ImageManager&',
46		'images_url' : _editor_url + 'plugins/ImageManager/demo_images'
	45	'backend' : _editor_url + 'plugins/ImageManager/backend.php?__plugin=ImageManager&',
	46
	47	// It's useful to pass the configuration to the backend through javascript
	48	// (this saves editing the backend config itself), but the problem is
	49	// how do you make it so that the enduser can not sneakily send thier own
	50	// config to the server (including directory locations etc!).
	51	//
	52	// Well, we specify 3 config variables (if the first is given all 3 are required)
	53	// first in backend_config we provide the backend configuration (in the format
	54	// required by the backend, in the case of PHP this is a serialized structure). We do not
	55	// need to provide a complete configuration here, it will be merged with defaults.
	56	//
	57	// Then in backend_config_secret_key_location we store the name of a key in a
	58	// session structure which stores a secret key (anything random), for example
	59	// when making the Xinha editor in PHP we might do
	60	// <?php $_SESSION['Xinha:ImageManager'] = uniqid('secret_'); ?>
	61	// xinha_config.ImageManager.backend_config_secret_key_location = 'Xinha:ImageManager';
	62	//
	63	// Then finally in backend_config_hash we store an SHA1 hash of the config combined
	64	// with the secret.
	65	//
	66	// A full example in PHP might look like
	67	//
	68	// <?php
	69	// $myConfig = array('base_dir' = '/home/your/directory', 'base_url' => '/directory')
	70	// $myConfig = serialize($myConfig);
	71	// if(!isset($_SESSION['Xinha:ImageManager'])) $_SESSION['Xinha:ImageManager'] = uniqid('secret_');
	72	// $secret = $_SESSION['Xinha:ImageManager'];
	73	// ?>
	74	// xinha_config.ImageManager.backend_config = '<?php echo jsaddslashes($myConfig)?>';
	75	// xinha_config.ImageManager.backend_config_hash = '<?php echo sha1($myConfig . $secret)?>';
	76	// xinha_config.ImageManager.backend_config_secret_key_location = 'Xinha:ImageManager';
	77	//
	78	// (for jsspecialchars() see http://nz.php.net/manual/en/function.addcslashes.php)
	79	//
	80	//
	81	'backend_config' : null,
	82	'backend_config_hash': null,
	83	'backend_config_secret_key_location': 'Xinha:ImageManager'
47	84	}
48	85
…	…
68	105	if ( image )
69	106	{
70		if ( HTMLArea.is_ie )
	107
	108	outparam =
71	109	{
72		var image_src = image.src;
73		}
74		else
75		{
76		// gecko
77
78		var image_src = image.getAttribute("src");
79
80		// strip off any http://blah prefix
81
82		var images_url = editor.config.ImageManager.images_url.replace( /https?:\/\/[^\/]*/, "" );
83
84		// alert( "images_url is '" + images_url + "'" );
85
86		var image_regex = new RegExp( images_url );
87
88		// alert(" regex is '" + image_regex.source + "'" );
89
90		image_src = image_src.replace( image_regex, "" );
91
92		// alert( "new source is " + image_src );
93		}
94
95		outparam =
96		{
97		f_url : HTMLArea.is_ie ? image.src : image_src,
	110	f_url : HTMLArea.is_ie ? image.src : image.src,
98	111	f_alt : image.alt,
99		f_border : image.border,
	112	f_border : image.style.borderWidth ? image.style.borderWidth : image.border,
100	113	f_align : image.align,
101		f_~~vert : image.vspace~~,
102		f_~~horiz : image.hspace~~,
	114	f_padding: image.style.padding,
	115	f_margin : image.style.margin,
103	116	f_width : image.width,
104		f_height : image.height
	117	f_height : image.height,
	118	f_backgroundColor: image.style.backgroundColor,
	119	f_borderColor: image.style.borderColor
105	120	};
106	121
107		// TODO - somehow highlight and focus the currently selected image.
	122	function shortSize(cssSize)
	123	{
	124	if(/ /.test(cssSize))
	125	{
	126	var sizes = cssSize.split(' ');
	127	var useFirstSize = true;
	128	for(var i = 1; i < sizes.length; i++)
	129	{
	130	if(sizes[0] != sizes[i])
	131	{
	132	useFirstSize = false;
	133	break;
	134	}
	135	}
	136	if(useFirstSize) cssSize = sizes[0];
	137	}
	138	return cssSize;
	139	}
	140	outparam.f_border = shortSize(outparam.f_border);
	141	outparam.f_padding = shortSize(outparam.f_padding);
	142	outparam.f_margin = shortSize(outparam.f_margin);
108	143
109	144	} // end of if we selected an image before raising the dialog.
…	…
115	150
116	151	var manager = editor.config.ImageManager.backend + '__function=manager';
	152	if(editor.config.ImageManager.backend_config != null)
	153	{
	154	manager += '&backend_config='
	155	+ encodeURIComponent(editor.config.ImageManager.backend_config);
	156	manager += '&backend_config_hash='
	157	+ encodeURIComponent(editor.config.ImageManager.backend_config_hash);
	158	manager += '&backend_config_secret_key_location='
	159	+ encodeURIComponent(editor.config.ImageManager.backend_config_secret_key_location);
	160	}
117	161
118	162	Dialog(manager, function(param) {
…	…
142	186	switch (field) {
143	187	case "f_alt" : img.alt = value; break;
144		case "f_border" : img.border = parseInt(value \|\| "0"); break;
	188	case "f_border" :
	189	img.style.borderWidth = /[^0-9]/.test(value) ? value : (parseInt(value \|\| "0") + 'px');
	190	if(img.style.borderWidth && !img.style.borderStyle)
	191	{
	192	img.style.borderStyle = 'solid';
	193	}
	194	break;
	195	case "f_borderColor": img.style.borderColor = value; break;
	196	case "f_backgroundColor": img.style.backgroundColor = value; break;
	197	case "f_padding": img.style.padding =
	198	/[^0-9]/.test(value) ? value : (parseInt(value \|\| "0") + 'px'); break;
	199	case "f_margin": img.style.margin =
	200	/[^0-9]/.test(value) ? value : (parseInt(value \|\| "0") + 'px'); break;
145	201	case "f_align" : img.align = value; break;
146		~~case "f_vert" : img.vspace = parseInt(value \|\| "0"); break;~~
147		~~case "f_horiz" : img.hspace = parseInt(value \|\| "0"); break;~~
148	202	case "f_width" : img.width = parseInt(value \|\| "0"); break;
149	203	case "f_height" : img.height = parseInt(value \|\| "0"); break;
150	204	}
	205
151	206	}
152	207

trunk/plugins/ImageManager/images.php

r252	r256
57	57	global $IMConfig;
58	58
59		foreach($list as $entry => $file)
60		{
	59	foreach($list as $entry => $file)
	60	{
61	61	?>
62		~~<td~~>
63
64		~~<?php _ddt( __FILE__, __LINE__, "drawFiles(): relative is '" . $file['relative'] . "' thumbnail '" . $manager->getThumbnail($file['relative']) . "'" ); ?~~>
65
66		~~<table width="100" cellpadding="0" cellspacing="0"><tr><td class="block~~">
67		<table width="100" cellpadding="0" cellspacing="0"><tr><td class="block" style="cursor: pointer;" onclick="selectImage('<? echo $file['relative'];?>', '<? echo $entry; ?>', <? echo $file['image'][0];?>, <? echo $file['image'][1]; ?>);" title="<?php echo $entry; ?> - <?php echo Files::formatSize($file['stat']['size']); ?>">
68
69		~~<img src="<?php print $manager->getThumbnail($file['relative']); ?>" alt="<?php echo $entry; ?> - <?php echo Files::formatSize($file['stat']['size']); ?>"/~~>
70		</td></tr><tr><td class="edit">
71		<a href="<?php print $IMConfig['backend_url']; ?>__function=images&dir=<?php echo $relative; ?>&delf=<?php echo rawurlencode($file['relative']);?>" title="Trash" onclick="return confirmDeleteFile('<?php echo $entry; ?>');"><img src="<?php print $IMConfig['base_url'];?>img/edit_trash.gif" height="15" width="15" alt="Trash"/></a><a href="javascript:;" title="Edit" onclick="editImage('<?php echo rawurlencode($file['relative']);?>');"><img src="<?php print $IMConfig['base_url'];?>img/edit_pencil.gif" height="15" width="15" alt="Edit"/></a>
72		~~<?php if($file['image']){ echo $file['image'][0].'x'.$file['image'][1]; } else echo $entry;?~~>
73		</td></tr></table></td>
74		<?php
	62	<div class="thumb_holder" id="holder_<?php echo asc2hex($entry) ?>">
	63	<a href="#" class="thumb" style="cursor: pointer;" onclick="selectImage('<? echo $file['relative'];?>', '<? echo $entry; ?>', <? echo $file['image'][0];?>, <? echo $file['image'][1]; ?>);return false;" title="<?php echo $entry; ?> - <?php echo Files::formatSize($file['stat']['size']); ?>">
	64	<img src="<?php print $manager->getThumbnail($file['relative']); ?>" alt="<?php echo $entry; ?> - <?php echo Files::formatSize($file['stat']['size']); ?>"/>
	65	</a>
	66	<div class="edit">
	67	<a href="<?php print $IMConfig['backend_url']; ?>__function=images&dir=<?php echo $relative; ?>&delf=<?php echo rawurlencode($file['relative']);?>" title="Trash" onclick="return confirmDeleteFile('<?php echo $entry; ?>');"><img src="<?php print $IMConfig['base_url'];?>img/edit_trash.gif" height="15" width="15" alt="Trash" /></a>
	68
	69	<a href="javascript:;" title="Edit" onclick="editImage('<?php echo rawurlencode($file['relative']);?>');"><img src="<?php print $IMConfig['base_url'];?>img/edit_pencil.gif" height="15" width="15" alt="Edit" /></a>
	70
	71	<?php if($file['image']){ echo $file['image'][0].'x'.$file['image'][1]; } else echo $entry;?>
	72	</div>
	73	</div>
	74	<?php
75	75	}//foreach
76	76	}//function drawFiles
…	…
87	87	foreach($list as $path => $dir)
88	88	{ ?>
89		~~<td><table width="100" cellpadding="0" cellspacing="0"><tr><td class="block~~">
90		~~<a href="images.php?~~dir=<?php echo rawurlencode($path); ?>" onclick="updateDir('<?php echo $path; ?>')" title="<?php echo $dir['entry']; ?>"><img src="<?php print $IMConfig['base_url'];?>img/folder.gif" height="80" width="80" alt="<?php echo $dir['entry']; ?>" /></a>
91		</td></tr><tr>
92		~~<td~~ class="edit">
93		~~<a href="images.php?~~dir=<?php echo $relative; ?>&deld=<?php echo rawurlencode($path); ?>" title="Trash" onclick="return confirmDeleteDir('<?php echo $dir['entry']; ?>', <?php echo $dir['count']; ?>);"><img src="<?php print $IMConfig['base_url'];?>img/edit_trash.gif" height="15" width="15" alt="Trash"/></a>
94		<?php echo $dir['entry']; ?>
95		~~</td~~>
96		~~</tr></table></td~~>
	89	<div class="dir_holder">
	90	<a class="dir" href="<?php print $IMConfig['backend_url'];?>__function=images&dir=<?php echo rawurlencode($path); ?>" onclick="updateDir('<?php echo $path; ?>')" title="<?php echo $dir['entry']; ?>"><img src="<?php print $IMConfig['base_url'];?>img/folder.gif" height="80" width="80" alt="<?php echo $dir['entry']; ?>" /></a>
	91
	92	<div class="edit">
	93	<a href="<?php print $IMConfig['backend_url'];?>__function=images&dir=<?php echo $relative; ?>&deld=<?php echo rawurlencode($path); ?>" title="Trash" onclick="return confirmDeleteDir('<?php echo $dir['entry']; ?>', <?php echo $dir['count']; ?>);"><img src="<?php print $IMConfig['base_url'];?>img/edit_trash.gif" height="15" width="15" alt="Trash"/></a>
	94	<?php echo $dir['entry']; ?>
	95	</div>
	96	</div>
97	97	<?php
98	98	} //foreach
…	…
118	118	<div class="error"><span>Invalid base directory:</span> <?php echo $manager->config['images_dir']; ?></div>
119	119	<?
	120	}
	121
	122	/**
	123	* Utility to convert ascii string to hex
	124	*/
	125	function asc2hex ($temp)
	126	{
	127	$len = strlen($temp);
	128	for ($i=0; $i<$len; $i++) $data.=sprintf("%02x",ord(substr($temp,$i,1)));
	129	return $data;
120	130	}
121	131
…	…
182	192	}
183	193	<?php } ?>
	194	update_selected();
184	195	}
185	196
…	…
207	218	<?php if ($manager->isValidBase() == false) { drawErrorBase($manager); }
208	219	elseif(count($list[0]) > 0 \|\| count($list[1]) > 0) { ?>
209		<table>
210		<tr>
	220
211	221	<?php drawDirs($list[0], $manager); ?>
212	222	<?php drawFiles($list[1], $manager); ?>
213		</tr>
214		</table>
	223
215	224	<?php } else { drawNoResults(); } ?>
216	225	</body>

trunk/plugins/ImageManager/manager.php

r252	r256
20	20	<head>
21	21	<title>Insert Image</title>
22		<script type="text/javascript">
23
24		<?php // temporary. An ImageManager rewrite will take care of this kludge. ?>
25
26		~~_backend_url = "<?php print $IMConfig['backend_url~~']; ?>";
27		</script>
	22	<script type="text/javascript">
	23	// temporary. An ImageManager rewrite will take care of this kludge.
	24	_backend_url = "<?php print $IMConfig['backend_url']; ?>";
	25	_resized_prefix = "<?php echo $IMConfig['resized_prefix']; ?>";
	26	_resized_dir = "<?php echo $IMConfig['resized_dir']; ?>";
	27	</script>
28	28	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
29		<link href="<?php print $IMConfig['base_url'];?>assets/manager.css" rel="stylesheet" type="text/css" />
	29	<link href="<?php print $IMConfig['base_url'];?>assets/manager.css" rel="stylesheet" type="text/css" />
	30	<script type="text/javascript" src="../../popups/popup.js"></script>
30	31	<script type="text/javascript" src="assets/popup.js"></script>
	32	<script type="text/javascript" src="../../popups/color_picker.js"></script>
31	33	<script type="text/javascript" src="<?php print $IMConfig['base_url'];?>assets/dialog.js"></script>
32	34	<script type="text/javascript">
33	35	/<![CDATA[/
34		~~window.resizeTo(600, 460);~~
35
36	36	if(window.opener)
37	37	HTMLArea = window.opener.HTMLArea;
…	…
47	47	<form action="<?php print $IMConfig['backend_url'] ?>" id="uploadForm" method="post" enctype="multipart/form-data">
48	48
49		~~<?php // we have to propagate our values through forms ?>~~
50
51	49	<input type="hidden" name="__plugin" value="ImageManager">
52	50	<input type="hidden" name="__function" value="images">
53	51
54		<fieldset><legend>Image Manager</legend>
55		<div class="dirs">
56		<label for="dirPath">Directory</label>
57		<select name="dir" class="dirWidth" id="dirPath" onchange="updateDir(this)">
58		<option value="/">/</option>
59		<?php foreach($dirs as $relative=>$fullpath) { ?>
60		<option value="<?php echo rawurlencode($relative); ?>"><?php echo $relative; ?></option>
61		<?php } ?>
62		</select>
63		<a href="#" onclick="javascript: goUpDir();" title="Directory Up"><img src="<?php print $IMConfig['base_url']; ?>img/btnFolderUp.gif" height="15" width="15" alt="Directory Up" /></a>
64		<?php if($IMConfig['safe_mode'] == false && $IMConfig['allow_new_dir']) { ?>
65		<a href="#" onclick="newFolder();" title="New Folder"><img src="<?php print $IMConfig['base_url']; ?>img/btnFolderNew.gif" height="15" width="15" alt="New Folder" /></a>
66		<?php } ?>
67		<div id="messages" style="display: none;"><span id="message"></span><img SRC="<?php print $IMConfig['base_url']; ?>img/dots.gif" width="22" height="12" alt="..." /></div>
68		<iframe src="<?php print $IMConfig['backend_url']; ?>__function=images" name="imgManager" id="imgManager" class="imageFrame" scrolling="auto" title="Image Selection" frameborder="0"></iframe>
	52	<fieldset>
	53	<legend>Image Manager</legend>
	54	<table width="100%">
	55	<tr>
	56	<th><label for="dirPath">Directory</label></th>
	57	<td>
	58	<select name="dir" class="dirWidth" id="dirPath" onchange="updateDir(this)">
	59	<option value="/">/</option>
	60	<?php
	61	foreach($dirs as $relative=>$fullpath)
	62	{
	63	?>
	64	<option value="<?php echo rawurlencode($relative); ?>"><?php echo $relative; ?></option>
	65	<?php
	66	}
	67	?>
	68	</select>
	69	</td>
	70	<td>
	71	<a href="#" onclick="javascript: goUpDir();" title="Directory Up"><img src="<?php print $IMConfig['base_url']; ?>img/btnFolderUp.gif" height="15" width="15" alt="Directory Up" /></a>
	72
	73	<?php
	74	if($IMConfig['safe_mode'] == false && $IMConfig['allow_new_dir'])
	75	{
	76	?>
	77	<a href="#" onclick="newFolder();" title="New Folder"><img src="<?php print $IMConfig['base_url']; ?>img/btnFolderNew.gif" height="15" width="15" alt="New Folder" /></a>
	78	<?php
	79	}
	80	?>
	81	</td>
	82	</tr>
	83	<?php
	84	if($IMConfig['allow_upload'] == TRUE)
	85	{
	86	?>
	87	<tr>
	88	<th align="left">Upload:</th>
	89	<td colspan="2">
	90	<input type="file" name="upload" id="upload" />
	91	<input name="Upload" type="submit" id="Upload" value="Upload" onclick="doUpload();" />
	92	</td>
	93	</tr>
	94	<?php
	95	}
	96	?>
	97
	98	</table>
	99
	100	<div id="messages" style="display: none;"><span id="message"></span><img SRC="<?php print $IMConfig['base_url']; ?>img/dots.gif" width="22" height="12" alt="..." /></div>
	101
	102	<iframe src="<?php print $IMConfig['backend_url']; ?>__function=images" name="imgManager" id="imgManager" class="imageFrame" scrolling="auto" title="Image Selection" frameborder="0"></iframe>
	103
	104	</fieldset>
	105
	106	<!-- image properties -->
	107
	108	<table border="0" cellspacing="0" cellpadding="0">
	109	<tr>
	110	<th align="left">Description:</th>
	111	<td colspan="6">
	112	<input type="text" id="f_alt" style="width:100%"/>
	113	</td>
	114	</tr>
	115
	116	<tr>
	117	<th align="left">Width:</th>
	118	<td >
	119	<input id="f_width" type="text" name="f_width" size="4" onchange="javascript:checkConstrains('width');" />
	120	</td>
	121	<td rowspan="2">
	122	<div style="position:relative">
	123	<img src="<?php print $IMConfig['base_url']; ?>img/locked.gif" id="imgLock" width="25" height="32" alt="Constrained Proportions" valign="middle" /><input type="checkbox" id="constrain_prop" checked="checked" onclick="javascript:toggleConstrains(this);" style="position:absolute;top:8px;left:0px;" />
	124	</div>
	125	</td>
	126	<th align="left">Margin:</th>
	127	<td colspan="3">
	128	<input name="f_margin" type="text" id="f_margin" size="3" />
	129	px </td>
	130	</tr>
	131
	132	<tr>
	133	<th align="left">Height:</th>
	134	<td>
	135	<input name="f_height" type="text" id="f_height" size="4" />
	136	</td>
	137	<th align="left">Padding:</th>
	138	<td>
	139	<input name="f_padding" type="text" id="f_padding" size="3" />
	140	px </td>
	141	<th align="left">Color:</th>
	142	<td>
	143	<input name="f_backgroundColor" type="text" id="f_backgroundColor" size="7" />
	144	<input type="button" id="bgCol_pick" value="..." />
	145	</td>
	146	</tr>
	147
	148
	149	<tr>
	150	<th align="left">Align:</th>
	151	<td colspan="2">
	152	<select size="1" id="f_align" title="Positioning of this image">
	153	<option value="" >Not set</option>
	154	<option value="left" >Left</option>
	155	<option value="right" >Right</option>
	156	<option value="texttop" >Texttop</option>
	157	<option value="absmiddle" >Absmiddle</option>
	158	<option value="baseline" selected="selected" >Baseline</option>
	159	<option value="absbottom" >Absbottom</option>
	160	<option value="bottom" >Bottom</option>
	161	<option value="middle" >Middle</option>
	162	<option value="top" >Top</option>
	163	</select>
	164	</td>
	165	<th align="left">Border:</th>
	166	<td>
	167	<input name="f_border" type="text" id="f_border" size="3" />
	168	px </td>
	169	<th align="left">Color:</th>
	170	<td>
	171	<input name="f_borderColor" type="text" id="f_borderColor" size="7" />
	172	<input type="button" id="bdCol_pick" value="..." />
	173	</td>
	174	</tr>
	175
	176	</table>
	177
	178	<div style="text-align: right;">
	179	<hr />
	180	<button type="button" class="buttons" onclick="return refresh();">Refresh</button>
	181	<button type="button" class="buttons" onclick="return onOK();">OK</button>
	182	<button type="button" class="buttons" onclick="return onCancel();">Cancel</button>
69	183	</div>
70		</fieldset>
71		<!-- image properties -->
72		<table class="inputTable">
73		<tr>
74		<td align="right"><label for="f_url">Image File</label></td>
75		<td><input type="text" id="f_url" class="largelWidth" value="" /></td>
76		<td rowspan="3" align="right"> </td>
77		<td align="right"><label for="f_width">Width</label></td>
78		<td><input type="text" id="f_width" class="smallWidth" value="" onchange="javascript:checkConstrains('width');"/></td>
79		<td rowspan="2" align="right"><img src="<?php print $IMConfig['base_url']; ?>img/locked.gif" id="imgLock" width="25" height="32" alt="Constrained Proportions" /></td>
80		<td rowspan="3" align="right"> </td>
81		<td align="right"><label for="f_vert">V Space</label></td>
82		<td><input type="text" id="f_vert" class="smallWidth" value="" /></td>
83		</tr>
84		<tr>
85		<td align="right"><label for="f_alt">Alt</label></td>
86		<td><input type="text" id="f_alt" class="largelWidth" value="" /></td>
87		<td align="right"><label for="f_height">Height</label></td>
88		<td><input type="text" id="f_height" class="smallWidth" value="" onchange="javascript:checkConstrains('height');"/></td>
89		<td align="right"><label for="f_horiz">H Space</label></td>
90		<td><input type="text" id="f_horiz" class="smallWidth" value="" /></td>
91		</tr>
92		<tr>
93		<?php if($IMConfig['allow_upload'] == true) { ?>
94		<td align="right"><label for="upload">Upload</label></td>
95		<td>
96		<table cellpadding="0" cellspacing="0" border="0">
97		<tr>
98		<td><input type="file" name="upload" id="upload"/></td>
99		<td> <button type="submit" name="submit" onclick="doUpload();"/>Upload</button></td>
100		</tr>
101		</table>
102		</td>
103		<?php } else { ?>
104		<td colspan="2"></td>
105		<?php } ?>
106		<td align="right"><label for="f_align">Alignment:</label></td>
107		<td colspan="2">
108		<select size="1" id="f_align" title="Positioning of this image">
109		<option value="" >Not set</option>
110		<option value="left" >Left</option>
111		<option value="right" >Right</option>
112		<option value="texttop" >Texttop</option>
113		<option value="absmiddle" >Absmiddle</option>
114		<option value="baseline" selected="selected" >Baseline</option>
115		<option value="absbottom" >Absbottom</option>
116		<option value="bottom" >Bottom</option>
117		<option value="middle" >Middle</option>
118		<option value="top" >Top</option>
119		</select>
120		</td>
121		<td align="right"><label for="f_border">Border</label></td>
122		<td><input type="text" id="f_border" class="smallWidth" value="" /></td>
123		</tr>
124		<tr>
125		<td colspan="4" align="right">
126		<input type="hidden" id="orginal_width" />
127		<input type="hidden" id="orginal_height" />
128		<input type="checkbox" id="constrain_prop" checked="checked" onclick="javascript:toggleConstrains(this);" />
129		</td>
130		<td colspan="5"><label for="constrain_prop">Constrain Proportions</label></td>
131		</tr>
132		</table>
133		<!--// image properties -->
134		<div style="text-align: right;">
135		<hr />
136		<button type="button" class="buttons" onclick="return refresh();">Refresh</button>
137		<button type="button" class="buttons" onclick="return onOK();">OK</button>
138		<button type="button" class="buttons" onclick="return onCancel();">Cancel</button>
139		</div>
	184
	185	<!--// image properties -->
	186	<input type="hidden" id="orginal_width" />
	187	<input type="hidden" id="orginal_height" />
	188	<input type="hidden" id="f_url" class="largelWidth" value="" />
140	189	</form>
141	190	</body>

Download in other formats: