card-cell: use data-dynamic attr directly on fields group/parent (#61022)

This commit is contained in:
Thomas Jund 2022-01-24 16:57:54 +01:00 committed by Frédéric Péters
parent bcdb70fff9
commit d6cfee4ec3
2 changed files with 97 additions and 101 deletions

View File

@ -48,86 +48,99 @@
</select>
</label>
</p>
<p>
<label>
{% trans "Card Fields" %}
<select name="field_varname" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@"></select>
</label>
</p>
<p>
<label>
{% trans "Field content" %}
<select name="field_content" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
<option value="label-and-value">{% trans "Label & Value" %}</option>
<option value="label">{% trans "Label only" %}</option>
<option value="value">{% trans "Value only" %}</option>
</select>
</label>
</p>
<p>
<label>
{% trans "Display mode" %}
<select name="field_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
<option value="text">{% trans "Text" %}</option>
<option value="title">{% trans "Title" %}</option>
<option value="subtitle">{% trans "Subtitle" %}</option>
</select>
</label>
</p>
<p>
<label>
{% trans "Empty value display mode" %}
<select name="field_empty_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
<option value="@empty@">{% trans "Display as empty" %}</option>
<option value="@skip@">{% trans "Hide" %}</option>
<option value="@custom@">{% trans "Display a custom text" %}</option>
</select>
</label>
</p>
<p>
<label>
{% trans "Empty value custom text" %}
<input name="field_empty_text" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@" />
</label>
</p>
<p>
<label>
{% trans "Value template" %}
<textarea name="custom_template" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@custom@" style="resize: vertical;"></textarea>
</label>
</p>
<p>
<label>
{% trans "Display mode" %}
<select name="custom_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@custom@">
<option value="label">{% trans "Label" %}</option>
<option value="text">{% trans "Text" %}</option>
<option value="title">{% trans "Title" %}</option>
<option value="subtitle">{% trans "Subtitle" %}</option>
</select>
</label>
</p>
<p>
<label>
{% trans "Label template" %}
<textarea name="link_label_template" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@link@" style="resize: vertical;"></textarea>
</label>
</p>
<p>
<label>
{% trans "URL template" %}
<textarea name="link_url_template" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@link@" style="resize: vertical;"></textarea>
</label>
</p>
<p>
<label>
{% trans "Display mode" %}
<select name="link_display_mode" data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@link@">
<option value="link">{% trans "Link" %}</option>
<option value="button">{% trans "Button" %}</option>
</select>
</label>
</p>
{# fields group for "content type == @field@ " #}
<div data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@field@">
<p>
<label>
{% trans "Card Fields" %}
<select name="field_varname"></select>
</label>
</p>
<p>
<label>
{% trans "Field content" %}
<select name="field_content" data-dynamic-display-parent="true">
<option value="label-and-value">{% trans "Label & Value" %}</option>
<option value="label">{% trans "Label only" %}</option>
<option value="value">{% trans "Value only" %}</option>
</select>
</label>
</p>
<p data-dynamic-display-child-of="field_content" data-dynamic-display-value-in="label value">
<label>
{% trans "Display mode" %}
<select name="field_display_mode">
<option value="text">{% trans "Text" %}</option>
<option value="title">{% trans "Title" %}</option>
<option value="subtitle">{% trans "Subtitle" %}</option>
</select>
</label>
</p>
<p>
<label>
{% trans "Empty value display mode" %}
<select name="field_empty_display_mode" data-dynamic-display-parent="true">
<option value="@empty@">{% trans "Display as empty" %}</option>
<option value="@skip@">{% trans "Hide" %}</option>
<option value="@custom@">{% trans "Display a custom text" %}</option>
</select>
</label>
</p>
<p data-dynamic-display-child-of="field_empty_display_mode" data-dynamic-display-value="@custom@">
<label>
{% trans "Empty value custom text" %}
<input name="field_empty_text" />
</label>
</p>
</div>
{# fields group for "content type == @custom@" #}
<div data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@custom@">
<p>
<label>
{% trans "Value template" %}
<textarea name="custom_template" style="resize: vertical;"></textarea>
</label>
</p>
<p>
<label>
{% trans "Display mode" %}
<select name="custom_display_mode">
<option value="label">{% trans "Label" %}</option>
<option value="text">{% trans "Text" %}</option>
<option value="title">{% trans "Title" %}</option>
<option value="subtitle">{% trans "Subtitle" %}</option>
</select>
</label>
</p>
</div>
{# fields group for "content type == @link@" #}
<div data-dynamic-display-child-of="entry_type" data-dynamic-display-value="@link@">
<p>
<label>
{% trans "Label template" %}
<textarea name="link_label_template" style="resize: vertical;"></textarea>
</label>
</p>
<p>
<label>
{% trans "URL template" %}
<textarea name="link_url_template" style="resize: vertical;"></textarea>
</label>
</p>
<p>
<label>
{% trans "Display mode" %}
<select name="link_display_mode">
<option value="link">{% trans "Link" %}</option>
<option value="button">{% trans "Button" %}</option>
</select>
</label>
</p>
</div>
<p>
<label>
{% trans "Size" %}

View File

@ -403,12 +403,12 @@ $(function() {
var sel1 = '[data-dynamic-display-child-of="' + $(this).attr('name') + '"]';
var sel2 = '[data-dynamic-display-value="' + $(this).val() + '"]';
var sel3 = '[data-dynamic-display-value-in*="' + $(this).val() + '"]';
$(sel1).addClass('field-hidden').parent().parent().hide();
$(sel1 + sel2).removeClass('field-hidden').parent().parent().show();
$(sel1 + sel3).removeClass('field-hidden').parent().parent().show();
$(sel1).addClass('field-hidden').hide();
$(sel1 + sel2).removeClass('field-hidden').show();
$(sel1 + sel3).removeClass('field-hidden').show();
$(sel1).trigger('change');
});
$('[data-dynamic-display-child-of]').addClass('field-hidden').parent().parent().hide();
$('[data-dynamic-display-child-of]').addClass('field-hidden').hide();
$('select[data-dynamic-display-parent]').trigger('change');
$('[data-dynamic-display-parent]:checked').trigger('change');
}
@ -509,23 +509,6 @@ Card_cell_custom.prototype = {
.text(el.label)
.appendTo(varname_select);
}
})
const field_content_select = this.grid_cell_form.field_content;
$(field_content_select).on('change', function() {
if ($(this).hasClass('field-hidden') || $(this).val() == 'label-and-value') {
$(_self.grid_cell_form.field_display_mode).removeClass('field-hidden').parent().parent().hide();
} else {
$(_self.grid_cell_form.field_display_mode).addClass('field-hidden').parent().parent().show();
}
});
const field_empty_display_mode_select = this.grid_cell_form.field_empty_display_mode;
$(field_empty_display_mode_select).on('change', function() {
if ($(this).hasClass('field-hidden') || $(this).val() != '@custom@') {
$(_self.grid_cell_form.field_empty_text).removeClass('field-hidden').parent().parent().hide();
} else {
$(_self.grid_cell_form.field_empty_text).addClass('field-hidden').parent().parent().show();
}
});
},
grid_cell__form_dialog: function(button_label, callback){