moon-phase-widget/build/mopage.min.js

Moon phase widget for website

!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.MoonPhaseWidget=t():n.MoonPhaseWidget=t()}(window,(function(){return function(n){var t={};function e(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return n[i].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=n,e.c=t,e.d=function(n,t,i){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:i})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var i=Object.create(null);if(e.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var o in n)e.d(i,o,function(t){return n[t]}.bind(null,o));return i},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=11)}([function(n,t,e){"use strict";const i=window.localStorage||{},o={ip:"104.131.241.248",city:"Gramercy Park",region:"New York",country:"US",loc:"40.7402,-73.9996",org:"AS14061 DigitalOcean, LLC",postal:"10011",timezone:"America/New_York",readme:"https://ipinfo.io/missingauth"};t.a=async function(){let n=function(){const n="localStorageTest";try{return i.setItem(n,n),i.removeItem(n),!0}catch(n){return!1}}(),t=n&&JSON.parse(i.getItem("mph-widget-geodata"));if(t)return t;try{const n=await fetch("https://ipinfo.io/json");n.ok&&(t=await n.json())}catch(n){console.warn(n)}t=t||o;const[e,r]=t.loc.split(",");return Object.assign(t,{latitude:parseFloat(e),longitude:parseFloat(r)}),n&&i.setItem("mph-widget-geodata",JSON.stringify(t)),t}},function(n,t,e){"use strict";t.a=function(n,t){return`\n<div class="mph-widget">\n    <div class="mph-widget-body">\n        <div class="mph-col">\n            <div class="mph-row">\n                <div class="current-date">${n.dateFmt}</div>\n            </div>\n            <div class="mph-row">\n                <div class="current-place">${t.city}, ${t.country}</div>\n            </div>\n            <div class="mph-row">\n                <div class="moon-phase-ico">\n                    <img src="${n.phaseIco}" />\n                </div>\n            </div>\n        </div>\n        <div class="mph-col">\n            <div class="mph-row">\n                <div class="phase-name">${n.phase}</div>\n            </div>\n            <div class="mph-row">\n                <div class="zodiac-name">Moon in <strong>${n.zodiac}</strong></div>\n            </div>\n            <div class="mph-row">\n                <div>Set: </div>\n                <div class="moon-time">${n.set}</div>\n            </div>\n            <div class="mph-row">\n                <div>Rise: </div>\n                <div class="moon-time">${n.rise}</div>\n            </div>\n        </div>\n    </div>\n    <div class="mph-row mph-link">\n        <a href="${n.link}" target="_blank">${n.linkLabel}</a>\n    </div>\n</div>\n    `}},function(n,t,e){"use strict";var i=e(0),o=e(1);t.a=class{constructor(n="moon-phase-widget",t=i.a,e=o.a){this.containerId=n,this.el=document.getElementById(n),this.getGeoDataFn=t,this.renderFn=e,this.mount().catch(n=>console.log(n))}async mount(){const n=await this.getGeoDataFn(),t=await this.getMoonPhaseData(n.latitude,n.longitude);this.el.innerHTML=this.renderFn(t,n),this.loadBackgroundColor()}async getMoonPhaseData(n,t){const e=await fetch("https://moonorganizer.com/api/public/moon-phase",{method:"POST",headers:{"Content-Type":"application/json;charset=utf-8"},body:JSON.stringify({latitude:n,longitude:t,date:new Date})});return await e.json()}loadBackgroundColor(){const n=this.el.dataset.color;n&&this.el.firstElementChild&&(this.el.firstElementChild.style.backgroundColor=n)}}},function(n,t,e){"use strict";n.exports=function(n){var t=[];return t.toString=function(){return this.map((function(t){var e=function(n,t){var e=n[1]||"",i=n[3];if(!i)return e;if(t&&"function"==typeof btoa){var o=(a=i,s=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),r=i.sources.map((function(n){return"/*# sourceURL=".concat(i.sourceRoot).concat(n," */")}));return[e].concat(r).concat([o]).join("\n")}var a,s,c;return[e].join("\n")}(t,n);return t[2]?"@media ".concat(t[2],"{").concat(e,"}"):e})).join("")},t.i=function(n,e){"string"==typeof n&&(n=[[null,n,""]]);for(var i={},o=0;o<this.length;o++){var r=this[o][0];null!=r&&(i[r]=!0)}for(var a=0;a<n.length;a++){var s=n[a];null!=s[0]&&i[s[0]]||(e&&!s[2]?s[2]=e:e&&(s[2]="(".concat(s[2],") and (").concat(e,")")),t.push(s))}},t}},function(n,t,e){"use strict";var i,o={},r=function(){return void 0===i&&(i=Boolean(window&&document&&document.all&&!window.atob)),i},a=function(){var n={};return function(t){if(void 0===n[t]){var e=document.querySelector(t);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(n){e=null}n[t]=e}return n[t]}}();function s(n,t){for(var e=[],i={},o=0;o<n.length;o++){var r=n[o],a=t.base?r[0]+t.base:r[0],s={css:r[1],media:r[2],sourceMap:r[3]};i[a]?i[a].parts.push(s):e.push(i[a]={id:a,parts:[s]})}return e}function c(n,t){for(var e=0;e<n.length;e++){var i=n[e],r=o[i.id],a=0;if(r){for(r.refs++;a<r.parts.length;a++)r.parts[a](i.parts[a]);for(;a<i.parts.length;a++)r.parts.push(v(i.parts[a],t))}else{for(var s=[];a<i.parts.length;a++)s.push(v(i.parts[a],t));o[i.id]={id:i.id,refs:1,parts:s}}}}function l(n){var t=document.createElement("style");if(void 0===n.attributes.nonce){var i=e.nc;i&&(n.attributes.nonce=i)}if(Object.keys(n.attributes).forEach((function(e){t.setAttribute(e,n.attributes[e])})),"function"==typeof n.insert)n.insert(t);else{var o=a(n.insert||"head");if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}return t}var d,p=(d=[],function(n,t){return d[n]=t,d.filter(Boolean).join("\n")});function u(n,t,e,i){var o=e?"":i.css;if(n.styleSheet)n.styleSheet.cssText=p(t,o);else{var r=document.createTextNode(o),a=n.childNodes;a[t]&&n.removeChild(a[t]),a.length?n.insertBefore(r,a[t]):n.appendChild(r)}}function f(n,t,e){var i=e.css,o=e.media,r=e.sourceMap;if(o&&n.setAttribute("media",o),r&&btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),n.styleSheet)n.styleSheet.cssText=i;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(i))}}var h=null,m=0;function v(n,t){var e,i,o;if(t.singleton){var r=m++;e=h||(h=l(t)),i=u.bind(null,e,r,!1),o=u.bind(null,e,r,!0)}else e=l(t),i=f.bind(null,e,t),o=function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(e)};return i(n),function(t){if(t){if(t.css===n.css&&t.media===n.media&&t.sourceMap===n.sourceMap)return;i(n=t)}else o()}}n.exports=function(n,t){(t=t||{}).attributes="object"==typeof t.attributes?t.attributes:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=r());var e=s(n,t);return c(e,t),function(n){for(var i=[],r=0;r<e.length;r++){var a=e[r],l=o[a.id];l&&(l.refs--,i.push(l))}n&&c(s(n,t),t);for(var d=0;d<i.length;d++){var p=i[d];if(0===p.refs){for(var u=0;u<p.parts.length;u++)p.parts[u]();delete o[p.id]}}}}},,,,,function(n,t,e){var i=e(10);"string"==typeof i&&(i=[[n.i,i,""]]);var o={insert:"head",singleton:!1};e(4)(i,o);i.locals&&(n.exports=i.locals)},function(n,t,e){(n.exports=e(3)(!1)).push([n.i,".mph-widget {\n    word-break: break-all;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    font-size: 18px;\n}\n\n.mph-row {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    align-items: stretch;\n}\n\n.mph-col {\n    width: 275px;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n}\n\n.mph-widget .moon-phase-ico {\n    width: 40%;\n    margin: 20px 0;\n}\n  \n.mph-widget .moon-phase-ico img {\n    width: 100%;\n}\n\n.mph-widget .phase-name {\n    font-size: 20px;\n    font-weight: bold;\n}\n\n.mph-widget .current-date {\n    font-weight: bold;\n}\n\n.current-place {\n    font-style: italic;\n}\n\n.zodiac-name {\n    margin-bottom: 10px;\n}\n\n.mph-arrow {\n    width: 30px;\n    margin: 15px 0;\n}\n\n.mph-phase-desc {\n    width: 100%;\n    word-break: normal;\n}\n\n.mph-phase-desc span {\n    text-align: center;\n    display: block;\n    width: 100%;\n    margin: 15px 0;\n}\n\n.mph-desc-link {\n    text-align: center;\n    font-style: italic;\n    font-weight: bold;\n    word-break: break-word;\n}\n\nh1 {\n    text-align: center;\n}\n\n@keyframes mph-page-loader {\n    0% { transform: translate(-50%,-50%) rotate(0deg); }\n    100% { transform: translate(-50%,-50%) rotate(360deg); }\n}\n.mph-page-loader div {\n    position: absolute;\n    width: 120px;\n    height: 120px;\n    border: 20px solid #5855cc;\n    border-top-color: transparent;\n    border-radius: 50%;\n}\n.mph-page-loader div {\n    animation: mph-page-loader 1s linear infinite;\n    top: 50%;\n    left: 50%;\n}\n.mph-page-loader {\n    width: 100%;\n    height: 300px;\n    position: relative;\n    transform: translateZ(0) scale(1);\n    backface-visibility: hidden;\n    transform-origin: 0 0;\n    overflow: hidden;\n}",""])},function(n,t,e){"use strict";e.r(t);e(9);var i=e(2);new i.a(void 0,void 0,(function(n,t){return`\n<div class="mph-widget">\n    <div class="mph-row">\n        <div class="mph-col">\n            <div class="current-date">${n.dateFmt}</div>\n            <div class="current-place">${t.city}, ${t.region}, ${t.country}</div>\n            <div class="moon-phase-ico">\n                <img alt="Moon Phase for Today" src="${n.phaseIco}" />\n            </div>\n        </div>\n        <div class="mph-col">\n            <div class="phase-name">${n.phase}</div>\n            <div class="zodiac-name">Moon in <strong>${n.zodiac}</strong></div>\n            <div class="moon-time">Moon Set: ${n.set}</div>\n            <div class="moon-time">Moon Rise: ${n.rise}</div>\n        </div>\n    </div>\n    <div class="mph-arrow">\n<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\n\t viewBox="0 0 485 485" fill="#5855CC" style="enable-background:new 0 0 485 485;" xml:space="preserve">\n<g>\n\t<path d="M413.974,71.026C368.171,25.225,307.274,0,242.5,0S116.829,25.225,71.026,71.026C25.225,116.829,0,177.726,0,242.5\n\t\ts25.225,125.671,71.026,171.474C116.829,459.775,177.726,485,242.5,485s125.671-25.225,171.474-71.026\n\t\tC459.775,368.171,485,307.274,485,242.5S459.775,116.829,413.974,71.026z M242.5,455C125.327,455,30,359.673,30,242.5\n\t\tS125.327,30,242.5,30S455,125.327,455,242.5S359.673,455,242.5,455z"/>\n\t<polygon points="242.5,299.791 135.589,193.228 114.411,214.476 242.5,342.148 370.589,214.476 349.411,193.228"/>\n</g>\n</svg>\n</div>\n    <p class="mph-phase-desc">&nbsp;&nbsp;&nbsp;&nbsp;${n.phaseDesc}</p>\n</div>\n    `}))}])}));