Skip to content

Commit 550d875

Browse files
wilrwilr
committed
feat: editable form support and replace jQuery dependancy
1 parent aca2c32 commit 550d875

File tree

4 files changed

+206
-69
lines changed

4 files changed

+206
-69
lines changed

‎client/javascript/addressfinder.js‎

Lines changed: 97 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,110 @@
1-
(function ($) {
2-
$(document).ready(function () {
3-
/**
4-
*
5-
* @param {DOMElement} elem
6-
*/
7-
var setupAddressFinderField = function (elem) {
8-
var widget,
9-
key = $(elem).data("api-key"),
10-
address = $(elem).find(".address_finder_address"),
11-
input = $(elem).find("input").first(),
12-
manual = $(elem).find(".manual_address"),
13-
toggle = $(elem).find(".toggle_manual_address");
14-
15-
var useManual = manual.find("input[name*=ManualAddress]"),
16-
field = address.find("input").get(0);
17-
18-
/* update ui with javascript */
19-
toggle.show();
20-
address.show();
21-
22-
if (!useManual.val()) {
23-
manual.hide();
24-
}
1+
document.addEventListener("DOMContentLoaded", function () {
2+
/**
3+
* Sets up the Address Finder field.
4+
* @param {HTMLElement} elem
5+
*/
6+
var setupAddressFinderField = function (elem) {
7+
var widget,
8+
key = elem.getAttribute("data-api-key"),
9+
address = elem.querySelector(".address_finder_address"),
10+
input = elem.querySelector("input"),
11+
manual = elem.querySelector(".manual_address"),
12+
toggle = elem.querySelector(".toggle_manual_address");
2513

26-
if (!$(elem).find(".addressfinder__holder input").length) {
27-
return;
28-
}
29-
/* create widget */
30-
widget = new AddressFinder.Widget(field, key, "NZ", {
31-
container: $(elem).find(".addressfinder__holder").get(0),
32-
});
33-
34-
/* updates manual fields and hidden metadata */
35-
widget.on("result:select", function (value, item) {
36-
/* populate postal line fields */
37-
for (var i = 1; i <= 6; i++) {
38-
manual
39-
.find("input[name*=PostalLine" + i + "]")
40-
.val(item["postal_line_" + i] || "");
41-
}
14+
var useManual = null;
15+
var field = null;
16+
17+
if (manual) {
18+
useManual = manual.querySelector("input[name*=ManualAddress]");
19+
}
20+
21+
if (address) {
22+
field = address.querySelector("input");
23+
}
4224

43-
manual.find("input[name*=Suburb]").val(item.suburb || "");
44-
manual.find("input[name*=Region]").val(item.region || "");
45-
manual.find("input[name*=City]").val(item.city || "");
46-
manual.find("input[name*=Postcode]").val(item.postcode || "");
47-
manual.find("input[name*=Longitude]").val(item.x || "");
48-
manual.find("input[name*=Latitude]").val(item.y || "");
25+
if (!field) {
26+
console.error(
27+
"AddressFinder: Could not find address field in element",
28+
elem
29+
);
4930

50-
$("body").trigger(jQuery.Event("addressselected"));
51-
});
31+
return;
32+
}
5233

53-
/* click handler to toggle manual div */
54-
toggle.on("click", function (e) {
55-
e.preventDefault();
34+
// Update UI
35+
if (toggle) {
36+
toggle.style.display = "block";
37+
}
5638

57-
manual.toggle("slow");
39+
address.style.display = "block";
5840

59-
// if the manual address is visible then add a hidden flag so
60-
if (manual.is(":visible")) {
61-
useManual.val("1");
62-
} else {
63-
useManual.val("0");
41+
if (useManual && useManual.value !== "1") {
42+
manual.style.display = "none";
43+
}
44+
45+
// Create widget
46+
widget = new AddressFinder.Widget(field, key, "NZ", {
47+
container: elem.querySelector(".addressfinder__holder"),
48+
});
49+
50+
// Update manual fields and hidden metadata
51+
widget.on("result:select", function (value, item) {
52+
for (var i = 1; i <= 6; i++) {
53+
var postalInput = manual.querySelector(
54+
"input[name*=PostalLine" + i + "]"
55+
);
56+
if (postalInput) {
57+
postalInput.value = item["postal_line_" + i] || "";
6458
}
59+
}
6560

66-
return false;
67-
});
61+
if (manual) {
62+
manual.querySelector("input[name*=Suburb]").value =
63+
item.suburb || "";
64+
manual.querySelector("input[name*=Region]").value =
65+
item.region || "";
66+
manual.querySelector("input[name*=City]").value =
67+
item.city || "";
68+
manual.querySelector("input[name*=Postcode]").value =
69+
item.postcode || "";
70+
manual.querySelector("input[name*=Longitude]").value =
71+
item.x || "";
72+
manual.querySelector("input[name*=Latitude]").value =
73+
item.y || "";
74+
}
75+
76+
var event = new Event("addressselected", { bubbles: true });
77+
document.body.dispatchEvent(event);
78+
});
79+
80+
// Click handler to toggle manual div
81+
toggle?.addEventListener("click", function (e) {
82+
e.preventDefault();
6883

69-
/* focusing back on the address dropdown should hide the manual */
70-
input.on("focus", function (e) {
71-
manual.slideUp();
72-
});
73-
};
84+
if (
85+
manual.style.display === "none" ||
86+
manual.style.display === ""
87+
) {
88+
manual.style.display = "block";
89+
useManual.value = "1";
90+
} else {
91+
manual.style.display = "none";
92+
useManual.value = "0";
93+
}
94+
95+
return false;
96+
});
7497

75-
$(".address_finder").each(function (i, elem) {
76-
setupAddressFinderField(elem);
98+
// Focus event to hide manual
99+
input?.addEventListener("focus", function () {
100+
manual.style.display = "none";
77101
});
102+
};
78103

79-
window.setupAddressFinderField = setupAddressFinderField;
104+
var addressFinderElements = document.querySelectorAll(".address_finder");
105+
addressFinderElements.forEach(function (elem) {
106+
setupAddressFinderField(elem);
80107
});
81-
})(jQuery);
108+
109+
window.setupAddressFinderField = setupAddressFinderField;
110+
});

‎src/AddressFinderField.php‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
use SilverStripe\ORM\DataObjectInterface;
1111
use SilverStripe\View\Requirements;
1212
use SilverStripe\Core\Config\Config;
13+
use SilverStripe\Core\Environment;
1314

1415
/**
1516
* A wrapper for the AddressFinder API.
@@ -281,7 +282,14 @@ public function FieldHolder($properties = array())
281282
*/
282283
public function getApiKey()
283284
{
284-
return Config::inst()->get(AddressFinderField::class, 'api_key');
285+
$key = $this->config()->get('api_key');
286+
287+
// if the key is inside backticks then it's a constant and we need to load via Environment
288+
if (preg_match('/`(.*)`/', $key, $matches)) {
289+
$key = Environment::getEnv($matches[1]);
290+
}
291+
292+
return $key;
285293
}
286294

287295
/**

‎src/EditableAddressFinderField.php‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<?php
2+
3+
namespace FullscreenInteractive\SilverStripe;
4+
5+
use SilverStripe\Forms\CheckboxField;
6+
use SilverStripe\Forms\FieldList;
7+
use SilverStripe\UserForms\Model\EditableFormField;
8+
9+
10+
if (class_exists(EditableFormField::class)) {
11+
return;
12+
}
13+
14+
class EditableAddressFinderField extends EditableFormField
15+
{
16+
private static $singular_name = 'AddressFinder Field';
17+
18+
private static $plural_name = 'AddressFinder Fields';
19+
20+
private static $table_name = 'EditableAddressFinderField';
21+
22+
private static $db = [
23+
'ShowManualFields' => 'Boolean',
24+
];
25+
26+
/**
27+
* @return FieldList
28+
*/
29+
public function getCMSFields()
30+
{
31+
$this->beforeUpdateCMSFields(function (FieldList $fields) {
32+
$fields->addFieldToTab(
33+
'Root.Main',
34+
CheckboxField::create(
35+
'ShowManualFields',
36+
_t('SilverStripe\\UserForms\\Model\\EditableFormField.SHOWMANUALFIELDS', 'Show manual fields?')
37+
)
38+
);
39+
});
40+
41+
return parent::getCMSFields();
42+
}
43+
44+
45+
public function getFormField()
46+
{
47+
$field = AddressFinderField::create($this->Name, $this->Title ?: false)
48+
->setFieldHolderTemplate('EditableAddressFinderField_holder')
49+
->setTemplate(EditableFormField::class);
50+
51+
if ($this->ShowManualFields) {
52+
$field->setShowManualFields(true);
53+
} else {
54+
$field->setShowManualFields(false);
55+
}
56+
57+
$this->doUpdateFormField($field);
58+
59+
return $field;
60+
}
61+
}

‎templates/EditableAddressFinderField_holder.ss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div id="$Name" class="field form-group mb-3<% if $extraClass %> $extraClass<% end_if %><% if $Message %> is-invalid<% end_if %>">
2+
<div class="address_finder" data-api-key="$ApiKey">
3+
<div id="$Name" class="address_finder_address form-group field text<% if $extraClass %> $extraClass<% end_if %>" style="display: none;">
4+
<% if $Title %><label class="form__field-label" for="$ID">$Title</label><% end_if %>
5+
6+
<div class="form__field-holder">
7+
<div class="addressfinder__holder" style="position: relative">
8+
$AddressField
9+
</div>
10+
11+
<% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
12+
<% if $Description %><p class="form__field-description">$Description</p><% end_if %>
13+
14+
<div class='address_finder_attribution'>
15+
<p><a href='http://addressfinder.co.nz'>AddressFinder</a> provided by <a href='http://www.abletech.co.nz/'>Able Technology</a></p>
16+
</div>
17+
18+
<% if ShowManualFields %>
19+
<div class="toggle_manual_address" style="display: none">
20+
<p><a href="#"><% _t('AddressFinderField.ENTERMANUAL', 'Or, enter your address manually') %></a></p>
21+
</div>
22+
<% end_if %>
23+
</div>
24+
25+
<% if $RightTitle %><p class="form__field-extra-label" id="extra-label-$ID">$RightTitle</p><% end_if %>
26+
</div>
27+
28+
<% if ShowManualFields %>
29+
30+
<div class="manual_address">
31+
$ManualToggleField
32+
33+
<% loop ManualAddressFields %>
34+
$FieldHolder
35+
<% end_loop %>
36+
</div>
37+
<% end_if %>
38+
</div>
39+
</div>

0 commit comments

Comments
 (0)