branch feature/108_carrousel_choices created (now b63b0947)
This is an automated email from the git hooks/post-receive script. New change to branch feature/108_carrousel_choices in repository pollen. See https://gitlab.nuiton.org/chorem/pollen.git at b63b0947 refs #108 faire défiler les images des choix dans la popup d'image du tableau de vote This branch includes the following new commits: new b63b0947 refs #108 faire défiler les images des choix dans la popup d'image du tableau de 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 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 -- 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 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>.
participants (1)
-
chorem.org scm