Translations

app/assets/javascripts/application.js.coffee

@@ -1,8 +1,8 @@
 #= require jquery
 #= require jquery_ujs
 #= require jquery.ui.sortable
-#= require jquery.turbolinks
-#= require turbolinks
+# = #require jquery.turbolinks
+# = #require turbolinks
 #= require foundation
 
 # FRONT END
@@ -123,6 +123,50 @@ updateFormFieldList = () ->
 				updateFormFieldList()
 				return
 
+saveTranslation = ($td, $move_to, auto_translate) ->
+	val = ''
+	do_auto_translate = true
+	if typeof auto_translate == "undefined" || !auto_translate
+		val = $td.find('textarea').val()
+		do_auto_translate = false
+	key = $td.parent().data().key
+	params = {translationkey: key, translationvalue: val, translationlang: window.location.href.replace(/^.*\/(\w+)\/$/, '$1')}
+	if do_auto_translate
+		params['auto_translate'] = true
+	$.post '/translate/', params,
+		(json) ->
+			#console.log json
+			$td.html(json.translation)
+			if $td.parent().hasClass('not-exists')
+				$td.parent().removeClass('not-exists')
+				$td.parent().addClass('exists')
+			$('.translation-form').remove()
+			if typeof $move_to != "undefined" && $move_to
+				startTranslating $move_to
+			return
+	return
+
+stopTranslating = () -> $('.translation-form').remove()
+
+startTranslating = ($td) ->
+	stopTranslating()
+	value = if $td.parent().hasClass('not-exists') then '' else $td.html().trim()
+	$tr = $td.parent()
+	key = $tr.data().key
+	$td.append('<div class="translation-form"><textarea>' + value + '</textarea><button class="small" data-key="' + key + '">Save</textarea>')
+	$textarea = $td.find('textarea')
+	$textarea.select()
+	$td.find('.translation-form button').click () -> saveTranslation($td)
+	$textarea.keydown (event) ->
+		if event.keyCode == 9
+			event.preventDefault()
+			$new_tr = if event.shiftKey then $tr.prev() else $tr.next()
+			saveTranslation $td, $new_tr.find('.value')
+		else if event.keyCode == 27
+			stopTranslating()
+		return
+	return
+
 $ ->
 	$(document).foundation();
 	$('.field.country-select select').change () ->
@@ -169,3 +213,16 @@ $ ->
 				#	(json) ->
 				#		console.log json
 				#, 'json'
+	$('table#translations td.value').click () ->
+		$this = $(this)
+		if !$this.find('.translation-form').length
+			startTranslating($this)
+	if $('table#translations').length
+		$(document).click (event) ->
+			$target = $(event.target)
+			if $target.closest('table#translations').length < 1 && !$target.hasClass('auto-translate')
+				stopTranslating()
+		$('.auto-translate').click (event) ->
+			event.preventDefault()
+			$td = $(this).parent()
+			saveTranslation($td, null, true)

app/assets/stylesheets/application.css.scss

@@ -22,3 +22,4 @@
 // Local settings (also edit foundation_and_overrides.scss to modify global variables)
 @import "sass/layout";
 @import "sass/typography";
+@import "sass/base";

app/assets/stylesheets/sass/_base.scss

@@ -0,0 +1,88 @@
+table#translations {
+	td.value {
+		position: relative;
+		cursor: text;
+
+		&:hover,
+		.translation-form {
+			color: $white;
+			background-color: $body-font-color;
+		}
+	}
+
+	.not-exists {
+		td.value {
+			font-style: italic;
+			color: lighten($body-font-color, 45);
+		}
+	}
+	
+	.translation-form {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 10;
+		padding: inherit;
+
+		textarea {
+			height: 100%;
+			font-size: inherit;
+			padding: 0;
+			color: inherit;
+			background-color: inherit;
+		}
+
+		button {
+			right: 100%;
+			position: absolute;
+			border-radius: 0;
+			top: 0;
+		}
+	}
+
+	.auto-translate {
+		float: right;
+	}
+}
+
+.grid.links {
+	li > a {
+		display: block;
+		background-color: $color-5;
+		color: $white;
+		padding: 1em;
+		min-height: 7em;
+
+		&:hover {
+			background-color: $color-1;
+		}
+
+		h3 {
+			color: inherit;
+		}
+	}
+}
+
+ul.tags,
+.tags > ul {
+	display: inline;
+	list-style: none;
+	font-size: 0.9em;
+	margin: 0;
+}
+
+.tags {
+	li {
+		display: inline-block;
+		background-color: $black;
+		color: $white;
+		padding: 0 0.5em;
+		margin: 0.6em 0 0 0.3em;
+	}
+	h5 {
+		float: left;
+		color: lighten($body-font-color, 10);
+	}
+}

app/assets/stylesheets/sass/_layout.scss

@@ -379,3 +379,13 @@ body.organizations-show {
 		text-align: inherit;
 	}
 }
+
+table {
+	td {
+		vertical-align: top;
+
+		&.primary {
+			width: 100%;
+		}
+	}
+}