qumra-engine 2.0.91 → 2.0.93
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.
|
@@ -19,6 +19,246 @@ exports.default = new (class SeoExtension {
|
|
|
19
19
|
`;
|
|
20
20
|
if (isIframe) {
|
|
21
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>
|
|
22
262
|
<div id="selector-outline">
|
|
23
263
|
<div id="selector-toolbar">
|
|
24
264
|
<button class="control-btn btn-edit" title="تحرير" id="btn-edit">✏️</button>
|
|
@@ -84,14 +324,29 @@ exports.default = new (class SeoExtension {
|
|
|
84
324
|
|
|
85
325
|
// أزرار التحكم
|
|
86
326
|
const btnActions = {
|
|
87
|
-
'btn-edit': el =>
|
|
88
|
-
|
|
89
|
-
|
|
327
|
+
'btn-edit': el => {
|
|
328
|
+
window.parent.postMessage(
|
|
329
|
+
{ type: "widgetAction", action: "edit", widgetId: el.getAttribute("widget-id") },
|
|
330
|
+
"*"
|
|
331
|
+
);
|
|
332
|
+
},
|
|
333
|
+
'btn-copy': el => {
|
|
334
|
+
window.parent.postMessage(
|
|
335
|
+
{ type: "widgetAction", action: "copy", widgetId: el.getAttribute("widget-id") },
|
|
336
|
+
"*"
|
|
337
|
+
);
|
|
338
|
+
},
|
|
339
|
+
'btn-settings': el => {
|
|
340
|
+
window.parent.postMessage(
|
|
341
|
+
{ type: "widgetAction", action: "settings", widgetId: el.getAttribute("widget-id") },
|
|
342
|
+
"*"
|
|
343
|
+
);
|
|
344
|
+
},
|
|
90
345
|
'btn-delete': el => {
|
|
91
|
-
|
|
92
|
-
el.
|
|
93
|
-
|
|
94
|
-
|
|
346
|
+
window.parent.postMessage(
|
|
347
|
+
{ type: "widgetAction", action: "delete", widgetId: el.getAttribute("widget-id") },
|
|
348
|
+
"*"
|
|
349
|
+
);
|
|
95
350
|
}
|
|
96
351
|
};
|
|
97
352
|
|