调整编辑示例样式

SuperMap · Feb 4, 2024 · 850311d · 850311d
1 parent fbbbe2c
commit 850311d
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 55 deletions.
diff --git a/examples/leaflet/drawAndEditFeatures.html b/examples/leaflet/drawAndEditFeatures.html
@@ -42,21 +42,14 @@
         color: #a09595;
       }
 
-      .add-feature-info {
+      .add-feature-info,
+      .delete-feature-info,
+      .edit-feature-info  {
         padding: 10px;
-        max-height: 820px;
-        overflow-y: scroll;
-      }
-      .delete-feature-info {
-        padding: 10px;
-        max-height: 820px;
-        overflow-y: scroll;
-      }
-      .edit-feature-info {
-        padding: 10px;
-        max-height: 820px;
+        max-height: 745px;
         overflow-y: scroll;
       }
+
       .btn-group-xs {
         margin-right: 6px;
       }
@@ -182,6 +175,24 @@
       .button-group, .info-panel, .edit-tips {
         box-shadow: 0px 0px 5px 0 rgba(0,0,0,0.3);
       }
+      .add-tips {
+        display: none;
+        color: red;
+        margin-right: 16px;
+      }
+      .message {
+        width: 300px;
+        height: 50px;
+        position: absolute;
+        top: 15px;
+        font-size: 16px;
+        left: 50%;
+        padding-top: 15px;
+        display: none;
+        margin-left: -150px;
+        background: #fff;
+        z-index: 9999;
+      }
     </style>
   </head>
   <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
@@ -200,6 +211,10 @@ <h5>Y</h5>
         <input class="input-element coordY" type="number" tabindex="2">
       </div>
     </div>
+    <div class="message">
+      <span class="glyphicon glyphicon-exclamation-sign" style="color: #ec5812;"></span>
+      <span><span data-i18n="resources.msg_pleaseSaveFirst"></span></span>
+    </div>
     <div class="edit-panel">
       <div class="button-group">
         <button
@@ -244,6 +259,7 @@ <h6><span class="line-element"></span><span data-i18n="resources.text_attributeI
           <div class="add-attribute-info">
           </div>
           <div class="info-bottom">
+            <p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
             <button class="btn btn-default btn-group-xs cancel-add" data-i18n="resources.btn_cancel"></button>
             <button class="btn btn-primary btn-group-xs addSave" data-i18n="resources.btn_save"></button>
           </div>
@@ -258,6 +274,7 @@ <h6><span data-i18n="resources.text_attributeInfo"></span></h6>
           <div class="edit-attribute-info">
           </div>
           <div class="info-bottom">
+            <p class="add-tips"><span data-i18n="resources.msg_pleaseSave"></span></p>
             <button class="btn btn-default btn-group-xs cancel-edit" data-i18n="resources.btn_cancel"></button>
             <button disabled class="btn btn-primary btn-group-xs editSave" data-i18n="resources.btn_save"></button>
           </div>
@@ -323,6 +340,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
       var curEditOriginLayers = [];
       var curEditOriginFeatures = [];
       var currentEditingLayer = null;
+      var isChanged = false;
       var typeMap = {
         REGION: 'Polygon',
         LINE: 'Line',
@@ -582,7 +600,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
           // 系统字段
           inputEle.disabled = filterFields[currentFeature.dataset][key];
           item.appendChild(inputEle);
-          if (key === 'VIDEO') {
+          if (key === 'VIDEO' && properties[key]) {
             var videoPlayIcon = document.createElement('div');
             videoPlayIcon.className = 'playIcon';
             var video = document.createElement('video');
@@ -630,9 +648,30 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
         });
 
          // 切换状态
-        document.querySelector('.button-group').addEventListener('click', function(e) {
-          var className = e.target.className;
-          switchPanel(className);
+         document.querySelector('#addFeature').addEventListener('click', function() {
+          console.log(isChanged);
+          if (isChanged) {
+            document.querySelector('.message').style.display = 'block';
+            document.querySelector('.add-tips').style.display = 'inline-block';
+            return;
+          }
+          switchPanel('add');
+        });
+        document.querySelector('#editFeature').addEventListener('click', function() {
+          if (isChanged) {
+            document.querySelector('.message').style.display = 'block';
+            document.querySelector('.add-tips').style.display = 'inline-block';
+            return;
+          }
+          switchPanel('edit');
+        });
+        document.querySelector('#deleteFeature').addEventListener('click', function() {
+          if (isChanged) {
+            document.querySelector('.message').style.display = 'block';
+            document.querySelector('.add-tips').style.display = 'inline-block';
+            return;
+          }
+          switchPanel('delete');
         });
 
         document.querySelector('.add-attribute-info').addEventListener('change', checkInput);
@@ -659,6 +698,9 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
             if (currentShowPanel) {
               document.querySelector('.' + currentShowPanel).style.display = 'none';
             }
+            document.querySelector('.message').style.display = 'none';
+            document.querySelector('.add-tips').style.display = 'none';
+            isChanged = false;
           }
         });
 
@@ -673,6 +715,9 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
             })
             curEditOriginLayers = [];
             curEditOriginFeatures = [];
+            document.querySelector('.message').style.display = 'none';
+            document.querySelector('.add-tips').style.display = 'none';
+            isChanged = false;
             if (currentShowPanel) {
               document.querySelector('.' + currentShowPanel).style.display = 'none';
             }
@@ -683,6 +728,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
           var deleteEle = document.querySelector('.delete-feature-list');
           deleteEle.innerHTML = '';
           deleteList = {};
+          isChanged = false;
           if (currentShowPanel) {
             document.querySelector('.' + currentShowPanel).style.display = 'none';
           }
@@ -698,7 +744,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
         }
         map.pm.disableGlobalEditMode();
         currentEditingLayer = null;
-        if (className.indexOf('plus') > -1) {
+        if (className === 'add') {
           curEditOriginLayers = [];
           curEditOriginFeatures = [];
           var type = datasetInfoList[currentDataset].type;
@@ -707,7 +753,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
           document.querySelector('.add-feature-info').style.display = 'block';
           currentShowPanel = 'add-feature-info';
           status = 'ADD';
-        } else if (className.indexOf('edit') > -1) {
+        } else if (className === 'edit') {
           getDomains(currentDataset);
           endDraw();
           if (fromAdd) {
@@ -719,7 +765,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
           currentShowPanel = 'edit-feature-info';
           status = 'EDIT';
           startSelect();
-        } else if (className.indexOf('trash') > -1) {
+        } else if (className === 'delete') {
           curEditOriginLayers = [];
           curEditOriginFeatures = [];
           document.querySelector('.edit-tips').style.display = 'none';
@@ -742,9 +788,15 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
       var saveBtn = document.querySelector('.addSave');
       var editBtn = document.querySelector('.editSave');
       saveBtn.addEventListener('click', function () {
+        document.querySelector('.message').style.display = 'none';
+        document.querySelector('.add-tips').style.display = 'none';
+        isChanged = false;
         save('add');
       });
       editBtn.addEventListener('click', function () {
+        document.querySelector('.message').style.display = 'none';
+        document.querySelector('.add-tips').style.display = 'none';
+        isChanged = false;
         save('edit');
       });
       var deleteBtn = document.querySelector('.delete');
@@ -857,6 +909,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
               deleteLayerList = [];
               var deleteEle = document.querySelector('.delete-feature-list');
               deleteEle.innerHTML = '';
+              isChanged = false;
             }
           });
         });
@@ -872,6 +925,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
         allAvailableLayers.forEach(function(layer) {
           layer.off('click');
           layer.on('click', function(e) {
+            isChanged = true;
             map.pm.disableGlobalEditMode();
             var feature = e.target.feature;
             if (status === 'EDIT') {
@@ -964,6 +1018,7 @@ <h5><span data-i18n="resources.text_featureToDelete"></span>:</h5>
             currentFeature.data = feature;
             // currentFeature.dataset = currentDataset;
             document.querySelector('.add-feature-info>.space-info>.input-element').value = JSON.stringify({ geometry: currentFeature.data.geometry});
+            isChanged = true;
           }
         });
       }

diff --git a/examples/mapboxgl/drawAndEditFeatures.html b/examples/mapboxgl/drawAndEditFeatures.html
@@ -48,21 +48,14 @@
         color: #a09595;
       }
 
-      .add-feature-info {
+      .add-feature-info,
+      .delete-feature-info,
+      .edit-feature-info  {
         padding: 10px;
-        max-height: 820px;
-        overflow-y: scroll;
-      }
-      .delete-feature-info {
-        padding: 10px;
-        max-height: 820px;
-        overflow-y: scroll;
-      }
-      .edit-feature-info {
-        padding: 10px;
-        max-height: 820px;
+        max-height: 745px;
         overflow-y: scroll;
       }
+
       .btn-group-xs {
         margin-right: 6px;
       }

diff --git a/examples/maplibregl/drawAndEditFeatures.html b/examples/maplibregl/drawAndEditFeatures.html
@@ -48,21 +48,14 @@
         color: #a09595;
       }
 
-      .add-feature-info {
+      .add-feature-info,
+      .delete-feature-info,
+      .edit-feature-info  {
         padding: 10px;
-        max-height: 620px;
-        overflow-y: scroll;
-      }
-      .delete-feature-info {
-        padding: 10px;
-        max-height: 620px;
-        overflow-y: scroll;
-      }
-      .edit-feature-info {
-        padding: 10px;
-        max-height: 620px;
+        max-height: 745px;
         overflow-y: scroll;
       }
+
       .btn-group-xs {
         margin-right: 6px;
       }

diff --git a/examples/openlayers/drawAndEditFeatures.html b/examples/openlayers/drawAndEditFeatures.html
@@ -41,21 +41,14 @@
         color: #a09595;
       }
 
-      .add-feature-info {
+      .add-feature-info,
+      .delete-feature-info,
+      .edit-feature-info  {
         padding: 10px;
-        max-height: 820px;
-        overflow-y: scroll;
-      }
-      .delete-feature-info {
-        padding: 10px;
-        max-height: 820px;
-        overflow-y: scroll;
-      }
-      .edit-feature-info {
-        padding: 10px;
-        max-height: 820px;
+        max-height: 745px;
         overflow-y: scroll;
       }
+
       .btn-group-xs {
         margin-right: 6px;
       }