add file stats

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;
+      }
       </style>
       <div id="resources-editor" style="display:flex;flex-direction:column;width: 100%;height:100%; overflow: hidden;">
         <div class="flex-wrap" style="gap: 10px;padding-bottom:2px;">
@@ -335,7 +344,7 @@ class ResourcesComponent extends HTMLElement {
               <button id="onRemoveButton">Remove</button>
             </div>
           </div>
-          <div id="selected-resource-preview"></div>
+          <span id="selected-resource-preview"></span>
         </div>
       </div>
   `
@@ -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 `
-          <div title="${resource.id}" class="preview-image">
+          <div title="${resource.id}  size: ${this.bytesToSize(byteSize)}" class="preview-image">
             <img src="${selectedItem}" class="image-view"></img>
           </div>
           `;
         } else {
           return ``;
         }
-      }).join('');
+      }).join('') + `<div class="total-size-estimate-selected" id="totalSizeEstimate">Previewing: ${this.selectedResources.length} Total size: ${this.bytesToSize(totalSize)}</div>`;
+
+      // 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 `<div value="${fileKey}" id="${fileKey}" class="select-option" data-src="${fileData.src}" title="${fileKey}" style="${!isCommitted &&
           'border-left:3px solid'}">
-           ${fileKey} 
+           ${fileKey} -- ${this.bytesToSize(this.getBase64StringSizeInbites(fileData.src))}
         </div>`;
       });
       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);