Create jstree-editor.html

add custom editor plugin: "jstree-editor"
Squidex · Apr 18, 2019 · 76cc5ef · 76cc5ef
1 parent d9d6fbf
commit 76cc5ef
Showing 1 changed file with 112 additions and 0 deletions.
diff --git a/editors/jstree-editor.html b/editors/jstree-editor.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <script src="editor-sdk.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
+</head>
+
+<body style="min-height: 180px">
+    <button id="createTree" style="display:none">Create Tree</button>
+    <div id="jstree" style="display:none"></div>
+
+    <script>
+        var jstreeEditor = {};
+
+        jstreeEditor.field = new SquidexFormField();
+        jstreeEditor.defaultData = {
+            "id": 1,
+            "text": "New Node"
+        };
+
+        // update tree value
+        jstreeEditor.field.onValueChanged(function (value) {
+            if (value) {
+                var jstree = jstreeEditor.convertJsonToJstree(value, []);
+                jstreeEditor.createJstree(jstree);
+            } else {
+                $("#createTree").show();
+                $("#createTree").click(function () {
+                    jstreeEditor.createJstree(jstreeEditor.defaultData);
+
+                    // edit root node after tree created
+                    $('#jstree').on('ready.jstree', function () {
+                        var rootNode = $('#jstree').jstree(true).get_node('1', true);
+                        $('#jstree').jstree(true).edit(rootNode);
+                    });
+                });
+            }
+        });
+
+        // update field value
+        jstreeEditor.updateFieldValue = function (e, data) {
+            var jstreeJson = $("#jstree").jstree(true).get_json('#');;
+            if (jstreeJson && jstreeJson !== jstreeEditor.defaultData) {
+                var json = jstreeEditor.convertJstreeToJson(jstreeJson, {});
+                jstreeEditor.field.valueChanged(json);
+            }
+        }
+
+        jstreeEditor.createJstree = function (data) {
+            $("#createTree").hide();
+            $('#jstree').jstree({
+                "core": {
+                    "animation": 200,
+                    "check_callback": true,
+                    'data': data
+                },
+                "plugins": [
+                    "contextmenu", "wholerow", "state"
+                ]
+            });
+
+            $("#jstree").show();
+            $('#jstree').on("set_text.jstree", jstreeEditor.updateFieldValue);
+            $('#jstree').on("changed.jstree", jstreeEditor.updateFieldValue);
+        }
+
+        jstreeEditor.convertJstreeToJson = function (jstree, obj) {
+            if (!Array.isArray(jstree) || !jstree.length) {
+                return obj;
+            }
+
+            for (var key in jstree) {
+                var children = jstree[key].children;
+                if (Array.isArray(children) && children.length) {
+                    obj[jstree[key].text.toString()] = {};
+                    jstreeEditor.convertJstreeToJson(jstree[key].children, obj[jstree[key].text.toString()]);
+                } else {
+                    obj[jstree[key].text.toString()] = jstree[key].text;
+                }
+            }
+            return obj;
+        }
+
+        jstreeEditor.convertJsonToJstree = function (obj, jstree) {
+            for (const key in obj) {
+                var isValueString = typeof obj[key.toString()] === 'string';
+
+                var jstreeNode = {
+                    text: key
+                };
+
+                if (!isValueString) {
+                    jstreeNode.children = [];
+                }
+
+                jstree.push(jstreeNode);
+
+                if (!isValueString) {
+                    jstreeEditor.convertJsonToJstree(obj[key.toString()], jstree[jstree.length - 1].children);
+                }
+            }
+
+            return jstree;
+        }
+    </script>
+</body>
+
+</html>