security_vision
/
chronodiagram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Format controls and add Fullscreen option

This commit is contained in:
Ruben van de Ven 2023-02-27 20:04:38 +01:00
parent 9a4a89c9c7
commit 23283212d6
1 changed files with 57 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/www/annotate.js
View File

@ -241,12 +241,23 @@ class Annotator extends EventTarget {
const extraControlsEl = document.createElement('ul'); 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'); 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')); toggleFutureEl.addEventListener('click', () => this.wrapperEl.classList.toggle('hide-drawing-preview'));
extraControlsEl.appendChild(toggleFutureEl); 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 = document.createElement('li');
this.toggleCropPlayerEl.innerText = CropDescriptions[this.config.crop]; this.toggleCropPlayerEl.innerText = CropDescriptions[this.config.crop];
this.toggleCropPlayerEl.addEventListener('click', () => this.toggleCrop()); this.toggleCropPlayerEl.addEventListener('click', () => this.toggleCrop());
@ -256,6 +267,21 @@ class Annotator extends EventTarget {
this.playbackControlsEl.appendChild(extraEl); 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 // Create a shadow root
this.attachShadow({ mode: "open" }); this.attachShadow({ mode: "open" });
const imgWrapEl = document.createElement('div');
imgWrapEl.classList.add('imgWrap');
const imgEl = document.createElement('img'); const imgEl = document.createElement('img');
imgWrapEl.appendChild(imgEl);
const playerEl = document.createElement('div'); const playerEl = document.createElement('div');
const config = { const config = {
@ -1578,8 +1609,10 @@ class AnnotationPlayer extends HTMLElement {
styleEl.textContent = ` styleEl.textContent = `
:host{ :host{
overflow: hidden; overflow: hidden;
padding: 10px; }
div.play, div.imgWrap {
padding: 10px;
background: white; background: white;
} }
@ -1656,6 +1689,15 @@ class AnnotationPlayer extends HTMLElement {
line-height: 1; line-height: 1;
} }
.controls .controls-fs {
width: 30px;
text-align: center;
cursor: pointer;
}
.controls .controls-fs:hover {
font-weight:bold;
}
.controls button.paused::before { .controls button.paused::before {
content: '⏵'; content: '⏵';
} }
@ -1739,7 +1781,7 @@ class AnnotationPlayer extends HTMLElement {
details > ul{ details > ul{
position: absolute; position: absolute;
bottom: 30px; bottom: 35px;
background: rgba(0,0,0, .5); background: rgba(0,0,0, .5);
border-radius: 3px; border-radius: 3px;
right: 0; right: 0;
@ -1747,25 +1789,33 @@ class AnnotationPlayer extends HTMLElement {
margin: 0; margin: 0;
list-style: none; list-style: none;
font-size: 10pt; font-size: 10pt;
width: 150px;
} }
details > ul li:hover{ details > ul li:not(.config-header):hover{
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
details .config-header {
font-weight: bold;
}
.play:not(.hide-drawing-preview) details > ul li:first-child{ .play:not(.hide-drawing-preview) details > ul li:first-child{
/*text-decoration: line-through;*/ /*text-decoration: line-through;*/
font-weight:bold; font-weight:bold;
} }
.play.crop-selection details > ul li:nth-child(2){ .play.crop-selection details > ul li:nth-child(2){
/*text-decoration: line-through;*/ /*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(styleEl);
this.shadowRoot.appendChild(imgEl); this.shadowRoot.appendChild(imgWrapEl);
this.shadowRoot.appendChild(playerEl); this.shadowRoot.appendChild(playerEl);
} }