From ebf22ceb19503e212b1011883679f6f52e79df0d Mon Sep 17 00:00:00 2001
From: luisramos0 <luisramos0@gmail.com>
Date: Thu, 19 Dec 2019 20:16:40 +0000
Subject: [PATCH] Add js and css code for image settings from spree_backend

---
 .../admin/spree/image_settings.js.erb         | 62 +++++++++++++++++++
 .../admin/sections/image_settings.scss        |  3 +
 2 files changed, 65 insertions(+)
 create mode 100644 app/assets/javascripts/admin/spree/image_settings.js.erb
 create mode 100644 app/assets/stylesheets/admin/sections/image_settings.scss

diff --git a/app/assets/javascripts/admin/spree/image_settings.js.erb b/app/assets/javascripts/admin/spree/image_settings.js.erb
new file mode 100644
index 0000000000..161a3c7164
--- /dev/null
+++ b/app/assets/javascripts/admin/spree/image_settings.js.erb
@@ -0,0 +1,62 @@
+$(document).ready(function() {
+
+  if ($('input#preferences_use_s3[type="checkbox"]:checked').length > 0) {
+    $('#s3_settings, #s3_headers').show();
+  }
+
+  // Toggle display of S3 settings based on value of use_s3 checkbox
+  $('input#preferences_use_s3[type="checkbox"]').click(function() {
+    $('#s3_settings, #s3_headers').toggle();
+  });
+
+  $(document).on('click', '.destroy_style', function(e) {
+    e.preventDefault();
+    $(this).parent().remove();
+  });
+
+  $(document).on('click', '.destroy_new_attachment_styles', function(e) {
+    e.preventDefault();
+    $(this).closest('.new_attachment_styles').remove();
+  });
+
+  $(document).on('click', '.destroy_new_s3_headers', function(e) {
+    e.preventDefault();
+    $(this).closest('.new_s3_headers').remove();
+  });
+
+  // Handle adding new styles
+  var styles_hash_index = 1;
+  $(document).on('click', '.add_new_style', function(e) {
+    e.preventDefault();
+    $('#new-styles').append(generate_html_for_hash("new_attachment_styles", styles_hash_index));
+  });
+
+  // Handle adding new headers
+  var headers_hash_index = 1;
+  $(document).on('click', '.add_header', function(e) {
+    e.preventDefault();
+    $('#headers_list').append(generate_html_for_hash("new_s3_headers", headers_hash_index));
+  });
+
+  // Generates html for new paperclip styles form fields
+  generate_html_for_hash = function(hash_name, index) {
+    var html = '<div class="' + hash_name + ' row"><div class="field">';
+    html += '<div class="five columns">';
+    html += '<label for="' + hash_name + '_' + index + '_name">';
+    html += Spree.translations.name + '</label>';
+    html += '<input id="' + hash_name + '_' + index + '_name" name="' + hash_name + '[' + index + '][name]" type="text" class="fullwidth"><br>';
+    html += '</div><div class="five columns">'
+    html += '<label for="' + hash_name + '_' + index + '_value">';
+    html += Spree.translations.value + '</label>';
+    html += '<input id="' + hash_name + '_' + index + '_value" name="' + hash_name + '[' + index + '][value]" type="text" class="fullwidth">';
+    html += '</div><div class="two columns">'
+    html += '<a href="#" title="' + Spree.translations.destroy + '" class="destroy_' + hash_name + ' with-tip button" style="margin-top: 19px;"><i class="icon-trash"></i> &nbsp; ' + Spree.translations.destroy + '</a>';
+    html += '</div></div></div>';
+
+    index += 1;
+    return html;
+  };
+
+
+
+});
diff --git a/app/assets/stylesheets/admin/sections/image_settings.scss b/app/assets/stylesheets/admin/sections/image_settings.scss
new file mode 100644
index 0000000000..dc7a29b1b2
--- /dev/null
+++ b/app/assets/stylesheets/admin/sections/image_settings.scss
@@ -0,0 +1,3 @@
+.destroy_style, .destroy_header {
+  float: right;
+}