Add the direct_upload JS ans SCSS files

.scss-lint.yml

@@ -1,4 +1,7 @@
-exclude: 'app/assets/stylesheets/new_design/reset.scss'
+exclude:
+  - 'app/assets/stylesheets/new_design/reset.scss'
+  - 'app/assets/stylesheets/direct_uploads.scss'
+  - 'app/assets/stylesheets/new_design/direct_uploads.scss'
 
 linters:
   BangFormat:

app/assets/javascripts/new_design/direct_uploads.js

@@ -0,0 +1,45 @@
+addEventListener("direct-upload:initialize", function (event) {
+  var target = event.target,
+      detail = event.detail,
+      id = detail.id,
+      file = detail.file;
+
+  target.insertAdjacentHTML("beforebegin", "\n<div id=\"direct-upload-" +
+    id +
+    "\" class=\"direct-upload direct-upload--pending\">\n<div id=\"direct-upload-progress-" +
+    id + "\" class=\"direct-upload__progress\" style=\"width: 0%\"></div>\n<span class=\"direct-upload__filename\">" +
+    file.name +
+    "</span>\n</div>\n");
+});
+
+addEventListener("direct-upload:start", function (event) {
+  var id = event.detail.id,
+      element = document.getElementById("direct-upload-" + id);
+
+  element.classList.remove("direct-upload--pending");
+});
+
+addEventListener("direct-upload:progress", function (event) {
+  var id = event.detail.id,
+      progress = event.detail.progress,
+      progressElement = document.getElementById("direct-upload-progress-" + id);
+
+  progressElement.style.width = progress + "%";
+});
+
+addEventListener("direct-upload:error", function (event) {
+  event.preventDefault();
+  var id = event.detail.id,
+      error = event.detail.error,
+      element = document.getElementById("direct-upload-" + id);
+
+  element.classList.add("direct-upload--error");
+  element.setAttribute("title", error);
+});
+
+addEventListener("direct-upload:end", function (event) {
+  var id = event.detail.id,
+      element = document.getElementById("direct-upload-" + id);
+
+  element.classList.add("direct-upload--complete");
+});

app/assets/javascripts/old_design/direct_uploads.js

@@ -0,0 +1,45 @@
+addEventListener("direct-upload:initialize", function (event) {
+  var target = event.target,
+      detail = event.detail,
+      id = detail.id,
+      file = detail.file;
+
+  target.insertAdjacentHTML("beforebegin", "\n<div id=\"direct-upload-" +
+    id +
+    "\" class=\"direct-upload direct-upload--pending\">\n<div id=\"direct-upload-progress-" +
+    id + "\" class=\"direct-upload__progress\" style=\"width: 0%\"></div>\n<span class=\"direct-upload__filename\">" +
+    file.name +
+    "</span>\n</div>\n");
+});
+
+addEventListener("direct-upload:start", function (event) {
+  var id = event.detail.id,
+      element = document.getElementById("direct-upload-" + id);
+
+  element.classList.remove("direct-upload--pending");
+});
+
+addEventListener("direct-upload:progress", function (event) {
+  var id = event.detail.id,
+      progress = event.detail.progress,
+      progressElement = document.getElementById("direct-upload-progress-" + id);
+
+  progressElement.style.width = progress + "%";
+});
+
+addEventListener("direct-upload:error", function (event) {
+  event.preventDefault();
+  var id = event.detail.id,
+      error = event.detail.error,
+      element = document.getElementById("direct-upload-" + id);
+
+  element.classList.add("direct-upload--error");
+  element.setAttribute("title", error);
+});
+
+addEventListener("direct-upload:end", function (event) {
+  var id = event.detail.id,
+      element = document.getElementById("direct-upload-" + id);
+
+  element.classList.add("direct-upload--complete");
+});

app/assets/stylesheets/application.scss

@@ -21,6 +21,7 @@
 // = require custom_mails
 // = require default_data_block
 // = require description
+// = require direct_uploads
 // = require dossier_show
 // = require dossiers
 // = require etapes

app/assets/stylesheets/direct_uploads.scss

@@ -0,0 +1,37 @@
+.direct-upload {
+  display: inline-block;
+  position: relative;
+  padding: 2px 4px;
+  margin: 0 3px 3px 0;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 13px;
+}
+
+.direct-upload--pending {
+  opacity: 0.6;
+}
+
+.direct-upload__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  opacity: 0.2;
+  background: #0076ff;
+  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
+  transform: translate3d(0, 0, 0);
+}
+
+.direct-upload--complete .direct-upload__progress {
+  opacity: 0.4;
+}
+
+.direct-upload--error {
+  border-color: red;
+}
+
+input[type=file][data-direct-upload-url][disabled] {
+  display: none;
+}

app/assets/stylesheets/new_design/direct_uploads.scss

@@ -0,0 +1,37 @@
+.direct-upload {
+  display: inline-block;
+  position: relative;
+  padding: 2px 4px;
+  margin: 0 3px 3px 0;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 13px;
+}
+
+.direct-upload--pending {
+  opacity: 0.6;
+}
+
+.direct-upload__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  opacity: 0.2;
+  background: #0076ff;
+  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
+  transform: translate3d(0, 0, 0);
+}
+
+.direct-upload--complete .direct-upload__progress {
+  opacity: 0.4;
+}
+
+.direct-upload--error {
+  border-color: red;
+}
+
+input[type=file][data-direct-upload-url][disabled] {
+  display: none;
+}