Moon Phase

[luetage]

If you need something to play with to hardcode the date, I’d do something along those lines. Be aware the new date method expects the input of months from 0 to 11. This means January is 0 and December is 11. Days and years are normal. Mod is not tested and could have errors.

 let lunar = {
    events: [['event1', new Date(2021, 4, 1)], ['event2', new Date(2021, 5, 12)], ['event3', new Date(2021, 8, 23)],['noevent', new Date(2024, 0, 1]],
    event: () => {
        const date = Date.now();
        for (let i = 0; i < lunar.events.length; i++) {
            if (date >= Date.parse(lunar.events[i][1]) && date < Date.parse(lunar.events[i+1][1])) {
                return lunar.events[i][0];
            }
        }
    }
}

[valiowk]

@luetage Thank you very much, I can visualize how to play with this enough to get a working mod now with a template to get started!

[luetage]

Update to the mod! I created new icons for all moon phases from scratch. For the original release I was more concerned with the calculation, but I was never quite satisfied with the icons, because they displayed the moon in the background color and especially new moon and full moon seemed to be reversed. The new SVG icons need far less code and therefore I removed the CSS – this has become a pure Javascript modification. Additionally I implemented a handy switch to choose between northern and southern hemisphere by changing a single variable. Edited original post to point out the changes.

[stardepp]

@luetage I just decided today to switch from History Clock to History Moon and I am very happy with the result. @luetage thanks for your effort

[luetage]

@stardepp I find it interesting the icon looks so large in your case, this is how it looks on my install:

[stardepp]

@luetage This is probably because @nomadic made my buttons thinner:

[luetage]

@stardepp This code influences urlbar buttons, which makes sense, since these are thick and the panel buttons are already thin by default. Some other code you are running is influencing the size of the history button perhaps. Can’t really tell. Try to load the mod without any other mods running and see what happens.

[luetage]

@stardepp Anyway, I updated the code to bring back the svg declaration, which should potentially stop other code messing with it.

[jocktmpltmea]

This post is deleted!

[luetage]

I updated OP to bring this mod up to speed and enhance it with the new custom buttons feature. What this means is that it’s possible to load/move the history button in any toolbar and it will consistently show the moon phase. It’s native now. 2 SVG files have to be created to feed the button editor, code is available from OP, but you might as well load all 3 files from Github.

[valiowk]

@luetage said in Project History Moon:

@valiowk We could calculate it anew whenever the mutationobserver triggers, but this happens frequently, basically whenever you open/close the history panel, that’s why I avoided it; percentage changes only about 3 times a day after all. You can trigger a new calculation by removing the history button from the panel and adding it again and this can be done with right‐click menu. Or even simpler: move all tabs to a new window. Or do it automatically by exchanging the observer function with following code:

    let moonwatch = (mutations, phase) => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'class') {
                const lc = moon.phase();
                historymoon(lc.phase);
                document.querySelector('.panelbtn.history').title = `History \n${lc.name} Moon ${lc.progress}`;
            }
        })
    }

You provided me with this code for the old version to recalculate the percentage and moon if the history panel is opened/closed. Would it be possible to provide an updated version for the new code? Thanks!

[luetage]

@valiowk The posted version doesn’t contain a mutation observer anymore, so this will not work. But the new Vivaldi icon setup apparently has other problems I’m not sure how to tackle yet. Maybe a new version will mod all history buttons whenever one of them shows up. I have a version in development which does just that, but it doesn’t work reliably. Strange things are going on.

[luetage]

@valiowk So, I updated OP. All history button instances in the UI, including toolbar editor, settings and startpage, will be updated as soon as another instance is added. This should suffice.

[luetage]

New version! First post has been updated. I renamed the mod and from now on it will load as a native command chain button. Please tell me whether you have any problems with implementing it.

[luetage]

I made a few more improvements to the mod. One addition is the display of the age (days since last new moon) in the title.

The second change is the ability to set the latitude in the mod, which tries to approximate how the moon might look in the sky at your location, by rotating the icon. This would be incredibly complicated to do exact, because we observe changes in the moon’s orientation while the earth is rotating (moon rise — moon set) and this is dependent on many other factors, but it gets us in the ballpark. Wikipedia provides a nice example graphic of moon phases by latitude for anyone who wants to check this out ☛ https://en.wikipedia.org/wiki/Lunar_phase#/media/File:Moon_phases_by_latitude.svg

Both the Javascript file and the SVG file for the command chain button have to be updated to the latest version (2024.6.2)