CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-04-21 11:16:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Extract tag editor ui

Browse Source
This commit is contained in:
Ansis Brammanis
2013-02-15 15:58:05 -05:00
parent 6a1ef84546
commit bf3a635da5
5 changed files with 148 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -91,6 +91,7 @@
<script src='js/id/ui/zoom.js'></script>
<script src='js/id/ui/taglist.js'></script>
<script src='js/id/ui/presetgrid.js'></script>
<script src='js/id/ui/tageditor.js'></script>
<script src='js/id/actions.js'></script>
<script src="js/id/actions/add_midpoint.js"></script>
js/id/modes/select.js
+2
View File
@@ -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);
js/id/ui/inspector.js
+25 -96
View File
@@ -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;
}
};
js/id/ui/presetgrid.js
+1 -1
View File
@@ -1,5 +1,5 @@
iD.ui.PresetGrid = function() {
var event = d3.dispatch('choose'),
var event = d3.dispatch('choose', 'message'),
entity,
presetData;
js/id/ui/tageditor.js
+119
View File
@@ -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');
};