Merge pull request #40 from jekuer/v1.7_fixes

V1.7 fixes

Author: jekuer

Gruntfile.js

@@ -1,8 +1,7 @@
 const npmDelimiter = /\/\/ START INIT[\s\S]*?\/\/ END INIT/gm
 
 function process(content, exportPhrase) {
-  content = content.replace('atcb_addToCalendar', 'addToCalendar');
-  return content.replace(npmDelimiter, `${exportPhrase} { addToCalendar, atcb_init };`);
+  return content.replace(npmDelimiter, `${exportPhrase} { atcb_action, atcb_init };`);
 }
 module.exports = function(grunt) {
 

README.md

@@ -70,8 +70,8 @@ See [jekuer.github.io/add-to-calendar-button](https://jekuer.github.io/add-to-ca
 
 1. Requires Node, npm, and a project, which builds on it (e.g. React or Angular).
 2. Run **`npm install add-to-calendar-button`**.
-3. Import the module into your project/component. For example with Angular/React: `import { addToCalendar, atcb_init } from 'add-to-calendar-button';`.
-4. Either use `addToCalendar` with your own buttons/forms/etc, or run `atcb_init` after the DOM has been loaded. To determine the right moment and execute, ...
+3. Import the module into your project/component. For example with Angular/React: `import { atcb_action, atcb_init } from 'add-to-calendar-button';`.
+4. Either use `atcb_action` with your own buttons/forms/etc, or run `atcb_init` after the DOM has been loaded. To determine the right moment and execute, ...
   1. with Angular, you would use `ngAfterViewInit()` with `atcb_init();` (mind that, depending on your app, other hooks might be better);
   2. with React, you might want to include an event listener like `document.addEventListener('DOMContentLoaded', atcb_init, false);` or using hooks in a functional component like `useEffect(() => atcb_init());`
 5. Include the css. For example with Angular or React, add the following to the global style.css: `@import 'add-to-calendar-button/assets/css/atcb.min'`;
@@ -173,22 +173,22 @@ You can use startTime and endTime in the event block, but it is recommended to r
 </div>
 ```
 
-### `addToCalendar` example with React
+### `atcb_action` example with React
 
-If you can't or don't want to use `atcb_init`, you can use the `addToCalendar` import with your own buttons or other elements/components. If you omit the second argument, the dropdown list will display as a modal in the middle of the viewport - in this case, add the "atcb_customTrigger" class to the submitting element for better keyboard support.
+If you can't or don't want to use `atcb_init`, you can use the `atcb_action` import with your own buttons or other elements/components. If you omit the second argument, the dropdown list will display as a modal in the middle of the viewport - in this case, add the "atcb_customTrigger" class to the submitting element for better keyboard support.
 
 This may work better with React and other frontend frameworks. 
 
 ```js
 import React from 'react'
-import { addToCalendar } from 'add-to-calendar-button'
+import { atcb_action } from 'add-to-calendar-button'
 
-const AddToCalendar = () => {
+const atcb_action = () => {
   const [name, setName] = React.useState('Some event')
   return (
       <form onSubmit={e => {
         e.preventDefault()
-        addToCalendar({
+        atcb_action({
           name,
           startDate: "2022-01-14",
           endDate: "2022-01-18",
@@ -210,7 +210,7 @@ Alternatively, you could use `atcb_init` with a `useEffect` hook:
 import React from 'react'
 import { atcb_init } from 'add-to-calendar-button'
 
-const AddToCalendar = () => {
+const atcb_action = () => {
   React.useEffect(atcb_init, [])
   return (
     <div className='atcb' style={{display: 'none'}}>

assets/css/atcb.css

@@ -3,7 +3,7 @@
  * Add-to-Calendar Button
  * ++++++++++++++++++++++
  * 
- * Version: 1.7.0
+ * Version: 1.7.1
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/jekuer/add-to-calendar-button
  * License: MIT with “Commons Clause” License Condition v1.0

assets/js/atcb.js

@@ -3,7 +3,7 @@
  * Add-to-Calendar Button
  * ++++++++++++++++++++++
  */
-const atcbVersion = '1.7.0';
+const atcbVersion = '1.7.1';
 /* Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/jekuer/add-to-calendar-button
  * License: MIT with “Commons Clause” License Condition v1.0
@@ -265,7 +265,7 @@ function atcb_generate(button, buttonId, data) {
     buttonTrigger.addEventListener('mousedown', () => atcb_toggle(data, buttonTrigger, true, false));
   } else {
     buttonTrigger.addEventListener('touchstart', () => atcb_toggle(data, buttonTrigger, true, false), {passive: true});
-    buttonTrigger.addEventListener('mouseenter', () => atcb_addToCalendar(data, buttonTrigger, true, false));
+    buttonTrigger.addEventListener('mouseenter', () => atcb_action(data, buttonTrigger, true, false));
   }
   buttonTrigger.addEventListener('keydown', function(event) { // trigger click on enter as well
     if (event.key == 'Enter') {
@@ -401,12 +401,12 @@ function atcb_toggle(data, button, buttonGenerated, keyboardTrigger = true) {
   if (button.classList.contains('atcb_active')) {
     atcb_close();
   } else {
-    atcb_addToCalendar(data, button, buttonGenerated, keyboardTrigger);
+    atcb_action(data, button, buttonGenerated, keyboardTrigger);
   }
 }
 
 // show the dropdown list + background overlay
-function atcb_addToCalendar(data, button, buttonGenerated = false, keyboardTrigger = true) {
+function atcb_action(data, button, buttonGenerated = false, keyboardTrigger = true) {
   // abort early if an add-to-calendar dropdown already opened
   if (document.querySelector('.atcb_list')) return
 
@@ -708,5 +708,4 @@ document.addEventListener('keydown', evt => {
 
 // START INIT
 document.addEventListener('DOMContentLoaded', atcb_init, false); // init the magic as soon as the DOM has been loaded
-//export { addToCalendar, atcb_init }; // export statement - requires explicit init somewhere else. Remove the line above, if you want to use this one here
 // END INIT

assets/js/atcb.min.js

@@ -2,7 +2,7 @@ declare module 'add-to-calendar-button' {
   export type ISO8601Date = string;
   export type ISO8601Time = string;
   export function atcb_init(): any;
-  export function addToCalendar (
+  export function atcb_action (
     config: {
       name?: string;
       description?: string;

assets/js/atcb.min.js.map

@@ -124,13 +124,13 @@
     </style>
 
     <!-- load the general button css -->
-    <link rel="stylesheet" href="./assets/css/atcb.min.css?v=1.7.0">
+    <link rel="stylesheet" href="./assets/css/atcb.min.css?v=1.7.1">
 
   </head>
   <body>
     <div class="container">
 
-      <h1>Add-to-Calendar Button <span id="tinyVersion">v1.7.0</span></h1>
+      <h1>Add-to-Calendar Button <span id="tinyVersion">v1.7.1</span></h1>
       <h2>A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.</h2>
       <p class="github">
         <a target="_blank" href="https://github.com/jekuer/add-to-calendar-button" class="clean">
@@ -525,8 +525,7 @@ <h3>Example 7: Schema.org Event Markup</h3>
 
       <h3>Example 8: Bring-Your-Own Button</h3>
       <p class="description">
-        If you can't or don't want to use "atcb_init", you can use the "atcb_addToCalendar" function and apply it to your own button.<br>
-        <em>In the NPM package, this is exported simply as "addToCalendar"!</em><br>
+        If you can't or don't want to use "atcb_init", you can use the "atcb_action" function and apply it to your own button.<br>
         For a good look, the element should be at least 160px wide; or remove the second argument to go for a modal dropdown.
       </p>
       <div class="example">
@@ -547,7 +546,7 @@ <h3>Example 8: Bring-Your-Own Button</h3>
               iCalFileName: "Reminder-Event",
             }
             const button = document.querySelector('#default-button')
-            button.addEventListener('click', () => atcb_addToCalendar(config, button))
+            button.addEventListener('click', () => atcb_action(config, button))
           </script>
           <!-- end of button code -->
 
@@ -565,7 +564,7 @@ <h3>Example 8: Bring-Your-Own Button</h3>
     iCalFileName: "Reminder-Event",
   }
   const button = document.querySelector('#default-button')
-  button.addEventListener('click', () => atcb_addToCalendar(config, button))
+  button.addEventListener('click', () => atcb_action(config, button))
 &lt;/script&gt;</code>
         </div>
       </div>
@@ -574,7 +573,7 @@ <h3>Example 8: Bring-Your-Own Button</h3>
 
       <h3>Example 9: Bring-Your-Own Anything</h3>
       <p class="description">
-        When using "atcb_addToCalendar" (again, if importing from the NPM package, just import "addToCalendar"), you don't need to use a button. A form, a link, an image — whatever element you want to trigger the dropdown, you can use it (though not all of them are good for accessibility).<br>
+        When using "atcb_action", you don't need to use a button. A form, a link, an image — whatever element you want to trigger the dropdown, you can use it (though not all of them are good for accessibility).<br>
         If you don't provide a second argument, the dropdown list will appear as a modal in the middle of the viewport.<br>
         Use of the 'click' trigger is highly recommended here.
       </p>
@@ -593,7 +592,7 @@ <h3>Example 9: Bring-Your-Own Anything</h3>
             document.querySelector('#event-form')
               .addEventListener('submit', (e) => {
                 e.preventDefault();
-                atcb_addToCalendar({
+                atcb_action({
                   name: e.currentTarget.elements.name.value,
                   startDate: "2022-01-14",
                   endDate: "2022-01-18",
@@ -618,7 +617,7 @@ <h3>Example 9: Bring-Your-Own Anything</h3>
   document.querySelector('#event-form')
     .addEventListener('submit', (e) =&gt; {
       e.preventDefault();
-      atcb_addToCalendar({
+      atcb_action({
         name: e.currentTarget.elements.name.value,
         startDate: "2022-01-14",
         endDate: "2022-01-18",
@@ -651,7 +650,7 @@ <h3>Example 9: Bring-Your-Own Anything</h3>
 
 
     <!-- load the button js -->
-    <script type="application/javascript" src="./assets/js/atcb.min.js?v=1.7.0" defer></script>
+    <script type="application/javascript" src="./assets/js/atcb.min.js?v=1.7.1" defer></script>
 
   </body>
 </html>

index.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "add-to-calendar-button",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.",
   "main": "npm_dist/cjs/index.js",
   "module": "npm_dist/mjs/index.js",
@@ -14,7 +14,7 @@
   "style": "assets/css/atcb.css",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/jekuer/add-to-calendar-button.git"
+    "url": "https://github.com/jekuer/add-to-calendar-button.git"
   },
   "keywords": [
     "button",