pro-gallery 4.0.15-beta.14 → 4.0.15-beta.140

package/README.md

@@ -34,7 +34,7 @@ import 'pro-gallery/dist/statics/main.css';
   items={items}
   options={options}
   container={container}
-  scrollingElement={() => document.getElementById('gallery') || window}
+  scrollingElement={document.getElementById('gallery') || window}
   eventsListener={(eName, eData) => console.log({eName, eData})}
 />
 ```
@@ -130,14 +130,16 @@ The most important events are:
 
 The full list gallery events is [here](https://github.com/wix/pro-gallery/blob/master/packages/lib/src/common/constants/events.js)
 
-### Custom Renderers
+### Custom Components
 The Gallery supports custom renderers both for the Hover Element (appears when hoveing over an item) and the Info Element (appears below / above the item).
 To replace the default rendering of these element, pass a function that will receive the item's props and should return a JSX element.
 for example:
 ```
 <ProGallery
   {...otherProps}
-  customHoverRenderer={itemProps => <div>Hover #{itemProps.idx}</div>}
-  customInfoRenderer={itemProps => <div>Info #{itemProps.idx}</div>}
+  customComponents: {
+    customHoverRenderer={itemProps => <div>Hover #{itemProps.idx}</div>}
+    customInfoRenderer={itemProps => <div>Info #{itemProps.idx}</div>}
+  }
 />
 ```

package/dist/cjs/components/gallery/index.js

@@ -3,16 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var pro_gallery_lib_1 = require("pro-gallery-lib");
+var pro_gallery_blueprints_1 = require("pro-gallery-blueprints");
 var proGallery_1 = tslib_1.__importDefault(require("./proGallery/proGallery"));
 var shouldValidate_1 = tslib_1.__importDefault(require("./typeValidator/shouldValidate"));
-var BaseGallery = /** @class */ (function (_super) {
-    tslib_1.__extends(BaseGallery, _super);
-    function BaseGallery(props) {
+var Gallery = /** @class */ (function (_super) {
+    tslib_1.__extends(Gallery, _super);
+    function Gallery(props) {
         var _this = _super.call(this, props) || this;
         _this.isUsingCustomInfoElements = _this.isUsingCustomInfoElements.bind(_this);
-        _this.blueprintsManager = new pro_gallery_lib_1.BlueprintsManager({ id: 'layoutingGallery' });
+        _this.blueprintsManager = new pro_gallery_blueprints_1.BlueprintsManager({ id: 'layoutingGallery' });
         _this.blueprintsManager.init({
-            formFactor: props.formFactor,
+            deviceType: props.deviceType,
             api: {
                 isUsingCustomInfoElements: _this.isUsingCustomInfoElements,
                 fetchMoreItems: function (from) {
@@ -38,7 +39,7 @@ var BaseGallery = /** @class */ (function (_super) {
         };
         return _this;
     }
-    BaseGallery.prototype.setBlueprint = function (blueprint, initialBlueprint) {
+    Gallery.prototype.setBlueprint = function (blueprint, initialBlueprint) {
         if (initialBlueprint) {
             // the blueprint from the initial blueprint flow will be set in the constructor
         }
@@ -46,28 +47,24 @@ var BaseGallery = /** @class */ (function (_super) {
             this.setState({ blueprint: blueprint });
         }
     };
-    BaseGallery.prototype.isUsingCustomInfoElements = function () {
-        return (!!this.galleryProps.customHoverRenderer ||
-            !!this.galleryProps.customInfoRenderer ||
-            !!this.galleryProps.customSlideshowInfoRenderer);
+    Gallery.prototype.isUsingCustomInfoElements = function () {
+        return (!!this.galleryProps.customComponents.customHoverRenderer ||
+            !!this.galleryProps.customComponents.customInfoRenderer ||
+            !!this.galleryProps.customComponents.customSlideshowInfoRenderer);
     };
-    BaseGallery.prototype.onNewProps = function (props, calledByConstructor) {
+    Gallery.prototype.onNewProps = function (props, calledByConstructor) {
         var _this = this;
         var eventsListener = props.eventsListener, otherProps = tslib_1.__rest(props, ["eventsListener"]);
-        var _eventsListener = function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
-            var eventName = args[0], value = args[1];
+        var _eventsListener = function (eventName, eventData) {
             if (eventName === pro_gallery_lib_1.GALLERY_CONSTS.events.NEED_MORE_ITEMS) {
-                _this.blueprintsManager.getMoreItems(value);
+                _this.blueprintsManager.getMoreItems(eventData);
             }
             else {
-                typeof eventsListener === 'function' && eventsListener.apply(void 0, args);
+                typeof eventsListener === 'function' &&
+                    eventsListener(eventName, eventData);
             }
         };
-        this.galleryProps = tslib_1.__assign(tslib_1.__assign({}, otherProps), { eventsListener: _eventsListener, id: props.id || 'default-dom-id' });
+        this.galleryProps = tslib_1.__assign(tslib_1.__assign({}, otherProps), { eventsListener: _eventsListener, id: props.id || 'default-dom-id', customComponents: props.customComponents || {} });
         if (calledByConstructor) {
             // the blueprint will be initiated with the state
         }
@@ -78,10 +75,10 @@ var BaseGallery = /** @class */ (function (_super) {
             });
         }
     };
-    BaseGallery.prototype.UNSAFE_componentWillReceiveProps = function (newProps) {
+    Gallery.prototype.UNSAFE_componentWillReceiveProps = function (newProps) {
         this.onNewProps(newProps, false);
     };
-    BaseGallery.prototype.render = function () {
+    Gallery.prototype.render = function () {
         var _a = this.state, blueprint = _a.blueprint, typeErrors = _a.typeErrors;
         if (typeErrors) {
             return typeErrors;
@@ -93,7 +90,7 @@ var BaseGallery = /** @class */ (function (_super) {
             return null;
         }
     };
-    BaseGallery.prototype.componentDidMount = function () {
+    Gallery.prototype.componentDidMount = function () {
         return tslib_1.__awaiter(this, void 0, void 0, function () {
             var validateTypesModule, validate, typeErrorsUI, typeErrors;
             return tslib_1.__generator(this, function (_a) {
@@ -107,7 +104,7 @@ var BaseGallery = /** @class */ (function (_super) {
                     case 1:
                         validateTypesModule = _a.sent();
                         validate = validateTypesModule.validate, typeErrorsUI = validateTypesModule.typeErrorsUI;
-                        typeErrors = validate(this.props.options || this.props.styles || this.props.styleParams);
+                        typeErrors = validate(this.state.blueprint.options);
                         if (typeErrors.length > 0) {
                             this.setState({ typeErrors: typeErrorsUI(typeErrors) });
                         }
@@ -116,7 +113,7 @@ var BaseGallery = /** @class */ (function (_super) {
             });
         });
     };
-    return BaseGallery;
+    return Gallery;
 }(react_1.default.Component));
-exports.default = BaseGallery;
+exports.default = Gallery;
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/gallery/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/gallery/index.tsx"],"names":[],"mappings":";;;AAAA,wDAA0B;AAC1B,mDAA2E;AAC3E,+EAAiD;AAIjD,0FAA4D;AAE5D;IAAyC,uCAGxC;IAIC,qBAAY,KAAmB;QAA/B,YACE,kBAAM,KAAK,CAAC,SA8Bb;QA7BC,KAAI,CAAC,yBAAyB,GAAG,KAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QAC3E,KAAI,CAAC,iBAAiB,GAAG,IAAI,mCAAiB,CAAC,EAAE,EAAE,EAAE,kBAAkB,EAAE,CAAC,CAAC;QAC3E,KAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,UAAU,EAAE,KAAK,CAAC,UAAU;YAC5B,GAAG,EAAE;gBACH,yBAAyB,EAAE,KAAI,CAAC,yBAAyB;gBACzD,cAAc,EAAE,UAAC,IAAI;oBACnB,OAAO,KAAK,CAAC,cAAc,KAAK,UAAU;wBACxC,KAAK,CAAC,cAAc,CAAC,gCAAc,CAAC,MAAM,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;gBACtE,CAAC;gBACD,gBAAgB,EAAE,UAAC,EAIlB;wBAHC,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA;oBAEhB,IAAI,gBAAgB,EAAE;wBACpB,KAAI,CAAC,YAAY,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;qBAChD;yBAAM;wBACL,IAAI,uBAAK,CAAC,SAAS,EAAE,EAAE;4BACrB,OAAO,CAAC,KAAK,CAAC,2CAA2C,CAAC,CAAC;yBAC5D;qBACF;gBACH,CAAC;aACF;SACF,CAAC,CAAC;QACH,KAAI,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC7B,KAAI,CAAC,KAAK,GAAG;YACX,SAAS,EAAE,KAAI,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,KAAK,CAAC,IAAI,IAAI;SACxE,CAAC;;IACJ,CAAC;IAED,kCAAY,GAAZ,UAAa,SAAS,EAAE,gBAAgB;QACtC,IAAI,gBAAgB,EAAE;YACpB,+EAA+E;SAChF;aAAM;YACL,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC;SAC9B;IACH,CAAC;IAED,+CAAyB,GAAzB;QACE,OAAO,CACL,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB;YACvC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB;YACtC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,2BAA2B,CAChD,CAAC;IACJ,CAAC;IAED,gCAAU,GAAV,UAAW,KAAK,EAAE,mBAAmB;QAArC,iBAuBC;QAtBS,IAAA,cAAc,GAAoB,KAAK,eAAzB,EAAK,UAAU,kBAAK,KAAK,EAAzC,kBAAiC,CAAF,CAAW;QAChD,IAAM,eAAe,GAAG;YAAC,cAAO;iBAAP,UAAO,EAAP,qBAAO,EAAP,IAAO;gBAAP,yBAAO;;YACvB,IAAA,SAAS,GAAW,IAAI,GAAf,EAAE,KAAK,GAAI,IAAI,GAAR,CAAS;YAChC,IAAI,SAAS,KAAK,gCAAc,CAAC,MAAM,CAAC,eAAe,EAAE;gBACvD,KAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;aAC5C;iBAAM;gBACL,OAAO,cAAc,KAAK,UAAU,IAAI,cAAc,eAAI,IAAI,CAAC,CAAC;aACjE;QACH,CAAC,CAAC;QACF,IAAI,CAAC,YAAY,yCACZ,UAAU,KACb,cAAc,EAAE,eAAe,EAC/B,EAAE,EAAE,KAAK,CAAC,EAAE,IAAI,gBAAgB,GACjC,CAAC;QACF,IAAI,mBAAmB,EAAE;YACvB,iDAAiD;SAClD;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,UAAC,CAAC;gBAChE,gCAAgC;gBAChC,OAAO,CAAC,KAAK,CAAC,iDAAiD,EAAE,CAAC,CAAC,CAAC;YACtE,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,sDAAgC,GAAhC,UAAiC,QAAQ;QACvC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,4BAAM,GAAN;QACQ,IAAA,KAA4B,IAAI,CAAC,KAAK,EAApC,SAAS,eAAA,EAAE,UAAU,gBAAe,CAAC;QAE7C,IAAI,UAAU,EAAE;YACd,OAAO,UAAU,CAAC;SACnB;QACD,IAAI,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YAClD,OAAO,8BAAC,oBAAU,uBAAK,IAAI,CAAC,YAAY,EAAM,SAAS,EAAI,CAAC;SAC7D;aAAM;YACL,OAAO,IAAI,CAAC;SACb;IACH,CAAC;IAEK,uCAAiB,GAAvB;;;;;;wBACE,IAAI,wBAAc,CAAC,IAAI,CAAC,KAAK,EAAE,uBAAK,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,EAAE;4BACvD,sBAAO;yBACR;wBAC2B;4BAC1B,kDAAkD,CAAC,+BAA+B,QACnF;;wBAFK,mBAAmB,GAAG,SAE3B;wBACO,QAAQ,GAAmB,mBAAmB,SAAtC,EAAE,YAAY,GAAK,mBAAmB,aAAxB,CAAyB;wBACjD,UAAU,GAAG,QAAQ,CACzB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CAClE,CAAC;wBACF,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;4BACzB,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;yBACzD;;;;;KACF;IACH,kBAAC;AAAD,CAAC,AAjHD,CAAyC,eAAK,CAAC,SAAS,GAiHvD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/gallery/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/gallery/proGallery/galleryContainer.js

@@ -46,11 +46,11 @@ var GalleryContainer = /** @class */ (function (_super) {
             showMoreClickedAtLeastOnce: false,
             initialGalleryHeight: undefined,
             needToHandleShowMoreClick: false,
-            gotFirstScrollEvent: false,
+            gotFirstScrollEvent: (props.activeIndex >= 0),
             playingVideoIdx: -1,
             viewComponent: null,
             firstUserInteractionExecuted: false,
-            isScrollLessGallery: _this.getIsScrollLessGallery(_this.props.styles),
+            isScrollLessGallery: _this.getIsScrollLessGallery(_this.props.options),
             isInHover: false,
         };
         _this.state = initialState;
@@ -70,7 +70,7 @@ var GalleryContainer = /** @class */ (function (_super) {
         //not sure if there needs to be a handleNEwGalleryStructure here with the intial state. currently looks like not
     }
     GalleryContainer.prototype.componentDidMount = function () {
-        this.scrollToItem(this.props.currentIdx, false, true, 0);
+        this.scrollToItem(this.props.activeIndex, false, true, 0);
         this.handleNewGalleryStructure();
         this.eventsListener(pro_gallery_lib_1.GALLERY_CONSTS.events.APP_LOADED, {});
         this.videoScrollHelper.initializePlayState();
@@ -97,9 +97,9 @@ var GalleryContainer = /** @class */ (function (_super) {
         if (!this.currentHoverChangeEvent.galleryId && nextProps.id) {
             this.currentHoverChangeEvent.galleryId = nextProps.id;
         }
-        if (this.props.currentIdx !== nextProps.currentIdx &&
-            nextProps.currentIdx !== this.currentSlideshowViewIdx) {
-            this.scrollToItem(nextProps.currentIdx, false, true, 0);
+        if (this.props.activeIndex !== nextProps.activeIndex &&
+            nextProps.activeIndex !== this.currentSlideshowViewIdx) {
+            this.scrollToItem(nextProps.activeIndex, false, true, 0);
         }
         var reCreateGallery = function () {
             var galleryState = _this.propsToState(nextProps);
@@ -108,21 +108,21 @@ var GalleryContainer = /** @class */ (function (_super) {
             }
         };
         var getSignificantProps = function (props) {
-            var id = props.id, styles = props.styles, container = props.container, items = props.items, watermark = props.watermark, isInDisplay = props.isInDisplay;
-            return { id: id, styles: styles, container: container, items: items, watermark: watermark, isInDisplay: isInDisplay };
+            var id = props.id, options = props.options, container = props.container, items = props.items, isInDisplay = props.isInDisplay;
+            return { id: id, options: options, container: container, items: items, isInDisplay: isInDisplay };
         };
         if (this.reCreateGalleryTimer) {
             clearTimeout(this.reCreateGalleryTimer);
         }
         var hasPropsChanged = true;
         try {
-            var currentSignificatProps = getSignificantProps(this.props);
-            var nextSignificatProps = getSignificantProps(nextProps);
+            var currentSignificantProps = getSignificantProps(this.props);
+            var nextSignificantProps = getSignificantProps(nextProps);
             hasPropsChanged =
-                JSON.stringify(currentSignificatProps) !==
-                    JSON.stringify(nextSignificatProps);
+                JSON.stringify(currentSignificantProps) !==
+                    JSON.stringify(nextSignificantProps);
             if (pro_gallery_lib_1.utils.isVerbose() && hasPropsChanged) {
-                console.log('New props arrived', pro_gallery_lib_1.utils.printableObjectsDiff(currentSignificatProps, nextSignificatProps));
+                console.log('New props arrived', pro_gallery_lib_1.utils.printableObjectsDiff(currentSignificantProps, nextSignificantProps));
             }
         }
         catch (e) {
@@ -130,8 +130,8 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
         if (hasPropsChanged) {
             reCreateGallery();
-            if (!!nextProps.currentIdx && nextProps.currentIdx > 0) {
-                this.scrollToItem(nextProps.currentIdx, false, true, 0);
+            if (!!nextProps.activeIndex && nextProps.activeIndex > 0) {
+                this.scrollToItem(nextProps.activeIndex, false, true, 0);
             }
             if (this.props.isInDisplay !== nextProps.isInDisplay) {
                 this.handleNavigation(nextProps.isInDisplay);
@@ -153,7 +153,7 @@ var GalleryContainer = /** @class */ (function (_super) {
     GalleryContainer.prototype.handleNewGalleryStructure = function () {
         //should be called AFTER new state is set
         var _a = this.state, container = _a.container, needToHandleShowMoreClick = _a.needToHandleShowMoreClick, initialGalleryHeight = _a.initialGalleryHeight;
-        var styleParams = this.props.styles;
+        var options = this.props.options;
         var numOfItems = this.state.items.length;
         var layoutHeight = this.props.structure.height;
         var layoutItems = this.props.structure.items;
@@ -168,7 +168,7 @@ var GalleryContainer = /** @class */ (function (_super) {
         var onGalleryChangeData = {
             numOfItems: numOfItems,
             container: container,
-            styleParams: styleParams,
+            options: options,
             layoutHeight: layoutHeight,
             layoutItems: layoutItems,
             isInfinite: isInfinite,
@@ -183,11 +183,11 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
     };
     GalleryContainer.prototype.isVerticalGallery = function () {
-        return (this.state.styles.scrollDirection ===
+        return (this.state.options.scrollDirection ===
             pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.VERTICAL);
     };
-    GalleryContainer.prototype.getIsScrollLessGallery = function (styles) {
-        var scrollDirection = styles.scrollDirection, slideAnimation = styles.slideAnimation;
+    GalleryContainer.prototype.getIsScrollLessGallery = function (options) {
+        var scrollDirection = options.scrollDirection, slideAnimation = options.slideAnimation;
         return (scrollDirection === pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL &&
             slideAnimation !== pro_gallery_lib_1.GALLERY_CONSTS.slideAnimations.SCROLL);
     };
@@ -200,7 +200,7 @@ var GalleryContainer = /** @class */ (function (_super) {
             pro_gallery_lib_1.isEditMode() ||
             gotFirstScrollEvent ||
             scrollY > 0 ||
-            this.props.currentIdx > 0) {
+            this.props.activeIndex > 0) {
             return items;
         }
         var visibleItems = items;
@@ -233,21 +233,21 @@ var GalleryContainer = /** @class */ (function (_super) {
         return visibleItems;
     };
     GalleryContainer.prototype.propsToState = function (_a) {
-        var items = _a.items, styles = _a.styles, structure = _a.structure, container = _a.container, id = _a.id, resizeMediaUrl = _a.resizeMediaUrl, isPrerenderMode = _a.isPrerenderMode, customImageRenderer = _a.customImageRenderer;
+        var items = _a.items, options = _a.options, structure = _a.structure, container = _a.container, id = _a.id, createMediaUrl = _a.createMediaUrl, isPrerenderMode = _a.isPrerenderMode, customComponents = _a.customComponents;
         items = items || this.props.items;
-        styles = styles || this.props.styles;
+        options = options || this.props.options;
         container = container || this.props.container;
         structure = structure || this.props.structure;
         id = id || this.props.id;
-        resizeMediaUrl = resizeMediaUrl || this.props.resizeMediaUrl;
-        if (typeof customImageRenderer === 'function') {
-            imageRenderer_1.default.customImageRenderer = customImageRenderer;
+        createMediaUrl = createMediaUrl || this.props.createMediaUrl;
+        if (typeof customComponents.customImageRenderer === 'function') {
+            imageRenderer_1.default.customImageRenderer = customComponents.customImageRenderer;
         }
         this.galleryStructure = pro_gallery_lib_1.ItemsHelper.convertToGalleryItems(structure, {
             // TODO use same objects in the memory when the galleryItems are changed
-            thumbnailSize: styles.thumbnailSize,
-            sharpParams: styles.sharpParams,
-            resizeMediaUrl: resizeMediaUrl,
+            thumbnailSize: options.thumbnailSize,
+            sharpParams: options.sharpParams,
+            createMediaUrl: createMediaUrl,
         });
         // // ------------ TODO. This is using GalleryItem and I am leaving it here for now ---------- //
         var shouldUseScrollCss = !pro_gallery_lib_1.isSEOMode() &&
@@ -258,24 +258,25 @@ var GalleryContainer = /** @class */ (function (_super) {
             this.getScrollCss({
                 id: id,
                 items: this.galleryStructure.galleryItems,
-                styleParams: styles,
+                options: options,
                 container: container,
             });
         }
         var scrollHelperNewGalleryStructure = {
             galleryStructure: this.galleryStructure,
+            galleryWidth: container.galleryWidth,
             scrollBase: container.scrollBase,
-            videoPlay: styles.videoPlay,
-            videoLoop: styles.videoLoop,
-            itemClick: styles.itemClick,
-            scrollDirection: styles.scrollDirection,
+            videoPlay: options.videoPlay,
+            videoLoop: options.videoLoop,
+            itemClick: options.itemClick,
+            scrollDirection: options.scrollDirection,
             cb: this.setPlayingIdxState,
         };
         this.videoScrollHelper.updateGalleryStructure(scrollHelperNewGalleryStructure, !pro_gallery_lib_1.utils.isSSR(), items);
         var layoutParams = {
             items: items,
             container: container,
-            styleParams: styles,
+            styleParams: options,
             gotScrollEvent: true,
             options: {
                 showAllItems: true,
@@ -285,13 +286,13 @@ var GalleryContainer = /** @class */ (function (_super) {
             },
         };
         this.createCssLayoutsIfNeeded(layoutParams);
-        this.createDynamicStyles(styles, isPrerenderMode);
+        this.createDynamicStyles(options, isPrerenderMode);
         var newState = {
             items: items,
-            styles: styles,
+            options: options,
             container: container,
             structure: structure,
-            isScrollLessGallery: this.getIsScrollLessGallery(styles),
+            isScrollLessGallery: this.getIsScrollLessGallery(options),
         };
         return newState;
     };
@@ -301,22 +302,26 @@ var GalleryContainer = /** @class */ (function (_super) {
             return pro_gallery_lib_1.window.document.querySelector("#pro-gallery-" + _this.props.id + " #gallery-horizontal-scroll");
         };
         var vertical = this.props.scrollingElement
-            ? typeof this.props.scrollingElement === 'function'
-                ? this.props.scrollingElement
-                : function () { return _this.props.scrollingElement; }
+            ? function () { return _this.props.scrollingElement; }
             : function () { return pro_gallery_lib_1.window; };
         return { vertical: vertical, horizontal: horizontal };
     };
-    GalleryContainer.prototype.scrollToItem = function (itemIdx, fixedScroll, isManual, durationInMS, scrollMarginCorrection) {
+    GalleryContainer.prototype.scrollToItem = function (itemIdx, fixedScroll, isManual, durationInMS, scrollMarginCorrection, isContinuousScrolling) {
         if (durationInMS === void 0) { durationInMS = 0; }
+        if (isContinuousScrolling === void 0) { isContinuousScrolling = false; }
         if (itemIdx >= 0) {
+            if (!this.state.gotFirstScrollEvent) {
+                this.setState({
+                    gotFirstScrollEvent: true,
+                });
+            }
             var scrollingElement = this._scrollingElement;
             var horizontalElement = scrollingElement.horizontal();
             try {
                 var scrollParams = {
                     scrollMarginCorrection: scrollMarginCorrection,
-                    isRTL: this.state.styles.isRTL,
-                    scrollDirection: this.state.styles.scrollDirection,
+                    isRTL: this.state.options.isRTL,
+                    scrollDirection: this.state.options.scrollDirection,
                     galleryWidth: this.state.container.galleryWidth,
                     galleryHeight: this.state.container.galleryHeight,
                     top: 0,
@@ -328,26 +333,30 @@ var GalleryContainer = /** @class */ (function (_super) {
                     scrollingElement: scrollingElement,
                     horizontalElement: horizontalElement,
                     durationInMS: durationInMS,
-                    slideTransition: this.state.styles.slideTransition,
+                    slideTransition: this.state.options.slideTransition,
+                    isContinuousScrolling: isContinuousScrolling,
+                    autoSlideshowContinuousSpeed: this.state.options.autoSlideshowContinuousSpeed,
+                    imageMargin: this.state.options.imageMargin,
                 };
                 return scrollHelper_1.scrollToItemImp(scrollParams);
             }
             catch (e) {
                 //added console.error to debug sentry error 'Cannot read property 'isRTL' of undefined in pro-gallery-statics'
-                console.error('error:', e, ' pro-gallery, scrollToItem, cannot get scrollParams, ', 'isEditMode =', pro_gallery_lib_1.isEditMode(), ' isPreviewMode =', pro_gallery_lib_1.isPreviewMode(), ' isSiteMode =', pro_gallery_lib_1.isSiteMode(), ' this.state.styles =', this.state.styles, ' this.state.container =', this.state.container, ' this.galleryStructure =', this.galleryStructure);
+                console.error('error:', e, ' pro-gallery, scrollToItem, cannot get scrollParams, ', 'isEditMode =', pro_gallery_lib_1.isEditMode(), ' isPreviewMode =', pro_gallery_lib_1.isPreviewMode(), ' isSiteMode =', pro_gallery_lib_1.isSiteMode(), ' this.state.options =', this.state.options, ' this.state.container =', this.state.container, ' this.galleryStructure =', this.galleryStructure);
             }
         }
     };
-    GalleryContainer.prototype.scrollToGroup = function (groupIdx, fixedScroll, isManual, durationInMS, scrollMarginCorrection) {
+    GalleryContainer.prototype.scrollToGroup = function (groupIdx, fixedScroll, isManual, durationInMS, scrollMarginCorrection, isContinuousScrolling) {
         if (durationInMS === void 0) { durationInMS = 0; }
+        if (isContinuousScrolling === void 0) { isContinuousScrolling = false; }
         if (groupIdx >= 0) {
             var scrollingElement = this._scrollingElement;
             var horizontalElement = scrollingElement.horizontal();
             try {
                 var scrollParams = {
                     scrollMarginCorrection: scrollMarginCorrection,
-                    isRTL: this.state.styles.isRTL,
-                    scrollDirection: this.state.styles.scrollDirection,
+                    isRTL: this.state.options.isRTL,
+                    scrollDirection: this.state.options.scrollDirection,
                     galleryWidth: this.state.container.galleryWidth,
                     galleryHeight: this.state.container.galleryHeight,
                     top: 0,
@@ -359,23 +368,26 @@ var GalleryContainer = /** @class */ (function (_super) {
                     scrollingElement: scrollingElement,
                     horizontalElement: horizontalElement,
                     durationInMS: durationInMS,
-                    slideTransition: this.state.styles.slideTransition,
+                    slideTransition: this.state.options.slideTransition,
+                    isContinuousScrolling: isContinuousScrolling,
+                    autoSlideshowContinuousSpeed: this.state.options.autoSlideshowContinuousSpeed,
+                    imageMargin: this.state.options.imageMargin,
                 };
                 return scrollHelper_1.scrollToGroupImp(scrollParams);
             }
             catch (e) {
                 //added console.error to debug sentry error 'Cannot read property 'isRTL' of undefined in pro-gallery-statics'
-                console.error('error:', e, ' pro-gallery, scrollToGroup, cannot get scrollParams, ', 'isEditMode =', pro_gallery_lib_1.isEditMode(), ' isPreviewMode =', pro_gallery_lib_1.isPreviewMode(), ' isSiteMode =', pro_gallery_lib_1.isSiteMode(), ' this.state.styles =', this.state.styles, ' this.state.container =', this.state.container, ' this.galleryStructure =', this.galleryStructure);
+                console.error('error:', e, ' pro-gallery, scrollToGroup, cannot get scrollParams, ', 'isEditMode =', pro_gallery_lib_1.isEditMode(), ' isPreviewMode =', pro_gallery_lib_1.isPreviewMode(), ' isSiteMode =', pro_gallery_lib_1.isSiteMode(), ' this.state.options =', this.state.options, ' this.state.container =', this.state.container, ' this.galleryStructure =', this.galleryStructure);
             }
         }
     };
-    GalleryContainer.prototype.containerInfiniteGrowthDirection = function (styles) {
-        if (styles === void 0) { styles = false; }
-        var _styles = styles || this.props.styles;
+    GalleryContainer.prototype.containerInfiniteGrowthDirection = function (options) {
+        if (options === void 0) { options = false; }
+        var _options = options || this.props.options;
         // return the direction in which the gallery can grow on it's own (aka infinite scroll)
-        var enableInfiniteScroll = this.props.styles.enableInfiniteScroll; //TODO - props or "raw" styles
+        var enableInfiniteScroll = this.props.options.enableInfiniteScroll; //TODO - props or "raw" options
         var showMoreClickedAtLeastOnce = this.state.showMoreClickedAtLeastOnce;
-        var scrollDirection = _styles.scrollDirection, loadMoreAmount = _styles.loadMoreAmount;
+        var scrollDirection = _options.scrollDirection, loadMoreAmount = _options.loadMoreAmount;
         if (scrollDirection === pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL) {
             return 'horizontal';
         }
@@ -427,10 +439,10 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
     };
     GalleryContainer.prototype.getScrollCss = function (_a) {
-        var id = _a.id, items = _a.items, styleParams = _a.styleParams, container = _a.container;
+        var id = _a.id, items = _a.items, options = _a.options, container = _a.container;
         this.scrollCss = cssScrollHelper_js_1.cssScrollHelper.calcScrollCss({
             items: items,
-            styleParams: styleParams,
+            options: options,
             id: id,
             container: container,
         });
@@ -445,7 +457,7 @@ var GalleryContainer = /** @class */ (function (_super) {
             this.getScrollCss({
                 id: this.props.id,
                 items: this.galleryStructure.galleryItems,
-                styleParams: this.state.styles,
+                options: this.state.options,
                 container: this.state.container,
             });
             var initialGalleryHeight = this.state.container.height; //container.height before clicking "load more" at the first time
@@ -471,7 +483,7 @@ var GalleryContainer = /** @class */ (function (_super) {
             this.getScrollCss({
                 id: this.props.id,
                 items: this.galleryStructure.galleryItems,
-                styleParams: this.state.styles,
+                options: this.state.options,
                 container: this.state.container,
             });
             this.setState({
@@ -520,11 +532,11 @@ var GalleryContainer = /** @class */ (function (_super) {
             this.galleryStructure.galleryItems.length > 0 &&
             !this.gettingMoreItems &&
             this.state.items &&
-            this.state.styles &&
+            this.state.options &&
             this.state.container) {
             //more items can be fetched from the server
             //TODO - add support for horizontal galleries
-            var _a = this.state.styles, scrollDirection = _a.scrollDirection, isRTL = _a.isRTL;
+            var _a = this.state.options, scrollDirection = _a.scrollDirection, isRTL = _a.isRTL;
             var galleryEnd = this.galleryStructure[scrollDirection === pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL
                 ? 'width'
                 : 'height'] +
@@ -550,9 +562,9 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
     };
     GalleryContainer.prototype.canRender = function () {
-        var can = this.props.container && this.props.styles && this.state.items;
+        var can = this.props.container && this.props.options && this.state.items;
         if (!can && pro_gallery_lib_1.utils.isVerbose()) {
-            console.log('PROGALLERY [CAN_RENDER] GalleryContainer', can, this.props.container, this.props.styles, this.state.items);
+            console.log('PROGALLERY [CAN_RENDER] GalleryContainer', can, this.props.container, this.props.options, this.state.items);
         }
         return can;
     };
@@ -568,7 +580,7 @@ var GalleryContainer = /** @class */ (function (_super) {
         if (!this.canRender()) {
             return null;
         }
-        var ViewComponent = this.props.styles.scrollDirection ===
+        var ViewComponent = this.props.options.scrollDirection ===
             pro_gallery_lib_1.GALLERY_CONSTS.scrollDirection.HORIZONTAL
             ? slideshowView_1.default
             : galleryView_1.default;
@@ -578,8 +590,8 @@ var GalleryContainer = /** @class */ (function (_super) {
         }
         var displayShowMore = this.containerInfiniteGrowthDirection() === 'none';
         return (react_1.default.createElement("div", { "data-key": "pro-gallery-inner-container", key: "pro-gallery-inner-container", className: this.props.isPrerenderMode ? 'pro-gallery-prerender' : '', onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, ref: function (e) { return _this.galleryContainerRef = e; }, tabIndex: -1 },
-            react_1.default.createElement(galleryScrollIndicator_1.default, { id: this.props.id, scrollDirection: this.props.styles.scrollDirection, isRTL: this.props.styles.isRTL, totalWidth: this.galleryStructure.width, scrollBase: this.props.container.scrollBase, scrollingElement: this._scrollingElement, getMoreItemsIfNeeded: this.getMoreItemsIfNeeded, setGotFirstScrollIfNeeded: this.setGotFirstScrollIfNeeded, onScroll: this.onGalleryScroll }),
-            react_1.default.createElement(ViewComponent, tslib_1.__assign({ isInDisplay: this.props.isInDisplay, isPrerenderMode: this.props.isPrerenderMode, scrollingElement: this._scrollingElement, totalItemsCount: this.props.totalItemsCount, renderedItemsCount: this.props.renderedItemsCount, getMoreItemsIfNeeded: this.getMoreItemsIfNeeded, gotFirstScrollEvent: this.state.gotFirstScrollEvent, setGotFirstScrollIfNeeded: this.setGotFirstScrollIfNeeded, items: this.state.items, getVisibleItems: this.getVisibleItems, itemsLoveData: this.props.itemsLoveData, galleryStructure: this.galleryStructure, styleParams: this.props.styles, container: this.props.container, watermark: this.props.watermark, settings: this.props.settings, displayShowMore: displayShowMore, id: this.props.id, currentIdx: this.props.currentIdx || 0, customHoverRenderer: this.props.customHoverRenderer, customInfoRenderer: this.props.customInfoRenderer, customSlideshowInfoRenderer: this.props.customSlideshowInfoRenderer, customLoadMoreRenderer: this.props.customLoadMoreRenderer, customNavArrowsRenderer: this.props.customNavArrowsRenderer, playingVideoIdx: this.state.playingVideoIdx, noFollowForSEO: this.props.noFollowForSEO, proGalleryRegionLabel: this.props.proGalleryRegionLabel, proGalleryRole: this.props.proGalleryRole, firstUserInteractionExecuted: this.state.firstUserInteractionExecuted, isGalleryInHover: this.state.isInHover, enableExperimentalFeatures: this.props.enableExperimentalFeatures, galleryContainerRef: this.galleryContainerRef, outOfViewComponent: this.outOfViewComponent, actions: tslib_1.__assign(tslib_1.__assign({}, this.props.actions), { findNeighborItem: this.findNeighborItem, toggleLoadMoreItems: this.toggleLoadMoreItems, eventsListener: this.eventsListener, setWixHeight: function () { }, scrollToItem: this.scrollToItem, scrollToGroup: this.scrollToGroup }) }, this.props.gallery)),
+            react_1.default.createElement(galleryScrollIndicator_1.default, { id: this.props.id, scrollDirection: this.props.options.scrollDirection, isRTL: this.props.options.isRTL, totalWidth: this.galleryStructure.width, scrollBase: this.props.container.scrollBase, scrollingElement: this._scrollingElement, getMoreItemsIfNeeded: this.getMoreItemsIfNeeded, setGotFirstScrollIfNeeded: this.setGotFirstScrollIfNeeded, onScroll: this.onGalleryScroll }),
+            react_1.default.createElement(ViewComponent, tslib_1.__assign({ isInDisplay: this.props.isInDisplay, isPrerenderMode: this.props.isPrerenderMode, scrollingElement: this._scrollingElement, totalItemsCount: this.props.totalItemsCount, renderedItemsCount: this.props.renderedItemsCount, getMoreItemsIfNeeded: this.getMoreItemsIfNeeded, gotFirstScrollEvent: this.state.gotFirstScrollEvent, setGotFirstScrollIfNeeded: this.setGotFirstScrollIfNeeded, items: this.state.items, getVisibleItems: this.getVisibleItems, galleryStructure: this.galleryStructure, options: this.props.options, container: this.props.container, settings: this.props.settings, displayShowMore: displayShowMore, id: this.props.id, activeIndex: this.props.activeIndex || 0, customComponents: this.props.customComponents, playingVideoIdx: this.state.playingVideoIdx, noFollowForSEO: this.props.noFollowForSEO, proGalleryRegionLabel: this.props.proGalleryRegionLabel, proGalleryRole: this.props.proGalleryRole, firstUserInteractionExecuted: this.state.firstUserInteractionExecuted, isGalleryInHover: this.state.isInHover, enableExperimentalFeatures: this.props.enableExperimentalFeatures, galleryContainerRef: this.galleryContainerRef, outOfViewComponent: this.outOfViewComponent, actions: tslib_1.__assign(tslib_1.__assign({}, this.props.actions), { findNeighborItem: this.findNeighborItem, toggleLoadMoreItems: this.toggleLoadMoreItems, eventsListener: this.eventsListener, setWixHeight: function () { }, scrollToItem: this.scrollToItem, scrollToGroup: this.scrollToGroup }) }, this.props.gallery)),
             react_1.default.createElement("div", { "data-key": "items-styles", key: "items-styles", style: { display: 'none' } },
                 (this.layoutCss || []).filter(Boolean).map(function (css, idx) { return (react_1.default.createElement("style", { id: "layoutCss-" + idx, key: "layoutCss-" + idx, dangerouslySetInnerHTML: { __html: css } })); }),
                 (this.scrollCss || []).filter(Boolean).map(function (css, idx) { return (react_1.default.createElement("style", { id: "scrollCss_" + idx, key: "scrollCss_" + idx, dangerouslySetInnerHTML: { __html: css } })); }),