update

Gruntfile.js

@@ -121,7 +121,7 @@ module.exports = function (grunt) {
         options: {
           stripBanners: true,
           banner: "import { tzlib_get_ical_block, tzlib_get_offset, tzlib_get_timezones } from 'timezones-ical-library';\r\n",
-          footer: grunt.option('pro') ? 'export { atcb_action, i18nStrings, atcbCssTemplate as cssVariables, atcb_generate_ty };' : 'export { atcb_action, i18nStrings, atcbCssTemplate as cssVariables };',
+          footer: grunt.option('pro') ? 'export { atcb_action, i18nStrings, atcbCssTemplate as cssStyles, atcb_generate_ty };' : 'export { atcb_action, i18nStrings, atcbCssTemplate as cssStyles };',
           process: (content) => prepareFinalFile(content),
         },
       },
@@ -131,7 +131,7 @@ module.exports = function (grunt) {
         options: {
           stripBanners: true,
           banner: "// eslint-disable-next-line @typescript-eslint/no-var-requires\r\nconst tzlibActions = require('timezones-ical-library');\r\n",
-          footer: grunt.option('pro') ? 'module.exports = { atcb_action, i18nStrings, atcbCssTemplate as cssVariables, atcb_generate_ty };' : 'module.exports = { atcb_action, i18nStrings, atcbCssTemplate as cssVariables };',
+          footer: grunt.option('pro') ? 'module.exports = { atcb_action, i18nStrings, atcbCssTemplate as cssStyles, atcb_generate_ty };' : 'module.exports = { atcb_action, i18nStrings, atcbCssTemplate as cssStyles };',
           process: (content) => prepareFinalFile(content, true, true, true),
         },
       },

assets/css/atcb-3d.css

@@ -189,8 +189,7 @@
   z-index: 1;
 }
 
-.atcb-button.atcb-no-text,
-.atcb-button:disabled {
+.atcb-button.atcb-no-text {
   min-width: 0;
 }
 

assets/css/atcb-flat.css

@@ -172,8 +172,7 @@
   z-index: 1;
 }
 
-.atcb-button.atcb-no-text,
-.atcb-button:disabled {
+.atcb-button.atcb-no-text {
   min-width: 0;
 }
 

assets/css/atcb-neumorphism.css

@@ -193,10 +193,6 @@
   padding: 0;
 }
 
-.atcb-button:disabled {
-  min-width: 0;
-}
-
 .atcb-rtl .atcb-button {
   direction: rtl;
   text-align: right;

assets/css/atcb-round.css

@@ -196,10 +196,6 @@
   padding: 0;
 }
 
-.atcb-button:disabled {
-  min-width: 0;
-}
-
 .atcb-rtl .atcb-button {
   direction: rtl;
   text-align: right;

assets/css/atcb-text.css

@@ -188,8 +188,7 @@
   z-index: 1;
 }
 
-.atcb-button.atcb-no-text,
-.atcb-button:disabled {
+.atcb-button.atcb-no-text {
   min-width: 0;
 }
 

assets/css/atcb.css

@@ -184,8 +184,7 @@
   z-index: 1;
 }
 
-.atcb-button.atcb-no-text,
-.atcb-button:disabled {
+.atcb-button.atcb-no-text {
   min-width: 0;
 }
 

demo/components/menu/menu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-//import { SparklesIcon, } from '@heroicons/vue/24/outline';
+import { SparklesIcon, } from '@heroicons/vue/24/outline';
 
 const emit = defineEmits(['close-mobile-menu']);
 const localePath = useLocalePath();
@@ -10,16 +10,7 @@ const localePath = useLocalePath();
   <NuxtLink :to="{path: localePath('index'), hash: '#installation'}" class="menu-item" @click="emit('close-mobile-menu')"> {{ $t('navigation.installation') }} </NuxtLink>
   <NuxtLink :to="localePath('configuration')" class="menu-item" @click="emit('close-mobile-menu')"> {{ $t('navigation.configuration') }} </NuxtLink>
   <NuxtLink :to="localePath('examples')" class="menu-item" @click="emit('close-mobile-menu')"> {{ $t('navigation.examples') }} </NuxtLink>
-  <!--<a
-        class="menu-item-pro"
-        @click="emit"
-        target="_blank"
-        rel="noopener"
-        href="https://add-to-calendar-pro.com"
-      >
-        <SparklesIcon class="h-5 w-5 inline-block mr-2" aria-hidden="true" />go PRO
-      </a>-->
-  <!-- mobile menu -->
+  <a class="menu-item-pro" target="_self" rel="noopener" href="https://add-to-calendar-pro.com" @click="emit('close-mobile-menu')"> <SparklesIcon class="mr-2 inline-block h-5 w-5" aria-hidden="true" />go PRO </a>
 </template>
 
 <style scoped>
@@ -28,6 +19,6 @@ const localePath = useLocalePath();
 }
 
 .menu-item-pro {
-  @apply m-auto rounded-md border-2 text-white hover:text-black border-secondary-light from-secondary to-secondary-light py-2 px-3 hover:border-secondary hover:bg-gradient-to-tr hover:no-underline hover:shadow-md text-2xl lg:text-base;
+  @apply m-auto rounded-md border-2 text-white hover:text-black border-secondary from-secondary to-secondary-light py-2 px-3 hover:border-secondary-light hover:bg-gradient-to-tr hover:no-underline hover:shadow-md text-2xl lg:text-base;
 }
 </style>

demo/pages/examples.vue

@@ -100,7 +100,6 @@ watch(locale, value => {
         <p v-else>Dies ist das gewöhnliche Standard-Setup mit allen verfügbaren Kalender-Links und einer definierten Zeitzone</p>
         <div class="block w-full justify-between md:flex">
           <div class="flex w-full flex-none justify-center p-6 pt-8 md:w-[300px]">
-            <add-to-calendar-button proKey="a6ee910b-2390-4679-8d31-dc03ac7cb26b"></add-to-calendar-button>
             <add-to-calendar-button
               :name="$t('demo_data.name')"
               :startDate="defaultDate"

demo/public/atcb.css

@@ -184,8 +184,7 @@
   z-index: 1;
 }
 
-.atcb-button.atcb-no-text,
-.atcb-button:disabled {
+.atcb-button.atcb-no-text {
   min-width: 0;
 }
 

index.d.ts

@@ -5,7 +5,7 @@ declare module 'add-to-calendar-button' {
       [key: string]: string;
     };
   };
-  export const cssVariables: {
+  export const cssStyles: {
     [key: string]: string;
   };
   export function atcb_generate_ty(host: HTMLElement, data: object): null;

src/atcb-event.js

@@ -58,13 +58,20 @@ function atcb_push_to_data_layer(event, trigger) {
     case 'openSubEventLink':
       action = 'Opened';
       break;
+    case 'openRSVP':
+      action = 'Opened';
+      break;
     case 'success':
       action = 'Saved';
       break;
+    case 'successRSVP':
+      action = 'Saved';
+      break;
   }
+  const category = event === 'openRSVP' || event === 'successRSVP' ? 'Add-to-Calendar-RSVP' : 'Add-to-Calendar-Button';
   const atcbDataLayer = (window.dataLayer = window.dataLayer || []);
   atcbDataLayer.push({
-    eventCategory: 'Add-to-Calendar-Button',
+    eventCategory: category,
     eventAction: action,
     eventLabel: trigger,
     event: event,

src/atcb-generate-pro.js

@@ -14,9 +14,17 @@
 import { atcb_set_fullsize, atcb_rewrite_html_elements, atcb_copy_to_clipboard, atcb_secure_content } from './atcb-util.js';
 import { atcb_generate_modal_host, atcb_create_modal } from './atcb-generate.js';
 import { atcb_translate_hook } from './atcb-i18n.js';
+import { atcb_log_event } from './atcb-event.js';
+import { atcb_decorate_data } from './atcb-decorate.js';
 
 // FUNCTION TO GENERATE A THANK YOU NOTE
 function atcb_generate_ty(host, data) {
+  // if host is no shadowRoot, try to get the child shadowRoot (case, if called directly)
+  if (!host.host) {
+    host = host.shadowRoot;
+    // in this case, we also decorate the data (again)
+    data = atcb_decorate_data(data);
+  }
   const copyIcon =
     '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z" /></svg>';
   const copiedIcon =
@@ -129,7 +137,7 @@ function atcb_generate_ty(host, data) {
           field.type +
           '"' +
           (field.type === 'number' ? ' min="0"' : '') +
-          ((field.type === 'checkbox' || field.type === 'radio') && field.default && field.default === 'true' ? ' checked' : '') +
+          ((field.type === 'checkbox' || field.type === 'radio') && field.default && (field.default === 'true' || field.default === true) ? ' checked' : '') +
           ' name="' +
           fieldName +
           '" id="' +
@@ -238,4 +246,58 @@ function atcb_generate_ty(host, data) {
   }
 }
 
+// FUNCTION TO GENERATE AN RSVP FORM
+function atcb_generate_rsvp(host, data, keyboardTrigger = false, inline = false) {
+  // abort if proKey is not given and we are also not at localhost or add-to-calendar-pro.com
+  /*!
+   *  @preserve
+   *  PER LICENSE AGREEMENT, YOU ARE NOT ALLOWED TO REMOVE OR CHANGE THIS FUNCTION!
+   */
+  if ((!data.proKey || data.proKey === '') && !window.location.hostname.match(/^(localhost|.*\.add-to-calendar-pro.com)$/)) {
+    //return;
+  }
+  /*
+  On load:
+  if button and expired, show
+  if button and booked out, show
+  if inline, show expired inline
+  if modal, pull stats and show booked out if booked out
+  Render form.
+  if maxpp, show amount and limit to maxpp or max (whatever is lower)
+  */
+  atcb_log_event('openRSVP', data.identifier, data.identifier);
+
+
+  /*
+  On validation:
+  check required
+  check form (especially email)
+  check against max
+  check against expired
+  */
+
+  /*
+  try to submit:
+  on fail, check error:
+  - prokey wrong -> general error
+  - email wrong -> email error
+  - invalid status or inactive -> general error
+  - no rsvp -> general error
+  - rsvp expired -> expired
+  - limit exceeded -> if = 1 -> booked out; else: limit exceeded (+ pull stats again)
+  */
+
+  /*
+  on success:
+  if DOI, show instruction
+  if no DOI, show thank you + button
+  if not inline, show checkmark
+  */
+  atcb_log_event('successRSVP', data.identifier, data.identifier);
+
+  if (data.debug) {
+    console.log('RSVP form for "' + data.identifier + '" created');
+  }
+}
+
 export { atcb_generate_ty };

src/atcb-generate.js

@@ -174,7 +174,7 @@ function atcb_generate_label_content(data, parent, type, icon, text, oneOption)
 }
 
 // generate the triggering button
-function atcb_generate_button(host, button, data, debug = false) {
+function atcb_generate_button(host, button, data) {
   // determine whether we are looking for the 1-option case (also with buttonsList)
   const oneOption = (function () {
     if (data.options.length === 1 || (data.buttonsList && data.buttonStyle != 'date')) {
@@ -248,7 +248,7 @@ function atcb_generate_button(host, button, data, debug = false) {
       buttonTrigger.append(btnCheck);
     }
   });
-  if (debug) {
+  if (data.debug) {
     console.log('Add to Calendar Button "' + data.identifier + '" created');
   }
 }
@@ -939,11 +939,11 @@ function atcb_generate_modal_host(host, data, reset = true) {
   // create host element and add shadowDOM
   let newModalHost = document.createElement('div');
   newModalHost.id = data.identifier + '-modal-host';
-  if (host.host.hasAttribute('styleLight')) {
-    newModalHost.setAttribute('styleLight', host.host.getAttribute('styleLight'));
+  if (data.styleLight) {
+    newModalHost.setAttribute('styleLight', data.styleLight);
   }
-  if (host.host.hasAttribute('styleDark')) {
-    newModalHost.setAttribute('styleDark', host.host.getAttribute('styleDark'));
+  if (data.styleDark) {
+    newModalHost.setAttribute('styleDark', data.styleDark);
   }
   if (host.host.hasAttribute('cspnonce')) {
     newModalHost.setAttribute('cspnonce', host.host.getAttribute('cspnonce'));
@@ -956,7 +956,7 @@ function atcb_generate_modal_host(host, data, reset = true) {
   elem.innerHTML = '<div class="atcb-modal-host-initialized" style="translate3D(0, 0, 0);visibility:visible;opacity:1;position:fixed;top:0;left:0;width:100%;height:100%;display:flex;z-index:13999999;"></div>';
   newModalHost.shadowRoot.append(elem.content.cloneNode(true));
   atcb_set_light_mode(newModalHost.shadowRoot, data);
-  atcb_load_css(newModalHost.shadowRoot, null, data.buttonStyle, false, false, data.customCss);
+  atcb_load_css(newModalHost.shadowRoot, null, data);
   return newModalHost.shadowRoot;
 }