diff --git a/src/iso.css b/src/iso.css index 567f2aa..fccb830 100644 --- a/src/iso.css +++ b/src/iso.css @@ -9,6 +9,6 @@ display: none; } -.ic-cubes .calendar-graph { +.ic-cubes .js-calendar-graph { display: none ! important; } diff --git a/src/iso.js b/src/iso.js index 1f3b6ba..1b4eb08 100644 --- a/src/iso.js +++ b/src/iso.js @@ -4,8 +4,6 @@ const dateOptions = {month: 'short', day: 'numeric'} let calendarGraph let contributionsBox -let colors = [] -let halloweenColors = [] let yearTotal = 0 let weekTotal = 0 let averageCount = 0 @@ -40,44 +38,6 @@ const resetValues = () => { weekStartDay = null } -const loadColors = () => { - colors = [ - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-graph-day-bg').replace('#', ''), 16) - ), - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-graph-day-L1-bg').replace('#', ''), 16) - ), - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-graph-day-L2-bg').replace('#', ''), 16) - ), - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-graph-day-L3-bg').replace('#', ''), 16) - ), - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-graph-day-L4-bg').replace('#', ''), 16) - ) - ] - - halloweenColors = [ - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-halloween-graph-day-bg').replace('#', ''), 16) - ), - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-halloween-graph-day-L1-bg').replace('#', ''), 16) - ), - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-halloween-graph-day-L2-bg').replace('#', ''), 16) - ), - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-halloween-graph-day-L3-bg').replace('#', ''), 16) - ), - new obelisk.CubeColor().getByHorizontalColor( - Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--color-calendar-halloween-graph-day-L4-bg').replace('#', ''), 16) - ) - ] -} - const getSettings = () => { return new Promise(resolve => { // Check for user preference, if chrome.storage is available. @@ -185,8 +145,9 @@ const loadStats = () => { let currentStreakStart = null let currentStreakEnd = null - const days = document.querySelectorAll('.js-calendar-graph rect.day') - const currentWeekDays = days[days.length - 1].parentElement.querySelectorAll('.js-calendar-graph rect.day') + const days = document.querySelectorAll('.js-calendar-graph rect[data-date]') + const currentWeekDays = days[days.length - 1].parentElement.querySelectorAll('rect[data-date]') + days.forEach(d => { const currentDayCount = Number.parseInt(d.dataset.count, 10) yearTotal += Number.parseInt(currentDayCount, 10) @@ -295,33 +256,33 @@ const loadStats = () => { weekDatesTotal = `${weekDateFirst} → ${dateLast}` } -const getSquareColor = fill => { - switch (fill) { - case 'var(--color-calendar-graph-day-bg)': - return colors[0] - case 'var(--color-calendar-graph-day-L1-bg)': - return colors[1] - case 'var(--color-calendar-graph-day-L2-bg)': - return colors[2] - case 'var(--color-calendar-graph-day-L3-bg)': - return colors[3] - case 'var(--color-calendar-graph-day-L4-bg)': - return colors[4] - case 'var(--color-calendar-halloween-graph-day-bg)': - return halloweenColors[0] - case 'var(--color-calendar-halloween-graph-day-L1-bg)': - return halloweenColors[1] - case 'var(--color-calendar-halloween-graph-day-L2-bg)': - return halloweenColors[2] - case 'var(--color-calendar-halloween-graph-day-L3-bg)': - return halloweenColors[3] - case 'var(--color-calendar-halloween-graph-day-L4-bg)': - return halloweenColors[4] - default: - if (fill.includes('#')) { - return new obelisk.CubeColor().getByHorizontalColor(Number.parseInt('0x' + fill.replace('#', ''), 16)) - } +const rgbToHex = rgb => { + const sep = rgb.includes(',') ? ',' : ' ' + rgb = rgb.slice(4).split(')')[0].split(sep) + + let r = Number(rgb[0]).toString(16) + let g = Number(rgb[1]).toString(16) + let b = Number(rgb[2]).toString(16) + + if (r.length === 1) { + r = '0' + r } + + if (g.length === 1) { + g = '0' + g + } + + if (b.length === 1) { + b = '0' + b + } + + return r + g + b +} + +const getSquareColor = rect => { + const fill = getComputedStyle(rect).getPropertyValue('fill') + const rgb = rgbToHex(fill) + return new obelisk.CubeColor().getByHorizontalColor(Number.parseInt(rgb, 16)) } const renderIsometricChart = () => { @@ -338,7 +299,6 @@ const renderIsometricChart = () => { const x = Number.parseInt(((w.getAttribute('transform')).match(/(\d+)/))[0], 10) / (GH_OFFSET + 1) w.querySelectorAll('rect').forEach(r => { const y = Number.parseInt(r.getAttribute('y'), 10) / GH_OFFSET - const fill = r.getAttribute('fill') const contribCount = Number.parseInt(r.dataset.count, 10) let cubeHeight = 3 @@ -347,7 +307,7 @@ const renderIsometricChart = () => { } const dimension = new obelisk.CubeDimension(SIZE, SIZE, cubeHeight) - const color = getSquareColor(fill) + const color = getSquareColor(r) const cube = new obelisk.Cube(dimension, color, false) const p3d = new obelisk.Point3D(SIZE * x, SIZE * y, 0) pixelView.renderObject(cube, p3d) @@ -413,7 +373,6 @@ const generateIsometricChart = () => { contributionsBox = document.querySelector('.js-yearly-contributions') resetValues() - loadColors() initUI() loadStats() renderStats() @@ -477,7 +436,6 @@ if (document.querySelector('.js-calendar-graph')) { } window.matchMedia('(prefers-color-scheme: dark)').addListener(() => { - loadColors() renderIsometricChart() }) diff --git a/src/manifest.json b/src/manifest.json index 642436d..e74cfd4 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,6 +1,6 @@ { "name": "GitHub Isometric Contributions", - "version": "1.1.9", + "version": "1.1.10", "description": "Renders an isometric pixel view of GitHub contribution graphs.", "content_scripts": [ { "css": [ "iso.css" ],