Ana Sayfa Keşfet Yardım
Giriş Yap
tati
/
accent-dialect-map
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

Extract js to its own file. Create pagination. Add validations

Tatiana Inama 6 yıl önce
ebeveyn
1ba0141654
işleme
4c9d1d421d
3 değiştirilmiş dosya ile 189 ekleme ve 112 silme
Birleşik Görünüm Farklılık Durumunu Göster
  1. 111 0
      app.js
  2. 69 112
      index.html
  3. 9 0
      styles.css

+ 111 - 0
app.js
Dosyayı Görüntüle 

@@ -0,0 +1,111 @@
 
+'use strict';
 
+
 
+let currentPage = 0;
 
+const tabs = document.getElementsByClassName('page');
 
+const conditions = {
 
+  agreement: [
 
+    () => {
 
+      const agreementCheckbox = document.getElementById('agreement');
 
+      if (agreementCheckbox.checked) {
 
+        return true;
 
+      } else {
 
+        const form = document.getElementById('terms-and-conditions');
 
+        form.classList.add('was-validated');
 
+        return false;
 
+      }
 
+    }
 
+  ]
 
+}
 
+
 
+const showPage = (page) => {
 
+  tabs[page].style.display = 'block';  
+}
 
+
 
+const isValid = condition => condition();
 
+
 
+const changePage = (page, condition) => {
 
+  if (condition && !conditions[condition].every(isValid)) {
 
+    console.log("not all conditions passed");
 
+    return;
 
+  }
 
+  tabs[currentPage].style.display = 'none';
 
+  showPage(page);
 
+  currentPage = page;
 
+}
 
+
 
+showPage(0);
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+mapboxgl.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
 
+const bounds = [
 
+  [-2.460270, 53.370427],
 
+  [-2.062598, 53.552900]
 
+]
 
+
 
+const map = new mapboxgl.Map({
 
+  container: 'map',
 
+  style: 'mapbox://styles/tinama/ck7avipta06nj1jmomolvvrbr',
 
+  center: [-2.884808, 53.495743],
 
+  zoom: 9.5,
 
+});
 
+
 
+const Draw = new MapboxDraw({
 
+  displayControlsDefault: false,
 
+  controls: {
 
+    polygon: true,
 
+    trash: true
 
+  }
 
+  });
 
+
 
+console.log("turf", turf);
 
+
 
+const AddPopup = (map) => (area) => {
 
+  let polygon = turf.polygon(area);
 
+  let center = turf.centroid(polygon);
 
+  console.log(center, polygon)
 
+
 
+  return new mapboxgl.Popup({closeOnClick: false})
 
+    .setLngLat(center.geometry.coordinates)
 
+    .setHTML(`
 
+      <h3>form</h3>
 
+      <label for="data">some data</label>
 
+      <input type="text" class="form-control" id="data" placeholder="" required>
 
+      <button type="button">save</button>
 
+    `)
 
+    .addTo(map)
 
+}
 
+
 
+
 
+map.addControl(Draw, 'top-right');
 
+
 
+map.on('load', function() {
 
+  let drawnData = {};
 
+  map.on('draw.create', createArea);
 
+  map.on('draw.delete', deleteArea);
 
+  map.on('draw.update', updateArea);
 
+
 
+  function createArea(polygon) {
 
+    let area = polygon.features[0].geometry;
 
+    drawnData = {
 
+      ...drawnData,
 
+      [polygon.features[0].id]: area
 
+    };
 
+
 
+    console.log("create", area);
 
+    const popup = AddPopup(map)(area.coordinates);
 
+
 
+  }
 
+
 
+  function deleteArea(polygon) {
 
+    console.log('delete', polygon);
 
+  }
 
+
 
+  function updateArea(polygon) {
 
+    console.log('update', polygon)
 
+  }
 
+});

+ 69 - 112
index.html
Dosyayı Görüntüle 

@@ -3,12 +3,10 @@
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
     <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
 
     <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
 
     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />
 
     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />
 
     <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
 
     <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
 
-
 
     <title>Accent dialect map</title>
 
     <title>Accent dialect map</title>
 
   </head>
 
   </head>
 
   <body class="bg-light">
 
   <body class="bg-light">
 
@@ -18,51 +16,79 @@
 
     href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css"
 
     href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css"
 
     type="text/css"
 
     type="text/css"
 
     />
 
     />
 
-    <div class="container">
 
-      <div class="py-5 text-center">
 
-        <h2>Accent and dialect form</h2>
 
-        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum corporis minima, eius officiis magnam quae vero praesentium odio facilis minus illo ut atque accusamus esse deserunt. Fuga, autem molestiae!</p>
 
-      </div>
 
-    
-      <div>
 
-        <h4>Personal Information</h4>
 
-        <form>
 
-          <div class="row">
 
-            <div class="col-md-6 mb-3">
 
-              <label for="age">Age</label>
 
-              <input type="number" class="form-control" id="age" placeholder="" value="" min="10" max="110" required>
 
-              <div class="invalid-feedback">
 
-                Age is required
 
+    <link rel="stylesheet" href="styles.css"/>
 
+    <div class="container main-app">      
+      <div id="form-container" class="py-5">
 
+        <div id="introduction" class="content page page-0">
 
+          <div class="jumbotron">
 
+            <h2>Accent and dialect form</h2>
 
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum corporis minima, eius officiis magnam quae vero praesentium odio facilis minus illo ut atque accusamus esse deserunt. Fuga, autem molestiae!</p>
 
+            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos impedit natus dolorem ipsam rem cum mollitia, cumque sapiente omnis ea sed nobis ullam, asperiores dignissimos. Unde dolore iure quisquam aut.</p>
 
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat suscipit fugiat, iste, odio tempora dolor, voluptatum assumenda enim aspernatur rem ipsam animi corrupti sapiente labore repellat quam amet. Ipsa, aspernatur!</p>
 
+            <button type="button" onclick="changePage(1)" class="btn btn-primary">Start</button>
 
+          </div>
 
+        </div>
 
+        <div id="terms-and-legals">
 
+          <div class="content page page-1">
 
+            <form id="terms-and-conditions" class="needs-validation">
 
+              <h2>Terms & Conditions</h2>
 
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dolore magni aspernatur error totam exercitationem sequi illum. Ex voluptas in, eius provident laudantium quidem quod esse corrupti quas vitae aliquam!</p>
 
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem culpa soluta, voluptatibus quam magni sapiente corporis debitis ad illo voluptas odio! Adipisci facere ad molestiae ullam vero iure minus mollitia.</p>
 
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum commodi consectetur aperiam. Obcaecati quisquam possimus et facilis quas, doloremque minima rerum reprehenderit fugiat ipsam dolorum placeat velit! Exercitationem, eveniet obcaecati.</p>
 
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quidem quisquam suscipit! Excepturi deserunt quaerat, odio recusandae molestiae assumenda voluptatem possimus id alias quas voluptatibus non quis vitae incidunt veritatis!</p>
 
+              <div class="form-group form-check">
 
+                <input type="checkbox" class="form-check-input" id="agreement" required>
 
+                <label class="form-check-label" for="agreement">I agree with the termns and conditions</label>
 
+                <div class="invalid-feedback">
 
+                  You must agree before going to the next step
 
+                </div>
 
               </div>
 
               </div>
 
-            </div>
 
-            <div class="col-md-6">
 
-              <label for="gender">Gender</label>
 
-              <select class="form-control">
 
-                <option>Male</option>
 
-                <option>Female</option>
 
-                <option>idk lmao</option>
 
-              </select>
 
-            </div>
 
+              <button type="button" class="btn btn-primary" onclick="changePage(2, 'agreement')">next</button>
 
+            </form>
 
           </div>
 
           </div>
 
-          <div class="row">
 
-            <div class="col-md-12 mb-3">
 
-              <label for="postal-code">Postal code</label>
 
-              <input type="text" class="form-control" id="postal-code"/>
 
-            </div>
 
+        </div>
 
+        <div id="personal-information">
 
+          <div class="content page page-2">
 
+            <h2>Personal Information</h2>
 
+            <form>
 
+              <div class="row">
 
+                <div class="col-md-6 mb-3">
 
+                  <label for="age">Age</label>
 
+                  <input type="number" class="form-control" id="age" placeholder="" value="" min="10" max="110" required>
 
+                  <div class="invalid-feedback">
 
+                    Age is required
 
+                  </div>
 
+                </div>
 
+                <div class="col-md-6">
 
+                  <label for="gender">Gender</label>
 
+                  <select class="form-control">
 
+                    <option>Male</option>
 
+                    <option>Female</option>
 
+                    <option>idk lmao</option>
 
+                  </select>
 
+                </div>
 
+              </div>
 
+              <div class="row">
 
+                <div class="col-md-12 mb-3">
 
+                  <label for="postal-code">Postal code</label>
 
+                  <input type="text" class="form-control" id="postal-code"/>
 
+                </div>
 
+              </div>
 
+              <button type="button">Next</button>
 
+            </form>
 
           </div>
 
           </div>
 
-          <div class="row">
 
-            <div class="col-md-12">
 
-              <label>Map time</label>
 
-              <div id='map' style='width: 100%; height: 80vh;' class="form-control"></div>
 
-            </div>
 
+        </div>
 
+        <div id="map-drawing">
 
+          <div class="content page page-3">
 
+            <h2>Map</h2>
 
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, numquam necessitatibus, iusto at eum non, voluptatum accusantium fugiat aut sapiente recusandae tenetur amet! Quod itaque eaque illo nemo temporibus perferendis!</p>
 
+            <div id='map' style='width: 100%; height: 80vh;' class="form-control"></div>
 
+            <button type="button">Previous</button>
 
+            <button type="button">Next</button>
 
           </div>
 
           </div>
 
-          <hr class="mb-4">
 
-          <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
 
-        </form>
 
+        </div>
 
       </div>
 
       </div>
 
-    </div>
 
-  
-    <footer class="my-5 pt-5 text-muted text-center text-small">
 
+    <footer class="text-center text-small">
 
       <p class="mb-1">&copy; Legal stuff if needed</p>
 
       <p class="mb-1">&copy; Legal stuff if needed</p>
 
       <ul class="list-inline">
 
       <ul class="list-inline">
 
         <li class="list-inline-item"><a href="#">Privacy</a></li>
 
         <li class="list-inline-item"><a href="#">Privacy</a></li>
 
@@ -70,75 +96,6 @@
 
       </ul>
 
       </ul>
 
     </footer>
 
     </footer>
 
   </div>
 
   </div>
 
-    <script>
 
-        mapboxgl.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
 
-        const bounds = [
 
-          [-2.460270, 53.370427],
 
-          [-2.062598, 53.552900]
 
-        ]
 
-        
-        const map = new mapboxgl.Map({
 
-          container: 'map',
 
-          style: 'mapbox://styles/tinama/ck7avipta06nj1jmomolvvrbr',
 
-          center: [-2.884808, 53.495743],
 
-          zoom: 9.5,
 
-        });
 
-        
-        const Draw = new MapboxDraw({
 
-          displayControlsDefault: false,
 
-          controls: {
 
-            polygon: true,
 
-            trash: true
 
-          }
 
-          });
 
-        
-        console.log("turf", turf);
 
-        
-        const AddPopup = (map) => (area) => {
 
-          let polygon = turf.polygon(area);
 
-          let center = turf.centroid(polygon);
 
-          console.log(center, polygon)
 
-
 
-          return new mapboxgl.Popup({closeOnClick: false})
 
-            .setLngLat(center.geometry.coordinates)
 
-            .setHTML(`
 
-              <h3>form</h3>
 
-              <label for="data">some data</label>
 
-              <input type="text" class="form-control" id="data" placeholder="" required>
 
-              <button type="button">save</button>
 
-            `)
 
-            .addTo(map)
 
-        }
 
-
 
-
 
-        map.addControl(Draw, 'top-right');
 
-
 
-        map.on('load', function() {
 
-          let drawnData = {};
 
-          map.on('draw.create', createArea);
 
-          map.on('draw.delete', deleteArea);
 
-          map.on('draw.update', updateArea);
 
-
 
-          function createArea(polygon) {
 
-            let area = polygon.features[0].geometry;
 
-            drawnData = {
 
-              ...drawnData,
 
-              [polygon.features[0].id]: area
 
-            };
 
-
 
-            console.log("create", area);
 
-            const popup = AddPopup(map)(area.coordinates);
 
-
 
-          }
 
-
 
-          function deleteArea(polygon) {
 
-            console.log('delete', polygon);
 
-          }
 
-
 
-          function updateArea(polygon) {
 
-            console.log('update', polygon)
 
-          }
 
-        });
 
-    </script>
 
+  <script src="app.js"></script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 9 - 0
styles.css
Dosyayı Görüntüle 

@@ -0,0 +1,9 @@
 
+.main-app {
 
+  height: 100vh;
 
+  display: grid;
 
+  grid-template-rows: 90% 10%;
 
+}
 
+
 
+.page {
 
+  display: none;
 
+}