fix sources block not updating properly after saving (#216)

assets/js/misc.js

@@ -11,8 +11,7 @@ function formResult({target, detail}) {
 
   const elements = {
     '#description-form': '.image-description',
-    '#uploader-form': '.image_uploader',
-    '#source-form': '#image-source'
+    '#uploader-form': '.image_uploader'
   };
 
   function showResult(resultEl, formEl, response) {

assets/js/sources.js

@@ -1,6 +1,6 @@
 import { inputDuplicatorCreator } from './input-duplicator';
 
-function imageSourcesCreator() {
+function setupInputs() {
   inputDuplicatorCreator({
     addButtonSelector: '.js-image-add-source',
     fieldSelector: '.js-image-source',
@@ -9,4 +9,18 @@ function imageSourcesCreator() {
   });
 }
 
+function imageSourcesCreator() {
+  setupInputs();
+  document.addEventListener('fetchcomplete', ({ target, detail }) => {
+    const sourceSauce = document.querySelector('.js-sourcesauce');
+
+    if (target.matches('#source-form')) {
+      detail.text().then(text => {
+        sourceSauce.outerHTML = text;
+        setupInputs();
+      });
+    }
+  });
+}
+
 export { imageSourcesCreator };

lib/philomena_web/templates/image/_source.html.slime

@@ -1,4 +1,4 @@
-.block
+.js-sourcesauce
   - has_sources = Enum.any?(@image.sources)
   = form_for @changeset, Routes.image_source_path(@conn, :update, @image), [method: "put", class: "hidden", id: "source-form", data: [remote: "true"]], fn f ->
     = if can?(@conn, :edit_metadata, @image) and !@conn.assigns.current_ban do