ts-glitter 21.1.6 → 21.1.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.
@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
9
9
  };
10
10
  import { BgWidget } from '../../backend-manager/bg-widget.js';
11
11
  import { ApiPageConfig } from '../../api/pageConfig.js';
12
- import { FirstBanner } from "../../public-components/banner/first-banner.js";
12
+ import { FirstBanner } from '../../public-components/banner/first-banner.js';
13
13
  import { GlobalWidget } from '../../editor-components/global-widget/global-widget.js';
14
14
  export class ToolSetting {
15
15
  static main(gvc) {
@@ -21,16 +21,16 @@ export class ToolSetting {
21
21
  function: 'list',
22
22
  edit_view: '',
23
23
  };
24
- return [gvc.bindView(() => {
24
+ return [
25
+ gvc.bindView(() => {
25
26
  return {
26
27
  bind: vm.id,
27
28
  view: () => {
28
29
  if (vm.function === 'edit') {
29
- return html `
30
- <div class="px-2 pt-2">${vm.edit_view}</div>`;
30
+ return html ` <div class="px-2 pt-2">${vm.edit_view}</div>`;
31
31
  }
32
32
  return html `
33
- ${(() => {
33
+ ${(() => {
34
34
  if (document.body.clientWidth < 800) {
35
35
  return `<div class="w-100 d-flex align-items-center p-3 border-bottom">
36
36
  <h5 class="offcanvas-title " style="max-width: calc(100% - 50px);overflow: hidden;text-overflow: ellipsis;">統一元件設定</h5>
@@ -50,250 +50,286 @@ export class ToolSetting {
50
50
  return ``;
51
51
  }
52
52
  })()}
53
- ${gvc.bindView((() => {
53
+ ${gvc.bindView((() => {
54
54
  const vid = gvc.glitter.getUUID();
55
55
  return {
56
56
  bind: vid,
57
57
  view: () => {
58
- return vm.data.map((dd) => {
58
+ return vm.data
59
+ .map((dd) => {
59
60
  let viewID = gvc.glitter.getUUID();
60
61
  return gvc.bindView({
61
62
  bind: viewID,
62
63
  view: () => {
63
64
  var _a;
64
65
  return html `
65
- <div class="d-flex flex-column w-100 border-bottom">
66
- <div class="hoverF2 w-100 h-100 px-3 d-flex align-items-center justify-content-between p-3 ${(_a = dd.class) !== null && _a !== void 0 ? _a : ''}"
67
- style="cursor: pointer;"
68
- onclick="${gvc.event(() => {
66
+ <div class="d-flex flex-column w-100 border-bottom">
67
+ <div
68
+ class="hoverF2 w-100 h-100 px-3 d-flex align-items-center justify-content-between p-3 ${(_a = dd.class) !== null && _a !== void 0 ? _a : ''}"
69
+ style="cursor: pointer;"
70
+ onclick="${gvc.event(() => {
69
71
  let temp = dd.toggle;
70
72
  vm.data.map((d2) => {
71
73
  d2.toggle = false;
72
74
  });
73
75
  dd.toggle = !temp;
74
76
  gvc.notifyDataChange(vid);
75
- })}">
76
- ${BgWidget.title(dd.title, 'font-size: 16px;')}
77
- ${dd.toggle ? `<i class="fa-solid fa-chevron-down ms-2"></i>` : `<i class="fa-solid fa-chevron-right ms-2"></i>`}
78
- </div>
79
- <div class="px-3 mb-2 ${dd.toggle ? `` : `d-none`}"
80
- style="white-space: normal;t">
81
- ${dd.hint && dd.toggle ? BgWidget.grayNote(dd.hint) : ``}
82
- </div>
83
- ${gvc.bindView(() => {
84
- const id = gvc.glitter.getUUID();
85
- const cvm = {
86
- loading: true,
87
- html: ``,
88
- };
89
- function loadData() {
90
- return __awaiter(this, void 0, void 0, function* () {
91
- let module_list = (yield ApiPageConfig.getPageTemplate({
92
- template_from: 'all',
93
- page: '0',
94
- limit: '3000',
95
- type: 'module',
96
- tag: dd.tag,
97
- })).response.result.data;
98
- const ci_tag = (() => {
99
- switch (dd.tag) {
100
- case '標頭元件':
101
- return 'c_header';
102
- case '頁腳元件':
103
- return `footer`;
104
- case '商品卡片':
105
- return `product_widget`;
106
- case '廣告輪播':
107
- return 'advertise';
108
- }
109
- })();
110
- let setting_view = '';
111
- let widget = yield (() => __awaiter(this, void 0, void 0, function* () {
112
- if (['標頭元件', '頁腳元件', '商品卡片', '廣告輪播'].includes(dd.tag)) {
113
- return (yield ApiPageConfig.getPage({
114
- appName: window.appName,
115
- type: 'template',
116
- tag: ci_tag,
117
- })).response.result[0];
118
- }
119
- else {
120
- return {};
121
- }
122
- }))();
123
- const refer_widget = yield (() => __awaiter(this, void 0, void 0, function* () {
124
- if (['標頭元件', '頁腳元件', '商品卡片', '廣告輪播'].includes(dd.tag)) {
125
- return (yield ApiPageConfig.getPage({
126
- appName: widget.config[0].data.refer_app,
127
- type: 'template',
128
- tag: widget.config[0].data.tag,
129
- })).response.result[0];
130
- }
131
- else {
132
- return {};
133
- }
134
- }))();
135
- const find_showed_widget = gvc.glitter.share.findWidget((d1) => {
136
- return (d1.data &&
137
- d1.data.tag ===
138
- ci_tag);
139
- });
140
- const widget_container = find_showed_widget.container || widget.config;
141
- let widget_edited = find_showed_widget.widget || widget.config[0];
142
- const htmlGenerate = new gvc.glitter.htmlGenerate(widget_container, [], {
143
- editor_updated_callback: (oWidget) => {
144
- if (dd.tag === '廣告輪播') {
145
- FirstBanner.main({
146
- gvc: document.querySelector('.iframe_view').contentWindow.glitter.pageConfig[0].gvc,
147
- ed_widget: oWidget
148
- });
149
- }
150
- }
151
- }, true);
152
- gvc.glitter.share.editorViewModel.selectItem = widget_edited;
153
- try {
154
- module_list = module_list.filter((dd) => {
155
- return dd.appName !== widget.config[0].data.refer_app || dd.tag !== widget.config[0].data.tag;
156
- });
157
- }
158
- catch (e) {
159
- module_list = [];
160
- }
161
- try {
162
- setting_view += html `
163
- <div class="col-12 p-0 m-0">
164
- <div
165
- class="position-relative"
166
- style="width: 100%; padding: 18px 12px;border-radius: 7px; overflow: hidden; border: 1px #DDDDDD solid; flex-direction: column; justify-content: center; align-items: flex-start; gap: 32px; display: inline-flex"
167
- >
168
- <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
169
- <div class="rounded-2 shadow"
170
- style="background-position:center;background-repeat: no-repeat;background-size: cover;width:93px;height: 59px;background-image: url('${(() => {
171
- switch (dd.tag) {
172
- case '標頭元件':
173
- return `${gvc.glitter.root_path}/editor-components/global-widget/src/header.png`;
174
- case '頁腳元件':
175
- return `${gvc.glitter.root_path}/editor-components/global-widget/src/footer.jpg`;
176
- case '商品卡片':
177
- return `${gvc.glitter.root_path}/editor-components/global-widget/src/product.jpg`;
178
- case '廣告輪播':
179
- return `${gvc.glitter.root_path}/editor-components/global-widget/src/banner.jpg`;
180
- }
181
- })()}');">
77
+ })}"
78
+ >
79
+ ${BgWidget.title(dd.title, 'font-size: 16px;')}
80
+ ${dd.toggle
81
+ ? `<i class="fa-solid fa-chevron-down ms-2"></i>`
82
+ : `<i class="fa-solid fa-chevron-right ms-2"></i>`}
83
+ </div>
182
84
 
183
- </div>
184
- <div style="flex: 1 1 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex">
185
- <div style="align-self: stretch; color: #393939; font-size: 15px; font-weight: 400; word-wrap: break-word">
186
- ${refer_widget.template_config.name}
187
- </div>
188
- </div>
189
-
190
- <div class=""
191
- style="cursor: pointer;color: #36B;font-size: 15px; "
192
- onclick="${gvc.event(() => {
193
- var _a, _b;
194
- if (dd.tag === '商品卡片') {
195
- gvc.glitter.share.product_edit_w = (_a = gvc.glitter.share.product_edit_w) !== null && _a !== void 0 ? _a : widget;
196
- widget = gvc.glitter.share.product_edit_w;
197
- widget_edited = widget.config[0];
198
- gvc.glitter.share.editorViewModel.saveArray[widget.id] = () => {
199
- return ApiPageConfig.setPage({
200
- id: widget.id,
201
- appName: widget.appName,
202
- tag: widget.tag,
203
- config: widget.config,
204
- });
205
- };
206
- }
207
- else if (dd.tag === '廣告輪播') {
208
- gvc.glitter.share.first_banner = (_b = gvc.glitter.share.first_banner) !== null && _b !== void 0 ? _b : widget;
209
- widget = gvc.glitter.share.first_banner;
210
- widget_edited = widget.config[0];
211
- gvc.glitter.share.editorViewModel.saveArray[widget.id] = () => {
212
- return ApiPageConfig.setPage({
213
- id: widget.id,
214
- appName: widget.appName,
215
- tag: widget.tag,
216
- config: widget.config,
217
- });
218
- };
219
- }
220
- vm.edit_view =
221
- html `` +
222
- htmlGenerate.editor(gvc, {
223
- return_: false,
224
- refreshAll: () => {
225
- },
226
- setting: [widget_edited],
227
- deleteEvent: () => {
228
- },
229
- });
230
- vm.function = 'edit';
231
- gvc.notifyDataChange(vm.id);
232
- })}">編輯
233
- </div>
234
- </div>
235
- </div>
236
- <div class="w-100 mt-2 ${module_list.length ? `` : `d-none`}">
237
- <div class="bt_border_editor"
238
- data-bs-toggle="dropdown"
239
- aria-haspopup="true"
240
- aria-expanded="false"
241
- onclick="${gvc.event(() => {
242
- GlobalWidget.open(gvc, dd.tag);
243
- })}"
244
- >變更樣式
245
- </div>
246
- </div>
247
- </div>
248
- `;
249
- }
250
- catch (e) {
251
- }
252
- return setting_view + `<div class="mb-2"></div>`;
253
- });
254
- }
255
- return {
256
- bind: id,
257
- view: () => {
258
- if (!dd.toggle) {
259
- return ``;
260
- }
261
- else if (cvm.loading) {
262
- loadData().then((dd) => {
263
- cvm.html = dd;
264
- cvm.loading = false;
265
- gvc.notifyDataChange(id);
266
- });
267
- return html `
268
- <div class="d-flex w-100 align-items-center justify-content-center p-3">
269
- <div class="spinner-border"></div>
270
- </div>`;
271
- }
272
- else {
273
- return cvm.html;
274
- }
275
- },
276
- divCreate: {
277
- class: `row m-0 px-2`,
278
- style: 'cursor:pointer;',
279
- },
280
- };
85
+ ${ToolSetting.item({
86
+ gvc,
87
+ dd,
88
+ vm,
281
89
  })}
282
- </div>
283
- `;
284
- }, divCreate: { class: ' d-flex align-items-center' }
90
+ </div>
91
+ `;
92
+ },
93
+ divCreate: { class: ' d-flex align-items-center' },
285
94
  });
286
- }).join('');
95
+ })
96
+ .join('');
287
97
  },
288
98
  };
289
99
  })())}
290
- `;
100
+ `;
291
101
  },
292
102
  divCreate: {
293
103
  class: `p-2 mx-n2 mt-n2`,
294
104
  },
295
105
  };
296
- })].join('');
106
+ }),
107
+ ].join('');
108
+ }
109
+ static item(obj) {
110
+ const { gvc, dd, vm } = obj;
111
+ const html = String.raw;
112
+ return [
113
+ html ` <div class="px-2 mb-2 ${dd.toggle ? `` : `d-none`}" style="white-space: normal;t">
114
+ ${dd.hint && dd.toggle ? BgWidget.grayNote(dd.hint) : ``}
115
+ </div>`,
116
+ gvc.bindView(() => {
117
+ const id = gvc.glitter.getUUID();
118
+ const cvm = {
119
+ loading: true,
120
+ html: ``,
121
+ };
122
+ function loadData() {
123
+ return __awaiter(this, void 0, void 0, function* () {
124
+ let module_list = (yield ApiPageConfig.getPageTemplate({
125
+ template_from: 'all',
126
+ page: '0',
127
+ limit: '3000',
128
+ type: 'module',
129
+ tag: dd.tag,
130
+ })).response.result.data;
131
+ const ci_tag = (() => {
132
+ switch (dd.tag) {
133
+ case '標頭元件':
134
+ return 'c_header';
135
+ case '頁腳元件':
136
+ return `footer`;
137
+ case '商品卡片':
138
+ return `product_widget`;
139
+ case '廣告輪播':
140
+ return 'advertise';
141
+ }
142
+ })();
143
+ let setting_view = '';
144
+ let widget = yield (() => __awaiter(this, void 0, void 0, function* () {
145
+ if (['標頭元件', '頁腳元件', '商品卡片', '廣告輪播'].includes(dd.tag)) {
146
+ return (yield ApiPageConfig.getPage({
147
+ appName: window.appName,
148
+ type: 'template',
149
+ tag: ci_tag,
150
+ })).response.result[0];
151
+ }
152
+ else {
153
+ return {};
154
+ }
155
+ }))();
156
+ const refer_widget = yield (() => __awaiter(this, void 0, void 0, function* () {
157
+ if (['標頭元件', '頁腳元件', '商品卡片', '廣告輪播'].includes(dd.tag)) {
158
+ return (yield ApiPageConfig.getPage({
159
+ appName: widget.config[0].data.refer_app,
160
+ type: 'template',
161
+ tag: widget.config[0].data.tag,
162
+ })).response.result[0];
163
+ }
164
+ else {
165
+ return {};
166
+ }
167
+ }))();
168
+ const find_showed_widget = gvc.glitter.share.findWidget((d1) => {
169
+ return d1.data && d1.data.tag === ci_tag;
170
+ });
171
+ const widget_container = find_showed_widget.container || widget.config;
172
+ let widget_edited = find_showed_widget.widget || widget.config[0];
173
+ const htmlGenerate = new gvc.glitter.htmlGenerate(widget_container, [], {
174
+ editor_updated_callback: (oWidget) => {
175
+ if (dd.tag === '廣告輪播') {
176
+ FirstBanner.main({
177
+ gvc: document.querySelector('.iframe_view').contentWindow.glitter.pageConfig[0].gvc,
178
+ ed_widget: oWidget,
179
+ });
180
+ }
181
+ },
182
+ }, true);
183
+ gvc.glitter.share.editorViewModel.selectItem = widget_edited;
184
+ try {
185
+ module_list = module_list.filter((dd) => {
186
+ return dd.appName !== widget.config[0].data.refer_app || dd.tag !== widget.config[0].data.tag;
187
+ });
188
+ }
189
+ catch (e) {
190
+ module_list = [];
191
+ }
192
+ try {
193
+ setting_view += html `
194
+ <div class="col-12 p-0 m-0">
195
+ <div
196
+ class="position-relative"
197
+ style="width: 100%; padding: 18px 12px;border-radius: 7px; overflow: hidden; border: 1px #DDDDDD solid; flex-direction: column; justify-content: center; align-items: flex-start; gap: 32px; display: inline-flex"
198
+ >
199
+ <div
200
+ style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex"
201
+ >
202
+ <div
203
+ class="rounded-2 shadow"
204
+ style="background-position:center;background-repeat: no-repeat;background-size: cover;width:93px;height: 59px;background-image: url('${(() => {
205
+ switch (dd.tag) {
206
+ case '標頭元件':
207
+ return `${gvc.glitter.root_path}/editor-components/global-widget/src/header.png`;
208
+ case '頁腳元件':
209
+ return `${gvc.glitter.root_path}/editor-components/global-widget/src/footer.jpg`;
210
+ case '商品卡片':
211
+ return `${gvc.glitter.root_path}/editor-components/global-widget/src/product.jpg`;
212
+ case '廣告輪播':
213
+ return `${gvc.glitter.root_path}/editor-components/global-widget/src/banner.jpg`;
214
+ }
215
+ })()}');"
216
+ ></div>
217
+ <div
218
+ style="flex: 1 1 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex"
219
+ >
220
+ <div
221
+ style="align-self: stretch; color: #393939; font-size: 15px; font-weight: 400; word-wrap: break-word"
222
+ >
223
+ ${refer_widget.template_config.name}
224
+ </div>
225
+ </div>
226
+
227
+ <div
228
+ class="${(vm || dd.editable) ? `` : `d-none`}"
229
+ style="cursor: pointer;color: #36B;font-size: 15px; "
230
+ onclick="${gvc.event(() => {
231
+ var _a, _b;
232
+ if (dd.tag === '商品卡片') {
233
+ gvc.glitter.share.product_edit_w = (_a = gvc.glitter.share.product_edit_w) !== null && _a !== void 0 ? _a : widget;
234
+ widget = gvc.glitter.share.product_edit_w;
235
+ widget_edited = widget.config[0];
236
+ gvc.glitter.share.editorViewModel.saveArray[widget.id] = () => {
237
+ return ApiPageConfig.setPage({
238
+ id: widget.id,
239
+ appName: widget.appName,
240
+ tag: widget.tag,
241
+ config: widget.config,
242
+ });
243
+ };
244
+ }
245
+ else if (dd.tag === '廣告輪播') {
246
+ gvc.glitter.share.first_banner = (_b = gvc.glitter.share.first_banner) !== null && _b !== void 0 ? _b : widget;
247
+ widget = gvc.glitter.share.first_banner;
248
+ widget_edited = widget.config[0];
249
+ gvc.glitter.share.editorViewModel.saveArray[widget.id] = () => {
250
+ return ApiPageConfig.setPage({
251
+ id: widget.id,
252
+ appName: widget.appName,
253
+ tag: widget.tag,
254
+ config: widget.config,
255
+ });
256
+ };
257
+ }
258
+ if (vm) {
259
+ vm.edit_view =
260
+ html `` +
261
+ htmlGenerate.editor(gvc, {
262
+ return_: false,
263
+ refreshAll: () => { },
264
+ setting: [widget_edited],
265
+ deleteEvent: () => { },
266
+ });
267
+ vm.function = 'edit';
268
+ gvc.notifyDataChange(vm.id);
269
+ }
270
+ else {
271
+ gvc.glitter.pageConfig[0].gvc.getBindViewElem('right_NAV')[0].innerHTML = html `<div class="p-2">
272
+ ${htmlGenerate.editor(gvc, {
273
+ return_: false,
274
+ refreshAll: () => { },
275
+ setting: [widget_edited],
276
+ deleteEvent: () => { },
277
+ })}
278
+ </div>`;
279
+ }
280
+ })}"
281
+ >
282
+ 編輯
283
+ </div>
284
+ </div>
285
+ </div>
286
+ <div class="w-100 mt-2 ${module_list.length ? `` : `d-none`}">
287
+ <div
288
+ class="bt_border_editor"
289
+ data-bs-toggle="dropdown"
290
+ aria-haspopup="true"
291
+ aria-expanded="false"
292
+ onclick="${gvc.event(() => {
293
+ GlobalWidget.open(gvc, dd.tag);
294
+ })}"
295
+ >
296
+ 變更樣式
297
+ </div>
298
+ </div>
299
+ </div>
300
+ `;
301
+ }
302
+ catch (e) { }
303
+ return setting_view + `<div class="mb-2"></div>`;
304
+ });
305
+ }
306
+ return {
307
+ bind: id,
308
+ view: () => {
309
+ if (!dd.toggle) {
310
+ return ``;
311
+ }
312
+ else if (cvm.loading) {
313
+ loadData().then(dd => {
314
+ cvm.html = dd;
315
+ cvm.loading = false;
316
+ gvc.notifyDataChange(id);
317
+ });
318
+ return html ` <div class="d-flex w-100 align-items-center justify-content-center p-3">
319
+ <div class="spinner-border"></div>
320
+ </div>`;
321
+ }
322
+ else {
323
+ return cvm.html;
324
+ }
325
+ },
326
+ divCreate: {
327
+ class: `row m-0 px-2`,
328
+ style: 'cursor:pointer;',
329
+ },
330
+ };
331
+ }),
332
+ ].join('');
297
333
  }
298
334
  }
299
335
  ToolSetting.tool_setting_list = [
@@ -301,7 +337,7 @@ ToolSetting.tool_setting_list = [
301
337
  title: '標頭選單',
302
338
  tag: '標頭元件',
303
339
  hint: `全館 (首頁,隱形賣場,一頁式網頁) 的標頭將預設為以下樣式`,
304
- class: "guideDesign-2"
340
+ class: 'guideDesign-2',
305
341
  },
306
342
  {
307
343
  title: '頁腳選單',