f67c88a4f1
Secure dev auth with signed tokens, add email support for --user Simplify breakpoint variables, suppress Sass deprecation warnings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
107 lines
3.0 KiB
JavaScript
Executable File
107 lines
3.0 KiB
JavaScript
Executable File
/**
|
|
* Responsive - JavaScript breakpoint detection for RSX two-tier responsive system
|
|
*
|
|
* Provides runtime detection of current viewport against CSS breakpoint values.
|
|
* Values are read from CSS custom properties defined in rsx/theme/responsive.scss.
|
|
*
|
|
* Two-tier system:
|
|
* Tier 1 (Semantic): is_mobile() / is_desktop() - broad categories
|
|
* Tier 2 (Granular): is_phone() / is_tablet() / is_desktop_sm() / is_desktop_md() / is_desktop_lg()
|
|
*
|
|
* Usage:
|
|
* if (Responsive.is_mobile()) { ... }
|
|
* if (Responsive.is_desktop_md()) { ... }
|
|
*/
|
|
class Responsive {
|
|
static _cache = {};
|
|
|
|
/**
|
|
* Get breakpoint value from CSS custom property as integer
|
|
* @param {string} name - Breakpoint name (e.g., 'desktop', 'tablet', 'desktop-md')
|
|
* @returns {number} Breakpoint value in pixels
|
|
* @private
|
|
*/
|
|
static _get_breakpoint(name) {
|
|
if (this._cache[name] !== undefined) {
|
|
return this._cache[name];
|
|
}
|
|
|
|
const styles = getComputedStyle(document.documentElement);
|
|
const value = styles.getPropertyValue(`--bp-${name}`).trim();
|
|
const parsed = parseInt(value, 10);
|
|
|
|
this._cache[name] = parsed;
|
|
return parsed;
|
|
}
|
|
|
|
/**
|
|
* Get current viewport width
|
|
* @returns {number}
|
|
* @private
|
|
*/
|
|
static _viewport() {
|
|
return window.innerWidth;
|
|
}
|
|
|
|
/**
|
|
* Tier 1: Check if viewport is mobile (0 - 1023px)
|
|
* Includes phone and tablet sizes
|
|
* @returns {boolean}
|
|
*/
|
|
static is_mobile() {
|
|
return !this.is_desktop();
|
|
}
|
|
|
|
/**
|
|
* Tier 1: Check if viewport is desktop (1024px+)
|
|
* Includes desktop-sm, desktop-md, and desktop-lg sizes
|
|
* @returns {boolean}
|
|
*/
|
|
static is_desktop() {
|
|
return this._viewport() >= this._get_breakpoint('desktop');
|
|
}
|
|
|
|
/**
|
|
* Tier 2: Check if viewport is phone (0 - 799px)
|
|
* @returns {boolean}
|
|
*/
|
|
static is_phone() {
|
|
return this._viewport() < this._get_breakpoint('tablet');
|
|
}
|
|
|
|
/**
|
|
* Tier 2: Check if viewport is tablet (800 - 1023px)
|
|
* @returns {boolean}
|
|
*/
|
|
static is_tablet() {
|
|
const vp = this._viewport();
|
|
return vp >= this._get_breakpoint('tablet') && vp < this._get_breakpoint('desktop');
|
|
}
|
|
|
|
/**
|
|
* Tier 2: Check if viewport is desktop-sm (1024 - 1699px)
|
|
* @returns {boolean}
|
|
*/
|
|
static is_desktop_sm() {
|
|
const vp = this._viewport();
|
|
return vp >= this._get_breakpoint('desktop') && vp < this._get_breakpoint('desktop-md');
|
|
}
|
|
|
|
/**
|
|
* Tier 2: Check if viewport is desktop-md (1700 - 2199px)
|
|
* @returns {boolean}
|
|
*/
|
|
static is_desktop_md() {
|
|
const vp = this._viewport();
|
|
return vp >= this._get_breakpoint('desktop-md') && vp < this._get_breakpoint('desktop-lg');
|
|
}
|
|
|
|
/**
|
|
* Tier 2: Check if viewport is desktop-lg (2200px+)
|
|
* @returns {boolean}
|
|
*/
|
|
static is_desktop_lg() {
|
|
return this._viewport() >= this._get_breakpoint('desktop-lg');
|
|
}
|
|
}
|