Website updates

Author: ahocevar

dist/en/main/examples/common.js

@@ -217,8 +217,7 @@ <h5>Click on layer nodes below to change their properties.</h5>
 
       <div class="row-fluid">
         <h5 class="source-heading">main.js</h5>
-        <pre><code id="example-js-source" class="language-js">import $ from &#x27;jquery&#x27;;
-import Map from &#x27;ol/Map.js&#x27;;
+        <pre><code id="example-js-source" class="language-js">import Map from &#x27;ol/Map.js&#x27;;
 import View from &#x27;ol/View.js&#x27;;
 import LayerGroup from &#x27;ol/layer/Group.js&#x27;;
 import TileLayer from &#x27;ol/layer/Tile.js&#x27;;
@@ -262,17 +261,20 @@ <h5 class="source-heading">main.js</h5>
 });
 
 function bindInputs(layerid, layer) {
-  const visibilityInput &#x3D; $(layerid + &#x27; input.visible&#x27;);
-  visibilityInput.on(&#x27;change&#x27;, function () {
+  const visibilityInput &#x3D; document.querySelector(layerid + &#x27; input.visible&#x27;);
+  visibilityInput.addEventListener(&#x27;change&#x27;, function () {
     layer.setVisible(this.checked);
   });
-  visibilityInput.prop(&#x27;checked&#x27;, layer.getVisible());
+  visibilityInput.addEventListener(&#x27;change&#x27;, function () {
+    layer.setVisible(this.checked);
+  });
+  visibilityInput.checked &#x3D; layer.getVisible();
 
-  const opacityInput &#x3D; $(layerid + &#x27; input.opacity&#x27;);
-  opacityInput.on(&#x27;input&#x27;, function () {
+  const opacityInput &#x3D; document.querySelector(layerid + &#x27; input.opacity&#x27;);
+  opacityInput.addEventListener(&#x27;input&#x27;, function () {
     layer.setOpacity(parseFloat(this.value));
   });
-  opacityInput.val(String(layer.getOpacity()));
+  opacityInput.value &#x3D; String(layer.getOpacity());
 }
 function setup(id, group) {
   group.getLayers().forEach(function (layer, i) {
@@ -285,12 +287,15 @@ <h5 class="source-heading">main.js</h5>
 }
 setup(&#x27;#layer&#x27;, map.getLayerGroup());
 
-$(&#x27;#layertree li &gt; span&#x27;)
-  .click(function () {
-    $(this).siblings(&#x27;fieldset&#x27;).toggle();
-  })
-  .siblings(&#x27;fieldset&#x27;)
-  .hide();
+document.querySelectorAll(&#x27;#layertree li &gt; span&#x27;).forEach(function (element) {
+  element.addEventListener(&#x27;click&#x27;, function () {
+    this.parentNode.querySelector(&#x27;fieldset&#x27;).style.display &#x3D;
+      this.parentNode.querySelector(&#x27;fieldset&#x27;).style.display &#x3D;&#x3D;&#x3D; &#x27;none&#x27;
+        ? &#x27;&#x27;
+        : &#x27;none&#x27;;
+  });
+  element.parentNode.querySelector(&#x27;fieldset&#x27;).style.display &#x3D; &#x27;none&#x27;;
+});
 </code></pre>
       </div>
 
@@ -378,8 +383,7 @@ <h5 class="source-heading">package.json</h5>
         <pre><code id="example-pkg-source" class="language-json">{
   &quot;name&quot;: &quot;layer-group&quot;,
   &quot;dependencies&quot;: {
-    &quot;ol&quot;: &quot;10.7.1-dev&quot;,
-    &quot;jquery&quot;: &quot;3.7.1&quot;
+    &quot;ol&quot;: &quot;10.7.1-dev&quot;
   },
   &quot;devDependencies&quot;: {
     &quot;vite&quot;: &quot;^3.2.3&quot;

dist/en/main/examples/common.js.map

@@ -10,7 +10,6 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="./theme/ol.css">
     <link rel="stylesheet" type="text/css" href="/theme/site.css">
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css">
     <link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" />
     <link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" />
   </head>
@@ -482,7 +481,7 @@ <h5 class="source-heading">main.js</h5>
     }
     topo.addEdgeNewFaces(start, end, edgeGeom);
   } catch (e) {
-    toastr.warning(e.toString());
+    alert(e.toString());
   }
 }
 
@@ -506,7 +505,6 @@ <h5 class="source-heading">index.html</h5>
   &lt;head&gt;
     &lt;meta charset="UTF-8"&gt;
     &lt;title&gt;topolis integration&lt;/title&gt;
-    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css"&gt;
     &lt;link rel="stylesheet" href="node_modules/ol/ol.css"&gt;
     &lt;style&gt;
       .map {
@@ -519,8 +517,6 @@ <h5 class="source-heading">index.html</h5>
     &lt;div id&#x3D;&quot;map&quot; class&#x3D;&quot;map&quot;&gt;&lt;/div&gt;
 
     &lt;script src="https://cdn.jsdelivr.net/npm/topolis@0.2.5/dist/topolis.js"&gt;&lt;/script&gt;
-    &lt;script src="https://code.jquery.com/jquery-3.7.1.min.js"&gt;&lt;/script&gt;
-    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"&gt;&lt;/script&gt;
     &lt;script type="module" src="main.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
 &lt;/html&gt;</code></pre>
@@ -546,8 +542,6 @@ <h5 class="source-heading">package.json</h5>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/topolis@0.2.5/dist/topolis.js"></script>
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
     <script src="common.js"></script>
     <script src="topolis.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>