From 68e8903f9560a9de494426756aed61aea565ca07 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 24 Oct 2020 20:17:24 +0200 Subject: [PATCH] Pass through the language to the editor SDK. --- backend/i18n/frontend_en.json | 4 +- backend/i18n/source/frontend_en.json | 4 +- .../Squidex/wwwroot/scripts/editor-log.html | 16 +++-- .../src/Squidex/wwwroot/scripts/editor-sdk.js | 72 ++++++++++++++++--- .../shared/forms/field-editor.component.html | 3 +- .../forms/editors/iframe-editor.component.ts | 20 +++++- 6 files changed, 98 insertions(+), 21 deletions(-) diff --git a/backend/i18n/frontend_en.json b/backend/i18n/frontend_en.json index 0fdae5018..5aa0608e6 100644 --- a/backend/i18n/frontend_en.json +++ b/backend/i18n/frontend_en.json @@ -384,8 +384,8 @@ "contents.localizedFieldDescription": "The '{fieldName}' field of the content item (localized).", "contents.newStatusFieldDescription": "The new status of the content item.", "contents.noReference": "- No Reference -", - "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will loose them.\n\n**Do you want to continue anyway?**", - "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will loose them.\n\n**Do you want to continue anyway?**", + "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will lose them.\n\n**Do you want to continue anyway?**", + "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will lose them.\n\n**Do you want to continue anyway?**", "contents.pendingChangesTitle": "Unsaved changes", "contents.referencesCreateNew": "Add New", "contents.referencesCreatePublish": "Create and Publish", diff --git a/backend/i18n/source/frontend_en.json b/backend/i18n/source/frontend_en.json index c550862e8..d084a9108 100644 --- a/backend/i18n/source/frontend_en.json +++ b/backend/i18n/source/frontend_en.json @@ -384,8 +384,8 @@ "contents.localizedFieldDescription": "The '{fieldName}' field of the content item (localized).", "contents.newStatusFieldDescription": "The new status of the content item.", "contents.noReference": "- No Reference -", - "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will loose them.\n\n**Do you want to continue anyway?**", - "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will loose them.\n\n**Do you want to continue anyway?**", + "contents.pendingChangesTextToChange": "You have unsaved changes.\n\nWhen you change the status you will lose them.\n\n**Do you want to continue anyway?**", + "contents.pendingChangesTextToClose": "You have unsaved changes.\n\nWhen you close the current content view you will lose them.\n\n**Do you want to continue anyway?**", "contents.pendingChangesTitle": "Unsaved changes", "contents.referencesCreateNew": "Add New", "contents.referencesCreatePublish": "Create and Publish", diff --git a/backend/src/Squidex/wwwroot/scripts/editor-log.html b/backend/src/Squidex/wwwroot/scripts/editor-log.html index 897dde0b4..16be55e0c 100644 --- a/backend/src/Squidex/wwwroot/scripts/editor-log.html +++ b/backend/src/Squidex/wwwroot/scripts/editor-log.html @@ -22,7 +22,7 @@ var field = new SquidexFormField(); function logState(message) { - console.log(`${message}. Value: <${JSON.stringify(field.getValue(), 2)}>, Form Value: <${JSON.stringify(field.getFormValue())}>`); + console.log(`${message}.\n\Language: ${field.getLanguage()}\n\nValue\n<${JSON.stringify(field.getValue(), 2)}>\n\nForm Value\n<${JSON.stringify(field.getFormValue())}>\n\nDisabled: ${field.isDisabled()}`); } logState('Setup'); @@ -41,12 +41,18 @@ logState('Init'); }); - // Handle the value change event and set the text to the editor. - field.onValueChanged(function (value) { - logState(`Value changed: <${JSON.stringify(value, 2)}>`); + field.onValueChanged(function () { + logState('Value changed'); + }); + + field.onFormValueChanged(function () { + logState('Form value changed'); + }); + + field.onLanguageChanged(function () { + logState('Field language changed'); }); - // Disable the editor when it should be disabled. field.onDisabled(function (disabled) { logState(`Disabled: <${JSON.stringify(disabled, 2)}>`); }); diff --git a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js index baa25ec4e..34bbc0260 100644 --- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js +++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js @@ -86,7 +86,7 @@ function SquidexPlugin() { }, /** - * Register the init handler. + * Register an function that is called when the sidebar is initialized. */ onInit: function (callback) { initHandler = callback; @@ -95,7 +95,9 @@ function SquidexPlugin() { }, /** - * Register the content changed handler. + * Register an function that is called whenever the value of the content has changed. + * + * The callback has one argument with the value of the content (any). */ onContentChanged: function (callback) { contentHandler = callback; @@ -128,6 +130,8 @@ function SquidexFormField() { var fullscreenHandler = false; var valueHandler; var value; + var languageHandler; + var language; var formValueHandler; var formValue; var context; @@ -151,6 +155,12 @@ function SquidexFormField() { } } + function raiseLanguageChanged() { + if (languageHandler && language) { + languageHandler(language); + } + } + function raiseFullscreen() { if (fullscreenHandler) { fullscreenHandler(fullscreen); @@ -186,6 +196,10 @@ function SquidexFormField() { fullscreen = event.data.fullscreen; raiseFullscreen(); + } else if (type === 'languageChanged') { + language = event.data.language; + + raiseLanguageChanged(); } else if (type === 'init') { context = event.data.context; @@ -220,6 +234,27 @@ function SquidexFormField() { return formValue; }, + /* + * Get the current field language. + */ + getLanguage: function () { + return language; + }, + + /* + * Get the disabled state. + */ + isDisabled: function () { + return disabled; + }, + + /* + * Get the fullscreen state. + */ + isFullscreen: function () { + return fullscreen; + }, + /** * Notifies the control container that the editor has been touched. */ @@ -265,7 +300,7 @@ function SquidexFormField() { }, /** - * Register the init handler. + * Register an function that is called when the field is initialized. */ onInit: function (callback) { initHandler = callback; @@ -274,7 +309,9 @@ function SquidexFormField() { }, /** - * Register the disabled handler. + * Register an function that is called whenever the field is disabled or enabled. + * + * The callback has one argument with disabled state (disabled = true, enabled = false). */ onDisabled: function (callback) { disabledHandler = callback; @@ -283,25 +320,42 @@ function SquidexFormField() { }, /** - * Register the value changed handler. + * Register an function that is called whenever the field language is changed. + * + * The callback has one argument with the language of the field (string). + */ + onLanguageChanged: function (callback) { + languageHandler = callback; + + raiseLanguageChanged(); + }, + + /** + * Register an function that is called whenever the value of the field has changed. + * + * The callback has one argument with the value of the field (any). */ onValueChanged: function (callback) { valueHandler = callback; raiseValueChanged(); }, - + /** - * Register the form value changed handler. + * Register an function that is called whenever the value of the content has changed. + * + * The callback has one argument with the value of the content (any). */ onFormValueChanged: function (callback) { formValueHandler = callback; raiseFormValueChanged(); }, - + /** - * Register the fullscreen changed handler. + * Register an function that is called whenever the fullscreen mode has changed. + * + * The callback has one argument with fullscreen state (fullscreen on = true, fullscreen off = false). */ onFullscreen: function (callback) { fullscreenHandler = callback; diff --git a/frontend/app/features/content/shared/forms/field-editor.component.html b/frontend/app/features/content/shared/forms/field-editor.component.html index 438372450..857ab7afc 100644 --- a/frontend/app/features/content/shared/forms/field-editor.component.html +++ b/frontend/app/features/content/shared/forms/field-editor.component.html @@ -12,7 +12,8 @@ + [formValue]="form?.value | async" + [language]="language?.iso2Code"> diff --git a/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts b/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts index b3fa7063a..3fd9bf35d 100644 --- a/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts +++ b/frontend/app/framework/angular/forms/editors/iframe-editor.component.ts @@ -48,6 +48,9 @@ export class IFrameEditorComponent extends StatefulControlComponent @Input() public formValue: any; + @Input() + public language: string; + @Input() public url: string; @@ -72,9 +75,13 @@ export class IFrameEditorComponent extends StatefulControlComponent this.setupUrl(); } - if (changes['formValue'] && this.formValue) { + if (changes['formValue']) { this.sendFormValue(); } + + if (changes['language']) { + this.sendLanguage(); + } } } @@ -96,6 +103,7 @@ export class IFrameEditorComponent extends StatefulControlComponent this.sendInit(); this.sendFullscreen(); this.sendFormValue(); + this.sendLanguage(); this.sendDisabled(); this.sendValue(); } else if (type === 'resize') { @@ -158,7 +166,15 @@ export class IFrameEditorComponent extends StatefulControlComponent } private sendFormValue() { - this.sendMessage('formValueChanged', { formValue: this.formValue }); + if (this.formValue) { + this.sendMessage('formValueChanged', { formValue: this.formValue }); + } + } + + private sendLanguage() { + if (this.language) { + this.sendMessage('languageChanged', { language: this.language }); + } } private toggleFullscreen(isFullscreen: boolean) {