pro-gallery-lib
The pro-gallery-lib containys helpers and files that can be imported individually.
Blueprints - v.3+
The pro-gallery-lib exports Blueprints
and BlueprintsManager
BlueprintsManager
The BlueprintsManager is a class that takes care of fetching needed params and creating a new blueprint when it might be needed.
The blueprintsManager works with an api provided by the user (see blow)
Function Name | description | arguments | return |
---|---|---|---|
async createBlueprint
|
Used when changes were made that might require a new blueprint, params can be empty - the manager will fetch by the provided api | params: {options, items, container, totalItemsCount} | {blueprint: object, blueprintChange: boolean} |
init |
call to provide the deviceType and api | config: {api, deviceType, totalItemsCount} | -- |
getMoreItems |
Call this when the gallery needs more items | currentItemsLength: number | -- |
BlueprintsManager API
To use the blueprints Manager to the full extent you need to provide it with an api to be able to manage fetching needed data and updating on ready blueprints.
An example can be found in the Playground code
Function Name | description | arguments | expected return |
---|---|---|---|
fetchMoreItems |
Will be called when the BM requires more items (under the totalItemsCount) | currentItemLength: number | -- |
fetchItems |
Will be called by the BM to get the current items | -- | items |
fetchOptions |
Will be called by the BM to get the current options | -- | options |
fetchContainer |
Will be called by the BM to get the current container | -- | container |
getTotalItemsCount |
Will be called by the BM to get the totalItemsCount | -- | totalItemsCount: number |
onBlueprintReady |
Will be called by the BM when a requested blueprint is ready | {blueprint: object, blueprintChanged: boolean} | -- |
isUsingCustomInfoElements |
Will be called by the BM to know if Custom Info Elements are used | -- | boolean |
basic usage
import { BlueprintsManager, GALLERY_CONSTS } from 'pro-gallery-lib'
const blueprintsManager = new BlueprintsManager({
id: `gallery1`,
});
const blueprintsApi = {
fetchMoreItems(currentItemLength) {
// fire your get more items method here; no return expected;
}
fetchItems() {
//return the current items array;
}
fetchOptions() {
//return the current options object;
}
fetchContainer() {
//return the current container object;
}
getTotalItemsCount() {
//return the current totalItemsCount;
}
onBlueprintReady({ blueprint, blueprintChanged }) {
// set the new blueprint as the new state, blueprintChanged can be used to do this only if there was an actual change in the blueprint object.
}
isUsingCustomInfoElements() {
// return true/false to reflect the usage of Custom info elements. used to process the options accordingly.
}
}
blueprintsManager.init({
api: blueprintsApi,
deviceType: GALLERY_CONSTS.deviceType.DESKTOP,
// totalItemsCont, This is optional and can be passed in the params in createBlueprint(params) or via the api;
});
const triggerBlueprintCreation = () => { //call this whenever something changes (options/ items/ container...anything). If this was called and nothing relevant changed the BM will call the onBlueprintReady api with a false blueprintChanged flag.
blueprintsManager.createBlueprint({}); //since the api is used params can be empty, the BM will use the provided api to fetch all the needed params to create a blueprint.
}
Basic component code:
Here we use the ProGalleryRenderer
instead of the ProGallery
.
Instead of the normal options, items, container props we will destruct the blueprint
we got from the blueprintsManager
into the props.
import { ProGalleryRenderer } from 'pro-gallery'
import 'pro-gallery/dist/statics/main.css';
<ProGalleryRenderer
id={id}
{...blueprint}
scrollingElement = { () => document.getElementById('gallery') || window }
eventsListener = {(eventName, eventData) => console.log({eventName, eventData})}
createMediaUrl = {({item, originalUrl, resizeMethod, requiredWidth, requiredHeight}) => `https://...`}
isPrerenderMode = {isPrerenderMode}
/>