White space fix ('x more' items still don't show)

events.user.js

@@ -22,14 +22,14 @@ const stripesGradient = (colors, width, angle) => {
 
   colors.forEach((color, i) => {
     colorCounts[color] -= 1;
-    color = chroma(color).darken(colorCounts[color]/3).css();
+    color = chroma(color).darken(colorCounts[color] / 3).css();
 
-    gradient += color + " " + pos + "px,";
+    gradient += color + ' ' + pos + 'px,';
     pos += width;
-    gradient += color + " " + pos + "px,";
+    gradient += color + ' ' + pos + 'px,';
   });
   gradient = gradient.slice(0, -1);
-  gradient += ")";
+  gradient += ')';
   return gradient;
 };
 
@@ -41,7 +41,7 @@ const calculatePosition = (event, parentPosition) => {
     left: Math.max(eventPosition.left - parentPosition.left, 0),
     right: parentPosition.right - eventPosition.right,
   }
-}
+};
 
 const mergeEventElements = (events) => {
   events.sort((e1, e2) => dragType(e1) - dragType(e2));
@@ -59,7 +59,7 @@ const mergeEventElements = (events) => {
 
   const eventToKeep = events.shift();
   events.forEach(event => {
-    event.style.visibility = "hidden";
+    event.style.visibility = 'hidden';
   });
 
 
@@ -75,26 +75,27 @@ const mergeEventElements = (events) => {
       borderColor: eventToKeep.style.borderColor,
       textShadow: eventToKeep.style.textShadow,
     };
+
     eventToKeep.style.backgroundImage = stripesGradient(colors, 10, 45);
-    eventToKeep.style.backgroundSize = "initial";
+    eventToKeep.style.backgroundSize = 'initial';
     eventToKeep.style.left = Math.min.apply(Math, positions.map(s => s.left)) + 'px';
     eventToKeep.style.right = Math.min.apply(Math, positions.map(s => s.right)) + 'px';
-    eventToKeep.style.visibility = "visible";
+    eventToKeep.style.visibility = 'visible';
     eventToKeep.style.width = null;
-    eventToKeep.style.border = "solid 1px #FFF";
+    eventToKeep.style.border = 'solid 1px #FFF';
 
     // Clear setting color for declined events
     eventToKeep.querySelector('[aria-hidden="true"]').style.color = null;
 
     const computedSpanStyle = window.getComputedStyle(eventToKeep.querySelector('span'));
-    if (computedSpanStyle.color == "rgb(255, 255, 255)") {
-      eventToKeep.style.textShadow = "0px 0px 2px black";
+    if (computedSpanStyle.color == 'rgb(255, 255, 255)') {
+      eventToKeep.style.textShadow = '0px 0px 2px black';
     } else {
-      eventToKeep.style.textShadow = "0px 0px 2px white";
+      eventToKeep.style.textShadow = '0px 0px 2px white';
     }
 
     events.forEach(event => {
-      event.style.visibility = "hidden";
+      event.style.visibility = 'hidden';
     });
   } else {
     const dots = eventToKeep.querySelector('[role="button"] div:first-child');
@@ -105,53 +106,73 @@ const mergeEventElements = (events) => {
     dot.style.height = '8px';
 
     events.forEach(event => {
-      event.style.visibility = "hidden";
+      event.style.visibility = 'hidden';
     });
   }
-}
+};
 
 const resetMergedEvents = (events) => {
   events.forEach(event => {
-    for (var k in event.originalStyle) {
+    for (let k in event.originalStyle) {
       event.style[k] = event.originalStyle[k];
     }
-    event.style.visibility = "visible";
+    event.style.visibility = 'visible';
   });
-}
+};
 
 const merge = (mainCalender) => {
   const eventSets = {};
-  const days = mainCalender.querySelectorAll("[role=\"gridcell\"]");
+  const days = mainCalender.querySelectorAll('[role="gridcell"]');
   days.forEach((day, index) => {
-    const events = Array.from(day.querySelectorAll("[data-eventid][role=\"button\"], [data-eventid] [role=\"button\"]"));
+    const events = Array.from(day.querySelectorAll('[data-eventid][role="button"], [data-eventid] [role="button"]'));
     events.forEach(event => {
       const eventTitleEls = event.querySelectorAll('[aria-hidden="true"]');
       if (!eventTitleEls.length) {
         return;
       }
-      let eventKey = Array.from(eventTitleEls).map(el => el.textContent).join('').replace(/\\s+/g,"");
-      eventKey = index + eventKey + event.style.height;
+      let eventKey = Array.from(eventTitleEls).map(el => el.textContent).join('').replace(/\\s+/g, '');
+      eventKey = index + '_' + eventKey + event.style.height;
       eventSets[eventKey] = eventSets[eventKey] || [];
       eventSets[eventKey].push(event);
     });
   });
 
-  Object.values(eventSets)
-    .forEach(events => {
+  let daysWithMergedEvents = [];
+
+  Object.entries(eventSets)
+    .forEach(eventSet => {
+      const index = eventSet[0].split('_')[0];
+      const events = eventSet[1];
       if (events.length > 1) {
+        const length = events.length;
         mergeEventElements(events);
+        daysWithMergedEvents.push({ 'index': index, 'amount': length });
       } else {
-        resetMergedEvents(events)
+        resetMergedEvents(events);
+        const day = daysWithMergedEvents.find(day => day.index === index);
+        if (day) {
+          moveOtherEvents(events, day.amount);
+        }
       }
     });
-}
+};
+
+let otherEventsMoved = [];
+
+const moveOtherEvents = (events, amount) => {
+  if (!otherEventsMoved.includes(events[0])) {
+    const originalTop = events[0].parentElement.style.top;
+    events[0].parentElement.style.top = `${parseInt(originalTop) - (amount - 1)}em`;
+    otherEventsMoved.push(events[0]);
+  }
+};
 
 const init = (mutationsList) => {
   mutationsList && mutationsList
     .map(mutation => mutation.addedNodes[0] || mutation.target)
-    .filter(node => node.matches && node.matches("[role=\"main\"], [role=\"dialog\"], [role=\"grid\"]"))
+    .filter(node => node.matches && node.matches('[role="main"], [role="dialog"], [role="grid"]'))
     .map(merge);
-}
+};
 
 setTimeout(() => chrome.storage.local.get('disabled', storage => {
   console.log(`Event merge is ${storage.disabled ? 'disabled' : 'enabled'}`);