fix: URLs for localhost/Textastic; map scrolling with Vue watch.

Needed to implement a lock of sorts, otherwise scrolling would cause a re-centring which would stop the scrolling.
bilalakil · Apr 11, 2018 · 18627bf · 18627bf
1 parent 9d22f3d
commit 18627bf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/black-and-white-map/app.js b/black-and-white-map/app.js
@@ -4,7 +4,8 @@ const vapp = new Vue({
   data () {
     return {
       map: null,
-
+      shouldRecenter: true,
+
       lat: -33.865,
       lng: 151.209444,
       zoom: 13,
@@ -45,12 +46,17 @@ const vapp = new Vue({
       disableDefaultUI: true,
       styles: mapStyle
     })
-
+    
     this.map.addListener('center_changed', event => {
       const center = this.map.getCenter()
 
+      this.shouldRecenter = false
       this.lat = center.lat()
       this.lng = center.lng()
+
+      this.$nextTick(() => {
+        this.shouldRecenter = true
+      })
     })
 
     document.getElementById('app').focus()
@@ -74,7 +80,7 @@ const vapp = new Vue({
     },
 
     recenter () {
-      if(!this.lat || !this.lng) { return }
+      if(!this.shouldRecenter || !this.lat || !this.lng) { return }
 
       this.map.setCenter({ lat: this.lat, lng: this.lng })
     }

diff --git a/index.html b/index.html
@@ -15,28 +15,28 @@
 
     <h1>bin</h1>
     <ul>
-      <li><a href="string-art">String Art</a></li>
-      <li><a href="morse-practice">Morse Practice</a></li>
+      <li><a href="string-art/">String Art</a></li>
+      <li><a href="morse-practice/">Morse Practice</a></li>
       <li>
-        <a href="black-and-white-map">Vue: Black and White Map</a>
+        <a href="black-and-white-map/">Vue: Black and White Map</a>
         (<a href="https://github.com/bilalakil/bin/tree/master/black-and-white-map" target="_blank">see on GitHub</a>)
         <br/>
 
         Press the enter key while on the page to open the controls.
       </li>
       <li>
-        <a href="stackoverflow-qa-timeframe">D3: Stackoverflow Q&A Timeframe</a>
+        <a href="stackoverflow-qa-timeframe/">D3: Stackoverflow Q&A Timeframe</a>
         (<a href="https://github.com/bilalakil/bin/tree/master/stackoverflow-qa-timeframe" target="_blank">see on GitHub</a>)
         <br/>
 
         This contrived D3 example pulls the last 12 hours of question data from Stackoverflow, and their answers, and gradually produces a chart showing the times that those questions were asked and answered (i.e. to give an indication of how many asked questions are being answered within 12 hours, and how long they took to be answered).<br/>
       </li>
       <li>
-        <a href="simplepagination">simplePagination</a>
+        <a href="simplepagination/">simplePagination</a>
         <ul>
-          <li><a href="simplepagination/page-fragment">with simple page fragment handling</a></li>
-          <li><a href="simplepagination/dynamic-content">with dynamic content</a></li>
-          <li><a href="simplepagination/multiple">used more than once on the same page</a></li>
+          <li><a href="simplepagination/page-fragment/">with simple page fragment handling</a></li>
+          <li><a href="simplepagination/dynamic-content/">with dynamic content</a></li>
+          <li><a href="simplepagination/multiple/">used more than once on the same page</a></li>
         </ul>
       </li>
     </ul>