From 4d318dc4cce4dba83a92a76dd9a1dab5f8d4bf67 Mon Sep 17 00:00:00 2001 From: hcawn Date: Sun, 7 Aug 2022 12:37:44 +0100 Subject: [PATCH 1/3] candy cane swapped for non-repeating vertical bands --- events.user.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/events.user.js b/events.user.js index c266ce4..13c0c20 100644 --- a/events.user.js +++ b/events.user.js @@ -11,9 +11,10 @@ 'use strict'; -const stripesGradient = (colors, width, angle) => { - let gradient = `repeating-linear-gradient( ${angle}deg,`; +const verticalBandColours = (colors) => { + let gradient = `linear-gradient( 90deg,`; let pos = 0; + const width = 100/colors.length const colorCounts = colors.reduce((counts, color) => { counts[color] = (counts[color] || 0) + 1; @@ -24,14 +25,14 @@ const stripesGradient = (colors, width, angle) => { colorCounts[color] -= 1; color = chroma(color).darken(colorCounts[color]/3).css(); - gradient += color + " " + pos + "px,"; + gradient += color + " " + pos + "%,"; pos += width; - gradient += color + " " + pos + "px,"; + gradient += color + " " + pos + "%,"; }); gradient = gradient.slice(0, -1); gradient += ")"; return gradient; -}; +} const dragType = e => parseInt(e.dataset.dragsourceType); @@ -75,7 +76,7 @@ const mergeEventElements = (events) => { borderColor: eventToKeep.style.borderColor, textShadow: eventToKeep.style.textShadow, }; - eventToKeep.style.backgroundImage = stripesGradient(colors, 10, 45); + eventToKeep.style.backgroundImage = verticalBandColours(colors); 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'; @@ -99,7 +100,7 @@ const mergeEventElements = (events) => { } else { const dots = eventToKeep.querySelector('[role="button"] div:first-child'); const dot = dots.querySelector('div'); - dot.style.backgroundImage = stripesGradient(colors, 4, 90); + dot.style.backgroundImage = verticalBandColours(colors); dot.style.width = colors.length * 4 + 'px'; dot.style.borderWidth = 0; dot.style.height = '8px'; From ae1373e7b8ce799173bd11ddbab3aa0b591a0379 Mon Sep 17 00:00:00 2001 From: hcawn Date: Mon, 8 Aug 2022 14:27:08 +0100 Subject: [PATCH 2/3] manifest V3 now working, event fill now accounts for declined or un-responded events --- background.js | 4 ++-- events.user.js | 54 ++++++++++++++++++++++++++++++++++---------------- manifest.json | 16 ++++++++------- 3 files changed, 48 insertions(+), 26 deletions(-) diff --git a/background.js b/background.js index a13097b..ee757be 100644 --- a/background.js +++ b/background.js @@ -1,11 +1,11 @@ const getSetting = () => new Promise(res => chrome.storage.local.get('disabled', (s) => res(s.disabled))); -const setIcon = (disabled) => chrome.browserAction.setIcon({ +const setIcon = (disabled) => chrome.action.setIcon({ path: disabled ? "icon-disabled.png" : "icon.png" }); getSetting().then(setIcon); -chrome.browserAction.onClicked.addListener(function(tab) { +chrome.action.onClicked.addListener(function(tab) { getSetting().then(disabled => { const toggled = !disabled; chrome.storage.local.set({ 'disabled': toggled }); diff --git a/events.user.js b/events.user.js index 13c0c20..12bfedd 100644 --- a/events.user.js +++ b/events.user.js @@ -16,23 +16,29 @@ const verticalBandColours = (colors) => { let pos = 0; const width = 100/colors.length - const colorCounts = colors.reduce((counts, color) => { - counts[color] = (counts[color] || 0) + 1; - return counts; - }, {}); - colors.forEach((color, i) => { - colorCounts[color] -= 1; - color = chroma(color).darken(colorCounts[color]/3).css(); - - gradient += color + " " + pos + "%,"; + colors.forEach((colorObj, i) => { pos += width; - gradient += color + " " + pos + "%,"; + if (colorObj.bg) { + gradient += colorObj.bg + " 0%" + pos + "%,"; + } + if (colorObj.bc) { + // if border set then zebra segment to simulate border and text + const colorBrighter = chroma(colorObj.bc).brighten().css(); + const fifth = width/5 + gradient += `${colorObj.bc} 0% ${pos - width + fifth}%, + ${colorBrighter} 0% ${pos - width + (2*fifth)}%, + ${colorObj.bc} 0% ${pos - width + (3*fifth)}%, + ${colorBrighter} 0% ${pos - width + (4*fifth)}%, + ${colorObj.bc} 0% ${pos}%,`; + } else { + gradient += colorObj.pbc + " 0%" + pos + "%,"; + } }); gradient = gradient.slice(0, -1); gradient += ")"; return gradient; -} +}; const dragType = e => parseInt(e.dataset.dragsourceType); @@ -46,11 +52,25 @@ const calculatePosition = (event, parentPosition) => { const mergeEventElements = (events) => { events.sort((e1, e2) => dragType(e1) - dragType(e2)); - const colors = events.map(event => - event.style.backgroundColor || // Week day and full day events marked 'attending' - event.style.borderColor || // Not attending or not responded week view events - event.parentElement.style.borderColor // Timed month view events - ); + const colors = events.map(event => { + return { + bg: event.style.backgroundColor, // Week day and full day events marked 'attending' + bc: event.style.borderColor, // Not attending or not responded week view events + pbc: event.parentElement.style.borderColor // Timed month view events + } +}); + + if (events.length === 6) { + console.log('sixer found') + events.forEach((event,i) => { + console.log(i) + console.log(event.style) + console.log(event.style.backgroundColor) + console.log(event.style.borderColor) + console.log(event.parentElement.style.borderColor) + }) + console.log(colors) + } const parentPosition = events[0].parentElement.getBoundingClientRect(); const positions = events.map(event => { @@ -82,7 +102,7 @@ const mergeEventElements = (events) => { eventToKeep.style.right = Math.min.apply(Math, positions.map(s => s.right)) + 'px'; 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; diff --git a/manifest.json b/manifest.json index 3bdb2c6..072b413 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "name": "__MSG_appName__", "description": "__MSG_appDesc__", "default_locale": "en", - "version": "2.2.1", + "version": "2.3.0", "content_scripts":[{ "matches": [ "https://www.google.com/calendar/*", @@ -13,19 +13,21 @@ "all_frames": true }], "permissions": [ - "https://www.google.com/calendar/*", - "https://calendar.google.com/*", "storage" ], + "host_permissions": [ + "https://www.google.com/calendar/*", + "https://calendar.google.com/*" + ], "background": { - "scripts": ["background.js"] + "service_worker": "background.js" }, - "browser_action": { + "action": { "default_title": "Toggle" }, "icons": { "48": "icon.png" }, - "content_security_policy": "default-src 'self'", - "manifest_version": 2 + "content_security_policy": {"default-src": "self"}, + "manifest_version": 3 } From defb82a0594bd0d7d0ac2817a1162931ef10ae11 Mon Sep 17 00:00:00 2001 From: hcawn Date: Mon, 8 Aug 2022 20:45:43 +0100 Subject: [PATCH 3/3] white text on all merged events. original events now clickable to mimick original layout, original layout also maintained --- events.user.js | 37 +++++++++++++++---------------------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/events.user.js b/events.user.js index 12bfedd..8520ece 100644 --- a/events.user.js +++ b/events.user.js @@ -21,8 +21,7 @@ const verticalBandColours = (colors) => { pos += width; if (colorObj.bg) { gradient += colorObj.bg + " 0%" + pos + "%,"; - } - if (colorObj.bc) { + } else if (colorObj.bc) { // if border set then zebra segment to simulate border and text const colorBrighter = chroma(colorObj.bc).brighten().css(); const fifth = width/5 @@ -51,26 +50,15 @@ const calculatePosition = (event, parentPosition) => { } const mergeEventElements = (events) => { - events.sort((e1, e2) => dragType(e1) - dragType(e2)); + // disabling this as it changes the orders of the events making clicking on the now transparent divs not be in the correct order + // events.sort((e1, e2) => dragType(e1) - dragType(e2)); const colors = events.map(event => { return { bg: event.style.backgroundColor, // Week day and full day events marked 'attending' bc: event.style.borderColor, // Not attending or not responded week view events pbc: event.parentElement.style.borderColor // Timed month view events } -}); - - if (events.length === 6) { - console.log('sixer found') - events.forEach((event,i) => { - console.log(i) - console.log(event.style) - console.log(event.style.backgroundColor) - console.log(event.style.borderColor) - console.log(event.parentElement.style.borderColor) - }) - console.log(colors) - } + }); const parentPosition = events[0].parentElement.getBoundingClientRect(); const positions = events.map(event => { @@ -79,8 +67,13 @@ const mergeEventElements = (events) => { }); const eventToKeep = events.shift(); - events.forEach(event => { - event.style.visibility = "hidden"; + + events.forEach((event,i,allEvents) => { + // making old events invisible (but still clickable) + // moving them into new positions that line up with gradiented colours + event.style.opacity = 0; + event.style.left = `calc((100% - 0px) * ${(i+1)/(allEvents.length+1)} + 0px)`; + event.style.width = `calc((100% - 0px) * ${1/(allEvents.length+1)}`; }); @@ -102,7 +95,7 @@ const mergeEventElements = (events) => { eventToKeep.style.right = Math.min.apply(Math, positions.map(s => s.right)) + 'px'; eventToKeep.style.visibility = "visible"; eventToKeep.style.width = null; - //eventToKeep.style.border = "solid 1px #FFF"; + eventToKeep.style.color = '#fff'; // Clear setting color for declined events eventToKeep.querySelector('[aria-hidden="true"]').style.color = null; @@ -115,7 +108,7 @@ const mergeEventElements = (events) => { } events.forEach(event => { - event.style.visibility = "hidden"; + event.style.opacity = 0; }); } else { const dots = eventToKeep.querySelector('[role="button"] div:first-child'); @@ -126,7 +119,7 @@ const mergeEventElements = (events) => { dot.style.height = '8px'; events.forEach(event => { - event.style.visibility = "hidden"; + event.style.opacity = 0; }); } } @@ -136,7 +129,7 @@ const resetMergedEvents = (events) => { for (var k in event.originalStyle) { event.style[k] = event.originalStyle[k]; } - event.style.visibility = "visible"; + event.style.opacity = 0; }); }