【fix】UI走查，及去除es6语法兼容ie11 reviewed by luoxiao

Author: chenxianhuii

build/build.html

@@ -199,6 +199,7 @@ <h1>自定义打包</h1>
 </div>
 <script type="text/javascript" src="https://iclient.supermap.io/web/libs/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="https://iclient.supermap.io/web/libs/bootstrap/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="https://iclient.supermap.io/web/libs/css-vars-ponyfill/2.4.8/css-vars-ponyfill.min.js"></script>
 <script type="text/javascript" src="deps.js"></script>
 <script type="text/javascript" src="build.js"></script>
 </body>

build/jsdocs/template/static/scripts/css-vars-ponyfill.min.js

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
-    <script src="../../../../examples/js/theme/themeConfig.js"></script>
-    <script src="../../../../examples/js/theme/theme.js"></script>
+    <script src="../../examples/js/theme/themeConfig.js"></script>
+    <script src="../../examples/js/theme/theme.js"></script>
 <script type="text/javascript">
 
 </script>
@@ -14,6 +14,7 @@
     <![endif]-->
         <script src="scripts/jquery.min.js"></script>
     <script src="scripts/adminlte/app.min.js"></script>
+    <script src="scripts/css-vars-ponyfill.min.js"></script>
     <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
     <link type="text/css" rel="stylesheet" href="styles/adminlte/AdminLTE.min.css">
     <link type="text/css" rel="stylesheet" href="styles/adminlte/skin-blue.min.css">

build/jsdocs/template/tmpl/layout.tmpl

@@ -110,7 +110,7 @@ a {
 
 /*重写AdmineLTE 的部分效果 end*/
 .skin-blue .main-header .navbar {
-  background-color: var(--background-color);
+  background-color: var(--header-background-color);
 }
 /*footer */
 

examples/css/common.css

@@ -20,7 +20,7 @@ html, body, .wrapper {
     bottom: 0;
     left: 0;
     right: 0;
-    margin-top: 60px;
+    margin-top: 72px;
 }
 
 .edit-container section.content {

examples/css/editor.css

@@ -101,7 +101,7 @@ h3.category-title {
 }
 
 .box-header {
-    padding-top: 22px;
+    padding-top: 10px;
     padding-bottom: 5px;
     padding-left: 0;
     background-color: #f9f9f9;
@@ -117,5 +117,5 @@ h3.category-title {
 }
 
 .category {
-    padding-top: 72px;
+    padding-top: 60px;
 }

examples/css/examples.css

@@ -152,7 +152,7 @@
   padding: 4px 0;
   left: 20px !important;
   border: none;
-  border-radius: 4px;
+  border-radius: 4px !important;
   box-shadow: 0px 6px 18px 0px var(--dropdown-shadow-color);
 }
 .navbar-rightbar .dropdown .dropdown-menu{

examples/css/header.css

@@ -44,6 +44,7 @@
 
             inputScript(libsurl + '/i18next/i18next.min.js');
             inputScript(libsurl + '/jquery-i18next/jquery-i18next.min.js');
+            inputScript(libsurl + '/css-vars-ponyfill/2.4.8/css-vars-ponyfill.min.js');
 
             inputScript("../js/utils.js");
             inputScript("../js/localization.js");

examples/js/include-web.js

@@ -2,23 +2,26 @@ function toStyleVariable(variable) {
   return '--' + variable.replace(/[A-Z]/g, '-$&').toLowerCase();
 }
 
-function setRootStyle(theme) {
+var isBrowser = typeof window !== 'undefined';
+var isNativeSupport = isBrowser && window.CSS && window.CSS.supports && window.CSS.supports('(--a: 0)');
+
+function setRootStyle (theme) {
   var targetTheme = null;
   window.themeConfig.forEach(function (item) {
     if (item.label === theme) {
       targetTheme = item;
     };
   })
-  let acceptedThemeStyle = targetTheme || window.themeConfig[1];
-  const variables = {};
-  const themeKeys = Object.keys(acceptedThemeStyle);
-  themeKeys.forEach(function (key) {
-    const varKey = toStyleVariable(key);
+  var acceptedThemeStyle = targetTheme || window.themeConfig[1];
+  var variables = {};
+  var themeKeys = Object.keys(acceptedThemeStyle);
+  themeKeys.forEach(function(key) {
+    var varKey = toStyleVariable(key);
     variables[varKey] = acceptedThemeStyle[key];
   })
-  const rootStyleSelector = ':root';
-  const antdStyleId = 'sm-theme-style';
-  const rootStyle = rootStyleSelector + " " + JSON.stringify(variables, null, 2)
+  var rootStyleSelector = ':root';
+  var antdStyleId = 'sm-theme-style';
+  var rootStyle = rootStyleSelector + ' ' + JSON.stringify(variables, null, 2)
     .replace(/(:.+),/g, '$1;')
     .replace(/"/g, '');
   var rootStyleTag = document.getElementById(antdStyleId);
@@ -28,9 +31,23 @@ function setRootStyle(theme) {
     rootStyleTag.setAttribute('type', 'text/css');
     document.head.insertBefore(rootStyleTag, document.head.firstChild);
   }
+  var options = {
+    include: 'style#sm-theme-style, link[href*=css]',
+    silent: true,
+    onlyLegacy: true,
+    variables: {},
+    watch: false
+  };
+  if (!isNativeSupport) {
+    options.onlyLegacy = false;
+    options.watch = true;
+    options.variables = variables;
+  }
+  cssVars(options);
   rootStyleTag.innerHTML = rootStyle;
 }
-document.addEventListener("DOMContentLoaded", function () {
+
+document.addEventListener("DOMContentLoaded", function() {
   initSkin();
 });
 

examples/js/theme/theme.js

@@ -29,6 +29,7 @@ window.themeConfig = [
     "footerShadowColor": "var(--alpha06)",
     "activeBackgroundColor": "rgba(255,72,62,0.04)",
     "dropdownActiveBackground": "var(--alpha04)",
+    "dropdownBackgroundColor": "#FFFFFF",
     "skinBoxBackground": "var(--alpha08)",
     "skinLightBg": "#ffffff",
     "skinDarkBg": "transparent",
@@ -55,19 +56,20 @@ window.themeConfig = [
     "whatsNewBackgroundColor": "rgba(10, 9, 9, 1)",
     "textColorThird": "var(--alpha45)",
     "iconColor": "var(--alpha100)",
-    "activeColor": "rgba(224,76,64,0.85)",
+    "activeColor": "rgba(224,76,64,1)",
     "backgroundColor": "#1F1F1F",
     "headerBackgroundColor": "#333333",
     "wrapperBackgroundColor": "#F5F6F6",
-    "shadowColor": "var(--alpha04)",
+    "shadowColor": "rgba(0, 0, 0, 0.04)",
     "borderColor": "var(--alpha08)",
     "footerShadowColor": "var(--alpha06)",
     "activeBackgroundColor": "rgba(255,72,62,0.04)",
     "dropdownActiveBackground": "var(--alpha04)",
+    "dropdownBackgroundColor": "#414141",
     "skinBoxBackground": "#1F1F1F",
     "skinLightBg": "transparent",
     "skinDarkBg": "rgba(255,255,255,0.08);",
-    "dropdownShadowColor": "var(--alpha14)",
+    "dropdownShadowColor": "rgba(0, 0, 0, 0.35)",
     "suffixColor": "var(--alpha12)"
   }
 ]

examples/js/theme/themeConfig.js

@@ -26,7 +26,7 @@
     $('.wrapper').load("../template/example.html", function () {
         var navigation = {
             nav: {
-                title: "SuperMap iClient 11i(2022)",
+                title: "11i(2023)",
                 path: "../../web/",
                 isLocal: window.isLocal
             }

examples/maplibregl/examples.html

@@ -17,6 +17,7 @@
     <section class="sidebar" id="sidebar">
         <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" title="fold">
             <div class="fa  fa-bars fold"></div>
+            <span id="suffix-title"></span>
         </a>
         <!-- sidebar menu: : style can be found in sidebar.less -->
         <ul class="sidebar-menu" id="sidebar-menu"></ul>
@@ -47,5 +48,18 @@
 </div>
 <!-- 内容区 end-->
 
+<script>
+  $(document).ready(function () {
+    var notFor = ['iClient Classic', '3D-WebGL'];
+    var productArr = ['Leaflet', 'OpenLayers', 'MapboxGL', 'MaplibreGL', 'component', 'iClient Classic', '3D-WebGL']
+    var path = window.location.pathname.split('/');
+    var identification = productArr.find(name => name.toLowerCase().includes(path[2]) || name.toLowerCase().includes(path[3]));
+    if (identification) {
+      var suffixHeader = document.getElementById('suffix-title');
+      suffixHeader.innerText = (notFor.indexOf(identification) < 0 ? 'for ' : '') + identification;
+    }
+  })
+</script>
+
 
 

examples/template/editor.html

@@ -40,7 +40,7 @@
 <script>
   $(document).ready(function () {
     var notFor = ['iClient Classic', '3D-WebGL'];
-    var productArr = ['Leaflet', 'OpenLayers', 'MapboxGL', 'component', 'iClient Classic', '3D-WebGL']
+    var productArr = ['Leaflet', 'OpenLayers', 'MapboxGL', 'MaplibreGL', 'component', 'iClient Classic', '3D-WebGL']
     var path = window.location.pathname.split('/');
     var identification = productArr.find(name => name.toLowerCase().includes(path[2]) || name.toLowerCase().includes(path[3]));
     if (identification) {