Skip to content

Commit f6007ee

Browse files
llwtllwt
committed
add suport for multiple attribute targets in translate-child
This adds the ability to specify multiple attributes to set the content for. It also removes the mutual exclusivity of `translate-child-into` and `translate-child-key-into`.
1 parent 7ffec53 commit f6007ee

File tree

7 files changed

+148
-152
lines changed

7 files changed

+148
-152
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"main": [
44
"dist/angular-devtrw-translate.js"
55
],
6-
"version": "0.1.6",
6+
"version": "0.1.7",
77
"description": "Provides translate-base and translate-child directives for angular-translate",
88
"authors": [
99
"Steven Nance <steven@devtrw.com>"

‎demo/index.html‎

Lines changed: 111 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -4,148 +4,126 @@
44
<meta charset="UTF-8">
55
<title>Angular DevTRW Translations Demo</title>
66
<style>
7+
8+
html {
9+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10+
}
11+
712
.page {
813
border: 1px solid #eee;
9-
width: 300px;
1014
padding: 15px;
1115
}
1216

17+
.page:after {
18+
clear: both;
19+
content: ' ';
20+
display: block;
21+
font-size: 0;
22+
height: 0;
23+
visibility: hidden;
24+
}
25+
1326
.label {
1427
display: block;
1528
}
1629

1730
input {
1831
width: 100%;
1932
}
33+
34+
.example {
35+
width: 300px;
36+
border: 1px solid #ddd;
37+
float: left;
38+
margin-bottom: 10px;
39+
margin-left: 10px;
40+
min-height: 300px;
41+
padding: 10px;
42+
}
43+
44+
.example:first-child {
45+
margin-left: 0;
46+
}
2047
</style>
2148
</head>
2249
<body translate-base="dtrw.translate">
2350
<h1>Angular DevTRW Translations Demo</h1>
2451

2552
<h2>Example Usage</h2>
2653

27-
<h3>Template HTML</h3>
28-
<pre>
29-
&lt;body translate-base="dtrw.translate"&gt;
30-
&lt;div translate-base="states.login"
31-
class="page"
32-
ng-init="lastLoginUsername = 'someUserName'"&gt;
33-
&lt;div translate-base="LAST_LOGIN"&gt;
34-
&lt;p translate-child="DETAILS" translate-values="{username: lastLoginUsername}"&gt;&lt;/p&gt;
35-
&lt;/div&gt;
36-
&lt;div translate-base="USERNAME_FORM"&gt;
37-
&lt;h4 translate-child="TITLE"&gt;&lt;/h4&gt;
38-
39-
&lt;form&gt;
40-
&lt;div class="form-group" translate-base="USERNAME"&gt;
41-
&lt;label translate-child="LABEL" for="username-input"&gt;&lt;/label&gt;
42-
&lt;input type="text"
43-
id="username-input"
44-
translate-child="PLACEHOLDER"
45-
translate-values="{lastLoginUser: lastLoginUsername}"
46-
translate-child-into="placeholder"&gt;
47-
&lt;/div&gt;
48-
&lt;/form&gt;
49-
&lt;/div&gt;
50-
&lt;div translate-base="PASSWORD_FORM"&gt;
51-
&lt;h4 translate-child="TITLE"&gt;&lt;/h4&gt;
52-
53-
&lt;form&gt;
54-
&lt;div class="form-group" translate-base="PASSWORD"&gt;
55-
&lt;label translate-child="LABEL" for="password-input"&gt;&lt;/label&gt;
56-
&lt;input type="text" id="password-input"
57-
translate-child="PLACEHOLDER"
58-
translate-child-into="placeholder"&gt;
59-
&lt;/div&gt;
60-
&lt;div translate-base="dtrw.translate.forms.ACTIONS"
61-
translate-exclude-parent-base="true"&gt;
62-
&lt;button type="button" translate-child="SUBMIT.BUTTON"&gt;&lt;/button&gt;
63-
&lt;/div&gt;
64-
&lt;/form&gt;
65-
&lt;/div&gt;
66-
&lt;/div&gt;
67-
&lt;/body&gt;
68-
</pre>
69-
<h3>Translations</h3>
70-
<pre ng-non-bindable>
71-
angular.module('dtrw.translate').config(function ($translateProvider) {
72-
$translateProvider.preferredLanguage('en');
73-
$translateProvider.translations('en', {
74-
dtrw: {
75-
translate: {
76-
forms: {
77-
ACTIONS: {
78-
SUBMIT: {
79-
BUTTON: 'Submit'
80-
}
81-
}
82-
},
83-
states: {
84-
login: {
85-
LAST_LOGIN: {
86-
DETAILS: 'Last logging in as &lt;b&gt;{{ username }}&lt;/b&gt;'
87-
},
88-
USERNAME_FORM: {
89-
TITLE: 'Username Form',
90-
USERNAME: {
91-
LABEL: 'Username',
92-
PLACEHOLDER: '{{ lastLoginUser }}'
93-
}
94-
},
95-
PASSWORD_FORM: {
96-
TITLE: 'Password Form',
97-
PASSWORD: {
98-
LABEL: 'Password',
99-
PLACEHOLDER: 'Enter Your Password'
100-
}
101-
}
102-
}
103-
}
104-
}
105-
}
106-
});
107-
})
108-
</pre>
109-
54+
<hr>
55+
<p>View the source of this page to see how this is implemented.</p>
56+
<hr>
11057

111-
<h3>Rendered</h3>
58+
<h3>Examples</h3>
11259

113-
<div translate-base="states.login"
60+
<div translate-base="examples"
11461
class="page"
11562
ng-init="lastLoginUsername = 'someUserName'">
116-
<div translate-base="LAST_LOGIN">
117-
<p translate-child="DETAILS" translate-values="{username: lastLoginUsername}"></p>
63+
<div class="example">
64+
<h4>translate-values</h4>
65+
<hr>
66+
<div translate-base="LAST_LOGIN">
67+
<p translate-child="DETAILS" translate-values="{username: lastLoginUsername}"></p>
68+
</div>
11869
</div>
119-
<div translate-base="USERNAME_FORM">
120-
<h4 translate-child="TITLE"></h4>
121-
122-
<form>
123-
<div class="form-group" translate-base="USERNAME">
124-
<label translate-child="LABEL" for="username-input"></label>
125-
<input type="text"
126-
id="username-input"
127-
translate-child="PLACEHOLDER"
128-
translate-values="{lastLoginUser: lastLoginUsername}"
129-
translate-child-into="placeholder">
130-
</div>
131-
</form>
70+
71+
<div class="example">
72+
<h4>translate-child-into</h4>
73+
<hr>
74+
<div translate-base="PASSWORD_FORM">
75+
<h4 translate-child="TITLE"></h4>
76+
77+
<form>
78+
<div class="form-group" translate-base="PASSWORD">
79+
<label translate-child="LABEL" for="password-input"></label>
80+
<input type="text" id="password-input"
81+
translate-child="PLACEHOLDER"
82+
translate-child-into="placeholder">
83+
</div>
84+
</form>
85+
</div>
13286
</div>
133-
<div translate-base="PASSWORD_FORM">
134-
<h4 translate-child="TITLE"></h4>
135-
136-
<form>
137-
<div class="form-group" translate-base="PASSWORD">
138-
<label translate-child="LABEL" for="password-input"></label>
139-
<input type="text" id="password-input"
140-
translate-child="PLACEHOLDER"
141-
translate-child-into="placeholder">
142-
</div>
87+
88+
<div class="example" translate-base="GOOGLE_LINK">
89+
<h4>translate-child-into <em>with multiple target attributes</em></h4>
90+
<hr>
91+
<a href="https://google.com"
92+
translate-child="TEXT"
93+
translate-child-into="title,arial-label"
94+
translate-child-key-into="translate"></a>
95+
</div>
96+
97+
<div class="example">
98+
<h4>translate-values <em>and</em> translate-child-into</h4>
99+
<hr>
100+
<div translate-base="USERNAME_FORM">
101+
<h4 translate-child="TITLE"></h4>
102+
103+
<form>
104+
<div class="form-group" translate-base="USERNAME">
105+
<label translate-child="LABEL" for="username-input"></label>
106+
<input type="text"
107+
id="username-input"
108+
translate-child="PLACEHOLDER"
109+
translate-values="{lastLoginUser: lastLoginUsername}"
110+
translate-child-into="placeholder">
111+
</div>
112+
</form>
113+
</div>
114+
</div>
115+
116+
<div class="example">
117+
<h4>translate-exclude-parent-base</h4>
118+
<hr>
119+
<div translate-base="PASSWORD_FORM">
143120
<div translate-base="dtrw.translate.forms.ACTIONS"
144121
translate-exclude-parent-base="true">
145122
<button type="button" translate-child="SUBMIT.BUTTON"></button>
146123
</div>
147-
</form>
124+
</div>
148125
</div>
126+
149127
</div>
150128

151129
<script src="../node_modules/angular/angular.js"></script>
@@ -156,34 +134,36 @@ <h4 translate-child="TITLE"></h4>
156134
<script>
157135
angular.module('dtrw.translate').config(function ($translateProvider) {
158136
$translateProvider.preferredLanguage('en');
137+
$translateProvider.useSanitizeValueStrategy('escaped');
159138
$translateProvider.translations('en', {
160139
dtrw: {
161140
translate: {
162-
forms: {
141+
forms: {
163142
ACTIONS: {
164143
SUBMIT: {
165144
BUTTON: 'Submit'
166145
}
167146
}
168147
},
169-
states: {
170-
login: {
171-
LAST_LOGIN: {
172-
DETAILS: 'Last logging in as <b>{{ username }}</b>'
173-
},
174-
USERNAME_FORM: {
175-
TITLE: 'Username Form',
176-
USERNAME: {
177-
LABEL: 'Username',
178-
PLACEHOLDER: '{{ lastLoginUser }}'
179-
}
180-
},
181-
PASSWORD_FORM: {
182-
TITLE: 'Password Form',
183-
PASSWORD: {
184-
LABEL: 'Password',
185-
PLACEHOLDER: 'Enter Your Password'
186-
}
148+
examples: {
149+
GOOGLE_LINK: {
150+
TEXT: 'Google Search'
151+
},
152+
LAST_LOGIN: {
153+
DETAILS: 'Last logging in as <b>{{ username }}</b>'
154+
},
155+
USERNAME_FORM: {
156+
TITLE: 'Username Form',
157+
USERNAME: {
158+
LABEL: 'Username',
159+
PLACEHOLDER: '{{ lastLoginUser }}'
160+
}
161+
},
162+
PASSWORD_FORM: {
163+
TITLE: 'Password Form',
164+
PASSWORD: {
165+
LABEL: 'Password',
166+
PLACEHOLDER: 'Enter Your Password'
187167
}
188168
}
189169
}

0 commit comments

Comments
 (0)