Initial commit

app/javascript/packs/active_storage_dropzone.js

@@ -0,0 +1,105 @@
+import Dropzone from "dropzone";
+import {DirectUpload} from "activestorage"
+import $ from 'jquery';
+
+class ActiveStorageDropzone {
+  constructor(dropzoneClass, uploaderClass) {
+    this.DropzoneClass = dropzoneClass || Dropzone
+    this.UploaderClass = uploaderClass || DirectUpload
+  }
+
+  init(element) {
+    var acceptedFiles = $(element).data("accepted-files") || "image/*";
+    var dictDefaultMessage = $(element).data("placeholder") || "Drop files here";
+    var submitButton = $($(element).data("submit-button"));
+    var that = this;
+
+    this.myDropzone = new this.DropzoneClass(element, {
+      url: "/",
+      autoQueue: true,
+      acceptedFiles: acceptedFiles,
+      parallelUploads: 30,
+      dictDefaultMessage: dictDefaultMessage,
+
+      init: function () {
+        this.on("sending", (file, xhr, formData) => {
+          var createUpload = (dropzone, upload) => {
+            upload.create((error, blob) => {
+              if (error) {
+                dropzone.emit("error", file, this.options.dictUploadCanceled);
+              } else {
+                const hiddenField = document.createElement('input');
+                hiddenField.setAttribute("type", "hidden");
+                hiddenField.setAttribute("value", blob.signed_id);
+                hiddenField.name = name;
+                document.querySelector('form').appendChild(hiddenField);
+                dropzone.emit("success", file);
+                dropzone.emit("complete", file);
+              }
+
+              // In either case, re-enable the provided submit button
+              if (submitButton) {
+                submitButton.prop("disabled", false);
+              }
+            });
+          }
+          // Disable any provided submit button
+          if (submitButton) {
+            submitButton.prop("disabled", true);
+          }
+
+          // Cancel the default server request
+          xhr.addEventListener("loadstart", () => {
+            xhr.abort();
+          });
+
+          // Start the direct upload
+          var input = document.getElementById(element.dataset.fileInputId);
+          var name = input.name;
+          var url = input.dataset.directUploadUrl;
+          var delegate = {
+            directUploadWillStoreFileWithXHR: (request) => {
+              request.upload.addEventListener("progress", (event) => {
+                this.emit("uploadprogress", file, 100 * (event.loaded / event.totalSize), event.loaded);
+              });
+            }
+          }
+          var upload = new that.UploaderClass(file, url, delegate);
+          createUpload(this, upload);
+        });
+      },
+    });
+
+    var addExistingFiles = (dropzone, files) => {
+      files.forEach((file, index) => {
+        var width = dropzone.options.thumbnailWidth;
+        var height = dropzone.options.thumbnailHeight;
+        var method = dropzone.options.thumbnailMethod;
+        var thumbFn = (thumbnail) => {
+          this.myDropzone.emit('thumbnail', file, thumbnail);
+        }
+
+        dropzone.emit("addedfile", file);
+        if (file.type.indexOf("image") >= 0) {
+          dropzone.createThumbnailFromUrl(file, width, height, method, true, thumbFn, "Anonymous");
+        }
+        dropzone.emit("complete", file);
+      })
+    }
+
+    // Add existing files to the dropzone
+    const existingFiles = $(element).data("existingFiles")
+    addExistingFiles(this.myDropzone, existingFiles);
+  }
+}
+
+Dropzone.autoDiscover = false;
+
+export default ActiveStorageDropzone;
+
+document.addEventListener("turbolinks:load", function () {
+  $("[data-behavior=dropzone]").each(function (index, element) {
+    const dropzone = new ActiveStorageDropzone
+    dropzone.init(element);
+  });
+});

app/javascript/packs/application.js

@@ -0,0 +1,24 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
+import ActiveStorageDropzone from "./active_storage_dropzone";
+import FileInfoDropzone from "./file_info_dropzone";
+import FillableFields from "./fillable_fields";
+import uploadFile from "./upload_file";
+import "./exploitable_rights";
+import "./issues_and_concerns";
+import "./datepickers";

app/javascript/packs/datepickers.js

@@ -0,0 +1,5 @@
+$(document).on("turbolinks:load", () => {
+  $('.datepicker-control').datepicker({
+        format: "yyyy-mm-dd"
+  });
+});

app/javascript/packs/exploitable_rights.js

@@ -0,0 +1,22 @@
+$(document).on("turbolinks:load", () => {
+  const setVisibility = (field) => { 
+    const select = $(`[id $= ${field}_id]`);
+    const option = $("option:selected", select);
+    const show = (option.text() === "Other");
+
+    if (show) {
+      $(`[id $= ${field}_text`).show();
+    } else {
+      $(`[id $= ${field}_text`).val("").hide();
+    };
+  }
+
+  const fields = ["applicable_medium", "territory", "term",  "restriction"]; 
+  for (const field of fields) {
+    setVisibility(field);
+
+    $(document).on("change", `[id $= ${field}_id]`, (event) => {
+      setVisibility(field);
+    })
+  }
+});

app/javascript/packs/file_info_dropzone.js

@@ -0,0 +1,77 @@
+import Dropzone from "dropzone";
+import $ from 'jquery';
+
+class FileInfoDropzone {
+  constructor(element, dropzoneClass) {
+    const DropzoneClass = dropzoneClass || Dropzone
+
+    this.myDropzone = this.createDropzone(element, DropzoneClass)
+
+    this.addExistingFiles(this.myDropzone, element);
+  }
+
+  addExistingFiles(dropzone, element) {
+    const files = $(element).data("existingFiles") || []
+    files.forEach((file, index) => {
+      dropzone.emit("addedfile", file);
+
+      dropzone.emit("complete", file);
+    })
+  }
+
+  createDropzone(element, DropzoneClass) {
+    const acceptedFiles = $(element).data("accepted-files");
+    const dictDefaultMessage = $(element).data("placeholder") || "Drop files here";
+    const inputPrefix = $(element).data("input-name-prefix")
+
+    return new DropzoneClass(element, {
+      url: "/",
+      acceptedFiles: acceptedFiles,
+      autoQueue: true,
+      parallelUploads: 30,
+      dictDefaultMessage: dictDefaultMessage,
+      maxFilesize: null,
+
+      init: function () {
+        this.on("sending", (file, xhr, formData) => {
+          const index = Date.now();
+          let hiddenField = document.createElement('input');
+          hiddenField.setAttribute("type", "hidden");
+          hiddenField.setAttribute("value", file.name);
+          hiddenField.name = `${inputPrefix}[${index}][filename]`;
+          document.querySelector('form').appendChild(hiddenField);
+
+          hiddenField = document.createElement('input');
+          hiddenField.setAttribute("type", "hidden");
+          hiddenField.setAttribute("value", file.type);
+          hiddenField.name = `${inputPrefix}[${index}][content_type]`;
+          document.querySelector('form').appendChild(hiddenField);
+
+          hiddenField = document.createElement('input');
+          hiddenField.setAttribute("type", "hidden");
+          hiddenField.setAttribute("value", file.size);
+          hiddenField.name = `${inputPrefix}[${index}][byte_size]`;
+          document.querySelector('form').appendChild(hiddenField);
+
+          this.emit("success", file);
+          this.emit("complete", file);
+
+          // Cancel the default server request
+          xhr.addEventListener("loadstart", () => {
+            xhr.abort();
+          });
+        });
+      },
+    });
+  }
+}
+
+Dropzone.autoDiscover = false;
+
+export default FileInfoDropzone;
+
+document.addEventListener("turbolinks:load", function () {
+  $("[data-behavior=file-info-dropzone]").each(function (index, element) {
+    new FileInfoDropzone(element)
+  });
+});

app/javascript/packs/fillable_fields.js

@@ -0,0 +1,26 @@
+import $ from 'jquery';
+
+class FillableFields {
+  constructor(element) {
+    this.element = element
+    this.target = document.querySelector(element.dataset.target)
+  }
+
+  fill() {
+    const fillables = this.element.querySelectorAll("[data-fillable-field]")
+
+    fillables.forEach((fillable) => {
+      const selector = `input[name='${fillable.dataset.fillableField}']`
+      const fillableTarget = this.target.querySelector(selector)
+      fillableTarget.value = fillable.textContent
+    })
+  }
+}
+
+export default FillableFields
+
+document.addEventListener("turbolinks:load", function () {
+  $(document).on("click", "[data-behavior=fillable-fields]", (event) => {
+    new FillableFields(event.currentTarget).fill()
+  });
+})

app/javascript/packs/issues_and_concerns.js

@@ -0,0 +1,14 @@
+$(document).on("turbolinks:load", () => {
+   let handleNotesFieldVisibility = function() {
+    if($("#unreleased_appearance_note_category").children("option:selected").val() === 'other') { 
+    $("#unreleased_appearance_notes").show(); 
+  } else {
+    $("#unreleased_appearance_notes").hide();
+  }
+};
+
+ $(document).on("change", "#unreleased_appearance_note_category", handleNotesFieldVisibility); 
+
+  window.handleNotesFieldVisibility = handleNotesFieldVisibility;
+
+});

app/javascript/packs/upload_file.js

@@ -0,0 +1,55 @@
+import {BlobRecord} from "activestorage/src/blob_record";
+import {FileChecksum} from "activestorage/src/file_checksum";
+import $ from 'jquery';
+
+const uploadFile = (file, uploader, input, callback, blobRecordClass, fileChecksumClass) => {
+  const BlobRecordClass = blobRecordClass || BlobRecord
+  const FileChecksumClass = fileChecksumClass || FileChecksum
+
+  uploader.then((evaporate) => {
+    var url = input.data("directUploadUrl");
+
+    FileChecksumClass.create(file, function (error, checksum) {
+      var blob = new BlobRecordClass(file, checksum, url)
+      blob.create(function (error) {
+        const hiddenField = input
+          .attr("type", "hidden")
+          .attr("value", blob.attributes.signed_id)
+          .attr(name, input.name);
+        $("form").append(hiddenField);
+
+        evaporate.add({
+          file: file,
+          name: blob.attributes.key,
+          progress: (percent, stats) => {
+            if (App.FileUploadProgress._findProgressBar(blob.attributes.key)) {
+              App.FileUploadProgress.updateProgressBar(blob.attributes.key, percent * 100);
+            }
+          },
+          complete: (xhr, awsObjectKey) => {
+            App.FileUploadProgress.removeProgressBar(blob.attributes.key)
+            callback();
+          },
+          error: (mssg) => {
+            App.FileUploadProgress.showError(blob.attributes.key, error);
+          },
+          paused: () => {},
+          pausing: () => {},
+          resumed: () => {},
+          cancelled: () => {},
+          started: (fileKey) => {
+            const progressBar = App.FileUploadProgress.createProgressBar(blob.attributes.key);
+            input.parents("form").after(progressBar);
+            App.FileUploadProgress.showProgressBar(blob.attributes.key);
+          },
+          uploadInitiated: (s3Id) => {},
+          warn: (mssg) => {}
+        })
+      });
+    });
+  });
+}
+
+export default uploadFile;
+
+window.uploadFile = uploadFile;