tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Provide index to array.

pull/683/head
Sebastian Stehle 5 years ago
parent
434218354f
commit
55d0dc5061
8 changed files with 203 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      backend/src/Squidex/wwwroot/scripts/editor-log.html
  2. 128
      backend/src/Squidex/wwwroot/scripts/editor-sdk.js
  3. 1
      frontend/app/features/content/shared/forms/array-item.component.html
  4. 1
      frontend/app/features/content/shared/forms/array-section.component.html
  5. 3
      frontend/app/features/content/shared/forms/array-section.component.ts
  6. 1
      frontend/app/features/content/shared/forms/field-editor.component.html
  7. 3
      frontend/app/features/content/shared/forms/field-editor.component.ts
  8. 14
      frontend/app/features/content/shared/forms/iframe-editor.component.ts

66
backend/src/Squidex/wwwroot/scripts/editor-log.html
View File

@ -6,23 +6,81 @@
<!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js --> <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
<script src="editor-sdk.js"></script> <script src="editor-sdk.js"></script>
<style>
#textarea {
box-sizing: border-box;
min-width: 100%;
min-height: 200px;
margin-top: 10px;
}
</style>
</head> </head>
<body> <body>
<button id="button">New Value</button> <div>
<button id="button">Generate New Value</button>
</div>
<textarea id="textarea"></textarea>
<script> <script>
var numberGenerator = 1; var numberGenerator = 1;
var button = document.getElementById('button'); var button = document.getElementById('button');
var textarea = document.getElementById('textarea');
// When the field is instantiated it notifies the UI that it has been loaded. // When the field is instantiated it notifies the UI that it has been loaded.
// //
// Furthermore it sends the current size to the parent. // Furthermore it sends the current size to the parent.
var field = new SquidexFormField(); var field = new SquidexFormField();
function logState(message) { 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'); logState('Setup');
@ -49,6 +107,10 @@
logState('Form value changed'); logState('Form value changed');
}); });
field.onMoved(function (index) {
logState('Form value moved');
})
field.onLanguageChanged(function () { field.onLanguageChanged(function () {
logState('Field language changed'); logState('Field language changed');
}); });

128
backend/src/Squidex/wwwroot/scripts/editor-sdk.js
View File

@ -27,6 +27,18 @@ function measureAndNotifyParent() {
}, 50); }, 50);
} }
function isNumber(value) {
return typeof value === 'number';
}
function isString(value) {
return typeof value === 'string';
}
function isFunction(value) {
return typeof value === 'function';
}
function SquidexPlugin() { function SquidexPlugin() {
var initHandler; var initHandler;
var initCalled = false; var initCalled = false;
@ -87,8 +99,14 @@ function SquidexPlugin() {
/** /**
* Register an function that is called when the sidebar is initialized. * Register an function that is called when the sidebar is initialized.
*
* @param {Function} callback: The callback to invoke.
*/ */
onInit: function (callback) { onInit: function (callback) {
if (!isFunction(callback)) {
return;
}
initHandler = callback; initHandler = callback;
raiseInit(); raiseInit();
@ -97,9 +115,13 @@ function SquidexPlugin() {
/** /**
* Register an function that is called whenever the value of the content has changed. * 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) { onContentChanged: function (callback) {
if (!isFunction(callback)) {
return;
}
contentHandler = callback; contentHandler = callback;
raiseContentChanged(); raiseContentChanged();
@ -128,12 +150,14 @@ function SquidexFormField() {
var disabled = false; var disabled = false;
var fullscreen = false; var fullscreen = false;
var fullscreenHandler = false; var fullscreenHandler = false;
var movedHandler;
var valueHandler; var valueHandler;
var value; var value;
var languageHandler; var languageHandler;
var language; var language;
var formValueHandler; var formValueHandler;
var formValue; var formValue;
var index;
var currentConfirm; var currentConfirm;
var currentPickAssets; var currentPickAssets;
var context; var context;
@ -145,6 +169,12 @@ function SquidexFormField() {
} }
} }
function raiseFullscreen() {
if (fullscreenHandler) {
fullscreenHandler(fullscreen);
}
}
function raiseValueChanged() { function raiseValueChanged() {
if (valueHandler) { if (valueHandler) {
valueHandler(value); valueHandler(value);
@ -158,14 +188,14 @@ function SquidexFormField() {
} }
function raiseLanguageChanged() { function raiseLanguageChanged() {
if (languageHandler && language) { if (languageHandler && isString(language)) {
languageHandler(language); languageHandler(language);
} }
} }
function raiseFullscreen() { function raisedMoved() {
if (fullscreenHandler) { if (movedHandler && isNumber(index)) {
fullscreenHandler(fullscreen); movedHandler(index);
} }
} }
@ -181,11 +211,29 @@ function SquidexFormField() {
var type = event.data.type; var type = event.data.type;
if (type === 'disabled') { if (type === 'disabled') {
if (disabled !== event.data.isDisabled) { var newDisabled = event.data.isDisabled;
disabled = event.data.isDisabled;
if (disabled !== newDisabled) {
disabled = newDisabled;
raiseDisabled(); 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') { } else if (type === 'valueChanged') {
value = event.data.value; value = event.data.value;
@ -198,10 +246,6 @@ function SquidexFormField() {
fullscreen = event.data.fullscreen; fullscreen = event.data.fullscreen;
raiseFullscreen(); raiseFullscreen();
} else if (type === 'languageChanged') {
language = event.data.language;
raiseLanguageChanged();
} else if (type === 'init') { } else if (type === 'init') {
context = event.data.context; context = event.data.context;
@ -259,6 +303,13 @@ function SquidexFormField() {
return language; return language;
}, },
/**
* Get the current index when the field is an array item.
*/
getIndex: function () {
return index;
},
/** /**
* Get the disabled state. * Get the disabled state.
*/ */
@ -345,7 +396,7 @@ function SquidexFormField() {
* @param {function} callback The callback to invoke when the dialog is completed or closed. * @param {function} callback The callback to invoke when the dialog is completed or closed.
*/ */
confirm: function (title, text, callback) { confirm: function (title, text, callback) {
if (!callback || typeof callback !== 'function') { if (!isFunction(callback)) {
return; return;
} }
@ -367,7 +418,7 @@ function SquidexFormField() {
* @param {function} callback The callback to invoke when the dialog is completed or closed. * @param {function} callback The callback to invoke when the dialog is completed or closed.
*/ */
pickAssets: function (callback) { pickAssets: function (callback) {
if (!callback || typeof callback !== 'function') { if (!isFunction(callback)) {
return; return;
} }
@ -385,8 +436,29 @@ function SquidexFormField() {
/** /**
* Register an function that is called when the field is initialized. * Register an function that is called when the field is initialized.
*
* @param {Function} callback: The callback to invoke.
*/ */
onInit: function (callback) { 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; initHandler = callback;
raiseInit(); raiseInit();
@ -395,9 +467,13 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the field is disabled or enabled. * 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) { onDisabled: function (callback) {
if (!isFunction(callback)) {
return;
}
disabledHandler = callback; disabledHandler = callback;
raiseDisabled(); raiseDisabled();
@ -406,9 +482,13 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the field language is changed. * 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) { onLanguageChanged: function (callback) {
if (!isFunction(callback)) {
return;
}
languageHandler = callback; languageHandler = callback;
raiseLanguageChanged(); raiseLanguageChanged();
@ -417,9 +497,13 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the value of the field has changed. * 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) { onValueChanged: function (callback) {
if (!isFunction(callback)) {
return;
}
valueHandler = callback; valueHandler = callback;
raiseValueChanged(); raiseValueChanged();
@ -428,9 +512,13 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the value of the content has changed. * 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) { onFormValueChanged: function (callback) {
if (!isFunction(callback)) {
return;
}
formValueHandler = callback; formValueHandler = callback;
raiseFormValueChanged(); raiseFormValueChanged();
@ -439,9 +527,13 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the fullscreen mode has changed. * 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) { onFullscreen: function (callback) {
if (!isFunction(callback)) {
return;
}
fullscreenHandler = callback; fullscreenHandler = callback;
raiseFullscreen(); raiseFullscreen();

1
frontend/app/features/content/shared/forms/array-item.component.html
View File

@ -49,6 +49,7 @@
[form]="form" [form]="form"
[formContext]="formContext" [formContext]="formContext"
[formSection]="section" [formSection]="section"
[index]="index"
[language]="language" [language]="language"
[languages]="languages"> [languages]="languages">
</sqx-array-section> </sqx-array-section>

1
frontend/app/features/content/shared/forms/array-section.component.html
View File

@ -13,6 +13,7 @@
[form]="form" [form]="form"
[formContext]="formContext" [formContext]="formContext"
[formModel]="child" [formModel]="child"
[index]="index"
[canUnset]="canUnset" [canUnset]="canUnset"
[language]="language" [language]="language"
[languages]="languages"> [languages]="languages">

3
frontend/app/features/content/shared/forms/array-section.component.ts
View File

@ -31,6 +31,9 @@ export class ArraySectionComponent {
@Input() @Input()
public languages: ReadonlyArray<AppLanguageDto>; public languages: ReadonlyArray<AppLanguageDto>;
@Input()
public index: number;
@Input() @Input()
public canUnset: boolean; public canUnset: boolean;

1
frontend/app/features/content/shared/forms/field-editor.component.html
View File

@ -13,6 +13,7 @@
[context]="formContext" [context]="formContext"
[formControl]="editorControl" [formControl]="editorControl"
[formValue]="form.valueChanges | async" [formValue]="form.valueChanges | async"
[formIndex]="index"
[language]="language?.iso2Code"> [language]="language?.iso2Code">
</sqx-iframe-editor> </sqx-iframe-editor>
</ng-container> </ng-container>

3
frontend/app/features/content/shared/forms/field-editor.component.ts
View File

@ -32,6 +32,9 @@ export class FieldEditorComponent implements OnChanges {
@Input() @Input()
public languages: ReadonlyArray<AppLanguageDto>; public languages: ReadonlyArray<AppLanguageDto>;
@Input()
public index: number;
@Input() @Input()
public canUnset: boolean; public canUnset: boolean;

14
frontend/app/features/content/shared/forms/iframe-editor.component.ts
View File

@ -49,6 +49,9 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
@Input() @Input()
public formValue: any; public formValue: any;
@Input()
public formIndex?: number | null;
@Input() @Input()
public language: string; public language: string;
@ -86,6 +89,10 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
if (changes['language']) { if (changes['language']) {
this.sendLanguage(); this.sendLanguage();
} }
if (changes['formIndex']) {
this.sendMoved();
}
} }
} }
@ -109,6 +116,7 @@ export class IFrameEditorComponent extends StatefulControlComponent<State, any>
this.sendFormValue(); this.sendFormValue();
this.sendLanguage(); this.sendLanguage();
this.sendDisabled(); this.sendDisabled();
this.sendMoved();
this.sendValue(); this.sendValue();
} else if (type === 'resize') { } else if (type === 'resize') {
const { height } = event.data; 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) { private toggleFullscreen(isFullscreen: boolean) {
this.next({ isFullscreen }); this.next({ isFullscreen });

Write Preview
Loading…
Cancel
Save