Adds optional QRCodes and filtering for displayed files.

README.md

@@ -23,6 +23,7 @@ h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h
 * [jQuery](http://jquery.com) (MIT/GPL)
 * [jQuery.mousewheel](http://github.com/brandonaaron/jquery-mousewheel) (MIT)
 * [modernizr](http://www.modernizr.com) (MIT/BSD)
+* [qrcode](http://www.d-project.com/qrcode/index.html) (MIT)
 
 
 ## Changelog
@@ -30,15 +31,17 @@ h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h
 
 ### v0.18 - *2012-02-??*
 
-* updates year in `LICENSE.TXT`
-* updates es translation
+* adds optional QRCode display
+* adds optional filtering for displayed files and folders
+* improves zipped download
 * custom headers/footers are now optional and disabled by default
 * fixes problems with folder recognition in the JS version
 * fixes include problems in PHP version
 * fixes path problems on servers running on Windows in PHP version
 * fixes broken links in custom headers/footers while zipped download enabled
 * fixes problems with thumbnails for files with single or double quotes in filename
-* improves zipped download
+* updates year in `LICENSE.TXT`
+* updates es translation
 
 
 ### v0.17 - *2011-11-28*

build.properties

@@ -3,7 +3,7 @@ custom             = true
 
 # project
 project.name       = h5ai
-project.version    = 0.18
+project.version    = pre0.18
 
 
 # src

src/_h5ai/config.js

@@ -112,7 +112,20 @@ var H5AI_CONFIG = {
 		 * Requires PHP on the server.
 		 * Enable zipped download of selected entries.
 		 */
-		"zippedDownload": true
+		"zippedDownload": true,
+
+		/*
+		 * Show QRCodes on hovering files.
+		 * Set this to the desired size in pixel or null to not display QRCodes.
+		 * A good size to start with might be 150.
+		 */
+		"qrCodesSize": 150,
+
+		/*
+		 * Allow filtering the displayed files and folders.
+		 * Filters are ment to be JavaScript regular expressions.
+		 */
+		"showFilter": true
 	},
 
 

src/_h5ai/css/inc/context.less

@@ -0,0 +1,21 @@
+
+#context {
+	position: fixed;
+	display: none;
+	right: 16px;
+	bottom: 50px;
+
+	background-color: #fff;
+	border: 2px solid #ddd;
+	padding: 8px;
+
+	span {
+		display: block;
+	}
+
+	.qrcode {
+		canvas {
+			display: block;
+		}
+	}
+}

src/_h5ai/css/inc/main.less

@@ -42,7 +42,7 @@ body > nav {
 		padding: 0 10px;
 		color: #999;
 	}
-	a, a:active, a:visited {
+	a, a:active, a:visited, span.element {
 		color: #555;
 		cursor: pointer;
 		text-decoration: none;
@@ -60,9 +60,11 @@ body > nav {
 			opacity: 1.0;
 		}
 	}
-	.current a {
-		background-color: rgba(255,255,255,0.5);
-		opacity: 1.0;
+	.current {
+		a, span.element {
+			background-color: rgba(255,255,255,0.5);
+			opacity: 1.0;
+		}
 	}
 	img {
 		position: relative;
@@ -70,7 +72,7 @@ body > nav {
 		width: 16px;
 		height: 16px;
 	}
-	img + span {
+	img + span, img + input {
 		margin-left: 6px;
 	}
 	.crumb {
@@ -103,6 +105,18 @@ body > nav {
 			background-color: rgba(255,0,0,0.5);
 		}
 	}
+	#filter {
+		float: right;
+		border-left: 1px solid rgb(231,231,231);
+
+		input {
+			border: none;
+			font-family: Ubuntu, sans-serif;
+			color: #555;
+			background-color: rgba(0,0,0,0);
+			width: 100px;
+		}
+	}
 }
 
 
@@ -128,6 +142,7 @@ body > nav {
 @import "table";
 @import "extended";
 @import "tree";
+@import "context";
 
 
 body > footer {

src/_h5ai/footer.html

@@ -29,6 +29,6 @@
 	</footer>
 	<script src="/_h5ai/js/libs.js"></script>
 	<script src="/_h5ai/config.js"></script>
-	<script src="/_h5ai/js/main-js.js"></script>
+	<script src="/_h5ai/js/main.js"></script>
 </body>
 </html>

src/_h5ai/header.php

@@ -55,6 +55,6 @@
 	</footer>
 	<script src="/_h5ai/js/libs.js"></script>
 	<script src="/_h5ai/config.js"></script>
-	<script src="/_h5ai/js/main-php.js"></script>
+	<script src="/_h5ai/js/main.js"></script>
 	<section id="table">
 		<!-- The following code was generated by Apache's autoindex module and gets ignored and removed from the DOM tree. -->

src/_h5ai/js/inc/Context.js

@@ -0,0 +1,55 @@
+
+(function ($, H5AI) {
+
+	H5AI.context = (function () {
+
+		var $context,
+			qrCodesSize,
+			showQrCode = function ($a) {
+
+				var absHref = $a.attr('href'),
+					url = 'http://' + document.domain + absHref;
+
+				$context.find('.qrcode').empty().qrcode({
+					render: Modernizr.canvas ? 'canvas' : 'div',
+					width: qrCodesSize,
+					height: qrCodesSize,
+					color: '#333',
+					text: url
+				});
+			},
+			init = function () {
+
+				qrCodesSize = H5AI.core.settings.qrCodesSize;
+				if (!qrCodesSize) {
+					return;
+				}
+
+				var hideTimeoutId = null;
+
+				$context = $('<div id="context"><div class="qrcode"/></div>');
+				$context.appendTo('body');
+
+				$('#extended')
+					.on('mouseenter', '.entry.file a', function () {
+
+						showQrCode($(this));
+						clearTimeout(hideTimeoutId);
+						$context.stop(true, true).fadeIn(400);
+					})
+					.on('mouseleave', '.entry.file a', function () {
+
+						hideTimeoutId = setTimeout(function () {
+
+							$context.stop(true, true).fadeOut(400);
+						}, 200);
+					});
+			};
+
+
+		return {
+			init: init
+		}
+	}())
+
+}(jQuery, H5AI));

src/_h5ai/js/inc/Core.js

@@ -15,10 +15,8 @@
 
 				rootAbsHref: "/",
 				h5aiAbsHref: "/_h5ai/",
-
 				customHeader: null,
 				customFooter: null,
-
 				viewmodes: ["details", "icons"],
 				sortorder: "na",
 				showTree: true,
@@ -29,11 +27,11 @@
 				setParentFolderLabels: true,
 				linkHoverStates: true,
 				dateFormat: "yyyy-MM-dd HH:mm",
-
 				showThumbs: false,
 				thumbTypes: ["bmp", "gif", "ico", "image", "jpg", "png", "tiff"],
-
-				zippedDownload: false
+				zippedDownload: false,
+				qrCodesSize: null,
+				showFilter: false
 			},
 			settings = $.extend({}, defaults, config.options),
 			currentDateFormat = settings.dateFormat,

src/_h5ai/js/inc/Finder.js

@@ -0,0 +1,87 @@
+
+(function ($, H5AI) {
+
+	H5AI.finder = (function () {
+
+		var filter = function (re) {
+
+				var match = [],
+					noMatch = [];
+
+				if (re) {
+					$('#extended .entry').each(function () {
+
+						var label = $(this).find('.label').text();
+
+						if (label.match(re)) {
+							match.push(this);
+						} else {
+							noMatch.push(this);
+						}
+					});
+				} else {
+					match = $('#extended .entry');
+				}
+
+				$(match).fadeIn(200);
+				$(noMatch).fadeOut(200);
+			},
+			checkState = function (focus) {
+
+				var $filter = $('#filter'),
+					$input = $filter.find('input'),
+					val = $input.val();
+
+				console.log('checkState', val, focus);
+
+				if (val || focus) {
+					$filter.addClass('current');
+				} else {
+					$filter.removeClass('current');
+				}
+			},
+			init = function () {
+
+				if (H5AI.core.settings.showFilter) {
+					$("<li id='filter'><span class='element'><img alt='filter' /><input type='text' value='' placeholder='Filter' /></span></li>")
+						.on('click', function () {
+
+							var $input = $(this).find('input');
+							$input.focus();
+						})
+						.find("img").attr("src", H5AI.core.image("filter")).end()
+						.find("input")
+							.on('focus', function () {
+
+								checkState(true);
+							})
+							.on('blur', function () {
+
+								checkState(false);
+							})
+							.on('keyup', function () {
+
+								var $input = $(this),
+									val = $input.val();
+
+								if (val) {
+									filter(new RegExp(val));
+								} else {
+									filter();
+								}
+								checkState($input.is(':focus'));
+							})
+						.end()
+						.appendTo($("#navbar"));
+				}
+
+			};
+
+
+		return {
+			init: init,
+			filter: filter
+		}
+	}())
+
+}(jQuery, H5AI));

src/_h5ai/js/inc/ZippedDownload.js

@@ -68,12 +68,12 @@
 				}
 
 				event.preventDefault();
+				$(':focus').blur();
 				if (!event.ctrlKey) {
 					$("#extended a").removeClass("selected");
 					updateDownloadBtn();
 				}
 				$selectionRect.show().css({left: x, top: y, width: 0, height: 0});
-				selectionUpdate(event);
 
 				$document
 					.on("mousemove", selectionUpdate)
@@ -81,7 +81,7 @@
 			},
 			noSelection = function (event) {
 
-				event.stopPropagation();
+				event.stopImmediatePropagation();
 				return false;
 			},
 			noSelectionUnlessCtrl = function (event) {

src/_h5ai/js/inc/lib/jquery.qrcode.js

@@ -0,0 +1,129 @@
+/*!
+ * jQuery.qrcode
+ * author: Lars Jung
+ * license: MIT
+ *
+ * kudos to http://github.com/jeromeetienne/jquery-qrcode
+ */
+(function ($) {
+
+	// @include "qrcode.js"
+
+	var createQr = function (typeNumber, correctLevel, text) {
+
+			var qr = new qrcode(typeNumber, correctLevel);
+			qr.addData(text);
+			qr.make();
+
+			return qr;
+		},
+		createBestQr = function (text) {
+
+			for (var type = 2; type <= 10; type += 1) {
+				try {
+					return createQr(type, 'L', text);
+				} catch (err) {}
+			}
+
+			return null;
+		},
+		createCanvas = function (settings) {
+
+			var qr = createBestQr(settings.text),
+				$canvas = $('<canvas/>').attr('width', settings.width).attr('height', settings.height),
+				ctx = $canvas[0].getContext('2d');
+
+			if (settings.bgColor) {
+				ctx.fillStyle = settings.bgColor;
+				ctx.fillRect(0, 0, settings.width, settings.height);
+			}
+
+			if (qr) {
+				var moduleCount = qr.getModuleCount(),
+					moduleWidth = settings.width / moduleCount,
+					moduleHeight = settings.height / moduleCount,
+					row, col;
+
+				ctx.beginPath();
+				for (row = 0; row < moduleCount; row += 1) {
+					for (col = 0; col < moduleCount; col += 1) {
+						if (qr.isDark(row, col)) {
+							ctx.rect(col * moduleWidth, row * moduleHeight, moduleWidth, moduleHeight);
+						}
+					}
+				}
+				ctx.fillStyle = settings.color;
+				ctx.fill();
+			}
+
+			return $canvas;
+		},
+		createDiv = function (settings) {
+
+			var qr = createBestQr(settings.text),
+				$div = $('<div/>').css({
+										position: 'relative',
+										left: 0,
+										top: 0,
+										padding: 0,
+										margin: 0,
+										width: settings.width,
+										height: settings.height
+									});
+
+			if (settings.bgColor) {
+				$div.css('background-color', settings.bgColor);
+			}
+
+			if (qr) {
+				var moduleCount = qr.getModuleCount(),
+					moduleWidth = Math.floor(settings.width / moduleCount),
+					moduleHeight = Math.floor(settings.height / moduleCount),
+					offsetLeft = Math.floor(0.5 * (settings.width - moduleWidth * moduleCount)),
+					offsetTop = Math.floor(0.5 * (settings.height - moduleHeight * moduleCount)),
+					row, col;
+
+				for (row = 0; row < moduleCount; row++) {
+					for (col = 0; col < moduleCount; col++) {
+						if (qr.isDark(row, col)) {
+							$('<div/>')
+								.css({
+									left: offsetLeft + col * moduleWidth,
+									top: offsetTop + row * moduleHeight
+								})
+								.appendTo($div);
+						}
+					}
+				}
+
+				$div.children()
+							.css({
+								position: 'absolute',
+								padding: 0,
+								margin: 0,
+								width: moduleWidth,
+								height: moduleHeight,
+								'background-color': settings.color
+							});
+			}
+
+			return $div;
+		},
+
+		defaults = {
+			render: 'canvas',
+			width: 256,
+			height: 256,
+			color: '#000',
+			bgColor: null,
+			text: 'no text'
+		};
+
+	$.fn.qrcode = function(options) {
+
+		var settings = $.extend({}, defaults, options);
+
+		$(this).append(settings.render === 'canvas' ? createCanvas(settings) : createDiv(settings));
+	};
+
+}(jQuery));

src/_h5ai/js/libs.js

@@ -3,6 +3,7 @@
 // @include "inc/lib/jquery.mousewheel.js"
 // @include "inc/lib/jquery.fracs-core.min.js"
 // @include "inc/lib/jquery.scrollpanel.js"
+// @include "inc/lib/jquery.qrcode.js"
 
 // @include "inc/lib/amplify.min.js"
 // @include "inc/lib/date.js"

src/_h5ai/js/main-php.js

@@ -1,25 +0,0 @@
-/*jslint browser: true, confusion: true, regexp: true, white: true */
-/*jshint browser: true, confusion: true, regexp: false, white: false */
-/*global jQuery, amplify, H5AI_CONFIG */
-
-(function ($) {
-	"use strict";
-
-	var H5AI = {};
-
-	// @include "inc/Util.js"
-	// @include "inc/Core.js"
-	// @include "inc/Sort.js"
-	// @include "inc/ZippedDownload.js"
-
-	$(function () {
-
-		H5AI.core.init();
-		H5AI.sort.init();
-		H5AI.zippedDownload.init();
-
-		$("#tree").scrollpanel();
-		H5AI.core.shiftTree(false, true);
-	});
-
-}(jQuery));

src/_h5ai/js/main.js

@@ -11,6 +11,8 @@
 	// @include "inc/Core.js"
 	// @include "inc/Sort.js"
 	// @include "inc/ZippedDownload.js"
+	// @include "inc/Finder.js"
+	// @include "inc/Context.js"
 
 	// @include "inc/Path.js"
 	// @include "inc/Connector.js"
@@ -19,11 +21,23 @@
 
 	$(function () {
 
-		H5AI.extended.init();
+		var isPhp = $('html.h5ai-php').length > 0;
+
+		if (!isPhp) {
+			H5AI.extended.init();
+		}
 
 		H5AI.core.init();
 		H5AI.sort.init();
+		H5AI.finder.init();
 		H5AI.zippedDownload.init();
+		H5AI.context.init();
+
+		if (isPhp) {
+			$("#tree").scrollpanel();
+			H5AI.core.shiftTree(false, true);
+		}
+
 	});
 
 }(jQuery));

src/_h5ai/php/inc/Tree.php

@@ -92,7 +92,7 @@ class TreeEntry {
 			$html .= "<span class='indicator" . $indicatorState . "'><img src='" . $this->h5ai->image("tree") . "' alt='>' /></span>\n";
 		}
 		$html .= "<a href='" . $this->absHref . "'>\n";
-		$html .= "<span class='icon'><img src='" . $this->h5ai->icon($icon) . "' alt='" . $icon . "' /></span>\n";
+		$html .= "<span class='icon'><img src='" . $this->h5ai->icon($icon) . "' alt='" . $icon . "' /></span>";
 		$html .= "<span class='label'>" . $this->label . "</span>" . $hint . "\n";
 		$html .= "</a>\n";
 		$html .= $this->contentToHtml();