From cd2d42799e330d9f0885be00a65243270dbeebff Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sun, 8 Apr 2018 21:23:05 -0400 Subject: [PATCH] Show events --- css/80_app.css | 13 +++- data/core.yaml | 3 +- dist/locales/en.json | 3 +- modules/ui/success.js | 163 +++++++++++++++++++++++++++++++----------- 4 files changed, 136 insertions(+), 46 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index c75209c00..216f2aee2 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3638,7 +3638,7 @@ img.tile-debug { padding: 0 10px; } .save-success td.community-detail { - padding-bottom: 20px; + padding-bottom: 15px; } .summary-view-on-osm, @@ -3658,15 +3658,24 @@ img.tile-debug { .community-detail a:visited.hide-toggle { font-size: 12px; font-weight: normal; + padding-bottom: 0; } .community-detail .hide-toggle svg.icon.pre-text { width: 12px; height: 15px; } -.community-detail .community-more { + +.community-event, +.community-more { background-color: #efefef; padding: 8px; border-radius: 4px; + margin-bottom: 5px; +} + +.community-event-name, +.community-event-when { + font-weight: bold; } diff --git a/data/core.yaml b/data/core.yaml index bac0beb6c..c9f28d8d6 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -534,9 +534,10 @@ en: help_link_text: Details help_link_url: "https://wiki.openstreetmap.org/wiki/FAQ#I_have_just_made_some_changes_to_the_map._How_do_I_get_to_see_my_changes.3F" view_on_osm: "View Changes on OSM" - changeset_id: "Changeset #: {changeset_id}" + changeset_id: "Your changeset #: {changeset_id}" like_osm: "Like OpenStreetMap? Connect with others:" more: More + events: Events languages: "Languages: {languages}" confirm: okay: "OK" diff --git a/dist/locales/en.json b/dist/locales/en.json index f5bcac69c..4398a7948 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -651,9 +651,10 @@ "help_link_text": "Details", "help_link_url": "https://wiki.openstreetmap.org/wiki/FAQ#I_have_just_made_some_changes_to_the_map._How_do_I_get_to_see_my_changes.3F", "view_on_osm": "View Changes on OSM", - "changeset_id": "Changeset #: {changeset_id}", + "changeset_id": "Your changeset #: {changeset_id}", "like_osm": "Like OpenStreetMap? Connect with others:", "more": "More", + "events": "Events", "languages": "Languages: {languages}" }, "confirm": { diff --git a/modules/ui/success.js b/modules/ui/success.js index 1de9a6a79..01d1a992d 100644 --- a/modules/ui/success.js +++ b/modules/ui/success.js @@ -7,11 +7,14 @@ import { t } from '../util/locale'; import { data } from '../../data'; import { svgIcon } from '../svg'; import { uiDisclosure } from '../ui'; +import { utilDetect } from '../util/detect'; import { utilRebind } from '../util/rebind'; export function uiSuccess(context) { + var detected = utilDetect(); var dispatch = d3_dispatch('cancel'); + var MAXEVENTS = 2; var _changeset; var _location; @@ -159,59 +162,135 @@ export function uiSuccess(context) { .append('td') .attr('class', 'cell-detail community-detail'); - communityDetail.each(function(d) { - var selection = d3_select(this); - var replacements = { - url: linkify(d.url), - signupUrl: linkify(d.signupUrl || d.url) - }; + communityDetail + .each(showCommunityDetails); + } + + function showCommunityDetails(d) { + var selection = d3_select(this); + var replacements = { + url: linkify(d.url), + signupUrl: linkify(d.signupUrl || d.url) + }; + + selection + .append('div') + .attr('class', 'community-name') + .append('a') + .attr('target', '_blank') + .attr('href', d.url) + .text(t('community.' + d.id + '.name')); + + selection + .append('div') + .attr('class', 'community-description') + .html(t('community.' + d.id + '.description', replacements)); + + if (d.extendedDescription || (d.languageCodes && d.languageCodes.length)) { selection .append('div') - .attr('class', 'community-name') + .call(uiDisclosure(context, 'community-more-' + d.id, false) + .title(t('success.more')) + .content(showMore) + ); + } + + var nextEvents = (d.events || []) + .map(function(event) { // add parsed date + event.date = new Date(event.when); + return event; + }) + .filter(function(event) { // date is valid and future (or today) + var t = event.date.getTime(); + var now = (new Date()).setHours(0,0,0,0); + return !isNaN(t) && t >= now; + }) + .sort(function(a, b) { // sort by date ascending + return a.date < b.date ? -1 : a.date > b.date ? 1 : 0; + }) + .slice(0, MAXEVENTS); // limit number of events shown + + if (nextEvents.length) { + selection + .append('div') + .call(uiDisclosure(context, 'community-events-' + d.id, false) + .title(t('success.events')) + .content(showNextEvents) + ); + } + + + function showMore(selection) { + var more = selection + .append('div') + .attr('class', 'community-more'); + + if (d.extendedDescription) { + more + .append('div') + .attr('class', 'community-extended-description') + .html(t('community.' + d.id + '.extendedDescription', replacements)); + } + + if (d.languageCodes && d.languageCodes.length) { + more + .append('div') + .attr('class', 'community-languages') + .text(t('success.languages', { languages: d.languageCodes.join(', ') })); + } + } + + + function showNextEvents(selection) { + var events = selection + .append('div') + .attr('class', 'community-events'); + + var item = events.selectAll('.community-event') + .data(nextEvents); + + var itemEnter = item.enter() + .append('div') + .attr('class', 'community-event'); + + itemEnter + .append('div') + .attr('class', 'community-event-name') .append('a') .attr('target', '_blank') - .attr('href', d.url) - .text(t('community.' + d.id + '.name')); + .attr('href', function(d) { return d.url; }) + .text(function(d) { return d.name; }); - selection + itemEnter .append('div') - .attr('class', 'community-description') - .html(t('community.' + d.id + '.description', replacements)); + .attr('class', 'community-event-when') + .text(function(d) { + var options = { + weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' + }; + if (d.date.getHours() || d.date.getMinutes()) { // include time if it has one + options.hour = 'numeric'; + options.minute = 'numeric'; + } + return d.date.toLocaleString(detected.locale, options); + }); - if (d.extendedDescription || (d.languageCodes && d.languageCodes.length)) { - selection - .append('div') - .call(uiDisclosure(context, 'community-ext-' + d.id, false) - .title(t('success.more')) - .content(showMore) - ); - } + itemEnter + .append('div') + .attr('class', 'community-event-where') + .text(function(d) { return d.where; }); - function showMore(selection) { - var more = selection - .append('div') - .attr('class', 'community-more'); + itemEnter + .append('div') + .attr('class', 'community-event-description') + .text(function(d) { return d.description; }); + } - if (d.extendedDescription) { - more - .append('div') - .attr('class', 'community-extended-description') - .html(t('community.' + d.id + '.extendedDescription', replacements)); - } - if (d.languageCodes && d.languageCodes.length) { - more - .append('div') - .attr('class', 'community-languages') - .text(t('success.languages', { languages: d.languageCodes.join(', ') })); - } - } - - function linkify(url) { - return '' + url + ''; - } - }); + function linkify(url) { + return '' + url + ''; + } }