Merge pull request #10 from Bigismall/feat/add-another-photo-action

feat: Add another photo action
Bigismall · Jan 23, 2024 · 2490477 · 2490477
2 parents 91aed7c + 1a64df2
commit 2490477
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 45 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -1,8 +1,9 @@
 name: Deploy to GitHub Pages
 
 on:
-  pull_request:
-    types: [ opened, synchronize, reopened ]
+  push:
+    branches:
+      - dev
 
 jobs:
   verify-deploy-comment:

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -31,4 +31,5 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           OPENAI_API_KEY: ${{ secrets.GITHUBPR_MAP_ON_PHOTO }}
+          LANGUAGE: English
 
diff --git a/index.html b/index.html
@@ -21,23 +21,24 @@
     </aside>
     <aside class="download download--hidden">
       <a class="download__input" download href="#" id="js-download">Download image</a>
-      <button class="download__input" id="js-reset">Try another image</button>
+      <button class="download__input js-reset">Try another image</button>
     </aside>
     <aside class="map map--hidden">
-      <div class="map__canvas" id="js-map"></div>
       <div class="map__title map__title--hidden">
         Unable to read
         <abbr title="Exchangeable Image File Format">EXIF</abbr> data from the
         photo. Drag the marker to set
-        <abbr title="Global Positioning System">GPS</abbr> position manually
+        <abbr title="Global Positioning System">GPS</abbr> position manually, or <a href="" class="js-reset">load another photo</a>.
       </div>
+      <div class="map__canvas map__canvas--large" id="js-map"></div>
       <div class="map__options map__options--hidden" id="js-map-options">
         <fieldset>
           <legend>Map position</legend>
-          <button data-position="topleft">&#11017;</button>
-          <button data-position="topright">&#11016;</button>
-          <button data-position="bottomleft">&#11019;</button>
-          <button data-position="bottomright">&#11018;</button>
+          <button data-position="map--topleft">&#11017;</button>
+          <button data-position="map--topright">&#11016;</button>
+          <button data-position="map--center">&#9737;</button>
+          <button data-position="map--bottomleft">&#11019;</button>
+          <button data-position="map--bottomright">&#11018;</button>
         </fieldset>
         <fieldset>
           <legend>Map size</legend>
@@ -47,7 +48,8 @@
         </fieldset>
         <fieldset>
           <legend>Actions</legend>
-          <button id="js-map-options-submit">Add map</button>
+          <button class="js-reset">Reset</button>
+          <button id="js-map-options-submit" class="action">Add map</button>
         </fieldset>
       </div>
     </aside>

diff --git a/src/scripts/DownloadManager.ts b/src/scripts/DownloadManager.ts
@@ -4,21 +4,24 @@ import Publisher from './Publisher.class';
 
 export default class DownloadManager extends ObserverPublisher(Publisher) {
   private readonly downloadSelector: HTMLLinkElement;
-  private readonly resetSelector: HTMLButtonElement;
+  private readonly resetSelector: NodeListOf<HTMLElement>;
   private readonly container: HTMLElement | null;
 
   constructor (
     $downloadElement: HTMLLinkElement,
-    $resetElement: HTMLButtonElement
+    $resetElement: NodeListOf<HTMLElement>
   ) {
     super();
     this.downloadSelector = $downloadElement;
     this.resetSelector = $resetElement;
     this.container = $downloadElement.parentElement;
 
-    this.resetSelector.addEventListener('click', () => {
-      this.hide();
-      this.publish({ state: MessageState.Reset });
+    Array.from(this.resetSelector).map((element) => {
+      element.addEventListener('click', () => {
+        this.hide();
+        this.publish({ state: MessageState.Reset });
+      });
+      return element;
     });
   }
 

diff --git a/src/scripts/MapManager.ts b/src/scripts/MapManager.ts
@@ -18,11 +18,11 @@ const DEFAULT_CENTER: [number, number] = [54.403397, 18.570665];
 // const DEFAULT_ZOOM: number = 14
 
 export enum MapPosition {
-  TOP_LEFT = 'topleft',
-  TOP_RIGHT = 'topright',
-  BOTTOM_LEFT = 'bottomleft',
-  BOTTOM_RIGHT = 'bottomright',
-  CENTER = 'center',
+  TOP_LEFT = 'map--topleft',
+  TOP_RIGHT = 'map--topright',
+  BOTTOM_LEFT = 'map--bottomleft',
+  BOTTOM_RIGHT = 'map--bottomright',
+  CENTER = 'map--center',
 }
 
 export default class MapManager extends ObserverPublisher(Publisher) {
@@ -117,17 +117,23 @@ export default class MapManager extends ObserverPublisher(Publisher) {
       const position: MapPosition = publication.data;
       this.position = position;
       this.container?.classList.remove(
-        'map--topleft',
-        'map--topright',
-        'map--bottomleft',
-        'map--bottomright'
+        MapPosition.TOP_LEFT,
+        MapPosition.TOP_RIGHT,
+        MapPosition.BOTTOM_LEFT,
+        MapPosition.BOTTOM_RIGHT,
+        MapPosition.CENTER
       );
-      this.container?.classList.add(`map--${position}`);
+      this.container?.classList.add(position);
     }
 
     if (publication.state === MessageState.MapSetupReady) {
+      this.map.setView(this.marker.getLatLng());
       this.drawCanvasMap();
     }
+
+    if (publication.state === MessageState.Reset) {
+      this.hide();
+    }
   }
 
   drawCanvasMap () {

diff --git a/src/scripts/index.ts b/src/scripts/index.ts
@@ -8,7 +8,7 @@ import ImageManager from './ImageManager';
 import MapManager from './MapManager';
 import PhotoBrowser from './PhotoBrowser';
 import MapOptionsManager from './MapOptionsManager';
-import { $ } from './dom.ts';
+import { $, $$ } from './dom.ts';
 
 let browser: PhotoBrowser;
 let imageManager: ImageManager;
@@ -19,12 +19,12 @@ let mapOptionsManager: MapOptionsManager;
 let downloadManager: DownloadManager;
 
 window.addEventListener('load', function () {
-  const $elements = new Map<string, HTMLElement | null>([
+  const $elements = new Map<string, Element | NodeListOf<HTMLElement> | null>([
     ['browser', $('#js-browser-input')],
     ['photo', $('#js-map')],
     ['canvas', $('#js-main-canvas')],
     ['download', $('#js-download')],
-    ['reset', $('#js-reset')],
+    ['reset', $$('.js-reset')], // At least 2 elements have this class
     ['mapOptions', $('#js-map-options')]
   ]);
 
@@ -38,7 +38,7 @@ window.addEventListener('load', function () {
   browser = new PhotoBrowser($elements.get('browser') as HTMLInputElement);
   downloadManager = new DownloadManager(
     $elements.get('download') as HTMLLinkElement,
-    $elements.get('reset') as HTMLButtonElement
+    $elements.get('reset') as NodeListOf<HTMLElement>
   );
 
   canvasManager = new CanvasManager($elements.get('canvas') as HTMLCanvasElement);
@@ -58,4 +58,5 @@ window.addEventListener('load', function () {
   canvasManager.subscribe(downloadManager); // we want to Download Manager to receive updates from the canvas manager
   downloadManager.subscribe(browser); // we want to Browser to receive updates from the download manager
   downloadManager.subscribe(canvasManager); // we want to Canvas Manager to receive updates from the download manager
+  downloadManager.subscribe(mapManager);// we want to Map Manager to receive updates from the download manager
 });
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -1,11 +1,12 @@
 $blue: #2c3e50;
+$semi-blue: #445465;
 $light-blue: #5c6a79;
 
 $white: #fff;
 $black: #000;
 $text: #212529;
 
-$yellow: #ffcc00;
+$yellow: #e6bf00;
 $transparent: transparent;
 
 $font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -15,12 +15,12 @@ body {
 
   background-color: $blue;
   background-image: linear-gradient(
-    to bottom,
-    $blue,
-    #38495a,
-    #445464,
-    #505f6e,
-    $light-blue
+                  to bottom,
+                  $blue,
+                  #38495a,
+                  #445464,
+                  #505f6e,
+                  $light-blue
   );
 
   -webkit-text-size-adjust: 100%;
@@ -124,15 +124,22 @@ body {
 
   @include e(title) {
     margin: 0;
-    padding: 0.5rem;
-    font-size: 0.75rem;
-    font-weight: bold;
+    padding: 0.4rem 0.5rem;
+    font-size: 0.7rem;
+    line-height: 1;
+    font-weight: bolder;
     text-align: center;
-    color: $yellow;
+    background-color: $yellow;
+    color: $black;
 
     @include m(hidden) {
       display: none;
     }
+
+    & a {
+      color: $black;
+      text-decoration: underline;
+    }
   }
 
   @include e(options) {
@@ -173,8 +180,8 @@ body {
       background-color: #92a0b3;
       box-shadow: rgba(1, 1, 0, 1) 0 2px 8px;
       background-image: linear-gradient(
-        rgba(70, 77, 85, 0.7),
-        rgba(37, 41, 46, 0.8)
+                      rgba(70, 77, 85, 0.7),
+                      rgba(37, 41, 46, 0.8)
       );
     }
   }
@@ -221,14 +228,23 @@ body {
 
 fieldset {
   border: 1px solid $blue;
-  display: block;
-  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: stretch;
+  gap: 0.25rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+
 }
 
 legend {
   font-size: 0.75rem;
   color: $white;
-  padding: 0.25rem 0.5rem;
+  padding: 0.15rem 0.5rem;
+  background-color: $blue;
+  border-radius: 0.5rem;
 }
 
 fieldset button {
@@ -242,6 +258,10 @@ fieldset button {
   &:active {
     @extend %button-hover;
   }
+
+  &.action {
+    background-image: linear-gradient(#65a200, #4f8000);
+  }
 }
 
 footer {
@@ -269,6 +289,7 @@ footer {
   a {
     color: $white;
   }
+
   ul {
     display: inline-block;
     list-style: none;
@@ -278,6 +299,7 @@ footer {
     li {
       display: inline-block;
       margin: 0 0.25rem 0 0;
+
       &:after {
         margin-left: 0.25rem;
         content: "|"