ac/android_cast
1
0
Fork 0
mirror of git://f0xx.org/android_cast synced 2026-07-29 04:38:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

clock widget

Browse Source
This commit is contained in:
Anton Afanasyeu
2026-05-30 18:52:51 +02:00
parent 6e28ffa93b
commit de524b03f4
2 changed files with 136 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
examples/app_hub/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" data-theme="dark" data-clock-font="dseg14-classic">
<html lang="en" data-theme="dark" data-clock-font="mixed">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -11,7 +11,7 @@
})();
</script>
<link rel="stylesheet" href="/app/androidcast_project/crashes/assets/css/app.css">
<link rel="stylesheet" href="hub.css?v=20260530k">
<link rel="stylesheet" href="hub.css?v=20260530t">
<link rel="stylesheet" href="hub-logo-layers.css">
<script src="assets/analytics.config.js"></script>
<script src="/app/androidcast_project/crashes/assets/js/analytics.js" defer></script>
@@ -158,7 +158,7 @@
var supportsLayout = !!(window.CSS && CSS.supports && CSS.supports('object-fit', 'cover'));
var logoEnabled = !!(stage && supportsSvg && supportsLayout);
var logoBuild = '20260530k';
var logoBuild = '20260530t';
function hubAsset(rel) {
var link = document.querySelector('link[href*="hub.css"]');
@@ -193,8 +193,8 @@
};
var clockFontParams = new URLSearchParams(window.location.search);
var clockFontKey = (clockFontParams.get('clockFont') || 'dseg14-classic').toLowerCase();
if (!LCD_FONT_CATALOG[clockFontKey]) clockFontKey = 'dseg14-classic';
var clockFontKey = (clockFontParams.get('clockFont') || 'digital-7-mono-italic').toLowerCase();
if (!LCD_FONT_CATALOG[clockFontKey]) clockFontKey = 'digital-7-mono-italic';
var lcdFontReady = false;
var lcdSymbolIds = {};
var lcdFontPrefix = LCD_FONT_CATALOG[clockFontKey].prefix;
@@ -550,10 +550,13 @@
function buildWorldClock(tz) {
var cell = document.createElement('div');
cell.className = 'cw-cell cw-world-cell';
var stack = document.createElement('div');
stack.className = 'cw-world-stack';
var label = document.createElement('div');
label.className = 'cw-world-label';
label.textContent = cityLabels[tz] || tz.toUpperCase();
cell.appendChild(label);
stack.appendChild(label);
var dial = document.createElement('div');
dial.className = 'cw-dial';
@@ -579,7 +582,8 @@
dial.appendChild(minute);
dial.appendChild(second);
dial.appendChild(pin);
cell.appendChild(dial);
stack.appendChild(dial);
cell.appendChild(stack);
return { tz: tz, hour: hour, minute: minute, second: second, root: cell };
}
@@ -664,7 +668,7 @@
if (sym.id) lcdSymbolIds[sym.id] = sym;
});
lcdFontReady = Object.keys(lcdSymbolIds).length > 0;
document.documentElement.setAttribute('data-clock-font', clockFontKey);
document.documentElement.setAttribute('data-clock-font', 'mixed');
var widget = document.getElementById('hub-clock-widget');
if (widget) widget.setAttribute('data-lcd-mode', lcdFontReady ? 'svg' : 'text');
done(lcdFontReady);
@@ -687,51 +691,9 @@
function renderLcdText(el, text, opts) {
opts = opts || {};
if (!el) return;
el.innerHTML = '';
el.textContent = text;
el.classList.add('cw-lcd-text');
var fontCss = LCD_FONT_CATALOG[clockFontKey].css;
if (!lcdFontReady) {
el.textContent = text;
el.style.fontFamily = fontCss;
return;
}
var renderedSvg = false;
String(text).split('').forEach(function (ch) {
var up = ch.toUpperCase();
var sid = lcdSymbolId(up === ch ? ch : up);
if (!sid || !lcdSymbolIds[sid]) {
var fb = document.createElement('span');
fb.className = 'ot-fallback-char' + (opts.bold ? ' ot-fallback-char--bold' : '');
fb.style.fontFamily = fontCss;
fb.textContent = ch === ' ' ? '\u00A0' : ch;
el.appendChild(fb);
return;
}
var sym = lcdSymbolIds[sid];
if (!sym.childNodes.length) {
var emptyFb = document.createElement('span');
emptyFb.className = 'ot-fallback-char';
emptyFb.style.fontFamily = fontCss;
emptyFb.textContent = ch === ' ' ? '\u00A0' : ch;
el.appendChild(emptyFb);
return;
}
renderedSvg = true;
var wrap = document.createElement('span');
wrap.className = 'ot-glyph-wrap' + (opts.bold ? ' ot-glyph-wrap--bold' : '');
if (opts.blinkColon && ch === ':') wrap.className += ' ot-colon-blink';
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', sym.getAttribute('viewBox') || '0 0 20 32');
svg.setAttribute('class', 'ot-glyph');
svg.setAttribute('aria-hidden', 'true');
cloneLcdSymbolContent(svg, sym);
wrap.appendChild(svg);
el.appendChild(wrap);
});
if (!renderedSvg) {
el.textContent = text;
el.style.fontFamily = fontCss;
}
if (opts.blinkColon) el.classList.add('ot-colon-blink');
}
function loadQuartzAlphabet(done) {
@@ -990,28 +952,15 @@
});
}
loadLcdAlphabet(function () {
updateClockWidget();
setInterval(updateClockWidget, 1000);
});
/* Resize handles: hidden by default (CSS). Skip red debug boxes entirely. */
(function makeClockWidgetInteractive() {
var widget = document.getElementById('hub-clock-widget');
if (!widget) return;
var arrowPath = 'M44.106,42.943H3.987L44.933,1.995c0.456-0.455,0.456-1.196,0-1.651c-0.452-0.455-1.195-0.455-1.651,0L2.336,41.292V1.168C2.336,0.524,1.81,0,1.168,0C0.523,0,0,0.524,0,1.168v44.111h44.111c0.644,0,1.168-0.522,1.168-1.168C45.279,43.469,44.755,42.943,44.106,42.943z';
var handles = ['nw', 'ne', 'sw', 'se'];
handles.forEach(function (pos) {
var h = document.createElement('span');
h.className = 'cw-resize-handle cw-resize-' + pos;
h.dataset.resize = pos;
h.setAttribute('aria-hidden', 'true');
var visual = document.createElement('span');
visual.className = 'cw-resize-handle-visual';
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 45.279 45.279');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', arrowPath);
svg.appendChild(path);
visual.appendChild(svg);
h.appendChild(visual);
widget.appendChild(h);
});
var drag = null;
widget.addEventListener('pointerdown', function (ev) {
var target = ev.target;
@@ -1030,6 +979,7 @@
drag = { mode: 'move', dx: ev.clientX - box.left, dy: ev.clientY - box.top };
}
widget.setPointerCapture(ev.pointerId);
widget.classList.add('is-dragging');
ev.preventDefault();
});
@@ -1061,16 +1011,16 @@
}
});
widget.addEventListener('pointerup', function (ev) {
function endDrag(ev) {
if (!drag) return;
drag = null;
widget.classList.remove('is-dragging');
widget.releasePointerCapture(ev.pointerId);
});
}
widget.addEventListener('pointerup', endDrag);
widget.addEventListener('pointercancel', endDrag);
})();
loadLcdAlphabet(function () {
updateClockWidget();
setInterval(updateClockWidget, 1000);
});
})();
</script>
</body>