edit_source.html

<form style="display: inline" method="GET" action="/translator/edit/{{ lang }}">
<div style="float: right; margin-top: -5px">
<select name="source" onchange="this.form.elements['contains'].value = ''; this.form.submit ()">
	<option value="">- {"Limit to source file"} -</option>
{% foreach sources %}
	<option value="{{ loop_value }}"{% if loop_value === $data->source %} selected{% end %}>{{ loop_value }}</option>
{% end %}
</select>
&nbsp;- {"or"} -&nbsp;
<input type="text" name="contains" placeholder="{"Contains text..."}" size="30" />
<input type="submit" value="{"Go"}" />
<a href="/translator/edit/{{ lang }}">{"Clear"}</a>
</div>
</form>

<p><a href="/translator/index">{"Done editing"}</a></p>

<p>
<table width="100%">
	<tr>
		<th width="48%">{"Original text"}</th>
		<th width="52%">
			<span style="float: right">
				{% if empty %}
					<a href="/translator/edit/{{ lang }}?source={{ source|urlencode }}">{"Show all fields"}</a>
				{% else %}
					<a href="/translator/edit/{{ lang }}?source={{ source|urlencode }}&empty=1">{"Show empty fields"}</a>
				{% end %}
			</span>
			{{ name }}
		</th>
	</tr>
{% foreach items %}
	{% if empty === false || $data->loop_value['trans'] === '' %}
		<tr id="tr-{{ loop_index|translator_field_id }}">
			<td class="original" title="{"Source"}: {{ loop_value[src] }}">{{ loop_index }}</td>
			<td class="translate">
				<textarea
					rows="1" style="float:left; width: 85%; height: 100%"
					data-orig="{{ loop_index }}"
					data-id="{{ loop_index|translator_field_id }}"
					id="textarea-{{ loop_index|translator_field_id }}"
					onblur="$.save_element (this)"
					{% if empty ($data->loop_value[trans]) %} class="empty"{% end %}
				>{{ loop_value[trans] }}</textarea>
				<span id="saving-{{ loop_index|translator_field_id }}" class="notice" style="float: left; margin-left: 7px">{"Saving..."}</span>
			</td>
		</tr>
	{% end %}
{% end %}
</table>
</p>

<script>
$(function () {
	$('textarea')[0].focus ();
	$('textarea').keyup (function (evt) {
		if ($(this).val ().length > 0) {
			$(this).removeClass ('empty');
		} else {
			$(this).addClass ('empty');
		}
	});
});

$.save_element = function (el) {
	var id = $(el).data ('id'),
		orig = $(el).data ('orig'),
		val = $(el).val ();

	if (val.length === 0) {
		$(el).addClass ('empty');
		return;
	}

	$(el).removeClass ('empty');
	$('#saving-' + id).html ('{"Saving..."}').show ();
	
	$.post ('/translator/api/save', {lang: '{{ lang }}', orig: orig, value: val}, function (res) {
		// Todo: error checking

		$('#saving-' + id).html ('{"Saved!"}').delay (1000).fadeOut ();
	});
};
</script>

<style>
.empty {
	background: #ffd;
}
</style>