From bf3a635da552952fde0d406501ff197281152418 Mon Sep 17 00:00:00 2001 From: Ansis Brammanis Date: Fri, 15 Feb 2013 15:58:05 -0500 Subject: [PATCH] Extract tag editor ui --- index.html | 1 + js/id/modes/select.js | 2 + js/id/ui/inspector.js | 121 +++++++++-------------------------------- js/id/ui/presetgrid.js | 2 +- js/id/ui/tageditor.js | 119 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 148 insertions(+), 97 deletions(-) create mode 100644 js/id/ui/tageditor.js diff --git a/index.html b/index.html index 3e20c81f7..126b17f6b 100644 --- a/index.html +++ b/index.html @@ -91,6 +91,7 @@ + diff --git a/js/id/modes/select.js b/js/id/modes/select.js index 65eb7a2f8..43b110e03 100644 --- a/js/id/modes/select.js +++ b/js/id/modes/select.js @@ -206,9 +206,11 @@ iD.modes.Select = function(context, selection, initial) { }; mode.exit = function() { + /* if (singular()) { changeTags(singular(), inspector.tags()); } + */ if (timeout) window.clearTimeout(timeout); diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index 212593a6c..6d4ee74a8 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -6,15 +6,14 @@ iD.ui.Inspector = function() { expert = false, inspectorbody, entity, - presetMatch, presetUI, + presetGrid, tagList, context; function inspector(selection) { - entity = selection.datum(); - presetMatch = presetData.matchTags(entity); + entity = selection.datum(); var iwrap = selection.append('div') .attr('class','inspector content hide'), @@ -28,102 +27,32 @@ iD.ui.Inspector = function() { .attr('class', 'inspector-buttons pad1 fillD') .call(drawButtons); + presetGrid = iD.ui.PresetGrid() + .presetData(presetData) + .entity(entity) + .on('message', message.text) + .on('choose', function(preset) { + inspectorbody.call(tagEditor, expert, preset); + }); + + tagEditor = iD.ui.TagEditor() + .presetData(presetData) + .context(context) + .on('message', message.text) + .on('choose', function() { + inspectorbody.call(presetGrid); + }); + + if (initial) { - inspectorbody.call(iD.ui.PresetGrid() - .presetData(presetData) - .entity(selection.datum()) - .on('choose', function(preset) { - presetMatch = preset; - inspectorbody.call(drawEditor); - })); + inspectorbody.call(presetGrid); } else { - inspectorbody.call(drawEditor); + inspectorbody.call(tagEditor); } iwrap.call(iD.ui.Toggle(true)); } - function drawEditor(selection) { - selection.html(''); - - var editorwrap = selection.append('div') - .attr('class', 'inspector-inner tag-wrap fillL2'); - - var typewrap = editorwrap.append('div') - .attr('class', 'type inspector-inner fillL'); - - typewrap.append('h4') - .text('Type'); - - typewrap.append('img') - .attr('class', 'preset-icon'); - - typewrap.append('h3') - .attr('class', 'preset-name') - .text(presetMatch ? presetMatch.name : ''); - - - var namewrap = editorwrap.append('div') - .attr('class', 'head inspector-inner fillL'), - h2 = namewrap.append('h2'); - - h2.append('span') - .attr('class', 'icon big icon-pre-text big-' + entity.geometry(context.graph())); - - var name = h2.append('input') - .attr('placeholder', 'name') - .property('value', function() { - return entity.tags.name || ''; - }) - .on('keyup', function() { - var tags = inspector.tags(); - tags.name = this.value; - inspector.tags(tags); - event.change(); - }); - - event.on('change.name', function() { - var tags = inspector.tags(); - name.property('value', tags.name); - }); - - - presetUI = iD.ui.preset() - .on('change', function(tags) { - event.change(); - }); - - tagList = iD.ui.Taglist() - .context(context) - .on('change', function(tags) { - event.change(); - }); - - var inspectorpreset = editorwrap.append('div') - .attr('class', 'inspector-preset cf'); - - if (presetMatch && !expert) { - inspectorpreset.call(presetUI - .preset(presetMatch)); - } - - var taglistwrap = editorwrap.append('div').call(tagList); - - inspector.tags(entity.tags); - } - - function drawHead(selection) { - var entity = selection.datum(); - - var h2 = selection.append('h2'); - - h2.append('span') - .attr('class', 'icon big icon-pre-text big-' + entity.geometry(context.graph())); - - h2.append('span') - .text(entity.friendlyName()); - } - function drawButtons(selection) { var entity = selection.datum(); @@ -149,7 +78,7 @@ iD.ui.Inspector = function() { .on('click', function() { expert = !expert; expertButton.text(expert ? 'Preset view' : 'Tag view'); - inspectorbody.call(drawEditor); + inspectorbody.call(tagEditor, expert); }); } @@ -161,10 +90,10 @@ iD.ui.Inspector = function() { inspector.tags = function(tags) { if (!arguments.length) { - return _.extend(presetUI.tags(), tagList.tags()); + return tagEditor.tags(); } else { - presetUI.change(tags); - tagList.tags(_.omit(tags, _.keys(presetUI.tags() || {}))); + tagEditor.tags.apply(this, arguments); + return inspector; } }; diff --git a/js/id/ui/presetgrid.js b/js/id/ui/presetgrid.js index 892312546..dea3fd6cd 100644 --- a/js/id/ui/presetgrid.js +++ b/js/id/ui/presetgrid.js @@ -1,5 +1,5 @@ iD.ui.PresetGrid = function() { - var event = d3.dispatch('choose'), + var event = d3.dispatch('choose', 'message'), entity, presetData; diff --git a/js/id/ui/tageditor.js b/js/id/ui/tageditor.js new file mode 100644 index 000000000..ca9eeab1e --- /dev/null +++ b/js/id/ui/tageditor.js @@ -0,0 +1,119 @@ +iD.ui.TagEditor = function() { + var event = d3.dispatch('changeTags', 'choose', 'close', 'change', 'message'), + taginfo = iD.taginfo(), + presetData = iD.presetData(), + expert = false, + inspectorbody, + entity, + presetMatch, + presetUI, + presetGrid, + tagList, + context; + + function tageditor(selection, tagview, preset) { + + entity = selection.datum(); + presetMatch = preset || presetData.matchTags(entity); + + selection.html(''); + + var editorwrap = selection.append('div') + .attr('class', 'inspector-inner tag-wrap fillL2'); + + var typewrap = editorwrap.append('div') + .attr('class', 'type inspector-inner fillL'); + + typewrap.append('h4') + .text('Type'); + + typewrap.append('img') + .attr('class', 'preset-icon'); + + typewrap.append('h3') + .attr('class', 'preset-name') + .text(presetMatch ? presetMatch.name : ''); + + + var namewrap = editorwrap.append('div') + .attr('class', 'head inspector-inner fillL'), + h2 = namewrap.append('h2'); + + h2.append('span') + .attr('class', 'icon big icon-pre-text big-' + entity.geometry(context.graph())); + + var name = h2.append('input') + .attr('placeholder', 'name') + .property('value', function() { + return entity.tags.name || ''; + }) + .on('keyup', function() { + var tags = tageditor.tags(); + tags.name = this.value; + tageditor.tags(tags); + event.change(); + }); + + event.on('change.name', function() { + var tags = tageditor.tags(); + name.property('value', tags.name); + }); + + + presetUI = iD.ui.preset() + .on('change', function(tags) { + event.change(); + }); + + tagList = iD.ui.Taglist() + .context(context) + .on('change', function(tags) { + event.change(); + }); + + var tageditorpreset = editorwrap.append('div') + .attr('class', 'inspector-preset cf'); + + if (presetMatch && !tagview) { + tageditorpreset.call(presetUI + .preset(presetMatch)); + } + + var taglistwrap = editorwrap.append('div').call(tagList); + + tageditor.tags(entity.tags); + } + + function drawHead(selection) { + var entity = selection.datum(); + + var h2 = selection.append('h2'); + + h2.append('span') + .attr('class', 'icon big icon-pre-text big-' + entity.geometry(context.graph())); + + h2.append('span') + .text(entity.friendlyName()); + } + + tageditor.tags = function(tags) { + if (!arguments.length) { + return _.extend(presetUI.tags(), tagList.tags()); + } else { + presetUI.change(tags); + tagList.tags(_.omit(tags, _.keys(presetUI.tags() || {}))); + } + }; + + tageditor.presetData = function(_) { + presetData = _; + return tageditor; + }; + + tageditor.context = function(_) { + context = _; + return tageditor; + }; + + return d3.rebind(tageditor, event, 'on'); +};