Skip to content

Commit 47628a6

Browse files
mmirusmmirus
committed
Clean up structure; squash bugs
1 parent 75050fc commit 47628a6

File tree

5 files changed

+281
-187
lines changed

5 files changed

+281
-187
lines changed

‎app/admin.php‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<?php
2+
3+
namespace GFDA;
4+
5+
// Enqueue admin scripts and styles
6+
add_action('admin_enqueue_scripts', function () {
7+
$screen = get_current_screen();
8+
if (!$screen || $screen->id !== 'toplevel_page_gf_edit_forms') {
9+
return;
10+
}
11+
12+
wp_register_script('gravity-forms-data-attributes', plugins_url('assets/admin.js', dirname(__FILE__)), ['gform_form_admin']);
13+
wp_enqueue_script('gravity-forms-data-attributes');
14+
15+
wp_register_style('gravity-forms-data-attributes', plugins_url('assets/admin.css', dirname(__FILE__)));
16+
wp_enqueue_style('gravity-forms-data-attributes');
17+
});
18+
19+
// Add "Enable Data Attributes" and "Data Attribute Names" settings
20+
add_action('gform_field_standard_settings', function ($position, $form_id) {
21+
if ($position === 1350) :
22+
?>
23+
<li class="enable_data_attrs_setting field_setting">
24+
<input type="checkbox" id="field_enable_data_attrs_value" onclick="ToggleDataAttrs();" />
25+
<label for="field_enable_data_attrs_value" class="inline">
26+
<?php esc_html_e('Enable Data Attributes', 'gravityforms'); ?>
27+
</label>
28+
29+
<div id="gform_data_attrs" style="display:none;">
30+
<br>
31+
<label for="field_data_attrs" class="section_label">
32+
<?php esc_html_e('Data Attribute Names', 'gravityforms'); ?>
33+
<?php gform_tooltip('form_field_data_attrs') ?>
34+
</label>
35+
<textarea id="field_data_attrs" class="fieldwidth-3 fieldheight-2" oninput="SetFieldProperty('dataAttrsField', this.value);"></textarea>
36+
<div class="gfield_data_attr_note">You must save the form after changing this setting.</div>
37+
38+
<div id="gform_data_attr_inputs"></div>
39+
</div>
40+
</li>
41+
<?php
42+
endif;
43+
}, 10, 2);
44+
45+
// Add tooltip to "Data Attribute Names" setting
46+
add_filter('gform_tooltips', function ($tooltips) {
47+
$tooltips['form_field_data_attrs'] = "<h6>Data Attribute Names</h6><p>Enter the names of the data attributes you wish to enable, one per line.</p><p>You must save the form after changing this setting.</p>";
48+
return $tooltips;
49+
});
50+
51+
// Register "Enable Data Attributes" and "Data Attribute Names" settings for all field types
52+
add_action('gform_editor_js', function () {
53+
?>
54+
<script type='text/javascript'>
55+
for (i in fieldSettings) {
56+
fieldSettings[i] += ", .enable_data_attrs_setting, .data_attrs_setting";
57+
}
58+
</script>
59+
<?php
60+
});

‎app/frontend.php‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<?php
2+
3+
namespace GFDA;
4+
5+
// Convert the value of the data attribute setting from a multi line string to an array
6+
function dataAttrNamesToArray($attrs)
7+
{
8+
return preg_split("/\r\n|\n|\r/", $attrs);
9+
}
10+
11+
// Add data attributes to inputs that don't have multiple choices
12+
add_filter('gform_field_content', function ($content, $field, $value, $lead_id, $form_id) {
13+
// Bail if: in the admin, the field has choices, or the field doesn't have data attributes enabled
14+
if (is_admin() || !empty($field->choices) || !property_exists($field, 'enableDataAttrsField') || !$field->enableDataAttrsField) {
15+
return $content;
16+
}
17+
18+
$attrs = dataAttrNamesToArray($field->dataAttrsField);
19+
20+
$attrHtml = '';
21+
22+
foreach ($attrs as $attr) {
23+
// skip if not set
24+
if (!property_exists($field, $attr)) {
25+
continue;
26+
}
27+
28+
$value = $field[$attr];
29+
$attrHtml .= " data-{$attr}='{$value}'";
30+
}
31+
32+
if ($attrHtml) {
33+
$content = str_replace(' name=', "$attrHtml name=", $content);
34+
}
35+
36+
return $content;
37+
}, 10, 5);
38+
39+
// Add data attributes to inputs that have multiple choices (checkboxes, drop downs, etc.)
40+
add_filter('gform_field_choice_markup_pre_render', function ($choice_markup, $choice, $field, $value) {
41+
// Bail if: in the admin or the field doesn't have data attributes enabled
42+
if (is_admin() || !property_exists($field, 'enableDataAttrsField') || !$field->enableDataAttrsField) {
43+
return $choice_markup;
44+
}
45+
46+
$attrs = dataAttrNamesToArray($field->dataAttrsField);
47+
48+
$attrHtml = '';
49+
50+
foreach ($attrs as $attr) {
51+
// skip if not set
52+
if (!array_key_exists($attr, $choice)) {
53+
continue;
54+
}
55+
56+
$value = $choice[$attr];
57+
$attrHtml .= " data-{$attr}='{$value}'";
58+
}
59+
60+
if ($attrHtml) {
61+
switch ($field->type) {
62+
case 'select':
63+
$choice_markup = str_replace('<option ', "<option $attrHtml", $choice_markup);
64+
break;
65+
66+
default:
67+
$choice_markup = str_replace(' name=', "$attrHtml name=", $choice_markup);
68+
break;
69+
}
70+
}
71+
72+
return $choice_markup;
73+
}, 10, 4);

‎assets/admin.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.gfield_data_attr_note {
2+
font-style: italic;
3+
}
4+
5+
.field-choice-data-attr-wrapper {
6+
display: flex;
7+
flex-wrap: wrap;
8+
margin-left: 35px;
9+
}
10+
11+
#field_settings .field-choice-data-attr-wrapper label {
12+
width: 155px;
13+
margin: 10px 0 0;
14+
}

‎assets/admin.js‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
/**
2+
* These scripts are responsible for:
3+
* - Initializing the custom settings when fields are rendered
4+
* - Showing / hiding the settings when toggled
5+
* - Saving the settings values when updated by the user
6+
*/
7+
8+
// Show/hide the "Data Attribute Names" setting and the settings for individual data attributes
9+
function ToggleDataAttrs(isInit) {
10+
var speed = isInit ? "" : "slow";
11+
12+
if (jQuery("#field_enable_data_attrs_value").is(":checked")) {
13+
jQuery("#gform_data_attrs, .field-choice-data-attr-wrapper").show(speed);
14+
15+
SetFieldProperty("enableDataAttrsField", true);
16+
} else {
17+
jQuery("#gform_data_attrs, .field-choice-data-attr-wrapper").hide(speed);
18+
SetFieldProperty("enableDataAttrsField", false);
19+
SetFieldProperty("dataAttrsField", "");
20+
}
21+
}
22+
23+
/**
24+
* When fields are rendered:
25+
* 1. Initialize "Enable Data Attributes" and "Data Attribute Names" settings
26+
* 2. If the field doesn't have choices, add the field for each data attribute
27+
*/
28+
jQuery(document).on("gform_load_field_settings", function(event, field, form) {
29+
jQuery("#field_enable_data_attrs_value").attr(
30+
"checked",
31+
field.enableDataAttrsField == true
32+
);
33+
34+
var dataAttrsInputContainer = jQuery("#gform_data_attr_inputs");
35+
dataAttrsInputContainer.html("");
36+
37+
jQuery("#field_data_attrs").val(field.dataAttrsField);
38+
39+
var dataAttrs = field.dataAttrsField;
40+
41+
if (field.choices || !dataAttrs)
42+
return ToggleDataAttrs(!field.enableDataAttrsField);
43+
44+
dataAttrs = dataAttrs.split("\n").map(function(name) {
45+
return {
46+
name: name,
47+
value: field[name] || "",
48+
};
49+
});
50+
51+
var inputs = dataAttrs
52+
.map(function(dataAttr) {
53+
return (
54+
"<br><label class='section_label'>" +
55+
dataAttr.name +
56+
"</label><input type='text' id='" +
57+
dataAttr.name +
58+
"' value='" +
59+
dataAttr.value +
60+
"' class='field-" +
61+
dataAttr.name +
62+
" field-data-attr' data-attr-name='" +
63+
dataAttr.name +
64+
"' /><br>"
65+
);
66+
})
67+
.join("");
68+
69+
dataAttrsInputContainer.html(inputs);
70+
71+
ToggleDataAttrs(!field.enableDataAttrsField);
72+
});
73+
74+
// Add the field for each data attribute when fields choices are rendered
75+
gform.addFilter("gform_append_field_choice_option", function(str, field, i) {
76+
var inputType = GetInputType(field);
77+
78+
var dataAttrs = field.dataAttrsField;
79+
80+
if (!dataAttrs) return "";
81+
82+
dataAttrs = dataAttrs.split("\n").map(function(name) {
83+
return {
84+
name: name,
85+
value: field.choices[i][name] || "",
86+
};
87+
});
88+
89+
var inputs = dataAttrs
90+
.map(function(dataAttr) {
91+
var id = inputType + "_choice_" + dataAttr.name + "_" + i;
92+
return (
93+
"<label>" +
94+
dataAttr.name +
95+
" <input type='text' id='" +
96+
id +
97+
"' value='" +
98+
dataAttr.value +
99+
"' class='field-choice-input field-choice-" +
100+
dataAttr.name +
101+
" field-choice-data-attr' data-attr-name='" +
102+
dataAttr.name +
103+
"' /></label>"
104+
);
105+
})
106+
.join("");
107+
108+
return "<div class='field-choice-data-attr-wrapper'>" + inputs + "</div>";
109+
});
110+
111+
// save data attribute values (general / non-choices)
112+
jQuery(document).on("input propertychange", ".field-data-attr", function() {
113+
var $this = jQuery(this);
114+
115+
var field = GetSelectedField();
116+
field[$this.data("attrName")] = $this.val();
117+
});
118+
119+
// save data attribute values (choices)
120+
jQuery(document).on(
121+
"input propertychange",
122+
".field-choice-data-attr",
123+
function() {
124+
var $this = jQuery(this);
125+
var i = $this.closest("li.field-choice-row").data("index");
126+
127+
var field = GetSelectedField();
128+
field.choices[i][$this.data("attrName")] = $this.val();
129+
}
130+
);

0 commit comments

Comments
 (0)