diff --git a/data/core.yaml b/data/core.yaml index 2aa605657..b24851df8 100644 --- a/data/core.yaml +++ b/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 diff --git a/dist/locales/en.json b/dist/locales/en.json index b87f22d0a..d9296e4a1 100644 --- a/dist/locales/en.json +++ b/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": { diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js index 27ba1e7c3..4a2cbb80a 100644 --- a/modules/ui/note_editor.js +++ b/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;