533 lines
		
	
	
		
			28 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			533 lines
		
	
	
		
			28 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | ||
| <html lang="it" data-text="html" data-theme="light">
 | ||
| <head>
 | ||
|     <meta charset="UTF-8" />
 | ||
|     <link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
 | ||
|     <link rel="stylesheet" href="js/vendor/leaflet.markercluster/dist/MarkerCluster.css" />
 | ||
|     <link rel="stylesheet" href="js/vendor/leaflet.markercluster/dist/MarkerCluster.Default.css" />
 | ||
|     <link rel="stylesheet" href="../css/app.css" />
 | ||
|     <link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
 | ||
|     <link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
 | ||
|     <link rel="stylesheet" href="js/vendor/@photo-sphere-viewer/core/index.css" />
 | ||
|     <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
 | ||
|     <script type="importmap">
 | ||
|     {
 | ||
|         "imports": {
 | ||
|             "three": "./js/vendor/three/build/three.module.js",
 | ||
|             "@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js",
 | ||
|             "@hotwired/stimulus": "./js/vendor/@hotwired/stimulus/dist/stimulus.js"
 | ||
|         }
 | ||
|     }
 | ||
|     </script>
 | ||
|     <script src="./js/vendor/proj4/dist/proj4.js"></script>
 | ||
|     <script src="js/vendor/leaflet/dist/leaflet-src.js"></script>
 | ||
|     <script src="js/vendor/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
 | ||
|     <script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
 | ||
|     <script src="js/index.js" type="module"></script>
 | ||
|     <title>WebGIS Isola di Capri</title>
 | ||
| </head>
 | ||
| <body data-controller="menu modal"
 | ||
|     data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu">
 | ||
|     <nav class="navbar mb-0" role="navigation">
 | ||
|         <div class="navbar-brand">
 | ||
|             <a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
 | ||
|                 <span class="icon">
 | ||
|                     <i class="fa fa-home"></i>
 | ||
|                 </span>
 | ||
|             </a>
 | ||
|             <span class="navbar-item is-size-5">
 | ||
|                 Carta Archeologica dell'Isola di Capri - WebGIS
 | ||
|             </span>
 | ||
|             <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
 | ||
|                 <span aria-hidden="true"></span>
 | ||
|                 <span aria-hidden="true"></span>
 | ||
|                 <span aria-hidden="true"></span>
 | ||
|                 <span aria-hidden="true"></span>
 | ||
|             </a>
 | ||
|         </div>
 | ||
|         <hr class="navbar-divider">
 | ||
|         <div class="navbar-end pb-1 pt-1" id="nav-menu">
 | ||
|             <button class="navbar-item button is-size-5 is-white mr-3" role="button"
 | ||
|                 data-id="main"
 | ||
|                 data-action="menu#toggleMenu">
 | ||
|                 <span class="icon mr-2">
 | ||
|                     <i class="fa fa-list"></i>
 | ||
|                 </span>
 | ||
|                 Elenco beni
 | ||
|             </button>
 | ||
|             <button class="navbar-item button is-size-5 is-white mr-3" role="button"
 | ||
|                 data-id="cartography"
 | ||
|                 data-action="menu#toggleMenu">
 | ||
|                 <span class="icon mr-2">
 | ||
|                     <i class="fa fa-map"></i>
 | ||
|                 </span>
 | ||
|                 Catasto storico
 | ||
|             </button>
 | ||
|             <button class="button is-outlined is-rounded is-link mr-4 mt-1" id="howto" title="Istruzioni">
 | ||
|                 <span class="icon is-large has-text-link">
 | ||
|                     <i class="fas fa-question fa-lg"></i>
 | ||
|                 </span>
 | ||
|             </button>
 | ||
|         </div>
 | ||
|     </nav>
 | ||
|     <div class="wait-lg text-center is-hidden" style="clear: both;">
 | ||
|         <p>Loading...</p>
 | ||
|         <div class="loading loading-lg"></div>
 | ||
|     </div>
 | ||
|     <div class="main columns">
 | ||
|         <div class="column mb-0 pb-0 is-full is-relative">
 | ||
|             <div class="pb-0 is-relative" id="map" aria-describedby="map-progress" aria-busy="true">
 | ||
|                 <progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
 | ||
|             </div>
 | ||
|         </div>
 | ||
|         <div class="menu-overlay column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter"
 | ||
|             data-menu-target="menu" data-controller="layer">
 | ||
|             <!-- Template to build menu items dynamically -->
 | ||
|             <template id="menu-item-template">
 | ||
|                     <li>
 | ||
|                     <a class="is-block button"
 | ||
|                     data-controller="marker"
 | ||
|                     data-action="marker#go"
 | ||
|                     data-marker-coords-value=""
 | ||
|                     data-marker-group-value="">
 | ||
|                     </a>
 | ||
|                 </li>
 | ||
|             </template>
 | ||
|             <aside class="menu ml-4 mt-3">
 | ||
|                 <button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#close"></button>
 | ||
|                 <p class="menu-label is-size-5 mt-2 is-clickable" data-id="sites">
 | ||
|                      <span role="button" class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="sites" data-action="click->layer#toggle">
 | ||
|                         <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
 | ||
|                     </span>
 | ||
|                     <span class="icon pr-1">
 | ||
|                         <img class="image" src="img/icons/siti_menu.png"/>
 | ||
|                     </span>
 | ||
|                     <span role="button" data-action="click->menu#toggle" data-id="sites">
 | ||
|                         Beni archeologici
 | ||
|                         <span class="icon pl-2">
 | ||
|                             <i class="fa fa-chevron-right" data-menu-target="icon" data-id="sites"></i>
 | ||
|                         </span>
 | ||
|                     </span>
 | ||
|                 </p>
 | ||
|                 <ul class="menu-list is-hidden" id="sites-list" data-menu-target="list" data-controller="marker">
 | ||
|                     <li data-list-id="sites-anacapri-sub">
 | ||
|                         <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="sites-anacapri-sub">
 | ||
|                             Anacapri
 | ||
|                             <span class="icon ml-2">
 | ||
|                                 <i class="fa fa-chevron-right" data-menu-target="icon"></i>
 | ||
|                             </span>
 | ||
|                         </span>
 | ||
|                     </li>
 | ||
|                     <li class="mt-3" data-list-id="sites-capri-sub">
 | ||
|                         <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="sites-capri-sub">
 | ||
|                             Capri
 | ||
|                             <span class="icon ml-2">
 | ||
|                                 <i class="fa fa-chevron-right" data-menu-target="icon"></i>
 | ||
|                             </span>
 | ||
|                         </span>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|                 <p class="menu-label is-size-5 is-clickable" data-id="notConserved">
 | ||
|                      <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="notConserved"
 | ||
|                         data-action="click->layer#toggle" style="max-height: 10px">
 | ||
|                         <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
 | ||
|                     </span>
 | ||
|                     <span class="icon pr-1">
 | ||
|                         <img class="image" src="img/icons/non_cons_menu.png"/>
 | ||
|                     </span>
 | ||
|                     <span role="button" data-action="click->menu#toggle" data-id="notConserved">
 | ||
|                         Beni non conservati
 | ||
|                         <span class="icon pl-2">
 | ||
|                             <i class="fa fa-chevron-right" data-menu-target="icon" data-id="notConserved"></i>
 | ||
|                         </span>
 | ||
|                     </span>
 | ||
|                 </p>
 | ||
|                 <ul class="menu-list is-hidden" id="notConserved-list" data-menu-target="list" data-controller="marker">
 | ||
|                     <li data-list-id="notConserved-anacapri-sub">
 | ||
|                         <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="notConserved-anacapri-sub">
 | ||
|                             Anacapri
 | ||
|                             <span class="icon ml-2 is-small" data-list-id="notConserved-anacapri-sub">
 | ||
|                                 <i class="fa fa-chevron-right"></i>
 | ||
|                             </span>
 | ||
|                         </span>
 | ||
|                     </li>
 | ||
|                     <li class="mt-3" data-list-id="notConserved-capri-sub">
 | ||
|                         <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="notConserved-capri-sub">
 | ||
|                             Capri
 | ||
|                             <span class="icon ml-2 is-small" data-list-id="notConserved-capri-sub">
 | ||
|                                 <i class="fa fa-chevron-right"></i>
 | ||
|                             </span>
 | ||
|                         </span>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|                 <p class="menu-label is-size-5 is-clickable" data-id="findings">
 | ||
|                      <span class="icon pl-1 mr-2 is-small" data-layer-target="findings" data-action="click->layer#toggle">
 | ||
|                         <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
 | ||
|                     </span>
 | ||
|                     <span class="icon pr-1">
 | ||
|                         <img class="image" src="img/icons/rinv_menu.png"/>
 | ||
|                     </span>
 | ||
|                     <span role="button" data-action="click->menu#toggle" data-id="findings">
 | ||
|                         Reperti
 | ||
|                         <span class="icon pl-2">
 | ||
|                             <i class="fa fa-chevron-right" data-menu-target="icon" data-id="findings"></i>
 | ||
|                         </span>
 | ||
|                     </span>
 | ||
|                 </p>
 | ||
|                 <ul class="menu-list is-hidden" id="findings-list" data-menu-target="list" data-controller="marker">
 | ||
|                     <li data-list-id="findings-anacapri-sub">
 | ||
|                         <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="findings-anacapri-sub">
 | ||
|                             Anacapri
 | ||
|                             <span class="icon ml-2">
 | ||
|                                 <i class="fa fa-chevron-right" data-menu-target="icon"></i>
 | ||
|                             </span>
 | ||
|                         </span>
 | ||
|                     </li>
 | ||
|                     <li class="mt-3" data-list-id="findings-capri-sub">
 | ||
|                         <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="findings-capri-sub">
 | ||
|                             Capri
 | ||
|                             <span class="icon ml-2">
 | ||
|                                 <i class="fa fa-chevron-right" data-menu-target="icon"></i>
 | ||
|                             </span>
 | ||
|                         </span>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|                 <p class="menu-label is-size-5 is-clickable" data-id="reuse">
 | ||
|                      <span class="icon pl-1 mr-2 is-small" data-layer-target="reuse" data-action="click->layer#toggle">
 | ||
|                         <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
 | ||
|                     </span>
 | ||
|                     <span class="icon pr-1">
 | ||
|                         <img class="image" src="img/icons/reimpiego_menu.png"/>
 | ||
|                     </span>
 | ||
|                     <span role="button" data-action="click->menu#toggle" data-id="reuse">
 | ||
|                         Reimpiego
 | ||
|                         <span class="icon pl-2">
 | ||
|                             <i class="fa fa-chevron-right" data-menu-target="icon" data-id="reuse"></i>
 | ||
|                         </span>
 | ||
|                     </span>
 | ||
|                 </p>
 | ||
|                 <ul class="menu-list is-hidden" id="reuse-list" data-menu-target="list" data-controller="marker">
 | ||
|                     <li data-list-id="reuse-capri-sub">
 | ||
|                         <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="reuse-capri-sub">
 | ||
|                             Capri
 | ||
|                             <span class="icon ml-2">
 | ||
|                                 <i class="fa fa-chevron-right" data-menu-target="icon"></i>
 | ||
|                             </span>
 | ||
|                         </span>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|                 <p class="menu-label is-size-5 is-clickable" data-id="prehistoric">
 | ||
|                      <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="prehistoric" data-action="click->layer#toggle">
 | ||
|                         <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
 | ||
|                     </span>
 | ||
|                     <span class="icon pr-1">
 | ||
|                         <img class="image" src="img/icons/preistorici.png"/>
 | ||
|                     </span>
 | ||
|                     <span role="button" data-action="click->menu#toggle" data-id="prehistoric">
 | ||
|                         Aree di affioramento
 | ||
|                         <span class="icon pl-2">
 | ||
|                             <i class="fa fa-chevron-right" data-menu-target="icon" data-id="prehistoric"></i>
 | ||
|                         </span>
 | ||
|                     </span>
 | ||
|                 </p>
 | ||
|                 <ul class="menu-list is-hidden" id="prehistoric-list" data-menu-target="list" data-controller="marker">
 | ||
|                     <li data-list-id="prehistoric-anacapri-sub">
 | ||
|                         <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="prehistoric-anacapri-sub">
 | ||
|                             Anacapri
 | ||
|                             <span class="icon ml-2 is-small" data-list-id="prehistoric-anacapri-sub">
 | ||
|                                 <i class="fa fa-chevron-right"></i>
 | ||
|                             </span>
 | ||
|                         </span>
 | ||
|                     </li>
 | ||
|                     <li class="mt-3" data-list-id="prehistoric-capri-sub">
 | ||
|                         <span role="button" class="is-clickable" data-action="click->menu#openSubList" data-list-id="prehistoric-capri-sub">
 | ||
|                             Capri
 | ||
|                             <span class="icon ml-2 is-small" data-list-id="prehistoric-capri-sub">
 | ||
|                                 <i class="fa fa-chevron-right"></i>
 | ||
|                             </span>
 | ||
|                         </span>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|                 <p class="menu-label is-size-5 is-clickable" data-id="underwater">
 | ||
|                      <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="underwater" data-action="click->layer#toggle">
 | ||
|                         <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
 | ||
|                     </span>
 | ||
|                     <span class="icon pr-1">
 | ||
|                         <img class="image" src="img/icons/subacquei_menu.png"/>
 | ||
|                     </span>
 | ||
|                     <span role="button" data-action="click->menu#toggle" data-id="underwater">
 | ||
|                         Giacimenti subacquei
 | ||
|                         <span class="icon pl-2">
 | ||
|                             <i class="fa fa-chevron-right" data-menu-target="icon" data-id="underwater"></i>
 | ||
|                         </span>
 | ||
|                     </span>
 | ||
|                 </p>
 | ||
|                 <ul class="menu-list is-hidden" id="underwater-list" data-menu-target="list" data-controller="marker">
 | ||
|                     <li>
 | ||
|                         <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5511022 14.1910274">
 | ||
|                             Bocca Grande - relitto con carico
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li>
 | ||
|                         <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5870549 14.2887986">
 | ||
|                             Bocca Piccola - relitto con carico
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li>
 | ||
|                         <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5579004 14.2363139">
 | ||
|                             Marina Grande - strutture portuali
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li>
 | ||
|                         <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.54468634 14.23392751">
 | ||
|                             Marina Piccola, Scoglio delle Sirene - strutture portuali, approdo
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li>
 | ||
|                         <a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5649884 14.1940185">
 | ||
|                             Punta dell’Arcera - relitto con carico
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|             </aside>
 | ||
|         </div>
 | ||
|         <div class="menu-overlay column is-hidden is-3 is-3-desktop is-4-mobile is-pulled-right is-overlay has-background-white-ter"
 | ||
|             data-menu-target="cartography">
 | ||
|             <!-- Template to build menu items dynamically -->
 | ||
|             <template id="cartography-item-template">
 | ||
|                 <li>
 | ||
|                     <label class="checkbox">
 | ||
|                         <input type="checkbox"
 | ||
|                             data-controller="layer"
 | ||
|                             data-action="layer#toggleCartography"
 | ||
|                             data-layer-id-value=""
 | ||
|                             data-layer-type-value=""
 | ||
|                         />
 | ||
|                     </label>
 | ||
|                 </li>
 | ||
|             </template>
 | ||
|             <aside class="menu ml-4 mt-3" data-id="cartography-aside">
 | ||
|                 <button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#closeCartography"></button>
 | ||
|             </aside>
 | ||
|         </div>
 | ||
|     </div>
 | ||
|     <!-- Bibliography citations template -->
 | ||
|     <template id="biblio-item-template">
 | ||
|         <span class="is-clickable has-text-link"
 | ||
|             data-action="click->biblio#open">
 | ||
|         </span>
 | ||
|     </template>
 | ||
|     <!-- Sites data modal -->
 | ||
|     <div class="modal" id="site-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
 | ||
|         <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
 | ||
|         <div class="modal-content has-background-white">
 | ||
|             <div class="tabs is-centered">
 | ||
|                 <ul>
 | ||
|                     <li class="is-active" id="for-short-sheet"
 | ||
|                         data-tabs-target="tab active" data-action="click->tabs#activate">
 | ||
|                         <a>
 | ||
|                           <span class="icon is-small"
 | ||
|                             ><i class="fas fa-info-circle" aria-hidden="true"></i
 | ||
|                           ></span>
 | ||
|                           <span>Scheda sintetica</span>
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-site-sheet" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                         <a>
 | ||
|                           <span class="icon is-small"
 | ||
|                             ><i class="fas fa-info-circle" aria-hidden="true"></i
 | ||
|                           ></span>
 | ||
|                           <span>Scheda dettagliata</span>
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                       <a>
 | ||
|                         <span class="icon is-small"
 | ||
|                           ><i class="fas fa-image" aria-hidden="true"></i
 | ||
|                         ></span>
 | ||
|                         <span>Disegni e fotografie</span>
 | ||
|                       </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-documents" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                       <a>
 | ||
|                         <span class="icon is-small"
 | ||
|                           ><i class="far fa-file-alt" aria-hidden="true"></i
 | ||
|                         ></span>
 | ||
|                         <span>Documenti</span>
 | ||
|                       </a>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|             </div>
 | ||
|             <div class="data-tabs" id="short-sheet" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="site-sheet" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="documents" data-tabs-target="content"></div>
 | ||
|         </div>
 | ||
|         <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
 | ||
|     </div>
 | ||
|     <!-- Not conserved modal -->
 | ||
|     <div class="modal" id="not-conser-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
 | ||
|         <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
 | ||
|         <div class="modal-content has-background-white">
 | ||
|             <div class="tabs is-centered">
 | ||
|                 <ul>
 | ||
|                     <li class="is-active" id="for-not-conserved-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
 | ||
|                         <a>
 | ||
|                           <span class="icon is-small"
 | ||
|                             ><i class="fas fa-info-circle" aria-hidden="true"></i
 | ||
|                           ></span>
 | ||
|                           <span>Scheda</span>
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                       <a>
 | ||
|                         <span class="icon is-small"
 | ||
|                           ><i class="fas fa-image" aria-hidden="true"></i
 | ||
|                         ></span>
 | ||
|                         <span>Immagini</span>
 | ||
|                       </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-documents" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                       <a>
 | ||
|                         <span class="icon is-small"
 | ||
|                           ><i class="fas fa-book" aria-hidden="true"></i
 | ||
|                         ></span>
 | ||
|                         <span>Documenti</span>
 | ||
|                       </a>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|             </div>
 | ||
|             <div class="data-tabs" id="not-conserved-sheet" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="documents" data-tabs-target="content"></div>
 | ||
|         </div>
 | ||
|         <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
 | ||
|     </div>
 | ||
|     <!-- Finding modal -->
 | ||
|     <div class="modal" id="finding-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
 | ||
|         <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
 | ||
|         <div class="modal-content has-background-white">
 | ||
|             <div class="tabs is-centered">
 | ||
|                 <ul>
 | ||
|                     <li class="is-active" id="for-finding-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
 | ||
|                         <a>
 | ||
|                           <span class="icon is-small"
 | ||
|                             ><i class="fas fa-info-circle" aria-hidden="true"></i
 | ||
|                           ></span>
 | ||
|                           <span>Scheda</span>
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                       <a>
 | ||
|                         <span class="icon is-small"
 | ||
|                           ><i class="fas fa-image" aria-hidden="true"></i
 | ||
|                         ></span>
 | ||
|                         <span>Immagini</span>
 | ||
|                       </a>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|             </div>
 | ||
|             <div class="data-tabs" id="finding-sheet" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
 | ||
|         </div>
 | ||
|         <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
 | ||
|     </div>
 | ||
|     <!-- Prehistoric modal -->
 | ||
|     <div class="modal" id="prehist-data" data-controller="modal biblio marker tabs" data-modal-target="modal">
 | ||
|         <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
 | ||
|         <div class="modal-content has-background-white">
 | ||
|             <div class="tabs is-centered">
 | ||
|                 <ul>
 | ||
|                     <li class="is-active" id="for-prehist-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
 | ||
|                         <a>
 | ||
|                           <span class="icon is-small"
 | ||
|                             ><i class="fas fa-info-circle" aria-hidden="true"></i
 | ||
|                           ></span>
 | ||
|                           <span>Scheda</span>
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                       <a>
 | ||
|                         <span class="icon is-small"
 | ||
|                           ><i class="fas fa-image" aria-hidden="true"></i
 | ||
|                         ></span>
 | ||
|                         <span>Immagini</span>
 | ||
|                       </a>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|             </div>
 | ||
|             <div class="data-tabs" id="prehist-sheet" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
 | ||
|         </div>
 | ||
|         <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
 | ||
|     </div>
 | ||
|     <!-- Underwater modal -->
 | ||
|     <div class="modal" id="underwater-data" data-controller="modal tabs marker" data-modal-target="modal">
 | ||
|         <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
 | ||
|         <div class="modal-content has-background-white">
 | ||
|             <div class="tabs is-centered">
 | ||
|                 <ul>
 | ||
|                     <li class="is-active" id="for-underwater-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
 | ||
|                         <a>
 | ||
|                           <span class="icon is-small"><i class="fas fa-info-circle" aria-hidden="true"></i></span>
 | ||
|                           <span>Scheda</span>
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                       <a>
 | ||
|                         <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
 | ||
|                         <span>Immagini</span>
 | ||
|                       </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-documents" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                       <a>
 | ||
|                         <span class="icon is-small"><i class="fas fa-book" aria-hidden="true"></i></span>
 | ||
|                         <span>Documenti</span>
 | ||
|                       </a>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|             </div>
 | ||
|             <div class="data-tabs" id="underwater-sheet" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="documents" data-tabs-target="content"></div>
 | ||
|         </div>
 | ||
|         <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
 | ||
|     </div>
 | ||
|     <!-- Reuse modal -->
 | ||
|     <div class="modal" id="reuse-data" data-controller="modal biblio tabs marker" data-modal-target="modal">
 | ||
|         <div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
 | ||
|         <div class="modal-content has-background-white">
 | ||
|             <div class="tabs is-centered">
 | ||
|                 <ul>
 | ||
|                     <li class="is-active" id="for-reuse-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
 | ||
|                         <a>
 | ||
|                           <span class="icon is-small"><i class="fas fa-info-circle" aria-hidden="true"></i></span>
 | ||
|                           <span>Scheda</span>
 | ||
|                         </a>
 | ||
|                     </li>
 | ||
|                     <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
 | ||
|                       <a>
 | ||
|                         <span class="icon is-small"
 | ||
|                           ><i class="fas fa-image" aria-hidden="true"></i
 | ||
|                         ></span>
 | ||
|                         <span>Immagini</span>
 | ||
|                       </a>
 | ||
|                     </li>
 | ||
|                 </ul>
 | ||
|             </div>
 | ||
|             <div class="data-tabs" id="reuse-sheet" data-tabs-target="content"></div>
 | ||
|             <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
 | ||
|         </div>
 | ||
|         <button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
 | ||
|     </div>
 | ||
|     <!-- Spherical photo modal -->
 | ||
|     <div class="modal" id="spherical-modal">
 | ||
|         <div class="modal-background"></div>
 | ||
|         <div class="modal-content has-background-white">
 | ||
|             <div id="pano-viewer"></div>
 | ||
|         </div>
 | ||
|         <button class="modal-close is-large" aria-label="close"></button>
 | ||
|     </div>
 | ||
| </body>
 | ||
| </html>
 |