ts-glitter 21.4.5 → 21.4.7
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.
- package/lowcode/Entry.js +18 -18
- package/lowcode/Entry.ts +18 -19
- package/lowcode/glitterBundle/html-component/global-widget.js +162 -136
- package/lowcode/glitterBundle/html-component/global-widget.ts +430 -382
- package/lowcode/public-components/blogs/blogs-01.js +149 -142
- package/lowcode/public-components/blogs/blogs-01.ts +25 -17
- package/package.json +1 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import {GVC} from
|
|
2
|
-
import {Storage} from
|
|
1
|
+
import { GVC } from '../GVController.js';
|
|
2
|
+
import { Storage } from '../helper/storage.js';
|
|
3
3
|
import { ApiPageConfig } from '../../api/pageConfig.js';
|
|
4
|
-
|
|
4
|
+
|
|
5
5
|
enum ViewType {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
mobile = 'mobile',
|
|
7
|
+
desktop = 'desktop',
|
|
8
|
+
def = 'def',
|
|
9
9
|
}
|
|
10
|
+
|
|
10
11
|
export interface OptionsItem {
|
|
11
12
|
key: string;
|
|
12
13
|
value: string;
|
|
@@ -14,159 +15,172 @@ export interface OptionsItem {
|
|
|
14
15
|
image?: string;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
const html = String.raw
|
|
18
|
+
const html = String.raw;
|
|
18
19
|
|
|
19
20
|
export class GlobalWidget {
|
|
20
|
-
|
|
21
|
-
}
|
|
21
|
+
constructor() {}
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
public static glitter_view_type = 'def';
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
return {
|
|
32
|
-
bind: id,
|
|
33
|
-
view: () => {
|
|
34
|
-
GlobalWidget.glitter_view_type = GlobalWidget.glitter_view_type ?? 'def'
|
|
35
|
-
return html`
|
|
36
|
-
<h3 class="my-auto tx_title me-2 ms-2 " style="white-space: nowrap;font-size: 16px;">
|
|
37
|
-
元件顯示樣式</h3>
|
|
38
|
-
<div style="background:#f1f1f1;border-radius:10px;"
|
|
39
|
-
class="d-flex align-items-center justify-content-center p-1 ">
|
|
40
|
-
${[
|
|
41
|
-
{
|
|
42
|
-
icon: 'fa-regular fa-border-all guide-user-editor-5-back',
|
|
43
|
-
type: 'def',
|
|
44
|
-
title: '預設樣式'
|
|
45
|
-
},
|
|
46
|
-
{icon: 'fa-regular fa-desktop', type: "desktop", title: '電腦版'},
|
|
47
|
-
{icon: 'fa-regular fa-mobile guide-user-editor-5', type: "mobile", title: '手機版'},
|
|
48
|
-
].map((dd) => {
|
|
49
|
-
if (dd.type === GlobalWidget.glitter_view_type) {
|
|
50
|
-
return html`
|
|
51
|
-
<div
|
|
52
|
-
class="d-flex align-items-center justify-content-center bg-white"
|
|
53
|
-
style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
|
|
54
|
-
data-bs-toggle="tooltip" data-bs-placement="top"
|
|
55
|
-
data-bs-custom-class="custom-tooltip"
|
|
56
|
-
data-bs-title="${dd.title}">
|
|
57
|
-
<i class="${dd.icon}"></i>
|
|
58
|
-
</div>`;
|
|
59
|
-
} else {
|
|
60
|
-
return html`
|
|
61
|
-
<div
|
|
62
|
-
class="d-flex align-items-center justify-content-center"
|
|
63
|
-
style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
|
|
64
|
-
onclick="${gvc.event(() => {
|
|
65
|
-
GlobalWidget.glitter_view_type = dd.type;
|
|
66
|
-
if (dd.type !== 'def') {
|
|
67
|
-
Storage.view_type = dd.type as any
|
|
68
|
-
} else {
|
|
69
|
-
Storage.view_type = 'desktop'
|
|
70
|
-
}
|
|
71
|
-
refresh(dd.type as any);
|
|
72
|
-
gvc.glitter.share.loading_dialog.dataLoading({
|
|
73
|
-
text: '模組加載中...',
|
|
74
|
-
visible: true
|
|
75
|
-
})
|
|
76
|
-
gvc.notifyDataChange(['docs-container', id])
|
|
77
|
-
})}"
|
|
78
|
-
data-bs-toggle="tooltip" data-bs-placement="top"
|
|
79
|
-
data-bs-custom-class="custom-tooltip"
|
|
80
|
-
data-bs-title="${dd.title}"
|
|
81
|
-
>
|
|
82
|
-
<i class="${dd.icon}"></i>
|
|
83
|
-
</div>`;
|
|
84
|
-
}
|
|
85
|
-
})
|
|
86
|
-
.join('')}
|
|
87
|
-
</div>`
|
|
88
|
-
},
|
|
89
|
-
divCreate: {
|
|
90
|
-
class: `${(gvc.glitter.getUrlParameter('device') === 'mobile') ? `d-none ` : `d-flex`} align-items-center border-bottom mx-n2 mt-n2 p-2 guide-user-editor-4`,
|
|
91
|
-
style: ``
|
|
92
|
-
},
|
|
93
|
-
onCreate: () => {
|
|
94
|
-
$('.tooltip').remove();
|
|
95
|
-
($('[data-bs-toggle="tooltip"]') as any).tooltip();
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
})
|
|
25
|
+
public static showCaseBar(gvc: GVC, widget: any, refresh: (data: string) => void) {
|
|
26
|
+
if (
|
|
27
|
+
['mobile', 'desktop'].includes(gvc.glitter.getCookieByName('ViewType')) &&
|
|
28
|
+
GlobalWidget.glitter_view_type !== 'def'
|
|
29
|
+
) {
|
|
30
|
+
GlobalWidget.glitter_view_type = gvc.glitter.getCookieByName('ViewType');
|
|
99
31
|
}
|
|
32
|
+
return gvc.bindView(() => {
|
|
33
|
+
const id = gvc.glitter.getUUID();
|
|
34
|
+
return {
|
|
35
|
+
bind: id,
|
|
36
|
+
view: () => {
|
|
37
|
+
GlobalWidget.glitter_view_type = GlobalWidget.glitter_view_type ?? 'def';
|
|
38
|
+
return html` <h3 class="my-auto tx_title me-2 ms-2 " style="white-space: nowrap;font-size: 16px;">
|
|
39
|
+
元件顯示樣式
|
|
40
|
+
</h3>
|
|
41
|
+
<div
|
|
42
|
+
style="background:#f1f1f1;border-radius:10px;"
|
|
43
|
+
class="d-flex align-items-center justify-content-center p-1 "
|
|
44
|
+
>
|
|
45
|
+
${[
|
|
46
|
+
{
|
|
47
|
+
icon: 'fa-regular fa-border-all guide-user-editor-5-back',
|
|
48
|
+
type: 'def',
|
|
49
|
+
title: '預設樣式',
|
|
50
|
+
},
|
|
51
|
+
{ icon: 'fa-regular fa-desktop', type: 'desktop', title: '電腦版' },
|
|
52
|
+
{ icon: 'fa-regular fa-mobile guide-user-editor-5', type: 'mobile', title: '手機版' },
|
|
53
|
+
]
|
|
54
|
+
.map(dd => {
|
|
55
|
+
if (dd.type === GlobalWidget.glitter_view_type) {
|
|
56
|
+
return html` <div
|
|
57
|
+
class="d-flex align-items-center justify-content-center bg-white"
|
|
58
|
+
style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
|
|
59
|
+
data-bs-toggle="tooltip"
|
|
60
|
+
data-bs-placement="top"
|
|
61
|
+
data-bs-custom-class="custom-tooltip"
|
|
62
|
+
data-bs-title="${dd.title}"
|
|
63
|
+
>
|
|
64
|
+
<i class="${dd.icon}"></i>
|
|
65
|
+
</div>`;
|
|
66
|
+
} else {
|
|
67
|
+
return html` <div
|
|
68
|
+
class="d-flex align-items-center justify-content-center"
|
|
69
|
+
style="height:36px;width:36px;border-radius:10px;cursor:pointer;color:#151515;"
|
|
70
|
+
onclick="${gvc.event(() => {
|
|
71
|
+
GlobalWidget.glitter_view_type = dd.type;
|
|
72
|
+
if (dd.type !== 'def') {
|
|
73
|
+
Storage.view_type = dd.type as any;
|
|
74
|
+
} else {
|
|
75
|
+
Storage.view_type = 'desktop';
|
|
76
|
+
}
|
|
77
|
+
refresh(dd.type as any);
|
|
78
|
+
gvc.glitter.share.loading_dialog.dataLoading({
|
|
79
|
+
text: '模組加載中...',
|
|
80
|
+
visible: true,
|
|
81
|
+
});
|
|
82
|
+
gvc.notifyDataChange(['docs-container', id]);
|
|
83
|
+
})}"
|
|
84
|
+
data-bs-toggle="tooltip"
|
|
85
|
+
data-bs-placement="top"
|
|
86
|
+
data-bs-custom-class="custom-tooltip"
|
|
87
|
+
data-bs-title="${dd.title}"
|
|
88
|
+
>
|
|
89
|
+
<i class="${dd.icon}"></i>
|
|
90
|
+
</div>`;
|
|
91
|
+
}
|
|
92
|
+
})
|
|
93
|
+
.join('')}
|
|
94
|
+
</div>`;
|
|
95
|
+
},
|
|
96
|
+
divCreate: {
|
|
97
|
+
class: `${gvc.glitter.getUrlParameter('device') === 'mobile' ? `d-none ` : `d-flex`} align-items-center border-bottom mx-n2 mt-n2 p-2 guide-user-editor-4`,
|
|
98
|
+
style: ``,
|
|
99
|
+
},
|
|
100
|
+
onCreate: () => {
|
|
101
|
+
$('.tooltip').remove();
|
|
102
|
+
($('[data-bs-toggle="tooltip"]') as any).tooltip();
|
|
103
|
+
},
|
|
104
|
+
};
|
|
105
|
+
});
|
|
106
|
+
}
|
|
100
107
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
108
|
+
public static initialShowCaseData(obj: { widget: any; gvc: GVC }) {
|
|
109
|
+
['mobile', 'desktop'].map(d2 => {
|
|
110
|
+
obj.widget[d2] = obj.widget[d2] ?? { refer: 'def' };
|
|
111
|
+
if (obj.widget[d2].refer === 'custom') {
|
|
112
|
+
obj.widget[d2].data = obj.widget[d2].data ?? JSON.parse(JSON.stringify(obj.widget.data));
|
|
113
|
+
const cp = JSON.parse(JSON.stringify(obj.widget));
|
|
114
|
+
cp['mobile'] = undefined;
|
|
115
|
+
cp['desktop'] = undefined;
|
|
116
|
+
cp.data = obj.widget[d2].data;
|
|
117
|
+
cp.data.setting = obj.widget.data.setting;
|
|
118
|
+
cp.refer = obj.widget[d2].refer;
|
|
119
|
+
obj.widget[d2] = cp;
|
|
120
|
+
obj.widget[d2].refreshComponent = obj.widget.refreshComponent;
|
|
121
|
+
delete obj.widget[d2].formData;
|
|
122
|
+
delete obj.widget[d2].storage;
|
|
123
|
+
delete obj.widget[d2].share;
|
|
124
|
+
delete obj.widget[d2].bundle;
|
|
125
|
+
!obj.widget[d2].formData &&
|
|
126
|
+
Object.defineProperty(obj.widget[d2], 'formData', {
|
|
127
|
+
get: function () {
|
|
128
|
+
return obj.widget.formData;
|
|
129
|
+
},
|
|
130
|
+
});
|
|
131
|
+
!obj.widget[d2].storage &&
|
|
132
|
+
Object.defineProperty(obj.widget[d2], 'storage', {
|
|
133
|
+
get: function () {
|
|
134
|
+
return obj.widget.storage;
|
|
135
|
+
},
|
|
105
136
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
cp.refer = obj.widget[d2].refer;
|
|
116
|
-
obj.widget[d2] = cp;
|
|
117
|
-
obj.widget[d2].refreshComponent = obj.widget.refreshComponent
|
|
118
|
-
delete obj.widget[d2].formData;
|
|
119
|
-
delete obj.widget[d2].storage;
|
|
120
|
-
delete obj.widget[d2].share;
|
|
121
|
-
delete obj.widget[d2].bundle;
|
|
122
|
-
(!obj.widget[d2].formData) && Object.defineProperty(obj.widget[d2], 'formData', {
|
|
123
|
-
get: function () {
|
|
124
|
-
return obj.widget.formData;
|
|
125
|
-
}
|
|
126
|
-
});
|
|
127
|
-
(!obj.widget[d2].storage) && Object.defineProperty(obj.widget[d2], 'storage', {
|
|
128
|
-
get: function () {
|
|
129
|
-
return obj.widget.storage;
|
|
130
|
-
},
|
|
137
|
+
set(v) {
|
|
138
|
+
obj.widget.storage = v;
|
|
139
|
+
},
|
|
140
|
+
});
|
|
141
|
+
!obj.widget[d2].share &&
|
|
142
|
+
Object.defineProperty(obj.widget[d2], 'share', {
|
|
143
|
+
get: function () {
|
|
144
|
+
return obj.widget.share;
|
|
145
|
+
},
|
|
131
146
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
147
|
+
set(v) {
|
|
148
|
+
obj.widget.share = v;
|
|
149
|
+
},
|
|
150
|
+
});
|
|
151
|
+
!obj.widget[d2].bundle &&
|
|
152
|
+
Object.defineProperty(obj.widget[d2], 'bundle', {
|
|
153
|
+
get: function () {
|
|
154
|
+
return obj.widget.bundle;
|
|
155
|
+
},
|
|
140
156
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
157
|
+
set(v) {
|
|
158
|
+
obj.widget.bundle = v;
|
|
159
|
+
},
|
|
160
|
+
});
|
|
161
|
+
obj.widget[d2].editorEvent = obj.widget.editorEvent;
|
|
162
|
+
obj.widget[d2].global = obj.widget.global ?? [];
|
|
163
|
+
obj.widget[d2].global.gvc = obj.gvc;
|
|
164
|
+
obj.widget[d2].global.pageConfig = obj.widget.page_config;
|
|
165
|
+
obj.widget[d2].global.appConfig = obj.widget.app_config;
|
|
166
|
+
obj.widget[d2].globalColor = function (key: string, index: number) {
|
|
167
|
+
return `@{{theme_color.${index}.${key}}}`;
|
|
168
|
+
};
|
|
169
|
+
} else if (obj.widget[d2].refer === 'hide') {
|
|
170
|
+
obj.widget[d2] = { refer: 'hide' };
|
|
171
|
+
} else {
|
|
172
|
+
obj.widget[d2] = { refer: obj.widget[d2].refer };
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
}
|
|
149
176
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
obj.widget[d2].global.gvc = obj.gvc;
|
|
157
|
-
obj.widget[d2].global.pageConfig = obj.widget.page_config;
|
|
158
|
-
obj.widget[d2].global.appConfig = obj.widget.app_config;
|
|
159
|
-
obj.widget[d2].globalColor = function (key: string, index: number) {
|
|
160
|
-
return `@{{theme_color.${index}.${key}}}`;
|
|
161
|
-
};
|
|
162
|
-
} else if (obj.widget[d2].refer === 'hide') {
|
|
163
|
-
obj.widget[d2] = {refer: 'hide'}
|
|
164
|
-
} else {
|
|
165
|
-
obj.widget[d2] = {refer: obj.widget[d2].refer}
|
|
166
|
-
}
|
|
167
|
-
})
|
|
177
|
+
static grayButton(text: string, event: string, obj?: { icon?: string; textStyle?: string; class?: string }) {
|
|
178
|
+
return html` <button class="btn btn-gray ${obj?.class || ''}" type="button" onclick="${event}">
|
|
179
|
+
<i class="${obj && obj.icon && obj.icon.length > 0 ? obj.icon : 'd-none'}" style="color: #393939"></i>
|
|
180
|
+
${text.length > 0 ? html`<span class="tx_700" style="${obj?.textStyle ?? ''}">${text}</span>` : ''}
|
|
181
|
+
</button>`;
|
|
182
|
+
}
|
|
168
183
|
|
|
169
|
-
}
|
|
170
184
|
static select(obj: {
|
|
171
185
|
gvc: GVC;
|
|
172
186
|
callback: (value: any) => void;
|
|
@@ -182,83 +196,88 @@ export class GlobalWidget {
|
|
|
182
196
|
class="c_select c_select_w_100"
|
|
183
197
|
style="${obj.style ?? ''}; ${obj.readonly ? 'background: #f7f7f7;' : ''}"
|
|
184
198
|
onchange="${obj.gvc.event(e => {
|
|
185
|
-
|
|
186
|
-
|
|
199
|
+
obj.callback(e.value);
|
|
200
|
+
})}"
|
|
187
201
|
${obj.readonly ? 'disabled' : ''}
|
|
188
202
|
>
|
|
189
203
|
${obj.gvc.map(
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
204
|
+
obj.options.map(
|
|
205
|
+
opt =>
|
|
206
|
+
html` <option class="c_select_option" value="${opt.key}" ${obj.default === opt.key ? 'selected' : ''}>
|
|
193
207
|
${opt.value}
|
|
194
208
|
</option>`
|
|
195
|
-
|
|
196
|
-
|
|
209
|
+
)
|
|
210
|
+
)}
|
|
197
211
|
${(obj.options as any).find((opt: any) => {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
212
|
+
return obj.default === opt.key;
|
|
213
|
+
})
|
|
214
|
+
? ``
|
|
215
|
+
: `<option class="d-none" selected>${obj.place_holder || `請選擇項目`}</option>`}
|
|
202
216
|
</select>`;
|
|
203
217
|
}
|
|
204
|
-
public static switchButton(gvc: GVC, def: boolean, callback: (value: boolean) => void) {
|
|
205
|
-
return html`
|
|
206
|
-
<div class="form-check form-switch d-flex align-items-center my-0" style=" cursor: pointer;">
|
|
207
|
-
<input
|
|
208
|
-
class="form-check-input"
|
|
209
|
-
type="checkbox"
|
|
210
|
-
onchange="${gvc.event((e) => {
|
|
211
|
-
callback(e.checked);
|
|
212
|
-
})}"
|
|
213
|
-
style="height:17px;width:30px;"
|
|
214
|
-
${def ? `checked` : ``}
|
|
215
|
-
/>
|
|
216
|
-
</div>`;
|
|
217
|
-
}
|
|
218
218
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
219
|
+
public static switchButton(gvc: GVC, def: boolean, callback: (value: boolean) => void) {
|
|
220
|
+
return html` <div class="form-check form-switch d-flex align-items-center my-0" style=" cursor: pointer;">
|
|
221
|
+
<input
|
|
222
|
+
class="form-check-input"
|
|
223
|
+
type="checkbox"
|
|
224
|
+
onchange="${gvc.event(e => {
|
|
225
|
+
callback(e.checked);
|
|
226
|
+
})}"
|
|
227
|
+
style="height:17px;width:30px;"
|
|
228
|
+
${def ? `checked` : ``}
|
|
229
|
+
/>
|
|
230
|
+
</div>`;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
public static showCaseEditor(obj: {
|
|
234
|
+
gvc: GVC;
|
|
235
|
+
widget: any;
|
|
236
|
+
view: (widget: any, type: any) => string;
|
|
237
|
+
custom_edit?: boolean;
|
|
238
|
+
toggle_visible?: (result: boolean) => void;
|
|
239
|
+
hide_selector?: boolean;
|
|
240
|
+
hide_ai?: boolean;
|
|
241
|
+
}) {
|
|
242
|
+
const outer_id = obj.gvc.glitter.getUUID();
|
|
229
243
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
244
|
+
const glitter = obj.gvc.glitter;
|
|
245
|
+
const gvc = obj.gvc;
|
|
246
|
+
return gvc.bindView(() => {
|
|
247
|
+
return {
|
|
248
|
+
bind: outer_id,
|
|
249
|
+
view: () => {
|
|
250
|
+
return ``;
|
|
251
|
+
},
|
|
252
|
+
divCreate: {
|
|
253
|
+
class: `${outer_id}`,
|
|
254
|
+
},
|
|
255
|
+
onCreate: async () => {
|
|
256
|
+
let civ: string[] = [];
|
|
257
|
+
const is_sub_page = ['pages/', 'hidden/', 'shop/'].find(dd => {
|
|
258
|
+
return (obj.gvc.glitter.getUrlParameter('page') || '').startsWith(dd);
|
|
259
|
+
});
|
|
260
|
+
if (!glitter.share.c_header_list) {
|
|
261
|
+
glitter.share.c_header_list = (
|
|
262
|
+
await ApiPageConfig.getPageTemplate({
|
|
248
263
|
template_from: 'all',
|
|
249
264
|
page: '0',
|
|
250
265
|
limit: '3000',
|
|
251
266
|
type: 'module',
|
|
252
267
|
tag: '標頭元件',
|
|
253
|
-
})
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
268
|
+
})
|
|
269
|
+
).response.result.data;
|
|
270
|
+
}
|
|
271
|
+
if (
|
|
272
|
+
is_sub_page &&
|
|
273
|
+
glitter.share.c_header_list.find((d1: any) => {
|
|
274
|
+
return d1.tag === obj.widget.data.tag && d1.appName === obj.widget.data.refer_app;
|
|
275
|
+
})
|
|
276
|
+
) {
|
|
277
|
+
glitter.share.header_refer = glitter.share.header_refer || 'def';
|
|
278
|
+
civ.push(`<div class="mt-2 fs-6 mb-2" style="color: black;margin-bottom: 5px;" >標頭樣式參照</div>`);
|
|
279
|
+
civ.push(
|
|
280
|
+
GlobalWidget.select({
|
|
262
281
|
gvc: gvc,
|
|
263
282
|
callback: (text: any) => {
|
|
264
283
|
glitter.share.header_refer = text;
|
|
@@ -275,166 +294,196 @@ export class GlobalWidget {
|
|
|
275
294
|
value: '全站預設樣式',
|
|
276
295
|
},
|
|
277
296
|
],
|
|
278
|
-
})
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
297
|
+
})
|
|
298
|
+
);
|
|
299
|
+
|
|
300
|
+
if (glitter.share.header_refer === 'def') {
|
|
301
|
+
(window.parent as any).document.querySelector('.' + outer_id).outerHTML = civ.join('');
|
|
302
|
+
return;
|
|
303
|
+
} else {
|
|
304
|
+
// civ.push(`<div class="my-2"></div>`);
|
|
305
|
+
// civ.push(
|
|
306
|
+
// this.grayButton(
|
|
307
|
+
// '標頭選單參照',
|
|
308
|
+
// gvc.event(() => {
|
|
309
|
+
// gvc.glitter.getModule(`${gvc.glitter.root_path}cms-plugin/menus-setting.ts`, menu => {
|
|
310
|
+
// gvc.glitter.innerDialog(menu.main(gvc, obj.widget), 'menus-setting');
|
|
311
|
+
// });
|
|
312
|
+
// }),
|
|
313
|
+
// {
|
|
314
|
+
// class: 'w-100',
|
|
315
|
+
// }
|
|
316
|
+
// )
|
|
317
|
+
// );
|
|
283
318
|
}
|
|
284
|
-
civ.push(
|
|
285
|
-
|
|
319
|
+
civ.push(`<div class="mx-n2 border-top my-2"></div>`);
|
|
320
|
+
}
|
|
321
|
+
civ.push(
|
|
322
|
+
(() => {
|
|
323
|
+
GlobalWidget.glitter_view_type = ViewType.desktop;
|
|
286
324
|
if (Storage.view_type === 'mobile') {
|
|
287
|
-
GlobalWidget.glitter_view_type = ViewType.mobile
|
|
325
|
+
GlobalWidget.glitter_view_type = ViewType.mobile;
|
|
288
326
|
}
|
|
289
327
|
|
|
290
|
-
if (
|
|
291
|
-
|
|
328
|
+
if (
|
|
329
|
+
['mobile', 'desktop'].includes(obj.gvc.glitter.getCookieByName('ViewType')) &&
|
|
330
|
+
GlobalWidget.glitter_view_type !== 'def'
|
|
331
|
+
) {
|
|
332
|
+
GlobalWidget.glitter_view_type = obj.gvc.glitter.getCookieByName('ViewType');
|
|
292
333
|
}
|
|
293
334
|
|
|
294
|
-
if (
|
|
295
|
-
return obj.view(obj.widget, 'def')
|
|
335
|
+
if (GlobalWidget.glitter_view_type === 'def' || obj.gvc.glitter.getUrlParameter('device') === 'mobile') {
|
|
336
|
+
return obj.view(obj.widget, 'def');
|
|
296
337
|
} else {
|
|
297
|
-
const id = obj.gvc.glitter.getUUID()
|
|
338
|
+
const id = obj.gvc.glitter.getUUID();
|
|
298
339
|
const gvc = obj.gvc;
|
|
299
|
-
GlobalWidget.initialShowCaseData({widget: obj.widget, gvc: obj.gvc})
|
|
300
|
-
let select_bt = 'form_editor'
|
|
340
|
+
GlobalWidget.initialShowCaseData({ widget: obj.widget, gvc: obj.gvc });
|
|
341
|
+
let select_bt = 'form_editor';
|
|
301
342
|
|
|
302
343
|
function ai_switch() {
|
|
303
|
-
if(is_sub_page){
|
|
304
|
-
return
|
|
344
|
+
if (is_sub_page) {
|
|
345
|
+
return ``;
|
|
305
346
|
}
|
|
306
347
|
return `<div class="d-flex align-items-center shadow border-bottom mt-n2"
|
|
307
348
|
style="">
|
|
308
349
|
${(() => {
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
350
|
+
const list = [
|
|
351
|
+
{
|
|
352
|
+
key: 'form_editor',
|
|
353
|
+
label: `元件設計`,
|
|
354
|
+
icon: `fa-regular fa-pencil`,
|
|
355
|
+
},
|
|
356
|
+
{
|
|
357
|
+
key: 'ai_editor',
|
|
358
|
+
label: 'AI 設計',
|
|
359
|
+
icon: `fa-regular fa-wand-magic-sparkles`,
|
|
360
|
+
},
|
|
361
|
+
];
|
|
362
|
+
return list
|
|
363
|
+
.map(dd => {
|
|
364
|
+
if (select_bt === dd.key) {
|
|
365
|
+
return html` <div
|
|
366
|
+
class="d-flex align-items-center justify-content-center fw-bold px-2 py-2 fw-500 select-label-ai-message_ fs-6"
|
|
367
|
+
style="gap:5px;"
|
|
368
|
+
>
|
|
369
|
+
<i class="${dd.icon} "></i>${dd.label}
|
|
370
|
+
</div>`;
|
|
371
|
+
} else {
|
|
372
|
+
return html` <div
|
|
373
|
+
class="d-flex align-items-center justify-content-center fw-bold px-2 py-2 fw-500 select-btn-ai-message_ fs-6"
|
|
374
|
+
style="gap:5px;"
|
|
375
|
+
onclick="${gvc.event(() => {
|
|
376
|
+
select_bt = dd.key;
|
|
377
|
+
gvc.notifyDataChange(id);
|
|
378
|
+
})}"
|
|
379
|
+
>
|
|
380
|
+
<i class="${dd.icon}"></i>${dd.label}
|
|
381
|
+
</div>`;
|
|
382
|
+
}
|
|
383
|
+
})
|
|
384
|
+
.join(
|
|
385
|
+
`<div class="border-end" style="width:1px;height:39px;"></div>`
|
|
386
|
+
);
|
|
387
|
+
})()}
|
|
388
|
+
</div>`;
|
|
345
389
|
}
|
|
346
390
|
|
|
347
391
|
function selector(widget: any, key: string) {
|
|
348
392
|
if (obj.hide_selector) {
|
|
349
|
-
return
|
|
393
|
+
return ``;
|
|
350
394
|
}
|
|
351
|
-
return html`
|
|
352
|
-
|
|
353
|
-
style="">${
|
|
354
|
-
[
|
|
395
|
+
return html` <div class=" mx-n2" style="">
|
|
396
|
+
${[
|
|
355
397
|
...(() => {
|
|
356
398
|
if (obj.hide_ai) {
|
|
357
|
-
return []
|
|
399
|
+
return [];
|
|
358
400
|
} else {
|
|
359
|
-
return [ai_switch()]
|
|
401
|
+
return [ai_switch()];
|
|
360
402
|
}
|
|
361
403
|
})(),
|
|
362
404
|
obj.gvc.bindView(() => {
|
|
363
|
-
const id = gvc.glitter.getUUID()
|
|
405
|
+
const id = gvc.glitter.getUUID();
|
|
364
406
|
return {
|
|
365
407
|
bind: id,
|
|
366
408
|
view: () => {
|
|
367
|
-
return html`
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
409
|
+
return html` <div
|
|
410
|
+
class="my-auto tx_title fw-normal d-flex align-items-center"
|
|
411
|
+
style="white-space: nowrap;font-size: 16px;"
|
|
412
|
+
>
|
|
413
|
+
在${(() => {
|
|
414
|
+
if (GlobalWidget.glitter_view_type === 'mobile') {
|
|
415
|
+
return `手機`;
|
|
416
|
+
} else {
|
|
417
|
+
return `電腦`;
|
|
418
|
+
}
|
|
419
|
+
})()}版上${obj.widget[key].refer === 'hide' ? `不` : ``}顯示
|
|
420
|
+
</div>
|
|
421
|
+
${GlobalWidget.switchButton(obj.gvc, obj.widget[key].refer !== 'hide', bool => {
|
|
422
|
+
// vm.data.main = bool;
|
|
423
|
+
if (bool) {
|
|
424
|
+
obj.widget[key].refer = 'def';
|
|
425
|
+
} else {
|
|
426
|
+
obj.widget[key].refer = 'hide';
|
|
427
|
+
}
|
|
428
|
+
obj.toggle_visible && obj.toggle_visible(bool);
|
|
429
|
+
gvc.notifyDataChange(id);
|
|
430
|
+
setTimeout(() => {
|
|
431
|
+
obj.widget.refreshComponent();
|
|
432
|
+
}, 250);
|
|
433
|
+
})}`;
|
|
390
434
|
},
|
|
391
435
|
divCreate: {
|
|
392
436
|
class: `d-flex align-content-center px-3`,
|
|
393
|
-
style: `gap:10px;margin-bottom:18px;margin-top:13px
|
|
394
|
-
}
|
|
395
|
-
}
|
|
396
|
-
})
|
|
397
|
-
]
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
const id = gvc.glitter.getUUID()
|
|
406
|
-
return {
|
|
407
|
-
bind: id,
|
|
408
|
-
view: () => {
|
|
409
|
-
return `<div class="my-auto tx_title fw-normal d-flex align-items-center" style="white-space: nowrap;font-size: 16px;">顯示獨立樣式</div>
|
|
410
|
-
${GlobalWidget.switchButton(obj.gvc, obj.widget[key].refer === 'custom', (bool) => {
|
|
411
|
-
obj.widget[key].refer = (bool) ? `custom` : `def`;
|
|
412
|
-
if (obj.widget.refreshComponent) {
|
|
413
|
-
obj.widget.refreshComponent()
|
|
414
|
-
} else if (obj.widget.refreshAll) {
|
|
415
|
-
obj.widget.refreshAll()
|
|
416
|
-
}
|
|
417
|
-
})}`
|
|
418
|
-
},
|
|
419
|
-
divCreate: {
|
|
420
|
-
class: `d-flex align-content-center px-3`,
|
|
421
|
-
style: `gap:10px;margin-top:13px;`
|
|
422
|
-
}
|
|
423
|
-
}
|
|
424
|
-
}) + `<div class="px-3 pt-2" style="white-space: normal;word-break: break-all;color: #8D8D8D; font-size: 14px; font-weight: 400; ">透過設定獨立樣式在${(() => {
|
|
425
|
-
if (GlobalWidget.glitter_view_type === "mobile") {
|
|
426
|
-
return `手機`
|
|
437
|
+
style: `gap:10px;margin-bottom:18px;margin-top:13px;`,
|
|
438
|
+
},
|
|
439
|
+
};
|
|
440
|
+
}),
|
|
441
|
+
]
|
|
442
|
+
.concat(
|
|
443
|
+
(() => {
|
|
444
|
+
if (obj.widget[key].refer === 'hide') {
|
|
445
|
+
return [];
|
|
446
|
+
} else {
|
|
447
|
+
if (obj.custom_edit) {
|
|
448
|
+
return [];
|
|
427
449
|
} else {
|
|
428
|
-
return
|
|
450
|
+
return [
|
|
451
|
+
obj.gvc.bindView(() => {
|
|
452
|
+
const id = gvc.glitter.getUUID();
|
|
453
|
+
return {
|
|
454
|
+
bind: id,
|
|
455
|
+
view: () => {
|
|
456
|
+
return `<div class="my-auto tx_title fw-normal d-flex align-items-center" style="white-space: nowrap;font-size: 16px;">顯示獨立樣式</div>
|
|
457
|
+
${GlobalWidget.switchButton(obj.gvc, obj.widget[key].refer === 'custom', bool => {
|
|
458
|
+
obj.widget[key].refer = bool ? `custom` : `def`;
|
|
459
|
+
if (obj.widget.refreshComponent) {
|
|
460
|
+
obj.widget.refreshComponent();
|
|
461
|
+
} else if (obj.widget.refreshAll) {
|
|
462
|
+
obj.widget.refreshAll();
|
|
463
|
+
}
|
|
464
|
+
})}`;
|
|
465
|
+
},
|
|
466
|
+
divCreate: {
|
|
467
|
+
class: `d-flex align-content-center px-3`,
|
|
468
|
+
style: `gap:10px;margin-top:13px;`,
|
|
469
|
+
},
|
|
470
|
+
};
|
|
471
|
+
}) +
|
|
472
|
+
`<div class="px-3 pt-2" style="white-space: normal;word-break: break-all;color: #8D8D8D; font-size: 14px; font-weight: 400; ">透過設定獨立樣式在${(() => {
|
|
473
|
+
if (GlobalWidget.glitter_view_type === 'mobile') {
|
|
474
|
+
return `手機`;
|
|
475
|
+
} else {
|
|
476
|
+
return `電腦`;
|
|
477
|
+
}
|
|
478
|
+
})()}版上顯示特定設計效果</div>`,
|
|
479
|
+
`<div class="mx-n3" style="background: #DDD;height: 1px;"></div>`,
|
|
480
|
+
].join(`<div style="height:18px;"></div>`);
|
|
429
481
|
}
|
|
430
|
-
}
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
})()).join('<div class="my-3"></div>')
|
|
436
|
-
}
|
|
437
|
-
</div>`
|
|
482
|
+
}
|
|
483
|
+
})()
|
|
484
|
+
)
|
|
485
|
+
.join('<div class="my-3"></div>')}
|
|
486
|
+
</div>`;
|
|
438
487
|
}
|
|
439
488
|
|
|
440
489
|
return obj.gvc.bindView(() => {
|
|
@@ -443,66 +492,65 @@ ${GlobalWidget.switchButton(obj.gvc, obj.widget[key].refer === 'custom', (bool)
|
|
|
443
492
|
view: () => {
|
|
444
493
|
if (select_bt === 'ai_editor') {
|
|
445
494
|
return new Promise((resolve, reject) => {
|
|
446
|
-
gvc.glitter.getModule(
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
495
|
+
gvc.glitter.getModule(
|
|
496
|
+
gvc.glitter.root_path + 'cms-plugin/ai-generator/editor-ai.js',
|
|
497
|
+
EditorAi => {
|
|
498
|
+
resolve([`<div class="mx-n2">${ai_switch()}</div>`, EditorAi.view(gvc)].join(''));
|
|
499
|
+
}
|
|
500
|
+
);
|
|
501
|
+
});
|
|
450
502
|
}
|
|
451
503
|
const view = (() => {
|
|
452
504
|
try {
|
|
453
505
|
if (GlobalWidget.glitter_view_type === 'mobile') {
|
|
454
|
-
const view = [selector(obj.widget.mobile, 'mobile')]
|
|
506
|
+
const view = [selector(obj.widget.mobile, 'mobile')];
|
|
455
507
|
if (obj.widget.mobile.refer === 'custom') {
|
|
456
|
-
view.push(obj.view(obj.widget.mobile, 'mobile'))
|
|
508
|
+
view.push(obj.view(obj.widget.mobile, 'mobile'));
|
|
457
509
|
} else {
|
|
458
|
-
view.push(obj.view(obj.widget, 'def'))
|
|
510
|
+
view.push(obj.view(obj.widget, 'def'));
|
|
459
511
|
}
|
|
460
|
-
return view.join('')
|
|
512
|
+
return view.join('');
|
|
461
513
|
} else if (GlobalWidget.glitter_view_type === 'desktop') {
|
|
462
|
-
const view = [selector(obj.widget.desktop, 'desktop')]
|
|
514
|
+
const view = [selector(obj.widget.desktop, 'desktop')];
|
|
463
515
|
if (obj.widget.desktop.refer === 'custom') {
|
|
464
|
-
view.push(obj.view(obj.widget.desktop, 'desktop'))
|
|
516
|
+
view.push(obj.view(obj.widget.desktop, 'desktop'));
|
|
465
517
|
} else {
|
|
466
|
-
view.push(obj.view(obj.widget, 'def'))
|
|
518
|
+
view.push(obj.view(obj.widget, 'def'));
|
|
467
519
|
}
|
|
468
|
-
return view.join('')
|
|
520
|
+
return view.join('');
|
|
469
521
|
} else {
|
|
470
|
-
return obj.view(obj.widget, 'def')
|
|
522
|
+
return obj.view(obj.widget, 'def');
|
|
471
523
|
}
|
|
472
524
|
} catch (e) {
|
|
473
|
-
console.log(e)
|
|
474
|
-
return `${e}
|
|
525
|
+
console.log(e);
|
|
526
|
+
return `${e}`;
|
|
475
527
|
}
|
|
476
|
-
})()
|
|
477
|
-
return [view].join('')
|
|
478
|
-
}
|
|
479
|
-
}
|
|
480
|
-
})
|
|
528
|
+
})();
|
|
529
|
+
return [view].join('');
|
|
530
|
+
},
|
|
531
|
+
};
|
|
532
|
+
});
|
|
481
533
|
}
|
|
482
|
-
})()
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
}
|
|
486
|
-
}
|
|
487
|
-
}
|
|
534
|
+
})()
|
|
535
|
+
);
|
|
536
|
+
(window.parent as any).document.querySelector('.' + outer_id).outerHTML = civ.join('');
|
|
537
|
+
},
|
|
538
|
+
};
|
|
539
|
+
});
|
|
540
|
+
}
|
|
488
541
|
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
return obj.view(obj.widget.mobile)
|
|
502
|
-
} else if (obj.gvc.glitter.document.body.clientWidth >= 800 && obj.widget.desktop.refer === 'custom') {
|
|
503
|
-
return obj.view(obj.widget.desktop)
|
|
504
|
-
} else {
|
|
505
|
-
return obj.view(obj.widget)
|
|
506
|
-
}
|
|
542
|
+
public static showCaseData(obj: { gvc: GVC; widget: any; empty?: string; view: (widget: any) => string }) {
|
|
543
|
+
GlobalWidget.initialShowCaseData({ widget: obj.widget, gvc: obj.gvc });
|
|
544
|
+
if (obj.gvc.glitter.document.body.clientWidth < 800 && obj.widget.mobile.refer === 'hide') {
|
|
545
|
+
return obj.empty || '';
|
|
546
|
+
} else if (obj.gvc.glitter.document.body.clientWidth >= 800 && obj.widget.desktop.refer === 'hide') {
|
|
547
|
+
return obj.empty || '';
|
|
548
|
+
} else if (obj.gvc.glitter.document.body.clientWidth < 800 && obj.widget.mobile.refer === 'custom') {
|
|
549
|
+
return obj.view(obj.widget.mobile);
|
|
550
|
+
} else if (obj.gvc.glitter.document.body.clientWidth >= 800 && obj.widget.desktop.refer === 'custom') {
|
|
551
|
+
return obj.view(obj.widget.desktop);
|
|
552
|
+
} else {
|
|
553
|
+
return obj.view(obj.widget);
|
|
507
554
|
}
|
|
508
|
-
}
|
|
555
|
+
}
|
|
556
|
+
}
|