Skip to content

Commit 7d90ea3

Browse files
RajeshGogoPriyankarp24
RajeshGogo
and
Priyankarp24
authored
Update translate samples (#296)
Co-authored-by: Priyankarp24 <[email protected]>
1 parent abd4ab3 commit 7d90ea3

File tree

4 files changed

+271
-255
lines changed

4 files changed

+271
-255
lines changed

‎docs/translate/sidebar.html

+162-146
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
1+
<!--
2+
Copyright 2018 Google LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
116
<!-- [START apps_script_docs_translate_quickstart] -->
217
<!DOCTYPE html>
318
<html>
4-
<head>
5-
<base target="_top">
6-
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
7-
<!-- The CSS package above applies Google styling to buttons and other elements. -->
19+
<head>
20+
<base target="_top">
21+
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
22+
<!-- The CSS package above applies Google styling to buttons and other elements. -->
823

9-
<style>
24+
<style>
1025
.branding-below {
1126
bottom: 56px;
1227
top: 0;
@@ -32,170 +47,171 @@
3247
.width-100 {
3348
width: 100%;
3449
}
35-
</style>
36-
</head>
37-
<body>
38-
<div class="sidebar branding-below">
39-
<form>
40-
<div class="block col-contain">
41-
<div class="col-one">
42-
<b>Selected text</b>
43-
<div>
44-
<input type="radio" name="origin" id="radio-origin-auto" value="" checked="checked">
45-
<label for="radio-origin-auto">Auto-detect</label>
46-
</div>
47-
<div>
48-
<input type="radio" name="origin" id="radio-origin-en" value="en">
49-
<label for="radio-origin-en">English</label>
50-
</div>
51-
<div>
52-
<input type="radio" name="origin" id="radio-origin-fr" value="fr">
53-
<label for="radio-origin-fr">French</label>
54-
</div>
55-
<div>
56-
<input type="radio" name="origin" id="radio-origin-de" value="de">
57-
<label for="radio-origin-de">German</label>
58-
</div>
59-
<div>
60-
<input type="radio" name="origin" id="radio-origin-ja" value="ja">
61-
<label for="radio-origin-ja">Japanese</label>
62-
</div>
63-
<div>
64-
<input type="radio" name="origin" id="radio-origin-es" value="es">
65-
<label for="radio-origin-es">Spanish</label>
66-
</div>
67-
</div>
68-
<div>
69-
<b>Translate into</b>
70-
<div class="radio-spacer">
71-
</div>
72-
<div>
73-
<input type="radio" name="dest" id="radio-dest-en" value="en">
74-
<label for="radio-dest-en">English</label>
75-
</div>
76-
<div>
77-
<input type="radio" name="dest" id="radio-dest-fr" value="fr">
78-
<label for="radio-dest-fr">French</label>
79-
</div>
80-
<div>
81-
<input type="radio" name="dest" id="radio-dest-de" value="de">
82-
<label for="radio-dest-de">German</label>
83-
</div>
84-
<div>
85-
<input type="radio" name="dest" id="radio-dest-ja" value="ja" checked="checked">
86-
<label for="radio-dest-ja">Japanese</label>
87-
</div>
88-
<div>
89-
<input type="radio" name="dest" id="radio-dest-es" value="es">
90-
<label for="radio-dest-es">Spanish</label>
91-
</div>
92-
</div>
50+
</style>
51+
<title></title>
52+
</head>
53+
<body>
54+
<div class="sidebar branding-below">
55+
<form>
56+
<div class="block col-contain">
57+
<div class="col-one">
58+
<b>Selected text</b>
59+
<div>
60+
<input type="radio" name="origin" id="radio-origin-auto" value="" checked="checked">
61+
<label for="radio-origin-auto">Auto-detect</label>
62+
</div>
63+
<div>
64+
<input type="radio" name="origin" id="radio-origin-en" value="en">
65+
<label for="radio-origin-en">English</label>
66+
</div>
67+
<div>
68+
<input type="radio" name="origin" id="radio-origin-fr" value="fr">
69+
<label for="radio-origin-fr">French</label>
70+
</div>
71+
<div>
72+
<input type="radio" name="origin" id="radio-origin-de" value="de">
73+
<label for="radio-origin-de">German</label>
74+
</div>
75+
<div>
76+
<input type="radio" name="origin" id="radio-origin-ja" value="ja">
77+
<label for="radio-origin-ja">Japanese</label>
78+
</div>
79+
<div>
80+
<input type="radio" name="origin" id="radio-origin-es" value="es">
81+
<label for="radio-origin-es">Spanish</label>
9382
</div>
94-
<div class="block form-group">
95-
<label for="translated-text"><b>Translation</b></label>
96-
<textarea class="width-100" id="translated-text" rows="10"></textarea>
83+
</div>
84+
<div>
85+
<b>Translate into</b>
86+
<div class="radio-spacer">
9787
</div>
98-
<div class="block">
99-
<input type="checkbox" id="save-prefs">
100-
<label for="save-prefs">Use these languages by default</label>
88+
<div>
89+
<input type="radio" name="dest" id="radio-dest-en" value="en">
90+
<label for="radio-dest-en">English</label>
10191
</div>
102-
<div class="block" id="button-bar">
103-
<button class="blue" id="run-translation">Translate</button>
104-
<button id="insert-text">Insert</button>
92+
<div>
93+
<input type="radio" name="dest" id="radio-dest-fr" value="fr">
94+
<label for="radio-dest-fr">French</label>
10595
</div>
106-
</form>
96+
<div>
97+
<input type="radio" name="dest" id="radio-dest-de" value="de">
98+
<label for="radio-dest-de">German</label>
99+
</div>
100+
<div>
101+
<input type="radio" name="dest" id="radio-dest-ja" value="ja" checked="checked">
102+
<label for="radio-dest-ja">Japanese</label>
103+
</div>
104+
<div>
105+
<input type="radio" name="dest" id="radio-dest-es" value="es">
106+
<label for="radio-dest-es">Spanish</label>
107+
</div>
108+
</div>
107109
</div>
108-
109-
<div class="sidebar bottom">
110-
<img alt="Add-on logo" class="logo" src="https://www.gstatic.com/images/branding/product/1x/translate_48dp.png" width="27" height="27">
111-
<span class="gray branding-text">Translate sample by Google</span>
110+
<div class="block form-group">
111+
<label for="translated-text"><b>Translation</b></label>
112+
<textarea class="width-100" id="translated-text" rows="10"></textarea>
112113
</div>
114+
<div class="block">
115+
<input type="checkbox" id="save-prefs">
116+
<label for="save-prefs">Use these languages by default</label>
117+
</div>
118+
<div class="block" id="button-bar">
119+
<button class="blue" id="run-translation">Translate</button>
120+
<button id="insert-text">Insert</button>
121+
</div>
122+
</form>
123+
</div>
124+
125+
<div class="sidebar bottom">
126+
<img alt="Add-on logo" class="logo" src="https://www.gstatic.com/images/branding/product/1x/translate_48dp.png" width="27" height="27">
127+
<span class="gray branding-text">Translate sample by Google</span>
128+
</div>
113129

114-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
115-
<script>
116-
/**
117-
* On document load, assign click handlers to each button and try to load the
118-
* user's origin and destination language preferences if previously set.
119-
*/
120-
$(function() {
121-
$('#run-translation').click(runTranslation);
122-
$('#insert-text').click(insertText);
123-
google.script.run.withSuccessHandler(loadPreferences)
130+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
131+
<script>
132+
/**
133+
* On document load, assign click handlers to each button and try to load the
134+
* user's origin and destination language preferences if previously set.
135+
*/
136+
$(function() {
137+
$('#run-translation').click(runTranslation);
138+
$('#insert-text').click(insertText);
139+
google.script.run.withSuccessHandler(loadPreferences)
124140
.withFailureHandler(showError).getPreferences();
125-
});
141+
});
126142

127-
/**
128-
* Callback function that populates the origin and destination selection
129-
* boxes with user preferences from the server.
130-
*
131-
* @param {Object} languagePrefs The saved origin and destination languages.
132-
*/
133-
function loadPreferences(languagePrefs) {
134-
$('input:radio[name="origin"]')
143+
/**
144+
* Callback function that populates the origin and destination selection
145+
* boxes with user preferences from the server.
146+
*
147+
* @param {Object} languagePrefs The saved origin and destination languages.
148+
*/
149+
function loadPreferences(languagePrefs) {
150+
$('input:radio[name="origin"]')
135151
.filter('[value=' + languagePrefs.originLang + ']')
136152
.attr('checked', true);
137-
$('input:radio[name="dest"]')
153+
$('input:radio[name="dest"]')
138154
.filter('[value=' + languagePrefs.destLang + ']')
139155
.attr('checked', true);
140-
}
156+
}
141157

142-
/**
143-
* Runs a server-side function to translate the user-selected text and update
144-
* the sidebar UI with the resulting translation.
145-
*/
146-
function runTranslation() {
147-
this.disabled = true;
148-
$('#error').remove();
149-
var origin = $('input[name=origin]:checked').val();
150-
var dest = $('input[name=dest]:checked').val();
151-
var savePrefs = $('#save-prefs').is(':checked');
152-
google.script.run
158+
/**
159+
* Runs a server-side function to translate the user-selected text and update
160+
* the sidebar UI with the resulting translation.
161+
*/
162+
function runTranslation() {
163+
this.disabled = true;
164+
$('#error').remove();
165+
const origin = $('input[name=origin]:checked').val();
166+
const dest = $('input[name=dest]:checked').val();
167+
const savePrefs = $('#save-prefs').is(':checked');
168+
google.script.run
153169
.withSuccessHandler(
154-
function(textAndTranslation, element) {
155-
$('#translated-text').val(textAndTranslation.translation);
156-
element.disabled = false;
157-
})
170+
function(textAndTranslation, element) {
171+
$('#translated-text').val(textAndTranslation.translation);
172+
element.disabled = false;
173+
})
158174
.withFailureHandler(
159-
function(msg, element) {
160-
showError(msg, $('#button-bar'));
161-
element.disabled = false;
162-
})
175+
function(msg, element) {
176+
showError(msg, $('#button-bar'));
177+
element.disabled = false;
178+
})
163179
.withUserObject(this)
164180
.getTextAndTranslation(origin, dest, savePrefs);
165-
}
181+
}
166182

167-
/**
168-
* Runs a server-side function to insert the translated text into the document
169-
* at the user's cursor or selection.
170-
*/
171-
function insertText() {
172-
this.disabled = true;
173-
$('#error').remove();
174-
google.script.run
183+
/**
184+
* Runs a server-side function to insert the translated text into the document
185+
* at the user's cursor or selection.
186+
*/
187+
function insertText() {
188+
this.disabled = true;
189+
$('#error').remove();
190+
google.script.run
175191
.withSuccessHandler(
176-
function(returnSuccess, element) {
177-
element.disabled = false;
178-
})
192+
function(returnSuccess, element) {
193+
element.disabled = false;
194+
})
179195
.withFailureHandler(
180-
function(msg, element) {
181-
showError(msg, $('#button-bar'));
182-
element.disabled = false;
183-
})
196+
function(msg, element) {
197+
showError(msg, $('#button-bar'));
198+
element.disabled = false;
199+
})
184200
.withUserObject(this)
185201
.insertText($('#translated-text').val());
186-
}
202+
}
187203

188-
/**
189-
* Inserts a div that contains an error message after a given element.
190-
*
191-
* @param {string} msg The error message to display.
192-
* @param {DOMElement} element The element after which to display the error.
193-
*/
194-
function showError(msg, element) {
195-
var div = $('<div id="error" class="error">' + msg + '</div>');
196-
$(element).after(div);
197-
}
198-
</script>
199-
</body>
204+
/**
205+
* Inserts a div that contains an error message after a given element.
206+
*
207+
* @param {string} msg The error message to display.
208+
* @param {DOMElement} element The element after which to display the error.
209+
*/
210+
function showError(msg, element) {
211+
const div = $('<div id="error" class="error">' + msg + '</div>');
212+
$(element).after(div);
213+
}
214+
</script>
215+
</body>
200216
</html>
201217
<!-- [END apps_script_docs_translate_quickstart] -->

0 commit comments

Comments
 (0)