From c61ed20db21547bd2de93824f876c541cc9261fa Mon Sep 17 00:00:00 2001 From: Genbu Hase Date: Tue, 29 Aug 2017 11:22:29 +0900 Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E6=95=B0=E3=81=AE=E6=A9=9F=E8=83=BD?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E3=83=BB=E4=B8=8D=E5=85=B7=E5=90=88=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Profile/index.html | 1 + Thread/Thread.css | 18 +++--- Thread/Thread.js | 61 ++++++------------ Thread/Viewer/Viewer.js | 132 ++------------------------------------- Thread/Viewer/index.html | 1 + Thread/index.html | 31 ++++----- Top/index.html | 1 + debug/index.html | 14 +++++ includes/Components.html | 31 +++++++++ includes/Components.js | 94 ++++++++++++++++++++++++++++ index.html | 1 + 11 files changed, 192 insertions(+), 193 deletions(-) create mode 100644 debug/index.html create mode 100644 includes/Components.html create mode 100644 includes/Components.js diff --git a/Profile/index.html b/Profile/index.html index c1f3803..38b85f9 100644 --- a/Profile/index.html +++ b/Profile/index.html @@ -17,6 +17,7 @@ + diff --git a/Thread/Thread.css b/Thread/Thread.css index b4f7712..5672457 100644 --- a/Thread/Thread.css +++ b/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; } \ No newline at end of file diff --git a/Thread/Thread.js b/Thread/Thread.js index 94cb8c9..3f02a5b 100644 --- a/Thread/Thread.js +++ b/Thread/Thread.js @@ -9,33 +9,10 @@ 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); } }); } @@ -43,29 +20,29 @@ class Util { 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(); }); }); \ No newline at end of file diff --git a/Thread/Viewer/Viewer.js b/Thread/Viewer/Viewer.js index 3eac7b3..9aa49f7 100644 --- a/Thread/Viewer/Viewer.js +++ b/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; diff --git a/Thread/Viewer/index.html b/Thread/Viewer/index.html index e5dad31..ee6b235 100644 --- a/Thread/Viewer/index.html +++ b/Thread/Viewer/index.html @@ -17,6 +17,7 @@ + diff --git a/Thread/index.html b/Thread/index.html index 83d6c55..a3983a9 100644 --- a/Thread/index.html +++ b/Thread/index.html @@ -17,7 +17,8 @@ - + + @@ -35,35 +36,35 @@
-
-
- スレッド検索 - 管理中のスレッド +
+
+ スレッド検索 + 管理中のスレッド - + refresh -
Refresh thread list
+
Refresh thread list
-
-
-