Covet.pics Widget

Standalone Covet.pics Web Component built using Stencil.

Getting Started

Clone this repo to a new directory:

git clone https://github.com/SpaceSquirrelApps/covet-pics-widget.git covet-pics-widget
cd covet-pics-widget

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out Stencil docs here.

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 <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.

covet-pics-gallery-slider

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>.

covet-pics-gallery-popup

This is a popup component that's used in tandem with <covet-pics-gallery-grid> & <covet-pics-gallery-slider>.

covet-pics-gallery-item

This is essential building block and child element for <covet-pics-gallery-grid> or <covet-pics-gallery-slider>

Using Covet.pics Widget components

Script tag

• 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 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:

<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>

Node Modules

• 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

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