Support basic editors from squidex.

Squidex · Oct 27, 2023 · 138487b · 138487b
1 parent c583678
commit 138487b
Show file tree

Hide file tree

Showing 10 changed files with 675 additions and 0 deletions.
diff --git a/editors/editor-combined.html b/editors/editor-combined.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+        }
+    </style>
+</head>
+
+<body>
+    <textarea class="form-control" id="editor"></textarea>
+
+    <script>
+        var element = document.getElementById('editor');
+
+        // 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();
+
+        // Handle the value change event and set the text to the editor.
+        field.onValueChanged(function (value) {
+            element.value = value || '';
+        });
+
+        // Disable the editor when it should be disabled.
+        field.onDisabled(function (disabled) {
+            element.disabled = disabled;
+        });
+
+        field.onFormValueChanged(function(value) {
+            if (value.a && value.a.iv && value.b && value.b.iv) {
+                element.value = value.a.iv + value.b.iv;
+
+                field.valueChanged(element.value);
+            }
+        });
+    </script>
+</body>
+
+</html>
diff --git a/editors/editor-context.html b/editors/editor-context.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+        }
+    </style>
+</head>
+
+<body>
+    <script>
+        function grow(element) {
+            element.style.height = "5px";
+            element.style.height = (element.scrollHeight)+"px";
+        }
+    </script>
+
+    <textarea oninput="grow(this)" class="form-control" name="content" id="editor"></textarea>
+
+    <script>
+        var element = document.getElementById('editor');
+
+        // 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();
+
+        // Init is called once with a context that contains the app name, schema name and authentication information.
+        field.onInit(function (context) {
+            element.innerHTML = JSON.stringify(context, null, 2);
+
+            grow(element);
+        });
+    </script>
+</body>
+
+</html>
diff --git a/editors/editor-dialogs.html b/editors/editor-dialogs.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <button class="btn btn-outline-secondary" id="alert">
+        ALERT
+    </button>
+
+    <button class="btn btn-outline-secondary" id="info">
+        INFO
+    </button>
+
+    <button class="btn btn-outline-secondary" id="confirm">
+        CONFIRM
+    </button>
+
+    <button class="btn btn-outline-secondary" id="pickAssets">
+        PICK ASSETS
+    </button>
+
+    <button class="btn btn-outline-secondary" id="pickContents">
+        PICK CONTENTS
+    </button>
+
+    <script>
+        // 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();
+
+        let selectedContents;
+
+        document.getElementById('alert').addEventListener('click', function () {
+            field.notifyError('ERROR Text');
+        });
+
+        document.getElementById('info').addEventListener('click', function () {
+            field.notifyInfo('INFO Text');
+        });
+
+        document.getElementById('confirm').addEventListener('click', function () {
+            field.confirm('CONFIRM Title', 'CONFIRM Text', function (confirmed) {
+                console.log('CONFIRMED: ' + confirmed);
+            });
+        });
+
+        document.getElementById('pickAssets').addEventListener('click', function () {
+            field.pickAssets(function (assets) {
+                console.log('ASSETS: ' + JSON.stringify(assets, undefined, 2));
+            });
+        });
+
+        document.getElementById('pickContents').addEventListener('click', function () {
+            field.pickContents(undefined, function (contents) {
+                selectedContents = contents.map(x => x.id);
+
+                console.log('ASSETS: ' + JSON.stringify(contents, undefined, 2));
+            }, undefined, selectedContents);
+        });
+    </script>
+</body>
+
+</html>
diff --git a/editors/editor-log.html b/editors/editor-log.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+            font-family: monospace;
+            font-size: 12px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="mb-2">
+        <button class="btn btn-outline-secondary" id="button">Generate New Value</button>
+    </div>
+
+    <textarea class="form-control" readonly id="textarea"></textarea>
+
+    <script>
+        var numberGenerator = 1;
+
+        // The button to generate a new value.
+        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) {
+            var text = '';
+
+            function appendLabel(value) {
+                value += ':';
+
+                text += value.padEnd(20);
+            }
+
+            function appendLine(value) {
+                if (value !== undefined) {
+                    text += value;
+                }
+
+                text += '\n';
+            }
+
+            appendLine(message);
+
+            appendLabel('Language');
+            appendLine(`<${JSON.stringify(field.getLanguage(), 2)}>`);
+
+            appendLabel('Is FullScreen');
+            appendLine(field.isFullscreen());
+
+            appendLabel('Is Expanded');
+            appendLine(field.isExpanded());
+
+            appendLabel('Index');
+            appendLine(field.getIndex());
+
+            appendLabel('Value of Field');
+            appendLine(`<${JSON.stringify(field.getValue(), 2)}>`);
+
+            appendLabel('Value of Form');
+            appendLine(`<${JSON.stringify(field.getFormValue(), 2)}>`);
+
+            appendLabel('Disabled: ');
+            appendLine(field.isDisabled());
+
+            console.log(text);
+
+            if (!textarea.value) {
+                textarea.value = text;
+            } else {
+                textarea.value = textarea.value + '\n---\n\n' + text;
+                textarea.scrollLeft = 0;
+                textarea.scrollTop = textarea.scrollHeight;
+            }
+        }
+
+        logState('Setup');
+
+        if (button) {
+            button.addEventListener('click', function () {
+                numberGenerator++;
+
+                field.valueChanged(numberGenerator);
+
+                logState('Click');
+            });
+        }
+
+        field.onInit(function () {
+            logState('Init');
+        });
+
+        field.onValueChanged(function () {
+            logState('Value changed');
+        });
+
+        field.onFormValueChanged(function () {
+            logState('Form value changed');
+        });
+
+        field.onMoved(function (index) {
+            logState('Form value moved');
+        });
+
+        field.onLanguageChanged(function () {
+            logState('Field language changed');
+        });
+
+        field.onExpanded(function () {
+            logState('Expanded changed');
+        });
+
+        field.onDisabled(function (disabled) {
+            logState(`Disabled: <${JSON.stringify(disabled, 2)}>`);
+        });
+    </script>
+</body>
+
+</html>
diff --git a/editors/editor-plain.html b/editors/editor-plain.html
@@ -0,0 +1,73 @@
+<html>
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+        }
+    </style>
+</head>
+
+<body style="margin: 0px; padding: 0px;">
+	<div class="mb-2">
+		<button class="btn btn-outline-secondary" id="expanded">
+			Toggle Expanded
+		</button>
+		<button class="btn btn-outline-secondary" id="fullscreen">
+			Toggle Fullscreen
+		</button>
+	</div>
+
+	<div>
+		<textarea class="form-control" id="editor"></textarea>
+	</div>
+
+	<script>
+		var element = document.getElementById('editor');
+
+        // 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();
+
+		document.getElementById('expanded').addEventListener('click', function () {
+			field.toggleExpanded();
+        });
+
+        document.getElementById('fullscreen').addEventListener('click', function () {
+            field.toggleFullscreen();
+        });
+
+		field.onValueChanged(function (value) {
+			if (value) {
+				element.value = JSON.stringify(value);
+			} else {
+				element.value = '';
+			}
+		});
+
+		field.onDisabled(function (disabled) {
+			element.disabled = disabled;
+		});
+
+		element.addEventListener('change', function ()  {
+			var value = element.value;
+
+			if (value) {
+				field.valueChanged(JSON.parse(value));
+			} else {
+				field.valueChanged(undefined);
+			}
+		});
+    </script>
+</body>
+</html>