wip(forms): refactor forms templating

umap-project · Jan 7, 2025 · 59533bc · 59533bc
1 parent 34f7d8e
commit 59533bc
Show file tree

Hide file tree

Showing 8 changed files with 245 additions and 201 deletions.
diff --git a/umap/static/umap/css/form.css b/umap/static/umap/css/form.css
@@ -1,3 +1,4 @@
+.umap-form-inline .formbox,
 .umap-form-inline {
     display: inline;
 }
@@ -559,7 +560,6 @@ i.info {
     clear: both;
     margin-bottom: 20px;
     overflow: hidden;
-    display: none;
 }
 .umap-color-picker span {
     width: 20px;

diff --git a/umap/static/umap/js/modules/data/layer.js b/umap/static/umap/js/modules/data/layer.js
@@ -655,7 +655,7 @@ export class DataLayer extends ServerStored {
         {
           label: translate('Data is browsable'),
           handler: 'Switch',
-          helpEntries: 'browsable',
+          helpEntries: ['browsable'],
         },
       ],
       [

diff --git a/umap/static/umap/js/modules/form/builder.js b/umap/static/umap/js/modules/form/builder.js
@@ -1,6 +1,7 @@
 import getClass from './fields.js'
 import * as Utils from '../utils.js'
 import { SCHEMA } from '../schema.js'
+import { translate } from '../i18n.js'
 
 export class Form {
   constructor(obj, fields, properties) {
@@ -35,9 +36,8 @@ export class Form {
   }
 
   buildField(field) {
-    field.buildLabel()
+    field.buildTemplate()
     field.build()
-    field.buildHelpText()
   }
 
   makeField(field) {
@@ -115,6 +115,14 @@ export class Form {
   }
 
   finish() {}
+
+  getTemplate(helper) {
+    return `
+      <div class="formbox" data-ref=container>
+        ${helper.getTemplate()}
+        <small class="help-text" data-ref=helpText></small>
+      </div>`
+  }
 }
 
 export class MutatingForm extends Form {
@@ -190,6 +198,40 @@ export class MutatingForm extends Form {
     }
   }
 
+  getTemplate(helper) {
+    let template
+    if (helper.properties.inheritable) {
+      const extraClassName = helper.get(true) === undefined ? ' undefined' : ''
+      template = `
+        <div class="umap-field-${helper.name} formbox inheritable${extraClassName}">
+          <div class="header" data-ref=header>
+            <a href="#" class="button undefine" data-ref=undefine>${translate('clear')}</a>
+            <a href="#" class="button define" data-ref=define>${translate('define')}</a>
+            <span class="quick-actions show-on-defined" data-ref=actions></span>
+            ${helper.getLabelTemplate()}
+          </div>
+          <div class="show-on-defined" data-ref=container>
+            ${helper.getTemplate()}
+            <small class="help-text" data-ref=helpText></small>
+          </div>
+        </div>`
+    } else {
+      template = `
+      <div class="formbox umap-field-${helper.name}" data-ref=container>
+        ${helper.getLabelTemplate()}
+        ${helper.getTemplate()}
+        <small class="help-text" data-ref=helpText></small>
+      </div>`
+    }
+    return template
+  }
+
+  build() {
+    super.build()
+    this._umap.help.parse(this.form)
+    return this.form
+  }
+
   finish(helper) {
     helper.input?.blur()
   }