使用 MooTools Moousture 创建下载包

Zohaib Sibt-e-Hassan 最近为 MooTools 发布了一个很棒的鼠标手势库，名为 Moousture。 Moousture 允许您通过在指定的自定义模式中移动鼠标来触发功能。为了说明 Moousture 的价值，我使用 Mooustures 和 PHP 创建了一个图像下载生成器。

XHTML

<div id="messager">Waiting for you to select images...</div>
<img src="preload-images/1.jpg" alt="Image 1" width="100"  />
<img src="preload-images/2.jpg" alt="Image 2" width="100"  />
<img src="preload-images/3.jpg" alt="Image 3" width="100"  />
<img src="preload-images/4.jpg" alt="Image 4" width="100"  />
<img src="preload-images/5.jpg" alt="Image 5" width="100"  />
<img src="preload-images/6.jpg" alt="Image 6" width="100"  />
<img src="preload-images/7.jpg" alt="Image 7" width="100"  />
<img src="preload-images/8.jpg" alt="Image 8" width="100"  />
<div ></div>
<input type="submit" name="download" id="download"  value="Download Package" />

我们提供图像、一个消息 DIV（让用户知道图像何时被添加和删除）以及一个用于生成文件的提交按钮。

CSS

#messager	{ padding:10px; border:2px solid #fc0; background:#fffea1; margin-bottom:10px; }
.unselected	{ border:2px solid #ccc; background:#fff; }
.selected	{ border:2px solid #3b5998; background:lightblue; }
.moouse		{ width:100px; float:left; margin:0 20px 0 0; padding:5px; }

没什么特别的，除了 selected 类应该让用户清楚地知道图像已被选中。

MooTools JavaScript

/* dom ready */
window.addEvent('domready',function() {
	/* add to each image */
	$$('img.moouse').each(function(img) {
		/* add unselected class */
		img.addClass('unselected');
		/* create the gesture */
		var gest = new Moousture.ReducedLevenMatcher();
		/* set the "add" and "remove" gestures */
		gest.addGesture([4,5,6,7,0,1,2,3], function(error) {
			/* good gesture! */
			if(error < 3) {
				img.addClass('selected');
				document.id('messager').set('text','Image ' + img.get('alt') + ' added.');
			}
			/* bad! */
			else {
				//document.id('messager').set('text','Sorry - we couldn\'t detect that you wanted: ' + img.get('alt') + '.');
			}
		}); //add
		/* set the "add" and "remove" gestures */
		gest.addGesture([4,3,2,1,0,7,6,5], function(error) {
			/* good gesture! */
			if(error < 3) {
				if(img.hasClass('selected')) {
					img.removeClass('selected');
					document.id('messager').set('text','Image ' + img.get('alt') + ' removed.');
				}
			}
			/* bad! */
			else {
				//document.id('messager').set('text','Sorry - we couldn\'t detect that you wanted: ' + img.get('alt') + '.');
			}
		}); //add
		/* add the probe to the image */
		var probe = new Moousture.MouseProbe(img);
		/* create the recorder */
		recorder = new Moousture.Recorder({maxSteps: 20, minSteps: 8, matcher: gest});
		/* monitor the image */
		monitor = new Moousture.Monitor(30, 2);
		/* start monitoring */
		monitor.start(probe, recorder);
	});
	
	/* submission */
	document.id('download').addEvent('click',function() {
		/* get the selected images */
		var selected = $$('img.selected');
		if(selected.length) {
			var qstring = '?images=';
			/* for each image */
			selected.each(function(img) {
				/* add to qstring */
				qstring += img.get('src') + ';';
			});
			/* force download */
			window.location = 'moousture.php' + qstring;
		}
	});
	
});

当 DOM 准备就绪时，我们为每张图片设置两种手势模式——一种用于选择图片，一种用于取消选择图片。当用户选择了他们想要的图像并单击提交按钮时，Moo 会将他们重定向到一个 PHP 地址，其中包含 $_GET[‘image’] 变量中的图像。

请注意，我设置的“错误”阈值是 3。如果用户尝试在图像上做手势，系统会自动计算错误数。此错误编号表示用户手势与给定手势侦听器的差异程度。

PHP

/* if we got images */
if($_GET['images']) {
	/* split the querystring */
	$images = explode(';',$_GET['images']);
	$valid_files = array();
	/* for every image */
	foreach($images as $image) {
		/* if the image exists */
		if(file_exists($image)) {
			/* add it to our good image list */
			$valid_files[] = $image;
		}
	}
	/* if we have good images */
	if(count($valid_files)) {
		/* files */
		$destination_folder = 'image-packages';
		$filename = time().'.zip';
		$path = $destination_folder.'/'.$filename;
		/* create zip! */
		$zip = new ZipArchive();
		if($zip->open($path,ZIPARCHIVE::CREATE) !== true) {
			return false;
		}
		/* add the files */
		foreach($valid_files as $file) {
			$zip->addFile($file,$file);
		}
		/* close the zip */
		$zip->close();
		/* force download zip */
		if(ini_get('zlib.output_compression')) { ini_set('zlib.output_compression', 'Off');	}
		header('Pragma: public');
		header('Expires: 0');
		header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
		header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($path)).' GMT');
		header('Cache-Control: private',false);
		header('Content-Type: application/zip');
		header('Content-Disposition: attachment; filename="package.zip"');
		header('Content-Transfer-Encoding: binary');
		header('Content-Length: '.filesize($path));
		header('Connection: close');
		readfile($path);
		exit();
	}
	die();
}

我们通过 $_GET[‘images’] 接收图像路径。一旦我们验证每个图像都存在，我们就会构建 ZIP 文件并将其强制下载给用户。

当有很多可用图像时，此解决方案不是很好； POST 方法（通过表单提交）最适合这种情况。不过，您对 Moousture 有何看法？对创作者有什么建议吗？