Standalone Covet.pics Web Component built using Stencil.
Clone this repo to a new directory:
git clone https://github.com/SpaceSquirrelApps/covet-pics-widget.git covet-pics-widget
cd covet-pics-widgetand run:
npm install
npm startTo build the component for production, run:
npm run buildTo run the unit tests for the components, run:
npm testNeed help? Check out Stencil docs here.
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
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 <covet-pics-gallery-item>.
On initialization, element will also create <covet-pics-popup> and inject it just before </body>. This is done so that popup will always be on top of the any page element.
This is a Slider (also known as slideshow) layout. Same as <covet-pics-gallery-grid>, items in slider are <covet-pics-gallery-item> and slider is creating <covet-pics-popup> and injecting just before </body>.
This is a popup component that's used in tandem with <covet-pics-gallery-grid> & <covet-pics-gallery-slider>.
This is essential building block and child element for <covet-pics-gallery-grid> or <covet-pics-gallery-slider>
- Publish to NPM
- Put a script tag similar to this
<script src='https://unpkg.com/@covet-pics/covet-pics-widget@latest/dist/covet-pics-widget/covet-pics-widget.js'></script>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 IDand then you can embed onlycovet-pics-widgetand that component will take care of loading all necessary elements, for eg. this is what embed code markup would look like:
<body>
...
<covet-pics-widget gallery-embed-id="XYZ"></covet-pics-widget>
...
</body>
After component is loaded, markup could looks like this (if it's grid layout):
<body>
...
<covet-pics-widget gallery-embed-id="XYZ">
<covet-pics-gallery-grid>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
<covet-pics-gallery-item>...</covet-pics-gallery-item>
</covet-pics-gallery-grid>
</covet-pics-widget>
...
<covet-pics-popup>
...
</covet-pics-popup>
</body>
- Run
npm install covet-pics-widget --save - Put a script tag similar to this
<script src='node_modules/covet-pics-widget/dist/covet-pics-widget.js'></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
- To update snapshots run:
npm test -uoryarn test -uornpm run test --updateSnapshot
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