Skip to content

Commit 641f6e5

Browse files
csswizardrycsswizardry
committed
Make batteryLow and batteryCritical inclusive
Previously, `batteryCritical` overwrote `batteryLow`, whereas, really, it’s supposed to be a subset. This means we now get both properties set to `true` and both classes added to the `<html>` once battery level is ≤5%. The upshot of which is that your customisations can be much more succinct; anything you apply to low battery users will automatically also carry over to critical, and you don’t need to do anything twice.
1 parent c2c7f32 commit 641f6e5

3 files changed

Lines changed: 11 additions & 14 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
.min.js
1+
*.min.js
22
node_modules/

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -149,8 +149,8 @@ Obs.js exposes the following classes under the following conditions:
149149
| Class | Meaning | Computed/derived from |
150150
| --------------------------------------- | ------------------------ | --------------------------------------------------------------- |
151151
| `.has-data-saver` | User enabled Data Saver | `navigator.connection.saveData === true` |
152-
| `.has-battery-critical` | Battery ≤ 5% | `battery.level ≤ 0.05` |
153-
| `.has-battery-low` | 5% < battery ≤ 20% | `0.05 < battery.level ≤ 0.2` (mutually exclusive with critical) |
152+
| `.has-battery-low` | Battery ≤ 20% | `battery.level ≤ 0.2` |
153+
| `.has-battery-critical` | Battery ≤ 5% | `battery.level ≤ 0.05` (added **alongside** `.has-battery-low`) |
154154
| `.has-battery-charging` | On charge | `battery.charging === true` |
155155
| `.has-latency-low` | Low RTT | `rtt < 75ms` |
156156
| `.has-latency-medium` | Medium RTT | `75–275ms` |
@@ -172,14 +172,14 @@ Obs.js also stores the following properties on the `window.obs` object:
172172
| `config.observeChanges` | boolean | Whether Obs.js attaches change listeners | **Default `false`**; set by you _before_ Obs.js runs | Opt-in for SPAs or long-lived pages |
173173
| `dataSaver` | boolean | User enabled Data Saver | `navigator.connection.saveData` | — |
174174
| `rttBucket` | number (ms) | RTT bucketed to **ceil** 25 ms (e.g. 101→125) | `navigator.connection.rtt` | Undefined if Connection API missing |
175-
| `rttCategory` | `'low' \| 'medium' \| 'high'` | CrUX tri-bin: `<75`, `75–275`, `>275` | Derived from `rtt` | Drives latency classes |
175+
| `rttCategory` | `'low' \| 'medium' \| 'high'` | CrUX tri-bin: <75, 75–275, >275 | Derived from `rtt` | Drives latency classes |
176176
| `downlinkBucket` | number (Mbps) | Downlink bucketed to **ceil** 1 Mbps | `navigator.connection.downlink` | Low/High thresholds: `≤5` / `≥8` |
177177
| `downlinkMax` | number (Mbps) | Max estimated downlink (if exposed) | `navigator.connection.downlinkMax` | Not used for Stances; informational only |
178178
| `connectionCapability` | `'strong' \| 'moderate' \| 'weak'` | Transport assessment | Derived from `rttCategory` and `downlinkBucket` | Strong = low RTT **and** high BW; Weak = high RTT **or** low BW |
179179
| `conservationPreference` | `'conserve' \| 'neutral'` | Frugality signal | `dataSaver === true` **or** `batteryLow === true` → `conserve` | — |
180180
| `deliveryMode` | `'rich' \| 'cautious' \| 'lite'` | How “heavy” you should go | Derived from capability and conservation | Rich if **strong** and **not** conserving; Lite if **weak** or **conserve**; else Cautious |
181181
| `canShowRichMedia` | boolean | Convenience: `deliveryMode === 'rich'` | Derived from `deliveryMode` | Shorthand for “go big” |
182182
| `shouldAvoidRichMedia` | boolean | Convenience: `deliveryMode === 'lite'` | Derived from `deliveryMode` | Shorthand for “be frugal” |
183-
| `batteryCritical` | boolean \| null | Battery `≤ 5%` | Battery API | Mutually exclusive with `batteryLow`; `null` if unknown |
184-
| `batteryLow` | boolean \| null | `5% < level ≤ 20%` | Battery API | `true` only when not `batteryCritical` |
183+
| `batteryLow` | boolean \| null | Battery ≤20% | Battery API | `true` when battery level is ≤20%; `null` if unknown |
184+
| `batteryCritical` | boolean \| null | Battery ≤5% | Battery API | `true` when battery level is ≤5%; `true` in addition to `batteryLow` |
185185
| `batteryCharging` | boolean \| null | On charge | Battery API | `null` if unknown |

‎obs.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -228,14 +228,12 @@
228228
const low = Number.isFinite(level) ? level <= 0.2 : null;
229229
window.obs.batteryLow = low;
230230

231-
// Add most urgent battery class, removing any classes left over.
232-
// E.g. `<html class="has-battery-critical">`
231+
// Add battery classes (subset model): at ≤5% we want BOTH low and critical.
232+
// First remove leftovers, then add any that apply.
233+
// E.g. `<html class="has-battery-low has-battery-critical">`
233234
['critical','low'].forEach(t => html.classList.remove(`has-battery-${t}`));
234-
if (critical) {
235-
html.classList.add('has-battery-critical');
236-
} else if (low) {
237-
html.classList.add('has-battery-low');
238-
}
235+
if (low) html.classList.add('has-battery-low');
236+
if (critical) html.classList.add('has-battery-critical');
239237

240238
// Add a class to the `<html>` element if the device is currently charging.
241239
// E.g. `<html class="has-battery-charging">`
@@ -269,4 +267,3 @@
269267
.catch(() => { /* no‑op */ });
270268
}
271269
})();
272-
//# sourceURL=obs.js

0 commit comments

Comments
 (0)