JSFiddle - React, Tailwind, and code Playground

by avnerm

HTML

<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>
        <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

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

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

let filesInfo = {
    'IMG_20191023_090718.jpg': { filename: "IMG_20191023_090718.jpg",
                                 buffer: null,
                                 urlRef: "https://cdn.jsdelivr.net/gh/avnermosh/example8_memoryLeakOn_iOS/IMG_1.jpg",
                                 url: null },
    'IMG_20191126_155204.jpg': { filename: "IMG_20191126_155204.jpg",
                                 buffer: null,
                                 urlRef: "https://cdn.jsdelivr.net/gh/avnermosh/example8_memoryLeakOn_iOS/IMG_2.jpg",
                                 url: null },
    'IMG_20191126_155221.jpg': { filename: "IMG_20191126_155221.jpg",
                                 buffer: null,
                                 urlRef: "https://cdn.jsdelivr.net/gh/avnermosh/example8_memoryLeakOn_iOS/IMG_3.jpg",
                                 url: null }
};

const imageCountTotal_numFilesBetweenReporting = 10;
var imageCountTotal = 0;

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

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


async function extractAsBlobUrl(fileEntry, contentType) {

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

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

                if(isObjectValid(fileInfo.url))
                {
                    // revokeObjectURL causes a problem on iOS!!!
                    // console.log('filesInfo[filenameFullPath].url1',...