![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square) # Covet.pics Widget Standalone Covet.pics Web Component built using Stencil. ## Getting Started Clone this repo to a new directory: ```bash git clone https://github.com/SpaceSquirrelApps/covet-pics-widget.git covet-pics-widget cd covet-pics-widget ``` and run: ```bash npm install npm start ``` To build the component for production, run: ```bash npm run build ``` To run the unit tests for the components, run: ```bash npm test ``` Need help? Check out Stencil docs [here](https://stenciljs.com/docs/my-first-component). ## Components Overview ### covet-pics-widget This component will grab gallery embed data from Covet.pics API and parse settings to determine gallery layout (`grid`, `slider`, `collage`) and other settings, like colors, sizes, paddings, etc. It will then render appropriate components ### covet-pics-gallery-grid This is a Grid layout with options to render "highlighted" images. There are two main layout modes supported (`grid` or `collage`) and can be toggled through property `layout`. Items in grid are ``. On initialization, element will also create `` and inject it just before ``. This is done so that popup will always be on top of the any page element. ### covet-pics-gallery-slider This is a Slider (also known as slideshow) layout. Same as ``, items in slider are `` and slider is creating `` and injecting just before ``. ### covet-pics-gallery-popup This is a popup component that's used in tandem with `` & ``. ### covet-pics-gallery-item This is essential building block and child element for `` or `` ## Using Covet.pics Widget components ### Script tag - [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages) - Put a script tag similar to this `` in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc. - Typical usage would be to render a gallery. For this you need to know `Gallery Embed ID` and then you can embed only `covet-pics-widget` and that component will take care of loading all necessary elements, for eg. this is what embed code markup would look like: ``` ... ... ``` After component is loaded, markup could looks like this (if it's grid layout): ``` ...

...

... ... ``` ### Node Modules - Run `npm install covet-pics-widget --save` - Put a script tag similar to this `` in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc # Testing - To update snapshots run: `npm test -u` or `yarn test -u` or `npm run test --updateSnapshot` # CDN We use jsDelivr.com, full URL: https://cdn.jsdelivr.net/npm/@covet-pics/covet-pics-widget@latest/dist/covet-pics-widget/covet-pics-widget.esm.js After each new version is released, purge cache on jsDeliver: https://www.jsdelivr.com/tools/purge