Add new Obs.js snippet to capture critical battery

Author: csswizardry

_includes/head.html

@@ -6,7 +6,7 @@
 window.obs = { config: { observeChanges: false } }
 </script>
 <script>
-;(()=>{const e=document.documentElement,{connection:n}=navigator;window.obs=window.obs||{};const t=(window.obs&&window.obs.config)||{},o=!1!==t.observeChanges,c=t=>Number.isFinite(t)?Math.ceil(t/25)*25:null,r=t=>Number.isFinite(t)?t<75?"low":t<=275?"medium":"high":null,s=t=>Number.isFinite(t)?Math.ceil(t):null,i=()=>{const t=window.obs||{},o="number"==typeof t.downlinkBucket?t.downlinkBucket:null,c="low"===t.rttCategory,s="high"===t.rttCategory,i=null!=o&&o>=8,l=null!=o&&o<=5;t.connectionCapability=c&&i?"strong":s||l?"weak":"moderate";const a=!0===t.dataSaver||!0===t.batteryLow;t.conservationPreference=a?"conserve":"neutral";const d=!a&&"strong"===t.connectionCapability,u=a||"weak"===t.connectionCapability;t.deliveryMode=d?"rich":u?"lite":"cautious";t.canShowRichMedia="rich"===t.deliveryMode,t.shouldAvoidRichMedia="lite"===t.deliveryMode,["strong","moderate","weak"].forEach((t=>{e.classList.remove(`has-connection-capability-${t}`)})),e.classList.add(`has-connection-capability-${t.connectionCapability}`),["conserve","neutral"].forEach((t=>{e.classList.remove(`has-conservation-preference-${t}`)})),e.classList.add(`has-conservation-preference-${t.conservationPreference}`),["rich","cautious","lite"].forEach((t=>{e.classList.remove(`has-delivery-mode-${t}`)})),e.classList.add(`has-delivery-mode-${t.deliveryMode}`)},l=()=>{if(!n)return;const t=n,{saveData:o,rtt:l,downlink:a}=t;window.obs.dataSaver=!!o,e.classList.toggle("has-data-saver",!!o);const d=c(l);null!=d&&(window.obs.rttBucket=d);const u=r(l);u&&(window.obs.rttCategory=u,["low","medium","high"].forEach((t=>e.classList.remove(`has-latency-${t}`))),e.classList.add(`has-latency-${u}`));const b=s(a);if(null!=b){window.obs.downlinkBucket=b;const t=b<=5,o=b>=8;e.classList.toggle("has-bandwidth-low",t),e.classList.toggle("has-bandwidth-high",o)}"downlinkMax"in t&&(window.obs.downlinkMax=t.downlinkMax),i()},a=t=>{if(!t)return;const n=t,{level:o,charging:c}=n,l=Number.isFinite(o)?o<=.2:null;window.obs.batteryLow=l,e.classList.toggle("has-battery-low",!!l);const r=!!c;window.obs.batteryCharging=r,e.classList.toggle("has-battery-charging",r),i()};l(),o&&n?.addEventListener&&n.addEventListener("change",l),"getBattery"in navigator&&navigator.getBattery().then((e=>{a(e),o&&"function"==typeof e.addEventListener&&(e.addEventListener("levelchange",(()=>a(e))),e.addEventListener("chargingchange",(()=>a(e))))})).catch((()=>{}))})();
+;(()=>{const d=document.currentScript;if(!d||d.src||(d.type&&d.type.toLowerCase()==="module")){if(!/^(localhost|127\.0\.0\.1|::1)$/.test(location.hostname))return}const e=document.documentElement,{connection:n}=navigator;window.obs=window.obs||{};const o=(window.obs&&window.obs.config)||{},a=o.observeChanges!==!1,u=t=>Number.isFinite(t)?Math.ceil(t/25)*25:null,c=t=>Number.isFinite(t)?t<75?"low":t<=275?"medium":"high":null,l=t=>Number.isFinite(t)?Math.ceil(t):null,s=()=>{const t=window.obs||{},n=typeof t.downlinkBucket==="number"?t.downlinkBucket:null,o=t.rttCategory==="low",a=t.rttCategory==="high",s=n!=null&&n>=8,i=n!=null&&n<=5;t.connectionCapability=o&&s?"strong":a||i?"weak":"moderate";const r=t.dataSaver===!0||t.batteryLow===!0;t.conservationPreference=r?"conserve":"neutral";const m=!r&&t.connectionCapability==="strong",h=r||t.connectionCapability==="weak";t.deliveryMode=m?"rich":h?"lite":"cautious",t.canShowRichMedia=t.deliveryMode==="rich",t.shouldAvoidRichMedia=t.deliveryMode==="lite",["strong","moderate","weak"].forEach(r=>{e.classList.remove(`has-connection-capability-${r}`)}),e.classList.add(`has-connection-capability-${t.connectionCapability}`),["conserve","neutral"].forEach(r=>{e.classList.remove(`has-conservation-preference-${r}`)}),e.classList.add(`has-conservation-preference-${t.conservationPreference}`),["rich","cautious","lite"].forEach(r=>{e.classList.remove(`has-delivery-mode-${r}`)}),e.classList.add(`has-delivery-mode-${t.deliveryMode}`)},r=()=>{if(!n)return;const{saveData:t,rtt:o,downlink:a}=n;window.obs.dataSaver=!!t,e.classList.toggle("has-data-saver",!!t);const i=u(o);i!=null&&(window.obs.rttBucket=i);const r=c(o);r&&(window.obs.rttCategory=r,["low","medium","high"].forEach(t=>e.classList.remove(`has-latency-${t}`)),e.classList.add(`has-latency-${r}`));const m=l(a);if(m!=null){window.obs.downlinkBucket=m;const t=m<=5,n=m>=8;e.classList.toggle("has-bandwidth-low",t),e.classList.toggle("has-bandwidth-high",n)}"downlinkMax"in n&&(window.obs.downlinkMax=n.downlinkMax),s()},m=t=>{if(!t)return;const{level:n,charging:o}=t,i=Number.isFinite(n)?n<=.05:null;window.obs.batteryCritical=i;const a=Number.isFinite(n)?n<=.2:null;window.obs.batteryLow=a,["critical","low"].forEach(t=>e.classList.remove(`has-battery-${t}`)),i?e.classList.add("has-battery-critical"):a&&e.classList.add("has-battery-low");const c=!!o;window.obs.batteryCharging=c,e.classList.toggle("has-battery-charging",c),s()};r(),a&&n&&typeof n.addEventListener==="function"&&n.addEventListener("change",r),"getBattery"in navigator&&navigator.getBattery().then(t=>{m(t),a&&typeof t.addEventListener==="function"&&(t.addEventListener("levelchange",()=>m(t)),t.addEventListener("chargingchange",()=>m(t)))}).catch(()=>{})})();
 </script>
 
 <title>{{ page.title }} {% if paginator and paginator.page > 1 %}Blog – Page {{ paginator.page }} {% endif %}– CSS Wizardry</title>

_layouts/default.html

@@ -121,6 +121,7 @@
         'rttCategory',
         'downlinkBucket',
         'downlinkMax',
+        'batteryCritical',
         'batteryLow',
         'batteryCharging',
       ];