src/main.js

   1 import App from './App.svelte';
   2 import SearchPage from './pages/SearchPage.svelte';
   3 import DetailsPage from './pages/DetailsPage.svelte';
   4 import PolygonsPage from './pages/PolygonsPage.svelte';
   5 import DeletablePage from './pages/DeletablePage.svelte';
   6
   7 import { serialize_form, clean_up_url_parameters } from './lib/api_utils.js'
   8
   9 let myhistory = [];
  10
  11 const app = new App({
  12   target: document.body
  13 });
  14
  15
  16
  17
  18 // inspects window.location
  19 function identify_current_page() {
  20   var pagename = window.location.pathname.replace('.html', '').replace(/^.*\//, '');
  21
  22   if (pagename === '') { return 'search' }
  23
  24   if (['search', 'reverse', 'details', 'deletable', 'polygons'].indexOf(pagename) != '-1') {
  25     return pagename;
  26   }
  27 }
  28
  29
  30
  31 function parse_url_and_load_page() {
  32   let pagename = identify_current_page();
  33
  34   document.getElementById('main').replaceChildren();
  35
  36   if (pagename === 'search' || pagename === 'reverse') {
  37     new SearchPage({
  38       target: document.getElementById('main'),
  39       props: {
  40         reverse_search: (pagename === 'reverse')
  41       }
  42     });
  43   } else if (pagename === 'details') {
  44     new DetailsPage({
  45       target: document.getElementById('main')
  46     });
  47   } else if (pagename === 'deletable') {
  48     new DeletablePage({
  49       target: document.getElementById('main')
  50     });
  51   } else if (pagename === 'polygons') {
  52     new PolygonsPage({
  53       target: document.getElementById('main')
  54     });
  55   }
  56 }
  57
  58
  59
  60 function is_relative_url(url) {
  61   if (!url) return false;
  62   if (url.indexOf('?') === 0) return true;
  63   if (url.indexOf('/') === 0) return true;
  64   if (url.indexOf('#') === 0) return false;
  65   if (url.match(/^http/)) return false;
  66   if (!url.match(/\.html/)) return true;
  67
  68   return false;
  69 }
  70
  71
  72 parse_url_and_load_page();
  73
  74 // load page after form submit
  75 document.addEventListener('submit', function (e) {
  76
  77   // loop parent nodes from the target to the delegation node
  78   for (var target = e.target; target && target != this; target = target.parentNode) {
  79     if (target.matches('form')) {
  80       e.preventDefault();
  81
  82       var target_url = serialize_form(target);
  83       target_url = clean_up_url_parameters(target_url);
  84
  85       window.history.pushState(myhistory, '', '?' + target_url);
  86
  87       parse_url_and_load_page();
  88       break;
  89     }
  90   }
  91
  92 });
  93
  94 // load page after click on relative URL
  95 document.addEventListener('click', function (e) {
  96
  97   // loop parent nodes from the target to the delegation node
  98   for (var target = e.target; target && target != this; target = target.parentNode) {
  99     if (target.matches('a')) {
 100
 101       var target_url = target.href;
 102
 103       if (!is_relative_url(target_url)) return;
 104
 105       e.preventDefault();
 106       e.stopPropagation();
 107
 108       window.history.pushState(myhistory, '', target_url);
 109
 110       parse_url_and_load_page();
 111       break;
 112     }
 113   }
 114 });
 115
 116 // deal with back-button and other user action
 117 window.onpopstate = function () {
 118   parse_url_and_load_page();
 119 };
 120
 121
 122