Zum Inhalt springen

locallang Übersetzung für Javascript (ViewHelper?)

Erstellt am 24. November 2011 · 1 Antwort · letzte Antwort am 9. Februar 2012

Tags: ViewHelper, JavaScript & AJAX, Frage

tobla ·

Hallo zusammen

Immer wieder taucht bei mir das Problem auf, dass ein Script Nachrichten ausgeben soll, wie z.B. "Erfolgreich gespeichert". Besonders bei der Verwendung von Ajax ist dies unumgänglich.
Da nun Fluid sehr komfortabel mit dem locallang umgeht, wäre es schade, wenn die Scripts nicht lokalisierbar wären. Da man mit Javascript nicht direkt auf das Locallang-File Zugriffen kann, ist dies etwas Knifflig.

Bisher habe ich folgende Lösungsvorschläge für diese Problem, die jedoch alle etwas unschön sind:

- Mit Fluid die Übersetzung in den Html Code laden und bei Bedarf mit JS abrufen. Finde ich sehr unschön und unflexibel:

<div data="{f:translate(key:'tx_myExt.key')}"></div>

- Mit Ajax die locallang anzapfen. Finde ich etwas übertrieben, nur für eine Übersetzung noch so viele zusätzliche Requests und Parsing Aufwand zu betreiben.

- Im Controller ein Config-Objekt füllen und an die View übergeben:

$key1 = Tx_Extbase_Utility_Localization::translate($key1, $this->extensionName);
$key2 = Tx_Extbase_Utility_Localization::translate($key2, $this->extensionName);
$config = '{ config: { key1:'.$key1.', key2:'.$key2.'} }';
$this->view->assign('config', $config);

Template:

<script>{config}</script>

Die wohl mit Abstand schönste Lösung wäre ein ViewHelper, ungefähr in der Form:

<f:translateScript keys="{key1,key2}"></f:translateScript>

erzeugt würde sowas:

<script>
config = { 
	key1: "translKey1", 
	key2; "translKey2"  
}
</script>

Bevor ich nun einen solchen ViewHelper schreibe: Hat vielleicht jemand von euch bereits einen ähnlichen ViewHelper implementiert?
Oder hat jemand von euch eine noch elegantere Lösung?

tobla ·

Wer sich für den View Helper interessiert. So kann die Lösung aussehen:

locallang.js:

/**
 * global locallang object for JS localisation
 */
locallang = {
	translations: [],
	set: function(key, value) {
		this.translations[key] = value;
	},
	setMultiple: function(list) {
		for(el in list) {
			this.translations[list[el][key]] = list[el][value];
		}
	},
	translate: function(key) {
		return this.translations[key];
	}
}

Fluid Template:

{namespace myExt=Tx_MyExt_ViewHelpers}
<myExt:JsLl keys="{0:'category',1:'edit'}" />

ViewHelper:

/**
 * View helper for Js locallang
 */
class Tx_MyExt_ViewHelpers_JsLlViewHelper extends Tx_Fluid_Core_ViewHelper_AbstractViewHelper {

    /**
     * Renders a script tag with JS locallang
     *
     * @param string $key a single locallang key
     * @param array $keys a list of locallang keys
     * @return string script tag
     */
    public function render($keys) {
    	$extensionName = 'MyExt';
    	
    	$langKeys = '';
    	if($keys && is_array($keys)) {
	    	foreach($keys as $key) {
			$langKeys .= 'locallang.set(\''.$key.'\',\''.Tx_Extbase_Utility_Localization::translate($key, $extensionName).'\');'."\n";
		}
    	}    	 	
        return '<script>'."\n".$langKeys.'</script>';
    }
}

übersetzt wird im JS mit

locallang.translate('key');