Updates jQuery.qrcode to 0.4.

This commit is contained in:
Lars Jung 2013-07-09 15:41:47 +02:00
parent cb1edc3650
commit 84486af599
2 changed files with 1488 additions and 1442 deletions

View file

@ -34,6 +34,7 @@ modulejs.define('ext/qrcode', ['_', '$', 'modernizr', 'core/settings', 'core/eve
width: settings.size, width: settings.size,
height: settings.size, height: settings.size,
color: '#333', color: '#333',
bgColor: '#fff',
text: 'http://' + document.domain + item.absHref text: 'http://' + document.domain + item.absHref
}); });
}); });

View file

@ -1,4 +1,4 @@
/*! jQuery.qrcode 0.2 - //larsjung.de/qrcode - MIT License */ /*! jQuery.qrcode 0.4 - //larsjung.de/qrcode - MIT License */
// Uses [QR Code Generator](http://www.d-project.com/qrcode/index.html) (MIT), appended to the end of this file. // Uses [QR Code Generator](http://www.d-project.com/qrcode/index.html) (MIT), appended to the end of this file.
// Kudos to [jquery.qrcode.js](http://github.com/jeromeetienne/jquery-qrcode) (MIT). // Kudos to [jquery.qrcode.js](http://github.com/jeromeetienne/jquery-qrcode) (MIT).
@ -6,10 +6,17 @@
(function ($) { (function ($) {
'use strict'; 'use strict';
// Wrapper for the original QR code generator. // Check if canvas is available in the browser (as Modernizr does)
var createQr = function (typeNumber, correctLevel, text) { var canvasAvailable = (function () {
// qrcode is the single public function that will be defined by the `QR Code Generator` var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}()),
// Wrapper for the original QR code generator.
createQr = function (typeNumber, correctLevel, text) {
// `qrcode` is the single public function that will be defined by the `QR Code Generator`
// at the end of the file. // at the end of the file.
var qr = qrcode(typeNumber, correctLevel); var qr = qrcode(typeNumber, correctLevel);
qr.addData(text); qr.addData(text);
@ -31,63 +38,88 @@
return null; return null;
}, },
// Returns a `canvas` element representing the QR code for the given settings. // Draws QR code to the given `canvas` and returns it.
createCanvas = function (settings) { drawOnCanvas = function (canvas, settings) {
var qr = createBestQr(settings.text), // some shortcuts to improve compression
$canvas = $('<canvas/>').attr('width', settings.width).attr('height', settings.height), var settings_text = settings.text,
settings_left = settings.left,
settings_top = settings.top,
settings_width = settings.width,
settings_height = settings.height,
settings_color = settings.color,
settings_bgColor = settings.bgColor,
qr = createBestQr(settings_text),
$canvas = $(canvas),
ctx = $canvas[0].getContext('2d'); ctx = $canvas[0].getContext('2d');
if (settings.bgColor) { if (settings_bgColor) {
ctx.fillStyle = settings.bgColor; ctx.fillStyle = settings_bgColor;
ctx.fillRect(0, 0, settings.width, settings.height); ctx.fillRect(settings_left, settings_top, settings_width, settings_height);
} }
if (qr) { if (qr) {
var moduleCount = qr.getModuleCount(), var moduleCount = qr.getModuleCount(),
moduleWidth = settings.width / moduleCount, moduleWidth = settings_width / moduleCount,
moduleHeight = settings.height / moduleCount, moduleHeight = settings_height / moduleCount,
row, col; row, col;
ctx.beginPath(); ctx.beginPath();
for (row = 0; row < moduleCount; row += 1) { for (row = 0; row < moduleCount; row += 1) {
for (col = 0; col < moduleCount; col += 1) { for (col = 0; col < moduleCount; col += 1) {
if (qr.isDark(row, col)) { if (qr.isDark(row, col)) {
ctx.rect(col * moduleWidth, row * moduleHeight, moduleWidth, moduleHeight); ctx.rect(settings_left + col * moduleWidth, settings_top + row * moduleHeight, moduleWidth, moduleHeight);
} }
} }
} }
ctx.fillStyle = settings.color; ctx.fillStyle = settings_color;
ctx.fill(); ctx.fill();
} }
return $canvas; return $canvas;
}, },
// Returns a `canvas` element representing the QR code for the given settings.
createCanvas = function (settings) {
var $canvas = $('<canvas/>').attr('width', settings.width).attr('height', settings.height);
return drawOnCanvas($canvas, settings);
},
// Returns a `div` element representing the QR code for the given settings. // Returns a `div` element representing the QR code for the given settings.
createDiv = function (settings) { createDiv = function (settings) {
var qr = createBestQr(settings.text), // some shortcuts to improve compression
var settings_text = settings.text,
settings_width = settings.width,
settings_height = settings.height,
settings_color = settings.color,
settings_bgColor = settings.bgColor,
math_floor = Math.floor,
qr = createBestQr(settings_text),
$div = $('<div/>').css({ $div = $('<div/>').css({
position: 'relative', position: 'relative',
left: 0, left: 0,
top: 0, top: 0,
padding: 0, padding: 0,
margin: 0, margin: 0,
width: settings.width, width: settings_width,
height: settings.height height: settings_height
}); });
if (settings.bgColor) { if (settings_bgColor) {
$div.css('background-color', settings.bgColor); $div.css('background-color', settings_bgColor);
} }
if (qr) { if (qr) {
var moduleCount = qr.getModuleCount(), var moduleCount = qr.getModuleCount(),
moduleWidth = Math.floor(settings.width / moduleCount), moduleWidth = math_floor(settings_width / moduleCount),
moduleHeight = Math.floor(settings.height / moduleCount), moduleHeight = math_floor(settings_height / moduleCount),
offsetLeft = Math.floor(0.5 * (settings.width - moduleWidth * moduleCount)), offsetLeft = math_floor(0.5 * (settings_width - moduleWidth * moduleCount)),
offsetTop = Math.floor(0.5 * (settings.height - moduleHeight * moduleCount)), offsetTop = math_floor(0.5 * (settings_height - moduleHeight * moduleCount)),
row, col; row, col;
for (row = 0; row < moduleCount; row += 1) { for (row = 0; row < moduleCount; row += 1) {
@ -110,13 +142,18 @@
margin: 0, margin: 0,
width: moduleWidth, width: moduleWidth,
height: moduleHeight, height: moduleHeight,
'background-color': settings.color 'background-color': settings_color
}); });
} }
return $div; return $div;
}, },
createHTML = function (settings) {
return canvasAvailable && settings.render === 'canvas' ? createCanvas(settings) : createDiv(settings);
},
// Plugin // Plugin
// ====== // ======
@ -127,6 +164,10 @@
// render method: `'canvas'` or `'div'` // render method: `'canvas'` or `'div'`
render: 'canvas', render: 'canvas',
// left and top in pixel if drawn onto existing canvas
left: 0,
top: 0,
// width and height in pixel // width and height in pixel
width: 256, width: 256,
height: 256, height: 256,
@ -149,7 +190,11 @@
return this.each(function () { return this.each(function () {
$(this).append(settings.render === 'canvas' ? createCanvas(settings) : createDiv(settings)); if (this.nodeName.toLowerCase() === 'canvas') {
drawOnCanvas(this, settings);
} else {
$(this).append(createHTML(settings));
}
}); });
}; };