-
Notifications
You must be signed in to change notification settings - Fork 71
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
卒業証書のPDFファイルをアップロードできる機能を追加 #8190
base: main
Are you sure you want to change the base?
Changes from 1 commit
496b8ec
8385b8a
3d8dc4e
f3bc5cc
d16a661
fd1d8db
b2ff53d
3aeb25a
6b5d653
9b55b38
7d82332
97b19ed
ba692b1
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -75,52 +75,53 @@ function extractField(elements) { | |
} | ||
} | ||
|
||
document.addEventListener('DOMContentLoaded', () => { | ||
const ref = document.querySelector('#reference_books') | ||
if (ref) { | ||
$(ref).on('cocoon:after-insert', (_, target) => { | ||
const added = extractField(target) | ||
initializeFileInput(added) | ||
}) | ||
function initializePdfUploadField() { | ||
const uploadField = document.getElementById('js-pdf-upload-field') | ||
if (!uploadField) return | ||
|
||
const removeButton = document.getElementById('js-remove-pdf-button') | ||
const fileLink = document.getElementById('js-pdf-file-link') | ||
const removeFlag = document.getElementById('js-remove-pdf-flag') | ||
const fileNameDisplay = document.getElementById('js-pdf-name') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 提案です! |
||
const fileInput = uploadField.querySelector('input[type="file"]') | ||
|
||
const updateFileNameDisplay = (name = '') => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 提案です! |
||
if (name) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. こんな感じで書けそうです🙆 fileNameDisplay.textContent = name
const displayedStatus = name ? 'block' : 'none'
fileNameDisplay.style.display = displayedStatus There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 指摘された点とfileInputのイベントリスナーのロジックもリファクタリングしました。 |
||
fileNameDisplay.textContent = name | ||
fileNameDisplay.style.display = 'block' | ||
} else { | ||
fileNameDisplay.textContent = '' | ||
fileNameDisplay.style.display = 'none' | ||
} | ||
} | ||
initializeFileInput(document) | ||
}) | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 今回実装する部分を関数にして↑の DOMContentLoadedに入れてはどうでしょうか? あと画面の読み込み時に実行していますが、該当する画面でない場合のreturnがなさそうです。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 変更しました |
||
document.addEventListener('DOMContentLoaded', () => { | ||
const removePdfButton = document.getElementById('js-remove-pdf-button') | ||
const pdfUploadField = document.getElementById('js-pdf-upload-field') | ||
const pdfFileLink = document.getElementById('js-pdf-file-link') | ||
const removePdfFlag = document.getElementById('js-remove-pdf-flag') | ||
const pdfFileNameDisplay = document.getElementById('js-pdf-name') | ||
|
||
removePdfButton.addEventListener('click', () => { | ||
if (pdfFileLink) pdfFileLink.style.display = 'none' | ||
pdfUploadField.style.display = 'flex' | ||
pdfUploadField.querySelector('input[type="file"]').value = '' | ||
removePdfFlag.value = '1' | ||
|
||
if (pdfFileNameDisplay) { | ||
pdfFileNameDisplay.textContent = '' | ||
pdfFileNameDisplay.style.display = 'none' | ||
} | ||
removeButton.addEventListener('click', () => { | ||
if (fileLink) fileLink.style.display = 'none' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ファイルがアップロードされている時のみ削除ボタンが表示されていれば、if文は不要になるかもです There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. fileLinkはHTMLが生成されない場合があるのでエラーになるようです。 |
||
uploadField.style.display = 'flex' | ||
fileInput.value = '' | ||
removeFlag.value = '1' | ||
updateFileNameDisplay() | ||
}) | ||
|
||
const fileInput = pdfUploadField.querySelector('input[type="file"]') | ||
fileInput.addEventListener('change', () => { | ||
if (fileInput.files && fileInput.files[0]) { | ||
const fileName = fileInput.files[0].name | ||
|
||
if (pdfFileNameDisplay) { | ||
pdfFileNameDisplay.textContent = fileName | ||
pdfFileNameDisplay.style.display = 'block' | ||
} | ||
|
||
removePdfFlag.value = '0' | ||
updateFileNameDisplay(fileName) | ||
removeFlag.value = '0' | ||
} else { | ||
if (pdfFileNameDisplay) { | ||
pdfFileNameDisplay.textContent = '' | ||
pdfFileNameDisplay.style.display = 'none' | ||
} | ||
updateFileNameDisplay() | ||
} | ||
}) | ||
} | ||
|
||
document.addEventListener('DOMContentLoaded', () => { | ||
const ref = document.querySelector('#reference_books') | ||
if (ref) { | ||
$(ref).on('cocoon:after-insert', (_, target) => { | ||
const added = extractField(target) | ||
initializeFileInput(added) | ||
}) | ||
} | ||
initializeFileInput(document) | ||
initializePdfUploadField() | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
提案です!
initializeDiplomaUploadField
の方がいいかも?