Moon Phase
-
Replying to my own topic, sad times ^^ Anyway, I cleaned up the code, but especially the svgs have improved. They look and behave like Vivaldi’s native icons now. The second path is transparent and shows the panel background, which has adjustable opacity since the latest release. The moon phase icon also became a little smaller to better harmonize with the other buttons. What this means is we could potentially run a background with a tiny moon at the right place, which would then shine through our icon o.O
-
Another update. I found a better and more accurate way to calculate and display the moon phases. Additionally the progress of the current lunar cycle will be shown as a percentage.
New script adapted from this excellent article ☛ https://minkukel.com/en/various/calculating-moon-phase/. The reference point for our calculation is the first new moon in 2000. There was no need to make the mod work for any point in the past. Should you find an issue, please let me know.
-
Why do you need to know the moon phases?
Are you, or have you ever been, a member of the witch and/or warlock councils?
-
@luetage This is a nice project, I may go back to the clock though. I installed your mods, and I wanted to ask you why did you hide the minimize button?
-
-
@Pathduck This mod could be also useful in case of lycantrophy :3
-
/* window buttons */ .window-buttongroup button.window-maximize, .window-buttongroup button.window-minimize { display: none; } .linux #tabs-container:not(.none).top { padding-right: 40px; }
This is in the GitHub repo, uimods.css
-
@code3 Yeah, uimod.css and uimod.js are my backup files, use them at your own risk, sometimes there are breaking changes in there. The reason I remove maximize and minimize buttons is I’m on Gnome desktop environment and by default hide these buttons in all native windows too. I use keyboard shortcuts to minimize and maximize.
-
@luetage Ok, oops. I will take your backup files out. Thanks!
-
@Pathduck said in Project History Moon:
Why do you need to know the moon phases?
@luetage lives near the ocean coast and high and low tides are caused by the Moon.@luetage is surfer!
-
@code3 The code is fine most of the time, after all it’s a backup, not a working version. But it makes more sense to take the mods you want and build your own version. The javascript backup file can help you with that, since it shows how to combine mods which share the prototype appendchild approach.
-
@luetage Yes, it didn’t break anything. I discovered an excellent project from @lonm to help with combining the files and adding them to Vivaldi; it also supports custom colors and page actions. I have been building the config.Jason with various mods - history clock, themes import export, auto save sessions, and some css styles. Thank you for sharing your mods! I hope to share some soon, I am working on a floating tab bar right now, but I am still a beginner at this.
-
@Stardust said in Project History Moon:
@Pathduck said in Project History Moon:
Why do you need to know the moon phases?
@luetage lives near the ocean coast and high and low tides are caused by the Moon.@luetage is surfer!
Are you?
-
@code3 Does listening to Beach Boys count? Then yes, I am a surfer.
But seriously, I don’t like non‐functioning clock‐faces. The moon phase icon is an alternative, slower timekeeper and it complements the existing clock in the toolbar.
-
@code3 I am an internet surfer! You?
-
@luetage Alright, good job on your work with the moonphases, it looks like a lot of work. Personally, I prefer the History Clock Mod you made earlier because it seems like a better icon to represent "history." Maybe I will try putting the history moon in the status bar.
-
@luetage Here is my adaption: the moon is in the status bar, and replaces the normal icon for Break Mode. If anyone wants to use this, remember to use history-moon.css as well but delete the first part that hides the history button.
It seems to be working correctly, thanks to luetage's moon math!
@luetage Also, do you know if the history clock (not moon) is broken in snapshot?// Moon Status // https://forum.vivaldi.net/topic/58821/project-history-moon/ // Puts the moon in the status bar as the , with the correct phase. // Depends on the installation of additional CSS code (history-moon.css). Please remove the first rule of the history-moon.css file. It looks like this: /* #switch button.history svg:not(.history-moon) { display: none; } */ // Moon phase calculation adapted from https://minkukel.com/en/various/calculating-moon-phase/ // This is an adaption of the history clock mod from luetage. The adaption is from @code3, but nearly all of this code and all of the work is from @luetage. // document.querySelector('[title="Take a Break"]').classList.add(".warlock-clock") should be executed upon loading of the browser. function initMod(){ if(document.querySelector("#browser")){ // History moon document.querySelector('[title="Take a Break"]').classList.add("warlock-clock"); } else { setTimeout(initMod, 500); } } initMod(); { 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], ['end', 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 < 9; 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('[title="Take a Break"]') || document.querySelector(".warlock-clock"); 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>`; } 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 == document.querySelector('[title="Take a Break"]') || this == document.querySelector(".warlock-clock")) { const p = moon.phase(); historymoon(p.phase); this.title += "! Get Outside!" + '\n' + "Tonight's Moon is a " + p.name + " " + p.progress + '%'; const mw = (mutations) => moonwatch(mutations, p.phase); const resist = new MutationObserver(mw); resist.observe(this, {attributes: true}); } }.bind(this, arguments[0])); } return appendChild.apply(this, arguments); } }
-
@code3 Yes, it’s broken for two reasons: First of all the styles for the clock hands have been removed, which were an anchor point for the calculated angles. Secondly the redesign of the panel icons introduced the automatic replacement of the svg/s, whenever an icon is being selected or deselected.
-
@luetage said in Project History Moon:
First of all the styles for the clock hands have been removed, which were an anchor point for the calculated angles
Let me see if I can get the styles for the clock hands.
@luetage said in Project History Moon:
Secondly the redesign of the panel icons introduced the automatic replacement of the svg/s, whenever an icon is being selected or deselected.
Couldn’t this be solved by replacing the SVGs yourself on click?
-
@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.