予想より進まなかった…

Author: GenbuHase

Dialog.css

@@ -20,10 +20,26 @@ Dialog[ID^="Dialogs"] Div.mdl-textfield {
 	Width: 20%;
 
 	Margin-Right: 5%;
+
+	Background: Transparent Center / Cover;
+	Border-Radius: 100%;
+}
+
+#Dialogs_Profile_InfoViewer_Content_Photo::Before {
+	Content: "";
+	
+	Display: Block;
+	Padding-Top: 100%;
+}
+
+#Dialogs_Profile_InfoViewer_Content_Info {
+	Flex: 1;
 }
 
 #Dialogs_Profile_InfoViewer_Content_Info_Detail {
 	Padding: 1em 0 4em 0;
+
+	White-Space: Pre-Wrap;
 }
 
 #Dialogs_Profile_InfoViewer_Content_Info_Link {

Dialog.js

@@ -1,6 +1,14 @@
 window.addEventListener("DOMContentLoaded", () => {
+	let watchers = [];
+
 	DOM('@Dialog').forEach((dialog) => {
 		dialogPolyfill.registerDialog(dialog);
+
+		if (dialog.querySelector('Button[Data-Action="Dialog_Submit"]')) {
+			dialog.addEventListener("keydown", (event) => {
+				console.log(event);
+			});
+		}
 	});
 
 	DOM('@Dialog Button[Data-Action="Dialog_Close"]').forEach((btn) => {
@@ -21,6 +29,38 @@ window.addEventListener("DOMContentLoaded", () => {
 
 
 
+	watchers.push({
+		valueObj: { value: "" },
+		watcher: null
+	}); watchers[watchers.length - 1].watcher = new DOM.Watcher({
+		target: watchers[watchers.length - 1].valueObj,
+		onGet: () => { watchers[watchers.length - 1].valueObj.value = DOM("#Dialogs_Profile_InfoViewer_Content_UID").value },
+
+		onChange: (watcher) => {
+			base.Database.get(base.Database.ONCE, `users/${watcher.newValue}`, (res) => {
+				DOM("#Dialogs_Profile_InfoViewer_Content_Photo").dataset.uid = watcher.newValue,
+				DOM("#Dialogs_Profile_InfoViewer_Content_Info_Name").textContent = res.userName,
+				DOM("#Dialogs_Profile_InfoViewer_Content_Info_Detail").textContent = res.detail;
+			});
+		}
+	});
+
+	watchers.forEach((watcherObj) => {
+		DOM.Watcher.addWatcher(watcherObj.watcher);
+	});
+
+
+
+	[DOM("#Dialogs_Thread_InfoInputer_Content_Name_Input"), DOM("#Dialogs_Thread_InfoInputer_Content_Overview_Input"), DOM("#Dialogs_Thread_InfoInputer_Content_Detail_Input")].forEach((textarea) => {
+		textarea.addEventListener("input", (event) => {
+			if (event.target.value.replace(/\s/g, "").length == 0) {
+				DOM("#Dialogs_Thread_InfoInputer_Btns_OK").classList.add("mdl-button--disabled");
+			} else {
+				DOM("#Dialogs_Thread_InfoInputer_Btns_OK").classList.remove("mdl-button--disabled");
+			}
+		});
+	});
+
 	DOM("#Dialogs_Thread_InfoInputer_Btns_OK").addEventListener("click", () => {
 		base.Database.transaction("threads", (res) => {
 			let now = new Date().getTime();

Main.js

@@ -36,6 +36,31 @@ window.addEventListener("DOMContentLoaded", () => {
 			});
 		}
 
+		base.Database.get(base.Database.ONCE, "users", (res) => {
+			let photoStyles = [];
+	
+			for (let uid in res) {
+				res[uid].gplusPhoto || (res[uid].gplusPhoto = "");
+	
+				let photoStyle = (() => {
+					let style = new Style((() => {
+						let prop = {};
+							prop[`#Dialogs_Profile_InfoViewer_Content_Photo[Data-UID="${uid}"]`] = {
+								"Background-Image": `URL(${res[uid].gplusPhoto})`
+							};
+	
+						return prop;
+					})());
+	
+					return style.textContent;
+				})();
+	
+				photoStyles.push(photoStyle);
+			}
+	
+			DOM('$Style[UUID="Dialogs_Profile_InfoViewer_Content_Photo--Manager"]').textContent = photoStyles.join("\r\n");
+		});
+
 
 
 		let querys = location.querySort();

Multi Replacer.cfg

@@ -1,5 +1,5 @@
 [Config]
 Value1=https://genbuproject.github.io/
-Value2=http://localhost:8000/
+Value2=http://localhost:8002/
 Extensions=*.html;*.js;*.css
 Recent=1

Thread/Viewer/Viewer.css

@@ -64,4 +64,8 @@ Span[UUID="Thread_Post_Actions_Plus_Count"] {
 	Bottom: 0;
 
 	Padding: 5vh 4vw;
+}
+
+#FlowPanel_Btns > *[Disabled] {
+	Display: None;
 }

Thread/Viewer/Viewer.js

@@ -1,11 +1,18 @@
 window.addEventListener("DOMContentLoaded", () => {
+	if (!base.user) {
+		DOM("#FlowPanel_Btns_CreatePost").setAttribute("Disabled", "");
+	}
+
 	let querys = location.querySort();
 
 	if (!querys.TID) {
 		location.href = "/SimpleThread/Error/406/";
 	}
+	
+	let doc = parent.document;
+		doc.querySelector("#Dialogs_Thread_Poster_Content_TID").value = querys.TID;
 
-	base.Database.get(base.Database.INTERVAL, "users", (res) => {
+	base.Database.get(base.Database.ONCE, "users", (res) => {
 		let photoStyles = [];
 
 		for (let uid in res) {
@@ -46,9 +53,11 @@ window.addEventListener("DOMContentLoaded", () => {
 					classes: ["mdl-card", "mdl-shadow--2dp"],
 
 					attributes: {
-						"UUID": "Thread_Post",
-						"Data-UID": res[i].uid,
-						"Data-PID": res[i].pid
+						"UUID": "Thread_Post"
+					},
+
+					dataset: {
+						"pid": res[i].pid
 					},
 
 					children: [
@@ -64,8 +73,18 @@ window.addEventListener("DOMContentLoaded", () => {
 									classes: ["mdl-button", "mdl-js-button", "mdl-button--icon", "mdl-js-ripple-effect"],
 
 									attributes: {
-										"UUID": "Thread_Post_Header_ActorPhoto",
-										"Data-UID": res[i].uid
+										"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();
+										}
 									}
 								}),
 
@@ -124,6 +143,12 @@ window.addEventListener("DOMContentLoaded", () => {
 											attributes: {
 												"UUID": "Thread_Post_Actions_Plus_Input",
 												"Type": "Checkbox"
+											},
+
+											events: {
+												"click": (event) => {
+													
+												}
 											}
 										}),
 
@@ -139,7 +164,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
 										DOM("Span", {
 											id: `Thread_Post_Actions_Plus_${rnd}_Count`,
-											text: "0",
+											text: 0,
 
 											attributes: {
 												"UUID": "Thread_Post_Actions_Plus_Count"
@@ -166,15 +191,6 @@ window.addEventListener("DOMContentLoaded", () => {
 
 
 
-	let doc = parent.document;
-		doc.querySelector("#Dialogs_Thread_Poster_Content_TID").value = querys.TID;
-
-	DOM('@A[UUID="Thread_Post_Header_ActorPhoto"]').forEach((btn) => {
-		btn.addEventListener("click", () => {
-			doc.querySelector("#Dialogs_Profile_InfoViewer").showModal();
-		});
-	});
-
 	DOM("#FlowPanel_Btns_CreatePost").addEventListener("click", () => {
 		doc.querySelector("#Dialogs_Thread_Poster").showModal();
 

index.html

@@ -26,6 +26,8 @@
 		<Script Src = "Dialog.js"></Script>
 		<Link Rel = "StyleSheet" Href = "Dialog.css" />
 
+		<Style UUID = "Dialogs_Profile_InfoViewer_Content_Photo--Manager"></Style>
+
 		<Script>
 			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -89,7 +91,7 @@
 					</Div>
 
 					<Div ID = "Dialogs_Account_CreateNotify_Btns" Class = "mdl-dialog__actions">
-						<Button ID = "Dialogs_Account_CreateNotify_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Data-Action = "Dialog_Close" Type = "Button">閉じる</Button>
+						<Button ID = "Dialogs_Account_CreateNotify_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button" Data-Action = "Dialog_Close">閉じる</Button>
 					</Div>
 				</Dialog>
 
@@ -99,7 +101,7 @@
 					</Div>
 
 					<Div ID = "Dialogs_Account_DeleteNotify_Btns" Class = "mdl-dialog__actions">
-						<Button ID = "Dialogs_Account_DeleteNotify_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Data-Action = "Dialog_Close" Type = "Button">閉じる</Button>
+						<Button ID = "Dialogs_Account_DeleteNotify_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button" Data-Action = "Dialog_Close">閉じる</Button>
 					</Div>
 				</Dialog>
 			</Div>
@@ -111,7 +113,7 @@
 					</Div>
 
 					<Div ID = "Dialogs_Profile_ChangeNotify_Btns" Class = "mdl-dialog__actions">
-						<Button ID = "Dialogs_Profile_ChangeNotify_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Data-Action = "Dialog_Close" Type = "Button">閉じる</Button>
+						<Button ID = "Dialogs_Profile_ChangeNotify_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button" Data-Action = "Dialog_Close">閉じる</Button>
 					</Div>
 				</Dialog>
 
@@ -131,21 +133,18 @@
 
 					<Div ID = "Dialogs_Profile_DeleteConfirmer_Btns" Class = "mdl-dialog__actions">
 						<Button ID = "Dialogs_Profile_DeleteConfirmer_Btns_Yes" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button">はい</Button>
-						<Button ID = "Dialogs_Profile_DeleteConfirmer_Btns_No" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Data-Action = "Dialog_Close" Type = "Button">いいえ</Button>
+						<Button ID = "Dialogs_Profile_DeleteConfirmer_Btns_No" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button" Data-Action = "Dialog_Close">いいえ</Button>
 					</Div>
 				</Dialog>
 
 				<Dialog ID = "Dialogs_Profile_InfoViewer" Class = "mdl-dialog">
 					<Div ID = "Dialogs_Profile_InfoViewer_Content" Class = "mdl-dialog__content">
-						<Div ID = "Dialogs_Profile_InfoViewer_Content_Photo" Data-TagID = "ProfilePhoto"></Div>
+						<Div ID = "Dialogs_Profile_InfoViewer_Content_Photo" Data-UID = ""></Div>
 
 						<Div ID = "Dialogs_Profile_InfoViewer_Content_Info">
-							<Span ID = "Dialogs_Profile_InfoViewer_Content_Info_Name" Class = "mdl-layout__title">プログラなーいGenboo</Span>
+							<Span ID = "Dialogs_Profile_InfoViewer_Content_Info_Name" Class = "mdl-layout__title"></Span>
 
-							<Div ID = "Dialogs_Profile_InfoViewer_Content_Info_Detail">
-								Google+で色々やってる暇人です。<Br />
-								一応Simple Threadのオーナーやってます✌('ω')ｽｯ
-							</Div>
+							<Div ID = "Dialogs_Profile_InfoViewer_Content_Info_Detail"></Div>
 
 							<Span Class = "mdl-layout__title">リンク</Span>
 
@@ -161,10 +160,12 @@
 								</Div>
 							</Div>
 						</Div>
+
+						<Input ID = "Dialogs_Profile_InfoViewer_Content_UID" Type = "Hidden" Value = "" />
 					</Div>
 
 					<Div ID = "Dialogs_Profile_InfoViewer_Btns" Class = "mdl-dialog__actions">
-						<Button ID = "Dialogs_Profile_InfoViewer_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Data-Action = "Dialog_Close" Type = "Button">閉じる</Button>
+						<Button ID = "Dialogs_Profile_InfoViewer_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button" Data-Action = "Dialog_Close">閉じる</Button>
 					</Div>
 				</Dialog>
 			</Div>
@@ -189,8 +190,8 @@
 					</Div>
 
 					<Div ID = "Dialogs_Thread_InfoInputer_Btns" Class = "mdl-dialog__actions">
-						<Button ID = "Dialogs_Thread_InfoInputer_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button">作成</Button>
-						<Button ID = "Dialogs_Thread_InfoInputer_Btns_Cancel" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Data-Action = "Dialog_Close" Type = "Button">キャンセル</Button>
+						<Button ID = "Dialogs_Thread_InfoInputer_Btns_OK" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button" Data-Action = "Dialog_Submit">作成</Button>
+						<Button ID = "Dialogs_Thread_InfoInputer_Btns_Cancel" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button" Data-Action = "Dialog_Close">キャンセル</Button>
 					</Div>
 				</Dialog>
 
@@ -205,8 +206,8 @@
 					</Div>
 
 					<Div ID = "Dialogs_Thread_Poster_Btns" Class = "mdl-dialog__actions">
-						<Button ID = "Dialogs_Thread_Poster_Btns_OK" Class = "mdl-button mdl-js-button mdl-button--disabled mdl-js-ripple-effect" Type = "Button">投稿</Button>
-						<Button ID = "Dialogs_Thread_Poster_Btns_Cancel" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Data-Action = "Dialog_Close" Type = "Button">キャンセル</Button>
+						<Button ID = "Dialogs_Thread_Poster_Btns_OK" Class = "mdl-button mdl-js-button mdl-button--disabled mdl-js-ripple-effect" Type = "Button" Data-Action = "Dialog_Submit">投稿</Button>
+						<Button ID = "Dialogs_Thread_Poster_Btns_Cancel" Class = "mdl-button mdl-js-button mdl-js-ripple-effect" Type = "Button" Data-Action = "Dialog_Close">キャンセル</Button>
 					</Div>
 				</Dialog>
 			</Div>