diff --git a/events.user.js b/events.user.js index c266ce4..5e25306 100644 --- a/events.user.js +++ b/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'}`);