From d3b92abd8e516f69b1ebab158ae9b49a39d39125 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20K=C5=82os?= Date: Mon, 22 Jul 2019 11:44:05 +0200 Subject: [PATCH] Mobile language indicator and dialog Change-Id: I2358ac60a3ba1a0f177e9fa3f965b7043ab99559 --- loleaflet/Makefile.am | 1 + loleaflet/build/deps.js | 3 +- .../src/control/Control.LanguageDialog.js | 99 +++++++++++++++++++ loleaflet/src/control/Control.Toolbar.js | 16 ++- loleaflet/src/main.js | 1 + 5 files changed, 118 insertions(+), 2 deletions(-) create mode 100644 loleaflet/src/control/Control.LanguageDialog.js diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am index 15760e5b4..5409d9edb 100644 --- a/loleaflet/Makefile.am +++ b/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 \ diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js index d9bf83bf2..a0c6d64fa 100644 --- a/loleaflet/build/deps.js +++ b/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' }, diff --git a/loleaflet/src/control/Control.LanguageDialog.js b/loleaflet/src/control/Control.LanguageDialog.js new file mode 100644 index 000000000..43b3f909e --- /dev/null +++ b/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); +}; diff --git a/loleaflet/src/control/Control.Toolbar.js b/loleaflet/src/control/Control.Toolbar.js index f49b3841e..2262197cf 100644 --- a/loleaflet/src/control/Control.Toolbar.js +++ b/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') { diff --git a/loleaflet/src/main.js b/loleaflet/src/main.js index 7c9d7e944..0a66fe684 100644 --- a/loleaflet/src/main.js +++ b/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());