ts-glitter 13.6.9 → 13.7.1
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 +1 -1
- package/lowcode/Entry.ts +1 -1
- package/lowcode/form-view/editor/color-theme-selector.js +50 -21
- package/lowcode/form-view/editor/color-theme-selector.ts +52 -26
- package/lowcode/jspage/function-page/main_editor.js +3 -0
- package/lowcode/jspage/function-page/main_editor.ts +3 -0
- package/lowcode/official_view_component/official/component.js +40 -24
- package/lowcode/official_view_component/official/component.ts +35 -21
- package/lowcode/public-components/headers/sy-02.js +1 -1
- package/lowcode/public-components/headers/sy-02.ts +2 -1
- package/lowcode/public-components/headers/sy-03.js +308 -0
- package/lowcode/public-components/headers/sy-03.ts +307 -0
- package/lowcode/public-components/headers/sy-04.js +2 -3
- package/lowcode/public-components/headers/sy-04.ts +2 -3
- package/package.json +1 -1
package/lowcode/Entry.js
CHANGED
|
@@ -59,7 +59,7 @@ export class Entry {
|
|
|
59
59
|
}
|
|
60
60
|
window.renderClock = (_a = window.renderClock) !== null && _a !== void 0 ? _a : clockF();
|
|
61
61
|
console.log(`Entry-time:`, window.renderClock.stop());
|
|
62
|
-
glitter.share.editerVersion = "V_13.
|
|
62
|
+
glitter.share.editerVersion = "V_13.7.1";
|
|
63
63
|
glitter.share.start = (new Date());
|
|
64
64
|
const vm = {
|
|
65
65
|
appConfig: [],
|
package/lowcode/Entry.ts
CHANGED
|
@@ -60,7 +60,7 @@ export class Entry {
|
|
|
60
60
|
}
|
|
61
61
|
(window as any).renderClock = (window as any).renderClock ?? clockF();
|
|
62
62
|
console.log(`Entry-time:`, (window as any).renderClock.stop());
|
|
63
|
-
glitter.share.editerVersion = "V_13.
|
|
63
|
+
glitter.share.editerVersion = "V_13.7.1";
|
|
64
64
|
glitter.share.start = (new Date());
|
|
65
65
|
const vm: {
|
|
66
66
|
appConfig: any;
|
|
@@ -4,15 +4,14 @@ import { EditorConfig } from '../../editor-config.js';
|
|
|
4
4
|
const html = String.raw;
|
|
5
5
|
export class ColorThemeSelector {
|
|
6
6
|
static main(cf) {
|
|
7
|
-
var _a;
|
|
8
|
-
const globalValue = cf.gvc.glitter.share.editorViewModel.appConfig;
|
|
9
|
-
globalValue.color_theme = (_a = globalValue.color_theme) !== null && _a !== void 0 ? _a : [];
|
|
10
|
-
const select = '0';
|
|
11
7
|
return cf.gvc.bindView(() => {
|
|
12
8
|
const id = cf.gvc.glitter.getUUID();
|
|
13
9
|
return {
|
|
14
10
|
bind: id,
|
|
15
11
|
view: () => {
|
|
12
|
+
var _a;
|
|
13
|
+
const globalValue = cf.gvc.glitter.share.editorViewModel.appConfig;
|
|
14
|
+
globalValue.color_theme = (_a = globalValue.color_theme) !== null && _a !== void 0 ? _a : [];
|
|
16
15
|
try {
|
|
17
16
|
if (typeof cf.widget.bundle.form_data[cf.widget.bundle.form_key] !== 'object') {
|
|
18
17
|
cf.widget.bundle.form_data[cf.widget.bundle.form_key] = {};
|
|
@@ -38,7 +37,7 @@ export class ColorThemeSelector {
|
|
|
38
37
|
.map((dd) => {
|
|
39
38
|
return html ` <div>
|
|
40
39
|
${[
|
|
41
|
-
html
|
|
40
|
+
html `<div
|
|
42
41
|
class="d-flex cursor_pointer"
|
|
43
42
|
style="gap:8px;"
|
|
44
43
|
onclick="${cf.gvc.event(() => {
|
|
@@ -109,11 +108,20 @@ export class ColorThemeSelector {
|
|
|
109
108
|
cf.gvc.notifyDataChange(id);
|
|
110
109
|
},
|
|
111
110
|
filter: (key) => {
|
|
112
|
-
if (
|
|
113
|
-
return
|
|
111
|
+
if (cf.widget.bundle.root_widget.find((dd) => {
|
|
112
|
+
return dd.data._color_editor_able !== undefined;
|
|
113
|
+
})) {
|
|
114
|
+
return cf.widget.bundle.root_widget.find((dd) => {
|
|
115
|
+
return dd.data._color_editor_able !== undefined;
|
|
116
|
+
}).data._color_editor_able.includes(key);
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
119
|
+
if (!cf.widget.bundle.root_widget) {
|
|
120
|
+
return true;
|
|
121
|
+
}
|
|
122
|
+
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
123
|
+
return inf.includes(`.${key}`) || inf.includes(`("${key}`) || inf.includes(`('${key}`) || inf.includes(`['${key}']`) || inf.includes(`["${key}"]`);
|
|
114
124
|
}
|
|
115
|
-
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
116
|
-
return inf.includes(`.${key}`) || inf.includes(`("${key}`) || inf.includes(`('${key}`) || inf.includes(`['${key}']`) || inf.includes(`["${key}"]`);
|
|
117
125
|
},
|
|
118
126
|
name: custom ? `自定義配色` : `配色${parseInt(select.id, 10) + 1}`,
|
|
119
127
|
data: custom ? select : globalValue.color_theme[parseInt(select.id, 10)],
|
|
@@ -121,6 +129,9 @@ export class ColorThemeSelector {
|
|
|
121
129
|
}),
|
|
122
130
|
title: '顏色編輯',
|
|
123
131
|
});
|
|
132
|
+
NormalPageEditor.closeEvent = () => {
|
|
133
|
+
cf.gvc.notifyDataChange(id);
|
|
134
|
+
};
|
|
124
135
|
})}">編輯
|
|
125
136
|
</div>
|
|
126
137
|
</div>
|
|
@@ -162,11 +173,20 @@ export class ColorThemeSelector {
|
|
|
162
173
|
cf.gvc.notifyDataChange(id);
|
|
163
174
|
},
|
|
164
175
|
filter: (key) => {
|
|
165
|
-
if (
|
|
166
|
-
return
|
|
176
|
+
if (cf.widget.bundle.root_widget.find((dd) => {
|
|
177
|
+
return dd.data._color_editor_able !== undefined;
|
|
178
|
+
})) {
|
|
179
|
+
return cf.widget.bundle.root_widget.find((dd) => {
|
|
180
|
+
return dd.data._color_editor_able !== undefined;
|
|
181
|
+
}).data._color_editor_able.includes(key);
|
|
182
|
+
}
|
|
183
|
+
else {
|
|
184
|
+
if (!cf.widget.bundle.root_widget) {
|
|
185
|
+
return true;
|
|
186
|
+
}
|
|
187
|
+
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
188
|
+
return (inf.includes(`.${key}`) || inf.includes(`("${key}`) || inf.includes(`('${key}`) || inf.includes(`['${key}']`) || inf.includes(`["${key}"]`));
|
|
167
189
|
}
|
|
168
|
-
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
169
|
-
return (inf.includes(`.${key}`) || inf.includes(`("${key}`) || inf.includes(`('${key}`) || inf.includes(`['${key}']`) || inf.includes(`["${key}"]`));
|
|
170
190
|
},
|
|
171
191
|
name: vm.name,
|
|
172
192
|
data: vm.data,
|
|
@@ -192,15 +212,24 @@ export class ColorThemeSelector {
|
|
|
192
212
|
cf.gvc.notifyDataChange(id);
|
|
193
213
|
},
|
|
194
214
|
filter: (key) => {
|
|
195
|
-
if (
|
|
196
|
-
return
|
|
215
|
+
if (cf.widget.bundle.root_widget.find((dd) => {
|
|
216
|
+
return dd.data._color_editor_able !== undefined;
|
|
217
|
+
})) {
|
|
218
|
+
return cf.widget.bundle.root_widget.find((dd) => {
|
|
219
|
+
return dd.data._color_editor_able !== undefined;
|
|
220
|
+
}).data._color_editor_able.includes(key);
|
|
221
|
+
}
|
|
222
|
+
else {
|
|
223
|
+
if (!cf.widget.bundle.root_widget) {
|
|
224
|
+
return true;
|
|
225
|
+
}
|
|
226
|
+
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
227
|
+
return (inf.includes(`.${key}`) ||
|
|
228
|
+
inf.includes(`("${key}`) ||
|
|
229
|
+
inf.includes(`('${key}`) ||
|
|
230
|
+
inf.includes(`['${key}']`) ||
|
|
231
|
+
inf.includes(`["${key}"]`));
|
|
197
232
|
}
|
|
198
|
-
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
199
|
-
return (inf.includes(`.${key}`) ||
|
|
200
|
-
inf.includes(`("${key}`) ||
|
|
201
|
-
inf.includes(`('${key}`) ||
|
|
202
|
-
inf.includes(`['${key}']`) ||
|
|
203
|
-
inf.includes(`["${key}"]`));
|
|
204
233
|
},
|
|
205
234
|
name: vm.name,
|
|
206
235
|
data: vm.data,
|
|
@@ -8,15 +8,15 @@ const html = String.raw;
|
|
|
8
8
|
|
|
9
9
|
export class ColorThemeSelector {
|
|
10
10
|
public static main(cf: { gvc: GVC; formData: any; widget: any; key: string; callback: (data: any) => void }) {
|
|
11
|
-
|
|
12
|
-
globalValue.color_theme = globalValue.color_theme ?? [];
|
|
13
|
-
const select = '0';
|
|
11
|
+
|
|
14
12
|
|
|
15
13
|
return cf.gvc.bindView(() => {
|
|
16
14
|
const id = cf.gvc.glitter.getUUID();
|
|
17
15
|
return {
|
|
18
16
|
bind: id,
|
|
19
17
|
view: () => {
|
|
18
|
+
const globalValue = cf.gvc.glitter.share.editorViewModel.appConfig;
|
|
19
|
+
globalValue.color_theme = globalValue.color_theme ?? [];
|
|
20
20
|
try {
|
|
21
21
|
if (typeof cf.widget.bundle.form_data[cf.widget.bundle.form_key] !== 'object') {
|
|
22
22
|
cf.widget.bundle.form_data[cf.widget.bundle.form_key] = {};
|
|
@@ -42,11 +42,10 @@ export class ColorThemeSelector {
|
|
|
42
42
|
.map((dd) => {
|
|
43
43
|
return html` <div>
|
|
44
44
|
${[
|
|
45
|
-
html
|
|
45
|
+
html`<div
|
|
46
46
|
class="d-flex cursor_pointer"
|
|
47
47
|
style="gap:8px;"
|
|
48
48
|
onclick="${cf.gvc.event(() => {
|
|
49
|
-
|
|
50
49
|
const key = `${select.id}`.split('-')[0] === 'custom' ? `custom` : `global`;
|
|
51
50
|
if (key === dd.value) {
|
|
52
51
|
return;
|
|
@@ -111,12 +110,20 @@ export class ColorThemeSelector {
|
|
|
111
110
|
cf.gvc.notifyDataChange(id);
|
|
112
111
|
},
|
|
113
112
|
filter: (key) => {
|
|
114
|
-
if
|
|
115
|
-
return
|
|
116
|
-
}
|
|
117
|
-
|
|
113
|
+
if(cf.widget.bundle.root_widget.find((dd:any)=>{
|
|
114
|
+
return dd.data._color_editor_able!==undefined
|
|
115
|
+
})){
|
|
116
|
+
return cf.widget.bundle.root_widget.find((dd:any)=>{
|
|
117
|
+
return dd.data._color_editor_able!==undefined
|
|
118
|
+
}).data._color_editor_able.includes(key)
|
|
119
|
+
}else{
|
|
120
|
+
if (!cf.widget.bundle.root_widget) {
|
|
121
|
+
return true;
|
|
122
|
+
}
|
|
123
|
+
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
118
124
|
|
|
119
|
-
|
|
125
|
+
return inf.includes(`.${key}`) || inf.includes(`("${key}`) || inf.includes(`('${key}`) || inf.includes(`['${key}']`) || inf.includes(`["${key}"]`);
|
|
126
|
+
}
|
|
120
127
|
},
|
|
121
128
|
name: custom ? `自定義配色` : `配色${parseInt(select.id, 10) + 1}`,
|
|
122
129
|
data: custom ? select : globalValue.color_theme[parseInt(select.id, 10)],
|
|
@@ -124,6 +131,9 @@ export class ColorThemeSelector {
|
|
|
124
131
|
}),
|
|
125
132
|
title: '顏色編輯',
|
|
126
133
|
});
|
|
134
|
+
NormalPageEditor.closeEvent=()=>{
|
|
135
|
+
cf.gvc.notifyDataChange(id);
|
|
136
|
+
}
|
|
127
137
|
})}">編輯
|
|
128
138
|
</div>
|
|
129
139
|
</div>
|
|
@@ -165,13 +175,21 @@ export class ColorThemeSelector {
|
|
|
165
175
|
cf.gvc.notifyDataChange(id);
|
|
166
176
|
},
|
|
167
177
|
filter: (key) => {
|
|
168
|
-
if
|
|
169
|
-
return
|
|
178
|
+
if(cf.widget.bundle.root_widget.find((dd:any)=>{
|
|
179
|
+
return dd.data._color_editor_able!==undefined
|
|
180
|
+
})){
|
|
181
|
+
return cf.widget.bundle.root_widget.find((dd:any)=>{
|
|
182
|
+
return dd.data._color_editor_able!==undefined
|
|
183
|
+
}).data._color_editor_able.includes(key)
|
|
184
|
+
}else{
|
|
185
|
+
if (!cf.widget.bundle.root_widget) {
|
|
186
|
+
return true;
|
|
187
|
+
}
|
|
188
|
+
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
189
|
+
return (
|
|
190
|
+
inf.includes(`.${key}`) || inf.includes(`("${key}`) || inf.includes(`('${key}`) || inf.includes(`['${key}']`) || inf.includes(`["${key}"]`)
|
|
191
|
+
);
|
|
170
192
|
}
|
|
171
|
-
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
172
|
-
return (
|
|
173
|
-
inf.includes(`.${key}`) || inf.includes(`("${key}`) || inf.includes(`('${key}`) || inf.includes(`['${key}']`) || inf.includes(`["${key}"]`)
|
|
174
|
-
);
|
|
175
193
|
},
|
|
176
194
|
name: vm.name,
|
|
177
195
|
data: vm.data,
|
|
@@ -196,17 +214,25 @@ export class ColorThemeSelector {
|
|
|
196
214
|
cf.gvc.notifyDataChange(id);
|
|
197
215
|
},
|
|
198
216
|
filter: (key) => {
|
|
199
|
-
if
|
|
200
|
-
return
|
|
217
|
+
if(cf.widget.bundle.root_widget.find((dd:any)=>{
|
|
218
|
+
return dd.data._color_editor_able!==undefined
|
|
219
|
+
})){
|
|
220
|
+
return cf.widget.bundle.root_widget.find((dd:any)=>{
|
|
221
|
+
return dd.data._color_editor_able!==undefined
|
|
222
|
+
}).data._color_editor_able.includes(key)
|
|
223
|
+
}else{
|
|
224
|
+
if (!cf.widget.bundle.root_widget) {
|
|
225
|
+
return true;
|
|
226
|
+
}
|
|
227
|
+
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
228
|
+
return (
|
|
229
|
+
inf.includes(`.${key}`) ||
|
|
230
|
+
inf.includes(`("${key}`) ||
|
|
231
|
+
inf.includes(`('${key}`) ||
|
|
232
|
+
inf.includes(`['${key}']`) ||
|
|
233
|
+
inf.includes(`["${key}"]`)
|
|
234
|
+
);
|
|
201
235
|
}
|
|
202
|
-
const inf = JSON.stringify(cf.widget.bundle.root_widget).replace(/\s+/g, '');
|
|
203
|
-
return (
|
|
204
|
-
inf.includes(`.${key}`) ||
|
|
205
|
-
inf.includes(`("${key}`) ||
|
|
206
|
-
inf.includes(`('${key}`) ||
|
|
207
|
-
inf.includes(`['${key}']`) ||
|
|
208
|
-
inf.includes(`["${key}"]`)
|
|
209
|
-
);
|
|
210
236
|
},
|
|
211
237
|
name: vm.name,
|
|
212
238
|
data: vm.data,
|
|
@@ -743,6 +743,9 @@ export class Main_editor {
|
|
|
743
743
|
if (`${vm.index}` === '0') {
|
|
744
744
|
document.querySelector('#editerCenter iframe').contentWindow.document.querySelector('body').style.background = gvc.glitter.share.globalValue[`theme_color.0.background`];
|
|
745
745
|
}
|
|
746
|
+
for (const b of document.querySelector('#editerCenter iframe').contentWindow.document.querySelectorAll('._builder_color_refresh')) {
|
|
747
|
+
b.recreateView();
|
|
748
|
+
}
|
|
746
749
|
gvc.notifyDataChange(vId);
|
|
747
750
|
},
|
|
748
751
|
gvc: gvc,
|
|
@@ -802,6 +802,9 @@ export class Main_editor {
|
|
|
802
802
|
if (`${vm.index}` === '0') {
|
|
803
803
|
(document.querySelector('#editerCenter iframe') as any).contentWindow.document.querySelector('body')!.style.background = gvc.glitter.share.globalValue[`theme_color.0.background`];
|
|
804
804
|
}
|
|
805
|
+
for (const b of (document.querySelector('#editerCenter iframe') as any).contentWindow.document.querySelectorAll('._builder_color_refresh')){
|
|
806
|
+
b.recreateView()
|
|
807
|
+
}
|
|
805
808
|
gvc.notifyDataChange(vId)
|
|
806
809
|
},
|
|
807
810
|
gvc: gvc,
|
|
@@ -896,31 +896,47 @@ export const component = Plugin.createComponent(import.meta.url, (glitter, editM
|
|
|
896
896
|
}
|
|
897
897
|
return (!glitter.share.only_show_cuatomize || custom);
|
|
898
898
|
}
|
|
899
|
+
const color_array = yield filterFormat((dd) => {
|
|
900
|
+
if (dd.page === 'color_theme') {
|
|
901
|
+
return getItemsVisibility(dd);
|
|
902
|
+
}
|
|
903
|
+
else {
|
|
904
|
+
return false;
|
|
905
|
+
}
|
|
906
|
+
});
|
|
907
|
+
const style_array = yield filterFormat((dd) => {
|
|
908
|
+
if (dd.page !== 'color_theme' && dd.category === 'style') {
|
|
909
|
+
return getItemsVisibility(dd);
|
|
910
|
+
}
|
|
911
|
+
else {
|
|
912
|
+
return false;
|
|
913
|
+
}
|
|
914
|
+
});
|
|
899
915
|
const setting_option = [
|
|
900
|
-
{
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
}
|
|
911
|
-
},
|
|
912
|
-
{
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
}
|
|
923
|
-
},
|
|
916
|
+
...(() => {
|
|
917
|
+
if (style_array.length) {
|
|
918
|
+
return [{
|
|
919
|
+
title: "樣式設定",
|
|
920
|
+
key: 'style',
|
|
921
|
+
array: style_array
|
|
922
|
+
}];
|
|
923
|
+
}
|
|
924
|
+
else {
|
|
925
|
+
return [];
|
|
926
|
+
}
|
|
927
|
+
})(),
|
|
928
|
+
...(() => {
|
|
929
|
+
if (color_array.length) {
|
|
930
|
+
return [{
|
|
931
|
+
title: "顏色設定",
|
|
932
|
+
key: 'color',
|
|
933
|
+
array: color_array
|
|
934
|
+
}];
|
|
935
|
+
}
|
|
936
|
+
else {
|
|
937
|
+
return [];
|
|
938
|
+
}
|
|
939
|
+
})(),
|
|
924
940
|
{
|
|
925
941
|
title: "字型設定",
|
|
926
942
|
key: 'fonts',
|
|
@@ -920,29 +920,43 @@ export const component = Plugin.createComponent(import.meta.url, (glitter: Glitt
|
|
|
920
920
|
}
|
|
921
921
|
return (!glitter.share.only_show_cuatomize || custom)
|
|
922
922
|
}
|
|
923
|
+
const color_array:any=await filterFormat((dd) => {
|
|
924
|
+
if (dd.page === 'color_theme') {
|
|
925
|
+
return getItemsVisibility(dd)
|
|
926
|
+
} else {
|
|
927
|
+
return false
|
|
928
|
+
}
|
|
929
|
+
})
|
|
930
|
+
const style_array:any=await filterFormat((dd) => {
|
|
931
|
+
if (dd.page !== 'color_theme' && dd.category === 'style') {
|
|
932
|
+
return getItemsVisibility(dd)
|
|
933
|
+
} else {
|
|
934
|
+
return false
|
|
935
|
+
}
|
|
936
|
+
})
|
|
923
937
|
const setting_option = [
|
|
924
|
-
{
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
}
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
}
|
|
934
|
-
},
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
938
|
+
...(()=>{
|
|
939
|
+
if(style_array.length){
|
|
940
|
+
return [ {
|
|
941
|
+
title: "樣式設定",
|
|
942
|
+
key: 'style',
|
|
943
|
+
array: style_array
|
|
944
|
+
}]
|
|
945
|
+
}else{
|
|
946
|
+
return []
|
|
947
|
+
}
|
|
948
|
+
})(),
|
|
949
|
+
...(()=>{
|
|
950
|
+
if(color_array.length){
|
|
951
|
+
return [ {
|
|
952
|
+
title: "顏色設定",
|
|
953
|
+
key: 'color',
|
|
954
|
+
array: color_array
|
|
955
|
+
}]
|
|
956
|
+
}else{
|
|
957
|
+
return []
|
|
943
958
|
}
|
|
944
|
-
})
|
|
945
|
-
},
|
|
959
|
+
})(),
|
|
946
960
|
{
|
|
947
961
|
title: "字型設定",
|
|
948
962
|
key: 'fonts',
|
|
@@ -218,7 +218,7 @@ background: ${(_a = widget.formData.theme_color['background']) !== null && _a !=
|
|
|
218
218
|
<!--固定按鈕顯示區塊-->
|
|
219
219
|
<ul class="navbar-nav flex-row ms-auto">
|
|
220
220
|
<li class="nav-item d-none d-sm-flex align-items-center justify-content-center"
|
|
221
|
-
style="
|
|
221
|
+
style="">
|
|
222
222
|
${gvc.bindView(() => {
|
|
223
223
|
const vm = {
|
|
224
224
|
id: gvc.glitter.getUUID(),
|
|
@@ -12,6 +12,7 @@ export class Sy02 {
|
|
|
12
12
|
gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
|
|
13
13
|
changePage = cl.changePage
|
|
14
14
|
})
|
|
15
|
+
|
|
15
16
|
return html`
|
|
16
17
|
<div style="height: 76px;"></div>
|
|
17
18
|
<nav class="navbar navbar-expand-lg vw-100 header header-place shadow position-fixed top-0 left-0 py-0"
|
|
@@ -218,7 +219,7 @@ background: ${widget.formData.theme_color['background'] ?? '#000'};overflow-x: h
|
|
|
218
219
|
<!--固定按鈕顯示區塊-->
|
|
219
220
|
<ul class="navbar-nav flex-row ms-auto">
|
|
220
221
|
<li class="nav-item d-none d-sm-flex align-items-center justify-content-center"
|
|
221
|
-
style="
|
|
222
|
+
style="">
|
|
222
223
|
${gvc.bindView(() => {
|
|
223
224
|
const vm = {
|
|
224
225
|
id: gvc.glitter.getUUID(),
|
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
import { ApiUser } from "../../glitter-base/route/user.js";
|
|
2
|
+
import { getCheckoutCount } from "../../official_event/e-commerce/get-count.js";
|
|
3
|
+
import { GlobalUser } from "../../glitter-base/global/global-user.js";
|
|
4
|
+
const html = String.raw;
|
|
5
|
+
export class Sy03 {
|
|
6
|
+
static main(gvc, widget, subData) {
|
|
7
|
+
var _a, _b, _c;
|
|
8
|
+
let changePage = (index, type, subData) => { };
|
|
9
|
+
gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
|
|
10
|
+
changePage = cl.changePage;
|
|
11
|
+
});
|
|
12
|
+
return html `
|
|
13
|
+
<div class="d-sm-none" style="height: 76px;"></div>
|
|
14
|
+
<nav class="navbar navbar-expand-lg vw-100 header header-place shadow top-0 left-0 py-0 position-fixed position-sm-relative"
|
|
15
|
+
style="background: ${(_a = widget.formData.theme_color['background']) !== null && _a !== void 0 ? _a : '#000'} !important;z-index:9999;
|
|
16
|
+
">
|
|
17
|
+
<div class="container header-place h-100 align-items-center justify-content-center d-flex"
|
|
18
|
+
style="${(document.body.clientWidth < 800) ? `height:76px !important;` : ``}">
|
|
19
|
+
<div class="d-flex flex-column align-items-center justify-content-center pb-sm-3 flex-fill">
|
|
20
|
+
<!--LOGO顯示區塊-->
|
|
21
|
+
<div class="d-flex align-items-center justify-content-start justify-content-sm-center h-100 w-100"
|
|
22
|
+
style="gap: 8px;cursor: pointer;">
|
|
23
|
+
<!--手機版選單-->
|
|
24
|
+
<div class="d-flex align-items-center justify-content-center d-sm-none"
|
|
25
|
+
style="width:45px !important;height:40px !important;" onclick="${gvc.event(() => {
|
|
26
|
+
gvc.glitter.setDrawer(gvc.bindView(() => {
|
|
27
|
+
var _a;
|
|
28
|
+
const id = gvc.glitter.getUUID();
|
|
29
|
+
return {
|
|
30
|
+
bind: id,
|
|
31
|
+
view: () => {
|
|
32
|
+
return html `
|
|
33
|
+
<div class="div d-flex align-items-center flex-column w-100 p-3"
|
|
34
|
+
style="border-bottom:1px solid ${widget.formData.theme_color['title']};">
|
|
35
|
+
<div class="d-flex align-items-center ">
|
|
36
|
+
<div>
|
|
37
|
+
<div class="h-100" onclick="${gvc.event(() => {
|
|
38
|
+
changePage('index', 'home', {});
|
|
39
|
+
})}"> <img style="width: 150px;
|
|
40
|
+
background-position: center;
|
|
41
|
+
background-size: cover;
|
|
42
|
+
background-repeat: no-repeat;
|
|
43
|
+
border-radius: 10px;
|
|
44
|
+
margin-bottom: 20px;"
|
|
45
|
+
src="${widget.formData.logo}">
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="position-relative"><input
|
|
51
|
+
class="form-control fw-500 "
|
|
52
|
+
placeholder="找商品"
|
|
53
|
+
autocomplete="off" value=""
|
|
54
|
+
onchange="${gvc.event((e, event) => {
|
|
55
|
+
gvc.glitter.href = `/all-product?search=${e.value}`;
|
|
56
|
+
})}">
|
|
57
|
+
|
|
58
|
+
<div style=" position: absolute;
|
|
59
|
+
right: 10px;
|
|
60
|
+
top: 50%;
|
|
61
|
+
transform: translateY(-50%);
|
|
62
|
+
color: rgb(107, 114, 128);"><i
|
|
63
|
+
class="fa-solid fa-magnifying-glass"></i></div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div class="offcanvas-body p-0 "
|
|
68
|
+
>
|
|
69
|
+
${gvc.bindView(() => {
|
|
70
|
+
const id = gvc.glitter.getUUID();
|
|
71
|
+
const vm = {
|
|
72
|
+
data: []
|
|
73
|
+
};
|
|
74
|
+
ApiUser.getPublicConfig('menu-setting', 'manager', window.appName).then((res) => {
|
|
75
|
+
vm.data = res.response.value;
|
|
76
|
+
gvc.notifyDataChange(id);
|
|
77
|
+
});
|
|
78
|
+
return {
|
|
79
|
+
bind: id,
|
|
80
|
+
view: () => {
|
|
81
|
+
function resetToggle() {
|
|
82
|
+
function loop(data) {
|
|
83
|
+
data.map((dd) => {
|
|
84
|
+
var _a;
|
|
85
|
+
dd.open = false;
|
|
86
|
+
loop((_a = dd.items) !== null && _a !== void 0 ? _a : []);
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
loop(vm.data);
|
|
90
|
+
}
|
|
91
|
+
function loopItems(data, show_border) {
|
|
92
|
+
return data.map((dd) => {
|
|
93
|
+
var _a, _b, _c, _d, _e;
|
|
94
|
+
return html `
|
|
95
|
+
<li style="${(show_border) ? `border-bottom: 1px solid ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;` : ``}">
|
|
96
|
+
<div class="nav-link d-flex justify-content-between"
|
|
97
|
+
style="padding: 16px;"
|
|
98
|
+
onclick="${gvc.event(() => {
|
|
99
|
+
var _a;
|
|
100
|
+
if (((_a = dd.items) !== null && _a !== void 0 ? _a : []).length === 0) {
|
|
101
|
+
if (dd.link) {
|
|
102
|
+
gvc.glitter.href = dd.link;
|
|
103
|
+
gvc.glitter.closeDrawer();
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
let og = dd.open;
|
|
108
|
+
resetToggle();
|
|
109
|
+
if (!og) {
|
|
110
|
+
dd.open = true;
|
|
111
|
+
}
|
|
112
|
+
gvc.notifyDataChange(id);
|
|
113
|
+
}
|
|
114
|
+
})}">
|
|
115
|
+
<div style="color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'} !important;"
|
|
116
|
+
onclick="${gvc.event((e, event) => {
|
|
117
|
+
if (dd.link) {
|
|
118
|
+
gvc.glitter.href = dd.link;
|
|
119
|
+
gvc.glitter.closeDrawer();
|
|
120
|
+
}
|
|
121
|
+
event.stopPropagation();
|
|
122
|
+
event.preventDefault();
|
|
123
|
+
})}">${dd.title}
|
|
124
|
+
</div>
|
|
125
|
+
${((_c = dd.items) !== null && _c !== void 0 ? _c : []).length ? `<i class="fa-solid ${dd.open ? `fa-angle-up` : `fa-angle-down`}"
|
|
126
|
+
style="color: ${(_d = widget.formData.theme_color['title']) !== null && _d !== void 0 ? _d : '#000'} !important;"></i>` : ``}
|
|
127
|
+
</div>
|
|
128
|
+
${dd.open ? `<ul class="ps-3 pb-2">${loopItems((_e = dd.items) !== null && _e !== void 0 ? _e : [], false)}</ul>` : ``}
|
|
129
|
+
</li>
|
|
130
|
+
`;
|
|
131
|
+
}).join('');
|
|
132
|
+
}
|
|
133
|
+
return loopItems(vm.data, true);
|
|
134
|
+
},
|
|
135
|
+
divCreate: {
|
|
136
|
+
class: `navbar-nav me-auto mb-2 mb-lg-0`,
|
|
137
|
+
style: ``,
|
|
138
|
+
elem: `ul`
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
})}
|
|
142
|
+
</div>`;
|
|
143
|
+
},
|
|
144
|
+
divCreate: {
|
|
145
|
+
class: `w-100 h-100`, style: `z-index: 9999;overflow-y:auto;
|
|
146
|
+
background: ${(_a = widget.formData.theme_color['background']) !== null && _a !== void 0 ? _a : '#000'};overflow-x: hidden;`
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
}), () => {
|
|
150
|
+
gvc.glitter.openDrawer(280);
|
|
151
|
+
});
|
|
152
|
+
})}">
|
|
153
|
+
<i class="fa-solid fa-bars fa-fw " style="font-size: 20px;
|
|
154
|
+
color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'};"></i>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="h-100"
|
|
157
|
+
onclick="${gvc.event(() => {
|
|
158
|
+
changePage('index', 'home', {});
|
|
159
|
+
})}"> <img src="${widget.formData.logo}" style="${document.body.clientWidth < 800 ? `height:50px;` : `height: 150px;`}"></div>
|
|
160
|
+
</div>
|
|
161
|
+
<!--選單列表顯示區塊-->
|
|
162
|
+
<ul class="navbar-nav d-none d-sm-block flex-fill ps-2 position-sticky"
|
|
163
|
+
style="">
|
|
164
|
+
${gvc.bindView(() => {
|
|
165
|
+
const id = gvc.glitter.getUUID();
|
|
166
|
+
const vm = {
|
|
167
|
+
data: []
|
|
168
|
+
};
|
|
169
|
+
ApiUser.getPublicConfig('menu-setting', 'manager', window.appName).then((res) => {
|
|
170
|
+
vm.data = res.response.value;
|
|
171
|
+
gvc.notifyDataChange(id);
|
|
172
|
+
});
|
|
173
|
+
return {
|
|
174
|
+
bind: id,
|
|
175
|
+
view: () => {
|
|
176
|
+
function loopItems(data) {
|
|
177
|
+
return data.map((dd) => {
|
|
178
|
+
var _a, _b;
|
|
179
|
+
return html `
|
|
180
|
+
<li class="nav-item dropdown">
|
|
181
|
+
<a class="nav-link header-link "
|
|
182
|
+
style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;cursor: pointer;"
|
|
183
|
+
onclick="${gvc.event(() => {
|
|
184
|
+
if (dd.link) {
|
|
185
|
+
gvc.glitter.href = dd.link;
|
|
186
|
+
}
|
|
187
|
+
})}"
|
|
188
|
+
>${dd.title}
|
|
189
|
+
${dd.items.length > 0 ? `<i class="fa-solid fa-angle-down ms-2"></i>` : ``}</a>
|
|
190
|
+
${dd.items.length > 0 ? `<ul class="dropdown-menu" style="background:${(_b = widget.formData.theme_color['background']) !== null && _b !== void 0 ? _b : '#000'} !important;
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
z-index: 99999;">${loopItems(dd.items)}</ul>` : ``}
|
|
193
|
+
</li>`;
|
|
194
|
+
}).join('');
|
|
195
|
+
}
|
|
196
|
+
return loopItems(vm.data);
|
|
197
|
+
},
|
|
198
|
+
divCreate: {
|
|
199
|
+
class: `navbar-nav ms-3 me-auto`, style: ``, elem: `ul`
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
})}
|
|
203
|
+
</ul>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="d-flex align-items-center position-relative position-lg-absolute" style="${(document.body.clientWidth > 800) ? `top:10px;right:30px;` : ``}">
|
|
206
|
+
<!--固定按鈕顯示區塊-->
|
|
207
|
+
<ul class="navbar-nav flex-row ms-auto">
|
|
208
|
+
<li class="nav-item d-none d-sm-flex align-items-center justify-content-center"
|
|
209
|
+
style="min-width:45px !important;">
|
|
210
|
+
${gvc.bindView(() => {
|
|
211
|
+
const vm = {
|
|
212
|
+
id: gvc.glitter.getUUID(),
|
|
213
|
+
toggle: false
|
|
214
|
+
};
|
|
215
|
+
return {
|
|
216
|
+
bind: vm.id,
|
|
217
|
+
view: () => {
|
|
218
|
+
var _a, _b;
|
|
219
|
+
if (!vm.toggle) {
|
|
220
|
+
return html `<i class="fa-regular fa-magnifying-glass"
|
|
221
|
+
style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'};cursor: pointer;font-size:20px;"
|
|
222
|
+
onclick="${gvc.event(() => {
|
|
223
|
+
vm.toggle = !vm.toggle;
|
|
224
|
+
gvc.notifyDataChange(vm.id);
|
|
225
|
+
})}"></i>`;
|
|
226
|
+
}
|
|
227
|
+
else {
|
|
228
|
+
return html `<a
|
|
229
|
+
class="search-container d-flex align-items-center"
|
|
230
|
+
><i
|
|
231
|
+
class="fa-regular fa-circle-xmark"
|
|
232
|
+
style="color: ${(_b = widget.formData.theme_color['title']) !== null && _b !== void 0 ? _b : '#000'};cursor: pointer;font-size:20px;"
|
|
233
|
+
onclick="${gvc.event(() => {
|
|
234
|
+
vm.toggle = !vm.toggle;
|
|
235
|
+
gvc.notifyDataChange(vm.id);
|
|
236
|
+
})}"
|
|
237
|
+
></i><input
|
|
238
|
+
class="ms-3 form-control" style="height:40px;"
|
|
239
|
+
placeholder="輸入商品關鍵字。" autocomplete="off"
|
|
240
|
+
onchange="${gvc.event((e, event) => {
|
|
241
|
+
gvc.glitter.href = `/all-product?search=${e.value}`;
|
|
242
|
+
vm.toggle = !vm.toggle;
|
|
243
|
+
gvc.notifyDataChange(vm.id);
|
|
244
|
+
})}">
|
|
245
|
+
</a>`;
|
|
246
|
+
}
|
|
247
|
+
},
|
|
248
|
+
divCreate: {
|
|
249
|
+
class: `nav-link search-container`, elem: `a`
|
|
250
|
+
}
|
|
251
|
+
};
|
|
252
|
+
})}
|
|
253
|
+
</li>
|
|
254
|
+
<li class="nav-item d-flex align-items-center justify-content-center"
|
|
255
|
+
style="width:45px !important;">
|
|
256
|
+
${gvc.bindView(() => {
|
|
257
|
+
const vm = {
|
|
258
|
+
id: gvc.glitter.getUUID(),
|
|
259
|
+
count: 0
|
|
260
|
+
};
|
|
261
|
+
getCheckoutCount((count) => {
|
|
262
|
+
vm.count = count;
|
|
263
|
+
gvc.notifyDataChange(vm.id);
|
|
264
|
+
});
|
|
265
|
+
return {
|
|
266
|
+
bind: vm.id,
|
|
267
|
+
view: () => {
|
|
268
|
+
var _a;
|
|
269
|
+
return html `<span class="position-relative">
|
|
270
|
+
<i class="fa-duotone fa-cart-shopping"
|
|
271
|
+
style="color: ${(_a = widget.formData.theme_color['title']) !== null && _a !== void 0 ? _a : '#000'} !important;cursor: pointer;font-size:20px;"></i>
|
|
272
|
+
${(vm.count) ? `<div class="position-absolute"
|
|
273
|
+
style="font-size: 10px;right: -10px;top: -6px;">
|
|
274
|
+
<div class="rounded-circle bg-danger text-white align-items-center justify-content-center fw-500 d-flex"
|
|
275
|
+
style="width:18px;height: 18px;color: white !important;background:#fe5541;">${vm.count}
|
|
276
|
+
</div>
|
|
277
|
+
</div>` : ``}
|
|
278
|
+
</span>`;
|
|
279
|
+
},
|
|
280
|
+
divCreate: {
|
|
281
|
+
class: `nav-link js-cart-count `
|
|
282
|
+
}
|
|
283
|
+
};
|
|
284
|
+
})}
|
|
285
|
+
</li>
|
|
286
|
+
<li class="nav-item d-flex align-items-center justify-content-center"
|
|
287
|
+
style="width:45px !important;">
|
|
288
|
+
<a class="nav-link search-container">
|
|
289
|
+
<i class="fw-500 fa-regular fa-user "
|
|
290
|
+
style="color: ${(_c = widget.formData.theme_color['title']) !== null && _c !== void 0 ? _c : '#000'};cursor: pointer;font-size:20px;"
|
|
291
|
+
onclick="${gvc.event(() => {
|
|
292
|
+
if (GlobalUser.token) {
|
|
293
|
+
changePage('account_userinfo', 'page', {});
|
|
294
|
+
}
|
|
295
|
+
else {
|
|
296
|
+
changePage('login', 'page', {});
|
|
297
|
+
}
|
|
298
|
+
})}"></i>
|
|
299
|
+
</a>
|
|
300
|
+
</li>
|
|
301
|
+
</ul>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
</nav>`;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
window.glitter.setModule(import.meta.url, Sy03);
|
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
import {GVC} from "../../glitterBundle/GVController.js";
|
|
2
|
+
import {ApiUser} from "../../glitter-base/route/user.js";
|
|
3
|
+
import {getCheckoutCount} from "../../official_event/e-commerce/get-count.js";
|
|
4
|
+
import {GlobalUser} from "../../glitter-base/global/global-user.js";
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const html = String.raw
|
|
8
|
+
|
|
9
|
+
export class Sy03 {
|
|
10
|
+
public static main(gvc: GVC, widget: any, subData: any) {
|
|
11
|
+
let changePage = (index: string, type: 'page' | 'home', subData: any) => {}
|
|
12
|
+
gvc.glitter.getModule(new URL('./official_event/page/change-page.js', gvc.glitter.root_path).href, (cl) => {
|
|
13
|
+
changePage = cl.changePage
|
|
14
|
+
})
|
|
15
|
+
return html`
|
|
16
|
+
<div class="d-sm-none" style="height: 76px;"></div>
|
|
17
|
+
<nav class="navbar navbar-expand-lg vw-100 header header-place shadow top-0 left-0 py-0 position-fixed position-sm-relative"
|
|
18
|
+
style="background: ${widget.formData.theme_color['background'] ?? '#000'} !important;z-index:9999;
|
|
19
|
+
">
|
|
20
|
+
<div class="container header-place h-100 align-items-center justify-content-center d-flex"
|
|
21
|
+
style="${(document.body.clientWidth<800) ? `height:76px !important;`:``}">
|
|
22
|
+
<div class="d-flex flex-column align-items-center justify-content-center pb-sm-3 flex-fill">
|
|
23
|
+
<!--LOGO顯示區塊-->
|
|
24
|
+
<div class="d-flex align-items-center justify-content-start justify-content-sm-center h-100 w-100"
|
|
25
|
+
style="gap: 8px;cursor: pointer;">
|
|
26
|
+
<!--手機版選單-->
|
|
27
|
+
<div class="d-flex align-items-center justify-content-center d-sm-none"
|
|
28
|
+
style="width:45px !important;height:40px !important;" onclick="${gvc.event(() => {
|
|
29
|
+
gvc.glitter.setDrawer(gvc.bindView(() => {
|
|
30
|
+
const id = gvc.glitter.getUUID()
|
|
31
|
+
return {
|
|
32
|
+
bind: id,
|
|
33
|
+
view: () => {
|
|
34
|
+
return html`
|
|
35
|
+
<div class="div d-flex align-items-center flex-column w-100 p-3"
|
|
36
|
+
style="border-bottom:1px solid ${widget.formData.theme_color['title']};">
|
|
37
|
+
<div class="d-flex align-items-center ">
|
|
38
|
+
<div>
|
|
39
|
+
<div class="h-100" onclick="${gvc.event(() => {
|
|
40
|
+
changePage('index', 'home', {})
|
|
41
|
+
})}"> <img style="width: 150px;
|
|
42
|
+
background-position: center;
|
|
43
|
+
background-size: cover;
|
|
44
|
+
background-repeat: no-repeat;
|
|
45
|
+
border-radius: 10px;
|
|
46
|
+
margin-bottom: 20px;"
|
|
47
|
+
src="${widget.formData.logo}">
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="position-relative"><input
|
|
53
|
+
class="form-control fw-500 "
|
|
54
|
+
placeholder="找商品"
|
|
55
|
+
autocomplete="off" value=""
|
|
56
|
+
onchange="${gvc.event((e, event) => {
|
|
57
|
+
gvc.glitter.href = `/all-product?search=${e.value}`
|
|
58
|
+
})}">
|
|
59
|
+
|
|
60
|
+
<div style=" position: absolute;
|
|
61
|
+
right: 10px;
|
|
62
|
+
top: 50%;
|
|
63
|
+
transform: translateY(-50%);
|
|
64
|
+
color: rgb(107, 114, 128);"><i
|
|
65
|
+
class="fa-solid fa-magnifying-glass"></i></div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div class="offcanvas-body p-0 "
|
|
70
|
+
>
|
|
71
|
+
${gvc.bindView(() => {
|
|
72
|
+
const id = gvc.glitter.getUUID()
|
|
73
|
+
const vm = {
|
|
74
|
+
data: []
|
|
75
|
+
}
|
|
76
|
+
ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then((res) => {
|
|
77
|
+
vm.data = res.response.value
|
|
78
|
+
gvc.notifyDataChange(id)
|
|
79
|
+
})
|
|
80
|
+
return {
|
|
81
|
+
bind: id,
|
|
82
|
+
view: () => {
|
|
83
|
+
function resetToggle() {
|
|
84
|
+
function loop(data: any) {
|
|
85
|
+
data.map((dd: any) => {
|
|
86
|
+
(dd as any).open = false
|
|
87
|
+
loop((dd as any).items ?? [])
|
|
88
|
+
})
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
loop(vm.data)
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
function loopItems(data: any,show_border:boolean) {
|
|
95
|
+
return data.map((dd: any) => {
|
|
96
|
+
return html`
|
|
97
|
+
<li style="${(show_border) ? `border-bottom: 1px solid ${widget.formData.theme_color['title'] ?? '#000'} !important;`:``}">
|
|
98
|
+
<div class="nav-link d-flex justify-content-between"
|
|
99
|
+
style="padding: 16px;"
|
|
100
|
+
onclick="${gvc.event(() => {
|
|
101
|
+
if (((dd as any).items ?? []).length === 0) {
|
|
102
|
+
if (dd.link) {
|
|
103
|
+
gvc.glitter.href = dd.link
|
|
104
|
+
gvc.glitter.closeDrawer()
|
|
105
|
+
}
|
|
106
|
+
} else {
|
|
107
|
+
let og = dd.open
|
|
108
|
+
resetToggle()
|
|
109
|
+
if (!og) {
|
|
110
|
+
dd.open = true
|
|
111
|
+
}
|
|
112
|
+
gvc.notifyDataChange(id)
|
|
113
|
+
}
|
|
114
|
+
})}">
|
|
115
|
+
<div style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;"
|
|
116
|
+
onclick="${gvc.event((e, event) => {
|
|
117
|
+
if (dd.link) {
|
|
118
|
+
gvc.glitter.href = dd.link
|
|
119
|
+
gvc.glitter.closeDrawer()
|
|
120
|
+
}
|
|
121
|
+
event.stopPropagation()
|
|
122
|
+
event.preventDefault()
|
|
123
|
+
})}">${dd.title}
|
|
124
|
+
</div>
|
|
125
|
+
${(dd.items ?? []).length ? `<i class="fa-solid ${dd.open ? `fa-angle-up` : `fa-angle-down`}"
|
|
126
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;"></i>` : ``}
|
|
127
|
+
</div>
|
|
128
|
+
${dd.open ? `<ul class="ps-3 pb-2">${loopItems(dd.items ?? [],false)}</ul>`:``}
|
|
129
|
+
</li>
|
|
130
|
+
`
|
|
131
|
+
}).join('')
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
return loopItems(vm.data,true)
|
|
135
|
+
},
|
|
136
|
+
divCreate: {
|
|
137
|
+
class: `navbar-nav me-auto mb-2 mb-lg-0`,
|
|
138
|
+
style: ``,
|
|
139
|
+
elem: `ul`
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
})}
|
|
143
|
+
</div>`
|
|
144
|
+
},
|
|
145
|
+
divCreate: {
|
|
146
|
+
class: `w-100 h-100`, style: `z-index: 9999;overflow-y:auto;
|
|
147
|
+
background: ${widget.formData.theme_color['background'] ?? '#000'};overflow-x: hidden;`
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}), () => {
|
|
151
|
+
gvc.glitter.openDrawer(280)
|
|
152
|
+
})
|
|
153
|
+
})}">
|
|
154
|
+
<i class="fa-solid fa-bars fa-fw " style="font-size: 20px;
|
|
155
|
+
color: ${widget.formData.theme_color['title'] ?? '#000'};"></i>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="h-100"
|
|
158
|
+
onclick="${gvc.event(() => {
|
|
159
|
+
changePage('index', 'home', {})
|
|
160
|
+
})}"> <img src="${widget.formData.logo}" style="${document.body.clientWidth < 800 ? `height:50px;`:`height: 150px;`}"></div>
|
|
161
|
+
</div>
|
|
162
|
+
<!--選單列表顯示區塊-->
|
|
163
|
+
<ul class="navbar-nav d-none d-sm-block flex-fill ps-2 position-sticky"
|
|
164
|
+
style="">
|
|
165
|
+
${gvc.bindView(() => {
|
|
166
|
+
const id = gvc.glitter.getUUID()
|
|
167
|
+
const vm = {
|
|
168
|
+
data: []
|
|
169
|
+
}
|
|
170
|
+
ApiUser.getPublicConfig('menu-setting', 'manager', (window as any).appName).then((res) => {
|
|
171
|
+
vm.data = res.response.value
|
|
172
|
+
gvc.notifyDataChange(id)
|
|
173
|
+
})
|
|
174
|
+
return {
|
|
175
|
+
bind: id,
|
|
176
|
+
view: () => {
|
|
177
|
+
function loopItems(data: any) {
|
|
178
|
+
return data.map((dd: any) => {
|
|
179
|
+
return html`
|
|
180
|
+
<li class="nav-item dropdown">
|
|
181
|
+
<a class="nav-link header-link "
|
|
182
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;cursor: pointer;"
|
|
183
|
+
onclick="${gvc.event(() => {
|
|
184
|
+
if (dd.link) {
|
|
185
|
+
gvc.glitter.href = dd.link
|
|
186
|
+
}
|
|
187
|
+
})}"
|
|
188
|
+
>${dd.title}
|
|
189
|
+
${dd.items.length > 0 ? `<i class="fa-solid fa-angle-down ms-2"></i>` : ``}</a>
|
|
190
|
+
${dd.items.length > 0 ? `<ul class="dropdown-menu" style="background:${widget.formData.theme_color['background'] ?? '#000'} !important;
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
z-index: 99999;">${loopItems(dd.items)}</ul>` : ``}
|
|
193
|
+
</li>`
|
|
194
|
+
}).join('')
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
return loopItems(vm.data)
|
|
198
|
+
},
|
|
199
|
+
divCreate: {
|
|
200
|
+
class: `navbar-nav ms-3 me-auto`, style: ``, elem: `ul`
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
})}
|
|
204
|
+
</ul>
|
|
205
|
+
</div>
|
|
206
|
+
<div class="d-flex align-items-center position-relative position-lg-absolute" style="${(document.body.clientWidth>800) ? `top:10px;right:30px;`:``}">
|
|
207
|
+
<!--固定按鈕顯示區塊-->
|
|
208
|
+
<ul class="navbar-nav flex-row ms-auto">
|
|
209
|
+
<li class="nav-item d-none d-sm-flex align-items-center justify-content-center"
|
|
210
|
+
style="min-width:45px !important;">
|
|
211
|
+
${gvc.bindView(() => {
|
|
212
|
+
const vm = {
|
|
213
|
+
id: gvc.glitter.getUUID(),
|
|
214
|
+
toggle: false
|
|
215
|
+
}
|
|
216
|
+
return {
|
|
217
|
+
bind: vm.id,
|
|
218
|
+
view: () => {
|
|
219
|
+
if (!vm.toggle) {
|
|
220
|
+
return html`<i class="fa-regular fa-magnifying-glass"
|
|
221
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'};cursor: pointer;font-size:20px;"
|
|
222
|
+
onclick="${gvc.event(() => {
|
|
223
|
+
vm.toggle = !vm.toggle
|
|
224
|
+
gvc.notifyDataChange(vm.id)
|
|
225
|
+
})}"></i>`
|
|
226
|
+
} else {
|
|
227
|
+
return html`<a
|
|
228
|
+
class="search-container d-flex align-items-center"
|
|
229
|
+
><i
|
|
230
|
+
class="fa-regular fa-circle-xmark"
|
|
231
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'};cursor: pointer;font-size:20px;"
|
|
232
|
+
onclick="${gvc.event(() => {
|
|
233
|
+
vm.toggle = !vm.toggle
|
|
234
|
+
gvc.notifyDataChange(vm.id)
|
|
235
|
+
})}"
|
|
236
|
+
></i><input
|
|
237
|
+
class="ms-3 form-control" style="height:40px;"
|
|
238
|
+
placeholder="輸入商品關鍵字。" autocomplete="off"
|
|
239
|
+
onchange="${gvc.event((e, event) => {
|
|
240
|
+
gvc.glitter.href = `/all-product?search=${e.value}`
|
|
241
|
+
vm.toggle = !vm.toggle
|
|
242
|
+
gvc.notifyDataChange(vm.id)
|
|
243
|
+
})}">
|
|
244
|
+
</a>`
|
|
245
|
+
}
|
|
246
|
+
},
|
|
247
|
+
divCreate: {
|
|
248
|
+
class: `nav-link search-container`, elem: `a`
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
})}
|
|
252
|
+
</li>
|
|
253
|
+
<li class="nav-item d-flex align-items-center justify-content-center"
|
|
254
|
+
style="width:45px !important;">
|
|
255
|
+
${gvc.bindView(() => {
|
|
256
|
+
const vm = {
|
|
257
|
+
id: gvc.glitter.getUUID(),
|
|
258
|
+
count: 0
|
|
259
|
+
}
|
|
260
|
+
getCheckoutCount((count) => {
|
|
261
|
+
vm.count = count
|
|
262
|
+
gvc.notifyDataChange(vm.id)
|
|
263
|
+
})
|
|
264
|
+
return {
|
|
265
|
+
bind: vm.id,
|
|
266
|
+
view: () => {
|
|
267
|
+
return html`<span class="position-relative">
|
|
268
|
+
<i class="fa-duotone fa-cart-shopping"
|
|
269
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'} !important;cursor: pointer;font-size:20px;"></i>
|
|
270
|
+
${(vm.count) ? `<div class="position-absolute"
|
|
271
|
+
style="font-size: 10px;right: -10px;top: -6px;">
|
|
272
|
+
<div class="rounded-circle bg-danger text-white align-items-center justify-content-center fw-500 d-flex"
|
|
273
|
+
style="width:18px;height: 18px;color: white !important;background:#fe5541;">${vm.count}
|
|
274
|
+
</div>
|
|
275
|
+
</div>` : ``}
|
|
276
|
+
</span>`
|
|
277
|
+
},
|
|
278
|
+
divCreate: {
|
|
279
|
+
class: `nav-link js-cart-count `
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
})}
|
|
283
|
+
</li>
|
|
284
|
+
<li class="nav-item d-flex align-items-center justify-content-center"
|
|
285
|
+
style="width:45px !important;">
|
|
286
|
+
<a class="nav-link search-container">
|
|
287
|
+
<i class="fw-500 fa-regular fa-user "
|
|
288
|
+
style="color: ${widget.formData.theme_color['title'] ?? '#000'};cursor: pointer;font-size:20px;"
|
|
289
|
+
onclick="${gvc.event(() => {
|
|
290
|
+
if (GlobalUser.token) {
|
|
291
|
+
changePage('account_userinfo', 'page', {})
|
|
292
|
+
} else {
|
|
293
|
+
changePage('login', 'page', {})
|
|
294
|
+
}
|
|
295
|
+
})}"></i>
|
|
296
|
+
</a>
|
|
297
|
+
</li>
|
|
298
|
+
</ul>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
302
|
+
</nav>`
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
(window as any).glitter.setModule(import.meta.url, Sy03);
|
|
@@ -14,7 +14,6 @@ export class Sy04 {
|
|
|
14
14
|
<nav class="navbar navbar-expand-lg vw-100 header header-place shadow position-fixed top-0 left-0 py-0"
|
|
15
15
|
style="background: ${(_a = widget.formData.theme_color['background']) !== null && _a !== void 0 ? _a : '#000'} !important;height: 76px;z-index:9999;">
|
|
16
16
|
<div class="container header-place h-100">
|
|
17
|
-
|
|
18
17
|
<!--LOGO顯示區塊-->
|
|
19
18
|
<div class="d-flex align-items-center justify-content-center h-100"
|
|
20
19
|
style="gap: 8px;cursor: pointer;">
|
|
@@ -218,7 +217,7 @@ background: ${(_a = widget.formData.theme_color['background']) !== null && _a !=
|
|
|
218
217
|
<!--固定按鈕顯示區塊-->
|
|
219
218
|
<ul class="navbar-nav flex-row ms-auto">
|
|
220
219
|
<li class="nav-item d-none d-sm-flex align-items-center justify-content-center"
|
|
221
|
-
style="
|
|
220
|
+
style="">
|
|
222
221
|
${gvc.bindView(() => {
|
|
223
222
|
const vm = {
|
|
224
223
|
id: gvc.glitter.getUUID(),
|
|
@@ -297,7 +296,7 @@ background: ${(_a = widget.formData.theme_color['background']) !== null && _a !=
|
|
|
297
296
|
</li>
|
|
298
297
|
<li class="nav-item d-flex align-items-center justify-content-center"
|
|
299
298
|
style="width:40px !important;">
|
|
300
|
-
<a class="nav-link
|
|
299
|
+
<a class="nav-link ">
|
|
301
300
|
<i class="fw-500 fa-regular fa-user "
|
|
302
301
|
style="color: ${(_d = widget.formData.theme_color['title']) !== null && _d !== void 0 ? _d : '#000'};cursor: pointer;font-size:20px;"
|
|
303
302
|
onclick="${gvc.event(() => {
|
|
@@ -17,7 +17,6 @@ export class Sy04 {
|
|
|
17
17
|
<nav class="navbar navbar-expand-lg vw-100 header header-place shadow position-fixed top-0 left-0 py-0"
|
|
18
18
|
style="background: ${widget.formData.theme_color['background'] ?? '#000'} !important;height: 76px;z-index:9999;">
|
|
19
19
|
<div class="container header-place h-100">
|
|
20
|
-
|
|
21
20
|
<!--LOGO顯示區塊-->
|
|
22
21
|
<div class="d-flex align-items-center justify-content-center h-100"
|
|
23
22
|
style="gap: 8px;cursor: pointer;">
|
|
@@ -218,7 +217,7 @@ background: ${widget.formData.theme_color['background'] ?? '#000'};overflow-x: h
|
|
|
218
217
|
<!--固定按鈕顯示區塊-->
|
|
219
218
|
<ul class="navbar-nav flex-row ms-auto">
|
|
220
219
|
<li class="nav-item d-none d-sm-flex align-items-center justify-content-center"
|
|
221
|
-
style="
|
|
220
|
+
style="">
|
|
222
221
|
${gvc.bindView(() => {
|
|
223
222
|
const vm = {
|
|
224
223
|
id: gvc.glitter.getUUID(),
|
|
@@ -294,7 +293,7 @@ background: ${widget.formData.theme_color['background'] ?? '#000'};overflow-x: h
|
|
|
294
293
|
</li>
|
|
295
294
|
<li class="nav-item d-flex align-items-center justify-content-center"
|
|
296
295
|
style="width:40px !important;">
|
|
297
|
-
<a class="nav-link
|
|
296
|
+
<a class="nav-link ">
|
|
298
297
|
<i class="fw-500 fa-regular fa-user "
|
|
299
298
|
style="color: ${widget.formData.theme_color['title'] ?? '#000'};cursor: pointer;font-size:20px;"
|
|
300
299
|
onclick="${gvc.event(() => {
|