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

Format controls and add Fullscreen option

Browse source
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');
// 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);
}