Provide index to array.

5 years ago · 55d0dc5061
8 changed files with 203 additions and 26 deletions
--- a/backend/src/Squidex/wwwroot/scripts/editor-log.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-log.html
@ -6,23 +6,81 @@

    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>
+
+    <style>
+        #textarea {
+            box-sizing: border-box;
+            min-width: 100%;
+            min-height: 200px;
+            margin-top: 10px;
+        }
+    </style>
 </head>

 <body>
-    <button id="button">New Value</button>
+    <div>
+        <button id="button">Generate New Value</button>
+    </div>
+
+    <textarea id="textarea"></textarea>

    <script>
        var numberGenerator = 1;

        var button = document.getElementById('button');

+        var textarea = document.getElementById('textarea');
+
        // When the field is instantiated it notifies the UI that it has been loaded.
        // 
        // Furthermore it sends the current size to the parent.
        var field = new SquidexFormField();

        function logState(message) {
-            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()}`);
+            var text = '';
+
+            function append(value) {
+                text += value;
+            }
+
+            function appendLine(value) {
+                if (value !== undefined) {
+                    append(value);
+                }
+
+                text += '\n';
+            }
+
+            appendLine(message);
+            appendLine();
+
+            append('Language: ');
+            appendLine(field.getLanguage());
+            appendLine();
+
+            append('Disabled: ');
+            appendLine(field.isDisabled());
+            appendLine();
+
+            append('FullScreen: ');
+            appendLine(field.isFullscreen());
+            appendLine();
+
+            append('Index: ');
+            appendLine(field.getIndex());
+            appendLine();
+
+            appendLine('Value');
+            appendLine(`<${JSON.stringify(field.getValue(), 2)}>`);
+            appendLine();
+
+            appendLine('Form Value');
+            appendLine(`<${JSON.stringify(field.getFormValue(), 2)}>`);
+            appendLine();
+
+            console.log(text);
+
+            textarea.value = text;
        }

        logState('Setup');
@ -49,6 +107,10 @@
            logState('Form value changed');
        });

+        field.onMoved(function (index) {
+            logState('Form value moved');
+        })
+
        field.onLanguageChanged(function () {
            logState('Field language changed');
        });
--- a/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
+++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.js
@ -27,6 +27,18 @@ function measureAndNotifyParent() {
    }, 50);
 }

+function isNumber(value) {
+    return typeof value === 'number';
+}
+
+function isString(value) {
+    return typeof value === 'string';
+}
+
+function isFunction(value) {
+    return typeof value === 'function';
+}
+
 function SquidexPlugin() {
    var initHandler;
    var initCalled = false;
@ -87,8 +99,14 @@ function SquidexPlugin() {

        /**
         * Register an function that is called when the sidebar is initialized.
+         *
+         * @param {Function} callback: The callback to invoke.
         */
        onInit: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
            initHandler = callback;

            raiseInit();
@ -97,9 +115,13 @@ function SquidexPlugin() {
        /**
         * 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).
+         * @param {Function} callback: The callback to invoke. Argument 1: Content value (any).
         */
        onContentChanged: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
            contentHandler = callback;

            raiseContentChanged();
@ -128,12 +150,14 @@ function SquidexFormField() {
    var disabled = false;
    var fullscreen = false;
    var fullscreenHandler = false;
+    var movedHandler;
    var valueHandler;
    var value;
    var languageHandler;
    var language;
    var formValueHandler;
    var formValue;
+    var index;
    var currentConfirm;
    var currentPickAssets;
    var context;
@ -145,6 +169,12 @@ function SquidexFormField() {
        }
    }

+    function raiseFullscreen() {
+        if (fullscreenHandler) {
+            fullscreenHandler(fullscreen);
+        }
+    }
+
    function raiseValueChanged() {
        if (valueHandler) {
            valueHandler(value);
@ -158,14 +188,14 @@ function SquidexFormField() {
    }

    function raiseLanguageChanged() {
-        if (languageHandler && language) {
+        if (languageHandler && isString(language)) {
            languageHandler(language);
        }
    }

-    function raiseFullscreen() {
-        if (fullscreenHandler) {
-            fullscreenHandler(fullscreen);
+    function raisedMoved() {
+        if (movedHandler && isNumber(index)) {
+            movedHandler(index);
        }
    }

@ -181,11 +211,29 @@ function SquidexFormField() {
            var type = event.data.type;

            if (type === 'disabled') {
-                if (disabled !== event.data.isDisabled) {
-                    disabled = event.data.isDisabled;
+                var newDisabled = event.data.isDisabled;
+
+                if (disabled !== newDisabled) {
+                    disabled = newDisabled;

                    raiseDisabled();
                }
+            } else if (type === 'moved') {
+                var newIndex = event.data.index;
+
+                if (index !== newIndex) {
+                    index = newIndex;
+
+                    raisedMoved();
+                }
+            } else if (type === 'languageChanged') {
+                var newLanguage = event.data.language;
+
+                if (language !== newLanguage) {
+                    language = newLanguage;
+
+                    raiseLanguageChanged();
+                }
            } else if (type === 'valueChanged') {
                value = event.data.value;

@ -198,10 +246,6 @@ function SquidexFormField() {
                fullscreen = event.data.fullscreen;

                raiseFullscreen();
-            } else if (type === 'languageChanged') {
-                language = event.data.language;
-
-                raiseLanguageChanged();
            } else if (type === 'init') {
                context = event.data.context;

@ -259,6 +303,13 @@ function SquidexFormField() {
            return language;
        },

+        /**
+         * Get the current index when the field is an array item. 
+         */
+        getIndex: function () {
+            return index;
+        },
+
        /**
         * Get the disabled state.
         */
@ -345,7 +396,7 @@ function SquidexFormField() {
         * @param {function} callback The callback to invoke when the dialog is completed or closed.
         */
        confirm: function (title, text, callback) {
-            if (!callback || typeof callback !== 'function') {
+            if (!isFunction(callback)) {
                return;
            }

@ -367,7 +418,7 @@ function SquidexFormField() {
         * @param {function} callback The callback to invoke when the dialog is completed or closed.
         */
        pickAssets: function (callback) {
-            if (!callback || typeof callback !== 'function') {
+            if (!isFunction(callback)) {
                return;
            }

@ -385,8 +436,29 @@ function SquidexFormField() {

        /**
         * Register an function that is called when the field is initialized.
+         * 
+         * @param {Function} callback: The callback to invoke.
         */
        onInit: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
+            initHandler = callback;
+
+            raiseInit();
+        },
+
+        /**
+         * Register an function that is called when the field is moved.
+         *
+         * @param {Function} callback: The callback to invoke. Argument 1: New position (number).
+         */
+        onInit: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
            initHandler = callback;

            raiseInit();
@ -395,9 +467,13 @@ function SquidexFormField() {
        /**
         * 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).
+         * @param {Function} callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false).
         */
        onDisabled: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
            disabledHandler = callback;

            raiseDisabled();
@ -406,9 +482,13 @@ function SquidexFormField() {
        /**
         * Register an function that is called whenever the field language is changed.
         *
-         * The callback has one argument with the language of the field (string).
+         * @param {Function} callback: The callback to invoke. Argument 1: Language code (string).
         */
        onLanguageChanged: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
            languageHandler = callback;

            raiseLanguageChanged();
@ -417,9 +497,13 @@ function SquidexFormField() {
        /**
         * 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).
+         * @param {Function} callback: The callback to invoke. Argument 1: Field value (any).
         */
        onValueChanged: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
            valueHandler = callback;

            raiseValueChanged();
@ -428,9 +512,13 @@ function SquidexFormField() {
        /**
         * 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).
+         * @param {Function} callback: The callback to invoke. Argument 1: Content value (any).
         */
        onFormValueChanged: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
            formValueHandler = callback;

            raiseFormValueChanged();
@ -439,9 +527,13 @@ function SquidexFormField() {
        /**
         * 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).
+         * @param {Function} callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false).
         */
        onFullscreen: function (callback) {
+            if (!isFunction(callback)) {
+                return;
+            }
+
            fullscreenHandler = callback;

            raiseFullscreen();
--- a/frontend/app/features/content/shared/forms/array-item.component.html
+++ b/frontend/app/features/content/shared/forms/array-item.component.html
@ -49,6 +49,7 @@
                [form]="form"
                [formContext]="formContext"
                [formSection]="section"
+                [index]="index"
                [language]="language"
                [languages]="languages">
            </sqx-array-section>
--- a/frontend/app/features/content/shared/forms/array-section.component.html
+++ b/frontend/app/features/content/shared/forms/array-section.component.html
@ -13,6 +13,7 @@
            [form]="form"
            [formContext]="formContext"
            [formModel]="child"
+            [index]="index"
            [canUnset]="canUnset"
            [language]="language"
            [languages]="languages">
--- a/frontend/app/features/content/shared/forms/array-section.component.ts
+++ b/frontend/app/features/content/shared/forms/array-section.component.ts
@ -31,6 +31,9 @@ export class ArraySectionComponent {
    @Input()
    public languages: ReadonlyArray<AppLanguageDto>;

+    @Input()
+    public index: number;
+
    @Input()
    public canUnset: boolean;

--- a/frontend/app/features/content/shared/forms/field-editor.component.html
+++ b/frontend/app/features/content/shared/forms/field-editor.component.html
@ -13,6 +13,7 @@
                [context]="formContext"
                [formControl]="editorControl"
                [formValue]="form.valueChanges | async"
+                [formIndex]="index"
                [language]="language?.iso2Code">
            </sqx-iframe-editor>
 		</ng-container>
--- a/frontend/app/features/content/shared/forms/field-editor.component.ts
+++ b/frontend/app/features/content/shared/forms/field-editor.component.ts
@ -32,6 +32,9 @@ export class FieldEditorComponent implements OnChanges {
    @Input()
    public languages: ReadonlyArray<AppLanguageDto>;

+    @Input()
+    public index: number;
+
    @Input()
    public canUnset: boolean;

--- a/frontend/app/features/content/shared/forms/iframe-editor.component.ts
+++ b/frontend/app/features/content/shared/forms/iframe-editor.component.ts
@ -49,6 +49,9 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
    @Input()
    public formValue: any;

+    @Input()
+    public formIndex?: number | null;
+
    @Input()
    public language: string;

@ -86,6 +89,10 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
            if (changes['language']) {
                this.sendLanguage();
            }
+
+            if (changes['formIndex']) {
+                this.sendMoved();
+            }
        }
    }

@ -109,6 +116,7 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
                        this.sendFormValue();
                        this.sendLanguage();
                        this.sendDisabled();
+                        this.sendMoved();
                        this.sendValue();
                    } else if (type === 'resize') {
                        const { height } = event.data;
@ -222,6 +230,12 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
        }
    }

+    private sendMoved() {
+        if (Types.isNumber(this.formIndex)) {
+            this.sendMessage('moved', { index: this.formIndex });
+        }
+    }
+
    private toggleFullscreen(isFullscreen: boolean) {
        this.next({ isFullscreen });