This is an automated email from the git hooks/post-receive script. New commit to branch feature/108_carrousel_choices in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git commit b63b0947f2a7356bf200e1cc77e874a9592857c6 Author: Kevin Morin <morin@codelutin.com> Date: Fri Oct 27 18:00:51 2017 +0200 refs #108 faire défiler les images des choix dans la popup d'image du tableau de vote --- pollen-ui-riot-js/src/main/web/js/UIHelper.js | 8 +++- .../src/main/web/tag/poll/ChoiceView.tag.html | 22 ++++++++--- .../src/main/web/tag/poll/EditVote.tag.html | 45 +++++++++++++++++++++- 3 files changed, 66 insertions(+), 9 deletions(-) diff --git a/pollen-ui-riot-js/src/main/web/js/UIHelper.js b/pollen-ui-riot-js/src/main/web/js/UIHelper.js index 3043dcaa..468574c7 100644 --- a/pollen-ui-riot-js/src/main/web/js/UIHelper.js +++ b/pollen-ui-riot-js/src/main/web/js/UIHelper.js @@ -8,12 +8,12 @@ * it under the terms of the GNU Affero General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. - * + * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. - * + * * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% @@ -104,5 +104,9 @@ module.exports = { return value + " " + unitsSI[index]; }, + isImage(meta) { + return meta.contentType.match(/^image\//i); + }, + DATETIME_INPUT_PATTERN: "[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" }; 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 9cd1dfce..0a06b989 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 @@ -8,12 +8,12 @@ it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. - + This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. - + You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. #L% @@ -59,6 +59,7 @@ require("../components/MultiLineLabel.tag.html"); <div class="modal-image o-modal"> <div class="c-card"> <header class="c-card__header"> + <button type='button' class="c-button c-button--rounded" onClick={opts.previous} if={opts.previous}><i class="fa fa-arrow-left"/></button> <h2 if={opts.choice.choiceType === "TEXT"}> {opts.choice.choiceValue} </h2> @@ -83,6 +84,7 @@ require("../components/MultiLineLabel.tag.html"); {__.download} </a> </div> + <button type='button' class="c-button c-button--rounded" onClick={opts.next} if={opts.next}><i class="fa fa-arrow-right"/></button> </header> <div class="c-card__body"> <MultiLineLabel label="{opts.choice.description}"></MultiLineLabel> @@ -104,18 +106,16 @@ require("../components/MultiLineLabel.tag.html"); }); } - this.isImage = (meta) => { - return meta.contentType.match(/^image\//i); - }; - this.openModalImage = () => { if (this.opts.choice.description && !this.opts.showdescription || this.opts.choice.choiceType === "RESOURCE") { this.showModalImage = true; + this.update(); } }; this.closeModalImage = () => { this.showModalImage = false; + this.update(); }; this.onEscape = () => { @@ -161,5 +161,15 @@ require("../components/MultiLineLabel.tag.html"); max-height:100%; } + .c-card__header { + display: flex; + flex-direction: row; + } + + .c-card__header > button { + align-self: center; + margin: 10px; + } + </style> </ChoiceView> diff --git a/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html b/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html index 831a0bee..0973b1f4 100644 --- a/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/poll/EditVote.tag.html @@ -30,7 +30,12 @@ <div each={choice, index in poll.choices} class="choice separator-top"> <div class="choice-vote separator-right"> <div class="choice-value"> - <ChoiceView choice={choice} center="true"></ChoiceView> + <ChoiceView ref="choiceView" + choice={choice} + center="true" + previous={enableShowPreviousImage(index) ? showPreviousImage(index) : null} + next={enableShowNextImage(index) ? showNextImage(index) : null}> + </ChoiceView> </div> <div class="current-choice" if={poll.canVote || voteInEdition}> @@ -126,6 +131,7 @@ this.moment = require("moment"); this.installBundle(session, "poll_votes"); this.tooManyChoicesSelected = false; + this.imageChoiceIndexes = []; this.voting = false; @@ -138,6 +144,13 @@ this.poll = poll; this.pollTypeCheckbox = poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType === "checkbox"; this.pollTypeSelect = poll.voteCountingTypeValue && poll.voteCountingTypeValue.renderType === "select"; + if (poll.choices) { + this.imageChoiceIndexes = poll.choices + .filter(choice => choice.choiceType === "RESOURCE") + .map(choice => poll.choices.indexOf(choice)); + } else { + this.imageChoiceIndexes = []; + } this.onVoteChanged(); this.update(); }; @@ -317,6 +330,36 @@ }); }; + this.enableShowPreviousImage = index => { + let imageIndex = this.imageChoiceIndexes.indexOf(index); + return imageIndex > 0; + }; + + this.enableShowNextImage = index => { + let imageIndex = this.imageChoiceIndexes.indexOf(index); + return imageIndex >= 0 && imageIndex < this.imageChoiceIndexes.length - 1; + }; + + this.showPreviousImage = index => e => { + e.preventDefault(); + e.stopPropagation(); + if (this.enableShowPreviousImage(index)) { + let imageIndex = this.imageChoiceIndexes.indexOf(index); + this.refs.choiceView[index].closeModalImage(); + this.refs.choiceView[this.imageChoiceIndexes[imageIndex - 1]].openModalImage(); + } + }; + + this.showNextImage = index => e => { + e.preventDefault(); + e.stopPropagation(); + if (this.enableShowNextImage(index)) { + let imageIndex = this.imageChoiceIndexes.indexOf(index); + this.refs.choiceView[index].closeModalImage(); + this.refs.choiceView[this.imageChoiceIndexes[imageIndex + 1]].openModalImage(); + } + }; + </script> <style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.