Add a translate sidebar to your Google Drive documents
I like using Google Drive; even so much that I’ve almost stopped using Word as my standard text processor. It’s just so easy to get used to editing your documents “in the cloud”. Just log in on some shady wi-fi network and start editing your documents!
The research sidebar is one of the well-implemented features of Google Drive, offering a sort-of “mini-google” in a sidebar that automatically knows what you’re typing about, and offers some help on searching research articles, images and word definitions. Pretty amazing stuff! But what I noticed while typing my documents is that I was often flipping between another tab, namely the Google Translate tab. You could say my English vocabulary isn’t up-to-date and I should just spend more time learning English words… or I could make it easier for myself to quickly search for an English translation of a Dutch word, or any word in any language for that matter. So I chose for the last option, I wrote a small Google Apps Script that would let me, just like the research bar, quickly find the words I need. I don’t know why Google didn’t include this in the first place, it’s probably on a to-do list somewhere…
Installation
Copy the code from the box below. Keep your cursor to the right of the green line to make sure you don’t include all the line numbers, you don’t want to include those..
In your Google document in which you want to use the sidebar,go to Tools -> Script Editor. A new tab opens, with a programming interface. Remove all the dummy code you see, and replace it with what you just copied. Press CTRL + S to save the script. Switch back to your document and click Tools -> Script Manager. Now a list of “functions” appears that you can run. Select the top one called “onOpen” and press the “Run” button. If everything went well, you should now see an new menu item called “Extra”. In this “Extra” menu, there’s an item called “Translate Sidebar”. Click on it and enjoy!
This is how it will look like after running. Just like you'd expect
Code
//Translate SideBar by Pepf, copy everything!
//adjust to modify available languages, make sure each array has the same amount of items!
var langs = ['English','French','Nederlands','Deutsch'];
var langcodes = ['en','fr','nl','de'];
function onOpen() {
// Add a menu with some items, some separators, and a sub-menu.
DocumentApp.getUi().createMenu('Extra')
.addItem('Translate sidebar', 'showSidebar')
.addToUi();
}
/**
* Shows a custom HTML user interface in a sidebar in the Google Docs editor.
*/
function showSidebar() {
// Display a sidebar with custom UiApp content.
var uiInstance = UiApp.createApplication()
.setTitle('Translate SideBar')
.setWidth(250);
var panel = uiInstance.createVerticalPanel();
panel.setSpacing(10);
panel.add(uiInstance.createLabel('Text to translate'));
//input panel
var inputPanel = uiInstance.createHorizontalPanel();
//input textbox
var inputText = uiInstance.createTextBox().setName("inputText");
inputText.setSize("95%","30px");
//input language listbox
var inputLanguage = uiInstance.createListBox().setName("inputLanguage").setId("inLang");
ListBoxAttrs(inputLanguage).setSelectedIndex(2); //input starts as dutch ;)
inputPanel.add(inputText);
inputPanel.add(inputLanguage);
panel.add(inputPanel);
//Button to switch languages
var switchLang_btn = uiInstance.createButton("⇵");
panel.add(switchLang_btn);
panel.add(uiInstance.createLabel('Translated Text:'));
//output panel
var outputPanel = uiInstance.createHorizontalPanel();
//output text area
var outputTxt = uiInstance.createTextBox().setName("outputTxt").setId("outputTxt");
outputTxt.setSize("95%","30px");
//output language listbox
var outputLanguage = uiInstance.createListBox().setName("outputLanguage").setId("outLang");
ListBoxAttrs(outputLanguage);
outputPanel.add(outputTxt);
outputPanel.add(outputLanguage);
panel.add(outputPanel);
//handlers..
var switchHandler = uiInstance.createServerHandler("Switchlanguages");
switchHandler.addCallbackElement(inputLanguage).addCallbackElement(outputLanguage);
switchLang_btn.addClickHandler(switchHandler);
var translateHandler = uiInstance.createServerHandler("translate");
translateHandler.addCallbackElement(inputText)
.addCallbackElement(outputTxt)
.addCallbackElement(inputLanguage)
.addCallbackElement(outputLanguage);
//auto translate on changing input or language, or switching language
inputText.addBlurHandler(translateHandler);
inputLanguage.addChangeHandler(translateHandler);
outputLanguage.addChangeHandler(translateHandler);
switchLang_btn.addClickHandler(translateHandler);
uiInstance.add(panel);
DocumentApp.getUi().showSidebar(uiInstance);
}
/**
* Translate callback
*/
function translate(eventInfo) {
var parameter = eventInfo.parameter;
//fetching input language from listbox
var inputLang = parameter.inputLanguage;
Logger.log("input lang: " + inputLang);
//fetching output language from listbox
var outputLang = parameter.outputLanguage;
Logger.log("output lang: " + outputLang);
var inputText = parameter.inputText; // the value of inputText
var english = LanguageApp.translate(inputText, inputLang, outputLang);
Logger.log(english);
//var outputTxt = parameter.outputTxt;
//outputTxt.setText();
var app = UiApp.getActiveApplication();
app.getElementById('outputTxt').setText(english);
return app;
}
/**
* Switchlanguages client callback
*/
function Switchlanguages(eventInfo) {
var parameter = eventInfo.parameter;
//fetching input language from listbox
var inputLang = langcodes.indexOf(parameter.inputLanguage);
//fetching output language from listbox
var outputLang = langcodes.indexOf(parameter.outputLanguage);
//Switch and change
var app = UiApp.getActiveApplication();
app.getElementById('inLang').setSelectedIndex(outputLang);
app.getElementById('outLang').setSelectedIndex(inputLang);
return app;
}
/**
* Add items and styles to listbox
*/
function ListBoxAttrs(lb) {
for (n=0; n<langs.length; n++){
lb.addItem(langs[n],langcodes[n]);
}
lb.setSelectedIndex(0);
lb.setStyleAttribute("font-size", "0.8em")
lb.setSize("auto", "30px");
return lb;
}