JSFiddle - React, Tailwind, and code Playground

by avnerm

HTML

<link rel="stylesheet" href="https://unpkg.com/browse/[email protected]/build/toastr.css">
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    </head>
    
    <body>
        <input type="file" id="inp">
        <div>
            <div id="grid-container1">
            </div>
            <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
            <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    </body>
</html>

CSS

#grid-container1 {
    display: grid;
    grid-template-columns: 40px repeat(5, 1fr);
    grid-template-rows: 10px repeat(2, 40px) repeat(4, 1fr);
    height: 100%;
    width: 100%;
    /* touch-action: manipulation; */
}


#texImageId {
    grid-column: 1/5;
    grid-row: 2/6;
    height: 100%;
    width: 100%;
    touch-action: none;
    position: relative;
    z-index: 1;
}

JavaScript

import { ZipLoader } from "https://cdn.jsdelivr.net/gh/avnermosh/example8_memoryLeakOn_iOS/static/ZipLoader.module.js";

// Setting the variable doDebugMemoryLeakOn_iOS_withRevoke to true causes a problem on iOS!!!
let doDebugMemoryLeakOn_iOS_withRevoke = true;
// doDebugMemoryLeakOn_iOS_withRevoke = false;
let dummyIndex = 4;

let toastrSettings = { timeOut: 0,
                       extendedTimeOut: 0,
                       closeButton: true,
                       closeDuration: 1000};

let zipFile = null;
let zipFileInfo = {
    zipFile: null,
    zipFileName: null,
    zipFileUrl: null,
    files: {} };

const imageCountTotal_numFilesBetweenReporting = 10;
var imageCountTotal = 0;

// --------------------------------------------------------------

document.addEventListener("DOMContentLoaded", async function(event) { 
    await main();
});


async function extractAsBlobUrl(zipFileEntry, contentType) {

    if(doDebugMemoryLeakOn_iOS_withRevoke)
    {
        for (const filenameFullPath of Object.keys(zipFileInfo.files)) {
            let fileInfo = zipFileInfo.files[filenameFullPath];

            if(isObjectValid(fileInfo.buffer) || isObjectValid(fileInfo.url)) {

                if(isObjectValid(fileInfo.url))
                {
                    // revokeObjectURL causes a problem on iOS!!!
                    URL.revokeObjectURL(fileInfo.url);
                    fileInfo.url = null;
                    fileInfo.buffer = null;
                }
            }
            
        }
    }

    if (zipFileEntry.url) {
        return zipFileEntry.url;
    }
    
    if(isObjectInvalid(zipFileEntry.buffer)) {
        // get the buffer
        let sliceBeg = zipFileEntry.offsetInZipFile;
        let sliceEnd = sliceBeg +
            zipFileEntry.headerSize +
            zipFileEntry.compressedSize;

        let doSkipFileData = false;
        await loadFromZipFile(sliceBeg, sliceEnd, doSkipFileData, zipFileEntry.filename);
    }

   ...