1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, you can obtain one at http://mozilla.org/MPL/2.0/. */
const lazy = {};
ChromeUtils.defineModuleGetter(
lazy,
"VCardPropertyEntry",
"resource:///modules/VCardUtils.jsm"
);
/**
* @implements {VCardPropertyEntryView}
* @see RFC6350 EMAIL
*/
export class VCardEmailComponent extends HTMLTableRowElement {
/** @type {VCardPropertyEntry} */
vCardPropertyEntry;
/** @type {HTMLInputElement} */
emailEl;
/** @type {HTMLInputElement} */
checkboxEl;
static newVCardPropertyEntry() {
return new lazy.VCardPropertyEntry("email", {}, "text", "");
}
connectedCallback() {
if (this.hasConnected) {
return;
}
this.hasConnected = true;
let template = document.getElementById("template-vcard-edit-email");
let clonedTemplate = template.content.cloneNode(true);
this.appendChild(clonedTemplate);
this.emailEl = this.querySelector('input[type="email"]');
this.checkboxEl = this.querySelector('input[type="checkbox"]');
this.emailEl.addEventListener("input", () => {
// Dispatch the event only if this field is the currently selected
// default/preferred email address.
if (this.checkboxEl.checked) {
this.dispatchEvent(VCardEmailComponent.EmailEvent());
}
});
// Uncheck the checkbox of other VCardEmailComponents if this one is
// checked.
this.checkboxEl.addEventListener("change", event => {
if (event.target.checked === true) {
this.dispatchEvent(VCardEmailComponent.CheckboxEvent());
}
});
// Create the email type selection.
this.vCardType = this.querySelector("vcard-type");
this.vCardType.createTypeSelection(this.vCardPropertyEntry, {
labelledBy: "addr-book-edit-email-type",
});
this.querySelector(".remove-property-button").addEventListener(
"click",
() => {
this.dispatchEvent(
new CustomEvent("vcard-remove-property", { bubbles: true })
);
this.remove();
document.querySelector("vcard-edit").toggleDefaultEmailView();
}
);
this.fromVCardPropertyEntryToUI();
}
fromVCardPropertyEntryToUI() {
this.emailEl.value = this.vCardPropertyEntry.value;
let pref = this.vCardPropertyEntry.params.pref;
if (pref === "1") {
this.checkboxEl.checked = true;
}
}
fromUIToVCardPropertyEntry() {
this.vCardPropertyEntry.value = this.emailEl.value;
if (this.checkboxEl.checked) {
this.vCardPropertyEntry.params.pref = "1";
} else if (
this.vCardPropertyEntry.params.pref &&
this.vCardPropertyEntry.params.pref === "1"
) {
// Only delete the pref if a pref of 1 is set and the checkbox is not
// checked. The pref mechanic is not fully supported yet. Leave all other
// prefs untouched.
delete this.vCardPropertyEntry.params.pref;
}
}
valueIsEmpty() {
return this.vCardPropertyEntry.value === "";
}
/**
* This event is fired when the checkbox is checked and we need to uncheck the
* other checkboxes from each VCardEmailComponent.
* FIXME: This should be a radio button part of radiogroup.
*
* @returns {CustomEvent}
*/
static CheckboxEvent() {
return new CustomEvent("vcard-email-default-checkbox", {
detail: {},
bubbles: true,
});
}
/**
* This event is fired when the value of an email input field is changed. The
* event is fired only if the current email si set as default/preferred.
*
* @returns {CustomEvent}
*/
static EmailEvent() {
return new CustomEvent("vcard-email-default-changed", {
detail: {},
bubbles: true,
});
}
}
customElements.define("vcard-email", VCardEmailComponent, { extends: "tr" });
|
