Skip to content

Commit 850311d

Browse files
chenxianhuiichenxianhuii
committed
调整编辑示例样式
1 parent fbbbe2c commit 850311d

File tree

4 files changed

+89
-55
lines changed

4 files changed

+89
-55
lines changed

‎examples/leaflet/drawAndEditFeatures.html‎

Lines changed: 74 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,14 @@
4242
color: #a09595;
4343
}
4444

45-
.add-feature-info {
45+
.add-feature-info,
46+
.delete-feature-info,
47+
.edit-feature-info {
4648
padding: 10px;
47-
max-height: 820px;
48-
overflow-y: scroll;
49-
}
50-
.delete-feature-info {
51-
padding: 10px;
52-
max-height: 820px;
53-
overflow-y: scroll;
54-
}
55-
.edit-feature-info {
56-
padding: 10px;
57-
max-height: 820px;
49+
max-height: 745px;
5850
overflow-y: scroll;
5951
}
52+
6053
.btn-group-xs {
6154
margin-right: 6px;
6255
}
@@ -182,6 +175,24 @@
182175
.button-group, .info-panel, .edit-tips {
183176
box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.3);
184177
}
178+
.add-tips {
179+
display: none;
180+
color: red;
181+
margin-right: 16px;
182+
}
183+
.message {
184+
width: 300px;
185+
height: 50px;
186+
position: absolute;
187+
top: 15px;
188+
font-size: 16px;
189+
left: 50%;
190+
padding-top: 15px;
191+
display: none;
192+
margin-left: -150px;
193+
background: #fff;
194+
z-index: 9999;
195+
}
185196
</style>
186197
</head>
187198
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
@@ -200,6 +211,10 @@ <h5>Y</h5>
200211
<input class="input-element coordY" type="number" tabindex="2">
201212
</div>
202213
</div>
214+
<div class="message">
215+
<span class="glyphicon glyphicon-exclamation-sign" style="color: #ec5812;"></span>
216+
<span><span data-i18n="resources.msg_pleaseSaveFirst"></span></span>
217+
</div>
203218
<div class="edit-panel">
204219
<div class="button-group">
205220
<button
@@ -244,6 +259,7 @@ <h6><span class="line-element"></span><span data-i18n="resources.text_attributeI
244259
<div class="add-attribute-info">
245260
</div>
246261
<div class="info-bottom">
262+
<p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
247263
<button class="btn btn-default btn-group-xs cancel-add" data-i18n="resources.btn_cancel"></button>
248264
<button class="btn btn-primary btn-group-xs addSave" data-i18n="resources.btn_save"></button>
249265
</div>
@@ -258,6 +274,7 @@ <h6><span data-i18n="resources.text_attributeInfo"></span></h6>
258274
<div class="edit-attribute-info">
259275
</div>
260276
<div class="info-bottom">
277+
<p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
261278
<button class="btn btn-default btn-group-xs cancel-edit" data-i18n="resources.btn_cancel"></button>
262279
<button disabled class="btn btn-primary btn-group-xs editSave" data-i18n="resources.btn_save"></button>
263280
</div>
@@ -323,6 +340,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
323340
var curEditOriginLayers = [];
324341
var curEditOriginFeatures = [];
325342
var currentEditingLayer = null;
343+
var isChanged = false;
326344
var typeMap = {
327345
REGION: 'Polygon',
328346
LINE: 'Line',
@@ -582,7 +600,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
582600
// 系统字段
583601
inputEle.disabled = filterFields[currentFeature.dataset][key];
584602
item.appendChild(inputEle);
585-
if (key === 'VIDEO') {
603+
if (key === 'VIDEO' && properties[key]) {
586604
var videoPlayIcon = document.createElement('div');
587605
videoPlayIcon.className = 'playIcon';
588606
var video = document.createElement('video');
@@ -630,9 +648,30 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
630648
});
631649

632650
// 切换状态
633-
document.querySelector('.button-group').addEventListener('click', function(e) {
634-
var className = e.target.className;
635-
switchPanel(className);
651+
document.querySelector('#addFeature').addEventListener('click', function() {
652+
console.log(isChanged);
653+
if (isChanged) {
654+
document.querySelector('.message').style.display = 'block';
655+
document.querySelector('.add-tips').style.display = 'inline-block';
656+
return;
657+
}
658+
switchPanel('add');
659+
});
660+
document.querySelector('#editFeature').addEventListener('click', function() {
661+
if (isChanged) {
662+
document.querySelector('.message').style.display = 'block';
663+
document.querySelector('.add-tips').style.display = 'inline-block';
664+
return;
665+
}
666+
switchPanel('edit');
667+
});
668+
document.querySelector('#deleteFeature').addEventListener('click', function() {
669+
if (isChanged) {
670+
document.querySelector('.message').style.display = 'block';
671+
document.querySelector('.add-tips').style.display = 'inline-block';
672+
return;
673+
}
674+
switchPanel('delete');
636675
});
637676

638677
document.querySelector('.add-attribute-info').addEventListener('change', checkInput);
@@ -659,6 +698,9 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
659698
if (currentShowPanel) {
660699
document.querySelector('.' + currentShowPanel).style.display = 'none';
661700
}
701+
document.querySelector('.message').style.display = 'none';
702+
document.querySelector('.add-tips').style.display = 'none';
703+
isChanged = false;
662704
}
663705
});
664706

@@ -673,6 +715,9 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
673715
})
674716
curEditOriginLayers = [];
675717
curEditOriginFeatures = [];
718+
document.querySelector('.message').style.display = 'none';
719+
document.querySelector('.add-tips').style.display = 'none';
720+
isChanged = false;
676721
if (currentShowPanel) {
677722
document.querySelector('.' + currentShowPanel).style.display = 'none';
678723
}
@@ -683,6 +728,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
683728
var deleteEle = document.querySelector('.delete-feature-list');
684729
deleteEle.innerHTML = '';
685730
deleteList = {};
731+
isChanged = false;
686732
if (currentShowPanel) {
687733
document.querySelector('.' + currentShowPanel).style.display = 'none';
688734
}
@@ -698,7 +744,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
698744
}
699745
map.pm.disableGlobalEditMode();
700746
currentEditingLayer = null;
701-
if (className.indexOf('plus') > -1) {
747+
if (className === 'add') {
702748
curEditOriginLayers = [];
703749
curEditOriginFeatures = [];
704750
var type = datasetInfoList[currentDataset].type;
@@ -707,7 +753,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
707753
document.querySelector('.add-feature-info').style.display = 'block';
708754
currentShowPanel = 'add-feature-info';
709755
status = 'ADD';
710-
} else if (className.indexOf('edit') > -1) {
756+
} else if (className === 'edit') {
711757
getDomains(currentDataset);
712758
endDraw();
713759
if (fromAdd) {
@@ -719,7 +765,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
719765
currentShowPanel = 'edit-feature-info';
720766
status = 'EDIT';
721767
startSelect();
722-
} else if (className.indexOf('trash') > -1) {
768+
} else if (className === 'delete') {
723769
curEditOriginLayers = [];
724770
curEditOriginFeatures = [];
725771
document.querySelector('.edit-tips').style.display = 'none';
@@ -742,9 +788,15 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
742788
var saveBtn = document.querySelector('.addSave');
743789
var editBtn = document.querySelector('.editSave');
744790
saveBtn.addEventListener('click', function () {
791+
document.querySelector('.message').style.display = 'none';
792+
document.querySelector('.add-tips').style.display = 'none';
793+
isChanged = false;
745794
save('add');
746795
});
747796
editBtn.addEventListener('click', function () {
797+
document.querySelector('.message').style.display = 'none';
798+
document.querySelector('.add-tips').style.display = 'none';
799+
isChanged = false;
748800
save('edit');
749801
});
750802
var deleteBtn = document.querySelector('.delete');
@@ -857,6 +909,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
857909
deleteLayerList = [];
858910
var deleteEle = document.querySelector('.delete-feature-list');
859911
deleteEle.innerHTML = '';
912+
isChanged = false;
860913
}
861914
});
862915
});
@@ -872,6 +925,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
872925
allAvailableLayers.forEach(function(layer) {
873926
layer.off('click');
874927
layer.on('click', function(e) {
928+
isChanged = true;
875929
map.pm.disableGlobalEditMode();
876930
var feature = e.target.feature;
877931
if (status === 'EDIT') {
@@ -964,6 +1018,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
9641018
currentFeature.data = feature;
9651019
// currentFeature.dataset = currentDataset;
9661020
document.querySelector('.add-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
1021+
isChanged = true;
9671022
}
9681023
});
9691024
}

‎examples/mapboxgl/drawAndEditFeatures.html‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,14 @@
4848
color: #a09595;
4949
}
5050

51-
.add-feature-info {
51+
.add-feature-info,
52+
.delete-feature-info,
53+
.edit-feature-info {
5254
padding: 10px;
53-
max-height: 820px;
54-
overflow-y: scroll;
55-
}
56-
.delete-feature-info {
57-
padding: 10px;
58-
max-height: 820px;
59-
overflow-y: scroll;
60-
}
61-
.edit-feature-info {
62-
padding: 10px;
63-
max-height: 820px;
55+
max-height: 745px;
6456
overflow-y: scroll;
6557
}
58+
6659
.btn-group-xs {
6760
margin-right: 6px;
6861
}

‎examples/maplibregl/drawAndEditFeatures.html‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,14 @@
4848
color: #a09595;
4949
}
5050

51-
.add-feature-info {
51+
.add-feature-info,
52+
.delete-feature-info,
53+
.edit-feature-info {
5254
padding: 10px;
53-
max-height: 620px;
54-
overflow-y: scroll;
55-
}
56-
.delete-feature-info {
57-
padding: 10px;
58-
max-height: 620px;
59-
overflow-y: scroll;
60-
}
61-
.edit-feature-info {
62-
padding: 10px;
63-
max-height: 620px;
55+
max-height: 745px;
6456
overflow-y: scroll;
6557
}
58+
6659
.btn-group-xs {
6760
margin-right: 6px;
6861
}

‎examples/openlayers/drawAndEditFeatures.html‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,21 +41,14 @@
4141
color: #a09595;
4242
}
4343

44-
.add-feature-info {
44+
.add-feature-info,
45+
.delete-feature-info,
46+
.edit-feature-info {
4547
padding: 10px;
46-
max-height: 820px;
47-
overflow-y: scroll;
48-
}
49-
.delete-feature-info {
50-
padding: 10px;
51-
max-height: 820px;
52-
overflow-y: scroll;
53-
}
54-
.edit-feature-info {
55-
padding: 10px;
56-
max-height: 820px;
48+
max-height: 745px;
5749
overflow-y: scroll;
5850
}
51+
5952
.btn-group-xs {
6053
margin-right: 6px;
6154
}

0 commit comments

Comments
 (0)