>>(length-i-1))&1)==1);}},getLengthInBits:function(){return this.length;},putBit:function(bit){var bufIndex=Math.floor(this.length/8);if(this.buffer.length<=bufIndex){this.buffer.push(0);}
+ if(bit){this.buffer[bufIndex]|=(0x80>>>(this.length%8));}
+ this.length++;}};var QRCodeLimitLength=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]];
+
+ function _isSupportCanvas() {
+ return typeof CanvasRenderingContext2D != "undefined";
+ }
+
+ // android 2.x doesn't support Data-URI spec
+ function _getAndroid() {
+ var android = false;
+ var sAgent = navigator.userAgent;
+
+ if (/android/i.test(sAgent)) { // android
+ android = true;
+ var aMat = sAgent.toString().match(/android ([0-9]\.[0-9])/i);
+
+ if (aMat && aMat[1]) {
+ android = parseFloat(aMat[1]);
+ }
+ }
+
+ return android;
+ }
+
+ var svgDrawer = (function() {
+
+ var Drawing = function (el, htOption) {
+ this._el = el;
+ this._htOption = htOption;
+ };
+
+ Drawing.prototype.draw = function (oQRCode) {
+ var _htOption = this._htOption;
+ var _el = this._el;
+ var nCount = oQRCode.getModuleCount();
+ var nWidth = Math.floor(_htOption.width / nCount);
+ var nHeight = Math.floor(_htOption.height / nCount);
+
+ this.clear();
+
+ function makeSVG(tag, attrs) {
+ var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+ for (var k in attrs)
+ if (attrs.hasOwnProperty(k)) el.setAttribute(k, attrs[k]);
+ return el;
+ }
+
+ var svg = makeSVG("svg", {
+ 'viewBox': '0 0 ' + String(nCount + 2 * _htOption.border) + " " + String(nCount + 2 * _htOption.border),
+ 'width': '100%',
+ 'height': '100%',
+ 'fill': _htOption.colorLight
+ });
+ svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
+ _el.appendChild(svg);
+
+ svg.appendChild(makeSVG("rect", {"fill": _htOption.colorLight, "width": "100%", "height": "100%"}));
+ svg.appendChild(makeSVG("rect", {
+ "fill": _htOption.colorDark,
+ "x": String(_htOption.border),
+ "y": String(_htOption.border),
+ "width": "1",
+ "height": "1",
+ "id": "template"
+ }));
+
+ for (var row = 0; row < nCount; row++) {
+ for (var col = 0; col < nCount; col++) {
+ if (oQRCode.isDark(row, col)) {
+ var child = makeSVG("use", {"x": String(col), "y": String(row)});
+ child.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#template")
+ svg.appendChild(child);
+ }
+ }
+ }
+ };
+ Drawing.prototype.clear = function () {
+ while (this._el.hasChildNodes())
+ this._el.removeChild(this._el.lastChild);
+ };
+ return Drawing;
+ })();
+
+ var useSVG = document.documentElement.tagName.toLowerCase() === "svg";
+
+ // Drawing in DOM by using Table tag
+ var Drawing = useSVG ? svgDrawer : !_isSupportCanvas() ? (function () {
+ var Drawing = function (el, htOption) {
+ this._el = el;
+ this._htOption = htOption;
+ };
+
+ /**
+ * Draw the QRCode
+ *
+ * @param {QRCode} oQRCode
+ */
+ Drawing.prototype.draw = function (oQRCode) {
+ var _htOption = this._htOption;
+ var _el = this._el;
+ var nCount = oQRCode.getModuleCount();
+ var nWidth = Math.floor(_htOption.width / nCount);
+ var nHeight = Math.floor(_htOption.height / nCount);
+ var aHTML = [''];
+
+ for (var row = 0; row < _htOption.border; row++) {
+ aHTML.push('');
+
+ for (var col = 0; col < nCount + 2 * _htOption.border; col++) {
+ aHTML.push(' | ');
+ }
+
+ aHTML.push('
');
+ }
+
+
+ for (var row = 0; row < nCount; row++) {
+ aHTML.push('');
+
+ for (var col = 0; col < _htOption.border; col++) {
+ aHTML.push(' | ');
+ }
+
+ for (var col = 0; col < nCount; col++) {
+ aHTML.push(' | ');
+ }
+
+ for (var col = 0; col < _htOption.border; col++) {
+ aHTML.push(' | ');
+ }
+
+ aHTML.push('
');
+ }
+
+ for (var row = 0; row < _htOption.border; row++) {
+ aHTML.push('');
+
+ for (var col = 0; col < nCount + 2 * _htOption.border; col++) {
+ aHTML.push(' | ');
+ }
+
+ aHTML.push('
');
+ }
+
+ aHTML.push('
');
+ _el.innerHTML = aHTML.join('');
+
+ // Fix the margin values as real size.
+ var elTable = _el.childNodes[0];
+ var nLeftMarginTable = (_htOption.width - elTable.offsetWidth) / 2;
+ var nTopMarginTable = (_htOption.height - elTable.offsetHeight) / 2;
+
+ if (nLeftMarginTable > 0 && nTopMarginTable > 0) {
+ elTable.style.margin = nTopMarginTable + "px " + nLeftMarginTable + "px";
+ }
+ };
+
+ /**
+ * Clear the QRCode
+ */
+ Drawing.prototype.clear = function () {
+ this._el.innerHTML = '';
+ };
+
+ return Drawing;
+ })() : (function () { // Drawing in Canvas
+ function _onMakeImage() {
+ this._elImage.src = this._elCanvas.toDataURL("image/png");
+ this._elImage.style.display = "block";
+ this._elCanvas.style.display = "none";
+ }
+
+ // Android 2.1 bug workaround
+ // http://code.google.com/p/android/issues/detail?id=5141
+ if (this._android && this._android <= 2.1) {
+ var factor = 1 / window.devicePixelRatio;
+ var drawImage = CanvasRenderingContext2D.prototype.drawImage;
+ CanvasRenderingContext2D.prototype.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
+ if (("nodeName" in image) && /img/i.test(image.nodeName)) {
+ for (var i = arguments.length - 1; i >= 1; i--) {
+ arguments[i] = arguments[i] * factor;
+ }
+ } else if (typeof dw == "undefined") {
+ arguments[1] *= factor;
+ arguments[2] *= factor;
+ arguments[3] *= factor;
+ arguments[4] *= factor;
+ }
+
+ drawImage.apply(this, arguments);
+ };
+ }
+
+ /**
+ * Check whether the user's browser supports Data URI or not
+ *
+ * @private
+ * @param {Function} fSuccess Occurs if it supports Data URI
+ * @param {Function} fFail Occurs if it doesn't support Data URI
+ */
+ function _safeSetDataURI(fSuccess, fFail) {
+ var self = this;
+ self._fFail = fFail;
+ self._fSuccess = fSuccess;
+
+ // Check it just once
+ if (self._bSupportDataURI === null) {
+ var el = document.createElement("img");
+ var fOnError = function() {
+ self._bSupportDataURI = false;
+
+ if (self._fFail) {
+ self._fFail.call(self);
+ }
+ };
+ var fOnSuccess = function() {
+ self._bSupportDataURI = true;
+
+ if (self._fSuccess) {
+ self._fSuccess.call(self);
+ }
+ };
+
+ el.onabort = fOnError;
+ el.onerror = fOnError;
+ el.onload = fOnSuccess;
+ el.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // the Image contains 1px data.
+ return;
+ } else if (self._bSupportDataURI === true && self._fSuccess) {
+ self._fSuccess.call(self);
+ } else if (self._bSupportDataURI === false && self._fFail) {
+ self._fFail.call(self);
+ }
+ };
+
+ /**
+ * Drawing QRCode by using canvas
+ *
+ * @constructor
+ * @param {HTMLElement} el
+ * @param {Object} htOption QRCode Options
+ */
+ var Drawing = function (el, htOption) {
+ this._bIsPainted = false;
+ this._android = _getAndroid();
+
+ this._htOption = htOption;
+ this._elCanvas = document.createElement("canvas");
+ this._elCanvas.width = htOption.width;
+ this._elCanvas.height = htOption.height;
+ el.appendChild(this._elCanvas);
+ this._el = el;
+ this._oContext = this._elCanvas.getContext("2d");
+ this._bIsPainted = false;
+ this._elImage = document.createElement("img");
+ this._elImage.alt = "Scan me!";
+ this._elImage.style.display = "none";
+ this._el.appendChild(this._elImage);
+ this._bSupportDataURI = null;
+ };
+
+ /**
+ * Draw the QRCode
+ *
+ * @param {QRCode} oQRCode
+ */
+ Drawing.prototype.draw = function (oQRCode) {
+ var _elImage = this._elImage;
+ var _oContext = this._oContext;
+ var _htOption = this._htOption;
+
+ var nCount = oQRCode.getModuleCount();
+ var nWidth = _htOption.width / (nCount + 2 * _htOption.border);
+ var nHeight = _htOption.height / (nCount + 2 * _htOption.border);
+ var nBorderWidth = _htOption.border * nWidth;
+ var nBorderHeight = _htOption.border * nHeight;
+ var nRoundedWidth = Math.round(nWidth);
+ var nRoundedHeight = Math.round(nHeight);
+
+ _elImage.style.display = "none";
+ this.clear();
+
+ // Fill quiet zone with light color
+ _oContext.strokeStyle = _htOption.colorLight;
+ _oContext.lineWidth = 1;
+ _oContext.fillStyle = _htOption.colorLight;
+ _oContext.fillRect(0, 0, _htOption.width, nBorderHeight);
+ _oContext.fillRect(0, _htOption.height - nBorderHeight, _htOption.width, _htOption.height);
+ _oContext.fillRect(0, nBorderHeight, nBorderWidth, _htOption.height - nBorderHeight);
+ _oContext.fillRect(_htOption.width - nBorderWidth, nBorderHeight, _htOption.width, _htOption.height - nBorderHeight);
+
+ for (var row = 0; row < nCount; row++) {
+ for (var col = 0; col < nCount; col++) {
+ var bIsDark = oQRCode.isDark(row, col);
+ var nLeft = col * nWidth;
+ var nTop = row * nHeight;
+ _oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
+ _oContext.lineWidth = 1;
+ _oContext.fillStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
+ _oContext.fillRect(nLeft + nBorderWidth, nTop + nBorderHeight, nWidth, nHeight);
+
+ // 안티 앨리어싱 방지 처리
+ _oContext.strokeRect(
+ Math.floor(nLeft + nBorderWidth) + 0.5,
+ Math.floor(nTop + nBorderHeight) + 0.5,
+ nRoundedWidth,
+ nRoundedHeight
+ );
+
+ _oContext.strokeRect(
+ Math.ceil(nLeft + nBorderWidth) - 0.5,
+ Math.ceil(nTop + nBorderHeight) - 0.5,
+ nRoundedWidth,
+ nRoundedHeight
+ );
+ }
+ }
+
+ this._bIsPainted = true;
+ };
+
+ /**
+ * Make the image from Canvas if the browser supports Data URI.
+ */
+ Drawing.prototype.makeImage = function () {
+ if (this._bIsPainted) {
+ _safeSetDataURI.call(this, _onMakeImage);
+ }
+ };
+
+ /**
+ * Return whether the QRCode is painted or not
+ *
+ * @return {Boolean}
+ */
+ Drawing.prototype.isPainted = function () {
+ return this._bIsPainted;
+ };
+
+ /**
+ * Clear the QRCode
+ */
+ Drawing.prototype.clear = function () {
+ this._oContext.clearRect(0, 0, this._elCanvas.width, this._elCanvas.height);
+ this._bIsPainted = false;
+ };
+
+ /**
+ * @private
+ * @param {Number} nNumber
+ */
+ Drawing.prototype.round = function (nNumber) {
+ if (!nNumber) {
+ return nNumber;
+ }
+
+ return Math.floor(nNumber * 1000) / 1000;
+ };
+
+ return Drawing;
+ })();
+
+ /**
+ * Get the type by string length
+ *
+ * @private
+ * @param {String} sText
+ * @param {Number} nCorrectLevel
+ * @return {Number} type
+ */
+ function _getTypeNumber(sText, nCorrectLevel) {
+ var nType = 1;
+ var length = _getUTF8Length(sText);
+
+ for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {
+ var nLimit = 0;
+
+ switch (nCorrectLevel) {
+ case QRErrorCorrectLevel.L :
+ nLimit = QRCodeLimitLength[i][0];
+ break;
+ case QRErrorCorrectLevel.M :
+ nLimit = QRCodeLimitLength[i][1];
+ break;
+ case QRErrorCorrectLevel.Q :
+ nLimit = QRCodeLimitLength[i][2];
+ break;
+ case QRErrorCorrectLevel.H :
+ nLimit = QRCodeLimitLength[i][3];
+ break;
+ }
+
+ if (length <= nLimit) {
+ break;
+ } else {
+ nType++;
+ }
+ }
+
+ if (nType > QRCodeLimitLength.length) {
+ throw new Error("Too long data");
+ }
+
+ return nType;
+ }
+
+ function _getUTF8Length(sText) {
+ var replacedText = encodeURI(sText).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a');
+ return replacedText.length + (replacedText.length != sText ? 3 : 0);
+ }
+
+ /**
+ * @class QRCode
+ * @constructor
+ * @example
+ * new QRCode(document.getElementById("test"), "http://jindo.dev.naver.com/collie");
+ *
+ * @example
+ * var oQRCode = new QRCode("test", {
+ * text : "http://naver.com",
+ * width : 128,
+ * height : 128
+ * });
+ *
+ * oQRCode.clear(); // Clear the QRCode.
+ * oQRCode.makeCode("http://map.naver.com"); // Re-create the QRCode.
+ *
+ * @param {HTMLElement|String} el target element or 'id' attribute of element.
+ * @param {Object|String} vOption
+ * @param {String} vOption.text QRCode link data
+ * @param {Number} [vOption.width=256]
+ * @param {Number} [vOption.height=256]
+ * @param {Number} [vOption.border=4] default to 4 modules
+ * @param {String} [vOption.colorDark="#000000"]
+ * @param {String} [vOption.colorLight="#ffffff"]
+ * @param {QRCode.CorrectLevel} [vOption.correctLevel=QRCode.CorrectLevel.H] [L|M|Q|H]
+ */
+ var QRCode = function (el, vOption) {
+ this._htOption = {
+ width : 256,
+ height : 256,
+ border: 4,
+ typeNumber : 4,
+ colorDark : "#000000",
+ colorLight : "#ffffff",
+ correctLevel : QRErrorCorrectLevel.H
+ };
+
+ if (typeof vOption === 'string') {
+ vOption = {
+ text : vOption
+ };
+ }
+
+ // Overwrites options
+ if (vOption) {
+ for (var i in vOption) {
+ this._htOption[i] = vOption[i];
+ }
+ }
+
+ if (typeof el == "string") {
+ el = document.getElementById(el);
+ }
+
+ if (this._htOption.useSVG) {
+ Drawing = svgDrawer;
+ }
+
+ this._android = _getAndroid();
+ this._el = el;
+ this._oQRCode = null;
+ this._oDrawing = new Drawing(this._el, this._htOption);
+
+ if (this._htOption.text) {
+ this.makeCode(this._htOption.text);
+ }
+ };
+
+ /**
+ * Make the QRCode
+ *
+ * @param {String} sText link data
+ */
+ QRCode.prototype.makeCode = function (sText) {
+ this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
+ this._oQRCode.addData(sText);
+ this._oQRCode.make();
+ this._el.title = sText;
+ this._oDrawing.draw(this._oQRCode);
+ this.makeImage();
+ };
+
+ /**
+ * Make the Image from Canvas element
+ * - It occurs automatically
+ * - Android below 3 doesn't support Data-URI spec.
+ *
+ * @private
+ */
+ QRCode.prototype.makeImage = function () {
+ if (typeof this._oDrawing.makeImage == "function" && (!this._android || this._android >= 3)) {
+ this._oDrawing.makeImage();
+ }
+ };
+
+ /**
+ * Clear the QRCode
+ */
+ QRCode.prototype.clear = function () {
+ this._oDrawing.clear();
+ };
+
+ /**
+ * @name QRCode.CorrectLevel
+ */
+ QRCode.CorrectLevel = QRErrorCorrectLevel;
+
+ return QRCode;
+})
diff --git a/src/mip-story/mip-story-hint.js b/src/mip-story/mip-story-hint.js
index c484b16a2..cd97b507e 100644
--- a/src/mip-story/mip-story-hint.js
+++ b/src/mip-story/mip-story-hint.js
@@ -15,6 +15,7 @@ define(function (require) {
var MIP_STORY_PAGE_SWITCH_RIGHT_CLASS = 'mip-story-page-switch-rt';
var util = require('util');
+ var QRCode = require('./lib/qrcode');
function MIPStoryHint(root) {
this.rootEl = root;
@@ -39,6 +40,7 @@ define(function (require) {
+ ''
+ '
'
+ '
为了更好的体验，请将手机横过来
'
+ + '
'
+ '
'
+ ''
@@ -54,6 +56,19 @@ define(function (require) {
return html;
};
+ MIPStoryHint.prototype.generateQRCode = function () {
+ var ele = this.rootEl.querySelector('.mip-story-qrcode');
+ new QRCode(ele, {
+ text: window.location.href,
+ width: 96,
+ height: 96,
+ border: 2,
+ colorDark : "#000000",
+ colorLight : "#ffffff",
+ correctLevel : QRCode.CorrectLevel.H
+ });
+ }
+
MIPStoryHint.prototype.showDamping = function () {
var self = this;
var ele = this.rootEl.querySelector(MIP_STORY_HINT_CLASS);
diff --git a/src/mip-story/mip-story-video.js b/src/mip-story/mip-story-video.js
index 99010a863..49d59d456 100644
--- a/src/mip-story/mip-story-video.js
+++ b/src/mip-story/mip-story-video.js
@@ -7,7 +7,7 @@ define(function (require) {
'use strict';
var customElement = require('customElement').create();
- var JSMpeg = require('./jsmpeg/jsmpeg');
+ var JSMpeg = require('./lib/jsmpeg');
var util = require('util');
var Detector = require('./video-detector');
var css = util.css;
diff --git a/src/mip-story/mip-story.js b/src/mip-story/mip-story.js
index 5423df8be..02e67542d 100644
--- a/src/mip-story/mip-story.js
+++ b/src/mip-story/mip-story.js
@@ -90,6 +90,7 @@ define(function (require) {
this.hint = new HintLayer(element);
var html = dm.create(this.hint.build());
this.element.appendChild(html);
+ this.hint.generateQRCode();
};
MIPStory.prototype.initShare = function (storyConfig, element) {
diff --git a/src/mip-story/mip-story.less b/src/mip-story/mip-story.less
index 90dafcc7a..b1b003224 100644
--- a/src/mip-story/mip-story.less
+++ b/src/mip-story/mip-story.less
@@ -723,6 +723,10 @@ mip-story-layer[template=thirds] {
height: 45px;
}
+.mip-story-qrcode {
+ margin-top: 10px;
+}
+
@media all and (orientation: portrait) {
.mip-story-hint-rotate {
display: none;