Add "More/Less" toggle for too long comments (curr limit 600 chars)

data/core.yaml

@@ -614,6 +614,8 @@ en:
     note: Note
     title: Edit note
     anonymous: anonymous
+    more: More
+    less: Less
     commentTitle: Comments
     close: Resolve
     reopen: Reopen

dist/locales/en.json

@@ -747,6 +747,8 @@
             "note": "Note",
             "title": "Edit note",
             "anonymous": "anonymous",
+            "more": "More",
+            "less": "Less",
             "commentTitle": "Comments",
             "close": "Resolve",
             "reopen": "Reopen",
@@ -6686,7 +6688,7 @@
                 "attribution": {
                     "text": "Terms & Feedback"
                 },
-                "description": "Premium DigitalGlobe satellite imagery.",
+                "description": "DigitalGlobe-Premium is a mosaic composed of DigitalGlobe basemap with select regions filled with +Vivid or custom area of interest imagery, 50cm resolution or better, and refreshed more frequently with ongoing updates.",
                 "name": "DigitalGlobe Premium Imagery"
             },
             "DigitalGlobe-Premium-vintage": {
@@ -6700,7 +6702,7 @@
                 "attribution": {
                     "text": "Terms & Feedback"
                 },
-                "description": "Standard DigitalGlobe satellite imagery.",
+                "description": "DigitalGlobe-Standard is a curated set of imagery covering 86% of the earth’s landmass, with 30-60cm resolution where available, backfilled by Landsat. Average age is 2.31 years, with some areas updated 2x per year.",
                 "name": "DigitalGlobe Standard Imagery"
             },
             "DigitalGlobe-Standard-vintage": {

modules/ui/note_editor.js

@@ -1,7 +1,10 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { uiFormFields } from './form_fields';
 
-import { select as d3_select } from 'd3-selection';
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
 
 import { t } from '../util/locale';
 import { svgIcon } from '../svg';
@@ -21,6 +24,7 @@ var _newComment;
 export function uiNoteEditor(context) {
     var dispatch = d3_dispatch('change', 'cancel', 'save', 'changeInput');
     var formFields = uiFormFields(context);
+    var commentLimit = 600;  // add a "more" link to comments longer than this length
     var _fieldsArr;
     var _modified = false;
     var _note;
@@ -103,14 +107,55 @@ export function uiNoteEditor(context) {
 
         main
             .append('div')
-            .attr('class', 'comment-text')
-            .text(function(d) { return d.text; });
+            .attr('class', function(d) {
+                var trunc = (d.text.length > commentLimit);
+                return 'comment-text' + (trunc ? ' truncated' : '');
+            })
+            .text(function(d) {
+                var trunc = (d.text.length > commentLimit);
+                return trunc ? d.text.slice(0, commentLimit) + '…' : d.text;
+            });
+
+        main
+            .each(function(d) {
+                var selection = d3_select(this);
+                var trunc = (d.text.length > commentLimit);
+                if (!trunc) return;
+
+                selection
+                    .append('a')
+                    .attr('class', 'comment-toggle-more')
+                    .attr('href', '#')
+                    .attr('tabindex', -1)
+                    .attr('target', '_blank')
+                    .text(t('note.more'))
+                    .on('click', toggleMore);
+            });
 
         comments
             .call(replaceAvatars);
     }
 
 
+    function toggleMore() {
+        d3_event.preventDefault();
+
+        var selection = d3_select(this.parentNode);  // select .comment-main
+        var commentText = selection.selectAll('.comment-text');
+        var commentToggle = selection.selectAll('.comment-toggle-more');
+        var trunc = !commentText.classed('truncated');
+
+        commentText
+            .classed('truncated', trunc)
+            .text(function(d) {
+                return trunc ? d.text.slice(0, commentLimit) + '…' : d.text;
+            });
+
+        commentToggle
+            .text(t('note.' + (trunc ? 'more' : 'less')));
+    }
+
+
     function replaceAvatars(selection) {
         var osm = services.osm;
         if (!osm) return;