This is an automated email from the git hooks/post-receive script. New commit to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit 469fdf08e7e2782ae60eae07d74cdd1c1c46070a Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Tue Apr 11 16:32:48 2017 +0200 affichage du Qrcode pour facitlé le partage du vote --- pollen-ui-riot-js/package.json | 1 + pollen-ui-riot-js/src/main/web/tag/QrCode.tag.html | 51 +++++++++++++++++ .../src/main/web/tag/poll/ChoiceView.tag.html | 2 +- .../src/main/web/tag/poll/Poll.tag.html | 11 +++- .../src/main/web/tag/popup/QrCodeButton.tag.html | 64 ++++++++++++++++++++++ 5 files changed, 127 insertions(+), 2 deletions(-) diff --git a/pollen-ui-riot-js/package.json b/pollen-ui-riot-js/package.json index 7fb5480..25f3bbf 100644 --- a/pollen-ui-riot-js/package.json +++ b/pollen-ui-riot-js/package.json @@ -36,6 +36,7 @@ "font-awesome": "4.7.0", "moment": "^2.17.1", "nprogress": "^0.2.0", + "qrcode-generator": "^1.2.0", "remarkable": "^1.7.1", "riot": "3.3.2", "riot-route": "^2.5.0" diff --git a/pollen-ui-riot-js/src/main/web/tag/QrCode.tag.html b/pollen-ui-riot-js/src/main/web/tag/QrCode.tag.html new file mode 100644 index 0000000..3018316 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/QrCode.tag.html @@ -0,0 +1,51 @@ +<QrCode> + + <script type="es6"> + let typeNumberByCorrectionLevel = { + L: [17, 32, 53, 78, 106, 134, 154, 192, 230, 271, + 321, 367, 425, 458, 520, 586, 644, 718, 792, 858, + 929, 1003, 1091, 1171, 1273, 1367, 1465, 1528, 1628, 1732, + 1840, 1952, 2068, 2188, 2303, 2431, 2563, 2699, 2809, 2953], + M: [14, 26, 42, 62, 84, 106, 122, 152, 180, 213, + 251, 287, 331, 362, 412, 450, 504, 560, 624, 666, + 711, 779, 857, 911, 997, 1059, 1125, 1190, 1264, 1370, + 1452, 1538, 1628, 1722, 1809, 1911, 1989, 2099, 2213, 2331], + Q: [11, 20, 32, 46, 60, 74, 86, 108, 130, 151, + 177, 203, 241, 258, 292, 322, 364, 394, 442, 482, + 509, 565, 611, 661, 715, 751, 805, 868, 908, 982, + 1030, 1112, 1168, 1228, 1283, 1351, 1423, 1499, 1579, 1663], + H: [7, 14, 24, 34, 44, 58, 64, 84, 98, 119, + 137, 155, 177, 194, 220, 250, 280, 310, 338, 382, + 403, 439, 461, 511, 535, 593, 625, 658, 698, 742, + 790, 842, 898, 958, 983, 1051, 1093, 1139, 1219, 1273] + }; + + + let qrcode = require("../../../../node_modules/qrcode-generator/qrcode.js"); + + this.updateQrcode = () => { + if (this.opts.riotValue !== this.qrvalue) { + this.qrValue = this.opts.riotValue; + let correctionLevel = this.opts.correctionLevel || "H"; + var typeNumber = typeNumberByCorrectionLevel[correctionLevel].findIndex(nbBits => nbBits >= this.qrValue.length) + 1; + var qr = qrcode(typeNumber, correctionLevel); + qr.addData(this.qrValue); + qr.make(); + let cellSize = Math.min( + Math.floor(this.root.clientWidth / qr.getModuleCount()), + Math.floor(this.root.clientHeight / qr.getModuleCount())); + this.root.innerHTML = qr.createSvgTag(cellSize, 0); + } + }; + + this.on("mount", this.updateQrcode); + this.on("update", this.updateQrcode); + </script> + + <style> + .qr-container { + margin: 20px; + height: 100%; + } + </style> +</QrCode> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html index 35ae63a..029c758 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html @@ -27,7 +27,7 @@ </div> </div> - <div if={showModalImage} onclick={closeModalImage} onkeydown={keyDown}> + <div if={showModalImage} onclick={closeModalImage}> <div class="c-overlay"></div> <div class="modal-image o-modal"> <div class="c-card"> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html index 9933a44..e18412d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Poll.tag.html @@ -3,6 +3,7 @@ require("./Comments.tag.html"); require("./Results.tag.html"); require("./Choices.tag.html"); require("./Settings.tag.html"); +require("../popup/QrCodeButton.tag.html"); <Poll> @@ -112,7 +113,10 @@ require("./Settings.tag.html"); <div class="poll-info"> - <h1>{poll.title}<h1> + <h1> + <QrCodeButton if={poll.pollType === "FREE"} value="{window.location.origin}{window.location.pathname}#poll/{poll.id}/vote"/> + {poll.title} + <h1> <h3>{poll.description}</h3> @@ -283,5 +287,10 @@ require("./Settings.tag.html"); padding: 0.3em 0; } + h1 QrCodeButton { + font-size: 1rem; + font-weight: normal; + } + </style> </Poll> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/QrCodeButton.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/QrCodeButton.tag.html new file mode 100644 index 0000000..19c2065 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/popup/QrCodeButton.tag.html @@ -0,0 +1,64 @@ +require("../QrCode.tag.html"); +<QrCodeButton> + <button class="c-button c-button--info" + onclick={open}> + <i class="fa fa-qrcode" aria-hidden="true"></i> + </button> + + <div if={openModal} onclick={close}> + <div class="c-overlay"></div> + <div class="o-modal"> + <div class="c-card"> + <div class="c-card__body"> + <div class="qr-value"> + {opts.riotValue} + </div> + <QrCode class="qr-code" value={opts.riotValue}> + </div> + </div> + </div> + </div> + + <script type="es6"> + this.openModal = false; + + this.open = () => { + this.openModal = true; + }; + + this.close = () => { + this.openModal = false; + this.update(); + }; + + this.bus.on("escape", this.close); + + this.on("before-unmount", () => { + this.bus.off("escape", this.close); + }); + </script> + <style> + .o-modal{ + height: 80%; + } + + .o-modal .c-card, + .o-modal .c-card .c-card__body { + height: 100%; + } + + .o-modal .c-card .c-card__body { + display: flex; + flex-direction: column; + align-items: stretch; + align-content: stretch; + } + + .qr-code { + flex-grow: 1; + padding: 20px; + } + + </style> + +</QrCodeButton> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.