diff --git a/entry_types/scrolled/package/spec/editor/models/SectionBackdrop-spec.js b/entry_types/scrolled/package/spec/editor/models/SectionBackdrop-spec.js index d3949764e9..e4963bf6d8 100644 --- a/entry_types/scrolled/package/spec/editor/models/SectionBackdrop-spec.js +++ b/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(); + }); }); }); diff --git a/entry_types/scrolled/package/spec/editor/views/EditMotifAreaDialogView-spec.js b/entry_types/scrolled/package/spec/editor/views/EditMotifAreaDialogView-spec.js index 44d0f80d3e..b591e6d5cb 100644 --- a/entry_types/scrolled/package/spec/editor/views/EditMotifAreaDialogView-spec.js +++ b/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() { diff --git a/entry_types/scrolled/package/spec/editor/views/inputs/EditMotifAreaInputView-spec.js b/entry_types/scrolled/package/spec/editor/views/inputs/EditMotifAreaInputView-spec.js index 81bff5fe98..e823256b4d 100644 --- a/entry_types/scrolled/package/spec/editor/views/inputs/EditMotifAreaInputView-spec.js +++ b/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', () => { diff --git a/entry_types/scrolled/package/src/editor/models/SectionBackdrop.js b/entry_types/scrolled/package/src/editor/models/SectionBackdrop.js index 4e66e39dae..24a00e75a1 100644 --- a/entry_types/scrolled/package/src/editor/models/SectionBackdrop.js +++ b/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') + ); + } } }); diff --git a/entry_types/scrolled/package/src/editor/views/EditMotifAreaDialogView.js b/entry_types/scrolled/package/src/editor/views/EditMotifAreaDialogView.js index e503bc25d1..cf88bf5a0a 100644 --- a/entry_types/scrolled/package/src/editor/views/EditMotifAreaDialogView.js +++ b/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() { diff --git a/entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js b/entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js index efd133dcd9..d4ff7eb3a2 100644 --- a/entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js +++ b/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(); }); diff --git a/entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.js b/entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.js index c443a8f267..f5822a59a9 100644 --- a/entry_types/scrolled/package/src/editor/views/inputs/EditMotifAreaInputView.js +++ b/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); },