htmx

{"name":"Modal Dialog in Bootstrap","method":"url","files":[{"location":"./playgrounds/boostrapmodaldialog/server.js","filename":"server.js","builtin":true,"contents":"\non.get(\"/\", (request) => {\n    return render(request, 'index.html')\n})\n\non.get(\"/modal\", (request) => {\n    return render(request, 'modal.html')\n})\n"},{"location":"./playgrounds/boostrapmodaldialog/.playground.json","filename":".playground.json","builtin":true,"contents":"{\n    \"name\": \"Modal Dialog in Bootstrap\",\n    \"method\": \"url\",\n    \"files\": [\n        {\n            \"location\": \"./playgrounds/boostrapmodaldialog/server.js\",\n            \"filename\": \"server.js\",\n            \"builtin\": true\n        },\n        {\n            \"location\": \"./playgrounds/boostrapmodaldialog/.playground.json\",\n            \"filename\": \".playground.json\",\n            \"builtin\": true\n        },\n        {\n            \"location\": \"./playgrounds/.loader.html\",\n            \"filename\": \".loader.html\",\n            \"builtin\": true\n        },\n        {\n            \"location\": \"./playgrounds/boostrapmodaldialog/index.html\",\n            \"filename\": \"index.html\"\n        },\n        {\n            \"location\": \"./playgrounds/boostrapmodaldialog/modal.html\",\n            \"filename\": \"modal.html\"\n        }\n    ]\n}"},{"location":"./playgrounds/.loader.html","filename":".loader.html","builtin":true,"contents":"<script src=\"./js/nunjucks.js\"></script>\n<script src=\"./js/pollyjs-core.js\"></script>\n<script src=\"./js/pollyjs-adapter-fetch.js\"></script>\n<script src=\"./js/pollyjs-adapter-xhr.js\"></script>\n<script>\n\n    document.addEventListener('htmx:configRequest', function(evt) {\n        evt.detail.path = window.location.href + evt.detail.path;\n    });\n\n    const fileContents = {};\n    files.forEach(file => fileContents[file.filename] = file.contents);\n\n    function readFile(filename) {\n        return fileContents[filename]\n    }\n\n    let TemplateLoader = {\n        getSource: (name) => ({\n            src: readFile(name),\n            path: name\n        })\n    }\n    var templates = new nunjucks.Environment(TemplateLoader, {\n        autoescape: false\n    })\n\n    function render(request, template, context) {\n        let out = templates.render(template, {...context, request});\n        \n        return new Response(out, {\n            headers: {\n                'content-type': 'text/html'\n            }\n        })\n    }\n\n    const { Polly } = window['@pollyjs/core'];\n\n    Polly.register(window['@pollyjs/adapter-fetch']);\n    Polly.register(window['@pollyjs/adapter-xhr']);\n\n    const polly = new Polly('sandbox-server', {\n        adapters: ['fetch', 'xhr'],\n        mode: \"passthrough\",\n        logging: true,\n    });\n\n    const server = polly.server;\n    \n    const on = {};\n    \n    ['get','put','post','patch','delete','merge','head','options'].forEach((method) => {\n        on[method] = (route, handler) => {\n            \n            let parsedRoute = window.location.href + route.replaceAll(/\\/<([^>]+)>/gm, (_, m) => \"/:\"+m)\n\n            server[method](parsedRoute).intercept(async (req, res) => {\n\n                var requestHeaders = Object.assign({}, req.headers)\n                var request = new Request(req.url, {\n                    body: req.body,\n                    headers: requestHeaders,\n                    method: req.method,\n                })\n\n                var response = await handler(request, ...Object.values(req.params), ...new URL(req.url).searchParams.values())\n\n                if (!response) throw new Error(\"Handler returned no response!\") // Return 404?\n\n                let responseHeaders = {}\n\n                for (const [k,v] of response.headers.entries()) {\n                    res.setHeader(k,v);\n                    responseHeaders[k] = v\n                }\n\n                let text = await response.text()\n\n                \n                res.status(response.status).send(text);\n                \n                window.parent.postMessage({\n                    type: \"network_log\",\n                    request: {\n                        url: req.url.replace(window.location.href, ''),\n                        body: req.body,\n                        method: req.method,\n                        headers: requestHeaders,\n                    },\n                    response: {\n                        headers: responseHeaders,\n                        status: response.status,\n                        body: text,\n                    },\n                }, \"*\")\n            });\n        }\n    })\n    \n    const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))\n</script>\n<script type=\"module\">\n    ///server.js\n</script>"},{"location":"./playgrounds/boostrapmodaldialog/index.html","filename":"index.html","contents":"<html>\n<head>\n    <link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\">\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js\"></script>\n    <script src=\"https://unpkg.com/htmx.org@<2/dist/htmx.js\" defer></script>\n</head>\n<body data-bs-theme=\"dark\">\n    <div class=\"container pt-5\">\n\n        <h1>Modal Dialog in Bootstrap</h1>\n\n        <button \n            hx-get=\"/modal\" \n            hx-target=\"#modals-here\" \n            hx-trigger=\"click\" \n            data-bs-toggle=\"modal\" \n            data-bs-target=\"#modals-here\"\n            class=\"btn btn-primary\">Open Modal</button>\n\n        <div id=\"modals-here\"\n            class=\"modal modal-blur fade\"\n            style=\"display: none\"\n            aria-hidden=\"false\"\n            tabindex=\"-1\">\n            <div class=\"modal-dialog modal-lg modal-dialog-centered\" role=\"document\">\n                <div class=\"modal-content\"></div>\n            </div>\n        </div>\n\n    </div>\n</body>\n</html>"},{"location":"./playgrounds/boostrapmodaldialog/modal.html","filename":"modal.html","contents":"<div class=\"modal-dialog modal-dialog-centered\">\n    <div class=\"modal-content\">\n        <div class=\"modal-header\">\n            <h5 class=\"modal-title\">Modal title</h5>\n        </div>\n        <div class=\"modal-body\">\n            <p>Modal body text goes here.</p>\n        </div>\n        <div class=\"modal-footer\">\n            <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\n        </div>\n    </div>\n</div>\n"}]}