Home

Awesome

GrapesJS Countdown

Simple countdown component for GrapesJS Editor

<p align="center"><img src="https://artf.github.io/grapesjs/img/countdown.gif" alt="GrapesJS" align="center"/></p> <br/>

Demo

Summary

Options

OptionDescriptionDefault
idThe ID used to create the block and component.countdown
labelThe label used for the block and the component.Countdown
blockObject to extend the default block, eg. { label: 'Countdown', category: 'Extra', ... }. Pass a falsy value to avoid adding the block.{}
propsObject to extend the default component properties., eg. { name: 'Countdown', droppable: false, ... }.{}
styleCustom CSS styles for the component. This will replace the default one.''
styleAdditionalAdditional CSS styles for the component. These will be appended to the default one.''
startTimeDefault start time, eg. 2030-01-25 00:00.''
endTextText to show when the countdown is ended.'EXPIRED'
dateInputTypeDate input type, eg. date, datetime-local'date'
labelDaysDays label text used in component.'days'
labelHoursHours label text used in component.'hours'
labelMinutesMinutes label text used in component.'minutes'
labelSecondsSeconds label text used in component.'seconds'
classPrefixCountdown component class prefix.'countdown'

Download

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