Plugin Editor experiment "Awesomplete"

germanbisurgi · Aug 13, 2024 · 4a44adc · 4a44adc
1 parent 2c74ea7
commit 4a44adc
Show file tree

Hide file tree

Showing 10 changed files with 237 additions and 45 deletions.
diff --git a/dist/jedi.js b/dist/jedi.js
diff --git a/docs/js/jedi.js b/docs/js/jedi.js
diff --git a/docs/js/playground.js b/docs/js/playground.js
@@ -58,6 +58,7 @@ window.addEventListener('DOMContentLoaded', () => {
           'validator/type': '../json/validator/type.json',
           'validator/uniqueItems': '../json/validator/uniqueItems.json',
           'validator/messages': '../json/validator/messages.json',
+          'plugins/awesomplete': '../json/plugins/awesomplete.json',
           'meta-schema': '../json/meta-schema.json',
           'europass-xml-3.3.0': '../json/europass.json',
           'test': '../json/test.json',

diff --git a/docs/json/plugins/awesomplete.json b/docs/json/plugins/awesomplete.json
@@ -0,0 +1,13 @@
+{
+  "title": "Awesomplete",
+  "type": "string",
+  "description": "Awesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers.",
+  "x-options": {
+    "awesomplete": {
+      "list": ["JavaScript", "Java", "Python", "Ruby", "C++", "C#", "PHP", "Swift", "Go", "Kotlin"],
+      "minChars": 1,
+      "maxItems": 5,
+      "autoFirst": true
+    }
+  }
+}
diff --git a/docs/views/playground.html b/docs/views/playground.html
@@ -6,7 +6,9 @@
     <meta name="description" content="Test page for jedi">
     <link rel="icon" type="image/x-icon" href="../images/json-schema.svg">
     <title>Playground</title>
-</head>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.7/awesomplete.js" integrity="sha512-MFs25tmDowD+4zBNoh4ltA/pZviY2G63nRZsQaSQYZaPvyg3hTatHmkA1gQWa/vQDL4/QXmnS4Zu/c0N4uZikw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.7/awesomplete.css" integrity="sha512-GEMEzu9K8wXXaW527IHfGIOaTQ0hXxZPJXZOwGDIO+nrR9Z0ttJih1ZehiEoWY8xPtqzzD7pxAEnQInTZwn3MQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head>
 <body>
 
 
@@ -60,21 +62,6 @@ <h1>Playground</h1>
                     <button class="btn btn-primary btn-block" id="set-schema" @click="setSchema()">Set schema</button>
                 </div>
 
-                <div class="form-group">
-                    <label for="editor-value">Value</label>
-                    <textarea ref="editorValue" class="form-control" id="editor-value" style="font-size: 14px; font-family: monospace;height: 200px;"></textarea>
-                    <button class="btn btn-primary btn-block" id="set-value" @click="setEditorValue()">Set value
-                    </button>
-                </div>
-
-                <div class="form-group">
-                    <label for="editor-errors">
-                        <span>Errors</span>
-                        <span>{{ errorCount }}</span>
-                    </label>
-                    <textarea ref="editorErrors" class="form-control" id="editor-errors" style="font-size: 14px; font-family: monospace; height: 200px;"></textarea>
-                </div>
-
                 <div class="form-group">
                     <input type="checkbox" id="enablePropertiesToggle" v-model="enablePropertiesToggle" @change="initEditor()">
                     <label for="enablePropertiesToggle">enablePropertiesToggle</label>
@@ -100,6 +87,23 @@ <h1>Playground</h1>
                     <label for="mergeAllOf">mergeAllOf</label>
                 </div>
 
+                <hr>
+
+                <div class="form-group">
+                    <label for="editor-value">Value</label>
+                    <textarea ref="editorValue" class="form-control" id="editor-value" style="font-size: 14px; font-family: monospace;height: 200px;"></textarea>
+                    <button class="btn btn-primary btn-block" id="set-value" @click="setEditorValue()">Set value
+                    </button>
+                </div>
+
+                <div class="form-group">
+                    <label for="editor-errors">
+                        <span>Errors</span>
+                        <span>{{ errorCount }}</span>
+                    </label>
+                    <textarea ref="editorErrors" class="form-control" id="editor-errors" style="font-size: 14px; font-family: monospace; height: 200px;"></textarea>
+                </div>
+
                 <button class="btn btn-primary btn-block" id="disable-editor" @click="disableEditor()">Disable editor</button>
                 <button class="btn btn-primary btn-block" id="enable-editor" @click="enableEditor()">Enable editor</button>
                 <button class="btn btn-primary btn-block" id="destroy-editor" @click="destroyEditor()">Destroy editor</button>

diff --git a/src/editors/object.js b/src/editors/object.js
@@ -110,8 +110,8 @@ class EditorObject extends Editor {
     const schemaOptionEnablePropertiesToggle = getSchemaOption(this.instance.schema, 'enablePropertiesToggle')
 
     if (equal(this.instance.jedi.options.enablePropertiesToggle, true) || equal(schemaOptionEnablePropertiesToggle, true)) {
-      let schemaProperties = Object.keys(this.instance.properties)
-      let childrenProperties = this.instance.children.map((child) => child.getKey())
+      const schemaProperties = Object.keys(this.instance.properties)
+      const childrenProperties = this.instance.children.map((child) => child.getKey())
       const properties = [...schemaProperties, ...childrenProperties]
 
       properties.forEach((property) => {

diff --git a/src/editors/string-awesomplete.js b/src/editors/string-awesomplete.js
@@ -0,0 +1,39 @@
+import EditorString from './string.js'
+import { pathToAttribute } from '../helpers/utils.js'
+import {getSchemaDescription, getSchemaOption, getSchemaTitle, getSchemaXOption} from '../helpers/schema.js'
+
+/**
+ * Represents a EditorStringAwesomplete instance.
+ * @extends Editor
+ */
+class EditorStringAwesomplete extends EditorString {
+  build () {
+    this.control = this.theme.getInputControl({
+      type: 'text',
+      id: pathToAttribute(this.instance.path),
+      label: getSchemaTitle(this.instance.schema) || this.instance.getKey(),
+      titleHidden: getSchemaOption(this.instance.schema, 'titleHidden'),
+      description: getSchemaDescription(this.instance.schema)
+    })
+
+    try {
+      new window.Awesomplete(this.control.input, getSchemaXOption(this.instance.schema, 'awesomplete'))
+      this.control.container.querySelector('.awesomplete').style.display = 'block'
+    } catch (e) {
+      console.error('Awesomplete is not available or not loaded correctly.', e)
+    }
+  }
+
+  addEventListeners () {
+  }
+
+  refreshUI () {
+    this.refreshInteractiveElements()
+
+    // this.control.radios.forEach((radio) => {
+    //   radio.checked = (radio.value === this.instance.getValue())
+    // })
+  }
+}
+
+export default EditorStringAwesomplete
diff --git a/src/instances/object.js b/src/instances/object.js
@@ -1,5 +1,5 @@
 import Instance from './instance.js'
-import {different, isSet, notSet, isObject, hasOwn, clone, mergeDeep} from '../helpers/utils.js'
+import { different, isSet, notSet, isObject, hasOwn, clone, mergeDeep } from '../helpers/utils.js'
 import EditorObjectGrid from '../editors/object-grid.js'
 import EditorObject from '../editors/object.js'
 import EditorObjectNav from '../editors/object-nav.js'

diff --git a/src/instances/string.js b/src/instances/string.js
@@ -3,8 +3,9 @@ import EditorString from '../editors/string.js'
 import EditorStringEnumRadio from '../editors/string-enum-radio.js'
 import EditorStringEnumSelect from '../editors/string-enum-select.js'
 import EditorStringTextarea from '../editors/string-textarea.js'
+import EditorStringAwesomplete from '../editors/string-awesomplete.js'
 import { isSet } from '../helpers/utils.js'
-import { getSchemaEnum, getSchemaFormat, getSchemaType } from '../helpers/schema.js'
+import { getSchemaEnum, getSchemaFormat, getSchemaXOption, getSchemaType } from '../helpers/schema.js'
 
 /**
  * Represents a InstanceString instance.
@@ -15,13 +16,16 @@ class InstanceString extends Instance {
     const schemaType = getSchemaType(this.schema)
     const schemaEnum = getSchemaEnum(this.schema)
     const schemaFormat = getSchemaFormat(this.schema)
+    const awesomplete = getSchemaXOption(this.schema, 'awesomplete')
 
     if (schemaType === 'string' && isSet(schemaEnum) && schemaFormat === 'radio') {
       this.ui = new EditorStringEnumRadio(this)
     } else if (schemaType === 'string' && schemaFormat === 'textarea') {
       this.ui = new EditorStringTextarea(this)
     } else if (schemaType === 'string' && isSet(schemaEnum)) {
       this.ui = new EditorStringEnumSelect(this)
+    } else if (schemaType === 'string' && isSet(awesomplete)) {
+      this.ui = new EditorStringAwesomplete(this)
     } else if (schemaType === 'string') {
       this.ui = new EditorString(this)
     }

diff --git a/todo.md b/todo.md
@@ -1,9 +1,8 @@
 ## Todo
-- better scope JSONDoc pages
-- README.md editor options
+- x-options: format, enumTitles, grids, switcher, nav, etc
+- input range
 - publish on NPM
 - getButton exports object { button, text, icon }
-- x- prefix
 - compact descriptions
 - additionalItems with prefixItems validation and editing https://json-schema.org/understanding-json-schema/reference/array#additionalitems
 - multiple instance: do not transfer values between editors