Ignore motif improvements

entry_types/scrolled/package/spec/editor/models/SectionBackdrop-spec.js

@@ -247,5 +247,136 @@ describe('SectionBackdrop', () => {
 
       expect(listener).toHaveBeenCalled();
     });
+
+  });
+
+  describe('change:ignoreMissingMotif event', () => {
+    it('is triggered when ignoreMissingMotif changes on backdrop image file', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropImage: 10}}]
+      });
+      const backdrop = entry.sections.get(1).configuration.getBackdrop();
+      const file = entry.getFileCollection('image_files').get(100);
+      const listener = jest.fn();
+
+      backdrop.on('change:ignoreMissingMotif', listener);
+      file.configuration.set('ignoreMissingMotif', true);
+
+      expect(listener).toHaveBeenCalled();
+    });
+
+    it('is triggered when ignoreMissingMotif changes on backdrop image mobile file', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropImageMobile: 10}}]
+      });
+      const backdrop = entry.sections.get(1).configuration.getBackdrop();
+      const file = entry.getFileCollection('image_files').get(100);
+      const listener = jest.fn();
+
+      backdrop.on('change:ignoreMissingMotif', listener);
+      file.configuration.set('ignoreMissingMotif', true);
+
+      expect(listener).toHaveBeenCalled();
+    });
+
+    it('is triggered when ignoreMissingMotif changes on new backdrop image file', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}, {id: 101, perma_id: 11}],
+        sections: [{id: 1, configuration: {backdropImage: 10}}]
+      });
+      const backdrop = entry.sections.get(1).configuration.getBackdrop();
+      const newFile = entry.getFileCollection('image_files').get(101);
+      const listener = jest.fn();
+
+      entry.sections.get(1).configuration.set('backdropImage', 11);
+      backdrop.on('change:ignoreMissingMotif', listener);
+      newFile.configuration.set('ignoreMissingMotif', true);
+
+      expect(listener).toHaveBeenCalled();
+    });
+
+    it('is not triggered when ignoreMissingMotif changes on old backdrop image file', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}, {id: 101, perma_id: 11}],
+        sections: [{id: 1, configuration: {backdropImage: 10}}]
+      });
+      const backdrop = entry.sections.get(1).configuration.getBackdrop();
+      const oldFile = entry.getFileCollection('image_files').get(100);
+      const listener = jest.fn();
+
+      entry.sections.get(1).configuration.set('backdropImage', 11);
+      backdrop.on('change:ignoreMissingMotif', listener);
+      oldFile.configuration.set('ignoreMissingMotif', true);
+
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it('is triggered when ignoreMissingMotif changes on new backdrop image mobile file', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}, {id: 101, perma_id: 11}],
+        sections: [{id: 1, configuration: {backdropImageMobile: 10}}]
+      });
+      const backdrop = entry.sections.get(1).configuration.getBackdrop();
+      const newFile = entry.getFileCollection('image_files').get(101);
+      const listener = jest.fn();
+
+      entry.sections.get(1).configuration.set('backdropImageMobile', 11);
+      backdrop.on('change:ignoreMissingMotif', listener);
+      newFile.configuration.set('ignoreMissingMotif', true);
+
+      expect(listener).toHaveBeenCalled();
+    });
+
+    it('is not triggered when ignoreMissingMotif changes on old backdrop image mobile file', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}, {id: 101, perma_id: 11}],
+        sections: [{id: 1, configuration: {backdropImageMobile: 10}}]
+      });
+      const backdrop = entry.sections.get(1).configuration.getBackdrop();
+      const oldFile = entry.getFileCollection('image_files').get(100);
+      const listener = jest.fn();
+
+      entry.sections.get(1).configuration.set('backdropImageMobile', 11);
+      backdrop.on('change:ignoreMissingMotif', listener);
+      oldFile.configuration.set('ignoreMissingMotif', true);
+
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it('is triggered when ignoreMissingMotif changes on video file after switching to video backdrop', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        videoFiles: [{id: 200, perma_id: 20}],
+        sections: [{id: 1, configuration: {backdropImage: 10, backdropVideo: 20}}]
+      });
+      const backdrop = entry.sections.get(1).configuration.getBackdrop();
+      const videoFile = entry.getFileCollection('video_files').get(200);
+      const listener = jest.fn();
+
+      entry.sections.get(1).configuration.set('backdropType', 'video');
+      backdrop.on('change:ignoreMissingMotif', listener);
+      videoFile.configuration.set('ignoreMissingMotif', true);
+
+      expect(listener).toHaveBeenCalled();
+    });
+
+    it('is not triggered when ignoreMissingMotif changes on image file after switching to video backdrop', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        videoFiles: [{id: 200, perma_id: 20}],
+        sections: [{id: 1, configuration: {backdropImage: 10, backdropVideo: 20}}]
+      });
+      const backdrop = entry.sections.get(1).configuration.getBackdrop();
+      const imageFile = entry.getFileCollection('image_files').get(100);
+      const listener = jest.fn();
+
+      entry.sections.get(1).configuration.set('backdropType', 'video');
+      backdrop.on('change:ignoreMissingMotif', listener);
+      imageFile.configuration.set('ignoreMissingMotif', true);
+
+      expect(listener).not.toHaveBeenCalled();
+    });
   });
 });

entry_types/scrolled/package/spec/editor/views/EditMotifAreaDialogView-spec.js

@@ -153,6 +153,38 @@ describe('EditMotifAreaDialogView', () => {
     expect(model.get('imageMotifArea')).toBe(null);
     expect(file.configuration.get('motifArea')).toBe(null);
   });
+
+  it('sets ignoreMissingMotif on file when resetting motif area', () => {
+    const model = new Backbone.Model({
+      imageMotifArea: {
+        left: 5, top: 10, width: 25, height: 50
+      }
+    });
+    const file = factories.imageFile({
+      width: 200,
+      height: 100,
+      configuration: {
+        motifArea: {
+          left: 5, top: 10, width: 25, height: 50
+        }
+      }
+    });
+
+    const view = new EditMotifAreaDialogView({
+      model,
+      file,
+      propertyName: 'image'
+    });
+
+    view.render();
+    view.onShow();
+
+    fireEvent.click(getByText(view.el, 'Reset'));
+    fireEvent.click(getByText(view.el, 'Save'));
+
+    expect(file.configuration.get('ignoreMissingMotif')).toBe(true);
+  });
+
 });
 
 function fakeImgAreaSelect() {

entry_types/scrolled/package/spec/editor/views/inputs/EditMotifAreaInputView-spec.js

@@ -465,6 +465,27 @@ describe('EditMotifAreaInputView', () => {
 
       expect(view.el).toHaveClass(styles.hidden);
     });
+
+    it('adds hidden class when ignoreMissingMotif is set externally on file', () => {
+      const entry = createEntry({
+        imageFiles: [{id: 100, perma_id: 10}],
+        sections: [{id: 1, configuration: {backdropImage: 10}}]
+      });
+      const file = entry.getFileCollection('image_files').get(100);
+
+      const view = new EditMotifAreaInputView({
+        model: entry.sections.get(1).configuration,
+        onlyShowWhenMissing: true
+      });
+
+      renderBackboneView(view);
+
+      expect(view.el).not.toHaveClass(styles.hidden);
+
+      file.configuration.set('ignoreMissingMotif', true);
+
+      expect(view.el).toHaveClass(styles.hidden);
+    });
   });
 
   describe('with required option', () => {

entry_types/scrolled/package/src/editor/models/SectionBackdrop.js

@@ -16,6 +16,15 @@ export const SectionBackdrop = Object.extend({
       'change:backdropType',
       () => this.trigger('change:type')
     );
+
+    this.listenToFiles();
+    this.listenTo(
+      configuration,
+      'change:backdropType ' +
+      'change:backdropImage change:backdropImageMobile ' +
+      'change:backdropVideo change:backdropVideoMobile',
+      this.listenToFiles
+    );
   },
 
   getMotifAreaStatus({portrait} = {}) {
@@ -68,5 +77,26 @@ export const SectionBackdrop = Object.extend({
     else {
       return backdropType === 'video' ? 'backdropVideoMotifArea' : 'backdropImageMotifArea';
     }
+  },
+
+  listenToFiles() {
+    this.listenToFile('currentFile', {portrait: false});
+    this.listenToFile('currentPortraitFile', {portrait: true});
+  },
+
+  listenToFile(property, options) {
+    if (this[property]) {
+      this.stopListening(this[property].configuration);
+    }
+
+    this[property] = this.getFile(options);
+
+    if (this[property]) {
+      this.listenTo(
+        this[property].configuration,
+        'change:ignoreMissingMotif',
+        () => this.trigger('change:ignoreMissingMotif')
+      );
+    }
   }
 });

entry_types/scrolled/package/src/editor/views/EditMotifAreaDialogView.js

@@ -73,6 +73,10 @@ export const EditMotifAreaDialogView = Marionette.ItemView.extend({
 
     this.model.set(this.getPropertyName(), motifArea);
     this.options.file.configuration.set('motifArea', motifArea);
+
+    if (!motifArea) {
+      this.options.file.configuration.set('ignoreMissingMotif', true);
+    }
   },
 
   onRender() {

entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js

@@ -98,7 +98,7 @@ export const EditSectionPaddingsView = EditConfigurationView.extend({
         toggleExposeMotifAreaInputs(tab, {portrait, disabled, paddingTopProperty});
       }
       else {
-        tab.listenTo(backdropFile, 'change:configuration:ignoreMissingMotif', () => {
+        tab.listenTo(backdrop, 'change:ignoreMissingMotif', () => {
           configurationEditor.refresh();
         });
 

entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.js

@@ -41,6 +41,7 @@ export const EditMotifAreaInputView = Marionette.ItemView.extend({
     this.backdrop = this.model.getBackdrop();
 
     this.listenTo(this.backdrop, 'change:motifArea', this.update);
+    this.listenTo(this.backdrop, 'change:ignoreMissingMotif', this.update);
     this.listenTo(this.backdrop, 'change:type', this.render);
   },