ts-glitter 13.6.0 → 13.6.2
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/glitterBundle/html-component/widget.js +4 -50
- package/lowcode/glitterBundle/html-component/widget.ts +4 -50
- package/lowcode/glitterBundle/module/html-generate.js +6 -6
- package/lowcode/glitterBundle/module/html-generate.ts +6 -6
- package/lowcode/jspage/function-page/main_editor.js +181 -4
- package/lowcode/jspage/function-page/main_editor.ts +167 -4
- package/lowcode/jspage/main.js +12 -7
- package/lowcode/jspage/main.ts +12 -7
- package/lowcode/official_view_component/official/component.js +2 -2
- package/lowcode/official_view_component/official/component.ts +2 -2
- 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.6.
|
|
62
|
+
glitter.share.editerVersion = "V_13.6.2";
|
|
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.6.
|
|
63
|
+
glitter.share.editerVersion = "V_13.6.2";
|
|
64
64
|
glitter.share.start = (new Date());
|
|
65
65
|
const vm: {
|
|
66
66
|
appConfig: any;
|
|
@@ -260,57 +260,11 @@ export const widgetComponent = {
|
|
|
260
260
|
}
|
|
261
261
|
})()};height: 100%;"
|
|
262
262
|
onmousedown="${gvc.event(() => {
|
|
263
|
-
glitter.getModule(new URL(gvc.glitter.root_path + 'editor/add-component.js').href, (AddComponent) => {
|
|
264
|
-
glitter.share.editorViewModel.selectContainer = widget.data.setting;
|
|
265
|
-
AddComponent.toggle(true);
|
|
266
|
-
AddComponent.addWidget = (gvc, cf) => {
|
|
267
|
-
window.parent.glitter.share.editorViewModel.selectContainer = widget.data.setting;
|
|
268
|
-
window.parent.glitter.share.addComponent(cf);
|
|
269
|
-
RenderValue.custom_style.value(gvc, widget);
|
|
270
|
-
AddComponent.toggle(false);
|
|
271
|
-
};
|
|
272
|
-
AddComponent.addEvent = (gvc, tdata) => {
|
|
273
|
-
window.parent.glitter.share.editorViewModel.selectContainer = widget.data.setting;
|
|
274
|
-
window.parent.glitter.share.addComponent({
|
|
275
|
-
id: gvc.glitter.getUUID(),
|
|
276
|
-
js: './official_view_component/official.js',
|
|
277
|
-
css: {
|
|
278
|
-
class: {},
|
|
279
|
-
style: {},
|
|
280
|
-
},
|
|
281
|
-
data: {
|
|
282
|
-
refer_app: tdata.copyApp,
|
|
283
|
-
tag: tdata.copy,
|
|
284
|
-
list: [],
|
|
285
|
-
carryData: {},
|
|
286
|
-
_style_refer_global: {
|
|
287
|
-
index: `0`,
|
|
288
|
-
},
|
|
289
|
-
},
|
|
290
|
-
type: 'component',
|
|
291
|
-
class: 'w-100',
|
|
292
|
-
index: 0,
|
|
293
|
-
label: tdata.title,
|
|
294
|
-
style: '',
|
|
295
|
-
bundle: {},
|
|
296
|
-
global: [],
|
|
297
|
-
toggle: false,
|
|
298
|
-
stylist: [],
|
|
299
|
-
dataType: 'static',
|
|
300
|
-
style_from: 'code',
|
|
301
|
-
classDataType: 'static',
|
|
302
|
-
preloadEvenet: {},
|
|
303
|
-
share: {},
|
|
304
|
-
});
|
|
305
|
-
RenderValue.custom_style.value(gvc, widget);
|
|
306
|
-
AddComponent.toggle(false);
|
|
307
|
-
};
|
|
308
|
-
});
|
|
309
263
|
})}"
|
|
310
264
|
>
|
|
311
265
|
<i class="fa-regular fa-circle-plus text-black"
|
|
312
|
-
style="font-size:
|
|
313
|
-
<span class="fw-500 fs-
|
|
266
|
+
style="font-size: 50px;"></i>
|
|
267
|
+
<span class="fw-500 fs-6 mt-3">添加元件</span>
|
|
314
268
|
</div>`);
|
|
315
269
|
}
|
|
316
270
|
}
|
|
@@ -710,7 +664,7 @@ export const widgetComponent = {
|
|
|
710
664
|
type="button"
|
|
711
665
|
onclick="${gvc.event(() => {
|
|
712
666
|
vm.type = 'editor';
|
|
713
|
-
gvc.notifyDataChange(vm.id);
|
|
667
|
+
gvc.notifyDataChange([vm.id, 'item-editor-select']);
|
|
714
668
|
})}">
|
|
715
669
|
<span style="font-size: 14px; color: #393939; font-weight: 400;">更改命名</span>
|
|
716
670
|
</button>`;
|
|
@@ -739,7 +693,7 @@ export const widgetComponent = {
|
|
|
739
693
|
onclick="${gvc.event(() => {
|
|
740
694
|
vm.type = 'preview';
|
|
741
695
|
widget.label = name;
|
|
742
|
-
gvc.notifyDataChange(vm.id);
|
|
696
|
+
gvc.notifyDataChange([vm.id, 'item-editor-select']);
|
|
743
697
|
})}">
|
|
744
698
|
<span style="font-size: 14px; color: #393939; font-weight: 400;">確認</span>
|
|
745
699
|
</button>`;
|
|
@@ -261,57 +261,11 @@ export const widgetComponent = {
|
|
|
261
261
|
}
|
|
262
262
|
})()};height: 100%;"
|
|
263
263
|
onmousedown="${gvc.event(() => {
|
|
264
|
-
glitter.getModule(new URL(gvc.glitter.root_path + 'editor/add-component.js').href, (AddComponent: any) => {
|
|
265
|
-
glitter.share.editorViewModel.selectContainer = widget.data.setting;
|
|
266
|
-
AddComponent.toggle(true);
|
|
267
|
-
AddComponent.addWidget = (gvc: GVC, cf: any) => {
|
|
268
|
-
(window.parent as any).glitter.share.editorViewModel.selectContainer = widget.data.setting;
|
|
269
|
-
(window.parent as any).glitter.share.addComponent(cf);
|
|
270
|
-
RenderValue.custom_style.value(gvc, widget)
|
|
271
|
-
AddComponent.toggle(false);
|
|
272
|
-
};
|
|
273
|
-
AddComponent.addEvent = (gvc: GVC, tdata: any) => {
|
|
274
|
-
(window.parent as any).glitter.share.editorViewModel.selectContainer = widget.data.setting;
|
|
275
|
-
(window.parent as any).glitter.share.addComponent({
|
|
276
|
-
id: gvc.glitter.getUUID(),
|
|
277
|
-
js: './official_view_component/official.js',
|
|
278
|
-
css: {
|
|
279
|
-
class: {},
|
|
280
|
-
style: {},
|
|
281
|
-
},
|
|
282
|
-
data: {
|
|
283
|
-
refer_app: tdata.copyApp,
|
|
284
|
-
tag: tdata.copy,
|
|
285
|
-
list: [],
|
|
286
|
-
carryData: {},
|
|
287
|
-
_style_refer_global: {
|
|
288
|
-
index: `0`,
|
|
289
|
-
},
|
|
290
|
-
},
|
|
291
|
-
type: 'component',
|
|
292
|
-
class: 'w-100',
|
|
293
|
-
index: 0,
|
|
294
|
-
label: tdata.title,
|
|
295
|
-
style: '',
|
|
296
|
-
bundle: {},
|
|
297
|
-
global: [],
|
|
298
|
-
toggle: false,
|
|
299
|
-
stylist: [],
|
|
300
|
-
dataType: 'static',
|
|
301
|
-
style_from: 'code',
|
|
302
|
-
classDataType: 'static',
|
|
303
|
-
preloadEvenet: {},
|
|
304
|
-
share: {},
|
|
305
|
-
});
|
|
306
|
-
RenderValue.custom_style.value(gvc, widget)
|
|
307
|
-
AddComponent.toggle(false);
|
|
308
|
-
};
|
|
309
|
-
});
|
|
310
264
|
})}"
|
|
311
265
|
>
|
|
312
266
|
<i class="fa-regular fa-circle-plus text-black"
|
|
313
|
-
style="font-size:
|
|
314
|
-
<span class="fw-500 fs-
|
|
267
|
+
style="font-size: 50px;"></i>
|
|
268
|
+
<span class="fw-500 fs-6 mt-3">添加元件</span>
|
|
315
269
|
</div>`
|
|
316
270
|
);
|
|
317
271
|
|
|
@@ -744,7 +698,7 @@ export const widgetComponent = {
|
|
|
744
698
|
type="button"
|
|
745
699
|
onclick="${gvc.event(() => {
|
|
746
700
|
vm.type = 'editor'
|
|
747
|
-
gvc.notifyDataChange(vm.id)
|
|
701
|
+
gvc.notifyDataChange([vm.id,'item-editor-select'])
|
|
748
702
|
})}">
|
|
749
703
|
<span style="font-size: 14px; color: #393939; font-weight: 400;">更改命名</span>
|
|
750
704
|
</button>`
|
|
@@ -774,7 +728,7 @@ export const widgetComponent = {
|
|
|
774
728
|
onclick="${gvc.event(() => {
|
|
775
729
|
vm.type = 'preview';
|
|
776
730
|
widget.label = name;
|
|
777
|
-
gvc.notifyDataChange(vm.id)
|
|
731
|
+
gvc.notifyDataChange([vm.id,'item-editor-select'])
|
|
778
732
|
})}">
|
|
779
733
|
<span style="font-size: 14px; color: #393939; font-weight: 400;">確認</span>
|
|
780
734
|
</button>`
|
|
@@ -1829,11 +1829,11 @@ ${obj.gvc.bindView({
|
|
|
1829
1829
|
}
|
|
1830
1830
|
function active() {
|
|
1831
1831
|
try {
|
|
1832
|
+
glitter.share.editorViewModel.selectItem = dd;
|
|
1832
1833
|
Storage.page_setting_item = 'layout';
|
|
1833
|
-
glitter.pageConfig[gvc.glitter.pageConfig.length - 1].gvc.notifyDataChange(['top_sm_bar', 'left_sm_bar']);
|
|
1834
|
+
glitter.pageConfig[gvc.glitter.pageConfig.length - 1].gvc.notifyDataChange(['top_sm_bar', 'left_sm_bar', 'item-editor-select']);
|
|
1834
1835
|
gvc.glitter.$('.editorItemActive').removeClass('editorItemActive');
|
|
1835
1836
|
gvc.glitter.$(`.editor_it_${widgetComponentID}`).addClass('editorItemActive');
|
|
1836
|
-
glitter.share.editorViewModel.selectItem = dd;
|
|
1837
1837
|
Storage.lastSelect = dd.id;
|
|
1838
1838
|
glitter.share.selectEditorItem();
|
|
1839
1839
|
if (cf.scroll_to_hover) {
|
|
@@ -1841,9 +1841,6 @@ ${obj.gvc.bindView({
|
|
|
1841
1841
|
scrollToHover(gvc.glitter.$(`.editor_it_${widgetComponentID}`).get(0));
|
|
1842
1842
|
});
|
|
1843
1843
|
}
|
|
1844
|
-
if (document.body.clientWidth < 768) {
|
|
1845
|
-
glitter.openDrawer();
|
|
1846
|
-
}
|
|
1847
1844
|
event && event.stopPropagation && event.stopPropagation();
|
|
1848
1845
|
}
|
|
1849
1846
|
catch (e) {
|
|
@@ -1955,6 +1952,9 @@ background: white;
|
|
|
1955
1952
|
}
|
|
1956
1953
|
else {
|
|
1957
1954
|
function getPlusAndPasteView(dir) {
|
|
1955
|
+
if (window.parent.document.body.clientWidth < 800) {
|
|
1956
|
+
return ``;
|
|
1957
|
+
}
|
|
1958
1958
|
const detID = cf.gvc.glitter.getUUID();
|
|
1959
1959
|
const plusID = cf.gvc.glitter.getUUID();
|
|
1960
1960
|
let block_close = false;
|
|
@@ -2146,7 +2146,7 @@ transform: translateY(5px);
|
|
|
2146
2146
|
container_items.rerenderReplaceElem();
|
|
2147
2147
|
}
|
|
2148
2148
|
glitter.share.editorViewModel.selectItem = undefined;
|
|
2149
|
-
gvc.notifyDataChange(['right_NAV', 'MainEditorLeft']);
|
|
2149
|
+
gvc.notifyDataChange(['right_NAV', 'MainEditorLeft', 'item-editor-select']);
|
|
2150
2150
|
callback();
|
|
2151
2151
|
}
|
|
2152
2152
|
},
|
|
@@ -2341,11 +2341,11 @@ ${e.line}
|
|
|
2341
2341
|
|
|
2342
2342
|
function active() {
|
|
2343
2343
|
try {
|
|
2344
|
+
glitter.share.editorViewModel.selectItem = dd;
|
|
2344
2345
|
Storage.page_setting_item = 'layout';
|
|
2345
|
-
(glitter.pageConfig[gvc.glitter.pageConfig.length - 1] as any).gvc.notifyDataChange(['top_sm_bar','left_sm_bar']);
|
|
2346
|
+
(glitter.pageConfig[gvc.glitter.pageConfig.length - 1] as any).gvc.notifyDataChange(['top_sm_bar','left_sm_bar','item-editor-select']);
|
|
2346
2347
|
gvc.glitter.$('.editorItemActive').removeClass('editorItemActive');
|
|
2347
2348
|
gvc.glitter.$(`.editor_it_${widgetComponentID}`).addClass('editorItemActive');
|
|
2348
|
-
glitter.share.editorViewModel.selectItem = dd;
|
|
2349
2349
|
Storage.lastSelect = dd.id;
|
|
2350
2350
|
glitter.share.selectEditorItem();
|
|
2351
2351
|
if (cf.scroll_to_hover) {
|
|
@@ -2353,9 +2353,6 @@ ${e.line}
|
|
|
2353
2353
|
scrollToHover(gvc.glitter.$(`.editor_it_${widgetComponentID}`).get(0));
|
|
2354
2354
|
});
|
|
2355
2355
|
}
|
|
2356
|
-
if (document.body.clientWidth < 768) {
|
|
2357
|
-
glitter.openDrawer();
|
|
2358
|
-
}
|
|
2359
2356
|
event && event.stopPropagation && event.stopPropagation();
|
|
2360
2357
|
} catch (e) {
|
|
2361
2358
|
console.log(e);
|
|
@@ -2474,6 +2471,9 @@ background: white;
|
|
|
2474
2471
|
`
|
|
2475
2472
|
} else {
|
|
2476
2473
|
function getPlusAndPasteView(dir: number) {
|
|
2474
|
+
if((window.parent as any).document.body.clientWidth<800){
|
|
2475
|
+
return ``
|
|
2476
|
+
}
|
|
2477
2477
|
const detID = cf.gvc.glitter.getUUID()
|
|
2478
2478
|
const plusID = cf.gvc.glitter.getUUID()
|
|
2479
2479
|
let block_close = false
|
|
@@ -2686,7 +2686,7 @@ transform: translateY(5px);
|
|
|
2686
2686
|
container_items.rerenderReplaceElem()
|
|
2687
2687
|
}
|
|
2688
2688
|
glitter.share.editorViewModel.selectItem = undefined;
|
|
2689
|
-
gvc.notifyDataChange(['right_NAV', 'MainEditorLeft']);
|
|
2689
|
+
gvc.notifyDataChange(['right_NAV', 'MainEditorLeft','item-editor-select']);
|
|
2690
2690
|
callback();
|
|
2691
2691
|
}
|
|
2692
2692
|
},
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
1
10
|
import { Swal } from '../../modules/sweetAlert.js';
|
|
2
11
|
import { EditorElem } from '../../glitterBundle/plugins/editor-elem.js';
|
|
3
12
|
import { PageEditor } from '../../editor/page-editor.js';
|
|
@@ -1014,7 +1023,22 @@ export class Main_editor {
|
|
|
1014
1023
|
return (document.body.clientWidth < 800) ? document.body.clientWidth : document.body.clientWidth - 365;
|
|
1015
1024
|
}
|
|
1016
1025
|
})();
|
|
1017
|
-
const
|
|
1026
|
+
const tool_box = (() => {
|
|
1027
|
+
if (document.body.clientWidth < 800) {
|
|
1028
|
+
return 40;
|
|
1029
|
+
}
|
|
1030
|
+
else {
|
|
1031
|
+
return 0;
|
|
1032
|
+
}
|
|
1033
|
+
})();
|
|
1034
|
+
const container_height = (() => {
|
|
1035
|
+
if (gvc.glitter.share.top_inset) {
|
|
1036
|
+
return document.body.clientHeight - 56 - (parseInt(gvc.glitter.share.top_inset, 10) + 10);
|
|
1037
|
+
}
|
|
1038
|
+
else {
|
|
1039
|
+
return document.body.clientHeight - 56;
|
|
1040
|
+
}
|
|
1041
|
+
})() - tool_box;
|
|
1018
1042
|
const frame_width = (() => {
|
|
1019
1043
|
if (Storage.view_type === ViewType.mobile) {
|
|
1020
1044
|
return (container_width < 800) ? container_width : 414;
|
|
@@ -1035,7 +1059,10 @@ export class Main_editor {
|
|
|
1035
1059
|
frame.style.left = `0`;
|
|
1036
1060
|
}
|
|
1037
1061
|
if (gvc.glitter.share.top_inset) {
|
|
1038
|
-
frame.style.top = `${parseInt(gvc.glitter.share.top_inset, 10) + 10}
|
|
1062
|
+
frame.style.top = `${parseInt(gvc.glitter.share.top_inset, 10) + 10 + tool_box}px`;
|
|
1063
|
+
}
|
|
1064
|
+
else {
|
|
1065
|
+
frame.style.top = `${tool_box}px`;
|
|
1039
1066
|
}
|
|
1040
1067
|
};
|
|
1041
1068
|
return gvc.bindView(() => {
|
|
@@ -1057,6 +1084,157 @@ export class Main_editor {
|
|
|
1057
1084
|
<div class="position-relative w-100 h-100"
|
|
1058
1085
|
style="${(parseInt(gvc.glitter.share.top_inset, 10)) ? `padding-top:${parseInt(gvc.glitter.share.top_inset, 10)}px;` : ``}"
|
|
1059
1086
|
id="editerCenter">
|
|
1087
|
+
${(document.body.clientWidth < 800) ? gvc.bindView(() => {
|
|
1088
|
+
return {
|
|
1089
|
+
bind: `item-editor-select`,
|
|
1090
|
+
view: () => {
|
|
1091
|
+
if (gvc.glitter.share.editorViewModel.selectItem) {
|
|
1092
|
+
function addWidgetEvent(direction, component) {
|
|
1093
|
+
const cf = gvc.glitter.share.editorViewModel.selectItem;
|
|
1094
|
+
let glitter = window.glitter;
|
|
1095
|
+
while (!glitter.share.editorViewModel) {
|
|
1096
|
+
glitter = window.parent.glitter;
|
|
1097
|
+
}
|
|
1098
|
+
if (component) {
|
|
1099
|
+
component = JSON.parse(JSON.stringify(component));
|
|
1100
|
+
component.id = gvc.glitter.getUUID();
|
|
1101
|
+
glitter.share.addWithIndex({
|
|
1102
|
+
data: component,
|
|
1103
|
+
index: cf.id,
|
|
1104
|
+
direction: direction,
|
|
1105
|
+
});
|
|
1106
|
+
}
|
|
1107
|
+
else {
|
|
1108
|
+
glitter.getModule(new URL('../.././editor/add-component.js', import.meta.url).href, (AddComponent) => {
|
|
1109
|
+
AddComponent.toggle(true);
|
|
1110
|
+
AddComponent.addWidget = (gvc, tdata) => {
|
|
1111
|
+
glitter.share.addWithIndex({
|
|
1112
|
+
data: tdata,
|
|
1113
|
+
index: cf.id,
|
|
1114
|
+
direction: direction,
|
|
1115
|
+
});
|
|
1116
|
+
};
|
|
1117
|
+
AddComponent.addEvent = (gvc, tdata) => {
|
|
1118
|
+
glitter.share.addWithIndex({
|
|
1119
|
+
data: {
|
|
1120
|
+
id: gvc.glitter.getUUID(),
|
|
1121
|
+
js: './official_view_component/official.js',
|
|
1122
|
+
css: {
|
|
1123
|
+
class: {},
|
|
1124
|
+
style: {},
|
|
1125
|
+
},
|
|
1126
|
+
data: {
|
|
1127
|
+
refer_app: tdata.copyApp,
|
|
1128
|
+
tag: tdata.copy,
|
|
1129
|
+
list: [],
|
|
1130
|
+
carryData: {},
|
|
1131
|
+
_style_refer_global: {
|
|
1132
|
+
index: `0`,
|
|
1133
|
+
},
|
|
1134
|
+
},
|
|
1135
|
+
type: 'component',
|
|
1136
|
+
class: 'w-100',
|
|
1137
|
+
index: 0,
|
|
1138
|
+
label: tdata.title,
|
|
1139
|
+
style: '',
|
|
1140
|
+
bundle: {},
|
|
1141
|
+
global: [],
|
|
1142
|
+
toggle: false,
|
|
1143
|
+
stylist: [],
|
|
1144
|
+
dataType: 'static',
|
|
1145
|
+
style_from: 'code',
|
|
1146
|
+
classDataType: 'static',
|
|
1147
|
+
preloadEvenet: {},
|
|
1148
|
+
share: {},
|
|
1149
|
+
},
|
|
1150
|
+
index: cf.id,
|
|
1151
|
+
direction: direction,
|
|
1152
|
+
});
|
|
1153
|
+
};
|
|
1154
|
+
});
|
|
1155
|
+
}
|
|
1156
|
+
}
|
|
1157
|
+
function readAndPasteClipboardContent(index) {
|
|
1158
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
1159
|
+
const dialog = new ShareDialog(gvc.glitter);
|
|
1160
|
+
try {
|
|
1161
|
+
const json = JSON.parse(yield navigator.clipboard.readText());
|
|
1162
|
+
if (!json.id) {
|
|
1163
|
+
dialog.errorMessage({ text: '請選擇要複製的元件，並按下複製元件後再執行貼上。' });
|
|
1164
|
+
}
|
|
1165
|
+
else {
|
|
1166
|
+
addWidgetEvent(index, json);
|
|
1167
|
+
}
|
|
1168
|
+
}
|
|
1169
|
+
catch (error) {
|
|
1170
|
+
dialog.errorMessage({ text: '請選擇要複製的元件，並按下複製元件。' });
|
|
1171
|
+
}
|
|
1172
|
+
});
|
|
1173
|
+
}
|
|
1174
|
+
return html `
|
|
1175
|
+
<div class="border-bottom d-flex align-items-center px-2 shadow"
|
|
1176
|
+
style="height:40px;gap:7px;background: linear-gradient(143deg, #FFB400 -22.7%, #FF6C02 114.57%);color:white;">
|
|
1177
|
+
<div class="fw-500 fs-6"
|
|
1178
|
+
style="text-overflow: ellipsis;overflow: hidden !important;">
|
|
1179
|
+
${gvc.glitter.share.editorViewModel.selectItem.label}
|
|
1180
|
+
</div>
|
|
1181
|
+
<div class="flex-fill"></div>
|
|
1182
|
+
<div class="rounded-1 border bg-white p-1 px-2 fw-500"
|
|
1183
|
+
style="font-size: 14px;color:black;"
|
|
1184
|
+
onclick="${gvc.event(() => {
|
|
1185
|
+
gvc.glitter.openDrawer();
|
|
1186
|
+
})}">編輯</div>
|
|
1187
|
+
<div class="rounded-1 border bg-white p-1 px-2 fw-500"
|
|
1188
|
+
style="font-size: 14px;color:black;"
|
|
1189
|
+
onclick="${gvc.event(() => {
|
|
1190
|
+
const dialog = new ShareDialog(gvc.glitter);
|
|
1191
|
+
navigator.clipboard.writeText(JSON.stringify(gvc.glitter.share.editorViewModel.selectItem));
|
|
1192
|
+
dialog.successMessage({ text: '複製成功，滑動至要插入的區塊，並點擊貼上。' });
|
|
1193
|
+
})}">複製
|
|
1194
|
+
</div>
|
|
1195
|
+
<div class="btn-group dropdown">
|
|
1196
|
+
<div class="rounded-1 border bg-white p-1 px-2 fw-500"
|
|
1197
|
+
style="font-size: 14px;color:black;"
|
|
1198
|
+
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">貼上
|
|
1199
|
+
</div>
|
|
1200
|
+
<div class="dropdown-menu my-1">
|
|
1201
|
+
<a class="dropdown-item" onclick="${gvc.event(() => {
|
|
1202
|
+
gvc.glitter.htmlGenerate.block_timer = new Date().getTime();
|
|
1203
|
+
readAndPasteClipboardContent(-1);
|
|
1204
|
+
})}">向上貼上元件</a>
|
|
1205
|
+
<a class="dropdown-item" onclick="${gvc.event(() => {
|
|
1206
|
+
gvc.glitter.htmlGenerate.block_timer = new Date().getTime();
|
|
1207
|
+
readAndPasteClipboardContent(1);
|
|
1208
|
+
})}">向下貼上元件</a>
|
|
1209
|
+
</div>
|
|
1210
|
+
</div>
|
|
1211
|
+
<div class="btn-group dropdown">
|
|
1212
|
+
<div class="rounded-1 border bg-white p-1 px-2 fw-500"
|
|
1213
|
+
style="font-size: 14px;color:black;"
|
|
1214
|
+
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">新增
|
|
1215
|
+
</div>
|
|
1216
|
+
<div class="dropdown-menu my-1">
|
|
1217
|
+
<a class="dropdown-item" onclick="${gvc.event(() => {
|
|
1218
|
+
addWidgetEvent(-1);
|
|
1219
|
+
})}">向上添加元件</a>
|
|
1220
|
+
<a class="dropdown-item" onclick="${gvc.event(() => {
|
|
1221
|
+
addWidgetEvent(1);
|
|
1222
|
+
})}">向下添加元件</a>
|
|
1223
|
+
</div>
|
|
1224
|
+
</div>
|
|
1225
|
+
</div>`;
|
|
1226
|
+
}
|
|
1227
|
+
else {
|
|
1228
|
+
return `<div class="border-bottom d-flex align-items-center px-2 shadow" style="height:40px;gap:10px;background: linear-gradient(143deg, #FFB400 -22.7%, #FF6C02 114.57%);color:white;">
|
|
1229
|
+
<div class="flex-fill"></div>
|
|
1230
|
+
<div class="fw-500 fs-6" style="text-overflow: ellipsis;overflow: hidden !important;">點擊區段來編輯內容</div>
|
|
1231
|
+
<div class="flex-fill"></div>
|
|
1232
|
+
</div>`;
|
|
1233
|
+
}
|
|
1234
|
+
},
|
|
1235
|
+
divCreate: {}
|
|
1236
|
+
};
|
|
1237
|
+
}) : ``}
|
|
1060
1238
|
<iframe class="bg-white iframe_view"
|
|
1061
1239
|
style="transform-origin: top left; /* 從左上角縮放 */
|
|
1062
1240
|
position: absolute;
|
|
@@ -1064,8 +1242,7 @@ export class Main_editor {
|
|
|
1064
1242
|
left: 0;"
|
|
1065
1243
|
sandbox="allow-same-origin allow-scripts"
|
|
1066
1244
|
src="${gvc.glitter.root_path}${gvc.glitter.getUrlParameter('page')}?type=htmlEditor&appName=${gvc.glitter.getUrlParameter('appName')}&device=${gvc.glitter.getUrlParameter('device')}"></iframe>
|
|
1067
|
-
</div
|
|
1068
|
-
`;
|
|
1245
|
+
</div>`;
|
|
1069
1246
|
}
|
|
1070
1247
|
},
|
|
1071
1248
|
divCreate: () => {
|
|
@@ -1102,7 +1102,20 @@ export class Main_editor {
|
|
|
1102
1102
|
return (document.body.clientWidth < 800) ? document.body.clientWidth : document.body.clientWidth - 365;
|
|
1103
1103
|
}
|
|
1104
1104
|
})()
|
|
1105
|
-
const
|
|
1105
|
+
const tool_box = (() => {
|
|
1106
|
+
if (document.body.clientWidth < 800) {
|
|
1107
|
+
return 40
|
|
1108
|
+
} else {
|
|
1109
|
+
return 0
|
|
1110
|
+
}
|
|
1111
|
+
})()
|
|
1112
|
+
const container_height = (() => {
|
|
1113
|
+
if (gvc.glitter.share.top_inset) {
|
|
1114
|
+
return document.body.clientHeight - 56 - (parseInt(gvc.glitter.share.top_inset, 10) + 10);
|
|
1115
|
+
} else {
|
|
1116
|
+
return document.body.clientHeight - 56;
|
|
1117
|
+
}
|
|
1118
|
+
})() - tool_box
|
|
1106
1119
|
const frame_width = (() => {
|
|
1107
1120
|
if (Storage.view_type === ViewType.mobile) {
|
|
1108
1121
|
return (container_width < 800) ? container_width : 414
|
|
@@ -1110,6 +1123,7 @@ export class Main_editor {
|
|
|
1110
1123
|
return (container_width > 1300) ? container_width : 1300
|
|
1111
1124
|
}
|
|
1112
1125
|
})()
|
|
1126
|
+
|
|
1113
1127
|
const frame_height = container_height * (frame_width / container_width);
|
|
1114
1128
|
const frame: any = document.querySelector('.iframe_view')!
|
|
1115
1129
|
frame.style.width = `${frame_width}px`;
|
|
@@ -1121,8 +1135,11 @@ export class Main_editor {
|
|
|
1121
1135
|
frame.style.left = `0`;
|
|
1122
1136
|
}
|
|
1123
1137
|
if (gvc.glitter.share.top_inset) {
|
|
1124
|
-
frame.style.top = `${parseInt(gvc.glitter.share.top_inset, 10) + 10}
|
|
1138
|
+
frame.style.top = `${parseInt(gvc.glitter.share.top_inset, 10) + 10 + tool_box}px`;
|
|
1139
|
+
} else {
|
|
1140
|
+
frame.style.top = `${tool_box}px`;
|
|
1125
1141
|
}
|
|
1142
|
+
|
|
1126
1143
|
}
|
|
1127
1144
|
return gvc.bindView(() => {
|
|
1128
1145
|
return {
|
|
@@ -1142,6 +1159,153 @@ export class Main_editor {
|
|
|
1142
1159
|
<div class="position-relative w-100 h-100"
|
|
1143
1160
|
style="${(parseInt(gvc.glitter.share.top_inset, 10)) ? `padding-top:${parseInt(gvc.glitter.share.top_inset, 10)}px;` : ``}"
|
|
1144
1161
|
id="editerCenter">
|
|
1162
|
+
${(document.body.clientWidth < 800) ? gvc.bindView(() => {
|
|
1163
|
+
return {
|
|
1164
|
+
bind: `item-editor-select`,
|
|
1165
|
+
view: () => {
|
|
1166
|
+
if (gvc.glitter.share.editorViewModel.selectItem) {
|
|
1167
|
+
function addWidgetEvent(direction: number, component?: any) {
|
|
1168
|
+
const cf=gvc.glitter.share.editorViewModel.selectItem
|
|
1169
|
+
let glitter = (window as any).glitter;
|
|
1170
|
+
while (!glitter.share.editorViewModel) {
|
|
1171
|
+
glitter = (window.parent as any).glitter;
|
|
1172
|
+
}
|
|
1173
|
+
if (component) {
|
|
1174
|
+
component=JSON.parse(JSON.stringify(component))
|
|
1175
|
+
component.id=gvc.glitter.getUUID()
|
|
1176
|
+
glitter.share.addWithIndex({
|
|
1177
|
+
data: component,
|
|
1178
|
+
index: cf.id,
|
|
1179
|
+
direction: direction,
|
|
1180
|
+
});
|
|
1181
|
+
} else {
|
|
1182
|
+
glitter.getModule(new URL('../.././editor/add-component.js', import.meta.url).href, (AddComponent: any) => {
|
|
1183
|
+
AddComponent.toggle(true)
|
|
1184
|
+
AddComponent.addWidget = (gvc: GVC, tdata: any) => {
|
|
1185
|
+
glitter.share.addWithIndex({
|
|
1186
|
+
data: tdata,
|
|
1187
|
+
index: cf.id,
|
|
1188
|
+
direction: direction,
|
|
1189
|
+
});
|
|
1190
|
+
};
|
|
1191
|
+
AddComponent.addEvent = (gvc: GVC, tdata: any) => {
|
|
1192
|
+
glitter.share.addWithIndex({
|
|
1193
|
+
data: {
|
|
1194
|
+
id: gvc.glitter.getUUID(),
|
|
1195
|
+
js: './official_view_component/official.js',
|
|
1196
|
+
css: {
|
|
1197
|
+
class: {},
|
|
1198
|
+
style: {},
|
|
1199
|
+
},
|
|
1200
|
+
data: {
|
|
1201
|
+
refer_app: tdata.copyApp,
|
|
1202
|
+
tag: tdata.copy,
|
|
1203
|
+
list: [],
|
|
1204
|
+
carryData: {},
|
|
1205
|
+
_style_refer_global: {
|
|
1206
|
+
index: `0`,
|
|
1207
|
+
},
|
|
1208
|
+
},
|
|
1209
|
+
type: 'component',
|
|
1210
|
+
class: 'w-100',
|
|
1211
|
+
index: 0,
|
|
1212
|
+
label: tdata.title,
|
|
1213
|
+
style: '',
|
|
1214
|
+
bundle: {},
|
|
1215
|
+
global: [],
|
|
1216
|
+
toggle: false,
|
|
1217
|
+
stylist: [],
|
|
1218
|
+
dataType: 'static',
|
|
1219
|
+
style_from: 'code',
|
|
1220
|
+
classDataType: 'static',
|
|
1221
|
+
preloadEvenet: {},
|
|
1222
|
+
share: {},
|
|
1223
|
+
},
|
|
1224
|
+
index: cf.id,
|
|
1225
|
+
direction: direction,
|
|
1226
|
+
});
|
|
1227
|
+
};
|
|
1228
|
+
});
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
}
|
|
1232
|
+
async function readAndPasteClipboardContent(index:number) {
|
|
1233
|
+
const dialog=new ShareDialog(gvc.glitter)
|
|
1234
|
+
try {
|
|
1235
|
+
// 使用 navigator.clipboard.readText() 方法取得剪貼簿的文字內容
|
|
1236
|
+
const json: any = JSON.parse(await navigator.clipboard.readText());
|
|
1237
|
+
if (!json.id) {
|
|
1238
|
+
dialog.errorMessage({text: '請選擇要複製的元件，並按下複製元件後再執行貼上。'})
|
|
1239
|
+
} else {
|
|
1240
|
+
addWidgetEvent(index, json);
|
|
1241
|
+
}
|
|
1242
|
+
} catch (error) {
|
|
1243
|
+
dialog.errorMessage({text: '請選擇要複製的元件，並按下複製元件。'})
|
|
1244
|
+
}
|
|
1245
|
+
}
|
|
1246
|
+
return html`
|
|
1247
|
+
<div class="border-bottom d-flex align-items-center px-2 shadow"
|
|
1248
|
+
style="height:40px;gap:7px;background: linear-gradient(143deg, #FFB400 -22.7%, #FF6C02 114.57%);color:white;">
|
|
1249
|
+
<div class="fw-500 fs-6"
|
|
1250
|
+
style="text-overflow: ellipsis;overflow: hidden !important;">
|
|
1251
|
+
${gvc.glitter.share.editorViewModel.selectItem.label}
|
|
1252
|
+
</div>
|
|
1253
|
+
<div class="flex-fill"></div>
|
|
1254
|
+
<div class="rounded-1 border bg-white p-1 px-2 fw-500"
|
|
1255
|
+
style="font-size: 14px;color:black;"
|
|
1256
|
+
onclick="${gvc.event(() => {
|
|
1257
|
+
gvc.glitter.openDrawer();
|
|
1258
|
+
})}">編輯</div>
|
|
1259
|
+
<div class="rounded-1 border bg-white p-1 px-2 fw-500"
|
|
1260
|
+
style="font-size: 14px;color:black;"
|
|
1261
|
+
onclick="${gvc.event(()=>{
|
|
1262
|
+
const dialog = new ShareDialog(gvc.glitter)
|
|
1263
|
+
navigator.clipboard.writeText(JSON.stringify(gvc.glitter.share.editorViewModel.selectItem));
|
|
1264
|
+
dialog.successMessage({text: '複製成功，滑動至要插入的區塊，並點擊貼上。'})
|
|
1265
|
+
})}">複製
|
|
1266
|
+
</div>
|
|
1267
|
+
<div class="btn-group dropdown">
|
|
1268
|
+
<div class="rounded-1 border bg-white p-1 px-2 fw-500"
|
|
1269
|
+
style="font-size: 14px;color:black;"
|
|
1270
|
+
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">貼上
|
|
1271
|
+
</div>
|
|
1272
|
+
<div class="dropdown-menu my-1">
|
|
1273
|
+
<a class="dropdown-item" onclick="${gvc.event(()=>{
|
|
1274
|
+
gvc.glitter.htmlGenerate.block_timer = new Date().getTime();
|
|
1275
|
+
readAndPasteClipboardContent(-1)
|
|
1276
|
+
})}">向上貼上元件</a>
|
|
1277
|
+
<a class="dropdown-item" onclick="${gvc.event(()=>{
|
|
1278
|
+
gvc.glitter.htmlGenerate.block_timer = new Date().getTime();
|
|
1279
|
+
readAndPasteClipboardContent(1)
|
|
1280
|
+
})}">向下貼上元件</a>
|
|
1281
|
+
</div>
|
|
1282
|
+
</div>
|
|
1283
|
+
<div class="btn-group dropdown">
|
|
1284
|
+
<div class="rounded-1 border bg-white p-1 px-2 fw-500"
|
|
1285
|
+
style="font-size: 14px;color:black;"
|
|
1286
|
+
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">新增
|
|
1287
|
+
</div>
|
|
1288
|
+
<div class="dropdown-menu my-1">
|
|
1289
|
+
<a class="dropdown-item" onclick="${gvc.event(()=>{
|
|
1290
|
+
addWidgetEvent(-1)
|
|
1291
|
+
})}">向上添加元件</a>
|
|
1292
|
+
<a class="dropdown-item" onclick="${gvc.event(()=>{
|
|
1293
|
+
addWidgetEvent(1)
|
|
1294
|
+
})}">向下添加元件</a>
|
|
1295
|
+
</div>
|
|
1296
|
+
</div>
|
|
1297
|
+
</div>`
|
|
1298
|
+
} else {
|
|
1299
|
+
return `<div class="border-bottom d-flex align-items-center px-2 shadow" style="height:40px;gap:10px;background: linear-gradient(143deg, #FFB400 -22.7%, #FF6C02 114.57%);color:white;">
|
|
1300
|
+
<div class="flex-fill"></div>
|
|
1301
|
+
<div class="fw-500 fs-6" style="text-overflow: ellipsis;overflow: hidden !important;">點擊區段來編輯內容</div>
|
|
1302
|
+
<div class="flex-fill"></div>
|
|
1303
|
+
</div>`
|
|
1304
|
+
}
|
|
1305
|
+
},
|
|
1306
|
+
divCreate: {}
|
|
1307
|
+
}
|
|
1308
|
+
}) : ``}
|
|
1145
1309
|
<iframe class="bg-white iframe_view"
|
|
1146
1310
|
style="transform-origin: top left; /* 從左上角縮放 */
|
|
1147
1311
|
position: absolute;
|
|
@@ -1149,8 +1313,7 @@ export class Main_editor {
|
|
|
1149
1313
|
left: 0;"
|
|
1150
1314
|
sandbox="allow-same-origin allow-scripts"
|
|
1151
1315
|
src="${gvc.glitter.root_path}${gvc.glitter.getUrlParameter('page')}?type=htmlEditor&appName=${gvc.glitter.getUrlParameter('appName')}&device=${gvc.glitter.getUrlParameter('device')}"></iframe>
|
|
1152
|
-
</div
|
|
1153
|
-
`
|
|
1316
|
+
</div>`
|
|
1154
1317
|
}
|
|
1155
1318
|
},
|
|
1156
1319
|
divCreate: () => {
|
package/lowcode/jspage/main.js
CHANGED
|
@@ -1140,17 +1140,22 @@ function initialEditor(gvc, viewModel) {
|
|
|
1140
1140
|
root: arrayData.container.container_config.root,
|
|
1141
1141
|
}))[cf.direction === 1 ? 'insertAfter' : 'insertBefore']($(`.editor_it_${cf.index}`).parent());
|
|
1142
1142
|
setTimeout(() => {
|
|
1143
|
+
console.log(`cf.data.id==>`, cf.data.id);
|
|
1143
1144
|
Storage.lastSelect = cf.data.id;
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1145
|
+
function pasteEvent() {
|
|
1146
|
+
glitter.htmlGenerate.selectWidget({
|
|
1147
|
+
widget: cf.data,
|
|
1148
|
+
widgetComponentID: cf.data.id,
|
|
1149
|
+
gvc: arrayData.container.container_config.gvc,
|
|
1150
|
+
scroll_to_hover: true,
|
|
1151
|
+
glitter: glitter,
|
|
1152
|
+
});
|
|
1153
|
+
}
|
|
1154
|
+
pasteEvent();
|
|
1151
1155
|
setTimeout(() => {
|
|
1152
1156
|
glitter.share.left_block_hover = false;
|
|
1153
1157
|
glitter.share.loading_dialog.dataLoading({ visible: false });
|
|
1158
|
+
pasteEvent();
|
|
1154
1159
|
}, 1000);
|
|
1155
1160
|
}, 100);
|
|
1156
1161
|
AddComponent.toggle(false);
|
package/lowcode/jspage/main.ts
CHANGED
|
@@ -1263,17 +1263,22 @@ function initialEditor(gvc: GVC, viewModel: any) {
|
|
|
1263
1263
|
)[cf.direction === 1 ? 'insertAfter' : 'insertBefore']($(`.editor_it_${cf.index}`).parent());
|
|
1264
1264
|
//
|
|
1265
1265
|
setTimeout(() => {
|
|
1266
|
+
console.log(`cf.data.id==>`,cf.data.id)
|
|
1266
1267
|
Storage.lastSelect = cf.data.id
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1268
|
+
function pasteEvent(){
|
|
1269
|
+
glitter.htmlGenerate.selectWidget({
|
|
1270
|
+
widget: cf.data,
|
|
1271
|
+
widgetComponentID: cf.data.id,
|
|
1272
|
+
gvc: arrayData.container.container_config.gvc,
|
|
1273
|
+
scroll_to_hover: true,
|
|
1274
|
+
glitter: glitter,
|
|
1275
|
+
});
|
|
1276
|
+
}
|
|
1277
|
+
pasteEvent()
|
|
1274
1278
|
setTimeout(() => {
|
|
1275
1279
|
glitter.share.left_block_hover = false
|
|
1276
1280
|
glitter.share.loading_dialog.dataLoading({visible: false})
|
|
1281
|
+
pasteEvent()
|
|
1277
1282
|
}, 1000)
|
|
1278
1283
|
}, 100)
|
|
1279
1284
|
AddComponent.toggle(false);
|
|
@@ -686,7 +686,7 @@ export const component = Plugin.createComponent(import.meta.url, (glitter, editM
|
|
|
686
686
|
onclick="${gvc.event((e, event) => {
|
|
687
687
|
event.stopPropagation();
|
|
688
688
|
vm.type = 'editor';
|
|
689
|
-
gvc.notifyDataChange(vm.id);
|
|
689
|
+
gvc.notifyDataChange([vm.id]);
|
|
690
690
|
})}">
|
|
691
691
|
<span style="font-size: 14px; color: #393939; font-weight: 400;">更改命名</span>
|
|
692
692
|
</button>`;
|
|
@@ -714,7 +714,7 @@ export const component = Plugin.createComponent(import.meta.url, (glitter, editM
|
|
|
714
714
|
event.stopPropagation();
|
|
715
715
|
vm.type = 'preview';
|
|
716
716
|
widget.label = name;
|
|
717
|
-
gvc.notifyDataChange(vm.id);
|
|
717
|
+
gvc.notifyDataChange([vm.id, 'item-editor-select']);
|
|
718
718
|
})}">
|
|
719
719
|
<span style="font-size: 14px; color: #393939; font-weight: 400;">確認</span>
|
|
720
720
|
</button>`;
|
|
@@ -708,7 +708,7 @@ export const component = Plugin.createComponent(import.meta.url, (glitter: Glitt
|
|
|
708
708
|
onclick="${gvc.event((e, event) => {
|
|
709
709
|
event.stopPropagation();
|
|
710
710
|
vm.type = 'editor'
|
|
711
|
-
gvc.notifyDataChange(vm.id)
|
|
711
|
+
gvc.notifyDataChange([vm.id])
|
|
712
712
|
})}">
|
|
713
713
|
<span style="font-size: 14px; color: #393939; font-weight: 400;">更改命名</span>
|
|
714
714
|
</button>`
|
|
@@ -737,7 +737,7 @@ export const component = Plugin.createComponent(import.meta.url, (glitter: Glitt
|
|
|
737
737
|
event.stopPropagation();
|
|
738
738
|
vm.type = 'preview';
|
|
739
739
|
widget.label = name;
|
|
740
|
-
gvc.notifyDataChange(vm.id)
|
|
740
|
+
gvc.notifyDataChange([vm.id,'item-editor-select'])
|
|
741
741
|
})}">
|
|
742
742
|
<span style="font-size: 14px; color: #393939; font-weight: 400;">確認</span>
|
|
743
743
|
</button>`
|