Skip to content

Commit 7f20357

Browse files
toakiryutoakiryu
authored
Add files via upload
1 parent 390903c commit 7f20357

File tree

4 files changed

+270
-9
lines changed

4 files changed

+270
-9
lines changed

‎assets/js/content/comment.js‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
const apiURL = 'https://script.google.com/macros/s/AKfycbxIpIEEnwh2STkLNqF7yHzb_wD6RosNN_l7DgIYeqtM6oyJF_Lw2RJkkbcoEJl2AnE48Q/exec';
2+
3+
var commentCount = 0;
4+
var commentShowC = 0;
5+
var commentListLoadSetC = 20;//この変数に初めの表示するコメント数を設定
6+
commentListLoadSetC - 0;
7+
var repCommentsCount = 0;
8+
var repComments=(JSON.parse(`{}`));
9+
var allCommentsCount = 0;
10+
var allComments=(JSON.parse(`{}`));
11+
12+
//console.log(repComments)
13+
14+
async function loadData() {
15+
const commentsContainer = document.getElementById('commentsContainer');
16+
const response = await fetch(apiURL);
17+
var data = await response.json();
18+
data.reverse().forEach(entry => {
19+
allComments[`${entry.uuid}`]=({"timestamp":entry.timestamp,"name":entry.name,"comment":entry.comment,"repgroup":entry.repgroup,"rep":entry.rep,"uuid":entry.uuid,"check":entry.check});
20+
if(entry.rep) {
21+
repComments[`${repCommentsCount}`]=({"timestamp":entry.timestamp,"name":entry.name,"comment":entry.comment,"repgroup":entry.repgroup,"rep":entry.rep,"uuid":entry.uuid,"check":entry.check});
22+
repCommentsCount=repCommentsCount+1;
23+
}else{
24+
};
25+
allCommentsCount=allCommentsCount+1;
26+
});
27+
//console.log(allComments)
28+
//console.log(repComments)
29+
data.reverse().forEach(entry => {});
30+
data.reverse().forEach(entry => {
31+
//console.log(entry);
32+
if(entry.rep){
33+
}else{
34+
const commentLi = document.createElement('li');
35+
commentLi.id = (`comment_${commentCount}`);
36+
commentLi.classList.add('list-item');
37+
38+
const commentDiv = document.createElement('div');
39+
commentDiv.classList.add('comment');
40+
41+
const commentRepDiv = document.createElement('div');
42+
commentRepDiv.id = (`comment_${entry.uuid}`)
43+
44+
const usernamePara = document.createElement('p');
45+
usernamePara.classList.add('username');
46+
usernamePara.textContent = (entry.name);
47+
//usernamePara.textContent = (entry.name+' #'+commentCount);//コメントの読み込み番号を表示
48+
49+
const checkDiv = document.createElement('p');
50+
if (entry.check) {
51+
checkDiv.style.color = '#f26b30';
52+
checkDiv.textContent = "認証済み";
53+
};
54+
55+
const timestampPara = document.createElement('p');
56+
timestampPara.classList.add('timestamp');
57+
timestampPara.textContent = new Date(entry.timestamp).toLocaleString();
58+
59+
const commentPara = document.createElement('p');
60+
commentPara.textContent = entry.comment;
61+
62+
const uuidDivSpe = document.createElement('p');
63+
uuidDivSpe.classList.add('reportSpace');
64+
65+
const uuidDiv = document.createElement('p');
66+
uuidDiv.style.textAlign=('right');
67+
uuidDiv.classList.add('report');
68+
69+
70+
const repBtn = document.createElement('button');
71+
repBtn.textContent = `返信する`;
72+
repBtn.style.margin = `0 0 0 10px`;
73+
repBtn.style.color = `var(--text-2)`;
74+
repBtn.addEventListener('click', () => {
75+
commentRep((entry.uuid),(entry.uuid));
76+
});
77+
uuidDiv.appendChild(repBtn);
78+
79+
const uuidBtn = document.createElement('button');
80+
uuidBtn.textContent = `通報する`;
81+
uuidBtn.style.margin = `0 0 0 10px`;
82+
uuidBtn.style.color = `var(--text-2)`;
83+
uuidBtn.addEventListener('click', () => {
84+
commentReport(entry.uuid);
85+
});
86+
uuidDiv.appendChild(uuidBtn);
87+
88+
usernamePara.appendChild(checkDiv);
89+
commentDiv.appendChild(usernamePara);
90+
commentDiv.appendChild(timestampPara);
91+
commentDiv.appendChild(commentPara);
92+
commentDiv.appendChild(uuidDivSpe);
93+
commentDiv.appendChild(uuidDiv);
94+
commentLi.appendChild(commentDiv);
95+
commentLi.appendChild(commentRepDiv);
96+
97+
commentsContainer.appendChild(commentLi);
98+
commentCount = commentCount+1;
99+
};
100+
101+
let repCommentsCountFor=(repCommentsCount-1);
102+
for(let i = (repCommentsCountFor-1); i > (repCommentsCountFor-repCommentsCount); i--){
103+
if((repComments[i].repgroup)===entry.uuid){
104+
const REPcommentsContainer = document.getElementById(`comment_${repComments[i].repgroup}`);
105+
//console.warn(`${i} / repG = ${repComments[i].repgroup}`);
106+
const REPcommentLi = document.createElement('li');
107+
REPcommentLi.id = (`comment_${commentCount}`);
108+
REPcommentLi.classList.add('list-item');
109+
const REPcommentDiv = document.createElement('div');
110+
REPcommentDiv.classList.add('comment','commentRep');
111+
const REPcommentRepDiv = document.createElement('div');
112+
REPcommentRepDiv.id = (`comment_${repComments[i].uuid}`);
113+
const REPusernamePara = document.createElement('p');
114+
REPusernamePara.classList.add('username');
115+
REPusernamePara.textContent = (repComments[i].name);
116+
//REPusernamePara.textContent = (repComments[i].name+' #'+repComments[i].rep);//コメントの読み込み番号を表示
117+
const REPcheckDiv = document.createElement('p');
118+
if (repComments[i].check) {
119+
REPcheckDiv.style.color = '#f26b30';
120+
REPcheckDiv.textContent = "認証済み";
121+
};
122+
const REPtimestampPara = document.createElement('p');
123+
REPtimestampPara.classList.add('timestamp');
124+
REPtimestampPara.textContent = new Date(repComments[i].timestamp).toLocaleString();
125+
const REPcommentPara = document.createElement('p');
126+
REPcommentPara.textContent = repComments[i].comment;
127+
const REPuuidDivSpe = document.createElement('p');
128+
REPuuidDivSpe.classList.add('reportSpace');
129+
const REPuuidDiv = document.createElement('p');
130+
REPuuidDiv.style.textAlign=('right');
131+
REPuuidDiv.classList.add('report');
132+
const REPrepBtn = document.createElement('button');
133+
REPrepBtn.textContent = `返信する`;
134+
REPrepBtn.style.margin = `0 0 0 10px`;
135+
REPrepBtn.style.color = `var(--text-2)`;
136+
REPrepBtn.addEventListener('click', () => {
137+
commentRep((repComments[i].repgroup),(repComments[i].uuid));
138+
});
139+
REPuuidDiv.appendChild(REPrepBtn);
140+
const REPuuidBtn = document.createElement('button');
141+
REPuuidBtn.textContent = `通報する`;
142+
REPuuidBtn.style.margin = `0 0 0 10px`;
143+
REPuuidBtn.style.color = `var(--text-2)`;
144+
REPuuidBtn.addEventListener('click', () => {
145+
commentReport(repComments[i].uuid);
146+
});
147+
REPuuidDiv.appendChild(REPuuidBtn);
148+
149+
const REPcommentRepCommentID = document.createElement('a');
150+
REPcommentRepCommentID.classList.add(`text-[#6094F8]`);
151+
REPcommentRepCommentID.textContent=`@${allComments[repComments[i].rep].name}`
152+
153+
REPcommentDiv.appendChild(REPcommentRepCommentID);
154+
REPusernamePara.appendChild(REPcheckDiv);
155+
REPcommentDiv.appendChild(REPusernamePara);
156+
REPcommentDiv.appendChild(REPtimestampPara);
157+
REPcommentDiv.appendChild(REPcommentPara);
158+
REPcommentDiv.appendChild(REPuuidDivSpe);
159+
REPcommentDiv.appendChild(REPuuidDiv);
160+
REPcommentLi.appendChild(REPcommentDiv);
161+
REPcommentLi.appendChild(REPcommentRepDiv);
162+
REPcommentsContainer.appendChild(REPcommentLi);
163+
commentCount = commentCount+1;
164+
};
165+
};
166+
});
167+
if(commentCount >　commentListLoadSetC){
168+
loadAddComment('set',commentListLoadSetC);
169+
}else{
170+
loadAddComment('set',commentCount);
171+
};
172+
};
173+
174+
175+
loadData();
176+
177+
178+
// コメントをさらに読み込むボタン
179+
180+
function loadAddComment(mode,value){
181+
value=value-0;
182+
if(mode === 'set'){
183+
commentShowC = value - 0;
184+
for (let i = commentShowC; i < commentCount; i++) {
185+
document.getElementById(`comment_${i}`).style.display=('none');
186+
};
187+
}else{if(mode === 'add'){
188+
commentShowC = commentShowC + value;
189+
if(commentShowC > commentCount){
190+
commentShowC = commentCount;
191+
};
192+
//console.log(commentShowC)
193+
for (let i = 0; i < commentShowC -1; i++) {
194+
document.getElementById(`comment_${i}`).style.display=('block');
195+
};
196+
//console.log('displayComment = '+commentShowC+'/'+commentCount);
197+
}else{
198+
console.error('The requested mode does not exist.');
199+
};
200+
};
201+
};
202+
203+
setInterval(() => {
204+
document.getElementById('commentShowCHtml').innerHTML=(`表示中のコメント：${commentShowC}/${commentCount}`)
205+
if(commentShowC === commentCount){
206+
document.getElementById('loadAddComment').style.display=('none');
207+
}else{
208+
document.getElementById('loadAddComment').style.display=('block');
209+
}
210+
}, 500);
211+
212+
// コメントを通報する機能
213+
214+
function commentReport(id){
215+
var name = prompt(`コメントを通報する場合、名前等が必要です。このフィールドにEmailを記入することで早期に対応することができます。\n（匿名可、英数字のみ）`, "名前またはメールアドレス").replace(/[^0-9a-z]/gi, '');
216+
if(name !== ''){
217+
var report = prompt(`コメントID: ${id}\nを通報しようとしています。`, "スパムに該当する");
218+
if(report!==null){
219+
var isBoss = confirm(`本当に通報しますか？`);
220+
if(isBoss===true){
221+
var url = (`https://script.google.com/macros/s/AKfycbzxk7ZaOOHWp3R_2EanQDC5PXgciDt4U3h9xvV9ZNPVQ859ZcDp8lSR9vekT9ZCPImn/exec?mode=post&name=${name}&report=${report}&reportId=${id}`);
222+
fetch(url, { mode: 'no-cors' });
223+
};
224+
};
225+
}else{
226+
alert('入力値が正しくありません！');
227+
}
228+
};
229+
230+
function commentRep(repgroup,repid){
231+
window.location='#コメント欄';
232+
document.getElementById('field-repgroup').value=`${repgroup}`;
233+
document.getElementById('field-rep').value=`${repid}`;
234+
};

‎assets/js/content/news.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,14 @@ function jsonListLoad(page){
9494
show='true';
9595
}else{
9696
if(endDayObj.YE === 'n' && (endDayObj.MO+endDayObj.DA+endDayObj.HO+endDayObj.MI+endDayObj.SE) <= tomorrow.getAllPluDateNnY){
97-
show='false';
97+
show='false';
9898
}else{
9999
show='true';
100100
};
101101
};
102102
};
103+
console.log(`${(endDayObj.MO)-0} / ${tomorrow.getAllPluDateNnY}`)
104+
console.log((endDayObj.MO+endDayObj.DA+endDayObj.HO+endDayObj.MI+endDayObj.SE))
103105
}
104106
let HtmlNewsGroupDiv = document.createElement('div');
105107
let HtmlNewsContentGroupDiv = `<div class="modal-content newspaper">`

‎data/json/news.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,23 @@
4242
}
4343
]
4444
},
45+
{
46+
"id": "bccdacbe-b576-439a-b48f-bd67a0b99d94",
47+
"title": "コメント返信機能",
48+
"description": "",
49+
"saveTime": "30",
50+
"start": "nYEnMOnDAnHOnMInSE",
51+
"end": "nYEnMOnDAnHOnMInSE",
52+
"creator": "@Fun117",
53+
"page": "",
54+
"content": [
55+
{
56+
"title": "",
57+
"description": "コメント返信機能は現在試験導入中です。いままで'@名前'でコメントしている状態でわかりにくかったので、返信ボタンを押してコメントを送信するとメンションが自動的に追加される機能を追加しました。",
58+
"creator": "@Fun117"
59+
}
60+
]
61+
},
4562
{
4663
"id": "63a5877e-0ea3-48a1-8d93-a41c7978bb02",
4764
"title": "APIの実装",

‎index.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,25 @@ <h2>お知らせ</h2>
4040
</div>
4141
<div id="コメント欄" class="section_bg">
4242
<h2>コメント欄</h2>
43+
<script>
44+
function doGet() {
45+
var template = HtmlService.createTemplateFromFile('top');
46+
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
47+
};
48+
</script>
4349
<form id="commentForm" class="c-form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfIJL-coat1Tl92nVowE17bfkMAnAekuWskkGwNd3h8rX-aIg/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
4450
<div class="c-form__item">
45-
<input name="entry.1738713134" class="c-form__input" id="field-name" type="text" required="required" placeholder="名前を入力"/>
51+
<input name="entry.1738713134" class="c-form__input" id="field-name" type="text" required="required" placeholder="名前を入力" autocomplete="nickname"/>
4652
</div>
4753
<div class="c-form__item">
48-
<textarea name="entry.975792514" class="c-form__input" id="field-message" placeholder="素敵なコメントを入力" required="required"></textarea>
54+
<textarea name="entry.975792514" class="c-form__input" id="field-message" placeholder="素敵なコメントを入力" required="required" autocomplete="off"></textarea>
55+
</div>
56+
<div class="c-form__item">
57+
<input name="entry.537780005" class="c-form__input" style="background-color: var(--background-2);align-items: right;display: none;" id="field-repgroup" type="text" required="required" placeholder="返信コメントグループID"/>
4958
</div>
50-
<!--
5159
<div class="c-form__item">
52-
<input name="entry.13025857275" class="c-form__input" style="background-color: var(--background-2);align-items: right;" id="field-repCommentId" type="text" required="required" placeholder="現在準備中" disabled/>
53-
</div>-->
60+
<input name="entry.1032562646" class="c-form__input" style="background-color: var(--background-2);align-items: right;display: none;" id="field-rep" type="text" required="required" placeholder="返信コメントID" />
61+
</div>
5462
<div class="c-form__submit">
5563
<button type="submit" style="margin-top: 5px;">送信</button>
5664
<button type="reset" style="margin-top: 5px;">リセット</button>
@@ -59,12 +67,12 @@ <h2>コメント欄</h2>
5967
<script type="text/javascript">
6068
let submitted = false;
6169
</script>
62-
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none" onload="if(submitted){window.location='index';}"></iframe>
70+
<iframe name="hidden_iframe" id="hidden_iframe" style="display: none" onload="if(submitted){window.location='./';}"></iframe>
6371
<div class="wrapper">
6472
<h2></h2>
6573
<ul class="list" id="commentsContainer"></ul>
6674
<div style="max-width: 200px; align-items: center;margin: 2% auto;">
67-
<a id="loadAddComment" class="button" onclick="loadAddComment('add','200')" style="text-align: center;">もっと見る</a>
75+
<a id="loadAddComment" class="button" onclick="loadAddComment('add','20')" style="text-align: center;">もっと見る</a>
6876
<p id="commentShowCHtml" style="text-align: center; margin: 20px auto;"></p>
6977
</div>
7078
</div>
@@ -76,7 +84,7 @@ <h2></h2>
7684
<script src="./assets/js/assets/header.js"></script>
7785
<script src="./assets/js/assets/topGameImage.js"></script>
7886
<script src="./assets/js/assets/footer.js"></script>
79-
<script src="./assets/js/comment.js"></script>
87+
<script src="./assets/js/content/comment.js"></script>
8088
<script src="./assets/js/cookie.js"></script>
8189
<script src="./assets/js/content/news.js"></script>
8290
<!---->

0 commit comments

Comments
 (0)