From 94b7cd34d22ed52e67dad1ff6256f0b4d33f087a Mon Sep 17 00:00:00 2001 From: blurymind Date: Tue, 10 Sep 2024 23:00:15 +0100 Subject: [PATCH] add file stats --- src/public/web-components.js | 66 +++++++++++++++++++++++++++++------- 1 file changed, 53 insertions(+), 13 deletions(-) diff --git a/src/public/web-components.js b/src/public/web-components.js index d1c2a72d..1ccddd74 100644 --- a/src/public/web-components.js +++ b/src/public/web-components.js @@ -276,13 +276,13 @@ class ResourcesComponent extends HTMLElement { object-fit: fill; } } - .preview-image:active::after { + .preview-image:hover::after { position: absolute; bottom: 2%; left: 30%; padding: 3px; display: block; - content: ' ☆ name: ' attr(title) ' ☆ '; + content: ' ☆ ' attr(title) ' ☆ '; color: black; background-color: #ffffff4a; border-radius: 3px; @@ -308,6 +308,15 @@ class ResourcesComponent extends HTMLElement { background-position-x: right; background-clip: padding-box; } + .total-size-estimate-selected { + position: absolute; + bottom: 3px; + right: 3px; + color: white; + background-color: #00000085; + backdrop-filter: blur(1px); + padding: 0 3px; + }
@@ -335,7 +344,7 @@ class ResourcesComponent extends HTMLElement {
-
+ ` @@ -357,6 +366,18 @@ class ResourcesComponent extends HTMLElement { this.isBusy = (message) => { this.notifyParent('isBusy', {message}) } + this.bytesToSize = bytes => { + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'] + if (bytes === 0) return 'n/a' + const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10) + if (i === 0) return `${bytes} ${sizes[i]})` + return `${(bytes / (1024 ** i)).toFixed(1)} ${sizes[i]}` + } + this.getBase64StringSizeInbites = string => { + string = string.substring(string.indexOf(',') + 1, string.length) + const bites = ((string.length * 6) / 8); // / 1000 is kb + return bites + } this.selectedResources = []; this.resourcesFileUrl = ''; this.resourcesFileContent = ''; @@ -366,21 +387,26 @@ class ResourcesComponent extends HTMLElement { this.selectedResources = Object.values(allSelected).map( (item, index) => ({id:item.id, index, src: item.dataset.src}) ); + let totalSize = 0//bytes = (string_length(encoded_string) - 814) / 1.37 shadowRoot.getElementById('selected-resource-preview').innerHTML = this.selectedResources.map((resource, index) => { - if(index > 100) return;// we need some hard limit from preventing potential crash + if(index > 500) return;// we need some hard limit from preventing potential crash const selectedItem = resource.src; if (selectedItem.startsWith('data:image')) { - console.log({resource}) + // console.log({resource}) + const byteSize = this.getBase64StringSizeInbites(selectedItem); + totalSize += byteSize; return ` -
+
`; } else { return ``; } - }).join(''); + }).join('') + `
Previewing: ${this.selectedResources.length} Total size: ${this.bytesToSize(totalSize)}
`; + + // shadowRoot.getElementById('totalSizeEstimate').innerText = `Previewing: ${this.selectedResources.length} Total size: ${this.bytesToSize(totalSize)}` } this.isPointerDown = false; this.onPointerUp = () => { @@ -394,7 +420,8 @@ class ResourcesComponent extends HTMLElement { this.isPointerDown = true; shadowRoot.getElementById('resources-editor-select').focus(); if(evt.target.className !== 'select-option') return; - shadowRoot.getElementById('resources-editor-select').childNodes.forEach(item => item.removeAttribute('data-selected')); + console.log(this.isControlDown) + if(!this.isControlDown) shadowRoot.getElementById('resources-editor-select').childNodes.forEach(item => item.removeAttribute('data-selected')); evt.target.setAttribute('data-selected', true) this.updateSelected(); } @@ -411,15 +438,28 @@ class ResourcesComponent extends HTMLElement { shadowRoot.getElementById('resources-editor-select').focus(); }, 300) } + this.isControlDown = false; + this.onKeyDown = evt => { + evt.preventDefault(); + evt.stopPropagation() + const key = evt.key; + + if(key === 'Control' || key === 'Shift') { + console.log('->',{key}) + this.isControlDown = true; + } + } this.onKeyUp = evt => { evt.preventDefault(); const key = evt.key; const fakeSelect = shadowRoot.getElementById('resources-editor-select'); const allSelected = fakeSelect.querySelectorAll('[data-selected]'); - fakeSelect.childNodes.forEach(item => item.removeAttribute('data-selected')); + if(!this.isControlDown)fakeSelect.childNodes.forEach(item => item.removeAttribute('data-selected')); const selected = allSelected.length > 0 ? allSelected[allSelected.length - 1] : fakeSelect.firstChild; - console.log({key}) + if(key === 'Control' || key === 'Shift') { + this.isControlDown = false; + } if(key === 'ArrowUp' || key === 'ArrowLeft') { this.selectAndScrollIntoView(selected.previousSibling || fakeSelect.lastChild); this.updateSelected(); @@ -510,7 +550,7 @@ class ResourcesComponent extends HTMLElement { const isCommitted = true;//'committed' in fileData; //add this field when saving return `
- ${fileKey} + ${fileKey} -- ${this.bytesToSize(this.getBase64StringSizeInbites(fileData.src))}
`; }); shadowRoot.getElementById('resource-list-label').innerHTML = `${objectKeys.length} files`; @@ -557,9 +597,9 @@ class ResourcesComponent extends HTMLElement { .getElementById('resources-editor-select') .addEventListener('pointerup',this.onPointerUp); shadowRoot - .getElementById('resources-editor-select').removeEventListener('keydown', this.onKeyUp); + .getElementById('resources-editor-select').addEventListener('keydown', this.onKeyDown); shadowRoot - .getElementById('resources-editor-select').addEventListener('keydown', this.onKeyUp); + .getElementById('resources-editor-select').addEventListener('keyup', this.onKeyUp); shadowRoot .getElementById('onRemoveButton') .removeEventListener('click', this.onRemoveResource);