Cockpit Javascript SDK
Cockpit Headless CMS
A Javascript SDK forUsage
npm install cockpit-sdk# or yarn add cockpit-sdk
If you're using Gatsby you can include the cockpit-sdk with the following:
Simple Example
const CockpitSDK = default;// or; const cockpit = host: "http://localhost:8080" // e.g. local docker Cockpit. accessToken: "12a3456b789c12d34567ef8a9bc01d"; cockpit;// { "fields": {...}, "entries": [{...},{...},{...}], "total": 3 } // Or with the callback api:cockpit;cockpitdataconsolelog;
Connecting to your Cockpit instance
Connecting your project to Cockpit is done by instantiating CockpitSDK. This object takes multiple parameters.
Parameter | Description |
---|---|
host | Your cockpit instance address |
accessToken | Cockpit access token |
webSocket | Websocket address (if used) |
fetchInitOptions | Init options to apply on every Fetch request |
defaultOptions | Options to be applied on every Cockpit fetch |
defaultOptions:
filter: published: true // mongoDB Operators. populate: 1 // Resolve linked collection items. limit skip apiEndpoints // See Api endpoints section bellow sort: _created: -1
Collections
Method | Args | Return |
---|---|---|
collectionSchema | (collectionName) |
Promise |
collectionList | () |
Promise |
collectionGet | (collectionName, options) |
Promise |
collectionSave | (collectionName, data) |
Promise |
collectionRemove | (collectionName, filter) |
Promise |
collection | (collectionName, options) |
- |
collection.get | (success, error) |
- |
collection.watch | (success, error) |
- |
collection.on | (eventName, success, error) |
- |
options:
filter: published: true // mongoDB Operators. populate: 1 // Resolve linked collection items. limit skip sort: _created: -1
Assets
Method | Args | Return |
---|---|---|
image | (assetId OR assetPath, imageOptions OR widthsArray) |
Path String OR Paths Array |
imageSrcSet | (assetId OR assetPath, widthsArray) |
Paths Array |
imageGet | (assetId OR assetPath, imageOptions) |
Promise |
assets | (options) |
Promise |
imageOptions:
width height quality: 85 pixelRatio: 2 // default: 1 mode: 'thumbnail' | 'bestFit' | 'resize' | 'fitToWidth' | 'fitToHeight' filters: darken: 50 pixelate: 40 desaturate: true flip: 'x' colorize: 'FF0' /* Filters: blur | brighten | colorize | contrast | darken | desaturate | emboss | flip | invert | opacity | pixelate | sepia | sharpen | sketch */
widthsArray:
100 // Width srcSet: "100w" | "2x" | "(max-width: 30em)" ...imageOptions ;
When image
method receives an array as second argument it will behave as imageSrcSet
.
Example:
cockpit; // original/path.jpgcockpit;cockpit;cockpit;// ['?src=path.jpg&w=100 100w', '?src=path.jpg&w=480&h=480 480w', '?src=path.jpg&w=960 (max-width: 30em)']
User
Method | Args | Return |
---|---|---|
authUser | (user, password) |
Promise |
listUsers | (options) |
Promise |
Regions
Method | Args | Return |
---|---|---|
region | (regionName, options) |
- |
region.get | (success, error) |
- |
region.data | (success, error) |
- |
regionGet | (regionName, options) |
Promise |
regionData | (regionName, options) |
Promise |
Forms
Method | Args | Return |
---|---|---|
formSubmit | (formName, options) |
- |
Example:
cockpit;
Real-time
Simple Example
The collection
method fetches the data on call and on every collection update.
The real-time methods expects callback functions instead of a promise.
cockpit; // { "fields": {...}, "entries": [{...},{...},{...}], "total": … }
Real-time Methods
You will need a Websocket middleware server to use the real-time features.
This SKD is working with Cockpit-Real-time-Server
Method | Args |
---|---|
collection | (collectionName, options) |
collection.get | (success, error) |
collection.watch | (success, error) |
collection.on | (eventName, success, error) |
const collection = cockpit;collection; // { "entries": […], "fields": {...}, "total": … }collection; // { entry: {...}, collection: '', event: '' }collection; // { entry: {...}, collection: '', event: '' }
Note that the
.watch
and.get
methods returns the whole entries and the.on
method just one entry
Api endpoint
Default endpoints
Name | Default URL |
---|---|
cockpitAssets | '/api/cockpit/assets' |
cockpitAuthUser | '/api/cockpit/authUser' |
cockpitImage | '/api/cockpit/image' |
cockpitListUsers | '/api/cockpit/listUsers' |
collectionsCollection | '/api/collections/collection/' |
collectionsGet | '/api/collections/get/' |
collectionsListCollections | '/api/collections/listCollections' |
collectionsRemove | '/api/collections/remove/' |
collectionsSave | '/api/collections/save/' |
regionsData | '/api/regions/data/' |
regionsGet | '/api/regions/get/' |
regionsListRegions | '/api/regions/listRegions' |
singletonsGet | '/api/singletons/get/' |
singletonsListSingletons | '/api/singletons/listSingletons' |
The default apiEndpoints
can be updated in the constructor.
// ... apiEndpoints: cockpitImage: '/api/public/image' ;
Event names
cockpit;
Events |
---|
save |
preview |