diff --git a/modules/modes/select_note.js b/modules/modes/select_note.js index ed2a1ed94..9c8e97f5b 100644 --- a/modules/modes/select_note.js +++ b/modules/modes/select_note.js @@ -11,6 +11,8 @@ import { behaviorSelect } from '../behavior'; +import { svgNotes } from '../svg'; + import { services } from '../services'; import { modeBrowse } from './browse'; import { uiNoteEditor } from '../ui'; @@ -24,7 +26,16 @@ export function modeSelectNote(context, selectedNoteID) { var osm = services.osm; var keybinding = d3_keybinding('select-note'); - var noteEditor = uiNoteEditor(context); + var noteEditor = uiNoteEditor(context) + .on('updateNote', function() { + + // .call(drawNotes); // TODO: update and redraw notes + + var note = checkSelectedID(); + if (!note) return; + context.ui().sidebar + .show(noteEditor.note(note)); + }); var behaviors = [ behaviorHover(context), behaviorSelect(context), diff --git a/modules/svg/notes.js b/modules/svg/notes.js index a3b2f66d0..d34a0dcdd 100644 --- a/modules/svg/notes.js +++ b/modules/svg/notes.js @@ -125,14 +125,28 @@ export function svgNotes(projection, context, dispatch) { } - function drawNotes(selection) { - var enabled = svgNotes.enabled; - var service = getService(); + function toggleEdit(service, enabled) { function dimensions() { return [window.innerWidth, window.innerHeight]; } + if (enabled) { + if (service && ~~context.map().zoom() >= minZoom) { + editOn(); + service.loadNotes(projection, dimensions()); + update(); + } else { + editOff(); + } + } + } + + + function drawNotes(selection) { + var enabled = svgNotes.enabled; + var service = getService(); + layer = selection.selectAll('.layer-notes') .data(service ? [0] : []); @@ -145,15 +159,7 @@ export function svgNotes(projection, context, dispatch) { .style('display', enabled ? 'block' : 'none') .merge(layer); - if (enabled) { - if (service && ~~context.map().zoom() >= minZoom) { - editOn(); - update(); - service.loadNotes(projection, dimensions()); - } else { - editOff(); - } - } + toggleEdit(service, enabled); } drawNotes.enabled = function(_) { diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js index 7e9b4a6d5..9ef2333bc 100644 --- a/modules/ui/note_editor.js +++ b/modules/ui/note_editor.js @@ -18,7 +18,8 @@ import { modeBrowse } from '../modes'; export function uiNoteEditor(context) { - var dispatch = d3_dispatch('change', 'cancel', 'save', 'changeInput'); + // TODO: use 'toggleNote' and 'saveNote' to add 'thank you' warning to the sidebar + var dispatch = d3_dispatch('change', 'cancel', 'save', 'modifiedInput', 'updateNote', 'toggleNote', 'saveNote'); var commentLimit = 600; // add a "more" link to comments longer than this length var _inputValue; var _newComment; @@ -69,19 +70,26 @@ export function uiNoteEditor(context) { return; } - function parseResults(results) { + function parseResults(results) { // TODO: simplify result parsing + dispatch.call('change', results); // call success - + if (results) { + success(results); + } // otherwise, call failure + else { + failure(results); + } } - function success(response) { - console.log('success!', response); + function success(results) { + console.log('success!', results); // TODO: handle success + dispatch.apply('updateNote'); } - function failure(response) { - console.log('failure!', response); + function failure(results) { // TODO: handle failure & errors + console.log('failure!', results); } updateFunction(parseResults); @@ -256,7 +264,8 @@ export function uiNoteEditor(context) { function saveHeader(selection) { var header = selection.selectAll('.notesSaveHeader') .data([0]); - header = header.enter() + + header.enter() .append('h4') .attr('class', '.notesSaveHeader') .text(t('note.newComment')) @@ -265,29 +274,25 @@ export function uiNoteEditor(context) { function input(selection) { - // Input - var input = selection.selectAll('textarea') - .data([0]); - // enter - input = input.enter() - .append('textarea') - .attr('id', 'new-comment-input') - .attr('placeholder', t('note.inputPlaceholder')) - .attr('maxlength', 1000) - .call(utilNoAuto) - .on('input', modified) - .on('blur', modified) - .on('change', modified) - .merge(input); + var input = selection.selectAll('textarea') + .data([0]); + + input.enter() + .append('textarea') + .attr('id', 'new-comment-input') + .attr('placeholder', t('note.inputPlaceholder')) + .attr('maxlength', 1000) + .call(utilNoAuto) + .on('input', change) + .on('blur', change) + .merge(input); - function modified(onInput) { - _modified = !!this.value; + function change() { _inputValue = this.value; - - // TODO: fix this event handling & update button text to reflect if there is input - // dispatch.call('inputModified', this, _inputValue); + console.log(_inputValue); + dispatch.apply('modifiedInput'); } } @@ -332,11 +337,11 @@ export function uiNoteEditor(context) { buttonSection = buttonSection .merge(buttonEnter); - buttonSection.selectAll('.close-button') - .on('click', function() { save(toggleNoteStatus); }); - - buttonSection.selectAll('.reopen-button') - .on('click', function() { save(toggleNoteStatus); }); + buttonSection.selectAll('.closed-button,.open-button') + .on('click', function() { + save(toggleNoteStatus); + dispatch.apply('toggleNote', this); // TODO: dispatch toggleNote event + }); buttonSection.selectAll('.cancel-button') .on('click.cancel', cancel); @@ -346,10 +351,13 @@ export function uiNoteEditor(context) { var n = d3_select('#new-comment-input').node(); return (n && n.value.length) ? null : true; }) + .on('modifiedInput', function() { + // TODO: determine how to toggle button on input via triggering 'modifiedInput' event + }) .on('click.save', function() { this.blur(); // avoid keeping focus on the button - #4641 save(addNoteComment); - dispatch.call('saveNote', this, _newComment); // TODO: saveNote event + dispatch.apply('saveNote', this, _newComment); // TODO: dispatch saveNote event }); }