Skip to content

Commit bf0d994

Browse files
author
hikki
committed
7.1
1 parent feced72 commit bf0d994

File tree

2 files changed

+109
-88
lines changed

2 files changed

+109
-88
lines changed

‎resources/assets/component.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
margin-right: auto;
3131
margin-left: auto;
3232
}
33-
.dlp i{cursor: pointer!important;}
33+
.dlp i{cursor: pointer!important;display: flex;line-height: unset;}
3434
.dlp p,.dlp span{margin: 0!important;padding: 0!important;}
3535
.dlp .text-white{color: rgba(255,255,255,.9);}
3636
.dlp-text{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
@@ -380,7 +380,7 @@
380380
.dlp-plane-gauze{
381381
display: block;
382382
background: rgba(0,0,0,0.3);
383-
position: fixed;
383+
position: absolute;
384384
top: 0;
385385
right: 0;
386386
bottom: 0;

‎resources/assets/component.js

Lines changed: 107 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1431,23 +1431,31 @@ window.ComponentPlane = class {
14311431
}, options);
14321432
this.FULLSCREEN = false;
14331433

1434-
let width = this.OPTIONS.width;
1435-
if (this.OPTIONS.width.toString().indexOf('px') === -1 && this.OPTIONS.width.toString().indexOf('%') === -1) {
1436-
width = window.innerWidth * this.OPTIONS.width;
1437-
if (width >= (window.innerWidth - 18)) width = window.innerWidth - 18;
1438-
width += 'px';
1439-
}
1440-
let height = this.OPTIONS.height;
1441-
if (this.OPTIONS.height.toString().indexOf('px') === -1 && this.OPTIONS.height.toString().indexOf('%') === -1) {
1442-
height = window.innerHeight * this.OPTIONS.height;
1443-
if (height >= (window.innerHeight - 25)) height = window.innerHeight - 25;
1444-
height += 'px';
1445-
}
1446-
if(this.OPTIONS.top === 'auto'){
1447-
this.OPTIONS.top = ((window.innerHeight - parseInt(height) - 25) / 2) + 'px';
1448-
}
1449-
this.WIDTH = width;
1450-
this.HEIGHT = height;
1434+
this._calcWindowSize = function () {
1435+
let width = this.OPTIONS.width;
1436+
let height = this.OPTIONS.height;
1437+
let windowX = window.innerWidth;
1438+
let windowY = window.innerHeight;
1439+
if(this.PARENT_DOM instanceof HTMLElement){
1440+
windowX = this.PARENT_DOM.clientWidth;
1441+
windowY = this.PARENT_DOM.clientHeight;
1442+
}
1443+
if (this.OPTIONS.width.toString().indexOf('px') === -1 && this.OPTIONS.width.toString().indexOf('%') === -1) {
1444+
width = windowX * this.OPTIONS.width;
1445+
if (width >= (windowX - 18)) width = windowX - 18;
1446+
width += 'px';
1447+
}
1448+
if (this.OPTIONS.height.toString().indexOf('px') === -1 && this.OPTIONS.height.toString().indexOf('%') === -1) {
1449+
height = windowY * this.OPTIONS.height;
1450+
if (height >= (windowY - 25)) height = windowY - 25;
1451+
height += 'px';
1452+
}
1453+
if(this.OPTIONS.top === 'auto'){
1454+
this.OPTIONS.top = ((windowY - parseInt(height) - 25) / 2) + 'px';
1455+
}
1456+
this.WIDTH = width;
1457+
this.HEIGHT = height;
1458+
};
14511459

14521460
this._appendF = function () {
14531461
let F = document.createElement('i');
@@ -1503,7 +1511,7 @@ window.ComponentPlane = class {
15031511
div.insertAdjacentHTML('afterbegin',dom);
15041512
}
15051513
this.DOM.querySelector('.plane-header').append(div);
1506-
}
1514+
};
15071515

15081516
this._xhrContent = function () {
15091517
_component.loading(this.MODEL_BODY_DOM);
@@ -1625,6 +1633,7 @@ window.ComponentPlane = class {
16251633
}
16261634

16271635
make() {
1636+
this._calcWindowSize();
16281637
let margin = this.OPTIONS.top + ' ' + this.OPTIONS.left;
16291638
let Plane = document.createElement('div');
16301639
Plane.style.width = this.WIDTH;
@@ -1850,6 +1859,7 @@ window.ComponentCascadeLine = class {
18501859
this.DOM.addEventListener("contextmenu", (e) => {
18511860
e.preventDefault();
18521861
});
1862+
this.DOM.style.position = 'relative';
18531863
this.HEADER_DOM = this.DOM.querySelector(`.dot-top`);
18541864
this.CONTENT_DOM = this.DOM.querySelector(`.dot-select`);
18551865
this.SEARCH_BOX = this.DOM.querySelector(`.search-box`);
@@ -1865,9 +1875,8 @@ window.ComponentCascadeLine = class {
18651875
url: this.URL + '/create',
18661876
method: 'GET',
18671877
data: {},
1868-
});
1869-
this.PLANE_DOM.setParentDom(this.DOM)
1870-
.bindRequest('button[type="submit"]','click',{
1878+
}).setParentDom(this.DOM).setTitle(`<span class="dlp-text title">根添加</span>`);
1879+
this.PLANE_DOM.bindRequest('button[type="submit"]','click',{
18711880
url:object.URL,
18721881
method:'POST',
18731882
data:{key: 0},
@@ -2169,11 +2178,14 @@ window.ComponentCascadeLine = class {
21692178

21702179
nodeDelete(dom, data, stack) {
21712180
let object = this;
2172-
let title = `<span class="dlp-text title" title="${data.val}">${data.val} 删除</span>`;
2181+
let title = `<p class="dlp-text title" title="${data.val}">${data.val} 删除</p>`;
21732182

2183+
let P = document.createElement('div');
2184+
P.style = 'width:100%;height:100%;display:flex;align-items:center;justify-content:center;';
21742185
/*D delete node*/
21752186
let D = document.createElement('div');
2176-
D.className = 'dlp dlp-text dlp-label';
2187+
D.className = 'dlp dlp-button';
2188+
D.style.width = '85%';
21772189
D.addEventListener('click', (() => {
21782190
if (object.submit_block) return;
21792191
object.submit_block = true;
@@ -2190,8 +2202,9 @@ window.ComponentCascadeLine = class {
21902202
}
21912203
});
21922204
}));
2193-
D.insertAdjacentHTML('afterbegin', `<span>${data.val}</span><i class="right">${_component.trash}</i>`);
2194-
this.PLANE_DOM = new ComponentPlane(D).setParentDom(this.DOM).setTitle(title);
2205+
D.insertAdjacentHTML('afterbegin', `<p style="width: 100%;text-align: center">${data.val}</p> <i class="right">${_component.trash}</i>`);
2206+
P.append(D);
2207+
this.PLANE_DOM = new ComponentPlane(P,{width:'300px',height:'65px',f:false}).setParentDom(this.DOM).setTitle(title);
21952208
this.PLANE_DOM.make();
21962209
}
21972210

@@ -2201,37 +2214,39 @@ window.ComponentCascadeLine = class {
22012214
let node_data = this.dimensional_data[stack][index];
22022215
let title = `<span class="dlp-text title" title="${node_data.val}">${node_data.val} 迁移到根</span>`;
22032216

2204-
let content = document.createElement('div');
2217+
let P = document.createElement('div');
2218+
P.style = 'width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction: column;';
22052219
let M = document.createElement('div');
2206-
M.className = 'dlp dlp-text dlp-label';
2207-
M.insertAdjacentHTML('afterbegin', `<span>${node_data.val}</span><i class="right">${_component.check_circle}</i>`);
2208-
content.insertAdjacentHTML('afterbegin', `<div class="dlp" style="display: flex">${_component.node}</div>`);
2209-
content.insertAdjacentHTML('beforeend', `<div style="font-size: 16px!important;">↑</div>`);
2220+
M.className = 'dlp dlp-button';
2221+
M.style.width = '85%';
2222+
M.insertAdjacentHTML('afterbegin', `<p style="width: 100%;text-align: center">${node_data.val}</p><i class="right">${_component.check_circle}</i>`);
2223+
P.insertAdjacentHTML('afterbegin', `<div class="dlp" style="display: flex">${_component.node}</div>`);
2224+
P.insertAdjacentHTML('beforeend', `<div style="font-size: 16px!important;">↑</div>`);
22102225
let object = this;
2211-
M.addEventListener('click', (() => {
2212-
if (node_data.stack === 0) return object.PLANE_DOM.remove();
2213-
if (object.submit_block) return;
2214-
object.submit_block = true;
2215-
M.querySelector('.right').innerHTML = _component.sub_loading;
2216-
_component.request({
2217-
url: this.URL,
2218-
method: 'GET',
2219-
data: {event: 'root', node_key: node_data.key, node_val: node_data.val},
2220-
callback: function (response) {
2221-
object.submit_block = false;
2222-
response = JSON.parse(response);
2223-
if (response.code !== 0) return _component.alert(response.message, 3, null, object.DOM);
2224-
object.nodeRootExec(dom, node_data);
2225-
object.PLANE_DOM.getDom().remove();
2226-
}, error_callback: function () {
2227-
object.submit_block = false;
2228-
object.PLANE_DOM.getDom().remove();
2229-
}
2226+
P.append(M);
2227+
this.PLANE_DOM = new ComponentPlane(P,{width:'300px',height:'95px'})
2228+
.setParentDom(this.DOM).setTitle(title)
2229+
.bindEvent('div.dlp-button','click',() => {
2230+
if (node_data.stack === 0) return object.PLANE_DOM.remove();
2231+
if (object.submit_block) return;
2232+
object.submit_block = true;
2233+
M.querySelector('.right').innerHTML = _component.sub_loading;
2234+
_component.request({
2235+
url: this.URL,
2236+
method: 'GET',
2237+
data: {event: 'root', node_key: node_data.key, node_val: node_data.val},
2238+
callback: function (response) {
2239+
object.submit_block = false;
2240+
response = JSON.parse(response);
2241+
if (response.code !== 0) return _component.alert(response.message, 3, null, object.DOM);
2242+
object.nodeRootExec(dom, node_data);
2243+
object.PLANE_DOM.getDom().remove();
2244+
}, error_callback: function () {
2245+
object.submit_block = false;
2246+
object.PLANE_DOM.getDom().remove();
2247+
}
2248+
});
22302249
});
2231-
}));
2232-
content.append(M);
2233-
2234-
this.PLANE_DOM = new ComponentPlane(content).setParentDom(this.DOM).setTitle(title);
22352250
this.PLANE_DOM.make();
22362251
}
22372252

@@ -2455,49 +2470,55 @@ window.ComponentCascadeLine = class {
24552470
let title = '迁移';
24562471
if (aim_node_data.parentNodes.indexOf(node_data.key) !== -1) {
24572472
event = 'exchange';
2458-
title = '迁移.交换';
2473+
title = '交换';
24592474
} else {
24602475
event = 'migrate';
24612476
}
24622477
if (!this.OPTIONS.exchange && event === 'exchange') return;
24632478
aim_node.style.removeProperty('background');
2464-
this.dialog(`<span class="dlp-text title" title="${node_data.val}">${node_data.val}</span> ${title}`, 90);
2479+
2480+
title = `<p class="dlp-text title" title="${node_data.val}">${node_data.val} ${title}</p>`;
2481+
let P = document.createElement('div');
2482+
P.style = 'width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction: column;';
24652483
let M = document.createElement('div');
24662484
let object = this;
2467-
M.className = 'dlp dlp-text dlp-label';
2468-
M.insertAdjacentHTML('afterbegin', `<span>${node_data.val}</span><i class="right">${_component.check_circle}</i>`);
2469-
this.PLANE_BODY.insertAdjacentHTML('afterbegin', `<div class="dlp dlp-text dlp-label"><span>${aim_node_data.val}</span></div>`);
2485+
M.className = 'dlp dlp-button';
2486+
M.style.width = '85%';
2487+
M.insertAdjacentHTML('afterbegin', `<p style="width: 100%;text-align: center">${node_data.val}</p><i class="right">${_component.check_circle}</i>`);
2488+
P.insertAdjacentHTML('afterbegin', `<div class="dlp dlp-text dlp-label"><span>${aim_node_data.val}</span></div>`);
24702489
if (event === 'exchange') {
2471-
this.PLANE_BODY.insertAdjacentHTML('beforeend', `<div style="font-size: 16px!important;">⇵</div>`);
2490+
P.insertAdjacentHTML('beforeend', `<div style="font-size: 16px!important;font-family: cursive;font-weight: bolder;">⇵</div>`);
24722491
} else {
2473-
this.PLANE_BODY.insertAdjacentHTML('beforeend', `<div style="font-size: 16px!important;">↑</div>`);
2492+
P.insertAdjacentHTML('beforeend', `<div style="font-size: 16px!important;font-family: cursive;font-weight: bolder;">↑</div>`);
24742493
}
2475-
M.addEventListener('click', (() => {
2476-
if (object.submit_block) return;
2477-
object.submit_block = true;
2478-
M.querySelector('.right').innerHTML = _component.sub_loading;
2479-
_component.request({
2480-
url: this.URL,
2481-
method: 'GET',
2482-
data: {
2483-
event: event,
2484-
node_key: node_data.key,
2485-
node_val: node_data.val,
2486-
aim_node_key: aim_node_data.key,
2487-
aim_node_val: aim_node_data.val
2488-
}, callback: function (response) {
2489-
object.submit_block = false;
2490-
response = JSON.parse(response);
2491-
if (response.code !== 0) return _component.alert(response.message, 3, null, object.DOM);
2492-
if (event === 'exchange') object.nodeExchangeExec(node, node_data, aim_node, aim_node_data);
2493-
if (event === 'migrate') object.nodeMigrateExec(node, node_data, aim_node, aim_node_data);
2494-
object.PLANE_DOM.remove();
2495-
}, error_callback: function () {
2496-
object.submit_block = false;
2497-
}
2498-
});
2499-
}));
2500-
this.PLANE_BODY.append(M);
2494+
P.append(M);
2495+
this.PLANE_DOM = new ComponentPlane(P,{width:'300px',height:'95px',f:false})
2496+
.bindEvent('div.dlp-button','click',() => {
2497+
if (object.submit_block) return;
2498+
object.submit_block = true;
2499+
M.querySelector('.right').innerHTML = _component.sub_loading;
2500+
_component.request({
2501+
url: this.URL,
2502+
method: 'GET',
2503+
data: {
2504+
event: event,
2505+
node_key: node_data.key,
2506+
node_val: node_data.val,
2507+
aim_node_key: aim_node_data.key,
2508+
aim_node_val: aim_node_data.val
2509+
}, callback: function (response) {
2510+
object.submit_block = false;
2511+
response = JSON.parse(response);
2512+
if (response.code !== 0) return _component.alert(response.message, 3, null, object.DOM);
2513+
if (event === 'exchange') object.nodeExchangeExec(node, node_data, aim_node, aim_node_data);
2514+
if (event === 'migrate') object.nodeMigrateExec(node, node_data, aim_node, aim_node_data);
2515+
object.PLANE_DOM.getDom().remove();
2516+
}, error_callback: function () {
2517+
object.submit_block = false;
2518+
}
2519+
});
2520+
}).setParentDom(this.DOM).setTitle(title);
2521+
this.PLANE_DOM.make();
25012522
}
25022523

25032524
nodeRootExec(node, node_data) {

0 commit comments

Comments
 (0)