├── Images
└── Close.png
├── readme-images
├── new-mail.PNG
├── addin-list.PNG
├── text-selected.PNG
├── browse-manifest.PNG
├── outlook-on-web.PNG
├── text-translated.PNG
├── o365-manage-addins.PNG
└── outlook-manage-addins.PNG
├── AppCompose
├── Home
│ ├── Home.css
│ ├── Home.html
│ └── Home.js
├── App.css
├── FunctionFile
│ ├── Home.html
│ └── Translator.js
├── TranslateHelper.js
└── App.js
├── Outlook-Add-in-Commands-Translator.yml
├── LICENSE
├── TranslateAppManifest.xml
├── Content
└── Office.css
└── README.md
/Images/Close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Outlook-Add-in-Commands-Translator/HEAD/Images/Close.png
--------------------------------------------------------------------------------
/readme-images/new-mail.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Outlook-Add-in-Commands-Translator/HEAD/readme-images/new-mail.PNG
--------------------------------------------------------------------------------
/readme-images/addin-list.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Outlook-Add-in-Commands-Translator/HEAD/readme-images/addin-list.PNG
--------------------------------------------------------------------------------
/readme-images/text-selected.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Outlook-Add-in-Commands-Translator/HEAD/readme-images/text-selected.PNG
--------------------------------------------------------------------------------
/readme-images/browse-manifest.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Outlook-Add-in-Commands-Translator/HEAD/readme-images/browse-manifest.PNG
--------------------------------------------------------------------------------
/readme-images/outlook-on-web.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Outlook-Add-in-Commands-Translator/HEAD/readme-images/outlook-on-web.PNG
--------------------------------------------------------------------------------
/readme-images/text-translated.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Outlook-Add-in-Commands-Translator/HEAD/readme-images/text-translated.PNG
--------------------------------------------------------------------------------
/readme-images/o365-manage-addins.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Outlook-Add-in-Commands-Translator/HEAD/readme-images/o365-manage-addins.PNG
--------------------------------------------------------------------------------
/readme-images/outlook-manage-addins.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OfficeDev/Outlook-Add-in-Commands-Translator/HEAD/readme-images/outlook-manage-addins.PNG
--------------------------------------------------------------------------------
/AppCompose/Home/Home.css:
--------------------------------------------------------------------------------
1 | /* Page-specific styling */
2 |
3 | /* Formatting for the sample buttons */
4 |
5 | #set-subject {
6 | width: 100px;
7 | margin-right: 5px;
8 | }
9 |
10 | #get-subject {
11 | width: 100px;
12 | }
13 |
14 | #add-to-recipients {
15 | width: 205px;
16 | }
17 |
--------------------------------------------------------------------------------
/Outlook-Add-in-Commands-Translator.yml:
--------------------------------------------------------------------------------
1 | ### YamlMime:Sample
2 | sample:
3 | - name: Outlook-Add-in-Commands-Translator
4 | path: ''
5 | description: The Translator add-in uses the commands model for Outlook add-ins to add a button to the ribbon in the new message form.
6 | readme: ''
7 | generateZip: False
8 | isLive: True
9 | technologies:
10 | - Add-ins
11 | azureDeploy: ''
12 | author: ''
13 | platforms: []
14 | languages:
15 | - JavaScript
16 | extensions:
17 | type: samples
18 | products:
19 | - Outlook
20 | scenarios: []
21 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Microsoft
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/AppCompose/App.css:
--------------------------------------------------------------------------------
1 | /* Common app styling */
2 |
3 | #content-header {
4 | background: #2a8dd4;
5 | color: #fff;
6 | position: absolute;
7 | top: 0;
8 | left: 0;
9 | width: 100%;
10 | height: 80px; /* Fixed header height */
11 | overflow: hidden; /* Disable scrollbars for header */
12 | }
13 |
14 | #content-main {
15 | background: #fff;
16 | position: fixed;
17 | top: 80px; /* Same value as #content-header's height */
18 | left: 0;
19 | right: 0;
20 | bottom: 0;
21 | overflow: auto; /* Enable scrollbars within main content section */
22 | }
23 |
24 | .padding {
25 | padding: 15px;
26 | }
27 |
28 | #notification-message {
29 | background-color: #818285;
30 | color: #fff;
31 | position: absolute;
32 | width: 100%;
33 | min-height: 80px;
34 | right: 0;
35 | z-index: 100;
36 | bottom: 0;
37 | display: none; /* Hidden until invoked */
38 | }
39 |
40 | #notification-message #notification-message-header {
41 | font-size: medium;
42 | margin-bottom: 10px;
43 | }
44 |
45 | #notification-message #notification-message-close {
46 | background-image: url("../Images/Close.png");
47 | background-repeat: no-repeat;
48 | width: 24px;
49 | height: 24px;
50 | position: absolute;
51 | right: 5px;
52 | top: 5px;
53 | cursor: pointer;
54 | }
55 |
--------------------------------------------------------------------------------
/AppCompose/FunctionFile/Home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/AppCompose/TranslateHelper.js:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file.
2 |
3 | // Helper function to generate an API request
4 | // URL to the Yandex translator service
5 | function generateRequestUrl(text) {
6 | // Split the selected data into individual lines
7 | var tempLines = text.split(/\r\n|\r|\n/g);
8 | var lines = [];
9 |
10 | // Add non-empty lines to the data to translate
11 | for (var i = 0; i < tempLines.length; i++)
12 | if (tempLines[i] != "")
13 | lines.push(tempLines[i]);
14 |
15 | // Add each line as a 'text' query parameter
16 | var encodedText = "";
17 | for (var i = 0; i < (lines.length) ; i++) {
18 | encodedText += "&text=" + encodeURI(lines[i].replace(/ /g, "+"));
19 | }
20 |
21 | // API Key for the yandex service
22 | // Get one at https://translate.yandex.com/developers
23 | var apiKey = "YOUR API KEY HERE";
24 |
25 | return "https://translate.yandex.net/api/v1.5/tr.json/translate?key=" + apiKey + "&lang=en-ru" + encodedText;
26 | }
27 |
28 | // MIT License:
29 |
30 | // Permission is hereby granted, free of charge, to any person obtaining
31 | // a copy of this software and associated documentation files (the
32 | // ""Software""), to deal in the Software without restriction, including
33 | // without limitation the rights to use, copy, modify, merge, publish,
34 | // distribute, sublicense, and/or sell copies of the Software, and to
35 | // permit persons to whom the Software is furnished to do so, subject to
36 | // the following conditions:
37 |
38 | // The above copyright notice and this permission notice shall be
39 | // included in all copies or substantial portions of the Software.
40 |
41 | // THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
42 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
43 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
44 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
45 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
46 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
47 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/AppCompose/App.js:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file.
2 |
3 | /* Common app functionality */
4 |
5 | var app = (function () {
6 | "use strict";
7 |
8 | var app = {};
9 |
10 | // Common initialization function (to be called from each page)
11 | app.initialize = function () {
12 | $('body').append(
13 | '
' +
14 | '
' +
15 | '' +
16 | '' +
17 | '' +
18 | '
' +
19 | '
');
20 |
21 | $('#notification-message-close').click(function () {
22 | $('#notification-message').hide();
23 | });
24 |
25 |
26 | // After initialization, expose a common notification function
27 | app.showNotification = function (header, text) {
28 | $('#notification-message-header').text(header);
29 | $('#notification-message-body').text(text);
30 | $('#notification-message').slideDown('fast');
31 | };
32 | };
33 |
34 | return app;
35 | })();
36 |
37 | // MIT License:
38 |
39 | // Permission is hereby granted, free of charge, to any person obtaining
40 | // a copy of this software and associated documentation files (the
41 | // ""Software""), to deal in the Software without restriction, including
42 | // without limitation the rights to use, copy, modify, merge, publish,
43 | // distribute, sublicense, and/or sell copies of the Software, and to
44 | // permit persons to whom the Software is furnished to do so, subject to
45 | // the following conditions:
46 |
47 | // The above copyright notice and this permission notice shall be
48 | // included in all copies or substantial portions of the Software.
49 |
50 | // THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
51 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
52 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
53 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
54 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
55 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
56 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/AppCompose/Home/Home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/AppCompose/Home/Home.js:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file.
2 |
3 | ///
4 |
5 | (function () {
6 | 'use strict';
7 |
8 | // The initialize function must be run each time a new page is loaded
9 | Office.initialize = function (reason) {
10 | $(document).ready(function () {
11 | app.initialize();
12 |
13 | $('#translate').click(translateSelection);
14 | });
15 | };
16 |
17 | function translateSelection() {
18 | Office.context.mailbox.item.getSelectedDataAsync("text", function (ar) {
19 |
20 | // Make sure there is a selection
21 | if (ar === undefined || ar === null ||
22 | ar.value === undefined || ar.value === null ||
23 | ar.value.data === undefined || ar.value.data === null) {
24 | // Display an error message
25 | app.showNotification("No text selected!", "Please select text to translate and try again.");
26 | return;
27 | }
28 |
29 | // Generate the API call URL
30 | var requestUrl = generateRequestUrl(ar.value.data);
31 |
32 | $.ajax({
33 | url: requestUrl,
34 | jsonp: "callback",
35 | dataType: "jsonp",
36 | success: function (response) {
37 | var translatedText = response.text;
38 | var textToWrite = "";
39 |
40 | // The response is an array of one or more translated lines.
41 | // Append them together with tags.
42 | for (var i = 0; i < translatedText.length; i++)
43 | textToWrite += translatedText[i] + "
";
44 |
45 | // Replace the selected text with the translated version
46 | Office.context.mailbox.item.setSelectedDataAsync(textToWrite, { coercionType: "html" }, function(asyncResult){
47 | app.showNotification("Success", "Translated successfully");
48 | });
49 | }
50 | });
51 | });
52 | }
53 | })();
54 |
55 | // MIT License:
56 |
57 | // Permission is hereby granted, free of charge, to any person obtaining
58 | // a copy of this software and associated documentation files (the
59 | // ""Software""), to deal in the Software without restriction, including
60 | // without limitation the rights to use, copy, modify, merge, publish,
61 | // distribute, sublicense, and/or sell copies of the Software, and to
62 | // permit persons to whom the Software is furnished to do so, subject to
63 | // the following conditions:
64 |
65 | // The above copyright notice and this permission notice shall be
66 | // included in all copies or substantial portions of the Software.
67 |
68 | // THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
69 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
70 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
71 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
72 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
73 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
74 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/AppCompose/FunctionFile/Translator.js:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license at the bottom of this file.
2 |
3 | Office.initialize = function () {
4 | }
5 |
6 | function translate(event) {
7 | Office.context.mailbox.item.getSelectedDataAsync("text", function (ar) {
8 |
9 | // Make sure there is a selection
10 | if (ar === undefined || ar === null ||
11 | ar.value === undefined || ar.value === null ||
12 | ar.value.data === undefined || ar.value.data === null) {
13 | // Display an error message
14 | Office.context.mailbox.item.notificationMessages.addAsync("noSelectionError", {
15 | type: "errorMessage",
16 | message: "No text selected! Please select text to translate and try again."
17 | });
18 |
19 | // Signal that we are done.
20 | event.completed();
21 | return;
22 | }
23 |
24 | try {
25 | // Generate the API call URL
26 | var requestUrl = generateRequestUrl(ar.value.data);
27 |
28 | $.ajax({
29 | url: requestUrl,
30 | jsonp: "callback",
31 | dataType: "jsonp",
32 | success: function (response) {
33 | var translatedText = response.text;
34 | var textToWrite = "";
35 |
36 | // The response is an array of one or more translated lines.
37 | // Append them together with tags.
38 | for (var i = 0; i < translatedText.length; i++)
39 | textToWrite += translatedText[i] + " ";
40 |
41 | // Replace the selected text with the translated version
42 | Office.context.mailbox.item.setSelectedDataAsync(textToWrite, { coercionType: "html" }, function (asyncResult) {
43 | Office.context.mailbox.item.notificationMessages.addAsync("success", {
44 | type: "informationalMessage",
45 | icon: "icon1_16x16",
46 | message: "Translated successfully",
47 | persistent: false
48 | });
49 |
50 | // Signal that we are done.
51 | event.completed();
52 | });
53 | }
54 | });
55 | }
56 | catch (err) {
57 | Office.context.mailbox.item.notificationMessages.addAsync("translateError", {
58 | type: "errorMessage",
59 | message: "ERROR translating message: " + err.message
60 | });
61 |
62 | // Signal that we are done.
63 | event.completed();
64 | }
65 | });
66 | }
67 |
68 | // MIT License:
69 |
70 | // Permission is hereby granted, free of charge, to any person obtaining
71 | // a copy of this software and associated documentation files (the
72 | // ""Software""), to deal in the Software without restriction, including
73 | // without limitation the rights to use, copy, modify, merge, publish,
74 | // distribute, sublicense, and/or sell copies of the Software, and to
75 | // permit persons to whom the Software is furnished to do so, subject to
76 | // the following conditions:
77 |
78 | // The above copyright notice and this permission notice shall be
79 | // included in all copies or substantial portions of the Software.
80 |
81 | // THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
82 | // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
83 | // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
84 | // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
85 | // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
86 | // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
87 | // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/TranslateAppManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 | 8fbdd69c-2cfb-4a6e-aec4-cc316ed4e5e0
10 | 1.0.0.0
11 | Microsoft Outlook Dev Center
12 | en-US
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
31 |
32 | ReadWriteItem
33 |
34 | false
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 | translate
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 |
--------------------------------------------------------------------------------
/Content/Office.css:
--------------------------------------------------------------------------------
1 | /*****************************************************************/
2 | /********************** Office CSS library ***********************/
3 | /********************** Version: 1.0.2.0 *************************/
4 | /*****************************************************************/
5 |
6 | /******************************************************************
7 | Base
8 | ******************************************************************/
9 | body {
10 | margin: 0;
11 | padding: 0;
12 | border: 0;
13 | height: 100%;
14 | max-height: 100%;
15 | }
16 |
17 | /******************************************************************
18 | Typography
19 | ******************************************************************/
20 | body {
21 | font-family: "Segoe WP", "Segoe UI", "Arial", sans-serif;
22 | font-size: 12px;
23 | color: #262626;
24 | }
25 |
26 | h1 {
27 | font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
28 | font-size: 22px;
29 | line-height: 26px;
30 | font-weight: 500;
31 | }
32 |
33 | h2, h3, h4, h5, h6, th {
34 | font-family: "Segoe WP Semibold", "Segoe UI", "Arial", sans-serif;
35 | }
36 |
37 | h2 {
38 | font-size: 18px;
39 | line-height: 22px;
40 | font-weight: 600;
41 | }
42 |
43 | h3, h4, h5, h6 {
44 | font-size: 13px;
45 | line-height: 16px;
46 | }
47 |
48 | h3 {
49 | font-weight: 600;
50 | }
51 |
52 | h4, h5, h6 {
53 | font-weight: normal;
54 | }
55 |
56 | form, input, select, button, textarea {
57 | font-family: "Segoe WP", "Segoe UI", "Arial", sans-serif;
58 | font-size: 12px;
59 | line-height: 16px;
60 | }
61 |
62 | /******************************************************************
63 | General
64 | ******************************************************************/
65 | a {
66 | color: #336699;
67 | text-decoration: none;
68 | }
69 |
70 | a:focus, a:hover, a:active {
71 | text-decoration: underline;
72 | }
73 |
74 | ul {
75 | margin-left: 1.4em;
76 | padding: 0;
77 | }
78 |
79 | hr {
80 | border: none;
81 | height: 1px;
82 | color: #ebebeb;
83 | background-color: #ebebeb;
84 | clear: both;
85 | }
86 |
87 | img {
88 | border: none;
89 | }
90 |
91 | blockquote {
92 | margin-left: 1.4em;
93 | }
94 |
95 | /******************************************************************
96 | Forms
97 | ******************************************************************/
98 | form {
99 | clear: both;
100 | }
101 |
102 | label {
103 | margin-right: 3px;
104 | }
105 |
106 | input, textarea, select, button {
107 | margin: 0 0 5px 0;
108 | padding: 3px;
109 | -webkit-box-sizing: border-box;
110 | -moz-box-sizing: border-box;
111 | box-sizing: border-box;
112 | }
113 |
114 | input[type="checkbox"], input[type="radio"] {
115 | margin-right: 4px;
116 | }
117 |
118 | input[type="checkbox"], input[type="radio"],
119 | input[type="file"], input[type="image"] {
120 | padding: 0;
121 | }
122 |
123 | button, textarea, select,
124 | input:not([type]),
125 | input[type="button"],
126 | input[type="color"],
127 | input[type="date"],
128 | input[type="datetime"],
129 | input[type="datetime-local"],
130 | input[type="email"],
131 | input[type="month"],
132 | input[type="number"],
133 | input[type="password"],
134 | input[type="reset"],
135 | input[type="search"],
136 | input[type="submit"],
137 | input[type="tel"],
138 | input[type="text"],
139 | input[type="time"],
140 | input[type="url"],
141 | input[type="week"] {
142 | border: 1px solid #cccccc;
143 | background-color: white;
144 | }
145 |
146 | button, input[type="button"],
147 | input[type="submit"], input[type="reset"] {
148 | padding-left: 10px;
149 | padding-right: 10px;
150 | text-align: center;
151 | }
152 |
153 | button:hover:enabled,
154 | input[type="button"]:hover:enabled,
155 | input[type="submit"]:hover:enabled,
156 | input[type="reset"]:hover:enabled {
157 | border-color: #7eB4ea;
158 | background-color: #e5f1fc;
159 | }
160 |
161 | button:active:enabled,
162 | input[type="button"]:active:enabled,
163 | input[type="submit"]:active:enabled,
164 | input[type="reset"]:active:enabled {
165 | border-color: #569de5;
166 | background-color: #cee5fc;
167 | }
168 |
169 | /******************************************************************
170 | Scrollbars
171 | ******************************************************************/
172 | body {
173 | scrollbar-base-color: white;
174 | scrollbar-arrow-color: #ababab;
175 | scrollbar-highlight-color: #ababab;
176 | scrollbar-darkshadow-color: white;
177 | scrollbar-track-color: white;
178 | scrollbar-face-color: white;
179 | }
180 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | page_type: sample
3 | products:
4 | - office-outlook
5 | - office-365
6 | languages:
7 | - javascript
8 | extensions:
9 | contentType: samples
10 | technologies:
11 | - Add-ins
12 | createdDate: 8/21/2015 10:55:59 AM
13 | ---
14 | # Outlook-Add-in-Commands-Translator
15 |
16 | The Translator add-in uses the commands model for Outlook add-ins to add a button to the ribbon in the new message form. The button sends the selected text from the message body to a translator web service to translate from English to Russian.
17 |
18 | ## Prerequsites
19 |
20 | In order to run this sample, you will need the following:
21 |
22 | - A web server to host the sample files. The server must be able to accept SSL-protected requests (https) and have a valid SSL certificate.
23 | - An Office 365 email account **or** an Outlook.com email account. You can [join the Office 365 Developer Program and get a free 1 year subscription to Office 365](https://aka.ms/devprogramsignup).
24 | - An API key for the [Yandex Translate API](https://translate.yandex.com/developers).
25 | - Outlook 2016, which is part of the [Office 2016 Preview](https://products.office.com/en-us/office-2016-preview).
26 |
27 | ## Configuring and installing the sample
28 |
29 | 1. Download or fork the repository.
30 | 1. Open `TranslateHelper.js` in a text editor and replace the `YOUR API KEY HERE` value with your API key for the Yandex Translate API. Save your changes.
31 | 1. Upload the `AppCompose`, `Content`, and `Images` directories to a directory on your web server.
32 | 1. Open `TranslateAppManifest.xml` in a text editor. Replace all instances of `YOUR_WEB_SERVER` with the HTTPS URL of the directory where you uploaded the files in the previous step. Save your changes.
33 | 1. Logon to your email account with a browser at either https://outlook.office365.com (for Office 365), or https://www.outlook.com (for Outlook.com). Click on the gear icon in the upper-right corner, then click **Manage add-ins**.
34 |
35 | 
36 |
37 | 1. In the add-in list, click the **+** icon and choose **Add from a file**.
38 |
39 | 
40 |
41 | 1. Click **Browse** and browse to the `TranslateAppManifest.xml` file on your development machine. Click **Next**.
42 |
43 | 
44 |
45 | 1. On the confirmation screen, you will see a warning that the add-in is not from the Office Store and hasn't been verified by Microsoft. Click **Install**.
46 | 1. You should see a success message: **You've added an add-in for Outlook**. Click OK.
47 |
48 | ## Running the sample ##
49 |
50 | 1. Open Outlook 2016 and connect to the email account where you installed the add-in.
51 | 1. Create a new email. Notice that the add-in has placed a **Translate** button on the command ribbon.
52 |
53 | 
54 |
55 | 1. Type some English text into the body. Select the text, then click **Translate**.
56 |
57 | 
58 |
59 | 1. After a moment, the selected text will be replaced with the Russian translation, and you should see the message **Translated successfully** in the information bar.
60 |
61 | 
62 |
63 | ## Key components of the sample
64 |
65 | - [```TranslateAppManifest.xml```](TranslateAppManifest.xml): The manifest file for the Translator add-in.
66 | - [```AppCompose/FunctionFile/Home.html```](AppCompose/FunctionFile/Home.html): An empty HTML file to load `Translator.js` for clients that support add-in commands.
67 | - [```AppCompose/FunctionFile/Translator.js```](AppCompose/FunctionFile/Translator.js): The code that is invoked when the add-in command button is clicked.
68 | - [```AppCompose/Home/Home.html```](AppCompose/Home/Home.html): The HTML file that is loaded and displayed by clients that do not support add-in commands.
69 | - [```AppCompose/Home/Home.js```](AppCompose/Home/Home.js): The code that is invoked by clients that do not support add-in commands.
70 | - [```AppCompose/TranslateHelper.js```](AppCompose/TranslateHelper.js): Common code used by both `Translator.js` and `Home.js`.
71 |
72 | ## How's it all work?
73 |
74 | The key part of the sample is the structure of the manifest file. The manifest uses the same version 1.1 schema as any Office add-in's manifest. However, there is a new section of the manifest called `VersionOverrides`. This section holds all of the information that clients that support add-in commands (currently only Outlook 2016) need to invoke the add-in from a ribbon button. By putting this in a completely separate section, the manifest can also include the original markup to enable the add-in to be loaded in a task pane under the original compose mode add-in model. You can see this in action by loading the add-in in Outlook 2013 or Outlook on the web.
75 |
76 | ### The Translator add-in loaded in Outlook on the web ###
77 |
78 | 
79 |
80 | Within the `VersionOverrides` element, there are two child elements, `Resources` and `Hosts`. The `Resources` element contains information about icons, strings, and what HTML file to load for the add-in. The `Hosts` section specifies how and when the add-in is loaded.
81 |
82 | In this sample, there is only one host specified (Outlook):
83 |
84 | ```xml
85 |
86 | ```
87 |
88 | Within this element are the configuration specifics for the desktop version of Outlook:
89 |
90 | ```xml
91 |
92 | ```
93 |
94 | The URL to the HTML file with all of the JavaScript code for the button is specified in the `FunctionFile` element (note that it uses the resource ID specified in the `Resources` element):
95 |
96 | ```xml
97 |
98 | ```
99 |
100 | The manifest also limits activation to the new message form by setting a single extension point:
101 |
102 | ```xml
103 |
104 | ```
105 |
106 | The properties of the button are specified in the `Control` element. Most importantly, the button's click event is connected to the `translate` function in `Translator.js` inside the `Action` element:
107 |
108 | ```xml
109 |
110 | translate
111 |
112 | ```
113 |
114 | ## Questions and comments
115 |
116 | - If you have any trouble running this sample, please [log an issue](https://github.com/OfficeDev/Outlook-Add-in-Commands-Translator/issues).
117 | - Questions about Office Add-in development in general should be posted to [Stack Overflow](http://stackoverflow.com/questions/tagged/office-addins). Make sure that your questions or comments are tagged with `office-addins`.
118 |
119 | ## Additional resources
120 |
121 | - [Outlook Dev Center](https://dev.outlook.com)
122 | - [Office Add-ins](https://msdn.microsoft.com/library/office/jj220060.aspx) documentation on MSDN
123 | - [More Add-in samples](https://github.com/OfficeDev?utf8=%E2%9C%93&query=-Add-in)
124 |
125 | ## Copyright
126 |
127 | Copyright (c) 2015 Microsoft. All rights reserved.
128 |
129 |
130 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
131 |
--------------------------------------------------------------------------------