From 2a2f79473286f38cd44eee9c6fb3382dc1a7844f Mon Sep 17 00:00:00 2001
From: gregoirenovel <log@kinko.fr>
Date: Mon, 12 Feb 2018 22:52:41 +0100
Subject: [PATCH] Add the direct_upload JS ans SCSS files

---
 .scss-lint.yml                                |  5 ++-
 .../javascripts/new_design/direct_uploads.js  | 45 +++++++++++++++++++
 .../javascripts/old_design/direct_uploads.js  | 45 +++++++++++++++++++
 app/assets/stylesheets/application.scss       |  1 +
 app/assets/stylesheets/direct_uploads.scss    | 37 +++++++++++++++
 .../new_design/direct_uploads.scss            | 37 +++++++++++++++
 6 files changed, 169 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/new_design/direct_uploads.js
 create mode 100644 app/assets/javascripts/old_design/direct_uploads.js
 create mode 100644 app/assets/stylesheets/direct_uploads.scss
 create mode 100644 app/assets/stylesheets/new_design/direct_uploads.scss

diff --git a/.scss-lint.yml b/.scss-lint.yml
index 835a46690..45ead4f7b 100644
--- a/.scss-lint.yml
+++ b/.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:
diff --git a/app/assets/javascripts/new_design/direct_uploads.js b/app/assets/javascripts/new_design/direct_uploads.js
new file mode 100644
index 000000000..1ac788eec
--- /dev/null
+++ b/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");
+});
\ No newline at end of file
diff --git a/app/assets/javascripts/old_design/direct_uploads.js b/app/assets/javascripts/old_design/direct_uploads.js
new file mode 100644
index 000000000..1ac788eec
--- /dev/null
+++ b/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");
+});
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index e8f02b0cc..f2c861d76 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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
diff --git a/app/assets/stylesheets/direct_uploads.scss b/app/assets/stylesheets/direct_uploads.scss
new file mode 100644
index 000000000..eda8e75c7
--- /dev/null
+++ b/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;
+}
diff --git a/app/assets/stylesheets/new_design/direct_uploads.scss b/app/assets/stylesheets/new_design/direct_uploads.scss
new file mode 100644
index 000000000..eda8e75c7
--- /dev/null
+++ b/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;
+}