mumineen-ui-plugins 1.7.0 → 1.8.0

package/dist/qasr/QasrNamaaz.css

@@ -26,7 +26,6 @@
     font-family: "DM Sans", sans-serif;
     background: var(--bg);
     color: var(--text);
-    min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -119,7 +118,7 @@
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 32px;
+    padding: 10px;
     margin-bottom: 20px;
     box-shadow: 0 4px 24px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
 }
@@ -1135,6 +1134,92 @@
     margin-top: 1px;
 }
 
+/* ── Results overlay layer ── */
+.qasr-namaaz .overlay-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    background: var(--bg);
+    border-radius: var(--radius);
+    display: flex;
+    flex-direction: column;
+    animation: qasr-fadeUp 0.3s ease both;
+}
+
+.qasr-namaaz .overlay-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 14px 16px;
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border);
+    border-radius: var(--radius) var(--radius) 0 0;
+    flex-shrink: 0;
+}
+
+.qasr-namaaz .overlay-addresses {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+    min-width: 0;
+}
+
+.qasr-namaaz .overlay-addr {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+}
+
+.qasr-namaaz .overlay-addr-icon {
+    color: var(--gold);
+    font-size: 14px;
+    flex-shrink: 0;
+}
+
+.qasr-namaaz .overlay-addr-text {
+    font-size: 12px;
+    color: var(--text);
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.qasr-namaaz .overlay-arrow {
+    color: var(--grey-light);
+    font-size: 14px;
+    flex-shrink: 0;
+}
+
+.qasr-namaaz .overlay-dismiss {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.03);
+    color: rgba(0, 0, 0, 0.65);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    flex-shrink: 0;
+    transition: background 0.18s;
+}
+
+.qasr-namaaz .overlay-dismiss:hover {
+    background: rgba(0, 0, 0, 0.07);
+}
+
+.qasr-namaaz .overlay-body {
+    flex: 1 1 auto;
+    padding: 10px;
+    min-height: 0;
+}
+
 /* ── PAC autocomplete (global — dropdown renders outside component) ── */
 .pac-container {
     background: #fff !important;
@@ -1239,6 +1324,24 @@
     .qasr-namaaz .border-route-link {
         font-size: 11px;
     }
+
+    .qasr-namaaz .overlay-addresses {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
+
+    .qasr-namaaz .overlay-arrow {
+        display: none;
+    }
+
+    .qasr-namaaz .overlay-header {
+        padding: 12px 14px;
+    }
+
+    .qasr-namaaz .overlay-body {
+        padding: 16px 14px;
+    }
 }
 
 @media (max-width: 360px) {

package/dist/qasr/QasrNamaaz.d.ts

@@ -1,5 +1,10 @@
 import * as React from "react";
 import "./QasrNamaaz.css";
-export declare const QasrNamaaz: React.FC<{
+interface QasrNamaazProps {
     googleMapsApiKey: string;
-}>;
+    defaultOrigin?: string;
+    defaultDestination?: string;
+    showResultsAsOverlay?: boolean;
+}
+export declare const QasrNamaaz: React.FC<QasrNamaazProps>;
+export {};

package/dist/qasr/QasrNamaaz.js

@@ -4,7 +4,8 @@ exports.QasrNamaaz = void 0;
 const React = require("react");
 require("./QasrNamaaz.css");
 const qasr_engine_1 = require("./qasr-engine");
-exports.QasrNamaaz = React.memo(({ googleMapsApiKey }) => {
+exports.QasrNamaaz = React.memo(({ googleMapsApiKey, defaultOrigin, defaultDestination, showResultsAsOverlay }) => {
+    var _a, _b;
     const [scriptsLoaded, setScriptsLoaded] = React.useState(false);
     const [results, setResults] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
@@ -18,6 +19,7 @@ exports.QasrNamaaz = React.memo(({ googleMapsApiKey }) => {
     const [openCards, setOpenCards] = React.useState({});
     const [activeTabs, setActiveTabs] = React.useState({});
     const [fsMap, setFsMap] = React.useState(null);
+    const [showOverlay, setShowOverlay] = React.useState(false);
     const originRef = React.useRef(null);
     const destRef = React.useRef(null);
     const resultsRef = React.useRef(null);
@@ -107,6 +109,39 @@ exports.QasrNamaaz = React.memo(({ googleMapsApiKey }) => {
         makeAC(originRef.current, "origin");
         makeAC(destRef.current, "dest");
     }, [scriptsLoaded]);
+    // Geocode default addresses after scripts are ready
+    React.useEffect(() => {
+        if (!scriptsLoaded)
+            return;
+        const gc = new ((0, qasr_engine_1.gm)().maps.Geocoder)();
+        const geocodeDefault = (address, which) => {
+            gc.geocode({ address }, (results, status) => {
+                if (status !== "OK" || !(results === null || results === void 0 ? void 0 : results.length))
+                    return;
+                const p = results[0];
+                if (!p.geometry)
+                    return;
+                const co = (0, qasr_engine_1.getCounty)(p), st = (0, qasr_engine_1.getState)(p);
+                const text = co ? co + " County, " + st : st;
+                if (which === "origin") {
+                    if (originRef.current)
+                        originRef.current.value = address;
+                    (0, qasr_engine_1.setOriginPlace)(p);
+                    setOriginBadge({ text, visible: true });
+                }
+                else {
+                    if (destRef.current)
+                        destRef.current.value = address;
+                    (0, qasr_engine_1.setDestPlace)(p);
+                    setDestBadge({ text, visible: true });
+                }
+            });
+        };
+        if (defaultOrigin)
+            geocodeDefault(defaultOrigin, "origin");
+        if (defaultDestination)
+            geocodeDefault(defaultDestination, "dest");
+    }, [scriptsLoaded]);
     // Init Leaflet maps when Map tab is opened
     React.useEffect(() => {
         Object.entries(activeTabs).forEach(([idxStr, tab]) => {
@@ -197,7 +232,12 @@ exports.QasrNamaaz = React.memo(({ googleMapsApiKey }) => {
             setActiveTabs({});
             setShowResults(true);
             setProgress({ pct: 100, label: "Done!" });
-            setTimeout(() => { var _a; return (_a = resultsRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "start" }); }, 100);
+            if (showResultsAsOverlay) {
+                setShowOverlay(true);
+            }
+            else {
+                setTimeout(() => { var _a; return (_a = resultsRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "start" }); }, 100);
+            }
         }
         catch (e) {
             setError("Error: " + e.message);
@@ -431,11 +471,27 @@ exports.QasrNamaaz = React.memo(({ googleMapsApiKey }) => {
                         React.createElement("div", { className: "prog-fill", style: { width: progress.pct + "%" } })),
                     React.createElement("div", { className: "prog-lbl" }, progress.label || "Starting")),
                 React.createElement("div", { className: "err" + (error ? " on" : "") }, error)),
-            React.createElement("div", { className: "results-wrap" + (showResults ? " on" : ""), ref: resultsRef },
+            !showResultsAsOverlay && (React.createElement("div", { className: "results-wrap" + (showResults ? " on" : ""), ref: resultsRef },
                 React.createElement("div", { className: "results-hd" },
                     React.createElement("h2", null, "Route Results"),
                     React.createElement("span", { className: "results-ct" }, resultCountText)),
                 React.createElement("div", null, results.map((r, i) => renderRouteCard(r, i))))),
+            showResultsAsOverlay && showOverlay && showResults && (React.createElement("div", { className: "overlay-layer" },
+                React.createElement("div", { className: "overlay-header" },
+                    React.createElement("div", { className: "overlay-addresses" },
+                        React.createElement("div", { className: "overlay-addr" },
+                            React.createElement("span", { className: "overlay-addr-icon" }, "\u29BF"),
+                            React.createElement("span", { className: "overlay-addr-text" }, ((_a = originRef.current) === null || _a === void 0 ? void 0 : _a.value) || "Origin")),
+                        React.createElement("div", { className: "overlay-arrow" }, "\u2192"),
+                        React.createElement("div", { className: "overlay-addr" },
+                            React.createElement("span", { className: "overlay-addr-icon" }, "\u25CE"),
+                            React.createElement("span", { className: "overlay-addr-text" }, ((_b = destRef.current) === null || _b === void 0 ? void 0 : _b.value) || "Destination"))),
+                    React.createElement("button", { className: "overlay-dismiss", onClick: () => setShowOverlay(false) }, "\u2715")),
+                React.createElement("div", { className: "overlay-body", ref: resultsRef },
+                    React.createElement("div", { className: "results-hd" },
+                        React.createElement("h2", null, "Route Results"),
+                        React.createElement("span", { className: "results-ct" }, resultCountText)),
+                    React.createElement("div", null, results.map((r, i) => renderRouteCard(r, i))))))),
         fsMap && (React.createElement("div", { className: "fs-overlay", onClick: e => {
                 if (e.target === e.currentTarget)
                     setFsMap(null);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mumineen-ui-plugins",
-    "version": "1.7.0",
+    "version": "1.8.0",
     "description": "",
     "main": "dist/index",
     "scripts": {