OO-4938: OnlyOffice mobile editor

src/main/java/org/olat/core/commons/services/doceditor/onlyoffice/OnlyOfficeModule.java

@@ -20,8 +20,13 @@
 package org.olat.core.commons.services.doceditor.onlyoffice;
 
 import java.security.Key;
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.Set;
+import java.util.stream.Collectors;
 
 import org.apache.logging.log4j.Logger;
+import org.olat.core.commons.services.doceditor.DocEditor.Mode;
 import org.olat.core.configuration.AbstractSpringModule;
 import org.olat.core.configuration.ConfigOnOff;
 import org.olat.core.logging.Tracing;
@@ -48,6 +53,8 @@ public class OnlyOfficeModule extends AbstractSpringModule implements ConfigOnOf
 	private static final String ONLYOFFICE_BASE_URL = "onlyoffice.baseUrl";
 	private static final String ONLYOFFICE_JWT_SECRET = "onlyoffice.jwt.secret";
 	private static final String ONLYOFFICE_EDITOR_ENABLED = "onlyoffice.editor.enabled";
+	private static final String ONLYOFFICE_MOBILE_MODES = "onlyoffice.mobile.modes";
+	private static final String ONLYOFFICE_MOBILE_QUERY = "onlyoffice.mobile.query";
 	private static final String ONLYOFFICE_LICENSE_EDIT = "onlyoffice.license.edit";
 	private static final String ONLYOFFICE_DATA_TRANSER_CONFIRMATION_ENABLED = "onlyoffice.data.transfer.confirmation.enabled";
 	private static final String ONLYOFFICE_USAGE_AUTHORS = "onlyoffice.usage.authors";
@@ -69,6 +76,11 @@ public class OnlyOfficeModule extends AbstractSpringModule implements ConfigOnOf
 	private Key jwtSignKey;
 	@Value("${onlyoffice.editor.enabled:false}")
 	private boolean editorEnabled;
+	@Value("${onlyoffice.mobile.modes}")
+	private String mobileModesConfig;
+	private Set<Mode> mobileModes;
+	@Value("${onlyoffice.mobile.query}")
+	private String mobileQuery;
 	@Value("${onlyoffice.license.edit}")
 	private Integer licenseEdit;
 	@Value("${onlyoffice.data.transfer.confirmation.enabled:false}")
@@ -119,6 +131,9 @@ public class OnlyOfficeModule extends AbstractSpringModule implements ConfigOnOf
 			editorEnabled = "true".equals(editorEnabledObj);
 		}
 		
+		mobileModesConfig = getStringPropertyValue(ONLYOFFICE_MOBILE_MODES, mobileModesConfig);
+		mobileQuery = getStringPropertyValue(ONLYOFFICE_MOBILE_QUERY, mobileQuery);
+		
 		String dataTransferConfirmationEnabledObj = getStringPropertyValue(ONLYOFFICE_DATA_TRANSER_CONFIRMATION_ENABLED, true);
 		if(StringHelper.containsNonWhitespace(dataTransferConfirmationEnabledObj)) {
 			dataTransferConfirmationEnabled = "true".equals(dataTransferConfirmationEnabledObj);
@@ -222,6 +237,31 @@ public class OnlyOfficeModule extends AbstractSpringModule implements ConfigOnOf
 		setStringProperty(ONLYOFFICE_EDITOR_ENABLED, Boolean.toString(editorEnabled), true);
 	}
 
+	public Set<Mode> getMobileModes() {
+		if (mobileModes == null) {
+			if (StringHelper.containsNonWhitespace(mobileModesConfig)) {
+				mobileModes = Arrays.stream(mobileModesConfig.split(",")).map(Mode::valueOf).collect(Collectors.toSet());
+			}
+			mobileModes = Collections.emptySet();
+		}
+		return mobileModes;
+	}
+
+	public void setMobileModes(Set<Mode> mobileModes) {
+		this.mobileModes = mobileModes;
+		this.mobileModesConfig = mobileModes.stream().map(Mode::name).collect(Collectors.joining(","));
+		setStringProperty(ONLYOFFICE_MOBILE_MODES, mobileModesConfig, true);
+	}
+
+	public String getMobileQuery() {
+		return mobileQuery;
+	}
+
+	public void setMobileQuery(String mobileQuery) {
+		this.mobileQuery = mobileQuery;
+		setStringProperty(ONLYOFFICE_MOBILE_QUERY, mobileQuery, true);
+	}
+
 	public Integer getLicenseEdit() {
 		return licenseEdit;
 	}

src/main/java/org/olat/core/commons/services/doceditor/onlyoffice/ui/OnlyOfficeAdminController.java

@@ -25,7 +25,10 @@ import static org.olat.core.gui.components.util.KeyValues.entry;
 import static org.olat.core.gui.translator.TranslatorHelper.translateAll;
 
 import java.util.Collection;
+import java.util.Set;
+import java.util.stream.Collectors;
 
+import org.olat.core.commons.services.doceditor.DocEditor.Mode;
 import org.olat.core.commons.services.doceditor.onlyoffice.OnlyOfficeModule;
 import org.olat.core.commons.services.doceditor.onlyoffice.OnlyOfficeSecurityService;
 import org.olat.core.commons.services.doceditor.onlyoffice.OnlyOfficeService;
@@ -63,6 +66,8 @@ public class OnlyOfficeAdminController extends FormBasicController {
 	private TextElement baseUrlEl;
 	private TextElement jwtSecretEl;
 	private MultipleSelectionElement editorEnabledEl;
+	private MultipleSelectionElement mobileModeEl;
+	private TextElement mobileQueryEl;
 	private MultipleSelectionElement viewOnlyEl;
 	private MultipleSelectionElement dataTransferConfirmationEnabledEl;
 	private TextElement licenseEditEl;
@@ -108,6 +113,16 @@ public class OnlyOfficeAdminController extends FormBasicController {
 		editorEnabledEl = uifactory.addCheckboxesHorizontal("admin.editor.enabled", formLayout, ENABLED_KEYS, enabledValues);
 		editorEnabledEl.addActionListener(FormEvent.ONCHANGE);
 		editorEnabledEl.select(ENABLED_KEYS[0], onlyOfficeModule.isEditorEnabled());
+		
+		KeyValues mobileModesKV = new KeyValues();
+		mobileModesKV.add(KeyValues.entry(Mode.VIEW.name(), translate("admin.mode.view")));
+		mobileModesKV.add(KeyValues.entry(Mode.EMBEDDED .name(), translate("admin.mode.embedded")));
+		mobileModesKV.add(KeyValues.entry(Mode.EDIT.name(), translate("admin.mode.edit")));
+		mobileModeEl = uifactory.addCheckboxesHorizontal("admin.mobile.modes", formLayout, mobileModesKV.keys(), mobileModesKV.values());
+		mobileModeEl.addActionListener(FormEvent.ONCHANGE);
+
+		mobileQueryEl = uifactory.addTextElement("admin.mobile.query", 1000, "", formLayout);
+		mobileQueryEl.setHelpTextKey("admin.mobile.query.help", null);
 
 		dataTransferConfirmationEnabledEl = uifactory.addCheckboxesHorizontal(
 				"admin.data.transfer.confirmation.enabled", formLayout, ENABLED_KEYS, enabledValues);
@@ -139,6 +154,12 @@ public class OnlyOfficeAdminController extends FormBasicController {
 	}
 	
 	private void initEditorValues() {
+		for (Mode mode : onlyOfficeModule.getMobileModes()) {
+			mobileModeEl.select(mode.name(), true);
+		}
+		
+		mobileQueryEl.setValue(onlyOfficeModule.getMobileQuery());
+		
 		dataTransferConfirmationEnabledEl.select(ENABLED_KEYS[0], onlyOfficeModule.isDataTransferConfirmationEnabled());
 		
 		Integer licenseEdit = onlyOfficeModule.getLicenseEdit();
@@ -165,13 +186,22 @@ public class OnlyOfficeAdminController extends FormBasicController {
 		if (editorEnabled) {
 			initEditorValues();
 		}
+		mobileModeEl.setVisible(editorEnabled);
 		dataTransferConfirmationEnabledEl.setVisible(editorEnabled);
 		viewOnlyEl.setVisible(editorEnabled);
 		usageRolesEl.setVisible(editorEnabled);
 		
+		updateMobileUI();
 		updateLicenseUI();
 	}
 
+	private void updateMobileUI() {
+		boolean editorEnabled = editorEnabledEl.isAtLeastSelected(1);
+		boolean mobileEnabled = mobileModeEl.isAtLeastSelected(1);
+		
+		mobileQueryEl.setVisible(editorEnabled && mobileEnabled);
+	}
+
 	private void updateLicenseUI() {
 		boolean editorEnabled = editorEnabledEl.isAtLeastSelected(1);
 		boolean notViewOnly = !viewOnlyEl.isAtLeastSelected(1);
@@ -190,6 +220,8 @@ public class OnlyOfficeAdminController extends FormBasicController {
 			updateUI();
 		} else if (source == viewOnlyEl) {
 			updateLicenseUI();
+		} else if (source == mobileModeEl) {
+			updateMobileUI();
 		}
 		super.formInnerEvent(ureq, source, event);
 	}
@@ -208,6 +240,10 @@ public class OnlyOfficeAdminController extends FormBasicController {
 			}
 			allOk &= jwtSecretOk;
 			
+			if (mobileModeEl.isAtLeastSelected(1)) {
+				allOk &= validateIsMandatory(mobileQueryEl);
+			}
+			
 			allOk &= validatePositiveInteger(licenseEditEl);
 		}
 		
@@ -230,6 +266,12 @@ public class OnlyOfficeAdminController extends FormBasicController {
 		onlyOfficeModule.setEditorEnabled(editorEnabled);
 		
 		if (editorEnabled) {
+			Set<Mode> mobileModes = mobileModeEl.getSelectedKeys().stream().map(Mode::valueOf).collect(Collectors.toSet());
+			onlyOfficeModule.setMobileModes(mobileModes);
+			
+			String mobileQuery = mobileQueryEl.getValue();
+			onlyOfficeModule.setMobileQuery(mobileQuery);
+			
 			boolean dataTransferConfirmationEnabled = dataTransferConfirmationEnabledEl.isAtLeastSelected(1);
 			onlyOfficeModule.setDataTransferConfirmationEnabled(dataTransferConfirmationEnabled);
 			

src/main/java/org/olat/core/commons/services/doceditor/onlyoffice/ui/OnlyOfficeEditorController.java

@@ -103,6 +103,8 @@ public class OnlyOfficeEditorController extends BasicController {
 				mainVC.contextPut("id", "o_" + CodeHelper.getRAMUniqueID());
 				mainVC.contextPut("apiUrl", onlyOfficeModule.getApiUrl());
 				mainVC.contextPut("apiConfig", apiConfigJson);
+				mainVC.contextPut("mobileEnabled", onlyOfficeModule.getMobileModes().contains(access.getMode()));
+				mainVC.contextPut("mobileQuery", onlyOfficeModule.getMobileQuery());
 				
 				openVfsMetadataKey = vfsMetadata.getKey();
 				log.info("Document (key={}) opened with ONLYOFFICE ({}) by {}", openVfsMetadataKey, access.getMode(),

src/main/java/org/olat/core/commons/services/doceditor/onlyoffice/ui/_content/editor.html

@@ -12,7 +12,16 @@
 		function loadEditor() {
 			var waitForLoad = function() {
 				if (typeof DocsAPI != "undefined") {
-					new DocsAPI.DocEditor("$id", $apiConfig);
+					var apiConfig = $apiConfig;
+					console.log("befor");
+					if ($mobileEnabled) {
+						var mobile = window.matchMedia("$mobileQuery").matches;
+						console.log("mobile " + mobile);
+						if (mobile) {
+							apiConfig.type = 'mobile';
+						}
+					}
+					new DocsAPI.DocEditor("$id", apiConfig);
 				} else {
 					window.setTimeout(waitForLoad, 500);
 				}

src/main/java/org/olat/core/commons/services/doceditor/onlyoffice/ui/_i18n/LocalStrings_de.properties

@@ -6,6 +6,12 @@ admin.license.edit.in.use=Aktuelle genutzte Bearbeitungslizenzen
 admin.enabled=Modul "ONLYOFFICE"
 admin.jwt.secret=Secret
 admin.jwt.secret.invalid=Das Secret ist nicht g\u00FCltig. Vermutlich ist es zu kurz. Siehe: JWA Specification (RFC 7518, Section 3.2).
+admin.mobile.modes=Mobile Viewer
+admin.mobile.query=Media query
+admin.mobile.query.help=CSS media query um zu entschieden, ob der Mobile Viewer angezeigt werden soll.
+admin.mode.edit=Bearbeitung
+admin.mode.embedded=Eingebettet
+admin.mode.view=Viewer
 admin.title=ONLYOFFICE
 admin.thumbnails.enabled=Thumbnails
 admin.view.only=Bearbeitung nicht zulassen

src/main/java/org/olat/core/commons/services/doceditor/onlyoffice/ui/_i18n/LocalStrings_en.properties

@@ -6,6 +6,12 @@ admin.license.edit.in.use=Edit licenses in use
 admin.enabled=Module "ONLYOFFICE"
 admin.jwt.secret=Secret
 admin.jwt.secret.invalid=The secret is not valid. Probably it is too short. See: JWA Specification (RFC 7518, Section 3.2).
+admin.mobile.modes=Mobile viewer
+admin.mobile.query=Media query
+admin.mobile.query.help=CSS media query to decide if the Mobile Viewer should be displayed.
+admin.mode.edit=Editor
+admin.mode.embedded=Embedded
+admin.mode.view=Viewer
 admin.title=ONLYOFFICE
 admin.thumbnails.enabled=Thumbnails
 admin.view.only=Editing suppressed

src/main/resources/serviceconfig/olat.properties

@@ -1705,8 +1705,13 @@ onlyoffice.conversion.path=ConvertService.ashx
 ## File editor
 onlyoffice.editor.enabled=false
 # Number of usable edit license.
-# You may leave the field blank to supress the licnese check.
+# You may leave the field blank to supress the license check.
 onlyoffice.license.edit=
+# In which modes is the mobile editor enabled (comma separated list)
+onlyoffice.mobile.modes=VIEW,EMBEDDED
+onlyoffice.mobile.modes.values=EDIT,VIEW,EMBEDDED
+# CSS query to determine the limit of the mobile editor
+onlyoffice.mobile.query=only screen and (max-width: 770px), only screen and (max-height: 770px)
 onlyoffice.data.transfer.confirmation.enabled=false
 onlyoffice.usage.restricted.authors=false
 onlyoffice.usage.restricted.coaches=false