From 23283212d6d93251dc18ed106dda3dc42a5b397c Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Mon, 27 Feb 2023 20:04:38 +0100 Subject: [PATCH] Format controls and add Fullscreen option --- app/www/annotate.js | 64 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 57 insertions(+), 7 deletions(-) diff --git a/app/www/annotate.js b/app/www/annotate.js index 6938e3f..e3c3f83 100644 --- a/app/www/annotate.js +++ b/app/www/annotate.js @@ -241,12 +241,23 @@ class Annotator extends EventTarget { const extraControlsEl = document.createElement('ul'); - // TODO: add handlers + const toggleFutureHeaderEl = document.createElement('li'); + toggleFutureHeaderEl.classList.add('config-header', 'config-future'); + toggleFutureHeaderEl.innerText = "Preview drawing"; + extraControlsEl.appendChild(toggleFutureHeaderEl); + + // TODO: add handlers to change text const toggleFutureEl = document.createElement('li'); - toggleFutureEl.innerText = "Show preview" + toggleFutureEl.classList.add('config-future'); + toggleFutureEl.innerText = "Show" toggleFutureEl.addEventListener('click', () => this.wrapperEl.classList.toggle('hide-drawing-preview')); extraControlsEl.appendChild(toggleFutureEl); + const toggleCropHeaderEl = document.createElement('li'); + toggleCropHeaderEl.classList.add('config-header'); + toggleCropHeaderEl.innerText = "Crop"; + extraControlsEl.appendChild(toggleCropHeaderEl); + this.toggleCropPlayerEl = document.createElement('li'); this.toggleCropPlayerEl.innerText = CropDescriptions[this.config.crop]; this.toggleCropPlayerEl.addEventListener('click', () => this.toggleCrop()); @@ -256,6 +267,21 @@ class Annotator extends EventTarget { this.playbackControlsEl.appendChild(extraEl); + + + const fullScreenEl = document.createElement('div'); + fullScreenEl.classList.add('controls-fs'); + fullScreenEl.innerHTML = "⛶"; + fullScreenEl.addEventListener('click', () => { + if(document.fullscreenElement) { + document.exitFullscreen(); + } else { + // console.log(this.wrapperEl, this.shadowRoot); + this.wrapperEl.requestFullscreen(); + } + }) + this.playbackControlsEl.appendChild(fullScreenEl); + } @@ -1551,7 +1577,12 @@ class AnnotationPlayer extends HTMLElement { // Create a shadow root this.attachShadow({ mode: "open" }); + const imgWrapEl = document.createElement('div'); + imgWrapEl.classList.add('imgWrap'); + const imgEl = document.createElement('img'); + imgWrapEl.appendChild(imgEl); + const playerEl = document.createElement('div'); const config = { @@ -1578,8 +1609,10 @@ class AnnotationPlayer extends HTMLElement { styleEl.textContent = ` :host{ overflow: hidden; - padding: 10px; + } + div.play, div.imgWrap { + padding: 10px; background: white; } @@ -1656,6 +1689,15 @@ class AnnotationPlayer extends HTMLElement { line-height: 1; } + .controls .controls-fs { + width: 30px; + text-align: center; + cursor: pointer; + } + .controls .controls-fs:hover { + font-weight:bold; + } + .controls button.paused::before { content: '⏵'; } @@ -1739,7 +1781,7 @@ class AnnotationPlayer extends HTMLElement { details > ul{ position: absolute; - bottom: 30px; + bottom: 35px; background: rgba(0,0,0, .5); border-radius: 3px; right: 0; @@ -1747,25 +1789,33 @@ class AnnotationPlayer extends HTMLElement { margin: 0; list-style: none; font-size: 10pt; + width: 150px; } - details > ul li:hover{ + details > ul li:not(.config-header):hover{ cursor: pointer; text-decoration: underline; } + details .config-header { + font-weight: bold; + } + .play:not(.hide-drawing-preview) details > ul li:first-child{ /*text-decoration: line-through;*/ font-weight:bold; } .play.crop-selection details > ul li:nth-child(2){ /*text-decoration: line-through;*/ - font-weight:bold; + /*font-weight:bold;*/ + } + .play:not(.crop-selection) details .config-future{ + display:none; } `; this.shadowRoot.appendChild(styleEl); - this.shadowRoot.appendChild(imgEl); + this.shadowRoot.appendChild(imgWrapEl); this.shadowRoot.appendChild(playerEl); }