GrapesJS Countdown

Simple countdown component for GrapesJS Editor

Demo

Summary

• Plugin name: grapesjs-component-countdown
• Components: countdown
• Blocks: countdown

Options

Option	Description	Default
id	The ID used to create the block and component.	countdown
label	The label used for the block and the component.	Countdown
block	Object to extend the default block, eg. { label: 'Countdown', category: 'Extra', ... }. Pass a falsy value to avoid adding the block.	{}
props	Object to extend the default component properties., eg. { name: 'Countdown', droppable: false, ... }.	{}
style	Custom CSS styles for the component. This will replace the default one.	''
styleAdditional	Additional CSS styles for the component. These will be appended to the default one.	''
startTime	Default start time, eg. 2030-01-25 00:00.	''
endText	Text to show when the countdown is ended.	'EXPIRED'
dateInputType	Date input type, eg. date, datetime-local	'date'
labelDays	Days label text used in component.	'days'
labelHours	Hours label text used in component.	'hours'
labelMinutes	Minutes label text used in component.	'minutes'
labelSeconds	Seconds label text used in component.	'seconds'
classPrefix	Countdown component class prefix.	'countdown'

Download

• CDN
  • https://unpkg.com/grapesjs-component-countdown
• NPM
  • npm i grapesjs-component-countdown
• GIT
  • git clone https://github.com/artf/grapesjs-component-countdown.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-component-countdown.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      // ...
      plugins: ['grapesjs-component-countdown'],
      pluginsOpts: {
        'grapesjs-component-countdown': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import pluginCountdown from 'grapesjs-component-countdown';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [pluginCountdown],
  pluginsOpts: {
    [pluginCountdown]: { /* options */ }
  }
  // or
  plugins: [
    editor => pluginCountdown(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/artf/grapesjs-component-countdown.git
$ cd grapesjs-component-countdown

Install it

$ npm i

Start the dev server

$ npm start

Build before the commit. This will also increase the patch level version of the package

$ npm run build

License

BSD 3-Clause