windy-plugin-sun-position - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

compiler.js

@@ -143,10 +143,2 @@ #!/usr/bin/env node --no-warnings
 
-	// Load source code of a plugin
-	const tagSrc = await fs.readFile( join(srcDir,'plugin.html'),'utf8')
-
-	// Compile it via riot compiler
-	// See: https://github.com/riot/compiler
-	const [ compiled ] = riot.compile(tagSrc,riotOpts)
-	let { html, js, imports } = compiled
-
 	const options = Object.assign({},{
@@ -161,4 +153,15 @@ name,
 
+	// Load source code of a plugin
+	const tagSrc = await fs.readFile( join(srcDir,'plugin.html'),'utf8')
+
+	// Compile it via riot compiler
+	// See: https://github.com/riot/compiler
+	const [ compiled ] = riot.compile(tagSrc,riotOpts)
+	let { html, js, imports } = compiled
+
+
 	const internalModules = {}
 
+	js = `\tconst plugin_version = "${ version }";\n${ js }`
+
 	//
@@ -165,0 +168,0 @@ // Rewrite imports into W.require

dist/plugin.js

@@ -11,3 +11,3 @@ "use strict";
   "name": "windy-plugin-sun-position",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "author": "Jochen Jacobs",
@@ -27,5 +27,5 @@ "repository": {
 /* HTML */
-'<div class="mobile-header">Sun Details</div> <div class="plugin-content"> <div class="open-picker"> <h2>Picker not open</h2> Please open the weather picker to define position for sun-details. </div> <div class="sun-times" id="hide"> <div class="if-exists" id="nightTime"><span class="time-column"></span><span class="timeframe" id="nightColor">Nighttime</span></div> <div class="if-exists" id="nightEnd"><span class="time-column time-text" id="nightEnd">04:00</span><span class="time" id="astroColor">Astronomical Dawn</span></div> <div class="if-exists" id="astroTime"><span class="time-column"></span><span class="timeframe" id="astroColor">Astron. Twilight</span></div> <div class="if-exists" id="nauticalDawn"><span class="time-column time-text" id="nauticalDawn">04:00</span><span class="time" id="blueColor">Nautical Dawn</span></div> <div class="if-exists" id="blueTime"><span class="time-column"></span><span class="timeframe" id="blueColor">Blue Hour</span></div> <div class="if-exists" id="dawn"><span class="time-column time-text" id="dawn">04:30</span><span class="time" id="goldenColor">Civil Dawn</span></div> <div class="if-exists" id="goldenTime"><span class="time-column"></span><span class="timeframe" id="goldenColor">Golden Hour</span></div> <div class="if-exists" id="sunrise"><span class="time-column time-text" id="sunrise">05:00</span><span class="time-minor" id="goldenColor">Sunrise</span></div> <div class="if-exists" id="goldenHourEnd"><span class="time-column time-text" id="goldenHourEnd">05:30</span><span class="time" id="dayColor">&nbsp;</span></div> <div class="if-exists" id="dayTime"><span class="time-column"></span><span class="timeframe" id="dayColor">Daytime</span></div> <div class="if-exists" id="dayTime"><span class="time-column time-text" id="solarNoon">12:00</span><span class="time-minor" id="dayColor">Solar Noon</span></div> <div class="if-exists" id="solarNoonGolden"><span class="time-column time-text" id="solarNoon">12:00</span><span class="time-minor" id="goldenColor">Solar Noon</span></div> <div class="if-exists" id="goldenHour"><span class="time-column time-text" id="goldenHour">18:00</span><span class="time" id="goldenColor">&nbsp;</span></div> <div class="if-exists" id="goldenTime2"><span class="time-column"></span><span class="timeframe" id="goldenColor">Golden Hour</span></div> <div class="if-exists" id="sunset"><span class="time-column time-text" id="sunset">18:30</span><span class="time-minor" id="goldenColor">Sunset</span></div> <div class="if-exists" id="dusk"><span class="time-column time-text" id="dusk">19:00</span><span class="time" id="blueColor">Civil Dusk</span></div> <div class="if-exists" id="blueTime2"><span class="time-column"></span><span class="timeframe" id="blueColor">Blue Hour</span></div> <div class="if-exists" id="nauticalDusk"><span class="time-column time-text" id="nauticalDusk">19:30</span><span class="time" id="astroColor">Nautical Dusk</span></div> <div class="if-exists" id="astroTime2"><span class="time-column"></span><span class="timeframe" id="astroColor">Astron. Twilight</span></div> <div class="if-exists" id="night"><span class="time-column time-text" id="night">19:30</span><span class="time" id="nightColor">Astronomical Dusk</span></div> <div class="if-exists" id="nightTime2"><span class="time-column"></span><span class="timeframe" id="nightColor">Nighttime</span></div> <div class="current-time" id="current_time">12:25</div> <span class="current-pos">Azimuth</span> <span class="current-pos">Altitude</span><br> <span class="current-pos" id="azimuth">0</span> <span class="current-pos" id="altitude">0</span> <svg class="sun-path"> <path id="sun_path"></path> <path id="horizon" d="M 0 50 H 200"></path> <circle class="sun-circle" id="sun" cx="50" cy="50" r="4"></circle> </svg> </div> </div>',
+'<div class="mobile-header">Sun Details</div> <div class="plugin-content"> <div class="open-picker"> <h2>Picker not open</h2> Please open the weather picker to define position for sun-details. </div> <div class="sun-times" id="hide"> <div class="options"> <span class="image-checkbox" id="astroSun" title="Show sun details (astronomical)">&#x1f52d;</span>&nbsp; <span class="image-checkbox" id="photoSun" title="Show sun details (photography)">&#x1f4f7;</span>&nbsp; <span class="image-checkbox" id="moon" title="Show moon details">&#x263E;</span> </div> <div class="timeline"></div> <div class="current"> <div class="current-time" id="current_time">12:25</div> <svg class="sun-path"> <path id="sun_path"></path> <path id="moon_path"></path> <path id="horizon" d="M 0 50 H 200"></path> <circle class="path-circle" id="moon" cx="50" cy="50" r="4"></circle> <circle class="path-circle" id="sun" cx="50" cy="50" r="4"></circle> </svg> <div class="current-sun"> <span class="current-pos-title" id="sun">Sun</span><br> <span class="current-pos-label">Azimuth</span> <span class="current-pos" id="azimuth">0</span> <span class="current-pos-label">Altitude</span> <span class="current-pos" id="altitude">0</span> </div> <div class="current-moon"> <span class="current-pos-title" id="moon">Moon</span><br> <span class="current-pos-label">Azimuth</span> <span class="current-pos" id="azimuth-moon">0</span> <span class="current-pos-label">Altitude</span> <span class="current-pos" id="altitude-moon">0</span> <span class="current-pos-label">Phase</span> <span class="current-pos" id="phase-moon">full moon</span> <span class="current-pos-label">Illumination</span> <span class="current-pos" id="fraction-moon">100%</span> </div> </div> </div> <div class="footnote"> <a href="https://community.windy.com/topic/9017/sun-position-plugin">plugin page</a>&nbsp;&nbsp;&nbsp;<a href="https://www.npmjs.com/package/windy-plugin-sun-position">npm</a>&nbsp;&nbsp;&nbsp;<a href="https://github.com/jacobsjo/windy-plugin-sun-position">GitHub</a><br> windy-plugin-sun-position@<span class="plugin-version"></span><br> by Jochen Jacobs (@jacobsjo) <br> </div> </div>',
 /* CSS */
-'.onwindy-plugin-sun-position .left-border{left:270px}.onwindy-plugin-sun-position #search{display:none}#device-mobile .onwindy-plugin-sun-position .left-border{left:0}#device-mobile #bottom{z-index:2}.plugin-sun-position-mobile{position:absolute;top:250px;bottom:0px;width:100% !important}#device-mobile #windy-plugin-sun-position .plugin-content .sun-times{margin-bottom:100px}#device-mobile #windy-plugin-sun-position .closing-x{display:block;right:0px;top:-1em}#windy-plugin-sun-position{width:270px}#windy-plugin-sun-position .plugin-content{padding:15px 15px 15px 5px;font-size:14px;line-height:1.6;background-color:#404040;color:white}#windy-plugin-sun-position .plugin-content h2{color:white}#windy-plugin-sun-position .plugin-content .open-picker#hide,#windy-plugin-sun-position .plugin-content .sun-times#hide{display:none}#windy-plugin-sun-position .plugin-content .sun-times{width:250px;margin-top:10px;margin-left:auto;margin-right:auto}#windy-plugin-sun-position .plugin-content .sun-times .if-exists.hide{display:none}#windy-plugin-sun-position .plugin-content .sun-times span{position:relative;left:20px;display:inline-block;margin-bottom:0;padding-bottom:.5em}#windy-plugin-sun-position .plugin-content .sun-times span.time-column{width:70px}#windy-plugin-sun-position .plugin-content .sun-times span.time-text{cursor:pointer}#windy-plugin-sun-position .plugin-content .sun-times .time-minor{font-size:11px}#windy-plugin-sun-position .plugin-content .sun-times .time::after,#windy-plugin-sun-position .plugin-content .sun-times .time-minor::after{display:block;position:absolute;left:-23px;top:0px;background-color:gray;width:20px;height:20px;border-radius:10px;content:\' \'}#windy-plugin-sun-position .plugin-content .sun-times .time-minor::after{width:15px;height:15px;border-radius:7px;left:-21px;top:4px}#windy-plugin-sun-position .plugin-content .sun-times .time::before,#windy-plugin-sun-position .plugin-content .sun-times .time-minor::before,#windy-plugin-sun-position .plugin-content .sun-times .timeframe::before{content:"";position:absolute;left:-15px;top:0px;border-left:4px solid;height:130%;width:3px}#windy-plugin-sun-position .plugin-content .sun-times #nightColor{color:black}#windy-plugin-sun-position .plugin-content .sun-times #astroColor{color:#121654}#windy-plugin-sun-position .plugin-content .sun-times #blueColor{color:blue}#windy-plugin-sun-position .plugin-content .sun-times #goldenColor{color:orange}#windy-plugin-sun-position .plugin-content .sun-times #dayColor{color:yellow}#windy-plugin-sun-position .plugin-content .sun-times #nightColor::after{background-color:black}#windy-plugin-sun-position .plugin-content .sun-times #astroColor::after{background-color:#121654}#windy-plugin-sun-position .plugin-content .sun-times #blueColor::after{background-color:blue}#windy-plugin-sun-position .plugin-content .sun-times #goldenColor::after{background-color:orange}#windy-plugin-sun-position .plugin-content .sun-times #dayColor::after{background-color:yellow}#windy-plugin-sun-position .plugin-content .sun-times #nightColor::before{border-left-color:black}#windy-plugin-sun-position .plugin-content .sun-times #astroColor::before{border-left-color:#121654}#windy-plugin-sun-position .plugin-content .sun-times #blueColor::before{border-left-color:blue}#windy-plugin-sun-position .plugin-content .sun-times #goldenColor::before{border-left-color:orange}#windy-plugin-sun-position .plugin-content .sun-times #dayColor::before{border-left-color:yellow}#windy-plugin-sun-position .plugin-content .sun-times .current-time{font-size:25pt;text-align:center}#windy-plugin-sun-position .plugin-content .sun-times .current-pos{display:inline-block;width:45%;text-align:center}#windy-plugin-sun-position .plugin-content .sun-times .sun-path{width:200px;height:100px;margin-left:25px}#windy-plugin-sun-position .plugin-content .sun-times .sun-path path{fill:none;stroke:#606060;stroke-width:2px}#windy-plugin-sun-position .plugin-content .sun-times .sun-circle{fill:yellow}.windy-plugin-sun-position.sun-position-dial{position:absolute;left:-99.5px;top:25.5px;width:199px;height:199px;pointer-events:none}.windy-plugin-sun-position.sun-position-dial .dial-line-sun{stroke:rgba(68,65,65,0.84);stroke-width:3}.windy-plugin-sun-position.sun-position-dial .dial-line-sunrise,.windy-plugin-sun-position.sun-position-dial .dial-line-sunset{stroke:rgba(68,65,65,0.84);stroke-dasharray:5;stroke-width:2;pointer-events:auto}.windy-plugin-sun-position.sun-position-dial #hover.dial-line-sunrise,.windy-plugin-sun-position.sun-position-dial #hover.dial-line-sunset{stroke-width:4}#device-mobile .windy-plugin-sun-position.sun-position-dial{top:.5px;left:-69.5px;width:139px;height:139px}#device-mobile .windy-plugin-sun-position.sun-position-dial .dial-line-sun{stroke-width:5}#device-mobile .windy-plugin-sun-position.sun-position-dial .dial-line-sunrise,#device-mobile .windy-plugin-sun-position.sun-position-dial .dial-line-sunset{stroke-width:4}',
+'.onwindy-plugin-sun-position .left-border{left:270px}.onwindy-plugin-sun-position #search{display:none}#device-mobile .onwindy-plugin-sun-position .left-border{left:0}#device-mobile #bottom{z-index:2}.plugin-sun-position-mobile{position:absolute;top:250px;bottom:0px;width:100% !important}#device-mobile #windy-plugin-sun-position .plugin-content .footnote{margin-bottom:90px}#device-mobile #windy-plugin-sun-position .closing-x{display:block;right:0px;top:-1em}#device-mobile #windy-plugin-sun-position .open-picker,#device-mobile #windy-plugin-sun-position .sun-times{min-height:calc(100% - 120pt)}#windy-plugin-sun-position{width:270px}#windy-plugin-sun-position .plugin-content{padding:15px 15px 15px 5px;font-size:14px;line-height:1.6;background-color:#404040;color:white}#windy-plugin-sun-position .plugin-content h2{color:white}#windy-plugin-sun-position .plugin-content .open-picker,#windy-plugin-sun-position .plugin-content .sun-times{min-height:calc(100% - 50pt)}#windy-plugin-sun-position .plugin-content .open-picker#hide,#windy-plugin-sun-position .plugin-content .sun-times#hide{display:none}#windy-plugin-sun-position .plugin-content .sun-times{width:250px;margin-top:10px;margin-left:auto;margin-right:auto}#windy-plugin-sun-position .plugin-content .sun-times .timeline-entry{position:relative}#windy-plugin-sun-position .plugin-content .sun-times .timeline-entry span{left:20px;display:inline-block;margin-bottom:0;padding-bottom:.5em}#windy-plugin-sun-position .plugin-content .sun-times .timeline-entry.timestamp{cursor:pointer}#windy-plugin-sun-position .plugin-content .sun-times .timeline-entry.timeframe{cursor:default}#windy-plugin-sun-position .plugin-content .sun-times .timeline-entry.timestamp::after{display:block;position:absolute;left:63px;top:0px;width:20px;height:20px;border-radius:10px;content:\' \'}#windy-plugin-sun-position .plugin-content .sun-times .timeline-entry.timestamp.minor::after{left:65px;top:2px;width:16px;height:16px;border-radius:8px}#windy-plugin-sun-position .plugin-content .sun-times .timeline-entry::before{content:"";position:absolute;left:71px;top:0px;border-left:4px solid;height:130%;width:3px}#windy-plugin-sun-position .plugin-content .sun-times .time-column{width:90px;text-align:right;padding-right:35px;color:white}#windy-plugin-sun-position .plugin-content .sun-times .nightColor{color:black}#windy-plugin-sun-position .plugin-content .sun-times .astroColor{color:#000030}#windy-plugin-sun-position .plugin-content .sun-times .nauticalColor{color:#121260}#windy-plugin-sun-position .plugin-content .sun-times .blueColor{color:blue}#windy-plugin-sun-position .plugin-content .sun-times .goldenColor{color:orange}#windy-plugin-sun-position .plugin-content .sun-times .dayColor{color:yellow}#windy-plugin-sun-position .plugin-content .sun-times .nightColor::after{background-color:black}#windy-plugin-sun-position .plugin-content .sun-times .astroColor::after{background-color:#000030}#windy-plugin-sun-position .plugin-content .sun-times .nauticalColor::after{background-color:#121260}#windy-plugin-sun-position .plugin-content .sun-times .blueColor::after{background-color:blue}#windy-plugin-sun-position .plugin-content .sun-times .goldenColor::after{background-color:orange}#windy-plugin-sun-position .plugin-content .sun-times .dayColor::after{background-color:yellow}#windy-plugin-sun-position .plugin-content .sun-times .nightColor::before{border-left-color:black}#windy-plugin-sun-position .plugin-content .sun-times .astroColor::before{border-left-color:#000030}#windy-plugin-sun-position .plugin-content .sun-times .nauticalColor::before{border-left-color:#121260}#windy-plugin-sun-position .plugin-content .sun-times .blueColor::before{border-left-color:blue}#windy-plugin-sun-position .plugin-content .sun-times .goldenColor::before{border-left-color:orange}#windy-plugin-sun-position .plugin-content .sun-times .dayColor::before{border-left-color:yellow}#windy-plugin-sun-position .plugin-content .sun-times .moon{color:gray}#windy-plugin-sun-position .plugin-content .sun-times .moon::after{background-color:gray}#windy-plugin-sun-position .plugin-content .sun-times .current-time{font-size:25pt;text-align:center}#windy-plugin-sun-position .plugin-content .sun-times .current-sun,#windy-plugin-sun-position .plugin-content .sun-times .current-moon{padding-top:10pt;padding-bottom:10pt;border-radius:10pt;margin-top:5pt;margin-bottom:5pt;background-color:#505050}#windy-plugin-sun-position .plugin-content .sun-times .current-sun.hide,#windy-plugin-sun-position .plugin-content .sun-times .current-moon.hide{display:none}#windy-plugin-sun-position .plugin-content .sun-times .current-pos-title{display:inline-block;margin-left:60pt;padding-bottom:10pt}#windy-plugin-sun-position .plugin-content .sun-times .current-pos-title::before{content:" ";display:inline-block;width:15pt;height:15pt;margin-bottom:-4pt;border-radius:7pt;margin-right:10pt}#windy-plugin-sun-position .plugin-content .sun-times .current-pos-title#sun::before{background-color:yellow}#windy-plugin-sun-position .plugin-content .sun-times .current-pos-title#moon::before{background-color:gray}#windy-plugin-sun-position .plugin-content .sun-times .current-pos{display:inline-block;width:60%;text-align:left;padding-left:10pt}#windy-plugin-sun-position .plugin-content .sun-times .current-pos-label{display:inline-block;width:35%;text-align:right}#windy-plugin-sun-position .plugin-content .sun-times .sun-path{width:200px;height:100px;margin-left:25px}#windy-plugin-sun-position .plugin-content .sun-times .sun-path path{fill:none;stroke:#606060;stroke-width:2px}#windy-plugin-sun-position .plugin-content .sun-times .sun-path path#sun_path{stroke-dasharray:10 2 1 2}#windy-plugin-sun-position .plugin-content .sun-times .sun-path path#moon_path{stroke-dasharray:0 1 2 2 3 2 3 1}#windy-plugin-sun-position .plugin-content .sun-times .path-circle#sun{fill:yellow}#windy-plugin-sun-position .plugin-content .sun-times .path-circle#moon{fill:gray}#windy-plugin-sun-position .plugin-content .options{text-align:center;margin-bottom:20pt}#windy-plugin-sun-position .plugin-content .options .image-checkbox{font-size:22pt;color:#404040;text-align:center;display:inline-block;width:30pt;height:30pt;border-radius:15pt;font-family:"Symbola";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}#windy-plugin-sun-position .plugin-content .options .image-checkbox#photoSun,#windy-plugin-sun-position .plugin-content .options .image-checkbox#astroSun{background:#C0C000}#windy-plugin-sun-position .plugin-content .options .image-checkbox#moon{background:#C0C0C0}#windy-plugin-sun-position .plugin-content .options .image-checkbox.off{background:#505050 !important}#windy-plugin-sun-position .plugin-content .footnote{color:gray;font-size:8pt;width:150pt;margin-left:auto;margin-right:auto}#windy-plugin-sun-position .plugin-content .footnote a{text-decoration:underline}.windy-plugin-sun-position.sun-position-dial{position:absolute;left:-99.5px;top:25.5px;width:199px;height:199px;pointer-events:none}.windy-plugin-sun-position.sun-position-dial .dial-line-sun{stroke:rgba(68,65,65,0.84);stroke-width:3}.windy-plugin-sun-position.sun-position-dial .dial-line-moon{stroke:rgba(68,65,65,0.84);stroke-width:3}.windy-plugin-sun-position.sun-position-dial .dial-circle-sun{fill:yellow}.windy-plugin-sun-position.sun-position-dial .dial-circle-moon{fill:gray}.windy-plugin-sun-position.sun-position-dial .dial-line-sunrise,.windy-plugin-sun-position.sun-position-dial .dial-line-sunset,.windy-plugin-sun-position.sun-position-dial .dial-line-moonrise,.windy-plugin-sun-position.sun-position-dial .dial-line-moonset{stroke:rgba(68,65,65,0.84);stroke-width:2;stroke-dasharray:10 2 1 2;pointer-events:auto}.windy-plugin-sun-position.sun-position-dial .dial-line-moonrise,.windy-plugin-sun-position.sun-position-dial .dial-line-moonset{stroke-dasharray:0 1 2 2 3 2 3 1}.windy-plugin-sun-position.sun-position-dial #hover.dial-line-sunrise,.windy-plugin-sun-position.sun-position-dial #hover.dial-line-sunset,.windy-plugin-sun-position.sun-position-dial #hover.dial-line-moonrise,.windy-plugin-sun-position.sun-position-dial #hover.dial-line-moonset{stroke-width:4}#device-mobile .windy-plugin-sun-position.sun-position-dial{top:.5px;left:-69.5px;width:139px;height:139px}#device-mobile .windy-plugin-sun-position.sun-position-dial .dial-line-sun,#device-mobile .windy-plugin-sun-position.sun-position-dial .dial-line-moon{stroke-width:5}#device-mobile .windy-plugin-sun-position.sun-position-dial .dial-line-sunrise,#device-mobile .windy-plugin-sun-position.sun-position-dial .dial-line-sunset,#device-mobile .windy-plugin-sun-position.sun-position-dial .dial-line-moonrise,#device-mobile .windy-plugin-sun-position.sun-position-dial .dial-line-moonset{stroke-width:4}',
 /* Constructor */
@@ -43,2 +43,8 @@ function () {
 
+  var plugin_version = "0.3.0";
+
+  var mod = function mod(x, n) {
+    return (x % n + n) % n;
+  };
+
   var options = {
@@ -50,3 +56,244 @@ key: 'nMvpXdWHi4CcsJ6N0ewIYEcU0VE9ONMX',
   var lineLength = 80;
+  var sunTimesConfigPhotography = {
+    "dawn": {
+      starts: "Blue Hour",
+      new_class: "blueColor"
+    },
+    "blueHourEnd": {
+      starts: "Golden Hour",
+      new_class: "goldenColor"
+    },
+    "sunrise": {
+      name: "Sunrise",
+      "class": "minor"
+    },
+    "goldenHourEnd": {
+      starts: "Daytime",
+      new_class: "dayColor"
+    },
+    "solarNoon": {
+      name: "Solar Noon",
+      "class": "minor"
+    },
+    "goldenHour": {
+      starts: "Golden Hour",
+      new_class: "goldenColor"
+    },
+    "sunset": {
+      name: "Sunset",
+      "class": "minor"
+    },
+    "blueHour": {
+      starts: "Blue Hour",
+      new_class: "blueColor"
+    },
+    "dusk": {
+      starts: "Nighttime",
+      new_class: "nightColor"
+    },
+    "first": [{
+      altitude: -90,
+      starts: "Nighttime",
+      new_class: "nightColor"
+    }, {
+      altitude: -6,
+      starts: "Blue Hour",
+      new_class: "blueColor"
+    }, {
+      altitude: -4,
+      starts: "Golden Hour",
+      new_class: "goldenColor"
+    }, {
+      altitude: 6,
+      starts: "Daytime",
+      new_class: "dayColor"
+    }]
+  };
+  var sunTimesConfigAstonomical = {
+    "nightEnd": {
+      name: "Astronomical Dawn",
+      starts: "Astronomical Twilight",
+      new_class: "astroColor"
+    },
+    "nauticalDawn": {
+      name: "Nautical Dawn",
+      starts: "Nautical Twilight",
+      new_class: "nauticalColor"
+    },
+    "dawn": {
+      name: "Civil Dawn",
+      starts: "Civil Twilight",
+      new_class: "blueColor"
+    },
+    "sunrise": {
+      name: "Sunrise",
+      starts: "Daytime",
+      new_class: "dayColor"
+    },
+    "solarNoon": {
+      name: "Solar Noon",
+      "class": "minor"
+    },
+    "sunset": {
+      name: "Sunset",
+      starts: "Civil Twilight",
+      new_class: "blueColor"
+    },
+    "dusk": {
+      name: "Civil Dusk",
+      starts: "Nautical Twilight",
+      new_class: "nauticalColor"
+    },
+    "nauticalDusk": {
+      name: "Nautical Dusk",
+      starts: "Astronomical Twilight",
+      new_class: "astroColor"
+    },
+    "night": {
+      name: "Astronomical Dusk",
+      starts: "Nighttime",
+      new_class: "nightColor"
+    },
+    "first": [{
+      altitude: -90,
+      starts: "Nighttime",
+      new_class: "nightColor"
+    }, {
+      altitude: -18,
+      starts: "Astronomical Twilight",
+      new_class: "astroColor"
+    }, {
+      altitude: -12,
+      starts: "Nautical Twilight",
+      new_class: "nauticalColor"
+    }, {
+      altitude: -6,
+      starts: "Civil Twilight",
+      new_class: "blueColor"
+    }, {
+      altitude: -0.833,
+      starts: "Daytime",
+      new_class: "dayColor"
+    }]
+  };
+  var sunTimesConfigCombinded = {
+    "nightEnd": {
+      name: "Astronomical Dawn",
+      starts: "Astronomical Twilight",
+      new_class: "astroColor"
+    },
+    "nauticalDawn": {
+      name: "Nautical Dawn",
+      starts: "Nautical Twilight",
+      new_class: "nauticalColor"
+    },
+    "dawn": {
+      name: "Civil Dawn",
+      starts: "Blue Hour",
+      new_class: "blueColor"
+    },
+    "blueHourEnd": {
+      starts: "Golden Hour",
+      new_class: "goldenColor"
+    },
+    "sunrise": {
+      name: "Sunrise",
+      "class": "minor"
+    },
+    "goldenHourEnd": {
+      starts: "Daytime",
+      new_class: "dayColor"
+    },
+    "solarNoon": {
+      name: "Solar Noon",
+      "class": "minor"
+    },
+    "goldenHour": {
+      starts: "Golden Hour",
+      new_class: "goldenColor"
+    },
+    "sunset": {
+      name: "Sunset",
+      "class": "minor"
+    },
+    "blueHour": {
+      starts: "Blue Hour",
+      new_class: "blueColor"
+    },
+    "dusk": {
+      name: "Civil Dusk",
+      starts: "Nautical Twilight",
+      new_class: "nauticalColor"
+    },
+    "nauticalDusk": {
+      name: "Nautical Dusk",
+      starts: "Astronomical Twilight",
+      new_class: "astroColor"
+    },
+    "night": {
+      name: "Astronomical Dusk",
+      starts: "Nighttime",
+      new_class: "nightColor"
+    },
+    "first": [{
+      altitude: -90,
+      starts: "Nighttime",
+      new_class: "nightColor"
+    }, {
+      altitude: -18,
+      starts: "Astronomical Twilight",
+      new_class: "astroColor"
+    }, {
+      altitude: -12,
+      starts: "Nautical Twilight",
+      new_class: "nauticalColor"
+    }, {
+      altitude: -6,
+      starts: "Blue Hour",
+      new_class: "blueColor"
+    }, {
+      altitude: -4,
+      starts: "Golden Hour",
+      new_class: "goldenColor"
+    }, {
+      altitude: 6,
+      starts: "Daytime",
+      new_class: "dayColor"
+    }]
+  };
+  var sunTimesConfigNone = {
+    "first": [{
+      altitude: -90,
+      starts: " ",
+      new_class: "nightColor"
+    }]
+  };
+  var moonTimesConfig = {
+    "rise": {
+      name: "Moonrise",
+      "class": "moon"
+    },
+    "set": {
+      name: "Moonset",
+      "class": "moon"
+    }
+  };
+  var quarterOffet = 0.01;
+  var moonPhases = [];
+  moonPhases[0] = "New Moon";
+  moonPhases[quarterOffet] = "Waxing Crescent";
+  moonPhases[0.25 - quarterOffet] = "First Quarter", moonPhases[0.25 + quarterOffet] = "Waxing Gibbous", moonPhases[0.5 - quarterOffet] = "Full Moon", moonPhases[0.5 + quarterOffet] = "Waning Gibbous", moonPhases[0.75 - quarterOffet] = "Last Quarter", moonPhases[0.75 + quarterOffet] = "Waning Crescent", moonPhases[1 - quarterOffet] = "New Moon";
   var isOpen = false;
+  var plugin_options = {
+    "photoSun": true,
+    "astroSun": true,
+    "moon": true
+  };
+  SunCalc.addTime(-4, "blueHourEnd", "blueHour");
+  d3.selectAll("#windy-plugin-sun-position .options .image-checkbox").on("click", function () {
+    var checkbox = d3.select(this);
+    plugin_options[checkbox.attr("id")] = checkbox.classed("off");
+    checkbox.classed("off", !checkbox.classed("off"));
+    redraw();
+  });
 
@@ -63,2 +310,3 @@ this.onopen = function () {
     ;
+    d3.select(".plugin-content .footnote .plugin-version").html(plugin_version);
   };
@@ -80,2 +328,7 @@
   var sunsetLine;
+  var sunCircle;
+  var moonLine;
+  var moonriseLine;
+  var moonsetLine;
+  var moonCircle;
   var timeOffset = 0;
@@ -94,3 +347,12 @@ var useUTC = false;
     });
+    moonriseLine = svg.append("line").attr("class", "dial-line dial-line-moonrise").attr("x1", 100).attr("y1", 100).attr("x2", 100).attr("y2", 100).on("click", function (d) {
+      setTime("moonrise");
+    });
+    moonsetLine = svg.append("line").attr("class", "dial-line dial-line-moonset").attr("x1", 100).attr("y1", 100).attr("x2", 100).attr("y2", 100).on("click", function (d) {
+      setTime("moonset");
+    });
+    moonLine = svg.append("line").attr("class", "dial-line dial-line-moon").attr("x1", 100).attr("y1", 100).attr("x2", 100).attr("y2", 100);
+    moonCircle = svg.append("circle").attr("class", "dial-circle dial-circle-moon").attr("r", 4).attr("cx", 100).attr("cy", 100);
     sunLine = svg.append("line").attr("class", "dial-line dial-line-sun").attr("x1", 100).attr("y1", 100).attr("x2", 100).attr("y2", 100);
+    sunCircle = svg.append("circle").attr("class", "dial-circle dial-circle-sun").attr("r", 4).attr("cx", 100).attr("cy", 100);
     d3.selectAll(".dial-line").on("mouseover", function (d) {
@@ -133,2 +395,5 @@ d3.select(this).attr("id", "hover");
 
+  var times;
+  var moonTimes;
+
   var redraw = function redraw() {
@@ -146,6 +411,14 @@ if (store.get('zuluMode')) {
     var time = store.get('timestamp');
-    var times = SunCalc.getTimes(time, lat, lon);
+    times = SunCalc.getTimes(time, lat, lon);
     var sunPos = SunCalc.getPosition(time, lat, lon);
     var sunrisePos = SunCalc.getPosition(times.sunrise, lat, lon);
     var sunsetPos = SunCalc.getPosition(times.sunset, lat, lon);
+    var moonTimes1 = SunCalc.getMoonTimes(times.nadir.getTime(), lat, lon);
+    var moonTimes2 = SunCalc.getMoonTimes(times.nadir.getTime() + 24 * 60 * 60 * 1000, lat, lon);
+    moonTimes = {};
+    moonTimes.rise = moonTimes1.rise >= times.nadir.getTime() ? moonTimes1.rise : moonTimes2.rise <= times.nadir.getTime() + 24 * 60 * 60 * 1000 ? moonTimes2.rise : NaN;
+    moonTimes.set = moonTimes1.set >= times.nadir.getTime() ? moonTimes1.set : moonTimes2.set <= times.nadir.getTime() + 24 * 60 * 60 * 1000 ? moonTimes2.set : NaN;
+    var moonPos = SunCalc.getMoonPosition(time, lat, lon);
+    var moonrisePos = SunCalc.getMoonPosition(moonTimes.rise, lat, lon);
+    var moonsetPos = SunCalc.getMoonPosition(moonTimes.set, lat, lon);
     var sunLineLength;
@@ -165,47 +438,153 @@ var sunLineOpacity;
 
-    sunLine.attr("x2", 100 - Math.sin(sunPos.azimuth) * sunLineLength).attr("y2", 100 + Math.cos(sunPos.azimuth) * sunLineLength).attr("stroke-opacity", sunLineOpacity);
+    if (plugin_options.astroSun || plugin_options.photoSun) {
+      sunLine.attr("x2", 100 - Math.sin(sunPos.azimuth) * sunLineLength).attr("y2", 100 + Math.cos(sunPos.azimuth) * sunLineLength).attr("stroke-opacity", sunLineOpacity);
+      sunCircle.attr("cx", 100 - Math.sin(sunPos.azimuth) * sunLineLength / 2).attr("cy", 100 + Math.cos(sunPos.azimuth) * sunLineLength / 2).attr("fill-opacity", sunLineOpacity);
 
-    if (isNaN(sunrisePos.azimuth)) {
+      if (isNaN(sunrisePos.azimuth)) {
+        sunriseLine.attr("x2", 100).attr("y2", 100);
+        sunsetLine.attr("x2", 100).attr("y2", 100);
+      } else {
+        sunriseLine.attr("x2", 100 - Math.sin(sunrisePos.azimuth) * lineLength).attr("y2", 100 + Math.cos(sunrisePos.azimuth) * lineLength);
+        sunsetLine.attr("x2", 100 - Math.sin(sunsetPos.azimuth) * lineLength).attr("y2", 100 + Math.cos(sunsetPos.azimuth) * lineLength);
+      }
+    } else {
+      sunLine.attr("x2", 100).attr("y2", 100);
       sunriseLine.attr("x2", 100).attr("y2", 100);
+      sunsetLine.attr("x2", 100).attr("y2", 100);
+      sunCircle.attr("fill-opacity", 0);
+    }
+
+    var moonLineLength;
+    var moonLineOpacity;
+
+    if (moonPos.altitude > 0) {
+      moonLineLength = Math.cos(moonPos.altitude) * lineLength;
+      moonLineOpacity = 1;
+    } else if (moonPos.altitude > -0.02) {
+      moonLineLength = lineLength;
+      moonLineOpacity = 1 + 50.0 * moonPos.altitude;
     } else {
-      sunriseLine.attr("x2", 100 - Math.sin(sunrisePos.azimuth) * lineLength).attr("y2", 100 + Math.cos(sunrisePos.azimuth) * lineLength);
+      moonLineLength = lineLength;
+      moonLineOpacity = 0;
     }
 
-    if (isNaN(sunsetPos.azimuth)) {
-      sunsetLine.attr("x2", 100).attr("y2", 100);
+    if (plugin_options.moon) {
+      moonLine.attr("x2", 100 - Math.sin(moonPos.azimuth) * moonLineLength).attr("y2", 100 + Math.cos(moonPos.azimuth) * moonLineLength).attr("stroke-opacity", moonLineOpacity);
+      moonCircle.attr("cx", 100 - Math.sin(moonPos.azimuth) * moonLineLength / 2).attr("cy", 100 + Math.cos(moonPos.azimuth) * moonLineLength / 2).attr("fill-opacity", moonLineOpacity);
+
+      if (isNaN(moonrisePos.azimuth)) {
+        moonriseLine.attr("x2", 100).attr("y2", 100);
+      } else {
+        moonriseLine.attr("x2", 100 - Math.sin(moonrisePos.azimuth) * lineLength).attr("y2", 100 + Math.cos(moonrisePos.azimuth) * lineLength);
+      }
+
+      if (isNaN(moonsetPos.azimuth)) {
+        moonsetLine.attr("x2", 100).attr("y2", 100);
+      } else {
+        moonsetLine.attr("x2", 100 - Math.sin(moonsetPos.azimuth) * lineLength).attr("y2", 100 + Math.cos(moonsetPos.azimuth) * lineLength);
+      }
     } else {
-      sunsetLine.attr("x2", 100 - Math.sin(sunsetPos.azimuth) * lineLength).attr("y2", 100 + Math.cos(sunsetPos.azimuth) * lineLength);
+      moonLine.attr("x2", 100).attr("y2", 100);
+      moonriseLine.attr("x2", 100).attr("y2", 100);
+      moonsetLine.attr("x2", 100).attr("y2", 100);
+      moonCircle.attr("fill-opacity", 0);
     }
 
+    var sunTimesConfig = plugin_options.astroSun ? plugin_options.photoSun ? sunTimesConfigCombinded : sunTimesConfigAstonomical : plugin_options.photoSun ? sunTimesConfigPhotography : sunTimesConfigNone;
     var minAltitude = SunCalc.getPosition(times.nadir, lat, lon).altitude * 180 / Math.PI;
     var maxAltitude = SunCalc.getPosition(times.solarNoon, lat, lon).altitude * 180 / Math.PI;
-    times['nightTime'] = minAltitude < -17.9;
-    times['astroTime'] = minAltitude < -11.9 && maxAltitude >= -17.9;
-    times['blueTime'] = minAltitude < -5.9 && maxAltitude >= -11.9;
-    times['goldenTime'] = minAltitude < 6.1 && maxAltitude >= -5.9;
-    times['dayTime'] = maxAltitude >= 6.1;
-    times['solarNoonGolden'] = maxAltitude >= -0.7 && maxAltitude < 6.1;
-    times['nightTime2'] = times['nightTime'] && times['astroTime'];
-    times['astroTime2'] = times['astroTime'] && times['blueTime'];
-    times['blueTime2'] = times['blueTime'] && times['goldenTime'];
-    times['goldenTime2'] = times['goldenTime'] && times['dayTime'];
-    Array.prototype.forEach.call(document.getElementsByClassName('time-text'), function (t) {
-      t.innerHTML = time_format(times[t.id]);
+    var timeline = [];
+    var firstConfig;
 
-      t.onclick = function () {
-        return setTime(t.id);
-      };
+    for (i in sunTimesConfig.first) {
+      if (sunTimesConfig.first[i].altitude > minAltitude) {
+        break;
+      }
+
+      firstConfig = sunTimesConfig.first[i];
+    }
+
+    timeline.push({
+      time: 0,
+      name: undefined,
+      raw_name: undefined,
+      starts: firstConfig.starts,
+      color_class: undefined,
+      new_class: firstConfig.new_class
     });
-    Array.prototype.forEach.call(document.getElementsByClassName('if-exists'), function (t) {
-      if (isNaN(times[t.id]) || times[t.id] == false) {
-        t.className = 'if-exists hide';
-      } else {
-        t.className = 'if-exists';
+
+    for (var timeName in times) {
+      if (sunTimesConfig[timeName] && !isNaN(times[timeName])) {
+        timeline.push({
+          time: times[timeName],
+          name: sunTimesConfig[timeName].name,
+          raw_name: timeName,
+          starts: sunTimesConfig[timeName].starts,
+          "class": sunTimesConfig[timeName]["class"],
+          new_class: sunTimesConfig[timeName].new_class
+        });
       }
+    }
+
+    if (plugin_options.moon) {
+      for (var timeName in moonTimes) {
+        if (moonTimesConfig[timeName] && !isNaN(moonTimes[timeName])) {
+          timeline.push({
+            time: moonTimes[timeName],
+            name: moonTimesConfig[timeName].name,
+            raw_name: "moon" + timeName,
+            "class": moonTimesConfig[timeName]["class"]
+          });
+        }
+      }
+    }
+
+    timeline.sort(function (a, b) {
+      return a.time > b.time ? 1 : -1;
     });
+    var tlo = d3.select(".sun-times .timeline").html("");
+    var current_class = "";
+
+    for (var i in timeline) {
+      if (timeline[i].new_class) {
+        current_class = timeline[i].new_class;
+      }
+
+      if (timeline[i].time > 0) {
+        var tle = tlo.append("div").attr("class", "timeline-entry timestamp " + (timeline[i]["class"] ? timeline[i]["class"] + " " : "") + current_class);
+        tle.append("span").attr("class", "time-column").html(time_format(timeline[i].time));
+        tle.append("span").attr("class", "name-column").html(timeline[i].name);
+        tle.data([timeline[i].raw_name]).on("click", function (d) {
+          setTime(d);
+        });
+      }
+
+      if (timeline[i].starts) {
+        var tle = tlo.append("div").attr("class", "timeline-entry timeframe " + current_class);
+        tle.append("span").attr("class", "time-column");
+        tle.append("span").attr("class", "name-column").html(timeline[i].starts);
+      }
+    }
+
     document.getElementById('current_time').innerHTML = time_format(new Date(time));
     document.getElementById('azimuth').innerHTML = (sunPos.azimuth * 180 / Math.PI).toFixed(1) + "&deg;";
     document.getElementById('altitude').innerHTML = (sunPos.altitude * 180 / Math.PI).toFixed(1) + "&deg;";
+    var moonIllumination = SunCalc.getMoonIllumination(time);
+    var phaseName;
+
+    for (var phase in moonPhases) {
+      if (phase < moonIllumination.phase) {
+        phaseName = moonPhases[phase];
+      }
+    }
+
+    document.getElementById('azimuth-moon').innerHTML = (moonPos.azimuth * 180 / Math.PI).toFixed(1) + "&deg;";
+    document.getElementById('altitude-moon').innerHTML = (moonPos.altitude * 180 / Math.PI).toFixed(1) + "&deg;";
+    document.getElementById('phase-moon').innerHTML = phaseName;
+    document.getElementById('fraction-moon').innerHTML = (moonIllumination.fraction * 100).toFixed(1) + "%";
+    d3.select(".current-sun").classed("hide", !(plugin_options.astroSun || plugin_options.photoSun));
+    d3.select(".current-moon").classed("hide", !plugin_options.moon);
     var data = [];
-    var t = new Date(time).setUTCHours(0, -timeOffset, 0, 0);
+    var moonData = [];
+    var t = times.nadir.getTime();
     var steps = 100;
@@ -215,7 +594,10 @@ var stepSize = 24.0 * 60 * 60 * 1000 / steps;
     for (var i = 0; i <= steps; i++) {
-      var alt = -SunCalc.getPosition(t + stepSize * i, lat, lon).altitude;
       data[i] = {
         x: 1.0 * i / steps,
-        y: alt
+        y: -SunCalc.getPosition(t + stepSize * i, lat, lon).altitude
       };
+      moonData[i] = {
+        x: 1.0 * i / steps,
+        y: -SunCalc.getMoonPosition(t + stepSize * i, lat, lon).altitude
+      };
     }
@@ -228,4 +610,6 @@
     });
-    d3.select('#sun_path').attr('d', line(data));
-    d3.select('#sun').attr('cx', (time - t) * 200.0 / (24.0 * 60 * 60 * 1000) % 200).attr('cy', (-sunPos.altitude + Math.PI / 2) * 100 / Math.PI);
+    d3.select('#sun_path').attr('d', plugin_options.astroSun || plugin_options.photoSun ? line(data) : "");
+    d3.select('#moon_path').attr('d', plugin_options.moon ? line(moonData) : "");
+    d3.select('.path-circle#sun').attr('cx', mod((time - t) * 200.0 / (24.0 * 60 * 60 * 1000), 200)).attr('cy', (-sunPos.altitude + Math.PI / 2) * 100 / Math.PI).style('opacity', plugin_options.astroSun || plugin_options.photoSun ? 1 : 0);
+    d3.select('.path-circle#moon').attr('cx', mod((time - t) * 200.0 / (24.0 * 60 * 60 * 1000), 200)).attr('cy', (-moonPos.altitude + Math.PI / 2) * 100 / Math.PI).style('opacity', plugin_options.moon ? 1 : 0);
   };
@@ -249,4 +633,2 @@
   var setTime = function setTime(timeString) {
-    console.log('setting time to', timeString);
-
     var _picker$getParams3 = picker.getParams(),
@@ -259,4 +641,8 @@ lat = _picker$getParams3.lat,
     var time = store.get('timestamp');
-    var times = SunCalc.getTimes(time, lat, lon);
-    store.set('timestamp', times[timeString].getTime());
+
+    if (timeString.substring(0, 4) == "moon") {
+      store.set('timestamp', moonTimes[timeString.substring(4)].getTime());
+    } else {
+      store.set('timestamp', times[timeString].getTime());
+    }
   };
@@ -263,0 +649,0 @@

package.json

 {
   "name": "windy-plugin-sun-position",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Windy plugin that gives shows sun position on the map and gives details about sunset and sunrise times.",
@@ -5,0 +5,0 @@ "main": "dist/plugin.js",

README.md

 <p align="center"><img src="https://www.windy.com/img/logo201802/logo-full-windycom-gray-v3.svg"></p>
 
-Windy plugin that gives shows sun position on the map and gives details about sunset and sunrise times. To use the published version, go to [windy.com](https://www.windy.com), open the menu, click on "Install Windy plugin", enter "windy-plugin-sun-position" and click "Load plugin".
+Windy plugin that gives shows sun and moon position on the map and gives details about sunset and sunrise times as well as other sun and moon details. To use the published version, go to [www.windy.com](https://www.windy.com), open the menu, click on "Install Windy plugin", enter "windy-plugin-sun-position" and click "Load plugin".
 
-To open the display, click on "More layers..." on the bottom right, then select "Sun Position" (Currently does not work on mobile). Then open a picker by clicking on the map (but not on a city name).
+**The access to the plugin has changed in Version 0.2.0 to allow for mobile usage!**
+To open the display, right-click on the map (or tap and hold on mobile), then select "Sun Position". Then open a weather picker to see the sun dial and the details on the left
 
-### Sun dial
-The sun dial displays the current sun azimuth on the map using a black line from the picker position. Additionally, dashed lines show the azimuth of sunrise and sunset. Clicking on the sunrise or sunset line will set the current time to the sunrise or sunset time respectively.
+### Dial
+The dial displays the current sun and moon azimuth on the map using a black line from the picker position. Additionally, dashed lines show the azimuth of sunrise and sunset and dotted lines show the azimuth of moonrise and moonset. Clicking on the sunrise, sunset, moonrise and moonset lines will set the current time to the respective time.
 
 ![Sun dial](pictures/sundial.jpg?raw=true "Sun dial")
 
-### Sun detail pane
-The sun detail pane on the left shows the time of astronomical, nautical, and civil dusk and dawn; start and end of golden hour and solar noon. Also, the current time and sun azimuth and altitude are displayed.
+### Detail pane
+The detail pane on the left shows the time of astronomical, nautical, and civil dusk and dawn; start and end of blue and golden hour and solar noon. Moonrise and moonset times are also added to the timeline. Below, a diagram of the sun and moon altitudes over time is displayed. Below that, details about the current sun and moon position are shown.
 
+On the top of the detail pane it is possible to enable and disable individual displays. The telescope toggles visibility of astronomical sun details (astronomical and nautical dawn and dusk). The camera toggles visibility of blue and golden hour times. The moon toggles visibility of moon details.
+
 ![Sun detail pane](pictures/sundetail.jpg?raw=true "Sun detail pane")
 
 ### Development
-If you want to use the development build clone this repository and run,
+If you want to use the development build clone the git repository and run,
 ```sh
@@ -36,1 +39,13 @@ npm i
 - When Windy setting to display all times in UTC is selected, displays all times in UTC
+#### V0.2.0
+- **The hook has been changed from the Overlay layers menu to the context-menu.**
+- Displays only times that exist: If the sun does not go far enough below the horizon, astronomical dawn and dusk might not exist and the entire night is astronomical twilight. In this (and more extreme) cases the non-existent times are hidden
+- The plugin now works on mobile (thanks @rittels for the help)
+- Fixed some delay issues that resulted from the timezone-lookup
+#### V0.3.0
+- reworked detail phase
+- included details about the moon
+- fixed blue hour times
+- redesigned current sun position display
+- added options to disable moon, astronomical details and photography details separately
+- added footnote with links to plugin pages

No alert changes

Improved metrics

Total package byte prevSize

147620

increased by59.26%

Lines of code

832

increased by83.26%

Number of lines in readme file

51

increased by41.67%

No dependency changes