Moon Phase

luetage

@code3 No, it’s pointless because the highlighting can also happen by keyboard shortcut or by toggling the panel. It’s the reason the additional mutation observer is in this mod. The issue already has a solution.

code3

@luetage So add a mutation observer to the clock?

code3

@luetage Perhaps the clock mod must be rewritten, based off of the original.

luetage

@code3 It already has been rewritten, it shows moon phases now. Welcome to the topic ^^

code3

@luetage Yes, I know, but I do want an icon that stands for history. I guess the moon kind of does, or maybe I will use the normal icon. I wasn’t asking you to rewrite it, I know you have this now.

luetage

@code3 Well… historically it can be argued time has far longer been kept by watching the stars, the moon and the motions of the planets through the night sky. But alas, it’s a matter of taste. I don’t think it’s a problem recognizing the icon among the others though.

code3

@luetage Is this broken for you in latest snapshot?

luetage

@code3 No, works. You can try the original code for testing.

valiowk

Hm, this is broken for me in the latest stable 3.8.2259.37?

luetage

@valiowk Have you moved the javascript file into the application after update? Dumb question. Check the devtools console for UI and find out whether there are any errors that show your custom javascript file and an according line. Also test the mod on its own without any other mods to make sure it’s not the setup, but that’s unlikely when it worked before.

valiowk

@luetage Triple-checked, the mods are where they are supposed to be (I copied them together with all my other mods and all the other mods are working). Checked devtools console, not showing any errors. Also tested with just this mod alone, still doesn't work... It's just showing a blank where the moon is supposed to show up.

luetage

@valiowk The blank shows because the original clock icon is being hidden with CSS to ensure the icon doesn’t blink when the moon display is loaded. You can comment out the according line in the CSS file. I will take a look at it when Snapshot switches to 3.9, currently stable is ahead of snapshot.

luetage

Updated code adding support for people who live in the upside down (southern hemisphere). Uncomment the transform lines in the CSS file to activate.

luetage

@valiowk So, we have changed to 3.9 some time ago and the mod still works for me. I don’t know what’s wrong on your side. Maybe you got some special setting preventing the mod from running somehow, but I couldn’t imagine what it might be.

valiowk

@luetage Is there any additional code I could add to get some console output so that you might be able to help me debug what's going on? Sorry to bother you about it; it's just that I really like the idea of the mod and would really like to be able to run it.

luetage

@valiowk Simply set a bunch of console logs in different parts of the code, as explained in https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools. Then open the console and see what triggers and what doesn’t. There should be errors in the console anyway, something has to go wrong since it doesn’t show up. These errors will show the file and line they are happening on, for instance custom.js, should this be the name of your custom javascript file. Here the code with added console logs, check whether you see anything:

// History Moon
// https://forum.vivaldi.net/topic/58821/project-history-moon/
// Displays the current moon phase, instead of the history clock icon, in the panel.
// Depends on the installation of additional CSS code (history-moon.css).
// Moon phase calculation adapted from https://minkukel.com/en/various/calculating-moon-phase/

{
    let moon = {
        phases: [['New', 0, 1], ['Waxing Crescent', 1, 6.38264692644], ['First Quarter', 6.38264692644, 8.38264692644], ['Waxing Gibbous', 8.38264692644, 13.76529385288], ['Full', 13.76529385288, 15.76529385288], ['Waning Gibbous', 15.76529385288, 21.14794077932], ['Last Quarter', 21.14794077932, 23.14794077932], ['Waning Crescent', 23.14794077932, 28.53058770576], ['', 28.53058770576, 29.53058770576]],
        phase: () => {
            const lunarcycle = 29.53058770576;
            const lunartime = lunarcycle * 86400;
            const unixtime = Math.round(Date.now()/1000);
            const newmoon = 947182440;
            const diff = unixtime - newmoon;
            const mod = diff % lunartime;
            const frac = mod / lunartime;
            const age = frac * lunarcycle;
            for (let i = 0; i < moon.phases.length; i++) {
                if (age >= moon.phases[i][1] && age <= moon.phases[i][2]) {
                    if (i === 8) i = 0;
                    return {phase: i, name: moon.phases[i][0], progress: Math.trunc(frac * 100)};
                }
            }
        }
    }

    let historymoon = phase => {
        const hbtn = document.querySelector('#switch button.history span');
        hbtn.innerHTML = `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 216.2 216.2" class="history-moon"><path class="history-moon-${phase}" d="" fill-rule="evenodd"></path></svg>`;
	console.log('add button');
    }

    let moonwatch = (mutations, phase) => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'class') historymoon(phase);
        })
    }

    let appendChild = Element.prototype.appendChild;
    Element.prototype.appendChild = function () {
        if (this.tagName === 'BUTTON') {
            setTimeout(function() {
                if (this.classList.contains('panelbtn') && this.classList.contains('history')) {
                    const lc = moon.phase();
		    console.log('trigger ' + lc.name);
                    historymoon(lc.phase);
                    this.title += `\n${lc.name} Moon ${lc.progress}%`;
                    const mw = mutations => moonwatch(mutations, lc.phase);
                    const watch = new MutationObserver(mw);
                    watch.observe(this, {attributes: true});
                }
            }.bind(this, arguments[0]));
        }
        return appendChild.apply(this, arguments);
    }
}

valiowk

@luetage Thanks. I didn't get either the add button or 'trigger ' + lc.name messages in the console. (I do see Injecting mod "user_mods/history-moon-console.js so I know it's supposed to be running.)

luetage

@valiowk Where do you see that? Are you running my mod through another mod? Please test it plain without any other mods installed according to the instructions provided in modding vivaldi.

valiowk

@luetage I'm using injectMods.js. Sure, will test it plain next.

valiowk

Issue resolved: it works plain, but not through injectMods.js. Not sure why that's the case as injectMods.js has always worked for any other mod I've used. Thanks for your help!