qumra-engine 2.0.127 → 2.0.129

package/dist/extensions/logic/qumra-scripts.js

@@ -18,445 +18,7 @@ exports.default = new (class SeoExtension {
       ${injectionCode.body}
     `;
         if (isIframe) {
-            scripts += `
-              <style>
-
-            /* مربع التحديد الاحترافي */
-            #selector-outline {
-                position: absolute;
-                border: 2px solid #2563eb;
-                background: transparent;
-                pointer-events: none;
-                display: none;
-                z-index: 9999;
-                border-radius: 6px;
-                box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2), 0 4px 24px rgba(37, 99, 235, 0.15);
-                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-            }
-
-            /* شريط الأدوات العلوي */
-            #selector-toolbar {
-                position: absolute;
-                top: 5px;
-                left: 5px;
-                // transform: translateX(-50%);
-                background: rgba(255, 255, 255, 0.95);
-                backdrop-filter: blur(20px);
-                border-radius: 12px;
-                padding: 8px 12px;
-                display: flex;
-                gap: 8px;
-                box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-                border: 1px solid rgba(37, 99, 235, 0.2);
-                pointer-events: all;
-                opacity: 0;
-                animation: toolbarSlideIn 0.3s ease-out forwards;
-                z-index: 10;
-            }
-
-            @keyframes toolbarSlideIn {
-                from {
-                    opacity: 0;
-                    transform: translateY(-10px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-
-            .control-btn {
-                width: 32px;
-                height: 32px;
-                border-radius: 8px;
-                border: none;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 14px;
-                transition: all 0.2s ease;
-                position: relative;
-                overflow: hidden;
-            }
-
-            .control-btn::before {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: -100%;
-                width: 100%;
-                height: 100%;
-                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
-                transition: left 0.5s;
-            }
-
-            .control-btn:hover::before {
-                left: 100%;
-            }
-
-            .btn-edit {
-                background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
-                color: white;
-            }
-
-            .btn-edit:hover {
-                transform: scale(1.1);
-                box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
-            }
-
-            .btn-delete {
-                background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-                color: white;
-            }
-
-            .btn-delete:hover {
-                transform: scale(1.1);
-                box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
-            }
-
-
-
-            /* تأثير النبض اللطيف */
-            #selector-outline::before {
-                content: '';
-                position: absolute;
-                top: -2px;
-                left: -2px;
-                right: -2px;
-                bottom: -2px;
-                background: linear-gradient(45deg, #2563eb, #3b82f6, #60a5fa, #2563eb);
-                background-size: 400% 400%;
-                border-radius: 8px;
-                z-index: -1;
-                animation: gradientShift 3s ease infinite;
-                opacity: 0.6;
-                curser: pointer;
-            }
-
-            @keyframes gradientShift {
-                0% {
-                    background-position: 0 50%;
-                }
-                50% {
-                    background-position: 100% 50%;
-                }
-                100% {
-                    background-position: 0 50%;
-                }
-            }
-
-            /* مؤشرات الزوايا */
-            .corner-dot {
-                position: absolute;
-                width: 8px;
-                height: 8px;
-                background: #2563eb;
-                border: 2px solid rgba(255, 255, 255, 0.9);
-                border-radius: 50%;
-                box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
-                transition: all 0.2s ease;
-            }
-
-            .corner-dot.top-left {
-                top: -4px;
-                left: -4px;
-                animation: cornerPulse 2s ease-in-out infinite;
-            }
-            .corner-dot.top-right {
-                top: -4px;
-                right: -4px;
-                animation: cornerPulse 2s ease-in-out infinite 0.5s;
-            }
-            .corner-dot.bottom-left {
-                bottom: -4px;
-                left: -4px;
-                animation: cornerPulse 2s ease-in-out infinite 1s;
-            }
-            .corner-dot.bottom-right {
-                bottom: -4px;
-                right: -4px;
-                animation: cornerPulse 2s ease-in-out infinite 1.5s;
-            }
-
-            @keyframes cornerPulse {
-                0%,
-                100% {
-                    transform: scale(1);
-                    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
-                }
-                50% {
-                    transform: scale(1.2);
-                    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.5);
-                }
-            }
-
-            /* خطوط الحواف */
-            .edge-line {
-                position: absolute;
-                background: rgba(37, 99, 235, 0.4);
-                pointer-events: none;
-            }
-
-            .edge-line.top {
-                top: -1px;
-                left: 20px;
-                right: 20px;
-                height: 2px;
-                background: linear-gradient(90deg, transparent, #2563eb, transparent);
-            }
-
-            .edge-line.bottom {
-                bottom: -1px;
-                left: 20px;
-                right: 20px;
-                height: 2px;
-                background: linear-gradient(90deg, transparent, #2563eb, transparent);
-            }
-
-            .edge-line.left {
-                left: -1px;
-                top: 20px;
-                bottom: 20px;
-                width: 2px;
-                background: linear-gradient(180deg, transparent, #2563eb, transparent);
-            }
-
-            .edge-line.right {
-                right: -1px;
-                top: 20px;
-                bottom: 20px;
-                width: 2px;
-                background: linear-gradient(180deg, transparent, #2563eb, transparent);
-            }
-
-            /* تأثير التوهج الداخلي */
-            #selector-outline::after {
-                content: '';
-                position: absolute;
-                top: 2px;
-                left: 2px;
-                right: 2px;
-                bottom: 2px;
-                background: rgba(255, 255, 255, 0.05);
-                border-radius: 4px;
-                pointer-events: none;
-            }
-        </style>
-        <div id="selector-outline">
-          <div id="selector-toolbar">
-            <button class="control-btn btn-edit" title="تحرير" id="btn-edit">✏️</button>
-            <button class="control-btn btn-delete" title="حذف" id="btn-delete">🗑️</button>
-          </div>
-          <div class="corner-dot top-left"></div>
-          <div class="corner-dot top-right"></div>
-          <div class="corner-dot bottom-left"></div>
-          <div class="corner-dot bottom-right"></div>
-          <div class="edge-line top"></div>
-          <div class="edge-line bottom"></div>
-          <div class="edge-line left"></div>
-          <div class="edge-line right"></div>
-        </div>
-
-        <script>
-          document.addEventListener("DOMContentLoaded", () => {
-            const outline = document.getElementById('selector-outline');
-            const btnEdit = document.getElementById('btn-edit');
-            const btnDelete = document.getElementById('btn-delete');
-            let selectedElement = null;
-            let hoverTimeout = null;
-
-            const widgets = document.querySelectorAll('[widget-id]');
-
-            function showSelector(element) {
-              selectedElement = element;
-              const rect = element.getBoundingClientRect();
-              outline.style.display = 'block';
-              outline.style.top = \`\${rect.top + window.scrollY - 4}px\`;
-              outline.style.left = \`\${rect.left + window.scrollX - 4}px\`;
-              outline.style.width = \`\${rect.width + 8}px\`;
-              outline.style.height = \`\${rect.height + 8}px\`;
-
-               element.onclick = () => {
-                  window.parent.postMessage(
-                    { 
-                      type: "widgetAction", 
-                      action: "edit", 
-                      widgetId: element.getAttribute("widget-id"), 
-                      templateKey: element.getAttribute("template-key"),
-                      templateId: element.getAttribute("template-id") 
-                    },
-                    "*"
-                  );
-                };
-
-            }
-
-            function hideSelector() {
-              outline.style.display = 'none';
-              selectedElement = null;
-            }
-
-            widgets.forEach(el => {
-              el.addEventListener('mouseenter', () => {
-                clearTimeout(hoverTimeout);
-                showSelector(el);
-              });
-
-              el.addEventListener('mouseleave', () => {
-                hoverTimeout = setTimeout(() => {
-                  const hovered = document.querySelector(':hover');
-                  if (!outline.contains(hovered) && hovered !== el) hideSelector();
-                }, 50);
-              });
-            });
-
-            outline.addEventListener('mouseenter', () => clearTimeout(hoverTimeout));
-            outline.addEventListener('mouseleave', () => {
-              hoverTimeout = setTimeout(hideSelector, 50);
-            });
-
-            // أزرار التحكم
-            const btnActions = {
-              'btn-edit': el => {
-                window.parent.postMessage(
-                  { 
-                    type: "widgetAction", 
-                    action: "edit", 
-                    widgetId: el.getAttribute("widget-id"), 
-                    templateKey: el.getAttribute("template-key"),
-                    templateId: el.getAttribute("template-id"),
-                  },
-                  "*"
-                );
-              },
-
-
-              'btn-delete': el => {
-                window.parent.postMessage(
-                    { 
-                      type: "widgetAction", 
-                      action: "delete", 
-                      widgetId: el.getAttribute("widget-id"), 
-                      templateKey: el.getAttribute("template-key"),
-                      templateId: el.getAttribute("template-id"),
-                    },
-                  "*"
-                );
-              }
-            };
-
-            Object.entries(btnActions).forEach(([id, fn]) => {
-              const btn = document.getElementById(id);
-              btn?.addEventListener('click', e => {
-                e.stopPropagation();
-                if (selectedElement) fn(selectedElement);
-              });
-            });
-
-            // تحديث موقع outline عند scroll
-            window.addEventListener('scroll', () => {
-              if (!selectedElement || outline.style.display === 'none') return;
-              const rect = selectedElement.getBoundingClientRect();
-              outline.style.top = \`\${rect.top + window.scrollY - 4}px\`;
-              outline.style.left = \`\${rect.left + window.scrollX - 4}px\`;
-              outline.style.width = \`\${rect.width + 8}px\`;
-              outline.style.height = \`\${rect.height + 8}px\`;
-            });
-
-            // التعامل مع روابط iframe
-            function attachIframeLinkListeners(root = document) {
-              const links = root.querySelectorAll("a");
-              links.forEach(link => {
-                if (link.dataset._iframeHandled) return;
-                link.dataset._iframeHandled = "true";
-
-                link.addEventListener("click", function (e) {
-                  const href = link.getAttribute("href");
-                  if (!href || href === "#") return;
-                  e.preventDefault();
-                  e.stopPropagation();
-                  window.parent.postMessage({ type: "iframeLinkClick", href }, "*");
-                });
-              });
-            }
-
-            attachIframeLinkListeners();
-            const observer = new MutationObserver(() => attachIframeLinkListeners());
-            observer.observe(document.body, { childList: true, subtree: true });
-          });
-        </script>
-
-
-        <script>
-            // الاستماع لأي رسائل جاية من الـ parent
-            window.addEventListener("message", (event) => {
-              // يفضل تتحقق من الـ origin لو عايز أمان أكتر
-              // if (event.origin !== "https://dashboard.qumra.cloud") return;
-
-              const data = event.data;
-
-              if (data?.type === "reRender") {
-                console.log("📩 تم استقبال رسالة إعادة الرندر:", data);
-                // هنا تقدر تنفذ أي كود لإعادة الرندر أو تحديث الصفحة
-                // مثلا:
-                // location.reload();
-              } else {
-                console.log("📩 رسالة وصلت:", data);
-              }
-            });
-          </script>
-
-        <script>
-          window.addEventListener("message", (event) => {
-            // لو عايز تتحقق من الـ origin:
-            // if (event.origin !== "https://dashboard.qumra.cloud") return;
-
-            const data = event.data;
-            console.log("🚀 ~ run ~ data:", data)
-
-            if (data?.type === "reRender") {
-              console.log("📩 تم استقبال رسالة إعادة الرندر:", data);
-
-              const { html, widgetId } = data.data || {};
-
-              if (!widgetId || !html) {
-                console.warn("⚠️ لا يوجد widgetId أو html في الرسالة");
-                return;
-              }
-
-              // البحث عن الويدجت المطلوب
-              const widgetEl = document.querySelector(\`[widget-id="\${widgetId}"]\`);
-
-              if (widgetEl) {
-                widgetEl.innerHTML = html;
-                console.log(\`✅ تم تحديث محتوى الويدجت \${widgetId}\`);
-              } else {
-                console.warn(\`⚠️ لم يتم العثور على عنصر يحتوي على widget-id="\${widgetId}"\`);
-              }
-            } else if (data?.type === "fullRender"){
-
-              const { html } = data.data || {};
-
-              if  !html) {
-                console.warn("⚠️ لا يوجد widgetId أو html في الرسالة");
-                return;
-              }
-
-              document.open();              // فتح الصفحة الحالية لإعادة الكتابة
-              document.write(html);  // كتابة HTML جديد
-              document.close();             // إغلاق الـ stream وتشغيل الـ HTML
-
-            } else {
-              console.log("📩 رسالة وصلت:", data);
-            }
-          });
-        </script>
-
-
-
-        
-      `;
+            scripts += `https://cdn.qumra.cloud/lib/bridge/1.0.0/qumra-bridge.js`;
         }
         return new nunjucks_1.runtime.SafeString(scripts);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qumra-engine",
-  "version": "2.0.127",
+  "version": "2.0.129",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {