Feature: collapse for array and object editors

germanbisurgi · Jun 17, 2024 · 868b510 · 868b510
1 parent 4803498
commit 868b510
Show file tree

Hide file tree

Showing 19 changed files with 659 additions and 88 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
@@ -83,7 +83,9 @@ window.addEventListener('DOMContentLoaded', () => {
           'change',
           'always'
         ],
-        editableProperties: true,
+        enablePropertiesToggle: true,
+        enableCollapseToggle: true,
+        startCollapsed: false,
         schema: {},
         editor: null,
         theme: 'barebones',
@@ -179,7 +181,9 @@ window.addEventListener('DOMContentLoaded', () => {
 
         const options = {
           container: document.querySelector('#jedi-container'),
-          editableProperties: this.editableProperties,
+          enablePropertiesToggle: this.enablePropertiesToggle,
+          enableCollapseToggle: this.enableCollapseToggle,
+          startCollapsed: this.startCollapsed,
           iconLib: this.iconLib,
           showErrors: this.showErrors,
           validateFormat: this.validateFormat,
@@ -189,6 +193,7 @@ window.addEventListener('DOMContentLoaded', () => {
         }
 
         this.editor = new Jedi.Jedi(options)
+        window.editor = this.editor
         this.editorChangeHandler()
         this.editor.on('change', this.editorChangeHandler)
       },

diff --git a/docs/json/examples/login.json b/docs/json/examples/login.json
@@ -8,7 +8,7 @@
     "csfr"
   ],
   "options": {
-    "editableProperties": false
+    "enablePropertiesToggle": false
   },
   "properties": {
     "email": {

diff --git a/docs/json/validator/prefixItems.json b/docs/json/validator/prefixItems.json
@@ -1,9 +1,28 @@
 {
   "type": "array",
   "prefixItems": [
-    { "type": "number" },
-    { "type": "string" },
-    { "enum": ["Street", "Avenue", "Boulevard"] },
-    { "enum": ["NW", "NE", "SW", "SE"] }
+    {
+      "type": "number"
+    },
+    {
+      "type": "string"
+    },
+    {
+      "type": "string",
+      "enum": [
+        "Street",
+        "Avenue",
+        "Boulevard"
+      ]
+    },
+    {
+      "type": "string",
+      "enum": [
+        "NW",
+        "NE",
+        "SW",
+        "SE"
+      ]
+    }
   ]
 }
diff --git a/docs/views/playground.html b/docs/views/playground.html
@@ -76,8 +76,18 @@ <h1>Playground</h1>
                 </div>
 
                 <div class="form-group">
-                    <input type="checkbox" id="editableProperties" v-model="editableProperties" @change="initEditor()">
-                    <label for="editableProperties">editableProperties</label>
+                    <input type="checkbox" id="enablePropertiesToggle" v-model="enablePropertiesToggle" @change="initEditor()">
+                    <label for="enablePropertiesToggle">enablePropertiesToggle</label>
+                </div>
+
+                <div class="form-group">
+                    <input type="checkbox" id="enableCollapseToggle" v-model="enableCollapseToggle" @change="initEditor()">
+                    <label for="enableCollapseToggle">enableCollapseToggle</label>
+                </div>
+
+                <div class="form-group">
+                    <input type="checkbox" id="startCollapsed" v-model="startCollapsed" @change="initEditor()">
+                    <label for="startCollapsed">startCollapsed</label>
                 </div>
 
                 <div class="form-group">

diff --git a/src/editors/array.js b/src/editors/array.js
@@ -18,7 +18,9 @@ class EditorArray extends Editor {
       title: getSchemaTitle(this.instance.schema) || this.instance.getKey(),
       titleHidden: getSchemaOption(this.instance.schema, 'titleHidden'),
       id: pathToAttribute(this.instance.path),
-      description: getSchemaDescription(this.instance.schema)
+      description: getSchemaDescription(this.instance.schema),
+      enableCollapseToggle: this.instance.jedi.options.enableCollapseToggle || getSchemaOption(this.instance.schema, 'enableCollapseToggle'),
+      startCollapsed: this.instance.jedi.options.startCollapsed || getSchemaOption(this.instance.schema, 'startCollapsed')
     })
   }
 

diff --git a/src/editors/object.js b/src/editors/object.js
@@ -28,23 +28,25 @@ class EditorObject extends Editor {
       addProperty = false
     }
 
-    let editableProperties = false
+    let enablePropertiesToggle = false
 
-    if (isSet(this.instance.jedi.options.editableProperties)) {
-      editableProperties = this.instance.jedi.options.editableProperties
+    if (isSet(this.instance.jedi.options.enablePropertiesToggle)) {
+      enablePropertiesToggle = this.instance.jedi.options.enablePropertiesToggle
     }
 
-    if (isSet(schemaOptions.editableProperties)) {
-      editableProperties = schemaOptions.editableProperties
+    if (isSet(schemaOptions.enablePropertiesToggle)) {
+      enablePropertiesToggle = schemaOptions.enablePropertiesToggle
     }
 
     this.control = this.theme.getObjectControl({
       title: getSchemaTitle(this.instance.schema) || this.instance.getKey(),
       titleHidden: getSchemaOption(this.instance.schema, 'titleHidden'),
       id: pathToAttribute(this.instance.path),
       description: getSchemaDescription(this.instance.schema),
-      editableProperties: editableProperties,
-      addProperty: addProperty
+      enablePropertiesToggle: enablePropertiesToggle,
+      addProperty: addProperty,
+      enableCollapseToggle: this.instance.jedi.options.enableCollapseToggle || getSchemaOption(this.instance.schema, 'enableCollapseToggle'),
+      startCollapsed: this.instance.jedi.options.startCollapsed || getSchemaOption(this.instance.schema, 'startCollapsed')
     })
   }
 
@@ -105,9 +107,9 @@ class EditorObject extends Editor {
   }
 
   refreshPropertiesSlot () {
-    const schemaOptionEditableProperties = getSchemaOption(this.instance.schema, 'editableProperties')
+    const schemaOptionEnablePropertiesToggle = getSchemaOption(this.instance.schema, 'enablePropertiesToggle')
 
-    if (equal(this.instance.jedi.options.editableProperties, true) || equal(schemaOptionEditableProperties, true)) {
+    if (equal(this.instance.jedi.options.enablePropertiesToggle, true) || equal(schemaOptionEnablePropertiesToggle, true)) {
       Object.keys(this.instance.properties).forEach((property) => {
         // refactor with isNotRequired
         const isRequired = this.instance.isRequired(property)

diff --git a/src/instances/object.js b/src/instances/object.js
@@ -42,9 +42,14 @@ class InstanceObject extends Instance {
 
         let musstCreateChild = true
 
+        const optionsDeactivateNonRequired = this.jedi.options.deactivateNonRequired
         const deactivateNonRequired = getSchemaOption(this.schema, 'deactivateNonRequired')
         const schemaDeactivateNonRequired = getSchemaOption(schema, 'deactivateNonRequired')
 
+        if (this.isNotRequired(key) && isSet(optionsDeactivateNonRequired) && optionsDeactivateNonRequired === true) {
+          musstCreateChild = false
+        }
+
         if (this.isNotRequired(key) && isSet(deactivateNonRequired) && deactivateNonRequired === true) {
           musstCreateChild = false
         }
@@ -112,7 +117,7 @@ class InstanceObject extends Instance {
     this.children.push(instance)
     this.value[key] = instance.getValue()
 
-    const deactivateNonRequired = getSchemaOption(this.schema, 'deactivateNonRequired')
+    const deactivateNonRequired = this.jedi.options.deactivateNonRequired || getSchemaOption(this.schema, 'deactivateNonRequired')
 
     if (this.isNotRequired(key) && isSet(deactivateNonRequired) && deactivateNonRequired === true) {
       instance.deactivate()

diff --git a/src/jedi.js b/src/jedi.js
@@ -39,7 +39,10 @@ class Jedi extends EventEmitter {
     this.options = Object.assign({
       container: null,
       refParser: null,
-      editableProperties: false,
+      enablePropertiesToggle: false,
+      enableCollapseToggle: false,
+      startCollapsed: false,
+      deactivateNonRequired: false,
       schema: {},
       showErrors: 'change',
       data: undefined,
@@ -190,6 +193,7 @@ class Jedi extends EventEmitter {
     if (this.refParser) {
       config.schema = this.refParser.expand(config.schema, config.path)
     }
+
     const schemaType = getSchemaType(config.schema)
     const schemaOneOf = getSchemaOneOf(config.schema)
     const schemaAnyOf = getSchemaAnyOf(config.schema)

diff --git a/src/themes/bootstrap3.js b/src/themes/bootstrap3.js
@@ -9,6 +9,24 @@ class ThemeBootstrap3 extends Theme {
     this.useToggleEvents = false
   }
 
+  getCollapseToggle (config) {
+    const toggle = super.getCollapseToggle(config)
+    toggle.setAttribute('href', '#' + config.collapseId)
+    toggle.setAttribute('data-toggle', 'collapse')
+    return toggle
+  }
+
+  getCollapse (config) {
+    const collapse = super.getCollapse(config)
+    collapse.classList.add('collapse')
+
+    if (!config.startCollapsed) {
+      collapse.classList.add('in')
+    }
+
+    return collapse
+  }
+
   getFieldset () {
     const fieldset = document.createElement('fieldset')
     fieldset.classList.add('panel')

diff --git a/src/themes/bootstrap4.js b/src/themes/bootstrap4.js
@@ -9,6 +9,24 @@ class ThemeBootstrap4 extends Theme {
     this.useToggleEvents = false
   }
 
+  getCollapseToggle (config) {
+    const toggle = super.getCollapseToggle(config)
+    toggle.setAttribute('href', '#' + config.collapseId)
+    toggle.setAttribute('data-toggle', 'collapse')
+    return toggle
+  }
+
+  getCollapse (config) {
+    const collapse = super.getCollapse(config)
+    collapse.classList.add('collapse')
+
+    if (!config.startCollapsed) {
+      collapse.classList.add('show')
+    }
+
+    return collapse
+  }
+
   getFieldset () {
     const fieldset = document.createElement('fieldset')
     fieldset.classList.add('card')

diff --git a/src/themes/bootstrap5.js b/src/themes/bootstrap5.js
@@ -9,6 +9,24 @@ class ThemeBootstrap5 extends Theme {
     this.useToggleEvents = false
   }
 
+  getCollapseToggle (config) {
+    const toggle = super.getCollapseToggle(config)
+    toggle.setAttribute('href', '#' + config.collapseId)
+    toggle.setAttribute('data-bs-toggle', 'collapse')
+    return toggle
+  }
+
+  getCollapse (config) {
+    const collapse = super.getCollapse(config)
+    collapse.classList.add('collapse')
+
+    if (!config.startCollapsed) {
+      collapse.classList.add('show')
+    }
+
+    return collapse
+  }
+
   getFieldset () {
     const fieldset = document.createElement('fieldset')
     fieldset.classList.add('card')

diff --git a/src/themes/icons/icons.js b/src/themes/icons/icons.js
@@ -12,7 +12,9 @@ export const glyphicons = {
   delete: 'glyphicon glyphicon-trash',
   add: 'glyphicon glyphicon-plus',
   moveUp: 'glyphicon glyphicon-arrow-up',
-  moveDown: 'glyphicon glyphicon-arrow-down'
+  moveDown: 'glyphicon glyphicon-arrow-down',
+  expand: 'glyphicon glyphicon-chevron-right',
+  collapse: 'glyphicon glyphicon-chevron-down'
 }
 
 /**
@@ -24,7 +26,9 @@ export const bootstrapIcons = {
   delete: 'bi bi-trash2',
   add: 'bi bi-plus',
   moveUp: 'bi bi-arrow-up',
-  moveDown: 'bi bi-arrow-down'
+  moveDown: 'bi bi-arrow-down',
+  expand: 'bi bi-chevron-right',
+  collapse: 'bi bi-chevron-down'
 }
 
 /**
@@ -36,7 +40,9 @@ export const fontAwesome3 = {
   delete: 'icon-trash',
   add: 'icon-plus',
   moveUp: 'icon-arrow-up',
-  moveDown: 'icon-arrow-down'
+  moveDown: 'icon-arrow-down',
+  expand: 'icon-chevron-right',
+  collapse: 'icon-chevron-down'
 }
 
 /**
@@ -48,7 +54,9 @@ export const fontAwesome4 = {
   delete: 'fa fa-trash-o',
   add: 'fa fa-plus',
   moveUp: 'fa fa-arrow-up',
-  moveDown: 'fa fa-arrow-down'
+  moveDown: 'fa fa-arrow-down',
+  expand: 'fa fa-chevron-right',
+  collapse: 'fa fa-chevron-down'
 }
 
 /**
@@ -60,7 +68,9 @@ export const fontAwesome5 = {
   delete: 'fas fa-trash',
   add: 'fas fa-plus',
   moveUp: 'fas fa-arrow-up',
-  moveDown: 'fas fa-arrow-down'
+  moveDown: 'fas fa-arrow-down',
+  expand: 'fas fa-chevron-right',
+  collapse: 'fas fa-chevron-down'
 }
 
 /**
@@ -72,5 +82,7 @@ export const fontAwesome6 = {
   delete: 'fa-solid fa-trash',
   add: 'fa-solid fa-plus',
   moveUp: 'fa-solid fa-arrow-up',
-  moveDown: 'fa-solid fa-arrow-down'
+  moveDown: 'fa-solid fa-arrow-down',
+  expand: 'fa-solid fa-chevron-right',
+  collapse: 'fa-solid fa-chevron-down'
 }