Update application-attachment to typescript (#793)

* Update application-attachment to typescript

* Fix missing polyfill for NodeList

Co-authored-by: niladic <git@nil.choron.cc>

.gitignore

@@ -30,4 +30,4 @@ node_modules/
 /public/generated-js/
 project/metals.sbt
 project/project/metals.sbt
-project/project/project/metals.sbt
+project/project/project/metals.sbt

app/views/createApplication.scala.html

@@ -343,5 +343,4 @@ <h5 class="title--addline">
  }
  </div>
 }{
- <script type="application/javascript" src="@routes.Assets.versioned("javascripts/application-attachment.js")"></script>
 }

app/views/showApplication.scala.html

@@ -679,5 +679,4 @@ <h5 class="mdl-cell mdl-cell--12-col">Votre réponse :</h5>
  We use twemoji for emoji : https://github.com/twitter/twemoji
  -->
 }{
- <script type="application/javascript" src="@routes.Assets.versioned("javascripts/application-attachment.js")"></script>
 }

typescript/src/application-attachment.ts

@@ -0,0 +1,55 @@
+interface ApplicationAttachment {
+ list: HTMLElement
+ fileInputCount: number
+ idSequence: number
+ increaseOrDecreaseFileInputList: (EventListener) => any
+}
+
+let attachment: any = {}
+
+
+const createAttachment = (list: HTMLElement, count: number, sequence: number): ApplicationAttachment => {
+ return {
+ list,
+ fileInputCount: count,
+ idSequence: sequence, // In order to avoid id collisions
+ increaseOrDecreaseFileInputList: event => {
+ if (event.target.files.length > 0) {
+ // If a new file is added, add a new file input.
+ const li: HTMLLIElement = document.createElement("li");
+ const input: HTMLInputElement = document.createElement("input");
+ input.setAttribute("type", "file");
+ input.setAttribute("name", "file[" + (attachment.idSequence++) + "]");
+ attachment.fileInputCount++;
+ input.addEventListener("change", attachment.increaseOrDecreaseFileInputList);
+ attachment.list.appendChild(li);
+ li.appendChild(input);
+ } else {
+ // If a previous file is unset for upload, remove the corresponding input file.
+ if (attachment.fileInputCount > 1) {
+ event.target.parentElement.parentElement.removeChild(event.target.parentElement);
+ attachment.fileInputCount--;
+ }
+ }
+ }
+ }
+}
+
+const main = (list: HTMLElement | null) => {
+ if (list != null) {
+ const attachment = createAttachment(list, 1, 0)
+ // For all file inputs, add a listener that adds a new file input to allow
+ // for more attachments to be made.
+ attachment.list.querySelectorAll("input").forEach(input => {
+ input.addEventListener("change", attachment.increaseOrDecreaseFileInputList);
+ });
+
+ return attachment;
+ }
+}
+
+window.document.addEventListener("DOMContentLoaded", _ => {
+ "use strict";
+ const attachmentList: HTMLElement | null = document.getElementById("attachment-list");
+ attachment = main(attachmentList)
+}, false);

typescript/src/index.ts

@@ -1,8 +1,11 @@
 // Polyfills
 // See https://github.com/ryanelian/ts-polyfill/tree/master/lib
 import 'ts-polyfill/lib/es2015-core';
+// This adds NodeList.forEach, etc.
+import 'core-js/web/dom-collections';
 
 // Our scripts
 import "./admin.ts"
 import "./mdl-extensions.ts"
-import "./validateAccount"
+import "./application-attachment"
+import "./validateAccount"