Restore sanity to the use of contenteditable fields

This commit is contained in:
Shaunak Kishore
2015-10-06 00:09:27 -04:00
parent 0b7e8b0586
commit fbaff70663
5 changed files with 13 additions and 16 deletions

View File

@ -2,3 +2,7 @@ Handlebars.registerHelper('selected', (current, value) =>
({value: value, selected: current === value ? 'selected' : undefined})); ({value: value, selected: current === value ? 'selected' : undefined}));
Handlebars.registerHelper('equals', (a, b) => a === b); Handlebars.registerHelper('equals', (a, b) => a === b);
Handlebars.registerHelper('editable', (field, value) =>
`<div class="value" contenteditable="true" ` +
`data-field="${field}">${value}</div>`);

View File

@ -75,8 +75,7 @@
{{#each items}} {{#each items}}
<div class="field"> <div class="field">
<label class="control-label">{{label}}</label> <label class="control-label">{{label}}</label>
<div class="value" contenteditable="true" {{{editable field value}}}{{extra}}
data-field="{{field}}">{{value}}</div>{{extra}}
</div> </div>
{{/each}} {{/each}}
<div class="field"> <div class="field">

View File

@ -133,11 +133,14 @@ Template.analysis_stage.events({
// This line is not needed for correctness, so we ignore any errors in it. // This line is not needed for correctness, so we ignore any errors in it.
try { window.getSelection().removeAllRanges(); } catch (e) { } try { window.getSelection().removeAllRanges(); } catch (e) { }
const target = $(event.target); const target = $(event.target);
const field = target.attr('data-field');
const text = target.text(); const text = target.text();
if (this.path) { if (field === 'character') {
updateCharacterValue(target, text, this.path); updateCharacterValue(target, text, this.path);
} else { } else if (field === 'radical') {
updateRadicalValue(target, text); updateRadicalValue(target, text);
} else {
assert(false, `Unexpected editable field: ${field}`);
} }
}, },
'click .value': function(event) { 'click .value': function(event) {
@ -170,9 +173,7 @@ Template.analysis_stage.events({
Template.analysis_stage.helpers({ Template.analysis_stage.helpers({
radical: () => { radical: () => {
const result = Session.get('stages.analysis.radical') || '?'; return Session.get('stages.analysis.radical') || '?';
$('.analysis_stage .radical .value').text('');
return result;
}, },
tree: () => { tree: () => {
return Session.get('stages.analysis.tree'); return Session.get('stages.analysis.tree');

View File

@ -96,7 +96,6 @@ Template.metadata.events({
} }
if (value !== glyph.metadata[this.field] && if (value !== glyph.metadata[this.field] &&
(value || glyph.metadata[this.field])) { (value || glyph.metadata[this.field])) {
$(event.target).text('');
glyph.metadata[this.field] = value; glyph.metadata[this.field] = value;
Session.set('editor.glyph', glyph); Session.set('editor.glyph', glyph);
} else { } else {
@ -128,12 +127,6 @@ Template.metadata.helpers({
result[0].extra = `; ${variant ? 'variant of ' : ''}` + result[0].extra = `; ${variant ? 'variant of ' : ''}` +
`Kangxi radical ${index} ${variant ? primary : ''}`; `Kangxi radical ${index} ${variant ? primary : ''}`;
} }
for (let entry of result) {
const element = $(`.metadata .field [data-field="${entry.field}"]`);
if (element.text() !== entry.value) {
element.text('');
}
}
return result; return result;
}, },
references() { references() {

View File

@ -25,7 +25,7 @@
{{> decomposition_tree tree}} {{> decomposition_tree tree}}
<div class="radical"> <div class="radical">
<label class="control-label">Radical:</label> <label class="control-label">Radical:</label>
<div class="value" contenteditable="true">{{radical}}</div> {{{editable "radical" radical}}}
</div> </div>
<div class="etymology"> <div class="etymology">
<label class="control-label">Etymology:</label> <label class="control-label">Etymology:</label>
@ -44,7 +44,7 @@
<option {{selected type "compound"}}>Compound</option> <option {{selected type "compound"}}>Compound</option>
</select> </select>
{{#if (equals type "character")}} {{#if (equals type "character")}}
<div class="value" contenteditable="true">{{value}}</div> - {{{editable "character" value}}}
{{#if (equals value "?")}} {{#if (equals value "?")}}
(unknown) (unknown)
{{else}} {{else}}