Skip to content

Commit 456ed6a

Browse files
txrunotxruno
authored
Merge pull request #10 from Masaabu/development
第四回クリスマスシーズンアップデート
2 parents 167413f + e0ba85c commit 456ed6a

File tree

4 files changed

+198
-22
lines changed

4 files changed

+198
-22
lines changed

‎assets/js/content/comment.js‎

Lines changed: 153 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ var repComments=(JSON.parse(`{}`));
99
var allCommentsCount = 0;
1010
var allComments=(JSON.parse(`{}`));
1111

12+
13+
var F_repgroup="";
14+
var F_repid="";
15+
var F_box="false";
16+
17+
1218
//console.log(repComments)
1319

1420
async function loadData() {
@@ -24,6 +30,9 @@ async function loadData() {
2430
};
2531
allCommentsCount=allCommentsCount+1;
2632
});
33+
34+
let checkBatchDev=((`<svg style="margin: auto 0;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-blue-500 stroke-white"><path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" fill="currentColor" stroke-width="0"></path></svg>`));
35+
let checkBatchCre=((`<svg style="margin: auto 0; color:#f26b30;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-blue-500 stroke-white"><path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" fill="currentColor" stroke-width="0"></path></svg>`));
2736
//console.log(allComments)
2837
//console.log(repComments)
2938
data.reverse().forEach(entry => {});
@@ -43,14 +52,25 @@ async function loadData() {
4352

4453
const usernamePara = document.createElement('p');
4554
usernamePara.classList.add('username');
46-
usernamePara.textContent = (entry.name);
47-
//usernamePara.textContent = (entry.name+' #'+commentCount);//コメントの読み込み番号を表示
55+
const usernameParaDiv = document.createElement('div');
56+
usernameParaDiv.style.display=('flex');
57+
var batchCheck = (entry.check);
58+
var batchName = (entry.name);
59+
var batchDiv = usernameParaDiv;
60+
if(batchCheck==='dev') {
61+
batchDiv.innerHTML = (`${batchName}${checkBatchDev}`);
62+
}else{if(batchCheck==='cre') {
63+
batchDiv.innerHTML = (`${batchName}${checkBatchCre}`);
64+
}else{
65+
batchDiv.innerHTML = (`${batchName}`);
66+
};};
67+
usernamePara.appendChild(usernameParaDiv);
4868

4969
const checkDiv = document.createElement('p');
50-
if (entry.check) {
51-
checkDiv.style.color = '#f26b30';
52-
checkDiv.textContent = "認証済み";
53-
};
70+
// if(entry.check) {
71+
// checkDiv.style.color = '#f26b30';
72+
// checkDiv.textContent = "認証済み";
73+
// };
5474

5575
const timestampPara = document.createElement('p');
5676
timestampPara.classList.add('timestamp');
@@ -93,7 +113,6 @@ async function loadData() {
93113
commentDiv.appendChild(uuidDiv);
94114
commentLi.appendChild(commentDiv);
95115
commentLi.appendChild(commentRepDiv);
96-
97116
commentsContainer.appendChild(commentLi);
98117
commentCount = commentCount+1;
99118
};
@@ -112,13 +131,24 @@ async function loadData() {
112131
REPcommentRepDiv.id = (`comment_${repComments[i].uuid}`);
113132
const REPusernamePara = document.createElement('p');
114133
REPusernamePara.classList.add('username');
115-
REPusernamePara.textContent = (repComments[i].name);
116-
//REPusernamePara.textContent = (repComments[i].name+' #'+repComments[i].rep);//コメントの読み込み番号を表示
134+
const REPusernameParaDiv = document.createElement('div');
135+
REPusernameParaDiv.style.display=('flex');
136+
var batchCheck = (repComments[i].check);
137+
var batchName = (repComments[i].name);
138+
var batchDiv = REPusernameParaDiv;
139+
if(batchCheck==='dev') {
140+
batchDiv.innerHTML = (`${batchName}${checkBatchDev}`);
141+
}else{if(batchCheck==='dev') {
142+
batchDiv.innerHTML = (`${batchName}${checkBatchCre}`);
143+
}else{
144+
batchDiv.innerHTML = (`${batchName}`);
145+
};};
146+
REPusernamePara.appendChild(REPusernameParaDiv);
117147
const REPcheckDiv = document.createElement('p');
118-
if (repComments[i].check) {
119-
REPcheckDiv.style.color = '#f26b30';
120-
REPcheckDiv.textContent = "認証済み";
121-
};
148+
// if (repComments[i].check) {
149+
// REPcheckDiv.style.color = '#f26b30';
150+
// REPcheckDiv.textContent = "認証済み";
151+
// };
122152
const REPtimestampPara = document.createElement('p');
123153
REPtimestampPara.classList.add('timestamp');
124154
REPtimestampPara.textContent = new Date(repComments[i].timestamp).toLocaleString();
@@ -147,8 +177,13 @@ async function loadData() {
147177
REPuuidDiv.appendChild(REPuuidBtn);
148178

149179
const REPcommentRepCommentID = document.createElement('a');
150-
REPcommentRepCommentID.classList.add(`text-[#6094F8]`);
151-
REPcommentRepCommentID.textContent=`@${allComments[repComments[i].rep].name}`
180+
if(allComments[repComments[i].rep]){
181+
REPcommentRepCommentID.classList.add(`text-[#6094F8]`);
182+
REPcommentRepCommentID.textContent=`@${allComments[repComments[i].rep].name}`
183+
}else{
184+
REPcommentRepCommentID.style.color=(`var(--red-500)`);
185+
REPcommentRepCommentID.textContent=`返信元のコメントは削除されています`
186+
}
152187

153188
REPcommentDiv.appendChild(REPcommentRepCommentID);
154189
REPusernamePara.appendChild(REPcheckDiv);
@@ -206,7 +241,7 @@ setInterval(() => {
206241
document.getElementById('loadAddComment').style.display=('none');
207242
}else{
208243
document.getElementById('loadAddComment').style.display=('block');
209-
}
244+
};
210245
}, 500);
211246

212247
// コメントを通報する機能
@@ -228,7 +263,108 @@ function commentReport(id){
228263
};
229264

230265
function commentRep(repgroup,repid){
231-
window.location='#コメント欄';
266+
if(F_box!=='false'){
267+
//console.warn(repgroup)
268+
let F_repForm = document.getElementById(`repForm_${F_box}`);
269+
F_repForm.remove();
270+
F_box='false';
271+
};
272+
F_box=repgroup;
273+
F_repgroup=repgroup;
274+
F_repid=repid;
275+
276+
document.getElementById('form_rep_data').innerHTML=((allComments[`${repid}`].name)+'のコメントを選択中')
232277
document.getElementById('field-repgroup').value=`${repgroup}`;
233278
document.getElementById('field-rep').value=`${repid}`;
279+
280+
var repForm = document.getElementById(`comment_${repgroup}`);
281+
282+
let repFormDiv = document.createElement('div');
283+
repFormDiv.id=(`repForm_${repgroup}`);
284+
repFormDiv.classList.add('fadeUp','comment','commentRep');
285+
286+
let repFormDivBtnDiv = document.createElement('div');
287+
repFormDivBtnDiv.classList.add('c-form__submit');
288+
289+
let repFormDivCloseBtn = document.createElement('button');
290+
repFormDivCloseBtn.style.marginRight=(`8px`)
291+
repFormDivCloseBtn.textContent=(`キャンセル`);
292+
repFormDivCloseBtn.addEventListener('click', () => {
293+
commentRepFormBoxRem(repgroup,repid);
294+
});
295+
let repFormDivSubmitBtn = document.createElement('button');
296+
repFormDivSubmitBtn.style.marginRight=(`8px`)
297+
repFormDivSubmitBtn.textContent=(`送信する`);
298+
repFormDivSubmitBtn.addEventListener('click', () => {
299+
commentRepFormBoxRemSubmit();
300+
commentRepFormBoxRem(repgroup,repid);
301+
});
302+
repFormDivBtnDiv.appendChild(repFormDivSubmitBtn);
303+
repFormDivBtnDiv.appendChild(repFormDivCloseBtn);
304+
305+
306+
let repFormDivContent = document.createElement('div');
307+
repFormDivContent.innerHTML=(`
308+
<form id="rep_commentForm" class="c-form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfIJL-coat1Tl92nVowE17bfkMAnAekuWskkGwNd3h8rX-aIg/formResponse" method="POST" target="rep_rep_hidden_iframe" onsubmit="submitted=true;">
309+
<div class="c-form__item" style="width:100%;"><p class="c-form__input" style="width:100%;" id="rep_form_rep_data"></p></div>
310+
<div class="c-form__item" style="width:100%;">
311+
<input name="entry.1738713134" style="width:100%;" class="c-form__input" id="rep_field_name" type="text" required="required" placeholder="名前を入力" autocomplete="nickname"/>
312+
</div>
313+
<div class="c-form__item" style="width:100%;">
314+
<textarea name="entry.975792514" style="width:100%;" class="c-form__input" id="rep_field_message" placeholder="素敵なコメントを入力" required="required" autocomplete="off"></textarea>
315+
</div>
316+
<div class="c-form__item" style="width:100%;">
317+
<input name="entry.537780005" class="c-form__input" style="width:100%;background-color: var(--background-2);align-items: right;display: none;" id="rep_field_repgroup" type="text" required="required" placeholder="返信コメントグループID"/>
318+
</div>
319+
<div class="c-form__item">
320+
<input name="entry.1032562646" class="c-form__input" style="width:100%;background-color: var(--background-2);align-items: right;display: none;" id="rep_field_rep" type="text" required="required" placeholder="返信コメントID" />
321+
</div>
322+
</form>
323+
<iframe name="rep_hidden_iframe" id="rep_hidden_iframe" style="display: none" onload="if(submitted){window.location='./';}"></iframe>
324+
`);
325+
326+
repFormDiv.appendChild(repFormDivContent)
327+
repFormDiv.appendChild(repFormDivBtnDiv)
328+
repForm.appendChild(repFormDiv);
329+
330+
document.getElementById('rep_form_rep_data').innerHTML=((allComments[`${repid}`].name)+'のコメントを選択中')
331+
document.getElementById('rep_field_repgroup').value=`${repgroup}`;
332+
document.getElementById('rep_field_rep').value=`${repid}`;
333+
window.location=(`#comment_${F_box}`);
334+
};
335+
336+
function commentRepReset(){
337+
document.getElementById('form_rep_data').innerHTML=('通常コメントモード');
338+
};
339+
340+
function commentRepFormBoxRemSubmit(){
341+
let form_url = (`https://docs.google.com/forms/u/0/d/e/1FAIpQLSfIJL-coat1Tl92nVowE17bfkMAnAekuWskkGwNd3h8rX-aIg/formResponse`);
342+
var fetch_url = (`${form_url}?entry.1738713134=${document.getElementById('rep_field_name').value}&entry.975792514=${document.getElementById('rep_field_message').value}&entry.537780005=${document.getElementById('rep_field_repgroup').value}&entry.1032562646=${document.getElementById('rep_field_rep').value}`);
343+
344+
/// FormData作成
345+
const formData = new FormData();
346+
formData.append('entry.1738713134', `${document.getElementById('rep_field_name').value}`);
347+
formData.append('entry.975792514', `${document.getElementById('rep_field_message').value}`);
348+
formData.append('entry.537780005', `${document.getElementById('rep_field_repgroup').value}`);
349+
formData.append('entry.1032562646', `${document.getElementById('rep_field_rep').value}`);
350+
//console.log(fetch_url)
351+
fetch(form_url, {
352+
method: 'POST',
353+
354+
/// OK : FormDataでパラメータ指定
355+
body: formData
356+
}).then(async (response)=>{
357+
//console.log('response : ',await response.json());
358+
}).then((data)=>{
359+
//console.log('data : ', data);
360+
}).catch((error) => {
361+
console.error('error : ', error);
362+
});
363+
window.location=('#')
364+
};
365+
366+
function commentRepFormBoxRem(repgroup,repid){
367+
var repForm = document.getElementById(`repForm_${repgroup}`);
368+
repForm.remove();
369+
F_box='false';
234370
};

‎assets/js/content/news.js‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,42 @@ function jsonListLoad(page){
100100
};
101101
};
102102
};
103-
console.log(`${(endDayObj.MO)-0} / ${tomorrow.getAllPluDateNnY}`)
104-
console.log((endDayObj.MO+endDayObj.DA+endDayObj.HO+endDayObj.MI+endDayObj.SE))
103+
const today = new Date(Date.now());
104+
105+
const deadline = new Date(`${tomorrow.getFullYear},${endDayObj.MO},${endDayObj.DA},${endDayObj.HO},${endDayObj.MI},${endDayObj.SE}`);
106+
//console.log(today)
107+
if(today > deadline){
108+
//console.log('締切日を過ぎています。');
109+
} else {
110+
//console.log('締切日はまだ過ぎていません。');
111+
};
112+
113+
showDiffDate((tomorrow.getFullYear),(endDayObj.MO),(endDayObj.DA))
114+
115+
function showDiffDate( tYear, tMonth, tDay) {
116+
// 現在日時を数値に変換
117+
var nowDate = new Date();
118+
var dnumNow = nowDate.getTime();
119+
120+
// 指定日時を数値に変換
121+
var targetDate = new Date( tYear, tMonth-1, tDay ); // 月の値は 1 を引く必要がある点に注意。(※1月は0、2月は1、……12月は11)
122+
var dnumTarget = targetDate.getTime();
123+
124+
// 引き算して残日数を計算
125+
var diffMSec = dnumTarget - dnumNow;
126+
var diffDays = diffMSec / ( 1000 * 60 * 60 * 24 );
127+
var showDays = Math.ceil( diffDays ); // 小数点以下を切り上げる
128+
129+
// 表示
130+
var Msg;
131+
if( showDays >= 0 ) {
132+
Msg = "指定日まであと " + showDays + "日です。";
133+
}
134+
else {
135+
Msg = "指定日は " + (showDays * -1) + "日前に過ぎました。";
136+
}
137+
return Msg;
138+
}
105139
}
106140
let HtmlNewsGroupDiv = document.createElement('div');
107141
let HtmlNewsContentGroupDiv = `<div class="modal-content newspaper">`

‎data/json/news.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@
5656
"title": "",
5757
"description": "コメント返信機能は現在試験導入中です。いままで'@名前'でコメントしている状態でわかりにくかったので、返信ボタンを押してコメントを送信するとメンションが自動的に追加される機能を追加しました。",
5858
"creator": "@Fun117"
59+
},
60+
{
61+
"title": "注意事項",
62+
"description": "・返信コメントの返信元グループコメントが削除されると返信は表示されません。<br>・返信コメントの返信元コメントが削除されている場合、メンションは置き換えられます。",
63+
"creator": "@Fun117"
5964
}
6065
]
6166
},

‎index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,21 +47,22 @@ <h2>コメント欄</h2>
4747
};
4848
</script>
4949
<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;">
50+
<div class="c-form__item"><p class="c-form__input" id="form_rep_data">通常コメントモード</p></div>
5051
<div class="c-form__item">
5152
<input name="entry.1738713134" class="c-form__input" id="field-name" type="text" required="required" placeholder="名前を入力" autocomplete="nickname"/>
5253
</div>
5354
<div class="c-form__item">
5455
<textarea name="entry.975792514" class="c-form__input" id="field-message" placeholder="素敵なコメントを入力" required="required" autocomplete="off"></textarea>
5556
</div>
5657
<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"/>
58+
<input name="entry.537780005" class="c-form__input" style="background-color: var(--background-2);align-items: right;display: none;" id="field-repgroup" type="text" placeholder="返信コメントグループID"/>
5859
</div>
5960
<div class="c-form__item">
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+
<input name="entry.1032562646" class="c-form__input" style="background-color: var(--background-2);align-items: right;display: none;" id="field-rep" type="text" placeholder="返信コメントID" />
6162
</div>
6263
<div class="c-form__submit">
6364
<button type="submit" style="margin-top: 5px;">送信</button>
64-
<button type="reset" style="margin-top: 5px;">リセット</button>
65+
<button type="reset" style="margin-top: 5px;" onclick="commentRepReset()">リセット</button>
6566
</div>
6667
</form>
6768
<script type="text/javascript">

0 commit comments

Comments
 (0)