Mobile language indicator and dialog

Change-Id: I2358ac60a3ba1a0f177e9fa3f965b7043ab99559

loleaflet/Makefile.am

@@ -342,6 +342,7 @@ pot:
 		src/control/Control.DownloadProgress.js \
 		src/control/ColorPicker.js \
 		src/control/Control.JSDialogBuilder.js \
+		src/control/Control.LanguageDialog.js \
 		src/control/Control.Menubar.js \
 		src/control/Control.MobileWizard.js \
 		src/control/Control.Scroll.Annotation.js \

loleaflet/build/deps.js

@@ -391,7 +391,8 @@ var deps = {
 			'control/Control.Infobar.js',
 			'control/ColorPicker.js',
 			'control/Control.JSDialogBuilder.js',
-			'control/Control.MobileWizard.js'],
+			'control/Control.MobileWizard.js',
+			'control/Control.LanguageDialog.js'],
 		heading: 'Controls',
 		desc: 'Handles vex dialogs for displaying alerts'
 	},

loleaflet/src/control/Control.LanguageDialog.js

@@ -0,0 +1,99 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * L.Control.LanguageDialog used for spellchecking language selection on mobile devices
+ */
+
+/* global _ $ vex */
+L.Control.LanguageDialog = L.Control.extend({
+
+	_languages: [],
+
+	onAdd: function (map) {
+		map.on('commandvalues', this._onCommandValues, this);
+		map.on('languagedialog', this._onLanguageDialog, this);
+	},
+
+	_onCommandValues: function(e) {
+		if (e.commandName === '.uno:LanguageStatus' && L.Util.isArray(e.commandValues)) {
+			var languages = [];
+
+			e.commandValues.forEach(function(language) {
+				var split = language.split(';');
+				language = split[0];
+				var isoCode = '';
+				if (split.length > 1)
+					isoCode = split[1];
+				languages.push({translated: _(language), neutral: language, iso: isoCode});
+			});
+
+			languages.sort(function(a, b) {
+				return a.translated < b.translated ? -1 : a.translated > b.translated ? 1 : 0;
+			});
+
+			this._languages = languages;
+		}
+	},
+
+	_onItemSelected: function(e) {
+		var unoCommand = '.uno:LanguageStatus?Language:string=Default_' + e.data.language;
+		e.data.self._map.sendUnoCommand(unoCommand);
+		vex.closeAll();
+	},
+
+	_getSelectedLanguage: function() {
+		var constState = 'stateChangeHandler';
+		var languageAndCode = this._map[constState].getItemValue('.uno:LanguageStatus');
+		var language = languageAndCode.split(';')[0];
+		return language;
+	},
+
+	_addItem: function(parent, language) {
+		var selectedLanguage = this._getSelectedLanguage();
+		var neutralLanguage = 'LANGUAGE_NONE';
+
+		var tr = L.DomUtil.create('tr', '', parent);
+		var td = L.DomUtil.create('td', '', tr);
+		var a = L.DomUtil.create('a', '', td);
+
+		if (language) {
+			neutralLanguage = language.neutral;
+			a.innerHTML = language.translated;
+		} else {
+			a.innerHTML = _('None (Do not check spelling)');
+		}
+
+		if (neutralLanguage.indexOf(selectedLanguage) !== -1
+			|| (selectedLanguage == '[None]' && !language)) {
+			$(a).addClass('highlighted');
+		} else {
+			$(a).removeClass('highlighted');
+		}
+
+		$(tr).on('click', {self: this, language: encodeURIComponent(neutralLanguage)}, this._onItemSelected);
+	},
+
+	_onLanguageDialog: function() {
+		var dialog = vex.dialog.open({
+			message: '',
+			buttons: [
+				$.extend({}, vex.dialog.buttons.NO, { text: _('Cancel') })
+			],
+		});
+
+		var div = L.DomUtil.create('div', '');
+		var ul = L.DomUtil.create('table', 'lo-menu', div);
+
+		// Add NONE
+		this._addItem(ul, null);
+
+		for (var lang in this._languages) {
+			this._addItem(ul, this._languages[lang]);
+		}
+
+		dialog.get(0).insertBefore(div, dialog.get(0).childNodes[0]);
+	}
+});
+
+L.control.languageDialog = function (options) {
+	return new L.Control.LanguageDialog(options);
+};

loleaflet/src/control/Control.Toolbar.js

@@ -362,6 +362,9 @@ function onClick(e, id, item, subItem) {
 	else if (id === 'link') {
 		map.showHyperlinkDialog();
 	}
+	else if (id === 'languagecode') {
+		map.fire('languagedialog');
+	}
 	else {
 		map.handleSigningClickEvent(id, item); // this handles a bunch of signing bar click events
 	}
@@ -799,6 +802,7 @@ function initNormalToolbar() {
 				}
 			}, mobile: false},
 		{type: 'break', id: 'breakstyles', mobile: false, tablet: false },
+		{type: 'button', id: 'languagecode', desktop: false, mobile: true, tablet: false},
 		{type: 'button',  id: 'bold',  img: 'bold', hint: _UNO('.uno:Bold'), uno: 'Bold'},
 		{type: 'button',  id: 'italic', img: 'italic', hint: _UNO('.uno:Italic'), uno: 'Italic'},
 		{type: 'button',  id: 'underline',  img: 'underline', hint: _UNO('.uno:Underline'), uno: 'Underline'},
@@ -1734,7 +1738,17 @@ function onCommandStateChanged(e) {
 		}
 	}
 	else if (commandName === '.uno:LanguageStatus') {
-		statusbar.set('LanguageStatus', {text: _(state), selected: state});
+		var code = state;
+		var language = _(state);
+
+		var split = code.split(';');
+		if (split.length > 1) {
+			language = _(split[0]);
+			code = split[1];
+		}
+
+		updateToolbarItem(statusbar, 'LanguageStatus', $('#LanguageStatus').html(language).parent().html());
+		w2ui['editbar'].set('languagecode', {text: code});
 	}
 	else if (commandName === '.uno:ModifiedStatus') {
 		if (e.state === 'true') {

loleaflet/src/main.js

@@ -87,6 +87,7 @@ setupToolbar(map);
 map.addControl(L.control.scroll());
 map.addControl(L.control.alertDialog());
 map.addControl(L.control.mobileWizard());
+map.addControl(L.control.languageDialog());
 map.dialog = L.control.lokDialog();
 map.addControl(map.dialog);
 map.addControl(L.control.contextMenu());