diff --git a/packages/lib/src/core/presets/columnGallery.js b/packages/lib/src/core/presets/columnGallery.js index 357675e52..c57d4d6e2 100644 --- a/packages/lib/src/core/presets/columnGallery.js +++ b/packages/lib/src/core/presets/columnGallery.js @@ -17,6 +17,8 @@ const fixToColumn = (options) => { presetOptions[optionsMap.layoutParams.groups.allowedGroupTypes] = [ GALLERY_CONSTS[optionsMap.layoutParams.groups.allowedGroupTypes]['1'], ]; + presetOptions[optionsMap.layoutParams.structure.responsiveMode] = + GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW; presetOptions[optionsMap.layoutParams.structure.numberOfGridRows] = 1; presetOptions[optionsMap.layoutParams.crop.enableSmartCrop] = false; diff --git a/packages/lib/src/core/presets/fullsizeGallery.js b/packages/lib/src/core/presets/fullsizeGallery.js index 3569a43e5..4fbe3b6ff 100644 --- a/packages/lib/src/core/presets/fullsizeGallery.js +++ b/packages/lib/src/core/presets/fullsizeGallery.js @@ -20,6 +20,8 @@ const fixToFullsize = (options) => { presetOptions[optionsMap.layoutParams.groups.allowedGroupTypes] = [ GALLERY_CONSTS[optionsMap.layoutParams.groups.allowedGroupTypes]['1'], ]; + presetOptions[optionsMap.layoutParams.structure.responsiveMode] = + GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW; presetOptions[optionsMap.layoutParams.structure.numberOfGridRows] = 1; presetOptions[optionsMap.layoutParams.crop.enableSmartCrop] = false; presetOptions[optionsMap.behaviourParams.gallery.horizontal.enableScrollSnap] = true; diff --git a/packages/lib/src/core/presets/sliderGallery.js b/packages/lib/src/core/presets/sliderGallery.js index 8405ee378..24fe7691f 100644 --- a/packages/lib/src/core/presets/sliderGallery.js +++ b/packages/lib/src/core/presets/sliderGallery.js @@ -17,7 +17,8 @@ const fixToSlider = (options) => { ]; presetOptions[optionsMap.layoutParams.structure.numberOfGridRows] = 1; presetOptions[optionsMap.layoutParams.crop.enableSmartCrop] = false; - + presetOptions[optionsMap.layoutParams.structure.responsiveMode] = + GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW; presetOptions[optionsMap.behaviourParams.gallery.horizontal.enableScrollSnap] = true; presetOptions[optionsMap.layoutParams.crop.cropOnlyFill] = true; presetOptions[optionsMap.behaviourParams.gallery.horizontal.slideAnimation] = diff --git a/packages/lib/src/core/presets/slideshowGallery.js b/packages/lib/src/core/presets/slideshowGallery.js index 1c1f2ee4d..6d3215992 100644 --- a/packages/lib/src/core/presets/slideshowGallery.js +++ b/packages/lib/src/core/presets/slideshowGallery.js @@ -8,6 +8,8 @@ const fixToSlideshow = (options) => { presetOptions[optionsMap.layoutParams.structure.galleryLayout] = GALLERY_CONSTS[optionsMap.layoutParams.structure.galleryLayout].SLIDESHOW; presetOptions[optionsMap.layoutParams.crop.ratios] = ['100%/100%']; + presetOptions[optionsMap.layoutParams.structure.responsiveMode] = + GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW; presetOptions[optionsMap.layoutParams.crop.enable] = true; presetOptions[optionsMap.layoutParams.structure.scrollDirection] = diff --git a/packages/lib/src/core/presets/thumbnailsGallery.js b/packages/lib/src/core/presets/thumbnailsGallery.js index 45d2b32f9..6abfc2779 100644 --- a/packages/lib/src/core/presets/thumbnailsGallery.js +++ b/packages/lib/src/core/presets/thumbnailsGallery.js @@ -7,6 +7,8 @@ const fixToThumbnail = (options) => { presetOptions[optionsMap.layoutParams.structure.galleryLayout] = GALLERY_CONSTS[optionsMap.layoutParams.structure.galleryLayout].THUMBNAIL; presetOptions[optionsMap.layoutParams.crop.ratios] = ['100%/100%']; + presetOptions[optionsMap.layoutParams.structure.responsiveMode] = + GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW; presetOptions[optionsMap.layoutParams.crop.enable] = true; presetOptions[optionsMap.layoutParams.info.placement] = GALLERY_CONSTS[optionsMap.layoutParams.info.placement].OVERLAY; diff --git a/packages/lib/src/settings/options/layoutParams_targetItemSize_value.js b/packages/lib/src/settings/options/layoutParams_targetItemSize_value.js index 1ae73096a..e4f6cec31 100644 --- a/packages/lib/src/settings/options/layoutParams_targetItemSize_value.js +++ b/packages/lib/src/settings/options/layoutParams_targetItemSize_value.js @@ -1,10 +1,30 @@ +import { default as GALLERY_CONSTS } from '../../common/constants'; +import optionsMap from '../../core/helpers/optionsMap'; +import layoutParams_structure_responsiveMode from './layoutParams_structure_responsiveMode'; + export default { title: 'Item Size (smart)', description: `Set the item size between 1 to 100 units. The real size will be determined by the layout.`, - isRelevant: () => { - return true; + isRelevant: (options) => { + return ( + //is vertical layout and fit to screen? + //if the responsive mode is irrelevant, return true (because we don't need to check it). Otherwise, check if it's fit to screen + (options[optionsMap.layoutParams.structure.scrollDirection] === + GALLERY_CONSTS[optionsMap.layoutParams.structure.scrollDirection].VERTICAL && + (!layoutParams_structure_responsiveMode.isRelevant(options) || + options[optionsMap.layoutParams.structure.responsiveMode] === + GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].FIT_TO_SCREEN)) || + //is horizontal collage? + //(the only horizontal layout we want it to be relevant in is collage, and its only relevant for group size > 1. + //But in horizontal grid, if the numberOfGridRows is more than 1, it changes the group size. + //So the way to handle it is to make sure that the groupSize > 1 not because of numberOfGridRows) + (options[optionsMap.layoutParams.structure.scrollDirection] === + GALLERY_CONSTS[optionsMap.layoutParams.structure.scrollDirection].HORIZONTAL && + options[optionsMap.layoutParams.groups.groupSize] > 1 && + options[optionsMap.layoutParams.structure.numberOfGridRows] <= 1) + ); }, isRelevantDescription: - 'Set a Horizontal gallery ("Scroll Direction" as "Horizontal") and set Responsive Type to Fit to screen', + 'Set a Vertical gallery ("Scroll Direction" as "Vertical") and set Responsive Type to Fit to screen, or set a Collage layout with "Horizontal" Scroll Direction.', default: 30, };