From ff9534d3e5f4123078c63ddedc1831828676d806 Mon Sep 17 00:00:00 2001 From: Daniel Wroblewski Date: Sun, 20 Feb 2022 17:10:38 +0200 Subject: [PATCH 1/5] Add language support and fix SaveAs bug --- _i18n/messages.properties | 8 +- _i18n/messages_en.properties | 15 +++ _i18n/messages_fr.properties | 15 +++ _i18n/messages_iw.properties | 15 +++ app/profilePic/index.html | 6 + .../profilePic/controller/App.controller.js | 123 +++++++++++------- app/profilePic/profilePic/languages.json | 8 ++ app/profilePic/profilePic/view/App.view.xml | 54 ++++---- 8 files changed, 167 insertions(+), 77 deletions(-) create mode 100644 _i18n/messages_en.properties create mode 100644 _i18n/messages_fr.properties create mode 100644 _i18n/messages_iw.properties create mode 100644 app/profilePic/profilePic/languages.json diff --git a/_i18n/messages.properties b/_i18n/messages.properties index 37ffeec..f75b69c 100644 --- a/_i18n/messages.properties +++ b/_i18n/messages.properties @@ -2,12 +2,14 @@ errPort=is not a valid HTTP port value lagError=Event Loop Lag Exceeded: {0} milliseconds errFileType=Invalid file type. Only jpg, png and gif image files are allowed. errFileTooLarge=Uploaded file is too large. Please choose a file less than 20MB in size -appTitle=SAP Community Profile Picture Editor +appTitle=SAP Community Profile Picture Editor22222 appDescription=SAP Community Profile Picture Editor / Enhancer Toolbar1=Choose Selfie Template Toolbar2=Choose Your Picture and Upload Toolbar3=Edit and Download Final Image -Upload=Enhance Your Picture +Upload=Enhance Picture placeholder=Choose File for Upload... gui.loading=Processing Picture -gui.loadingLong=Please wait ...Processing Picture \ No newline at end of file +gui.loadingLong=Please wait ...Processing Picture +change.language=Language +save=Save As \ No newline at end of file diff --git a/_i18n/messages_en.properties b/_i18n/messages_en.properties new file mode 100644 index 0000000..6189db0 --- /dev/null +++ b/_i18n/messages_en.properties @@ -0,0 +1,15 @@ +errPort=is not a valid HTTP port value +lagError=Event Loop Lag Exceeded: {0} milliseconds +errFileType=Invalid file type. Only jpg, png and gif image files are allowed. +errFileTooLarge=Uploaded file is too large. Please choose a file less than 20MB in size +appTitle=SAP Community Profile Picture Editor +appDescription=SAP Community Profile Picture Editor / Enhancer +Toolbar1=Choose Selfie Template +Toolbar2=Choose Your Picture and Upload +Toolbar3=Edit and Download Final Image +Upload=Enhance Picture +placeholder=Choose File for Upload... +gui.loading=Processing Picture +gui.loadingLong=Please wait ...Processing Picture +change.language=Language +save=Save As \ No newline at end of file diff --git a/_i18n/messages_fr.properties b/_i18n/messages_fr.properties new file mode 100644 index 0000000..f024b65 --- /dev/null +++ b/_i18n/messages_fr.properties @@ -0,0 +1,15 @@ +errPort=n'est pas une valeur de port HTTP valide +lagError=Event Loop Lag Exceeded: {0} milliseconds +errFileType=Iype de fichier invalide. Seuls les fichiers image jpg, png et gif sont autorisés. +errFileTooLarge=Le fichier téléchargé est trop volumineux. Veuillez choisir un fichier de moins de 20 Mo +appTitle=SAP Community Éditeur d'images de profil +appDescription=SAP Community Éditeur d'images de profil/ Enhancer +Toolbar1=Choisissez le modèle de selfie +Toolbar2=Choisissez votre image et téléchargez +Toolbar3=Modifier et télécharger l'image finale +Upload=Améliorer l'image +placeholder=Choisissez le fichier à télécharger... +gui.loading=Traitement de l'image +gui.loadingLong=Veuillez patienter...Traitement de l'image +change.language=Langue +save=Enregis. sous \ No newline at end of file diff --git a/_i18n/messages_iw.properties b/_i18n/messages_iw.properties new file mode 100644 index 0000000..068e6ad --- /dev/null +++ b/_i18n/messages_iw.properties @@ -0,0 +1,15 @@ +errPort=חוקי HTTP אינו ערך יציאת +lagError=Event Loop Lag Exceeded: {0} milliseconds +errFileType=Invalid file type. Only jpg, png and gif image files are allowed. +errFileTooLarge=Uploaded file is too large. Please choose a file less than 20MB in size +appTitle=עורך תמונת פרופיל SAP Community +appDescription=עורך תמונת פרופיל SAP Community +Toolbar1=Choose Selfie Template +Toolbar2=Choose Your Picture and Upload +Toolbar3=Edit and Download Final Image +Upload=שפר את תמונתך +placeholder=בחר קובץ להעלאה... +gui.loading=Processing Picture +gui.loadingLong=Please wait ...Processing Picture +change.language=שפה +save=שמר \ No newline at end of file diff --git a/app/profilePic/index.html b/app/profilePic/index.html index 9209dc3..74a00e2 100644 --- a/app/profilePic/index.html +++ b/app/profilePic/index.html @@ -19,6 +19,12 @@ "root": "./"}' data-sap-ui-frameOptions="allow"> + + diff --git a/app/profilePic/profilePic/controller/App.controller.js b/app/profilePic/profilePic/controller/App.controller.js index cb03e21..b591b89 100644 --- a/app/profilePic/profilePic/controller/App.controller.js +++ b/app/profilePic/profilePic/controller/App.controller.js @@ -2,31 +2,39 @@ /*eslint-env es6 */ "use strict"; sap.ui.define([ - "profilePic/controller/BaseController", - "sap/m/MessageToast", - "sap/ui/core/Core", - "sap/ui/model/json/JSONModel", - "sap/ui/Device", - "sap/suite/ui/commons/library" -], - function (BaseController, MessageToast, oCore, JSONModel, Device, SuiteLibrary) { - - return BaseController.extend("profilePic.controller.App", { - onInit: function () { - var oImageEditor = this.getView().byId("image"), - oModel = new JSONModel({ - blocked: true - }) + "profilePic/controller/BaseController", + "sap/m/MessageToast", + "sap/m/MessageBox", + "sap/ui/core/Core", + "sap/ui/model/json/JSONModel", + "sap/ui/Device", + "sap/suite/ui/commons/library" + ], + function (BaseController, MessageToast, MessageBox, oCore, JSONModel, Device, SuiteLibrary) { + return BaseController.extend("profilePic.controller.App", { + onInit: function () { + var oImageEditor = this.getView().byId("image"), + oModel = new JSONModel({ + blocked: true + }) this.getView().setModel(oModel) + if (!Device.browser.msie) { // svg files are not supported in Internet Explorer oImageEditor.setCustomShapeSrc(sap.ui.require.toUrl("sap/suite/ui/commons/statusindicator") + "/shapes/bulb.svg") } - }, + var langModel = new JSONModel( + sap.ui.require.toUrl("profilePic/languages.json")) + this.getView().setModel(langModel, "languages") + //sap.ui.getCore().getConfiguration().setLanguage("he") + //sap.ui.getCore().getConfiguration().setRTL(true) + + + }, - uploadPressed: async function (oEvent) { - let view = this.getView() + uploadPressed: async function (oEvent) { + let view = this.getView() let controller = view.getController() let oFileUploader = view.byId("fileToUpload") if (!oFileUploader.getValue()) { @@ -40,59 +48,80 @@ sap.ui.define([ oImageEditor.applyVisibleCrop() console.log(oImageEditor.getMode()) oFileUploader.getProcessedBlobsFromArray = async function (oBlobs) { - return new Promise(async (resolve, reject) => { - let newBlob = await oImageEditor.getImageAsBlob() + return new Promise(async(resolve, reject) => { + let newBlob = await oImageEditor.getImageAsBlob() resolve([newBlob]) - }) - } - controller.startBusy() - oFileUploader.upload(true) - }, + }) + } + controller.startBusy() + oFileUploader.upload(true) + }, - uploadStart: async function (oEvent) { - let view = this.getView() + uploadStart: async function (oEvent) { + let view = this.getView() let controller = view.getController() controller.startBusy() - }, + }, - uploadComplete: async function (oEvent) { - let view = this.getView() + uploadComplete: async function (oEvent) { + let view = this.getView() let controller = view.getController() let dataURL = "data:image/png;base64," + oEvent.getParameters().responseRaw let oImageEditor = view.byId("image") await oImageEditor.setSrc(dataURL) controller.endBusy(controller) - }, + }, - onSaveAsPress: async function () { - let view = this.getView() + onSaveAsPress: async function () { + let view = this.getView() let controller = view.getController() let oImageEditor = view.byId("image") - oImageEditor.openSaveDialog() - controller.openUrl('https://people.sap.com/', true) + if (!oImageEditor.getLoaded()) { + MessageToast.show("Load a file first") + } else { + oImageEditor.openSaveDialog() + controller.openUrl('https://people.sap.com/', true) + } - }, - onImageLoaded: async function (oEvent) { - let view = this.getView() + }, + onImageLoaded: async function (oEvent) { + let view = this.getView() let oImageEditor = view.byId("image") oImageEditor.zoomToFit() oImageEditor.setCropAreaByRatio(1, 1) oImageEditor.setMode(SuiteLibrary.ImageEditorMode.CropEllipse) console.log(oImageEditor.getMode()) - - - }, - onFileChange: async function (oEvent) { - var oFile = oEvent.getParameter("files")[0], - oImageEditor = this.getView().byId("image") + }, + onFileChange: async function (oEvent) { + var oFile = oEvent.getParameter("files")[0], + oImageEditor = this.getView().byId("image") if (!oFile) { return } this.getView().getModel().setProperty("/blocked", true) await oImageEditor.setSrc(oFile) + }, + + redirectFiori: function (url, newLang) { + if (url.includes("sap-language")) { + const queryString = window.location.search; + const urlParams = new URLSearchParams(queryString); + const lang = urlParams.get('sap-language') + return url.replace("sap-language=" + lang, "sap-language=" + newLang) + } else { + return url.replace("profilePic/", "profilepic/?sap-language=" + newLang) } - }) - } -) \ No newline at end of file + }, + + onLanguageChange: async function (oEvent) { + var selText = oEvent.getParameter("selectedItem").getText() + var selKey = oEvent.getParameter("selectedItem").getKey() + if (selKey != sap.ui.getCore().getConfiguration().getLanguage()) { + window.location.href = this.redirectFiori(window.location.href, selKey) + } + } + + }) +}) \ No newline at end of file diff --git a/app/profilePic/profilePic/languages.json b/app/profilePic/profilePic/languages.json new file mode 100644 index 0000000..9fc4184 --- /dev/null +++ b/app/profilePic/profilePic/languages.json @@ -0,0 +1,8 @@ +{ +"title" : "TESTTEST", +"languages" : [ + { "code" : "en", "name" : "English" }, + {"code" : "fr" , "name" : "French" }, + {"code" : "he" , "name" : "Hebrew" } +] +} diff --git a/app/profilePic/profilePic/view/App.view.xml b/app/profilePic/profilePic/view/App.view.xml index abb2e60..2b531d8 100644 --- a/app/profilePic/profilePic/view/App.view.xml +++ b/app/profilePic/profilePic/view/App.view.xml @@ -1,28 +1,28 @@ - - - - - - - - - - -