Merge branch 'main' into main

Gruntfile.js

@@ -1,28 +1,31 @@
-const webpackConfig = require('./webpack.config.js');
+const webpackConfig = require("./webpack.config.js");
 
-module.exports = function(grunt) {
+module.exports = function (grunt) {
   // load npm tasks for grunt-* libs, excluding grunt-cli
-  require('matchdep').filterDev('{grunt,gruntify}-*').filter(function(pkg) {
-    return ['grunt-cli'].indexOf(pkg) < 0;
-  }).forEach(grunt.loadNpmTasks);
+  require("matchdep")
+    .filterDev("{grunt,gruntify}-*")
+    .filter(function (pkg) {
+      return ["grunt-cli"].indexOf(pkg) < 0;
+    })
+    .forEach(grunt.loadNpmTasks);
 
   grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'),
+    pkg: grunt.file.readJSON("package.json"),
 
     webpack: {
       myConfig: webpackConfig,
     },
 
     eslint: {
-      src: ['src/**/*.js', 'test/**/*.js'],
+      src: ["src/**/*.js", "test/**/*.js"],
     },
 
     karma: {
       development: {
-        configFile: 'test/karma.conf.js',
+        configFile: "test/karma.conf.js",
       },
       test: {
-        configFile: 'test/karma.conf.js',
+        configFile: "test/karma.conf.js",
       },
     },
 
@@ -32,10 +35,10 @@ module.exports = function(grunt) {
         files: [
           {
             expand: true,
-            cwd: 'assets/icons/svg',
-            src: ['*.svg'],
-            dest: 'assets/icons/svg-min/',
-            ext: '.svg',
+            cwd: "assets/icons/svg",
+            src: ["*.svg"],
+            dest: "assets/icons/svg-min/",
+            ext: ".svg",
           },
         ],
       },
@@ -46,7 +49,7 @@ module.exports = function(grunt) {
           { removeTitle: true }, // "leaflet-toolbar" lets us specify the title attribute later
           {
             removeAttrs: {
-              attrs: ['xmlns', 'fill'],
+              attrs: ["xmlns", "fill"],
             },
           },
         ],
@@ -59,14 +62,14 @@ module.exports = function(grunt) {
       },
       dist: {
         expand: true,
-        cwd: 'assets/icons/svg-min/',
-        src: ['*.svg'],
-        dest: 'assets/icons/',
+        cwd: "assets/icons/svg-min/",
+        src: ["*.svg"],
+        dest: "assets/icons/",
         options: {
-          log: 'info',
+          log: "info",
           mode: {
             symbol: {
-              sprite: 'sprite.symbol.svg',
+              sprite: "sprite.symbol.svg",
               example: true,
             },
           },
@@ -79,46 +82,53 @@ module.exports = function(grunt) {
         livereload: true,
       },
       source: {
-        files: ['src/**/*.js', 'test/**/*.js', 'Gruntfile.js'],
-        tasks: ['eslint', 'karma:development:start'],
+        files: ["src/**/*.js", "test/**/*.js", "Gruntfile.js"],
+        tasks: ["eslint", "karma:development:start"],
       },
     },
   });
 
   /* Run tests once. */
-  grunt.registerTask('test', ['eslint', 'karma:test']);
+  grunt.registerTask("test", ["eslint", "karma:test"]);
 
-  grunt.registerTask('build', [
-    'eslint',
-    'karma:development:start',
-    'coverage',
-    'webpack',
+  grunt.registerTask("build", [
+    "eslint",
+    "karma:development:start",
+    "coverage",
+
+    "webpack",
   ]);
 
   // recompile svg icon sprite
-  grunt.registerTask('icons', ['svgmin', 'svg_sprite']);
+  grunt.registerTask("icons", ["svgmin", "svg_sprite"]);
 
-  grunt.registerTask('coverage', 'CLI reporter for karma-coverage', function() {
-    var coverageReports = grunt.file.expand('coverage/*/coverage.txt');
-    var reports = {};
-    var report; var i; var len;
+  grunt.registerTask(
+    "coverage",
+    "CLI reporter for karma-coverage",
+    function () {
+      let coverageReports = grunt.file.expand("coverage/*/coverage.txt");
+      let reports = {};
+      let report;
+      let i;
+      let len;
 
-    for (i = 0, len = coverageReports.length; i < len; i++) {
-      report = grunt.file.read(coverageReports[i]);
-      if (!reports[report]) {
-        reports[report] = [coverageReports[i]];
-      } else {
-        reports[report].push(coverageReports[i]);
+      for (i = 0, len = coverageReports.length; i < len; i++) {
+        report = grunt.file.read(coverageReports[i]);
+        if (!reports[report]) {
+          reports[report] = [coverageReports[i]];
+        } else {
+          reports[report].push(coverageReports[i]);
+        }
       }
-    }
 
-    for (report in reports) {
-      if (reports.hasOwnProperty(report)) {
-        for (i = 0, len = reports[report].length; i < len; i++) {
-          grunt.log.writeln(reports[report][i]);
+      for (report in reports) {
+        if (reports.hasOwnProperty(report)) {
+          for (i = 0, len = reports[report].length; i < len; i++) {
+            grunt.log.writeln(reports[report][i]);
+          }
+          grunt.log.writeln(report);
         }
-        grunt.log.writeln(report);
       }
     }
-  });
+  );
 };

examples/archive.html

@@ -26,7 +26,7 @@
           <div class="modal-header d-block">
             <div class="d-flex justify-content-between align-items-center">
               <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
             </div>
             <p> <small>(while MapKnitter is offline)</small> </p>
           </div>
@@ -50,10 +50,12 @@ <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
     </div>
 
     <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+    <i title="Open Sidebar" id="mapToggle" title="Open Sidebar" class="fa fa-bars fa-3x " style="position: absolute; right: 0; margin: 1rem; z-index: 900; color: white; cursor: pointer;" aria-hidden="true"></i>
 
     <div class="offcanvas offcanvas-end" data-bs-backdrop="false" data-bs-keyboard="false" tabindex="1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
       <div class="offcanvas-header">
         <h3 id="offcanvasRightLabel">Images</h3>
+            <i title="Close Sidebar" id="modalToggle" title="Close Sidebar" class=" fa fa-times fa-3x " style="cursor: pointer; position: absolute; right: 0; margin: 1rem; color: #00000070;" aria-hidden="true"></i>
         <button type="button" class="btn btn-primary d-sm-none" data-bs-dismiss="offcanvas" aria-label="Close">View Map</button>
       </div>
       <hr>
@@ -72,6 +74,8 @@ <h3 id="offcanvasRightLabel">Images</h3>
     let input = document.getElementById('input');
     let responseText = document.getElementById('response');
     let imageContainer = document.getElementById('imgContainer');
+    let modalToggle = document.getElementById('modalToggle')
+    let mapToggle = document.getElementById('mapToggle')
 
     const setupMap = () => {
       map = L.map('map').setView([51.505, -0.09], 13);
@@ -94,10 +98,33 @@ <h3 id="offcanvasRightLabel">Images</h3>
 
     form.addEventListener('submit', (event) => {
       event.preventDefault();
-      const url = input.value.replace('details', 'metadata');
-      let splitUrl = url.split('/');
-      let detectKey = splitUrl[splitUrl.length - 2];
-      console.log("detected key", detectKey);
+      extractKey();
+    });
+
+    welcomeModal.addEventListener('hidden.bs.modal', (event) => {
+      new bootstrap.Offcanvas(sidebar).show();
+    });
+
+    function extractKey() {
+      let getUrl;
+      if(!input.value.includes('archive.org/details/') && !input.value.includes('https://'))
+      {
+        getUrl = `https://archive.org/details/${input.value}/`;
+        showImages(getUrl); 
+      }
+      else if(!input.value.includes('https://')) {
+        getUrl = `https://${input.value}`;
+        showImages(getUrl);   
+      }
+      else
+      {
+        getUrl = input.value;
+        showImages(getUrl)
+      }
+    }
+
+    function showImages(getUrl) {
+      const url = getUrl.replace('details', 'metadata');
       let fetchedFrom
       axios.get(url)
         .then((response) => {
@@ -116,25 +143,7 @@ <h3 id="offcanvasRightLabel">Images</h3>
                 fetchedFrom.appendChild(fetchedFromUrl)
 
                 placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button');
-                placeButton.innerHTML = 'Place on map ';
-
-                placeButton.addEventListener('click', (event) => {
-                  if(!placeButton.getElementsByClassName('fa-spinner')[0]){
-                    const spinner = document.createElement('i')
-                    spinner.setAttribute('class', "fa fa-spinner fa-spin")
-                    spinner.setAttribute('font-family', 'font awesome')
-
-                    placeButton.appendChild(spinner)
-
-                    let imageURL = event.target.previousElementSibling.src;
-                    let image = L.distortableImageOverlay(imageURL);
-                    map.imgGroup.addLayer(image)
-
-                    image.addEventListener('load', () => {
-                      placeButton.removeChild(spinner)
-                    })
-                  }
-                })
+                placeButton.innerHTML = 'Place on map';
 
                 image.src = `${url.replace('metadata', 'download')}/${file.name}`;
 
@@ -156,11 +165,32 @@ <h3 id="offcanvasRightLabel">Images</h3>
         .finally(() => {
           bootstrap.Modal.getInstance(welcomeModal).hide();
         });
-    });
+    }
 
     welcomeModal.addEventListener('hidden.bs.modal', (event) => {
-      new bootstrap.Offcanvas(sidebar).show();
+        new bootstrap.Offcanvas(sidebar).show();
     });
 
+
+    map.addEventListener('click', (event)=>{
+       sidebar.classList.remove('show')
+    })
+
+    mapToggle.addEventListener('click', (event)=>{
+           new bootstrap.Offcanvas(sidebar).show();
+    })
+    modalToggle.addEventListener('click', (event)=>{
+            if(sidebar.classList.contains('show')){
+              sidebar.classList.remove('show')
+            }
+    })
+
+    document.addEventListener("click", (event) => {
+      if (event.target.classList.contains('place-button')) {
+        let imageURL = event.target.previousElementSibling.src;
+        let image = L.distortableImageOverlay(imageURL);
+        map.imgGroup.addLayer(image);
+      }
+    });
   </script>
-</html>
+</html>

examples/export.html

@@ -26,4 +26,4 @@
     <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
 </body>
 
-</html>
+</html>

examples/select.html

@@ -82,4 +82,5 @@
       });
     })();
   </script>
+</body>
 </html>