@mapgis/webclient-leaflet-plugin 17.0.2 → 17.0.5

package/documention/scripts/sideBar.js

@@ -3,11 +3,87 @@ function toggleSideBar(id) {
   _dom.style.display = _dom.style.display === 'block' ? 'none' : 'block'
 }
 
+function showSideBar(id) {
+  var _dom = document.getElementById(id)
+  _dom.style.display = 'block'
+}
+
+var lastClickClassId
+function highLightClickClass(currentId) {
+  var _dom2 = document.getElementById(currentId)
+  _dom2.style.color = '#ffa83df5'
+  _dom2.style.fontWeight="900"
+  if (lastClickClassId && lastClickClassId !== currentId) {
+    var _dom3 = document.getElementById(lastClickClassId)
+    _dom3.style.color = '#798897'
+    _dom3.style.fontWeight="400"
+  }
+  lastClickClassId = currentId
+}
+
+var lastClickClassTarget
+function highLightClickClassByTarget(target) {
+  target.style.color = '#ffa83df5'
+  target.style.fontWeight="900"
+  if (lastClickClassTarget && lastClickClassTarget.getAttribute('title') !== target.getAttribute('title')) {
+    lastClickClassTarget.style.color = '#798897'
+    lastClickClassTarget.style.fontWeight="400"
+  }
+  lastClickClassTarget = target
+}
+
 function toggleLinkDetail(id) {
   var _dom = document.getElementById(id)
   var _arrow = document.getElementById(id + '-arrow')
   _arrow.style.transform = _dom.style.display === 'block' ? 'rotate(360deg)' : 'rotate(180deg)'
   _dom.style.display = _dom.style.display === 'block' ? 'none' : 'block'
+  if (_dom.style.display === 'block') {
+    highLightClickClass(id.split('-')[0])
+  }
+}
+
+function showLinkDetail(id) {
+  var _dom = document.getElementById(id)
+  var _arrow = document.getElementById(id + '-arrow')
+  _arrow.style.transform = 'rotate(360deg)'
+  _dom.style.display = 'block'
+}
+
+function getTypeHTML(e) {
+  var link = e.target.getAttribute('link')
+  var goto = e.target.getAttribute('goto')
+  const attributes = e.target.attributes
+  for (let i = 0; i < attributes.length; i++) {
+    const { name } =  attributes[i]
+    if (name.indexOf('global.html') > -1) {
+      goto = link.split('.')[0]
+      link = 'global.html'
+      break
+    }
+  }
+  const _baseUrl = window.location.href.split('/index.html')[0]
+  fetch(_baseUrl + '/' + link, {
+    method: 'GET',
+  })
+    .then(response => response.text())
+    .then(data => {
+      const _contentDom = document.getElementById('main-content')
+      if (_contentDom) {
+        _contentDom.innerHTML = data
+        gotoTop(goto, getLinkName(link))
+      }
+    })
+    .catch(error => console.error('Error:', error))
+}
+
+function gotoTop(id, linkName) {
+  id = id || 'main-content'
+  const _aDom = document.createElement('a');
+  _aDom.href = '#' + id
+  _aDom.click()
+  if (linkName) {
+    window.location.hash = id + '?' + linkName
+  }
 }
 
 function getBaseUrl(url) {
@@ -25,6 +101,11 @@ function getBaseUrl(url) {
   return ''
 }
 
+function getLinkName(url) {
+  var urlParts = url.split('/')
+  return urlParts[urlParts.length - 1].split('.')[0]
+}
+
 (function() {
   const targets = [ ...document.querySelectorAll('#sidebarNav li.mapgis-link a')]
   targets.forEach(function (_target) {
@@ -38,6 +119,9 @@ function getBaseUrl(url) {
           const _contentDom = document.getElementById('main-content')
           if (_contentDom) {
             _contentDom.innerHTML = data
+            var linkName = getLinkName(e.target.getAttribute('link'))
+            highLightClickClass(linkName)
+            gotoTop(undefined, linkName)
           }
         })
         .catch(error => console.error('Error:', error))
@@ -55,9 +139,7 @@ function getBaseUrl(url) {
           const _contentDom = document.getElementById('main-content')
           if (_contentDom) {
             _contentDom.innerHTML = data
-            const _aDom = document.createElement('a');
-            _aDom.href = e.target.attributes[0].value
-            _aDom.click()
+            gotoTop(e.target.getAttribute('linkto').split('#')[1], getLinkName(e.target.getAttribute('link')))
           }
         })
         .catch(error => console.error('Error:', error))
@@ -67,6 +149,7 @@ function getBaseUrl(url) {
   const targets3 = [ ...document.querySelectorAll('#sidebarNav div div ul li a#api-member')]
   targets3.forEach(function (_target) {
     _target.addEventListener('click', function (e) {
+      highLightClickClassByTarget(e.target)
       const _baseUrl = getBaseUrl(window.location.href)
       fetch(_baseUrl + e.target.attributes[1].value, {
         method: 'GET',
@@ -76,12 +159,56 @@ function getBaseUrl(url) {
           const _contentDom = document.getElementById('main-content')
           if (_contentDom) {
             _contentDom.innerHTML = data
-            const _aDom = document.createElement('a');
-            _aDom.href = e.target.attributes[0].value
-            _aDom.click()
+            gotoTop(e.target.getAttribute('title'), getLinkName(e.target.getAttribute('link')))
           }
         })
         .catch(error => console.error('Error:', error))
     })
   })
 })()
+
+window.onload = function () {
+  var urlParts = window.location.href.split('#')
+  if (urlParts.length > 1) {
+    var id = urlParts[1].split('?')[0]
+    var linkName = urlParts[1].split('?')[1]
+    if (id && linkName) {
+      const _baseUrl = window.location.href.split('/index.html')[0]
+      fetch(_baseUrl + '/' + linkName + '.html', {
+        method: 'GET',
+      })
+        .then(response => response.text())
+        .then(data => {
+          const _contentDom = document.getElementById('main-content')
+          if (_contentDom) {
+            _contentDom.innerHTML = data
+            var modules = document.getElementsByClassName('mapgis-sidebar-menus')
+            for (var i = 0; i < modules.length; i++) {
+              if (modules[i].innerHTML.indexOf('"' + linkName + '"') > -1) {
+                showSideBar(modules[i].id)
+                var classArray = document.getElementsByClassName("mapgis-link-detail")
+                for (var j = 0; j < classArray.length; j++) {
+                  if (
+                    classArray[j].id === linkName + '-detail'
+                  ) {
+                    showLinkDetail(linkName + '-detail')
+                    highLightClickClass(linkName)
+                    var members = document.querySelectorAll('#' + linkName + '-detail' + ' a')
+                    for (var k = 0; k < members.length; k++) {
+                      if (members[k].title === id) {
+                        highLightClickClassByTarget(members[k])
+                      }
+                    }
+                    break
+                  }
+                }
+                break
+              }
+            }
+            gotoTop(id, linkName)
+          }
+        })
+        .catch(error => console.error('Error:', error))
+    }
+  }
+}

package/documention/tutorial-2.1M3D/350/246/201/347/264/240/351/200/211/345/217/226.html

@@ -33,7 +33,7 @@ webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(1, 1, 1, 0.001);
 </code></pre>
 <h2>图层的属性</h2>
 <p>M3D的图层属性保持Cesium的3DTIle一致
-<a href="https://cesium.com/docs/cesiumjs-ref-doc/Cesium3DTileset.html?classFilter=3Dtile">Cesium3DTileset</a></p>
+<a onclick="getTypeHTML(event)" link="https://cesium.com/docs/cesiumjs-ref-doc/Cesium3DTileset.html?classFilter=3Dtile">Cesium3DTileset</a></p>
 <pre class="prettyprint source lang-javascript"><code>{
   url: { type: String, required: true },
   show: { typs: Boolean, default: true },

package/documention/tutorial-2.2M3D/351/222/273/345/255/224/345/211/226/345/210/207.html

@@ -33,7 +33,7 @@ webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(1, 1, 1, 0.001);
 </code></pre>
 <h2>图层的属性</h2>
 <p>M3D的图层属性保持Cesium的3DTIle一致
-<a href="https://cesium.com/docs/cesiumjs-ref-doc/Cesium3DTileset.html?classFilter=3Dtile">Cesium3DTileset</a></p>
+<a onclick="getTypeHTML(event)" link="https://cesium.com/docs/cesiumjs-ref-doc/Cesium3DTileset.html?classFilter=3Dtile">Cesium3DTileset</a></p>
 <pre class="prettyprint source lang-javascript"><code>{
   url: { type: String, required: true },
   show: { typs: Boolean, default: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapgis/webclient-leaflet-plugin",
-"version" : "17.0.2",
+"version" : "17.0.5",
   "description": "",
   "main": "dist/webclient-leaflet-plugin-es6.min.js",
   "scripts": {},