qumra-engine 2.0.90 → 2.0.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -45,7 +45,7 @@ exports.default = new (class WidgetExtension {
|
|
|
45
45
|
context: ctx.context,
|
|
46
46
|
globals: ctx.globals,
|
|
47
47
|
widget: {
|
|
48
|
-
id: widget.
|
|
48
|
+
id: widget._id,
|
|
49
49
|
type: widget.widget,
|
|
50
50
|
data: widget.data,
|
|
51
51
|
blocks: widget.blocks ?? [],
|
|
@@ -57,7 +57,7 @@ exports.default = new (class WidgetExtension {
|
|
|
57
57
|
}
|
|
58
58
|
if (isIframe) {
|
|
59
59
|
renderedWidgets.push(`
|
|
60
|
-
<section widget-id="${widget.
|
|
60
|
+
<section content-type="widget" widget-id="${widget._id}" id="qumra-widget-id-${widget._id}">
|
|
61
61
|
${html}
|
|
62
62
|
</section>
|
|
63
63
|
`);
|
|
@@ -11,42 +11,366 @@ exports.default = new (class SeoExtension {
|
|
|
11
11
|
parser.advanceAfterBlockEnd(tok.value);
|
|
12
12
|
return new nodes.CallExtension(this, "run", null);
|
|
13
13
|
}
|
|
14
|
-
run({ env
|
|
14
|
+
run({ env }) {
|
|
15
15
|
const injectionCode = (0, globals_1.getGlobal)("injectionCode");
|
|
16
|
-
|
|
17
|
-
if (env.getGlobal("isIframe")) {
|
|
18
|
-
isIframe = env.getGlobal("isIframe");
|
|
19
|
-
}
|
|
16
|
+
const isIframe = !!env.getGlobal("isIframe");
|
|
20
17
|
let scripts = `
|
|
21
18
|
${injectionCode.body}
|
|
22
19
|
`;
|
|
23
20
|
if (isIframe) {
|
|
24
21
|
scripts += `
|
|
22
|
+
<style>
|
|
23
|
+
|
|
24
|
+
/* مربع التحديد الاحترافي */
|
|
25
|
+
#selector-outline {
|
|
26
|
+
position: absolute;
|
|
27
|
+
border: 2px solid #2563eb;
|
|
28
|
+
background: transparent;
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
display: none;
|
|
31
|
+
z-index: 9999;
|
|
32
|
+
border-radius: 6px;
|
|
33
|
+
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2), 0 4px 24px rgba(37, 99, 235, 0.15);
|
|
34
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* شريط الأدوات العلوي */
|
|
38
|
+
#selector-toolbar {
|
|
39
|
+
position: absolute;
|
|
40
|
+
top: -45px;
|
|
41
|
+
left: 50%;
|
|
42
|
+
transform: translateX(-50%);
|
|
43
|
+
background: rgba(255, 255, 255, 0.95);
|
|
44
|
+
backdrop-filter: blur(20px);
|
|
45
|
+
border-radius: 12px;
|
|
46
|
+
padding: 8px 12px;
|
|
47
|
+
display: flex;
|
|
48
|
+
gap: 8px;
|
|
49
|
+
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
|
50
|
+
border: 1px solid rgba(37, 99, 235, 0.2);
|
|
51
|
+
pointer-events: all;
|
|
52
|
+
opacity: 0;
|
|
53
|
+
animation: toolbarSlideIn 0.3s ease-out forwards;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@keyframes toolbarSlideIn {
|
|
57
|
+
from {
|
|
58
|
+
opacity: 0;
|
|
59
|
+
transform: translateX(-50%) translateY(-10px);
|
|
60
|
+
}
|
|
61
|
+
to {
|
|
62
|
+
opacity: 1;
|
|
63
|
+
transform: translateX(-50%) translateY(0);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.control-btn {
|
|
68
|
+
width: 32px;
|
|
69
|
+
height: 32px;
|
|
70
|
+
border-radius: 8px;
|
|
71
|
+
border: none;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
font-size: 14px;
|
|
77
|
+
transition: all 0.2s ease;
|
|
78
|
+
position: relative;
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.control-btn::before {
|
|
83
|
+
content: '';
|
|
84
|
+
position: absolute;
|
|
85
|
+
top: 0;
|
|
86
|
+
left: -100%;
|
|
87
|
+
width: 100%;
|
|
88
|
+
height: 100%;
|
|
89
|
+
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
|
|
90
|
+
transition: left 0.5s;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.control-btn:hover::before {
|
|
94
|
+
left: 100%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.btn-edit {
|
|
98
|
+
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
|
99
|
+
color: white;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.btn-edit:hover {
|
|
103
|
+
transform: scale(1.1);
|
|
104
|
+
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.btn-delete {
|
|
108
|
+
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
109
|
+
color: white;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.btn-delete:hover {
|
|
113
|
+
transform: scale(1.1);
|
|
114
|
+
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.btn-copy {
|
|
118
|
+
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
119
|
+
color: white;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.btn-copy:hover {
|
|
123
|
+
transform: scale(1.1);
|
|
124
|
+
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.btn-settings {
|
|
128
|
+
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
129
|
+
color: white;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.btn-settings:hover {
|
|
133
|
+
transform: scale(1.1);
|
|
134
|
+
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* تأثير النبض اللطيف */
|
|
138
|
+
#selector-outline::before {
|
|
139
|
+
content: '';
|
|
140
|
+
position: absolute;
|
|
141
|
+
top: -2px;
|
|
142
|
+
left: -2px;
|
|
143
|
+
right: -2px;
|
|
144
|
+
bottom: -2px;
|
|
145
|
+
background: linear-gradient(45deg, #2563eb, #3b82f6, #60a5fa, #2563eb);
|
|
146
|
+
background-size: 400% 400%;
|
|
147
|
+
border-radius: 8px;
|
|
148
|
+
z-index: -1;
|
|
149
|
+
animation: gradientShift 3s ease infinite;
|
|
150
|
+
opacity: 0.6;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@keyframes gradientShift {
|
|
154
|
+
0% {
|
|
155
|
+
background-position: 0 50%;
|
|
156
|
+
}
|
|
157
|
+
50% {
|
|
158
|
+
background-position: 100% 50%;
|
|
159
|
+
}
|
|
160
|
+
100% {
|
|
161
|
+
background-position: 0 50%;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* مؤشرات الزوايا */
|
|
166
|
+
.corner-dot {
|
|
167
|
+
position: absolute;
|
|
168
|
+
width: 8px;
|
|
169
|
+
height: 8px;
|
|
170
|
+
background: #2563eb;
|
|
171
|
+
border: 2px solid rgba(255, 255, 255, 0.9);
|
|
172
|
+
border-radius: 50%;
|
|
173
|
+
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
|
|
174
|
+
transition: all 0.2s ease;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.corner-dot.top-left {
|
|
178
|
+
top: -4px;
|
|
179
|
+
left: -4px;
|
|
180
|
+
animation: cornerPulse 2s ease-in-out infinite;
|
|
181
|
+
}
|
|
182
|
+
.corner-dot.top-right {
|
|
183
|
+
top: -4px;
|
|
184
|
+
right: -4px;
|
|
185
|
+
animation: cornerPulse 2s ease-in-out infinite 0.5s;
|
|
186
|
+
}
|
|
187
|
+
.corner-dot.bottom-left {
|
|
188
|
+
bottom: -4px;
|
|
189
|
+
left: -4px;
|
|
190
|
+
animation: cornerPulse 2s ease-in-out infinite 1s;
|
|
191
|
+
}
|
|
192
|
+
.corner-dot.bottom-right {
|
|
193
|
+
bottom: -4px;
|
|
194
|
+
right: -4px;
|
|
195
|
+
animation: cornerPulse 2s ease-in-out infinite 1.5s;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
@keyframes cornerPulse {
|
|
199
|
+
0%,
|
|
200
|
+
100% {
|
|
201
|
+
transform: scale(1);
|
|
202
|
+
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
|
|
203
|
+
}
|
|
204
|
+
50% {
|
|
205
|
+
transform: scale(1.2);
|
|
206
|
+
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.5);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/* خطوط الحواف */
|
|
211
|
+
.edge-line {
|
|
212
|
+
position: absolute;
|
|
213
|
+
background: rgba(37, 99, 235, 0.4);
|
|
214
|
+
pointer-events: none;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.edge-line.top {
|
|
218
|
+
top: -1px;
|
|
219
|
+
left: 20px;
|
|
220
|
+
right: 20px;
|
|
221
|
+
height: 2px;
|
|
222
|
+
background: linear-gradient(90deg, transparent, #2563eb, transparent);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.edge-line.bottom {
|
|
226
|
+
bottom: -1px;
|
|
227
|
+
left: 20px;
|
|
228
|
+
right: 20px;
|
|
229
|
+
height: 2px;
|
|
230
|
+
background: linear-gradient(90deg, transparent, #2563eb, transparent);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.edge-line.left {
|
|
234
|
+
left: -1px;
|
|
235
|
+
top: 20px;
|
|
236
|
+
bottom: 20px;
|
|
237
|
+
width: 2px;
|
|
238
|
+
background: linear-gradient(180deg, transparent, #2563eb, transparent);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.edge-line.right {
|
|
242
|
+
right: -1px;
|
|
243
|
+
top: 20px;
|
|
244
|
+
bottom: 20px;
|
|
245
|
+
width: 2px;
|
|
246
|
+
background: linear-gradient(180deg, transparent, #2563eb, transparent);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
/* تأثير التوهج الداخلي */
|
|
250
|
+
#selector-outline::after {
|
|
251
|
+
content: '';
|
|
252
|
+
position: absolute;
|
|
253
|
+
top: 2px;
|
|
254
|
+
left: 2px;
|
|
255
|
+
right: 2px;
|
|
256
|
+
bottom: 2px;
|
|
257
|
+
background: rgba(255, 255, 255, 0.05);
|
|
258
|
+
border-radius: 4px;
|
|
259
|
+
pointer-events: none;
|
|
260
|
+
}
|
|
261
|
+
</style>
|
|
262
|
+
<div id="selector-outline">
|
|
263
|
+
<div id="selector-toolbar">
|
|
264
|
+
<button class="control-btn btn-edit" title="تحرير" id="btn-edit">✏️</button>
|
|
265
|
+
<button class="control-btn btn-copy" title="نسخ" id="btn-copy">📋</button>
|
|
266
|
+
<button class="control-btn btn-settings" title="إعدادات" id="btn-settings">⚙️</button>
|
|
267
|
+
<button class="control-btn btn-delete" title="حذف" id="btn-delete">🗑️</button>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="corner-dot top-left"></div>
|
|
270
|
+
<div class="corner-dot top-right"></div>
|
|
271
|
+
<div class="corner-dot bottom-left"></div>
|
|
272
|
+
<div class="corner-dot bottom-right"></div>
|
|
273
|
+
<div class="edge-line top"></div>
|
|
274
|
+
<div class="edge-line bottom"></div>
|
|
275
|
+
<div class="edge-line left"></div>
|
|
276
|
+
<div class="edge-line right"></div>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
25
279
|
<script>
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
e.preventDefault();
|
|
37
|
-
e.stopPropagation();
|
|
280
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
281
|
+
const outline = document.getElementById('selector-outline');
|
|
282
|
+
const btnEdit = document.getElementById('btn-edit');
|
|
283
|
+
const btnDelete = document.getElementById('btn-delete');
|
|
284
|
+
const btnCopy = document.getElementById('btn-copy');
|
|
285
|
+
const btnSettings = document.getElementById('btn-settings');
|
|
286
|
+
let selectedElement = null;
|
|
287
|
+
let hoverTimeout = null;
|
|
288
|
+
|
|
289
|
+
const widgets = document.querySelectorAll('[widget-id]');
|
|
38
290
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
291
|
+
function showSelector(element) {
|
|
292
|
+
selectedElement = element;
|
|
293
|
+
const rect = element.getBoundingClientRect();
|
|
294
|
+
outline.style.display = 'block';
|
|
295
|
+
outline.style.top = \`\${rect.top + window.scrollY - 4}px\`;
|
|
296
|
+
outline.style.left = \`\${rect.left + window.scrollX - 4}px\`;
|
|
297
|
+
outline.style.width = \`\${rect.width + 8}px\`;
|
|
298
|
+
outline.style.height = \`\${rect.height + 8}px\`;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
function hideSelector() {
|
|
302
|
+
outline.style.display = 'none';
|
|
303
|
+
selectedElement = null;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
widgets.forEach(el => {
|
|
307
|
+
el.addEventListener('mouseenter', () => {
|
|
308
|
+
clearTimeout(hoverTimeout);
|
|
309
|
+
showSelector(el);
|
|
310
|
+
});
|
|
311
|
+
|
|
312
|
+
el.addEventListener('mouseleave', () => {
|
|
313
|
+
hoverTimeout = setTimeout(() => {
|
|
314
|
+
const hovered = document.querySelector(':hover');
|
|
315
|
+
if (!outline.contains(hovered) && hovered !== el) hideSelector();
|
|
316
|
+
}, 50);
|
|
43
317
|
});
|
|
44
318
|
});
|
|
45
|
-
}
|
|
46
319
|
|
|
47
|
-
|
|
48
|
-
|
|
320
|
+
outline.addEventListener('mouseenter', () => clearTimeout(hoverTimeout));
|
|
321
|
+
outline.addEventListener('mouseleave', () => {
|
|
322
|
+
hoverTimeout = setTimeout(hideSelector, 50);
|
|
323
|
+
});
|
|
49
324
|
|
|
325
|
+
// أزرار التحكم
|
|
326
|
+
const btnActions = {
|
|
327
|
+
'btn-edit': el => alert(\`تحرير العنصر: \${el.getAttribute('widget-id')}\`),
|
|
328
|
+
'btn-copy': el => alert(\`نسخ العنصر: \${el.getAttribute('widget-id')}\`),
|
|
329
|
+
'btn-settings': el => alert(\`إعدادات العنصر: \${el.getAttribute('widget-id')}\`),
|
|
330
|
+
'btn-delete': el => {
|
|
331
|
+
if (confirm('هل أنت متأكد من حذف هذا العنصر؟')) {
|
|
332
|
+
el.remove();
|
|
333
|
+
hideSelector();
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
};
|
|
337
|
+
|
|
338
|
+
Object.entries(btnActions).forEach(([id, fn]) => {
|
|
339
|
+
const btn = document.getElementById(id);
|
|
340
|
+
btn?.addEventListener('click', e => {
|
|
341
|
+
e.stopPropagation();
|
|
342
|
+
if (selectedElement) fn(selectedElement);
|
|
343
|
+
});
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
// تحديث موقع outline عند scroll
|
|
347
|
+
window.addEventListener('scroll', () => {
|
|
348
|
+
if (!selectedElement || outline.style.display === 'none') return;
|
|
349
|
+
const rect = selectedElement.getBoundingClientRect();
|
|
350
|
+
outline.style.top = \`\${rect.top + window.scrollY - 4}px\`;
|
|
351
|
+
outline.style.left = \`\${rect.left + window.scrollX - 4}px\`;
|
|
352
|
+
outline.style.width = \`\${rect.width + 8}px\`;
|
|
353
|
+
outline.style.height = \`\${rect.height + 8}px\`;
|
|
354
|
+
});
|
|
355
|
+
|
|
356
|
+
// التعامل مع روابط iframe
|
|
357
|
+
function attachIframeLinkListeners(root = document) {
|
|
358
|
+
const links = root.querySelectorAll("a");
|
|
359
|
+
links.forEach(link => {
|
|
360
|
+
if (link.dataset._iframeHandled) return;
|
|
361
|
+
link.dataset._iframeHandled = "true";
|
|
362
|
+
|
|
363
|
+
link.addEventListener("click", function (e) {
|
|
364
|
+
const href = link.getAttribute("href");
|
|
365
|
+
if (!href || href === "#") return;
|
|
366
|
+
e.preventDefault();
|
|
367
|
+
e.stopPropagation();
|
|
368
|
+
window.parent.postMessage({ type: "iframeLinkClick", href }, "*");
|
|
369
|
+
});
|
|
370
|
+
});
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
attachIframeLinkListeners();
|
|
50
374
|
const observer = new MutationObserver(() => attachIframeLinkListeners());
|
|
51
375
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
52
376
|
});
|
|
@@ -45,7 +45,7 @@ exports.default = new (class WidgetExtension {
|
|
|
45
45
|
context: ctx.context,
|
|
46
46
|
globals: ctx.globals,
|
|
47
47
|
widget: {
|
|
48
|
-
id: widget.
|
|
48
|
+
id: widget._id,
|
|
49
49
|
type: widget.widget,
|
|
50
50
|
data: widget.data,
|
|
51
51
|
blocks: widget.blocks ?? [],
|
|
@@ -57,7 +57,7 @@ exports.default = new (class WidgetExtension {
|
|
|
57
57
|
}
|
|
58
58
|
if (isIframe) {
|
|
59
59
|
renderedWidgets.push(`
|
|
60
|
-
<section widget-id="${widget.
|
|
60
|
+
<section widget-id="${widget._id}" id="qumra-widget-id-${widget._id}">
|
|
61
61
|
${html}
|
|
62
62
|
</section>
|
|
63
63
|
`);
|