-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdialog.html
127 lines (117 loc) · 4.44 KB
/
dialog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<?!= include('css.html'); ?>
<script>
const API_KEY = '<?!= apiKey ?>';
const GCP_PROJECT_NUMBER = <?!= projectNumber ?>;
let pickerApiLoaded = false;
function onApiLoad() {
gapi.load('picker', {
callback: function () {
pickerApiLoaded = true;
},
});
}
</script>
</head>
<body>
<div id="loader">
<div>
<div class="spinner"></div>
</div>
</div>
<div>
<table>
<tbody>
<tr id="en-us">
<td><span>Current en-US</span></td>
<td><button onclick="showPicker(this)">Select a file</button></td>
<td><span class="file-name"></span><input class="file-id" /></td>
</tr>
<tr id="prev-xml">
<td><span>Previous xml</span></td>
<td><button onclick="showPicker(this)">Select a file</button></td>
<td><span class="file-name"></span><input class="file-id" /></td>
</tr>
<tr id="lang">
<td><span>Language</span></td>
<td colspan="2"><input size="1" /><a href="https://cloud.google.com/translate/docs/languages" target="_blank">Language list</a></td>
</tr>
</tbody>
</table>
</div>
<div>
<button onclick="submit()">Submit</button>
<button onclick="google.script.host.close()">Cancel</button>
</div>
<div id="error"></div>
<script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script>
const loader = document.getElementById('loader');
function showPicker(el) {
loader.style.display = 'block'; // Show loader
google.script.run
.withFailureHandler(error => {
document.getElementById('error').innerHTML = 'Error: ' + error;
loader.style.display = 'none'; // Hide loader
})
.withSuccessHandler(token => {
loader.style.display = 'none'; // Hide loader
if (pickerApiLoaded && token) {
const picker = new google.picker.PickerBuilder()
// filter only xml files
.addView(
new google.picker.DocsView(google.picker.ViewId.DOCS)
.setMimeTypes('text/xml')
.setMode(google.picker.DocsViewMode.LIST)
)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.hideTitleBar()
.setOAuthToken(token)
.setDeveloperKey(API_KEY)
.setAppId(GCP_PROJECT_NUMBER)
.setOrigin(google.script.host.origin)
// minimum size is (566,350)
.setSize(600, 400)
.setCallback(data => {
const action = data[google.picker.Response.ACTION];
if (action === google.picker.Action.PICKED) {
const doc = data[google.picker.Response.DOCUMENTS][0];
const url = doc[google.picker.Document.URL],
title = doc[google.picker.Document.NAME],
id = doc[google.picker.Document.ID];
const em = el.closest('tr');
em.querySelector('.file-name').innerHTML = '<a href="' + url + '">' + title + '</a>';
em.querySelector('.file-id').value = id;
}
})
.build()
.setVisible(true);
} else {
document.getElementById('error').innerHTML = 'Unable to load the file picker.';
}
})
.getOAuthToken();
}
function submit() {
loader.style.display = 'block'; // Show loader
google.script.run
.withFailureHandler(error => {
document.getElementById('error').innerHTML = 'Error: ' + error;
loader.style.display = 'none'; // Hide loader
})
.withSuccessHandler(result => {
loader.style.display = 'none'; // Hide loader
google.script.host.close();
})
.parseXmlFiles([
document.getElementById('en-us').querySelector('.file-id').value,
document.getElementById('prev-xml').querySelector('.file-id').value,
document.getElementById('lang').querySelector('input').value
]);
}
</script>
</body>
</html>