多数の機能追加・不具合修正

Profile/index.html

@@ -17,6 +17,7 @@
 
 		<Script Src = "/SimpleThread/Core.js"></Script>
 		<Link Rel = "StyleSheet" Href = "/SimpleThread/Core.css" />
+		<Script Src = "/SimpleThread/includes/Components.js"></Script>
 
 		<Script Src = "Profile.js"></Script>
 		<Link Rel = "StyleSheet" Href = "Profile.css" />

Thread/Thread.css

@@ -1,21 +1,21 @@
-#Thread_Search_Searcher_Container {
+#Threadlist_Tab_Reload {
+	Display: Inline-Flex;
+	Align-Items: Center;
+}
+
+#Threadlist_Search_Searcher_Container {
 	Width: 100%;
 }
 
-#Thread > Div[Disabled] {
+#Threadlist > Div[Disabled] {
 	Display: None;
 }
 
-#Thread A {
+#Threadlist A {
 	Text-Decoration: None;
 	Cursor: Pointer;
 }
 
-#Thread A[Disabled] {
+#Threadlist A[Disabled] {
 	Display: None;
-}
-
-#Thread_Tab_Reload {
-	Display: Inline-Flex;
-	Align-Items: Center;
 }

Thread/Thread.js

@@ -9,63 +9,40 @@ class Util {
 			});
 
 			for (let i = 0; i < res.length; i++) {
-				let thread = DOM("A", {
-					classes: ["mdl-list__item"],
+				let thread = new Components.Threadlist.Thread(res[i].tid, res[i].title);
 
-					attributes: {
-						Href: "Viewer/?tid=" + res[i].tid
-					},
-
-					children: [
-						DOM("Span", {
-							classes: ["mdl-list__item-primary-content"],
-
-							children: [
-								DOM("I", {
-									classes: ["mdl-list__item-avatar", "material-icons"],
-									text: "person"
-								}),
-
-								DOM("Span", {
-									text: res[i].title
-								})
-							]
-						})
-					]
-				});
-
-				DOM("#Thread_Search").appendChild(thread);
-				if (base.user) if (res[i].jobs.Owner.hasOwnProperty(base.user.uid)) DOM("#Thread_Admin").appendChild(thread);
+				DOM("#Threadlist_Search").appendChild(thread);
+				if (base.user) if (res[i].jobs.Owner.hasOwnProperty(base.user.uid)) DOM("#Threadlist_Admin").appendChild(thread);
 			}
 		});
 	}
 }
 
 window.addEventListener("DOMContentLoaded", () => {
 	if (!base.user) {
-		DOM("$#Thread_Tab_Admin").setAttribute("Disabled", ""),
-		DOM("$#Thread_Admin").setAttribute("Disabled", "");
+		DOM("$#Threadlist_Tab_Admin").setAttribute("Disabled", ""),
+		DOM("$#Threadlist_Admin").setAttribute("Disabled", "");
 	}
 
 	Util.refreshThreadList();
 
 
 
-	DOM("@Div.Thread_Searcher").forEach((searcher) => {
+	DOM("@Div.Threadlist_Searcher").forEach((searcher) => {
 		let rnd = new DOM.Randomizer(DOM.Randomizer.TYPE.LEVEL3).generate(16);
 
-		searcher.id = "Thread_Searcher_" + rnd,
-		searcher.querySelector("Label.Thread_Searcher_Label").id = "Thread_Searcher_Label_" + rnd,
-		searcher.querySelector("Div.Thread_Searcher_Container").id = "Thread_Searcher_Container_" + rnd,
-		searcher.querySelector("Input.Thread_Searcher_Container_Input").id = "Thread_Searcher_Container_Input_" + rnd,
-		searcher.querySelector("Label.Thread_Searcher_Container_Label").id = "Thread_Searcher_Container_Label_" + rnd;
+		searcher.id = "Threadlist_Searcher_" + rnd,
+		searcher.querySelector("Label.Threadlist_Searcher_Label").id = "Threadlist_Searcher_Label_" + rnd,
+		searcher.querySelector("Div.Threadlist_Searcher_Container").id = "Threadlist_Searcher_Container_" + rnd,
+		searcher.querySelector("Input.Threadlist_Searcher_Container_Input").id = "Threadlist_Searcher_Container_Input_" + rnd,
+		searcher.querySelector("Label.Threadlist_Searcher_Container_Label").id = "Threadlist_Searcher_Container_Label_" + rnd;
 
-		searcher.querySelector("Label.Thread_Searcher_Label").htmlFor = searcher.querySelector("Input.Thread_Searcher_Container_Input").id,
-		searcher.querySelector("Label.Thread_Searcher_Container_Label").htmlFor = searcher.querySelector("Input.Thread_Searcher_Container_Input").id;
+		searcher.querySelector("Label.Threadlist_Searcher_Label").htmlFor = searcher.querySelector("Input.Threadlist_Searcher_Container_Input").id,
+		searcher.querySelector("Label.Threadlist_Searcher_Container_Label").htmlFor = searcher.querySelector("Input.Threadlist_Searcher_Container_Input").id;
 	});
 
-	DOM("#Thread_Search_Searcher_Container_Input").addEventListener("input", (event) => {
-		let list = Array.from(DOM("#Thread_Search").children).splice(1);
+	DOM("#Threadlist_Search_Searcher_Container_Input").addEventListener("input", (event) => {
+		let list = Array.from(DOM("#Threadlist_Search").children).splice(1);
 			list.forEach((thread) => {
 				if (thread.querySelector("Span:Not(.mdl-list__item-primary-content)").textContent.toLowerCase().indexOf(event.target.value.toLowerCase()) == -1) {
 					thread.setAttribute("Disabled", "");
@@ -75,9 +52,9 @@ window.addEventListener("DOMContentLoaded", () => {
 			});
 	});
 
-	DOM("#Thread_Tab_Reload").addEventListener("click", (event) => {
-		while (DOM("#Thread_Search").children.length > 1) DOM("#Thread_Search").children[1].remove();
-		while (DOM("#Thread_Admin").children.length > 1) DOM("#Thread_Admin").children[1].remove();
+	DOM("#Threadlist_Tab_Reload").addEventListener("click", (event) => {
+		while (DOM("#Threadlist_Search").children.length > 1) DOM("#Threadlist_Search").children[1].remove();
+		while (DOM("#Threadlist_Admin").children.length > 1) DOM("#Threadlist_Admin").children[1].remove();
 
 		Util.refreshThreadList();
 	});
@@ -86,7 +63,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
 	let doc = parent.document;
 
-	DOM("#Thread_Admin_Create").addEventListener("click", () => {
+	DOM("#Threadlist_Admin_Create").addEventListener("click", () => {
 		doc.querySelector("#Dialogs_Thread_InfoInputer").showModal();
 	});
 });

Thread/Viewer/Viewer.js

@@ -53,134 +53,12 @@ window.addEventListener("DOMContentLoaded", () => {
 			for (let i = DOM("#Thread").children.length; i < res.length; i++) {
 				let rnd = new DOM.Randomizer(DOM.Randomizer.TYPE.LEVEL3).generate(16);
 
-				let post = DOM("Div", {
-					classes: ["mdl-card", "mdl-shadow--2dp"],
-
-					attributes: {
-						"UUID": "Thread_Post"
-					},
-
-					dataset: {
-						"pid": res[i].pid
-					},
-
-					children: [
-						DOM("Div", {
-							classes: ["mdl-card__title", "mdl-card--border"],
-
-							attributes: {
-								"UUID": "Thread_Post_Header"
-							},
-
-							children: [
-								DOM("A", {
-									classes: ["mdl-button", "mdl-js-button", "mdl-button--icon", "mdl-js-ripple-effect"],
-
-									attributes: {
-										"UUID": "Thread_Post_Header_ActorPhoto"
-									},
-
-									dataset: {
-										"uid": res[i].uid
-									},
-
-									events: {
-										"click": (event) => {
-											doc.querySelector("#Dialogs_Profile_InfoViewer_Content_UID").value = res[i].uid;
-											doc.querySelector("#Dialogs_Profile_InfoViewer").showModal();
-										}
-									}
-								}),
-
-								DOM("Span", {
-									classes: ["mdl-card__title-text"],
-
-									attributes: {
-										"UUID": "Thread_Post_Header_Actor"
-									}
-								}),
-
-								DOM("Div", {
-									classes: ["mdl-layout-spacer"]
-								}),
-
-								DOM("Span", {
-									text: new Date(res[i].createdAt).toLocaleString(),
-
-									attributes: {
-										"UUID": "Thread_Post_Header_CreatedAt"
-									}
-								}),
-							]
-						}),
-
-						DOM("Div", {
-							classes: ["mdl-card__supporting-text"],
-							text: res[i].content,
-
-							attributes: {
-								"UUID": "Thread_Post_Content"
-							}
-						}),
-
-						DOM("Div", {
-							classes: ["mdl-card__actions"],
-
-							attributes: {
-								"UUID": "Thread_Post_Actions"
-							},
-
-							children: [
-								DOM("Label", {
-									id: "Thread_Post_Actions_Plus_" + rnd,
-									classes: ["mdl-icon-toggle", "mdl-js-icon-toggle", "mdl-js-ripple-effect"],
-
-									attributes: {
-										"For": `Thread_Post_Actions_Plus_${rnd}_Input`
-									},
-
-									children: [
-										DOM("Input", {
-											id: `Thread_Post_Actions_Plus_${rnd}_Input`,
-											classes: ["mdl-icon-toggle__input"],
+				let post = new Components.Thread.Post(res[i].pid, res[i].uid, "", res[i].content, new Date(res[i].createdAt).toLocaleString(), rnd);
+					post.querySelector('A[UUID="Thread_Post_Header_ActorPhoto"]').addEventListener("click", () => {
+						doc.querySelector("#Dialogs_Profile_InfoViewer_Content_UID").value = res[i].uid;
+						doc.querySelector("#Dialogs_Profile_InfoViewer").showModal();
+					});
 
-											attributes: {
-												"UUID": "Thread_Post_Actions_Plus_Input",
-												"Type": "Checkbox"
-											},
-
-											events: {
-												"click": (event) => {
-
-												}
-											}
-										}),
-
-										DOM("Button", {
-											id: `Thread_Post_Actions_Plus_${rnd}_Btn`,
-											classes: ["mdl-button", "mdl-js-button", "mdl-icon-toggle__label"],
-											text: "+1",
-
-											attributes: {
-												"UUID": "Thread_Post_Actions_Plus_Btn"
-											}
-										}),
-
-										DOM("Span", {
-											id: `Thread_Post_Actions_Plus_${rnd}_Count`,
-											text: 0,
-
-											attributes: {
-												"UUID": "Thread_Post_Actions_Plus_Count"
-											}
-										})
-									]
-								})
-							]
-						})
-					]
-				});
-
 				base.Database.get(base.Database.ONCE, "users/" + res[i].uid, (userRes) => {
 					componentHandler.upgradeElement(post.querySelector(`Label#Thread_Post_Actions_Plus_${rnd}`));
 					post.querySelector('Span[UUID="Thread_Post_Header_Actor"]').textContent = userRes.userName;

Thread/Viewer/index.html

@@ -17,6 +17,7 @@
 
 		<Script Src = "/SimpleThread/Core.js"></Script>
 		<Link Rel = "StyleSheet" Href = "/SimpleThread/Core.css" />
+		<Script Src = "/SimpleThread/includes/Components.js"></Script>
 
 		<Script Src = "Viewer.js"></Script>
 		<Link Rel = "StyleSheet" Href = "Viewer.css" />

Thread/index.html

@@ -17,7 +17,8 @@
 
 		<Script Src = "/SimpleThread/Core.js"></Script>
 		<Link Rel = "StyleSheet" Href = "/SimpleThread/Core.css" />
-
+		<Script Src = "/SimpleThread/includes/Components.js"></Script>
+
 		<Script Src = "Thread.js"></Script>
 		<Link Rel = "StyleSheet" Href = "Thread.css" />
 
@@ -35,35 +36,35 @@
 
 	<Body>
 		<Div Class = "mdl-grid">
-			<Div ID = "Thread" Class = "mdl-cell mdl-cell--2-offset mdl-cell--8-col mdl-shadow--4dp mdl-color--white mdl-color-text--grey-800 mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
-				<Div ID = "Thread_Tab" Class = "mdl-tabs__tab-bar">
-					<A ID = "Thread_Tab_Search" Class = "mdl-tabs__tab is-active" Href = "#Thread_Search">スレッド検索</A>
-					<A ID = "Thread_Tab_Admin" Class = "mdl-tabs__tab" Href = "#Thread_Admin">管理中のスレッド</A>
+			<Div ID = "Threadlist" Class = "mdl-cell mdl-cell--2-offset mdl-cell--8-col mdl-shadow--4dp mdl-color--white mdl-color-text--grey-800 mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
+				<Div ID = "Threadlist_Tab" Class = "mdl-tabs__tab-bar">
+					<A ID = "Threadlist_Tab_Search" Class = "mdl-tabs__tab is-active" Href = "#Threadlist_Search">スレッド検索</A>
+					<A ID = "Threadlist_Tab_Admin" Class = "mdl-tabs__tab" Href = "#Threadlist_Admin">管理中のスレッド</A>
 
-					<A ID = "Thread_Tab_Reload" Class = "mdl-tabs__tab">
+					<A ID = "Threadlist_Tab_Reload" Class = "mdl-tabs__tab">
 						<I Class = "material-icons">refresh</I>
 					</A>
 
-					<Div Class = "mdl-tooltip" For = "Thread_Tab_Reload">Refresh thread list</Div>
+					<Div Class = "mdl-tooltip" For = "Threadlist_Tab_Reload">Refresh thread list</Div>
 				</Div>
 
 
 
-				<Div ID = "Thread_Search" Class = "mdl-list mdl-tabs__panel is-active">
-					<Div ID = "Thread_Search_Searcher" Class = "mdl-list__item">
-						<Label ID = "Thread_Search_Searcher" Class = "Thread_Searcher_Label mdl-button mdl-js-button mdl-button--icon" For = "Thread_Search_Searcher_Container_Input">
+				<Div ID = "Threadlist_Search" Class = "mdl-list mdl-tabs__panel is-active">
+					<Div ID = "Threadlist_Search_Searcher" Class = "mdl-list__item">
+						<Label ID = "Threadlist_Search_Searcher" Class = "Threadlist_Searcher_Label mdl-button mdl-js-button mdl-button--icon" For = "Threadlist_Search_Searcher_Container_Input">
 							<I Class = "material-icons">search</I>
 						</Label>
 
-						<Div ID = "Thread_Search_Searcher_Container" Class = "mdl-textfield mdl-js-textfield">
-							<Input ID = "Thread_Search_Searcher_Container_Input" Class = "mdl-textfield__input" Type = "Search" />
-							<Label ID = "Thread_Search_Searcher_Container_Label" Class = "mdl-textfield__label" For = "Thread_Search_Searcher_Container_Input">Search...</Label>
+						<Div ID = "Threadlist_Search_Searcher_Container" Class = "mdl-textfield mdl-js-textfield">
+							<Input ID = "Threadlist_Search_Searcher_Container_Input" Class = "mdl-textfield__input" Type = "Search" />
+							<Label ID = "Threadlist_Search_Searcher_Container_Label" Class = "mdl-textfield__label" For = "Threadlist_Search_Searcher_Container_Input">Search...</Label>
 						</Div>
 					</Div>
 				</Div>
 
-				<Div ID = "Thread_Admin" Class = "mdl-list mdl-tabs__panel">
-					<A ID = "Thread_Admin_Create" Class = "mdl-list__item">
+				<Div ID = "Threadlist_Admin" Class = "mdl-list mdl-tabs__panel">
+					<A ID = "Threadlist_Admin_Create" Class = "mdl-list__item">
 						<Span Class = "mdl-list__item-primary-content">
 							<I Class = "mdl-list__item-avatar material-icons">add</I>
 							<Span>スレッドを作成</Span>

Top/index.html

@@ -17,6 +17,7 @@
 
 		<Script Src = "/SimpleThread/Core.js"></Script>
 		<Link Rel = "StyleSheet" Href = "/SimpleThread/Core.css" />
+		<Script Src = "/SimpleThread/includes/Components.js"></Script>
 
 		<Script Src = "Top.js"></Script>
 		<Link Rel = "StyleSheet" Href = "Top.css" />

debug/index.html

@@ -0,0 +1,14 @@
+<!DocType HTML>
+
+<HTML>
+	<Head>
+		<Meta Charset = "UTF-8" />
+		<Title>Simple Thread == Debug Page</Title>
+
+		<Script Src = "https://genbuproject.github.io/Programs/DOM Extender/DOM Extender v3.0.js"></Script>
+		<Script Src = "/SimpleThread/includes/Components.js"></Script>
+	</Head>
+
+	<Body>
+	</Body>
+</HTML>