Skip to content

Commit 5dc7c52

Browse files
lewisbirkslewisbirks
authored
Add details on how to access localisation from JS (#423)
1 parent e0fffd6 commit 5dc7c52

File tree

12 files changed

+99
-31
lines changed

12 files changed

+99
-31
lines changed

‎src/main/resources/io/jenkins/plugins/designlibrary/Localization/index.jelly‎

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,34 +24,11 @@ THE SOFTWARE.
2424
<?jelly escape-by-default='true'?>
2525
<j:jelly xmlns:j="jelly:core" xmlns:f="/lib/form" xmlns:s="/lib/samples">
2626
<s:layout>
27-
<p class="jdl-paragraph jenkins-!-margin-bottom-3">${%leadParagraph}</p>
28-
<s:section title="${%titlejava}" description="${%howtojava}">
29-
<s:group>
30-
<s:preview fullWidth="true">
31-
<f:entry>
32-
${it.message}<br/>
33-
${it.greet}
34-
</f:entry>
35-
</s:preview>
36-
<s:code-panes>
37-
<s:code-pane title="Localize.java">
38-
<s:code language="java" file="Localize.java"/>
39-
</s:code-pane>
40-
<s:code-pane title="Messages.properties">
41-
<s:code file="Messages.properties"/>
42-
</s:code-pane>
43-
<s:code-pane title="Messages_de.properties">
44-
<s:code file="Messages_de.properties"/>
45-
</s:code-pane>
46-
</s:code-panes>
47-
</s:group>
48-
</s:section>
4927
<s:section title="${%titlejelly}" description="${%howtojelly}">
5028
<s:group>
5129
<s:preview fullWidth="true">
5230
<f:entry>
53-
${%How to localize texts in Jelly}<br/>
54-
${%longtext}<br/>
31+
${%longtext}<br/><br/>
5532
${%hello('World')}
5633
</f:entry>
5734
</s:preview>
@@ -68,5 +45,50 @@ THE SOFTWARE.
6845
</s:code-panes>
6946
</s:group>
7047
</s:section>
48+
<s:section title="${%titlejava}" description="${%howtojava}">
49+
<s:code-panes>
50+
<s:code-pane title="Localize.java">
51+
<s:code language="java" file="Localize.java"/>
52+
</s:code-pane>
53+
<s:code-pane title="Messages.properties">
54+
<s:code file="Messages.properties"/>
55+
</s:code-pane>
56+
<s:code-pane title="Messages_de.properties">
57+
<s:code file="Messages_de.properties"/>
58+
</s:code-pane>
59+
</s:code-panes>
60+
</s:section>
61+
<s:section title="${%titlejsJelly}" description="${%howtojsJelly}">
62+
<s:code-panes>
63+
<s:code-pane title="localize.jelly">
64+
<s:code file="localize-js.jelly"/>
65+
</s:code-pane>
66+
<s:code-pane title="localize.js">
67+
<s:code language="js" file="localize-jelly.js"/>
68+
</s:code-pane>
69+
<s:code-pane title="localize.properties">
70+
<s:code file="localize.properties"/>
71+
</s:code-pane>
72+
<s:code-pane title="localize_de.properties">
73+
<s:code file="localize_de.properties"/>
74+
</s:code-pane>
75+
</s:code-panes>
76+
</s:section>
77+
<s:section title="${%titlejsHTTP}" description="${%howtojsHTTP}">
78+
<s:code-panes>
79+
<s:code-pane title="localize.js">
80+
<s:code language="js" file="localize-http.js"/>
81+
</s:code-pane>
82+
<s:code-pane title="localize.properties">
83+
<s:code file="localize.properties"/>
84+
</s:code-pane>
85+
<s:code-pane title="localize_de.properties">
86+
<s:code file="localize_de.properties"/>
87+
</s:code-pane>
88+
</s:code-panes>
89+
</s:section>
90+
<s:section>
91+
<p class="jdl-paragraph">${%moreInfo}</p>
92+
</s:section>
7193
</s:layout>
7294
</j:jelly>

‎src/main/resources/io/jenkins/plugins/designlibrary/Localization/index.properties‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,12 @@ howtojava=Create a file <em>Messages.properties</em> in the package folder. Afte
33
hello=Hello {0}
44
titlejelly=Localize text in Jelly
55
howtojelly=Use <em>$&#123;%Text}</em> to create texts that can be localized. Create a properties files for content longer than a few words.
6-
longtext=A longer text that should not appear inline in the jelly file.
7-
leadParagraph=A detailed explanation how to localize texts in Java and Jelly files can be found in the jenkins.io developer guide <a href="https://www.jenkins.io/doc/developer/internationalization/" target="_blank">Internationalization and Localization</a>.
6+
longtext=A longer text that should not appear inline in the Jelly file.
7+
8+
titlejsJelly=Localize text in JavaScript via Jelly
9+
howtojsJelly=Attach the localizations in attributes of template HTML elements via Jelly which can then be retrieved via the document.
10+
titlejsHTTP=Localize text in JavaScript via HTTP
11+
howtojsHTTP=Load them over HTTP via <code>$JENKINS_URL/i18n/resourceBundle?baseName=package.path.to.property.file</code> which retrieves the property file in the users' locale. \
12+
This returns a JSON object with the localized texts.
13+
14+
moreInfo=A detailed explanation on how to localize text in Java and Jelly files can be found in the developer guide <a href="https://www.jenkins.io/doc/developer/internationalization/" target="_blank">Internationalization and Localization</a>.

‎src/main/resources/io/jenkins/plugins/designlibrary/Messages.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
Localization.description=Ensures texts can be displayed in the user''s language.
2-
Localization.message=How to localize texts in Java
2+
Localization.message=How to localize text in Java
33
Localization.greet=Hello {0}

‎src/main/resources/scss/components/_component-group.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
border-bottom-right-radius: 0;
66
}
77

8+
.jdl-component-code__tab-bar,
89
.jdl-component-code {
910
margin-top: 0;
1011
border-top-left-radius: 0;

‎src/main/resources/scss/components/_source-block.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,13 @@ $jdl-component-code-controls-spacing: 0.75rem;
4545

4646
&__tab-bar {
4747
background: var(--card-background);
48+
border-top: var(--jenkins-border);
4849
border-left: var(--jenkins-border);
4950
border-right: var(--jenkins-border);
51+
border-top-left-radius: 0.66rem;
52+
border-top-right-radius: 0.66rem;
5053
display: flex;
54+
flex-wrap: wrap;
5155
gap: 0.9rem;
5256
padding: 1em;
5357

@@ -114,6 +118,16 @@ $jdl-component-code-controls-spacing: 0.75rem;
114118
}
115119
}
116120

121+
.jdl-tab-panes {
122+
.jdl-component-code {
123+
margin-top: 0;
124+
border-top-left-radius: 0;
125+
border-top-right-radius: 0;
126+
margin-bottom: 0;
127+
border-top: none;
128+
}
129+
}
130+
117131
.jdl-tab-pane__text {
118132
padding: 0 1em 1em 1em;
119133
border-left: var(--jenkins-border);

‎src/main/webapp/Localization/Messages.properties‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
Localize.message=How to localize texts in Java
1+
Localize.message=How to localize text in Java
22
Localize.greet=Hello {0}

‎src/main/webapp/Localization/localize-http.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const response = await fetch(
2+
`${JENKINS_URL}/i18n/resourceBundle?baseName=io.jenkins.plugins.designlibrary.localize`,
3+
);
4+
const json = await response.json();
5+
const i18n = json.data;
6+
7+
const longText = i18n.longtext;
8+
const hello = i18n.hello;
9+
10+
console.log(longText);
11+
console.log(hello.replace("{0}", "World!"));

‎src/main/webapp/Localization/localize-jelly.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const i18n = document.getElementById("plugin-i18n");
2+
3+
const longText = i18n.dataset.longtext;
4+
const hello = i18n.dataset.hello;
5+
6+
console.log(longText);
7+
console.log(hello.replace("{0}", "World!"));

‎src/main/webapp/Localization/localize-js.jelly‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?jelly escape-by-default='true'?>
2+
<j:jelly xmlns:j="jelly:core">
3+
<template
4+
id="plugin-i18n"
5+
data-longtext="${%longtext}"
6+
data-hello="${%hello}"
7+
/>
8+
</j:jelly>

‎src/main/webapp/Localization/localize.jelly‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<?jelly escape-by-default='true'?>
22
<j:jelly xmlns:j="jelly:core">
3-
${%How to localize texts in Jelly}
43
${%longtext}
54
${%hello('World')}
65
</j:jelly>

0 commit comments

Comments
 (0)