Updates demo.

src/demo/index.html

@@ -15,7 +15,7 @@
 	<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet'>
 	<link href='styles.css' rel='stylesheet'>
 	<script src="jquery-1.10.2.js"></script>
-	<script src="jquery.qrcode.js"></script>
+	<script src="../jquery.qrcode-{{pkg.version}}.js"></script>
 	<script src="ff-range.js"></script>
 	<script src="scripts.js"></script>
 </head>

src/demo/scripts.js

@@ -1,99 +1,103 @@
 
-var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]',
+(function ($) {
+	'use strict';
 
-	guiValuePairs = [
-		["size", "px"],
-		["minversion", ""],
-		["quiet", "modules"],
-		["radius", "%"],
-		["msize", "%"],
-		["mposx", "%"],
-		["mposy", "%"]
-	],
+	var isOpera = Object.prototype.toString.call(window.opera) === '[object Opera]',
 
-	updateGui = function () {
+		guiValuePairs = [
+			["size", "px"],
+			["minversion", ""],
+			["quiet", " modules"],
+			["radius", "%"],
+			["msize", "%"],
+			["mposx", "%"],
+			["mposy", "%"]
+		],
 
-		for (var idx in guiValuePairs) {
+		updateGui = function () {
 
-			var pair = guiValuePairs[idx],
-				$label = $('label[for="' + pair[0] + '"]');
+			$.each(guiValuePairs, function (idx, pair) {
 
-			$label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1]));
+				var $label = $('label[for="' + pair[0] + '"]');
+
+				$label.text($label.text().replace(/:.*/, ': ' + $('#' + pair[0]).val() + pair[1]));
+			});
+		},
+
+		updateQrCode = function () {
+
+			var options = {
+					render: $("#render").val(),
+					ecLevel: $("#eclevel").val(),
+					minVersion: parseInt($("#minversion").val(), 10),
+
+					fill: $("#fill").val(),
+					background: $("#background").val(),
+					// fill: $("#img-buffer")[0],
+
+					text: $("#text").val(),
+					size: parseInt($("#size").val(), 10),
+					radius: parseInt($("#radius").val(), 10) * 0.01,
+					quiet: parseInt($("#quiet").val(), 10),
+
+					mode: parseInt($("#mode").val(), 10),
+
+					mSize: parseInt($("#msize").val(), 10) * 0.01,
+					mPosX: parseInt($("#mposx").val(), 10) * 0.01,
+					mPosY: parseInt($("#mposy").val(), 10) * 0.01,
+
+					label: $("#label").val(),
+					fontname: $("#font").val(),
+					fontcolor: $("#fontcolor").val(),
+
+					image: $("#img-buffer")[0]
+				};
+
+			$("#container").empty().qrcode(options);
+		},
+
+		update = function () {
+
+			updateGui();
+			updateQrCode();
+		},
+
+		onImageInput = function () {
+
+			var input = $("#image")[0];
+
+			if (input.files && input.files[0]) {
+
+				var reader = new FileReader();
+
+				reader.onload = function (event) {
+					$("#img-buffer").attr("src", event.target.result);
+					$("#mode").val("4");
+					setTimeout(update, 250);
+				};
+				reader.readAsDataURL(input.files[0]);
+			}
+		},
+
+		download = function (event) {
+
+			var data = $("#container canvas")[0].toDataURL('image/png');
+			$("#download").attr("href", data);
+		};
+
+
+	$(function () {
+
+		if (isOpera) {
+			$('html').addClass('opera');
+			$('#radius').prop('disabled', true);
 		}
-	},
 
-	updateQrCode = function () {
+		$("#download").on("click", download);
+		$("#image").on('change', onImageInput);
+		$("input, textarea, select").on("input change", update);
+		$(window).load(update);
+		update();
+	});
 
-		var options = {
-				render: $("#render").val(),
-				ecLevel: $("#eclevel").val(),
-				minVersion: parseInt($("#minversion").val(), 10),
-
-				fill: $("#fill").val(),
-				background: $("#background").val(),
-				// fill: $("#img-buffer")[0],
-
-				text: $("#text").val(),
-				size: parseInt($("#size").val(), 10),
-				radius: parseInt($("#radius").val(), 10) * 0.01,
-				quiet: parseInt($("#quiet").val(), 10),
-
-				mode: parseInt($("#mode").val(), 10),
-
-				mSize: parseInt($("#msize").val(), 10) * 0.01,
-				mPosX: parseInt($("#mposx").val(), 10) * 0.01,
-				mPosY: parseInt($("#mposy").val(), 10) * 0.01,
-
-				label: $("#label").val(),
-				fontname: $("#font").val(),
-				fontcolor: $("#fontcolor").val(),
-
-				image: $("#img-buffer")[0]
-			};
-
-		$("#container").empty().qrcode(options);
-	},
-
-	update = function () {
-
-		updateGui();
-		updateQrCode();
-	},
-
-	onImageInput = function () {
-
-		var input = $("#image")[0];
-
-		if (input.files && input.files[0]) {
-
-			var reader = new FileReader();
-
-			reader.onload = function (event) {
-				$("#img-buffer").attr("src", event.target.result);
-				$("#mode").val("4");
-				setTimeout(update, 250);
-			};
-			reader.readAsDataURL(input.files[0]);
-		}
-	},
-
-	download = function (event) {
-
-		var data = $("#container canvas")[0].toDataURL('image/png');
-		$("#download").attr("href", data);
-	};
-
-
-$(function () {
-
-	if (isOpera) {
-		$('html').addClass('opera');
-		$('#radius').prop('disabled', true);
-	}
-
-	$("#download").on("click", download);
-	$("#image").on('change', onImageInput);
-	$("input, textarea, select").on("input change", update);
-	$(window).load(update);
-	update();
-});
+}(jQuery));

src/demo/styles.css

@@ -101,10 +101,7 @@ input, textarea, select {
 
 input[type="range"] {
 	-webkit-appearance: none;
-/*	height: 8px;
-	margin-top: 4px;
-	margin-bottom: 4px;
-*/	cursor: pointer;
+	cursor: pointer;
 }
 input::-webkit-slider-thumb {
 	-webkit-appearance: none;