Merge 3d7cd73 into 54cb131

CHANGELOG.md

@@ -13,9 +13,11 @@ Always reference the ticket number at the end of the issue description.
 ### Added
 - blackened code
 - added black check into CI
+- Image file input now creates 2 events one on file selecting and another on removing
 
 ### Fixed
 - field_label: changed 'optional' suffix rendering condition for disabled=False [#310][310]
+- Image field: Removing and adding the same image on file inputs now works
 
 [310]: //github.com/sanoma/django-arctic/issues/310
 

arctic/static/arctic/src/assets/js/components/file_input.js

@@ -10,15 +10,29 @@ function get_file_preview(target, url, filename) {
             setTimeout(function(){ target.prev().height(target.height()); }, 20);
         }
         else {
-            target.prev().height(target.height());            
+            target.prev().height(target.height());
         }
     }
     img.src = url;
     if ($(target).next('.better-file-clear-checkbox')) {
         $(target).next('.better-file-clear-checkbox').prop('checked', false);
         $(target).next().next().show();
     }
-    return false;    
+    return false;
+}
+
+function arcticImageEvent(eventName, eventData) {
+    var arcticEvent = '';
+    if(typeof(Event) === 'function') {
+        //normal browsers
+        arcticEvent = new CustomEvent(eventName, { detail: eventData});
+    } else {
+        //IE browsers
+        arcticEvent = document.createEvent('Event');
+        arcticEvent.detail = eventData;
+        arcticEvent.initEvent(eventName, true, true);
+    }
+    document.dispatchEvent(arcticEvent);
 }
 
 
@@ -30,7 +44,9 @@ $(document).ready(function() {
 
         $(input).change(function() {
             var url = URL.createObjectURL($(this).prop('files')[0])
-            get_file_preview(label, url, $(this).prop('files')[0].name)
+            get_file_preview(label, url, $(this).prop('files')[0].name);
+            var data = this;
+            arcticImageEvent('arcticImageAdded', data);
         });
 
         if ($(input).attr('initial')) {
@@ -52,10 +68,13 @@ $(document).ready(function() {
 
         $(clear).click(function() {
             var checkbox = $(this).prev();
+            var data = $(this).parent().parent().find('input[type=file]');
             $(checkbox).prop('checked', true);
             $(this).hide();
             $(label).html('<a href="#upload">' + $(label).attr('placeholder') + '</a>');
             $(label).prev().height(label.height());
+            data.val(null); //reset input field so we can add the same image again;
+            arcticImageEvent('arcticImageRemoved', data);
             return false;
         });
     });

docs/frontend.md

@@ -55,3 +55,22 @@ Optional
 * data-delete-handle - delete button
 * data-delete-placeholder - field to check as delete
 ```
+
+### Custom Events
+* Events
+    * Event name:  ```arcticImageAdded```
+        * Event data: ```input html element```
+        * Occurs after selecting an image on an Image field (similar to the JS change event on a file input)
+    * Event name:  ```arcticImageRemoved```
+        * Event data: ```input html element```
+        * Occurs after removing an image from a Image field
+
+    #
+    Events can be listened with
+    ```
+    document.addEventListener('eventname', function (e) {
+        //code to execute
+        //access the data with
+        console.log(e.detail)
+    }, false);
+    ```