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 72e40f4af1dfa5a76215449b7c070177ff59bf2f Author: Kevin Morin <morin@codelutin.com> Date: Fri Aug 6 16:17:14 2021 +0200 refs #108 Carrouselle dans la popup de choix --- .../src/main/web/tag/poll/ChoiceView.tag.html | 23 ++-- .../main/web/tag/popup/ChoiceDetailModal.tag.html | 149 +++++++++++++++++---- .../src/main/web/tag/popup/Modal.tag.html | 2 +- 3 files changed, 136 insertions(+), 38 deletions(-) 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 bd460b56..6aa0d212 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 @@ -22,7 +22,8 @@ import "./Report.tag.html"; import "../components/MultiLineLabel.tag.html"; <ChoiceView> <div class="choice-view {center-choice : opts.center} - {with-info : opts.choice.choiceType === 'RESOURCE' || opts.choice.description && !opts.showdescription}" + {with-info : opts.choice.description && !opts.showdescription} + {with-resource : opts.choice.choiceType === 'RESOURCE'}" onclick={openModalImage} title={standardTooltip()}> <span class="choice-text" @@ -37,13 +38,12 @@ import "../components/MultiLineLabel.tag.html"; if={opts.choice.choiceType === "DATETIME"}> {formatDate(parseInt(opts.choice.choiceValue, 10), "L LT")} </span> - <div class="choice-ressource" - if={opts.choice.choiceType === "RESOURCE" && meta && isImage()}> - <img class="image-preview" src="{resourceService.getPreviewUrl(opts.choice.choiceValue)}" alt="_t.imagePreview"/> - </div> - <div class="choice-ressource" - if={opts.choice.choiceType === "RESOURCE" && meta && !isImage()}> - {meta.name} + <div if={opts.choice.choiceType === "RESOURCE" && meta} class="choice-ressource"> + <img if={isImage()} + class="image-preview" + src="{resourceService.getPreviewUrl(opts.choice.choiceValue)}" + alt="_t.imagePreview" /> + <span if={!isImage()}>{meta.name}</span> </div> <div if={opts.choice.choiceType === "RESOURCE" || opts.choice.description && !opts.showdescription} class="info-label"> <i class="fa fa-question-circle" aria-hidden="true"></i> @@ -62,7 +62,6 @@ import "../components/MultiLineLabel.tag.html"; this.session = session; this.resourceService = resourceService; this.installBundle(this.session, "choice"); - this.showModalImage = false; if (this.opts.choice.choiceType === "RESOURCE") { this.resourceService.getMeta(this.opts.choice.choiceValue).then(meta => { @@ -80,7 +79,7 @@ import "../components/MultiLineLabel.tag.html"; }; this.openModalImage = () => { - if (this.opts.choice.description && !this.opts.showdescription || this.opts.choice.choiceType === "RESOURCE") { + if (this.opts.choice.choiceType === "RESOURCE") { this.bus.trigger("openChoiceDetail", this.opts.choice, this.meta); } }; @@ -114,6 +113,10 @@ import "../components/MultiLineLabel.tag.html"; } .choice-view.with-info { + cursor: help; + } + + .choice-view.with-resource { cursor: pointer; } diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html index ce977982..0f9c512a 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/ChoiceDetailModal.tag.html @@ -23,19 +23,43 @@ import "../components/MultiLineLabel.tag.html"; <Modal header={title} ref="modal" only-ok="true"> - <div if={parent.choice && parent.choice.choiceType === "RESOURCE" && parent.meta}> - <img if={parent.isImage()} - class="image-preview" - src="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}" - alt="_t.imagePreview"/> - <a class="c-button c-button--info" - if={!parent.isImage()} - href="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}/download" - target="_blank"> - <i class="fa fa-download" aria-hidden="true"></i> - {parent._t.download} + + <div if={parent.choice && parent.choice.choiceType === "RESOURCE" && parent.meta} class="resource-container"> + <a if={parent.resourceChoices.length > 1} + class="carousel-button" + onclick="{parent.previousResource}"> + <i class="fa fa-chevron-circle-left" aria-hidden="true"></i> + </a> + <div class="resource-viewport"> + <a if={parent.isImage()} + show={!parent.loading} + href="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}" + target="_blank"> + <img src="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}" + class="image-preview" + onLoad="{parent.imageLoaded}" + alt="_t.imagePreview"/> + </a> + <div if={!parent.isImage()} + class="not-image-resource"> + <a class="c-button c-button--info" + href="{parent.session.configuration.endPoint}/v1/resources/{parent.choice.choiceValue}/download" + target="_blank"> + <i class="fa fa-download" aria-hidden="true"></i> {parent._t.download} + </a> + ({parent.getFileSize()}) + </div> + <div if={parent.loading} class="spinner"> + <i class="fa fa-spinner fa-pulse" aria-hidden="true"></i> + </div> + </div> + <a if={parent.resourceChoices.length > 1} + class="carousel-button" + onclick="{parent.nextResource}"> + <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> </a> </div> + <MultiLineLabel label="{parent.choice && parent.choice.description}"></MultiLineLabel> </Modal> @@ -46,39 +70,110 @@ import "../components/MultiLineLabel.tag.html"; this.session = session; this.resourceService = resourceService; this.installBundle(this.session, "choice"); + this.resourceChoices = []; + this.loading = false; + + this.onPollChange = poll => { + this.resourceChoices = poll.questions[0].choices.filter(choice => choice.choiceType === "RESOURCE"); + }; + + this.imageLoaded = () => { + console.log("image loaded"); + this.loading = false; + this.update(); + }; this.open = (choice, meta) => { + this.loading = this.isImage(meta) && this.choice != choice; this.choice = choice; this.meta = meta; - if (this.choice.choiceType === "TEXT") { - this.title = this.choice.choiceValue; - } else if (this.choice.choiceType === "DATE") { - this.title = this.formatDate(parseInt(this.choice.choiceValue, 10), "LLL"); - } else if (this.choice.choiceType === "DATETIME") { - this.title = this.formatDate(parseInt(this.choice.choiceValue, 10)); - } else if (this.choice.choiceType === "RESOURCE") { - this.title = this.meta && this.meta.name; - } - let promise = this.refs.modal.open().then(() => { - this.update(); - }, () => {}); + this.title = this.meta && this.meta.name; + let promise = this.refs.modal.open().then(this.update, () => {}); this.update(); return promise; }; + this.nextResource = () => { + let choiceIndex = this.resourceChoices.indexOf(this.choice); + this.setResource((choiceIndex + 1) % this.resourceChoices.length); + }; + + this.previousResource = () => { + let choiceIndex = this.resourceChoices.indexOf(this.choice); + this.setResource((this.resourceChoices.length + choiceIndex - 1) % this.resourceChoices.length); + }; - this.isImage = () => { - return this.meta.contentType.match(/^image\//i); + this.setResource = index => { + this.loading = true; + this.choice = this.resourceChoices[index]; + this.resourceService.getMeta(this.choice.choiceValue).then(meta => { + this.meta = meta; + this.loading &= this.isImage(); + this.title = this.meta && this.meta.name; + this.update(); + }); + }; + + this.isImage = meta => { + if (!meta) { + meta = this.meta; + } + return meta.contentType.match(/^image\//i); + }; + + this.getFileSize = () => { + let size = this.meta.size; + let unit = "o"; + if (size >= 1024) { + size = size / 1024; + unit = "ko"; + + if (size >= 1024) { + size = size / 1024; + unit = "Mo"; + } + } + return Math.round(size) + " " + unit; }; this.listen("openChoiceDetail", this.open); + this.listen("poll", this.onPollChange); </script> <style> - .modal-image img { + .resource-container { + display: flex; + align-items: center; + } + + .resource-viewport { + flex-grow: 1; + text-align: center; + } + + .image-preview { max-width: 100%; - max-height:100%; + max-height: calc(90vh - 100px); + padding: 10px; + cursor: zoom-in; + } + + .not-image-resource { + display: flex; + justify-content: center; + align-items: center; + padding: 10px; + } + + .carousel-button { + font-size: 50px; + flex-flow: column; + } + + .spinner { + margin: 5px 0; + font-size: 5.5em; } </style> diff --git a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html b/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html index 1b97185e..f9c260b7 100644 --- a/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html +++ b/pollen-ui-riot-js/src/main/web/tag/popup/Modal.tag.html @@ -109,7 +109,7 @@ import "../components/HumanInput.tag.html"; .c-card { display:flex; flex-direction: column; - max-height: 500px; + max-height: 90vh; } .c-card__body { -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.