Skip to content
This repository was archived by the owner on May 13, 2018. It is now read-only.

Commit 7c09ff3

Browse files
GenbuHaseGenbuHase
committed
プロフィール画面に[リンク]を追加
1 parent ad837d1 commit 7c09ff3

4 files changed

Lines changed: 168 additions & 6 deletions

File tree

‎libraries/common/common.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,14 @@ A:Not([Href]) {
3535
White-Space: Pre-Line;
3636
}
3737

38+
.mdc-text-field > Textarea {
39+
Resize: None;
40+
}
41+
42+
.mdc-dialog .mdc-dialog__body > .mdc-text-field {
43+
Width: 100%;
44+
}
45+
3846

3947

4048
Div[Data-Component="Frame-Content"] {
@@ -100,10 +108,10 @@ A.profilePhoto.mdc-tab {
100108
Display: None;
101109
}
102110

103-
.mdc-text-field > Textarea {
104-
Resize: None;
111+
.mdc-list.mdc-list--editable > .mdc-list-item > .mdc-list-item__form {
112+
Flex-Direction: Row;
105113
}
106114

107-
.mdc-dialog .mdc-dialog__body > .mdc-text-field {
108-
Width: 100%;
115+
.mdc-list.mdc-list--editable > .mdc-list-item > .mdc-list-item__form > *:First-Child {
116+
Margin-Right: 1em;
109117
}

‎libraries/common/common.js‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,113 @@ window.addEventListener("DOMContentLoaded", () => {
9090
}
9191
});
9292
});
93-
})
93+
});
94+
95+
new DOM("@.mdc-list.mdc-list--editable").forEach(list => {
96+
const listUuid = new DOM.Randomizer().generate(16);
97+
98+
list.id = `MDCEditableList-${listUuid}`;
99+
list.querySelector(".mdc-list-info").querySelector(".mdc-list-info__add").addEventListener("click", () => {
100+
console.log("Add");
101+
102+
let listItem = new DOM("Li", {
103+
classes: ["mdc-list-item"],
104+
105+
children: [
106+
new DOM("Div", {
107+
classes: ["mdc-list-item__form"],
108+
109+
children: [
110+
(() => {
111+
const uuid = new DOM.Randomizer().generate(16);
112+
113+
let linkTitle = new DOM("Div", {
114+
classes: ["mdc-list-item__link-title", "mdc-text-field"],
115+
116+
children: [
117+
new DOM("Input", {
118+
id: `MDCEditableList-${listUuid}_LinkTitle-${uuid}`,
119+
classes: ["mdc-text-field__input"],
120+
121+
attributes: {
122+
Type: "Text"
123+
}
124+
}),
125+
126+
new DOM("Label", {
127+
classes: ["mdc-text-field__label"],
128+
text: "タイトル",
129+
130+
attributes: { For: `MDCEditableList-${listUuid}_LinkTitle-${uuid}` },
131+
dataset: { locales: "profile.url.title" }
132+
}),
133+
134+
new DOM("Div", {
135+
classes: ["mdc-text-field__bottom-line"]
136+
})
137+
]
138+
});
139+
140+
new mdc.textField.MDCTextField(linkTitle);
141+
locales.applyToElement(linkTitle.querySelector("Label"));
142+
143+
return linkTitle;
144+
})(),
145+
146+
(() => {
147+
const uuid = new DOM.Randomizer().generate(16);
148+
149+
let linkValue = new DOM("Div", {
150+
classes: ["mdc-list-item__link-value", "mdc-text-field"],
151+
152+
children: [
153+
new DOM("Input", {
154+
id: `MDCEditableList-${listUuid}_LinkValue-${uuid}`,
155+
classes: ["mdc-text-field__input"],
156+
157+
attributes: {
158+
Type: "URL"
159+
}
160+
}),
161+
162+
new DOM("Label", {
163+
classes: ["mdc-text-field__label"],
164+
text: "URL",
165+
166+
attributes: { For: `MDCEditableList-${listUuid}_LinkValue-${uuid}` },
167+
dataset: { locales: "profile.url.value" }
168+
}),
169+
170+
new DOM("Div", {
171+
classes: ["mdc-text-field__bottom-line"]
172+
})
173+
]
174+
});
175+
176+
new mdc.textField.MDCTextField(linkValue);
177+
locales.applyToElement(linkValue.querySelector("Label"));
178+
179+
return linkValue;
180+
})()
181+
]
182+
}),
183+
184+
new DOM("A", {
185+
classes: ["mdc-list-item__end-detail", "material-icons", "mdc-list-item__remove"],
186+
text: "remove",
187+
188+
events: {
189+
click (event) {
190+
event.target.parentNode.remove();
191+
}
192+
}
193+
})
194+
]
195+
});
196+
197+
list.appendChild(listItem);
198+
});
199+
});
94200

95201

96202

‎profile/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@
3333
<Label Class = "mdc-text-field__label" For = "Profile-Info-Detail" Data-Locales = "profile.detail">自己紹介...</Label>
3434
</Div>
3535

36+
<UL Class = "mdc-list mdc-list--two-line mdc-list--editable">
37+
<Li ID = "Profile-Info-Links" Class = "mdc-list-item mdc-list-info">
38+
<Span Class = "mdc-list-item__text mdc-list-info__name" Data-Locales = "profile.url">リンク</Span>
39+
<A Class = "mdc-list-item__end-detail material-icons mdc-list-info__add">add</A>
40+
</Li>
41+
</UL>
42+
3643
<Div>
3744
<Button ID = "Profile-Save" Class = "mdc-button mdc-button--raised" Data-Locales = "profile.save">変更を保存</Button>
3845
<Button ID = "Profile-Delete" Class = "mdc-button mdc-button--raised mdc-theme--secondary-bg" Data-Locales = "profile.delete">アカウントを削除</Button>

‎profile/profile.js‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,32 @@ terminal.addEventListener("message", event => {
77

88
new DOM("#Profile-Info-Detail").value = res.detail,
99
new DOM("#Profile-Info-Detail").parentNode.querySelector("Label").classList.add("mdc-text-field__label--float-above");
10+
11+
if (res.links) {
12+
let clientListLength = new DOM("#Profile-Info-Links").parentNode.children.length - 1;
13+
14+
if (res.links.length - clientListLength > 0) {
15+
for (let i = 0; i < res.links.length - clientListLength; i++) {
16+
new DOM("#Profile-Info-Links").querySelector("A.mdc-list-info__add").click();
17+
}
18+
} else {
19+
for (let i = 0; i < clientListLength - res.links.length; i++) {
20+
new DOM("#Profile-Info-Links").parentNode.children[1].querySelector(".mdc-list-item__remove").click();
21+
}
22+
}
23+
24+
let itemIndex = 0;
25+
26+
new DOM("#Profile-Info-Links").parentNode.querySelectorAll(".mdc-list-item:Not(.mdc-list-info)").forEach(item => {
27+
item.querySelector(".mdc-list-item__form > .mdc-list-item__link-title > Input").value = res.links[itemIndex].name,
28+
item.querySelector(".mdc-list-item__form > .mdc-list-item__link-title > Label").classList.add("mdc-text-field__label--float-above"),
29+
30+
item.querySelector(".mdc-list-item__form > .mdc-list-item__link-value > Input").value = res.links[itemIndex].url,
31+
item.querySelector(".mdc-list-item__form > .mdc-list-item__link-value > Label").classList.add("mdc-text-field__label--float-above");
32+
33+
itemIndex++;
34+
});
35+
}
1036
});
1137
} else {
1238
location.href = "/SimpleThread/";
@@ -33,7 +59,22 @@ window.addEventListener("DOMContentLoaded", () => {
3359
new DOM("#Profile-Save").addEventListener("click", () => {
3460
base.Database.update("users/" + base.user.uid, {
3561
userName: new DOM("#Profile-Info-Name").value,
36-
detail: new DOM("#Profile-Info-Detail").value
62+
detail: new DOM("#Profile-Info-Detail").value,
63+
64+
links: (() => {
65+
let links = [];
66+
67+
for (let i = 1; i < new DOM("#Profile-Info-Links").parentNode.children.length; i++) {
68+
let currentForm = new DOM("#Profile-Info-Links").parentNode.children[i];
69+
70+
links.push({
71+
name: currentForm.querySelector(".mdc-list-item__link-title > Input").value,
72+
url: currentForm.querySelector(".mdc-list-item__link-value > Input").value
73+
});
74+
}
75+
76+
return links;
77+
})()
3778
});
3879

3980
new mdc.dialog.MDCDialog(new DOM("#ChangeNotify")).show();

0 commit comments

Comments
 (0)