Skip to content

WD ATTR Translate Tool

Jump to bottom
wdonadelli edited this page Feb 21, 2023 · 3 revisions

WD ATTR Translate Tool

The reference for how the attribute works is in the following tools:

The attribute's destination is indifferent and can be applied to any element.

The attribute has the following arguments:

Name Type Mandatory Description
path String Yes Directory containing the files with the translation configuration.
method String No Request method (POST/GET), see send.
main String No Alternative file name in case the defined ones are not found.

For dynamic assignments, see:

JSON File Structure

The specified directory must contain the configuration files for the translation to be applied. The file name must be the same as the language followed by the .json extension, all in lower case.

For example, having the result en-US as the language, initially the script will try to locate the file with the complete description of the language, that is, en-us.json. If it does not find it, it will try to locate the file corresponding to the language base, ie en.json. If it is not found and if the alternative JSON file is informed, an attempt will be made to locate the alternative file located in the same directory. If none of the files are found, nothing is done.

The language definition will be given by the lang HTML attribute. The search for information will start with the element that contains the data-wd-translate attribute and will continue through the parent elements until it finds an assigned value. If not found, the value informed by the browser will be used.

The structure of the JSON file must be composed of an array of objects whose keys refer to the attributes to be updated by the respective content. There are two special keys, $ and $$, which must contain the CSS selector that represents the element or elements that will receive the values of the other keys, as shown in the example below:

JSON File

[
	{
		"$$": ".text",
		"textContent": "Textual contents of elements that contain the \"text\" class attribute.",
		"title": "Value of the \"title\" attribute of elements that contain the \"text\" class attribute."
	},
	{
		"$": "#head",
		"textContent": "Textual content of elements containing the identified \"head\"."
	}
]

HTML

<body data-wd-translate="path{files/lang}main{default.json}">

	<h1 id="head">Header</h1>

	<p class=".text">Default content.</p>

</body>

WD Web Libraries

WD JavaScript Tools

WD Attributes Tools

WD Style Sheet

WD CSS Style Properties

Clone this wiki locally