multiple bug fixes and optimization

Author: jekuer

assets/css/atcb.css

@@ -3,7 +3,7 @@
  * Add-to-Calendar Button
  * ++++++++++++++++++++++
  * 
- * Version: 1.1.1
+ * Version: 1.1.2
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/jekuer/add-to-calendar-button
  * License: GNU General Public License v3.0	(gpl-3.0)
@@ -15,7 +15,7 @@
 }
 
 .atcb_button_wrapper {
-  display: block;
+  display: inline-block;
   position: relative;
 }
 
@@ -45,6 +45,11 @@
   -webkit-tap-highlight-color: transparent;
   width: auto;
 }
+@media only screen and (max-width: 575px) {
+  .atcb_button {
+    font-size: 14px;
+  }
+}
 
 .atcb_button.active {
   background: rgb(255, 255, 255);
@@ -108,6 +113,11 @@
   box-shadow: 1px 2px 10px 0px rgba(0,0,0,.4);
   color: rgb(0, 0, 0);
 }
+@media only screen and (max-width: 575px) {
+  .atcb_list_item {
+    font-size: 14px;
+  }
+}
 
 .atcb_list_item:first-child {
   padding-top: 25px;
@@ -122,7 +132,7 @@
   margin-right: 8px;
 }
 
-#atcb_bgoverlay {
+.atcb_bgoverlay {
   background: rgba(20,20,20,.2);
   backdrop-filter: blur(2px);
   height: 100%;

assets/css/atcb.min.css

@@ -3,7 +3,7 @@
  * Add-to-Calendar Button
  * ++++++++++++++++++++++
  */
-const atcbVersion = '1.1.1';
+const atcbVersion = '1.1.2';
 /* Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/jekuer/add-to-calendar-button
  * License: GNU General Public License v3.0	(gpl-3.0)
@@ -32,14 +32,6 @@ function atcb_init() {
       if (atcb_validate(atcbConfig)) {
         // ... and generate the button on success
         atcb_generate(atcButtons[i], i, atcbConfig);
-        // create the background overlay, which also acts as trigger to close any dropdowns
-        let bgOverlay = document.createElement('div');
-        bgOverlay.id = 'atcb_bgoverlay';
-        bgOverlay.style.display = 'none';
-        document.body.appendChild(bgOverlay);
-        bgOverlay.addEventListener('click', atcb_close_all, {passive: true});
-        bgOverlay.addEventListener('touchstart', atcb_close_all, {passive: true});
-        bgOverlay.addEventListener('mouseenter', atcb_close_all, false);
       }
     }
   }
@@ -256,6 +248,15 @@ function atcb_generate(button, buttonId, data) {
         break;
     }
   });
+  // create the background overlay, which also acts as trigger to close any dropdowns
+  let bgOverlay = document.createElement('div');
+  bgOverlay.id = 'atcb_bgoverlay_' + buttonId;
+  bgOverlay.classList.add('atcb_bgoverlay');
+  bgOverlay.style.display = 'none';
+  button.appendChild(bgOverlay);
+  bgOverlay.addEventListener('click', atcb_close_all, {passive: true});
+  bgOverlay.addEventListener('touchstart', atcb_close_all, {passive: true});
+  bgOverlay.addEventListener('mouseenter', atcb_close_all, false);
   // show the placeholder div
   button.style.display = 'block';
   // console log
@@ -279,17 +280,18 @@ function atcb_open() {
   this.classList.add('active');
   let list = document.getElementById('atcb_list_' + this.dataset.atcbtn);
   list.style.display = 'block';
-  document.getElementById('atcb_bgoverlay').style.display = 'block';
+  document.getElementById('atcb_bgoverlay_' + this.dataset.atcbtn).style.display = 'block';
 }
 
 function atcb_close() {
   // remove the active class, hide the list and the background overlay
   this.classList.remove('active');
   let list = document.getElementById('atcb_list_' + this.dataset.atcbtn);
   list.style.display = 'none';
-  document.getElementById('atcb_bgoverlay').style.display = 'none';
+  document.getElementById('atcb_bgoverlay_' + this.dataset.atcbtn).style.display = 'none';
 }
 
+
 function atcb_close_all() {
   // get all buttons
   let atcButtons = document.querySelectorAll('.atcb_button');

assets/css/atcb.min.css.map

@@ -1,6 +1,6 @@
 {
   "name": "add-to-calendar-button",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.",
   "main": "assets/js/atcb.js",
   "types": "index.d.ts",