Merge pull request #13 from artf/update

Update

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 private/
 node_modules/
+dist/
 .eslintrc
 *.log
 _index.html

README.md

@@ -13,61 +13,89 @@ Simple countdown component for GrapesJS Editor
 
 ## Summary
 
-* Plugin name: `gjs-component-countdown`
+* Plugin name: `grapesjs-component-countdown`
 * Components: `countdown`
 * Blocks: `countdown`
 
 
-
-
-
 ## Options
 
-* `blocks` Which blocks to add, default: `['countdown']` (all)
-* `defaultStyle` Add default style to blocks, default: true
-* `startTime` Default start time, eg. '2018-01-25 00:00', default: ''
-* `endText` Text to show when the countdown is ended, default: 'EXPIRED'
-* `dateInputType` Date input type, eg, 'date', 'datetime-local', default: 'date'
-* `countdownClsPfx` Countdown class prefix, default: 'countdown'
-* `labelCountdown` Countdown label, default 'Countdown'
-* `labelCountdownCategory` Countdown category label, default 'Extra'
-* `labelDays` Days label text used in component, default 'days'
-* `labelHours` Hours label text used in component, default 'hours'
-* `labelMinutes` Minutes label text used in component, default 'minutes'
-* `labelSeconds` Seconds label text used in component, default 'seconds'
+| 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
 
-* `npm i grapesjs-component-countdown` or `yarn add grapesjs-component-countdown`
+* 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
 ```html
-<link href="path/to/grapes.min.css" rel="stylesheet"/>
-<script src="path/to/grapes.min.js"></script>
+<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: ['gjs-component-countdown'],
+      // ...
+      plugins: ['grapesjs-component-countdown'],
       pluginsOpts: {
-        'gjs-component-countdown': {/* ...options */}
+        'grapesjs-component-countdown': { /* options */ }
       }
   });
 </script>
 ```
 
+Modern javascript
+```js
+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 */ }),
+  ],
+});
+```
+
 
 
 

index.html

@@ -5,7 +5,6 @@
     <title>GrapesJS Countdown Plugin</title>
     <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
     <script src="https://unpkg.com/grapesjs"></script>
-    <script src="dist/grapesjs-component-countdown.min.js"></script>
     <style>
       body, html {
         height: 100%;
@@ -16,17 +15,18 @@
   <body>
     <div id="gjs" style="height:0px; overflow:hidden"></div>
     <script type="text/javascript">
-      var editor = grapesjs.init({
-        height: '100%',
-        noticeOnUnload: 0,
-        storageManager:{autoload: 0},
-        container : '#gjs',
-        fromElement: true,
-
-        plugins: ['gjs-component-countdown'],
-        pluginsOpts: {
-          'gjs-component-countdown': {}
-        }
+      setTimeout(() => {
+        window.editor = grapesjs.init({
+          height: '100%',
+          noticeOnUnload: false,
+          storageManager: false,
+          container : '#gjs',
+          fromElement: true,
+          plugins: ['grapesjs-component-countdown'],
+          pluginsOpts: {
+            'grapesjs-component-countdown': {}
+          }
+        });
       });
     </script>
   </body>