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 534a4eb7109b636004c503e76a302af2994169b7 Author: Sylvain Bavencoff <bavencoff@codelutin.com> Date: Mon Mar 20 13:35:26 2017 +0100 Ajout d'un composent de visualisation d'un choix --- pollen-ui-riot-js/src/main/web/js/FetchService.js | 2 +- .../src/main/web/tag/poll/ChoiceView.tag.html | 61 ++++++++++++++++++++++ .../src/main/web/tag/poll/Results.tag.html | 3 +- .../src/main/web/tag/poll/Votes.tag.html | 42 +++------------ 4 files changed, 70 insertions(+), 38 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/js/FetchService.js b/pollen-ui-riot-js/src/main/web/js/FetchService.js index fd13a55..4bf7221 100644 --- a/pollen-ui-riot-js/src/main/web/js/FetchService.js +++ b/pollen-ui-riot-js/src/main/web/js/FetchService.js @@ -27,7 +27,7 @@ class FetchService { fetch(url, method, headers, body) { headers = headers || {}; if (!(body instanceof FormData)) { - headers["Content-Type"] = "application/json"; + headers["Content-Type"] = "application/json;charset=UTF-8"; } return fetch( 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 new file mode 100644 index 0000000..7d51302 --- /dev/null +++ b/pollen-ui-riot-js/src/main/web/tag/poll/ChoiceView.tag.html @@ -0,0 +1,61 @@ +<ChoiceView> + <div class="choice" title={opts.choice.description}> + <span class="choice-text" + if={opts.choice.choiceType === "TEXT"}> + {opts.choice.choiceValue} + </span> + <span class="choice-date" + if={opts.choice.choiceType === "DATE"}> + {formatDate(parseInt(opts.choice.choiceValue, 10),"LL")} + </span> + <span class="choice-datetimetext" + if={opts.choice.choiceType === "DATETIME"}> + {formatDate(parseInt(opts.choice.choiceValue, 10))} + </span> + <div class="choice-ressource" + if={opts.choice.choiceType === "RESOURCE"} + onclick={openModalImage}> + <img class="image-preview" src="{session.configuration.endPoint}/v1/resources/{opts.choice.choiceValue}/preview"/> + </div> + + <div if={showModalImage} onclick={closeModalImage}> + <div class="c-overlay"></div> + <div class="modal-image o-modal o-modal--ghost"> + <div class="c-card"> + <div class="c-card__body"> + <img src="{session.configuration.endPoint}/v1/resources/{opts.choice.choiceValue}"/> + </div> + </div> + </div> + </div> + </div> + + <script type="es6"> + this.session = require("../../js/Session"); + this.showModalImage = false; + + this.openModalImage = () => { + this.showModalImage = true; + }; + + this.closeModalImage = () => { + this.showModalImage = false; + }; + </script> + + <style> + .choice { + display: inline-block; + } + + .choice-ressource .image-preview{ + height: 1.5em; + } + + .modal-image img { + max-width: 100%; + max-height:100%; + } + + </style> +</ChoiceView> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html index 9693067..05651a3 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Results.tag.html @@ -1,3 +1,4 @@ +require("./ChoiceView.tag.html"); <Results> <div class="container"> <div if="{!poll.continuousResults && !poll.isClosed}"> @@ -7,7 +8,7 @@ <div class="result-content" each="{result in poll.results.scores}"> <div class="result {winner : result.scoreOrder === 0, second : result.scoreOrder === 1, third : result.scoreOrder === 2}"> {result.scoreOrder + 1} : - {poll.getChoice(result.choiceId).choiceValue} + <ChoiceView choice={poll.getChoice(result.choiceId)}/> </div> <div class="votes">{parent.__.votesCount} {result.scoreValue}</div> </div> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html index 2ecaba0..e6a731d 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/Votes.tag.html @@ -1,4 +1,5 @@ require("./Choice.tag.html"); +require("./ChoiceView.tag.html"); <Votes> <div class="container"> <div show="{loaded}"> @@ -26,8 +27,9 @@ require("./Choice.tag.html"); {error['voter.name']} </div> </div> - <div each={choice in poll.choices} class="choice {choice-resource: choice.choiceType === 'RESOURCE'}"> - <div id="{choice.id}" class="choice-value"> + <div each={choice in poll.choices} class="choice"> + <div class="choice-value"> + <ChoiceView choice={choice}/> </div> <div class="current-choice" if={poll.canVote}> @@ -81,7 +83,7 @@ require("./Choice.tag.html"); {error['voter.name']} </div> </div> - <div each={choice in poll.choices} class="vote-choice {choice-resource: choice.choiceType === 'RESOURCE'}" > + <div each={choice in poll.choices} class="vote-choice" > <input if={poll.voteCountingTypeValue.renderType==='checkbox' && (poll.getVoteValue(vote, choice) || voteId === vote.id)} ref="vote_{vote.id}_{choice.id}" name="vote_{vote.id}_{choice.id}" @@ -159,16 +161,8 @@ require("./Choice.tag.html"); <script type="es6"> this.loaded = false; let session = require("../../js/Session"); - let Remarkable = require("remarkable"); let Choice = require("../../js/Choice"); - this.md = new Remarkable(); - this.moment = require("moment"); - this.moment.locale(session.locale); - - this.installBundle(session, "poll_votes", (locale) => { - this.moment.locale(locale); - this.updateChoices(); - }); + this.installBundle(session, "poll_votes"); session.getUser().then(user => { this.userName = user && user.name; }); @@ -185,26 +179,8 @@ require("./Choice.tag.html"); }).then(() => { this.loaded = true; this.update(); - this.updateChoices(); }); - this.updateChoices = () => { - if (this.voting) { - this.poll.choices.forEach(c => { - if (c.choiceType === "DATE") { - c.choiceValueStr = this.moment(parseInt(c.choiceValue, 10)).format("LL"); - } else if (c.choiceType === "DATETIME") { - c.choiceValueStr = this.moment(parseInt(c.choiceValue, 10)).format("LLL"); - } else if (c.choiceType === "RESOURCE") { - c.choiceValueStr = "![](" + session.configuration.endPoint + "/v1/resources/" + c.choiceValue + "/preview)"; - } else { - c.choiceValueStr = c.choiceValue; - } - document.getElementById(c.id).innerHTML = this.md.render(c.choiceValueStr); - }); - } - }; - this.voteId = null; this.error = {}; @@ -314,7 +290,6 @@ require("./Choice.tag.html"); this.poll.addChoice(this.choiceToAdd).then(() => { this.refs.choice.clear(); this.update(); - this.updateChoices(); }); }; @@ -387,11 +362,6 @@ require("./Choice.tag.html"); justify-content: center; } - .voters .fix .choice.choice-resource, - .voters .window .frame .vote .vote-choice.choice-resource { - height: 200px; - } - .check { width: 25px; height: 25px; -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.