Improvements to add flow

whiletrue-industries · Jan 24, 2024 · 014fede · 014fede
1 parent 1814ecf
commit 014fede
Show file tree

Hide file tree

Showing 16 changed files with 298 additions and 62 deletions.
diff --git a/projects/chronomaps/src/app/app.module.ts b/projects/chronomaps/src/app/app.module.ts
@@ -27,6 +27,7 @@ import { DirectoryItemComponent } from './directory-page/directory-item/director
 import { ChronomapComponent } from './chronomap/chronomap.component';
 import { RtlDetectDirective } from './rtl-detect.directive';
 import { ContentNoteComponent } from './content/content-note/content-note.component';
+import { TimelineSelectorComponent } from './chronomap-page/timeline-selector/timeline-selector.component';
 
 @NgModule({
   declarations: [
@@ -45,6 +46,7 @@ import { ContentNoteComponent } from './content/content-note/content-note.compon
     AddNewBarComponent,
     LayersBarComponent,
     MapSelectorComponent,
+    TimelineSelectorComponent,
     LayersBarItemComponent,
     ChronomapComponent,
     TimeLineComponent,

diff --git a/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.html b/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.html
@@ -74,17 +74,12 @@ <h2>Let’s indeed start by choosing the format for this perspective:</h2>
             <h1 class='indented'>Where?</h1>
             <h2>Position the camera on your location of choice</h2>
         </div>
-        <div class='center'>
-            <button (click)='openMap()' [style.color]='chronomap.primaryColor()' [style.border-color]='chronomap.secondaryColor() + "40"'>
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.37124 4.31479C7.86926 2.83176 9.89206 1.99989 12 2C14.1079 1.99989 16.1307 2.83176 17.6288 4.31479C19.1268 5.79782 19.9789 7.81216 20 9.92C20 15.4 13 21.5 12.65 21.76C12.4689 21.9149 12.2384 22.0001 12 22.0001C11.7616 22.0001 11.5311 21.9149 11.35 21.76L11.3484 21.7586C11.0253 21.4787 4 15.3904 4 9.92C4.02108 7.81216 4.87323 5.79782 6.37124 4.31479ZM6 9.92C6 13.65 10.33 18.06 12 19.65C13.67 18.06 18 13.62 18 9.92C18 8.3287 17.3679 6.80258 16.2426 5.67736C15.1174 4.55214 13.5913 3.92 12 3.92C10.4087 3.92 8.88258 4.55214 7.75736 5.67736C6.63214 6.80258 6 8.3287 6 9.92ZM10.0555 6.58986C10.6311 6.20527 11.3078 6 12 6C12.9283 6 13.8185 6.36875 14.4749 7.02513C15.1313 7.6815 15.5 8.57174 15.5 9.5C15.5 10.1922 15.2947 10.8689 14.9101 11.4445C14.5256 12.0201 13.9789 12.4687 13.3394 12.7336C12.6999 12.9985 11.9961 13.0678 11.3172 12.9327C10.6383 12.7977 10.0146 12.4644 9.52513 11.9749C9.03564 11.4854 8.7023 10.8617 8.56725 10.1828C8.4322 9.50388 8.50152 8.80015 8.76642 8.16061C9.03133 7.52107 9.47993 6.97444 10.0555 6.58986ZM11.1666 10.7472C11.4133 10.912 11.7033 11 12 11C12.3978 11 12.7794 10.842 13.0607 10.5607C13.342 10.2794 13.5 9.89782 13.5 9.5C13.5 9.20333 13.412 8.91332 13.2472 8.66665C13.0824 8.41997 12.8481 8.22771 12.574 8.11418C12.2999 8.00065 11.9983 7.97094 11.7074 8.02882C11.4164 8.0867 11.1491 8.22956 10.9393 8.43934C10.7296 8.64912 10.5867 8.91639 10.5288 9.20736C10.4709 9.49834 10.5007 9.79994 10.6142 10.074C10.7277 10.3481 10.92 10.5824 11.1666 10.7472Z"
-                          [attr.fill]='chronomap.primaryColor()'/>
-                </svg>            
-                Choose from the map</button>
-        </div>
         <div class='bottom'>
-            <button *ngIf='selectedGeo' (click)='slide = slide + 1' [style.color]='chronomap.primaryColor()' [style.border-color]='chronomap.secondaryColor() + "40"'>
-                next
+            <button class='next-button' *ngIf='selectedGeo' (click)='slide = slide + 1;' [style.color]='chronomap.primaryColor()' [style.border-color]='chronomap.secondaryColor() + "40"'>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                    <path d="M11 23L22 11.8533L11 1" [attr.stroke]="chronomap.primaryColor()" stroke-width="2"/>
+                    <line x1="22" y1="12" x2="2" y2="12" [attr.stroke]="chronomap.primaryColor()" stroke-width="2"/>
+                </svg>
             </button>
         </div>
     </div>
@@ -93,18 +88,12 @@ <h2>Position the camera on your location of choice</h2>
             <h1 class='indented'>When?</h1>
             <h2>The exact year is less important than the order of events</h2>
         </div>
-        <div class='date-selector'>
-            <input class='date-selector' type='date' placeholder='pick the date' 
-                [style.color]='chronomap.primaryColor()' [style.border-color]='chronomap.secondaryColor() + "40"'
-                [(ngModel)]='selectedDate'/>
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M18 4H17V3C17 2.73478 16.8946 2.48043 16.7071 2.29289C16.5196 2.10536 16.2652 2 16 2C15.7348 2 15.4804 2.10536 15.2929 2.29289C15.1054 2.48043 15 2.73478 15 3V4H9V3C9 2.73478 8.89464 2.48043 8.70711 2.29289C8.51957 2.10536 8.26522 2 8 2C7.73478 2 7.48043 2.10536 7.29289 2.29289C7.10536 2.48043 7 2.73478 7 3V4H6C5.20435 4 4.44129 4.31607 3.87868 4.87868C3.31607 5.44129 3 6.20435 3 7V19C3 19.7956 3.31607 20.5587 3.87868 21.1213C4.44129 21.6839 5.20435 22 6 22H18C18.7956 22 19.5587 21.6839 20.1213 21.1213C20.6839 20.5587 21 19.7956 21 19V7C21 6.20435 20.6839 5.44129 20.1213 4.87868C19.5587 4.31607 18.7956 4 18 4ZM6 6H7V7C7 7.26522 7.10536 7.51957 7.29289 7.70711C7.48043 7.89464 7.73478 8 8 8C8.26522 8 8.51957 7.89464 8.70711 7.70711C8.89464 7.51957 9 7.26522 9 7V6H15V7C15 7.26522 15.1054 7.51957 15.2929 7.70711C15.4804 7.89464 15.7348 8 16 8C16.2652 8 16.5196 7.89464 16.7071 7.70711C16.8946 7.51957 17 7.26522 17 7V6H18C18.2652 6 18.5196 6.10536 18.7071 6.29289C18.8946 6.48043 19 6.73478 19 7V11H5V7C5 6.73478 5.10536 6.48043 5.29289 6.29289C5.48043 6.10536 5.73478 6 6 6ZM18 20H6C5.73478 20 5.48043 19.8946 5.29289 19.7071C5.10536 19.5196 5 19.2652 5 19V13H19V19C19 19.2652 18.8946 19.5196 18.7071 19.7071C18.5196 19.8946 18.2652 20 18 20Z"
-                     [attr.fill]="chronomap.primaryColor()"/>
-            </svg>                
-        </div>
-        <div class='bottom' *ngIf='!!selectedDate'>
-            <button (click)='slide = slide + 1' [style.color]='chronomap.primaryColor()' [style.border-color]='chronomap.secondaryColor() + "40"'>
-                next
+        <div class='bottom'>
+            <button class='next-button' *ngIf='selectedDate' (click)='slide = slide + 1;' [style.color]='chronomap.primaryColor()' [style.border-color]='chronomap.secondaryColor() + "40"'>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                    <path d="M11 23L22 11.8533L11 1" [attr.stroke]="chronomap.primaryColor()" stroke-width="2"/>
+                    <line x1="22" y1="12" x2="2" y2="12" [attr.stroke]="chronomap.primaryColor()" stroke-width="2"/>
+                </svg>
             </button>
         </div>
     </div>

diff --git a/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.less b/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.less
@@ -127,6 +127,16 @@
                 align-items: center;
                 width: 100%;
                 margin-top: auto;
+                .next-button {
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 24px;
+                    border: 1px solid black;
+                    display: flex;
+                    flex-flow: column;
+                    align-items: center;
+                    justify-content: center;
+                }
             }
             button {
                 display: flex;

diff --git a/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.ts b/projects/chronomaps/src/app/chronomap-page/add-new-bar/add-new-bar.component.ts
@@ -4,7 +4,9 @@ import { marked } from 'marked';
 import { first, interval, Subscription, switchMap } from 'rxjs';
 import { MapSelectorService } from '../../map-selector.service';
 import { ChronomapDatabase, DataService } from '../../data.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 
+@UntilDestroy()
 @Component({
   selector: 'app-add-new-bar',
   templateUrl: './add-new-bar.component.html',
@@ -21,12 +23,15 @@ export class AddNewBarComponent implements OnInit {
 
   marked = marked;
   contributeMessage: any = '';
-  slide = 0;
+  slide_ = 0;
   contentType = '';
   selectedDate: string;
   selectedGeo: string;
+  mapSubscription: Subscription | null = null;
+
   iframeURL: string | null = null;
   iframeSafeURL: SafeResourceUrl | null;
+
   nonce: string;
   subscription: Subscription | null = null;
 
@@ -73,14 +78,42 @@ export class AddNewBarComponent implements OnInit {
 
   openMap() {
     this.mapSelector.showMapSelector = true;
-    this.mapSelector.results.pipe(first()).subscribe((value) => {
+    this.mapSubscription?.unsubscribe();
+    this.mapSubscription = this.mapSelector.mapResults.pipe(
+      untilDestroyed(this)
+    ).subscribe((value) => {
       console.log('GOT GEO', value);
       if (value) {
         this.selectedGeo = value;
       }
     });
   }
 
+  closeMap() {
+    this.mapSelector.showMapSelector = false;
+    this.mapSubscription?.unsubscribe();
+    this.mapSubscription = null;
+  }
+
+  openTimeline() {
+    this.mapSelector.showTimelineSelector = true;
+    this.mapSubscription?.unsubscribe();
+    this.mapSubscription = this.mapSelector.timelineResults.pipe(
+      untilDestroyed(this)
+    ).subscribe((value) => {
+      console.log('GOT DATE', value);
+      if (value) {
+        this.selectedDate = value;
+      }
+    });
+  }
+
+  closeTimeline() {
+    this.mapSelector.showTimelineSelector = false;
+    this.mapSubscription?.unsubscribe();
+    this.mapSubscription = null;
+  }
+
   closeMe() {
     this.subscription?.unsubscribe();
     this.subscription = null;
@@ -100,6 +133,24 @@ export class AddNewBarComponent implements OnInit {
       });
     });
   }
+
+  set slide(value: number) {
+    this.slide_ = value;
+    if (this.slide_ === 1) {
+      this.openMap();
+    }
+    if (this.slide_ === 2) {
+      this.closeMap();
+      this.openTimeline();
+    }
+    if (this.slide_ === 3) {
+      this.closeTimeline();
+    }
+  }
+
+  get slide() {
+    return this.slide_;
+  }
 }
 
 
diff --git a/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.html b/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.html
@@ -1,7 +1,4 @@
 <div class='map'>
-    <div #mapEl></div>
+    <div class='container' #mapEl></div>
+    <div class='crosshair'></div>
 </div>
-<div class='controls'>
-    <button (click)='cancel()'>cancel</button>
-    <button (click)='submit()' [style.color]='chronomap.primaryColor()' [style.border-color]='chronomap.secondaryColor() + "40"'>select</button>
-</div>
diff --git a/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.less b/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.less
@@ -8,11 +8,23 @@
     .map {
         width: 100%;
         height: 100%;
+        position: relative;
 
-        > div {
+        .container {
             width: 100%;
             height: 100%;    
         }
+        .crosshair {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            .background-image;
+            width: 80px;
+            height: 80px;
+            background-size: 80px;
+            background-image: url('../../../assets/images/crosshair.svg');
+        }
     }
 
     .controls {

diff --git a/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.ts b/projects/chronomaps/src/app/chronomap-page/map-selector/map-selector.component.ts
@@ -15,6 +15,7 @@ import { ChronomapDatabase } from '../../data.service';
 export class MapSelectorComponent implements AfterViewInit {
 
   @Input() chronomap: ChronomapDatabase;
+  @Input() flyToOptions: mapboxgl.FlyToOptions;
 
   @ViewChild('mapEl', {static: true}) mapEl: ElementRef;
 
@@ -28,31 +29,27 @@ export class MapSelectorComponent implements AfterViewInit {
         container: this.mapEl.nativeElement,
         style: this.chronomap.backgroundMapStyle(),
         minZoom: 3,
+        center: this.flyToOptions.center,
+        zoom: this.flyToOptions.zoom,
+        bearing: this.flyToOptions.bearing,
+        pitch: this.flyToOptions.pitch,
       });
       var geocoder = new MapboxGeocoder({
         accessToken: mapboxgl.accessToken,
         marker: false,
       });
       this.theMap.addControl(geocoder);
-      this.theMap.addControl(new mapboxgl.NavigationControl({visualizePitch: true}));
+      this.theMap.addControl(new mapboxgl.NavigationControl({visualizePitch: true}), 'top-left');
       this.theMap.on('load', () => {
-        if (this.chronomap.mapView()) {
-          const options = MapService.parseMapView(this.chronomap.mapView());
-          this.theMap.jumpTo(options);
-        }
+        // const options = MapService.parseMapView(this.chronomap.mapView());
+        this.theMap.jumpTo(this.flyToOptions);
+      });
+      this.theMap.on('moveend', () => {
+        const center = this.theMap.getCenter();
+        const params = [this.theMap.getZoom(), center.lat, center.lng, this.theMap.getBearing(), this.theMap.getPitch()]
+        const geo = 'https://labs.mapbox.com/location-helper/#' + params.map(p => p.toString()).join('/');
+        this.mapSelector.submitMapResult(geo);
       });
     });
   }
-
-  submit() {
-    const center = this.theMap.getCenter();
-    const params = [this.theMap.getZoom(), center.lat, center.lng, this.theMap.getPitch(), this.theMap.getBearing()]
-    const geo = '#' + params.map(p => p.toString()).join('/');
-    this.mapSelector.submitResult(geo);
-  }
-
-  cancel() {
-    this.mapSelector.submitResult(null);
-  }
-
 }
diff --git a/...ects/chronomaps/src/app/chronomap-page/timeline-selector/timeline-selector.component.html b/...ects/chronomaps/src/app/chronomap-page/timeline-selector/timeline-selector.component.html
@@ -0,0 +1,12 @@
+<div class='map'>
+    <div class='container' #mapEl></div>
+</div>
+<div class='date-display'>
+    <div class='date' [style.background-color]='chronomap.primaryColor()'>{{mapSelector.selectedDate}}</div>
+    <svg xmlns="http://www.w3.org/2000/svg" width="7" height="151" viewBox="0 0 7 151" fill="none">
+        <path d="M3.5 150.667C4.97276 150.667 6.16667 149.473 6.16667 148C6.16667 146.527 4.97276 145.333 3.5 145.333C2.02724 145.333 0.833333 146.527 0.833333 148C0.833333 149.473 2.02724 150.667 3.5 150.667ZM4 148L4 147L3 147L3 148L4 148ZM4 145L4 143L3 143L3 145L4 145ZM4 141L4 139L3 139L3 141L4 141ZM4 137L4 135L3 135L3 137L4 137ZM4 133L4 131L3 131L3 133L4 133ZM4 129L4 127L3 127L3 129L4 129ZM4 125L4 123L3 123L3 125L4 125ZM4 121L4 119L3 119L3 121L4 121ZM4 117L4 115L3 115L3 117L4 117ZM4 113L4 111L3 111L3 113L4 113ZM4 109L4 107L3 107L3 109L4 109ZM4 105L4 103L3 103L3 105L4 105ZM4 101L4 99L3 99L3 101L4 101ZM4 97L4 95L3 95L3 97L4 97ZM4 93L4 91L3 91L3 93L4 93ZM4 89L4 87L3 87L3 89L4 89ZM4 85L4 83L3 83L3 85L4 85ZM4 81L4 79L3 79L3 81L4 81ZM4 77L4 75L3 75L3 77L4 77ZM4 73L4 71L3 71L3 73L4 73ZM4 69L4 67L3 67L3 69L4 69ZM4 65L4 63L3 63L3 65L4 65ZM4 61L4 59L3 59L3 61L4 61ZM4 57L4 55L3 55L3 57L4 57ZM4 53L4 51L3 51L3 53L4 53ZM4 49L4 47L3 47L3 49L4 49ZM4 45L4 43L3 43L3 45L4 45ZM4 41L4 39L3 39L3 41L4 41ZM4 37L4 35L3 35L3 37L4 37ZM4.00001 33L4.00001 31L3.00001 31L3.00001 33L4.00001 33ZM4.00001 29L4.00001 27L3.00001 27L3.00001 29L4.00001 29ZM4.00001 25L4.00001 23L3.00001 23L3.00001 25L4.00001 25ZM4.00001 21L4.00001 19L3.00001 19L3.00001 21L4.00001 21ZM4.00001 17L4.00001 15L3.00001 15L3.00001 17L4.00001 17ZM4.00001 13L4.00001 11L3.00001 11L3.00001 13L4.00001 13ZM4.00001 9L4.00001 7L3.00001 7L3.00001 9L4.00001 9ZM4.00001 5L4.00001 3L3.00001 3L3.00001 5L4.00001 5ZM4.00001 1L4.00001 2.18557e-08L3.00001 -2.18557e-08L3.00001 1L4.00001 1Z"
+        [attr.fill]="chronomap.primaryColor()"/>
+    </svg>        
+</div>
+<app-time-line 
+    [minDate]='minDate' [maxDate]='maxDate' [chronomap]='chronomap' [date]='date' [includeTime]='includeTime'></app-time-line>
diff --git a/...ects/chronomaps/src/app/chronomap-page/timeline-selector/timeline-selector.component.less b/...ects/chronomaps/src/app/chronomap-page/timeline-selector/timeline-selector.component.less
@@ -0,0 +1,47 @@
+@import '../../../common.less';
+
+:host {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    flex-flow: column;
+    align-items: center;
+    .map {
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        .container {
+            width: 100%;
+            height: 100%;    
+        }
+    }
+
+    app-time-line {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+    }
+
+    .date-display {
+        position: absolute;
+        bottom: 12px;
+        z-index: 1;
+        pointer-events: none;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+
+        .date {
+            padding: 4px 8px;
+            border-radius: 4px;
+            color: white;
+            .font-manrope;
+            font-size: 18px;
+            font-weight: 600;
+            line-height: 23px;
+            letter-spacing: 0.18px;
+        }
+    }
+}