💄 Improve the way notes are shown in the map view

ENT8R · May 23, 2021 · 25dd82f · 25dd82f
1 parent 2dcaf1f
commit 25dd82f
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 121 deletions.
diff --git a/app/css/dark.scss b/app/css/dark.scss
@@ -14,6 +14,9 @@ body[data-theme="dark"] {
   header.navbar {
     background-color: $main-color;
     color: $text-color;
+  }
+
+  header.navbar {
     box-shadow: 0 10px 10px -10px #090909;
   }
 

diff --git a/app/css/main.scss b/app/css/main.scss
@@ -27,10 +27,11 @@ header.navbar {
   z-index: 2;
 }
 
-#content {
+main {
   position: absolute;
   height: calc(100% - 44px);
   bottom: 0;
+  width: 100%;
 }
 
 .modal-container {
@@ -62,7 +63,7 @@ header.navbar {
   }
 }
 
-/*---------- Other ------------*/
+/*---------- Other utility classes ------------*/
 body.deprecated-browser #deprecation-warning {
   display: block !important;
 }

diff --git a/app/index.html b/app/index.html
@@ -31,14 +31,15 @@
     {{> mapillary}}
   </div>
 
-  <div id="content" class="columns col-gapless col-12">
-    <div id="map" class="d-hide col-12"></div>
+  <main>
+    <div id="map" class="d-hide"></div>
     <div id="list" class="d-hide columns m-2"></div>
-  </div>
+  </main>
 
   <div id="preloader" class="columns overlay d-hide">
     <div class="col-3 col-md-6 col-sm-8 m-auto">
       <progress class="progress my-2" max="100"></progress>
+
       <a id="cancel" class="btn btn-primary btn-lg col-12 my-2">
         <svg class="icon"><use xlink:href="#icon-close"></use></svg>
         <span data-i18n="action.cancel">Cancel</span>

diff --git a/app/js/comment.js b/app/js/comment.js
@@ -0,0 +1,40 @@
+import * as Badges from './badges.js';
+import Linkify from './linkify.js';
+import * as Localizer from './localizer.js';
+import * as Util from './util.js';
+
+export default class Comment {
+  /**
+    * Parses a comment of a note and extract the needed information
+    *
+    * @constructor
+    * @param {Object} comment
+    */
+  constructor(comment) {
+    this.anonymous = comment.user ? false : true;
+    this.user = this.anonymous ? Localizer.message('note.anonymous') : comment.user;
+    this.uid = this.anonymous ? null : comment.uid;
+
+    this.date = new Date(comment.date.replace(/-/g, '/'));
+    this.color = Util.parseDate(this.date);
+    this.action = comment.action;
+
+    const linkified = Linkify(comment.text);
+    this.html = linkified.html;
+    this.images = linkified.images;
+  }
+
+  /**
+    * Create all necessary badges dynamically
+    *
+    * @function
+    * @returns {Object}
+    */
+  get badges() {
+    return {
+      age: Badges.age(this.color, this.date),
+      user: Badges.user(this.uid, this.anonymous),
+      status: Badges.status(this.action)
+    };
+  }
+}
diff --git a/app/js/leaflet.js b/app/js/leaflet.js
@@ -40,13 +40,6 @@ export default class Leaflet {
 
       instances[id] = this.map;
 
-      // Update a popup after all images in it were loaded
-      this.map.on('popupopen', event => {
-        event.popup._container.querySelectorAll('img').forEach(element =>
-          element.onload = () => event.popup.update()
-        );
-      });
-
       L.Control.geocoder({
         placeholder: Localizer.message('action.search'),
         errorMessage: Localizer.message('description.nothingFound')

diff --git a/app/js/main.js b/app/js/main.js
@@ -191,33 +191,19 @@ function listener() {
     document.body.dataset.authenticated = false;
   });
 
-  document.getElementById('note-comment').addEventListener('input', () => {
-    const text = document.getElementById('note-comment').value.trim();
-    if (text === '') {
-      document.getElementById('note-comment-actions').classList.add('d-hide');
-    } else {
-      document.getElementById('note-comment-actions').classList.remove('d-hide');
+  document.addEventListener('input', event => {
+    // Listen for changes of the note input and update the buttons accordingly
+    if (event.target.classList.contains('note-comment')) {
+      const text = event.target.value.trim();
+      const actions = event.target.parentElement.querySelector('.note-comment-actions');
+      if (text === '') {
+        actions.classList.add('d-hide');
+      } else {
+        actions.classList.remove('d-hide');
+      }
     }
   });
 
-  document.getElementsByClassName('comment-action').forEach(element => {
-    element.addEventListener('click', () => {
-      element.classList.add('loading');
-
-      const id = Number.parseInt(document.getElementById('comments').dataset.noteId);
-      const text = document.getElementById('note-comment').value.trim();
-
-      api.comment(id, text, element.dataset.action).then(note => {
-        ui.update(id, new Note(JSON.parse(note))).then(details);
-        Comments.load(ui.get(id));
-      }).catch(error => {
-        console.log(error); // eslint-disable-line no-console
-      }).finally(() => {
-        element.classList.remove('loading');
-      });
-    });
-  });
-
   document.getElementsByClassName('setting').forEach(element => {
     element.addEventListener('change', () => {
       Preferences.set({
@@ -310,6 +296,23 @@ function listener() {
       const id = Number.parseInt(mapillaryModalTrigger.closest('[data-note-id]').dataset.noteId);
       Mapillary.load(ui.get(id));
     }
+
+    const commentAction = event.target.closest('.comment-action');
+    if (commentAction) {
+      commentAction.classList.add('loading');
+
+      const id = Number.parseInt(commentAction.closest('[data-note-id]').dataset.noteId);
+      const text = commentAction.parentElement.parentElement.querySelector('.note-comment').value.trim();
+
+      api.comment(id, text, commentAction.dataset.action).then(note => {
+        ui.update(id, new Note(JSON.parse(note))).then(details);
+        Comments.load(ui.get(id));
+      }).catch(error => {
+        console.log(error); // eslint-disable-line no-console
+      }).finally(() => {
+        commentAction.classList.remove('loading');
+      });
+    }
   });
 }
 

diff --git a/app/js/modals/comments.js b/app/js/modals/comments.js
@@ -1,9 +1,12 @@
-import * as Badges from '../badges.js';
+import * as Localizer from '../localizer.js';
 import Modal from './modal.js';
 
 import * as Handlebars from 'handlebars';
 import t from '../../templates/dynamic/comment.hbs?raw';
 const template = Handlebars.compile(t);
+Handlebars.registerHelper('localizer', key => {
+  return Localizer.message(key);
+});
 
 export default class Comments extends Modal {
   /**
@@ -17,22 +20,17 @@ export default class Comments extends Modal {
   static load(note) {
     super.open('comments');
 
-    const { comments } = note;
-
-    comments.forEach((comment, i) => {
-      comments[i].badges = {
-        age: Badges.age(comment.color, comment.date),
-        user: Badges.user(comment.uid, comment.anonymous),
-        status: Badges.status(comment.action)
-      };
+    const content = document.getElementById('modal-comments-content');
+    content.innerHTML = template(note, {
+      allowedProtoProperties: {
+        badges: true
+      }
     });
-
-    document.getElementById('comments').innerHTML = template({ comments });
-    document.getElementById('comments').dataset.noteId = note.id;
-    document.getElementById('note-link').href = `${OPENSTREETMAP_SERVER}/note/${note.id}`;
+    content.dataset.noteId = note.id;
+    document.getElementById('modal-comments-note-link').href = `${OPENSTREETMAP_SERVER}/note/${note.id}`;
 
     // Clear the note input
-    const input = document.getElementById('note-comment');
+    const input = content.querySelector('.note-comment');
     input.value = '';
     input.dispatchEvent(new Event('input'));
 

diff --git a/app/js/note.js b/app/js/note.js
@@ -1,5 +1,5 @@
 import * as Badges from './badges.js';
-import Linkify from './linkify.js';
+import Comment from './comment.js';
 import * as Localizer from './localizer.js';
 import * as Util from './util.js';
 
@@ -28,7 +28,7 @@ export default class Note {
     this.status = feature.properties.status;
     this.coordinates = feature.geometry.coordinates.reverse();
 
-    this.comments = this.parseComments(feature.properties.comments);
+    this.comments = feature.properties.comments.map(comment => new Comment(comment));
     this.users = this.comments.filter(comment => comment.uid !== null).map(comment => comment.uid);
     this.anonymous = this.comments[0].anonymous;
     this.user = this.comments[0].user;
@@ -121,7 +121,7 @@ export default class Note {
   }
 
   /**
-    * Dynamically creates all possible badges
+    * Create all necessary badges dynamically
     *
     * @function
     * @returns {Object}
@@ -135,39 +135,4 @@ export default class Note {
       report: Badges.report(this.id)
     };
   }
-
-  /**
-    * Parses the existing comments
-    *
-    * @function
-    * @param {Array} comments
-    * @returns {Array}
-    */
-  parseComments(comments) {
-    const texts = [];
-
-    for (let i = comments.length - 1; i >= 0; i--) {
-      const comment = comments[i];
-      comment.anonymous = comment.user ? false : true;
-      if (comment.anonymous) {
-        comment.user = Localizer.message('note.anonymous');
-        comment.uid = null;
-      }
-      comment.date = new Date(comment.date.replace(/-/g, '/'));
-      comment.color = Util.parseDate(comment.date);
-
-      const linkified = Linkify(comment.text);
-      comment.html = linkified.html;
-      comment.images = linkified.images;
-
-      // TODO: in some cases the API might supply multiple, not unique comments,
-      // see also https://github.com/ENT8R/NotesReview/issues/43#issuecomment-565805628
-      if (texts.includes(comment.text)) {
-        comments.splice(i, 1);
-      } else if (comment.text !== '') {
-        texts.push(comment.text);
-      }
-    }
-    return comments;
-  }
 }
diff --git a/app/js/ui/map.js b/app/js/ui/map.js
@@ -1,9 +1,5 @@
 import Leaflet from '../leaflet.js';
 
-import * as Handlebars from 'handlebars';
-import t from '../../templates/dynamic/note.hbs?raw';
-const template = Handlebars.compile(t);
-
 export default class Map {
   constructor() {
     this.cluster = L.markerClusterGroup({
@@ -33,25 +29,13 @@ export default class Map {
 
     const marker = L.marker(note.coordinates, {
       icon: new L.divIcon({
-        html: `<img alt="" src="${icon}" class="marker-icon">`,
+        html: `<img alt="" src="${icon}" class="marker-icon comments-modal-trigger" data-note-id="${note.id}">`,
         iconSize: [25, 40],// [width, height]
         iconAnchor: [25 / 2, 40], // [width / 2, height]
         popupAnchor: [0, -30],
         className: 'marker-icon'
       })
     });
-    /* marker.on('click', event => {
-      console.log(event);
-    });*/
-    marker.bindPopup(template({
-      id: note.id,
-      badges: note.badges,
-      comment: note.comments[0].html,
-      actions: note.actions
-    }), {
-      // Expand the width of the popup if there is more than one image
-      maxWidth: note.comments[0].images.length > 1 ? document.getElementById('map').offsetWidth - 200 : 350,
-    });
     this.markers.push(marker);
   }
 

diff --git a/app/js/ui/ui.js b/app/js/ui/ui.js
@@ -47,9 +47,9 @@ export default class UI {
     */
   show(notes, query, reload) {
     this.query = query;
+    this.notes = notes;
 
     notes = notes.filter(note => Util.isNoteVisible(note, query));
-    this.notes = notes;
 
     const amount = notes.length;
     const average = notes.reduce((accumulator, current) => accumulator + current.created.getTime(), 0) / amount;

diff --git a/app/templates/dynamic/comment.hbs b/app/templates/dynamic/comment.hbs
@@ -11,3 +11,14 @@
 </div>
 <div class="divider"></div>
 {{/each}}
+
+<div class="form-group">
+  <textarea class="form-input note-comment requires-authentication" rows="3"
+            placeholder="{{localizer 'comments.inputPlaceholder'}}"></textarea>
+  <!-- IMPORTANT: These elements must stay at this position, otherwise the automatic detection of the neighboring element will fail -->
+  <div class="btn-group btn-group-block my-2 d-hide requires-authentication note-comment-actions">
+    <button class="btn comment-action" data-action="comment">{{localizer 'action.comment'}}</button>
+    <button class="btn comment-action" data-action="close">{{localizer 'action.commentClose'}}</button>
+    <button class="btn comment-action" data-action="reopen">{{localizer 'action.commentReopen'}}</button>
+  </div>
+</div>
diff --git a/app/templates/modals/comments.hbs b/app/templates/modals/comments.hbs
@@ -3,24 +3,11 @@
 
   <div class="modal-container">
     <div class="modal-body">
-      <div class="content">
-        <div id="comments" class="clear-on-modal-close"></div>
-
-        <div class="form-group">
-          <textarea id="note-comment" class="form-input requires-authentication" laceholder="Write a comment for all other users"
-                    rows="3" data-i18n data-i18n-placeholder="comments.inputPlaceholder"></textarea>
-        </div>
-
-        <div id="note-comment-actions" class="btn-group btn-group-block d-hide requires-authentication">
-          <button class="btn comment-action" data-action="comment" data-i18n="action.comment">Comment</button>
-          <button class="btn comment-action" data-action="close" data-i18n="action.commentClose">Comment and close</button>
-          <button class="btn comment-action" data-action="reopen" data-i18n="action.commentReopen">Reopen and comment</button>
-        </div>
-      </div>
+      <div id="modal-comments-content" class="content clear-on-modal-close"></div>
     </div>
 
     <div class="modal-footer">
-      <a class="btn btn-primary float-left" id="note-link" target="_blank" rel="noopener">
+      <a id="modal-comments-note-link" class="btn btn-primary float-left" target="_blank" rel="noopener">
         <svg class="icon"><use xlink:href="#icon-external"></use></svg>
         <span data-i18n="action.openstreetmap">OpenStreetMap</span>
       </a>