runlab 1.0.0 → 1.1.0

package/dist/app/app.js

@@ -3,12 +3,18 @@ import { createNavbar } from "./core/navbar.js";
 import { FileExplorer } from "./fileExplorer/FileExplorer.js";
 import { createTerminal } from "./terminal/terminal.js";
 
-export function generateContainer(parentId,w,h) {
+export function generateContainer(parentId) {
   const container = document.createElement("div");
   container.id = "runlab-container";
   Object.assign(container.style, {
-    width: w + "px",
-    height: h + "px",
+    position: "fixed",
+    inset: "0",
+    left: "0",
+    bottom: "0",
+
+    width: "100vw",
+    height: "100vh",
+
     border: "1px solid #000",
     display: "flex",
     justifyContent: "center",
@@ -16,7 +22,7 @@ export function generateContainer(parentId,w,h) {
     overflow: "hidden"
   });
   document.getElementById(parentId).appendChild(container);
-  gridTemplate("runlab-container", w, h);
+  gridTemplate("runlab-container");
   createEditor("runlab-editor","");
 
   // View and Editor toggle
@@ -202,7 +208,7 @@ export function setEditorActive(status = true){
   //================================ SVG Warning Text ================================
 
   const warningText = document.createElement("p");
-  warningText.textContent = "No file selected.";
+  warningText.textContent = "No files selected.";
   warningText.style.color = "#aaa";
   warningText.style.fontSize = "0.9em";
   warningText.style.margin = "0";

package/dist/app/core/navbar.js

@@ -34,7 +34,7 @@ export function createNavbar(parentId) {
     });
     ul.appendChild(leftGroup);
 
-    const menuItems = ["Run", "Help"];
+    const menuItems = ["✕", "🗗","Run", "Help"];
     menuItems.forEach(item => {
         const li = document.createElement("li");
         li.textContent = item;
@@ -46,6 +46,36 @@ export function createNavbar(parentId) {
             cursor: "pointer",
             color: "#fff"
         });
+        if (item === "✕") {
+            li.addEventListener("click", () => {
+                const app = document.getElementById("runlab-custom-div");
+                app.style.display = "none";
+                document.getElementById("runlab-custom-btn").textContent = "Show App";
+            });
+        }
+        if (item === "🗗"){
+            li.addEventListener("click", () => {
+                const container = document.getElementById("runlab-container");
+                let isMaximized = container.style.height === "100vh"? false: true;
+
+                if(isMaximized){
+                    container.style.height = "100vh";
+                    container.style.width = "100vw";
+                    container.style.left = "0";
+                    container.style.top = "0";
+                    container.style.bottom = "0";
+                    container.style.transform = "none";
+                }
+                if(!isMaximized){
+                    container.style.height = "70vh";
+                    container.style.width = "70vw";
+                    container.style.left = "50%";
+                    container.style.top = "auto";
+                    container.style.bottom = "0";
+                    container.style.transform = "translateX(-50%)";
+                }
+            });
+        }
         if (item === "Run") {
             li.addEventListener("click", () => {
                 sendCode(getCurrentCode(),getCurrentExtension());

package/dist/index.js

@@ -1,5 +1,6 @@
 import { generateContainer } from "./app/app.js";
 import { appendViewContent } from "./app/app.js";
+import { ReactRunlabButton } from "./reactButton.jsx";
 
 let runtimeUrl = "";
 function setRuntimeUrl(url) {
@@ -11,11 +12,9 @@ function getRuntimeUrl() {
 
 export async function run({
   parentId,
-  width = 1200,
-  height = 800,
   runtimeUrl = ""
 }) {
-  generateContainer(parentId, width, height);
+  generateContainer(parentId);
   setRuntimeUrl(runtimeUrl);
 }
 
@@ -47,3 +46,7 @@ export async function sendCode(code, ext = "txt") {
     console.error(err);
   }
 }
+
+//=============================== Buttons ===============================
+
+export { ReactRunlabButton };

package/dist/reactButton.jsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { run } from "./index.js";
+
+export function ReactRunlabButton(props = { runConfig: {} }) {
+  const { runConfig } = props;
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.__runlab_started) return;
+
+    if (typeof window !== 'undefined') {
+      window.__runlab_started = true;
+    }
+
+    run(runConfig);
+  }, []);
+
+  const showApp = () => {
+    const app = document.getElementById("runlab-custom-div");
+    const btn = document.getElementById("runlab-custom-btn");
+
+    const displayStyle = window.getComputedStyle(app).display;
+
+    if (displayStyle === "none") {
+      app.style.display = "block";
+      btn.textContent = "Hide App";
+    }
+    if (displayStyle === "block") {
+      app.style.display = "none";
+      btn.textContent = "Show App";
+    }
+  };
+
+  return (
+    <>
+      <button
+        id="runlab-custom-btn"
+        onClick={showApp}
+        className="show-app-button"
+      >
+        Show App
+      </button>
+
+      <div id="runlab-custom-div" style={{ display: "none" }}></div>
+    </>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runlab",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",