branch develop updated (cec06d0 -> 469fdf0)
This is an automated email from the git hooks/post-receive script. New change to branch develop in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git from cec06d0 dans la visialisation des choix proposer le téléchargement d'une ressource qui n'est pas une image new 469fdf0 affichage du Qrcode pour facitlé le partage du vote The 1 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: 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 Summary of changes: 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(-) create mode 100644 pollen-ui-riot-js/src/main/web/tag/QrCode.tag.html create mode 100644 pollen-ui-riot-js/src/main/web/tag/popup/QrCodeButton.tag.html -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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>.
participants (1)
-
chorem.org scm