mirror of
git://f0xx.org/android_cast
synced 2026-07-29 07:58:10 +03:00
726 lines
29 KiB
HTML
726 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Android Cast — Project hub</title>
|
|
<script>
|
|
(function () {
|
|
var t = localStorage.getItem('crash_console_theme');
|
|
if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
|
|
})();
|
|
</script>
|
|
<link rel="stylesheet" href="/app/androidcast_project/crashes/assets/css/app.css">
|
|
<link rel="stylesheet" href="hub.css?v=20260527v">
|
|
<link rel="stylesheet" href="hub-logo-layers.css">
|
|
</head>
|
|
<body class="hub-page">
|
|
<div id="overtime-alphabet-host" hidden aria-hidden="true"></div>
|
|
<div id="hub-logo-stage" class="hub-logo-stage" hidden aria-hidden="true"></div>
|
|
<section class="hub-clock-widget" id="hub-clock-widget" aria-label="World clock widget">
|
|
<div class="cw-row cw-row-main">
|
|
<div class="cw-cell cw-main-cell">
|
|
<div class="cw-line cw-line-time">
|
|
<strong class="cw-time-main">
|
|
<span id="cw-hm-lcd" class="ot-lcd-line ot-lcd-bold" aria-label="Hours and minutes"></span>
|
|
<span id="cw-ss-lcd" class="ot-lcd-line ot-lcd-sec ot-lcd-bold" aria-label="Seconds"></span>
|
|
<span id="cw-tz-text" class="ot-lcd-line ot-lcd-tz ot-lcd-bold" aria-label="Timezone offset"></span>
|
|
</strong>
|
|
</div>
|
|
<div class="cw-line cw-line-region" id="cw-region">EUROPE/WARSAW</div>
|
|
<div class="cw-line cw-line-date" id="cw-date-line">WED 27 MAY 2026</div>
|
|
</div>
|
|
</div>
|
|
<div class="cw-row cw-row-mid">
|
|
<div class="cw-cell"></div>
|
|
<div class="cw-cell"></div>
|
|
<div class="cw-cell"></div>
|
|
<div class="cw-cell"></div>
|
|
</div>
|
|
<div class="cw-row cw-row-world" id="cw-world-row"></div>
|
|
</section>
|
|
<div id="hub-docs-modal" class="hub-docs-modal" hidden aria-hidden="true">
|
|
<div class="hub-docs-backdrop" data-close-docs></div>
|
|
<section class="hub-docs-panel card card--lift" role="dialog" aria-modal="true" aria-labelledby="hub-docs-title">
|
|
<header class="hub-docs-header">
|
|
<h2 id="hub-docs-title">Deployment model</h2>
|
|
<button type="button" class="hub-docs-close" data-close-docs aria-label="Close">x</button>
|
|
</header>
|
|
<div class="hub-docs-layout">
|
|
<aside class="hub-docs-toc detail-tree" id="hub-docs-toc" aria-label="Table of contents">
|
|
<p class="muted hub-docs-toc-title">Table of contents</p>
|
|
</aside>
|
|
<div class="hub-docs-panels" id="hub-docs-panels"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="shell hub-shell">
|
|
<main class="main-pane hub-main">
|
|
<header class="hub-header">
|
|
<div class="hub-brand">
|
|
<img class="hub-logo-mark" src="assets/hub-logo-transparent.svg" alt="" width="112" height="84" decoding="async">
|
|
<h1 class="hub-title">Android Cast</h1>
|
|
</div>
|
|
<p class="muted hub-subtitle">Project hub</p>
|
|
<label class="toolbar-select hub-theme">
|
|
<span>Theme</span>
|
|
<select id="theme-select" aria-label="UI theme">
|
|
<option value="dark">Dark</option>
|
|
<option value="light">Light</option>
|
|
</select>
|
|
</label>
|
|
</header>
|
|
<nav class="hub-cards cards cards--lift" aria-label="Android Cast apps">
|
|
<a class="hub-card card card--lift" href="crashes/?view=reports">
|
|
<span class="hub-card-icon" aria-hidden="true">
|
|
<span class="nav-icon nav-icon--reports"></span>
|
|
</span>
|
|
<span class="hub-card-label">AndroidCast reports</span>
|
|
</a>
|
|
<a class="hub-card card card--lift" href="git/">
|
|
<span class="hub-card-icon" aria-hidden="true">
|
|
<span class="nav-icon nav-icon--git"></span>
|
|
</span>
|
|
<span class="hub-card-label">AndroidCast git</span>
|
|
</a>
|
|
<a class="hub-card card card--lift" href="crashes/?view=tickets">
|
|
<span class="hub-card-icon" aria-hidden="true">
|
|
<span class="nav-icon nav-icon--tickets"></span>
|
|
</span>
|
|
<span class="hub-card-label">AndroidCast tickets</span>
|
|
</a>
|
|
</nav>
|
|
</main>
|
|
</div>
|
|
<footer class="bottom-bar">(c) Anton Afanaasyeu</footer>
|
|
<script>
|
|
(function () {
|
|
var sel = document.getElementById('theme-select');
|
|
if (sel) {
|
|
var cur = document.documentElement.getAttribute('data-theme') || 'dark';
|
|
sel.value = cur;
|
|
sel.addEventListener('change', function () {
|
|
var v = sel.value;
|
|
document.documentElement.setAttribute('data-theme', v);
|
|
try { localStorage.setItem('crash_console_theme', v); } catch (e) {}
|
|
});
|
|
}
|
|
|
|
var stage = document.getElementById('hub-logo-stage');
|
|
if (!stage) return;
|
|
|
|
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
var supportsSvg = !!(svg && svg.createSVGRect);
|
|
var supportsLayout = !!(window.CSS && CSS.supports && CSS.supports('object-fit', 'cover'));
|
|
if (!supportsSvg || !supportsLayout) return;
|
|
|
|
var logoBuild = '20260527s';
|
|
var fragments = {
|
|
space: 'assets/hub-logo-fragment-space.svg',
|
|
globe: 'assets/hub-logo-fragment-globe.svg',
|
|
continents: 'assets/hub-logo-continents-mercator-globe.svg',
|
|
gridOverlay: 'assets/hub-logo-fragment-globe-grid-overlay.svg',
|
|
compass: 'assets/hub-logo-fragment-compass.svg'
|
|
};
|
|
var parts = {
|
|
full: ['space', 'globe', 'continents', 'gridOverlay', 'compass'],
|
|
space: ['space'],
|
|
globe: ['globe', 'continents', 'gridOverlay', 'compass']
|
|
};
|
|
|
|
var params = new URLSearchParams(window.location.search);
|
|
var part = (params.get('logoPart') || 'full').toLowerCase();
|
|
var grid = (params.get('grid') || '3').toLowerCase();
|
|
var list = parts[part] || parts.full;
|
|
|
|
function fragmentSrc(name) {
|
|
var base = fragments[name];
|
|
if (name === 'globe' && grid === '4') {
|
|
base = 'assets/hub-logo-fragment-globe-4x4.svg';
|
|
}
|
|
return base + '?v=' + logoBuild;
|
|
}
|
|
|
|
list.forEach(function (name) {
|
|
var img = document.createElement('img');
|
|
img.className = 'hub-logo-layer hub-logo-layer--' + name;
|
|
img.src = fragmentSrc(name);
|
|
img.alt = '';
|
|
img.decoding = 'async';
|
|
img.loading = 'lazy';
|
|
if (name === 'compass') {
|
|
img.id = 'hub-compass-layer';
|
|
img.setAttribute('role', 'button');
|
|
img.setAttribute('tabindex', '0');
|
|
img.setAttribute('aria-label', 'Open deployment model');
|
|
}
|
|
stage.appendChild(img);
|
|
});
|
|
|
|
var logoOpacity = params.get('logoOpacity');
|
|
if (logoOpacity) {
|
|
stage.style.opacity = logoOpacity;
|
|
}
|
|
|
|
stage.hidden = false;
|
|
stage.setAttribute('aria-hidden', 'true');
|
|
|
|
var docsModal = document.getElementById('hub-docs-modal');
|
|
var docsToc = document.getElementById('hub-docs-toc');
|
|
var docsPanels = document.getElementById('hub-docs-panels');
|
|
var compassLayer = document.getElementById('hub-compass-layer');
|
|
var docsApi = '/app/androidcast_project/crashes/api/hub_deploy_docs.php';
|
|
var docsQueue = [];
|
|
var docsLoading = false;
|
|
var docsCache = {};
|
|
var docsPanelsById = {};
|
|
|
|
function closeDocs() {
|
|
docsModal.hidden = true;
|
|
docsModal.setAttribute('aria-hidden', 'true');
|
|
}
|
|
|
|
function openDocs() {
|
|
docsModal.hidden = false;
|
|
docsModal.setAttribute('aria-hidden', 'false');
|
|
}
|
|
|
|
function xhrJson(url, onOk, onErr) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', url, true);
|
|
xhr.setRequestHeader('Accept', 'application/json');
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState !== 4) return;
|
|
if (xhr.status < 200 || xhr.status >= 300) {
|
|
if (onErr) onErr();
|
|
return;
|
|
}
|
|
try {
|
|
onOk(JSON.parse(xhr.responseText));
|
|
} catch (e) {
|
|
if (onErr) onErr();
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function ensureDocsPanel(sectionId, title) {
|
|
if (docsPanelsById[sectionId]) return docsPanelsById[sectionId];
|
|
var item = document.createElement('div');
|
|
item.className = 'detail-tree-item hub-docs-section';
|
|
item.dataset.section = sectionId;
|
|
var panelId = 'hub-doc-panel-' + sectionId;
|
|
item.innerHTML =
|
|
'<div class="detail-tree-row report-row" role="button" tabindex="0" data-tree-toggle data-controls="' + panelId + '">' +
|
|
'<span class="report-tree-cell">' +
|
|
'<button type="button" class="report-tree-toggle" aria-expanded="false" aria-controls="' + panelId + '" tabindex="-1">' +
|
|
'<span class="report-tree-arrow" aria-hidden="true"></span>' +
|
|
'</button>' +
|
|
'</span>' +
|
|
'<span class="detail-tree-caption">' + title + '</span>' +
|
|
'</div>' +
|
|
'<div class="detail-tree-body" id="' + panelId + '" hidden><p class="muted">Loading...</p></div>';
|
|
docsPanels.appendChild(item);
|
|
docsPanelsById[sectionId] = item;
|
|
bindDocsTree(item);
|
|
return item;
|
|
}
|
|
|
|
function bindDocsTree(root) {
|
|
root.querySelectorAll('[data-tree-toggle]').forEach(function (row) {
|
|
var panelId = row.getAttribute('data-controls');
|
|
var panel = panelId ? document.getElementById(panelId) : null;
|
|
var btn = row.querySelector('.report-tree-toggle');
|
|
if (!panel) return;
|
|
var toggle = function () {
|
|
var open = panel.hidden;
|
|
panel.hidden = !open;
|
|
if (btn) btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
|
row.classList.toggle('report-row--open', open);
|
|
};
|
|
if (btn) {
|
|
btn.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
toggle();
|
|
});
|
|
}
|
|
row.addEventListener('click', toggle);
|
|
row.addEventListener('keydown', function (e) {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
toggle();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderSectionHtml(sectionId, html) {
|
|
var item = docsPanelsById[sectionId];
|
|
if (!item) return;
|
|
var body = item.querySelector('.detail-tree-body');
|
|
var row = item.querySelector('.detail-tree-row');
|
|
var btn = item.querySelector('.report-tree-toggle');
|
|
if (body) body.innerHTML = html || '<p class="muted">No content.</p>';
|
|
if (body && row && body.hidden) {
|
|
body.hidden = false;
|
|
row.classList.add('report-row--open');
|
|
if (btn) btn.setAttribute('aria-expanded', 'true');
|
|
}
|
|
}
|
|
|
|
function pumpDocsQueue() {
|
|
if (docsLoading || docsQueue.length === 0) return;
|
|
docsLoading = true;
|
|
var sectionId = docsQueue.shift();
|
|
if (docsCache[sectionId]) {
|
|
renderSectionHtml(sectionId, docsCache[sectionId]);
|
|
docsLoading = false;
|
|
pumpDocsQueue();
|
|
return;
|
|
}
|
|
xhrJson(docsApi + '?section=' + encodeURIComponent(sectionId), function (payload) {
|
|
if (payload && payload.ok) {
|
|
docsCache[sectionId] = payload.html || '';
|
|
renderSectionHtml(sectionId, docsCache[sectionId]);
|
|
} else {
|
|
renderSectionHtml(sectionId, '<p class="muted">Failed to load section.</p>');
|
|
}
|
|
docsLoading = false;
|
|
pumpDocsQueue();
|
|
}, function () {
|
|
renderSectionHtml(sectionId, '<p class="muted">Network error while loading section.</p>');
|
|
docsLoading = false;
|
|
pumpDocsQueue();
|
|
});
|
|
}
|
|
|
|
function queueSection(sectionId, front) {
|
|
if (!sectionId) return;
|
|
if (front) docsQueue.unshift(sectionId);
|
|
else docsQueue.push(sectionId);
|
|
pumpDocsQueue();
|
|
}
|
|
|
|
function buildTocNode(node, parentEl) {
|
|
var children = node.children || [];
|
|
if (children.length) {
|
|
children.forEach(function (child) {
|
|
ensureDocsPanel(child.id, child.title);
|
|
queueSection(child.id, false);
|
|
});
|
|
return;
|
|
}
|
|
ensureDocsPanel(node.id, node.title);
|
|
queueSection(node.id, false);
|
|
}
|
|
|
|
function openDeploymentModel(prioritySection) {
|
|
openDocs();
|
|
docsPanels.innerHTML = '';
|
|
docsPanelsById = {};
|
|
docsCache = {};
|
|
docsQueue = [];
|
|
docsLoading = false;
|
|
docsToc.innerHTML = '<p class="muted hub-docs-toc-title">Table of contents</p>';
|
|
|
|
xhrJson(docsApi + '?action=toc', function (payload) {
|
|
if (!payload || !payload.ok || !payload.sections) {
|
|
docsPanels.innerHTML = '<p class="muted">Failed to load table of contents.</p>';
|
|
return;
|
|
}
|
|
payload.sections.forEach(function (node) {
|
|
var group = document.createElement('div');
|
|
group.className = 'hub-docs-toc-group';
|
|
var head = document.createElement('button');
|
|
head.type = 'button';
|
|
head.className = 'hub-docs-toc-head';
|
|
head.textContent = node.title;
|
|
head.dataset.section = node.id;
|
|
head.addEventListener('click', function () {
|
|
var kids = node.children || [];
|
|
if (kids.length) queueSection(kids[0].id, true);
|
|
else queueSection(node.id, true);
|
|
});
|
|
group.appendChild(head);
|
|
(node.children || []).forEach(function (child) {
|
|
var leaf = document.createElement('button');
|
|
leaf.type = 'button';
|
|
leaf.className = 'hub-docs-toc-leaf';
|
|
leaf.textContent = child.title;
|
|
leaf.dataset.section = child.id;
|
|
leaf.addEventListener('click', function () { queueSection(child.id, true); });
|
|
group.appendChild(leaf);
|
|
});
|
|
docsToc.appendChild(group);
|
|
buildTocNode(node, docsPanels);
|
|
});
|
|
if (prioritySection) queueSection(prioritySection, true);
|
|
else if (payload.default_section) queueSection(payload.default_section, true);
|
|
}, function () {
|
|
docsPanels.innerHTML = '<p class="muted">Network error while loading deployment model.</p>';
|
|
});
|
|
}
|
|
|
|
function bindCompassOpen() {
|
|
if (!compassLayer) return;
|
|
var open = function () { openDeploymentModel(); };
|
|
compassLayer.addEventListener('click', open);
|
|
compassLayer.addEventListener('keydown', function (ev) {
|
|
if (ev.key === 'Enter' || ev.key === ' ') {
|
|
ev.preventDefault();
|
|
open();
|
|
}
|
|
});
|
|
}
|
|
bindCompassOpen();
|
|
|
|
docsModal.addEventListener('click', function (ev) {
|
|
var target = ev.target;
|
|
if (!(target instanceof Element)) return;
|
|
if (target.hasAttribute('data-close-docs')) closeDocs();
|
|
});
|
|
document.addEventListener('keydown', function (ev) {
|
|
if (ev.key === 'Escape' && !docsModal.hidden) closeDocs();
|
|
});
|
|
|
|
var cityLabels = {
|
|
'America/New_York': 'NEW YORK',
|
|
'Europe/Moscow': 'MOSCOW',
|
|
'Asia/Shanghai': 'BEIJING',
|
|
'Africa/Johannesburg': 'CAPETOWN'
|
|
};
|
|
var roman = ['XII', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI'];
|
|
|
|
function pad2(v) { return String(v).padStart(2, '0'); }
|
|
function systemZone() { return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'; }
|
|
|
|
function secondaryZones(primary) {
|
|
var preferred = ['America/New_York', 'Europe/Moscow', 'Asia/Shanghai'];
|
|
var list = preferred.filter(function (z) { return z !== primary; });
|
|
while (list.length < 3) {
|
|
if (!list.includes('Africa/Johannesburg') && primary !== 'Africa/Johannesburg') list.push('Africa/Johannesburg');
|
|
else list.push('UTC');
|
|
}
|
|
return list.slice(0, 3);
|
|
}
|
|
|
|
function timeParts(date, zone) {
|
|
var parts = new Intl.DateTimeFormat('en-US', {
|
|
timeZone: zone, hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit'
|
|
}).formatToParts(date);
|
|
var map = {};
|
|
parts.forEach(function (p) { if (p.type !== 'literal') map[p.type] = p.value; });
|
|
return { hh: map.hour || '00', mm: map.minute || '00', ss: map.second || '00' };
|
|
}
|
|
|
|
function formatDate(date, zone) {
|
|
var parts = new Intl.DateTimeFormat('en-US', {
|
|
timeZone: zone, weekday: 'short', day: '2-digit', month: 'short', year: 'numeric'
|
|
}).formatToParts(date);
|
|
var map = {};
|
|
parts.forEach(function (p) { if (p.type !== 'literal') map[p.type] = p.value; });
|
|
return (map.weekday || '---').slice(0, 3).toUpperCase() + ' '
|
|
+ (map.day || '00') + ' '
|
|
+ (map.month || '---').slice(0, 3).toUpperCase() + ' '
|
|
+ (map.year || '0000');
|
|
}
|
|
|
|
function buildWorldClock(tz) {
|
|
var cell = document.createElement('div');
|
|
cell.className = 'cw-cell cw-world-cell';
|
|
var label = document.createElement('div');
|
|
label.className = 'cw-world-label';
|
|
label.textContent = cityLabels[tz] || tz.toUpperCase();
|
|
cell.appendChild(label);
|
|
|
|
var dial = document.createElement('div');
|
|
dial.className = 'cw-dial';
|
|
for (var i = 0; i < 12; i++) {
|
|
var n = document.createElement('div');
|
|
n.className = 'cw-roman';
|
|
if (i === 0 || i === 3 || i === 6 || i === 9) n.className += ' cw-roman-major';
|
|
else n.className += ' cw-roman-minor';
|
|
n.style.setProperty('--i', String(i));
|
|
n.textContent = roman[i];
|
|
dial.appendChild(n);
|
|
}
|
|
|
|
var hour = document.createElement('div');
|
|
hour.className = 'cw-hand cw-hour';
|
|
var minute = document.createElement('div');
|
|
minute.className = 'cw-hand cw-minute';
|
|
var second = document.createElement('div');
|
|
second.className = 'cw-hand cw-second';
|
|
var pin = document.createElement('div');
|
|
pin.className = 'cw-pin';
|
|
dial.appendChild(hour);
|
|
dial.appendChild(minute);
|
|
dial.appendChild(second);
|
|
dial.appendChild(pin);
|
|
cell.appendChild(dial);
|
|
|
|
return { tz: tz, hour: hour, minute: minute, second: second, root: cell };
|
|
}
|
|
|
|
var overtimeReady = false;
|
|
var overtimeSymbolIds = {};
|
|
|
|
function overtimeSymbolId(ch) {
|
|
if (ch >= '0' && ch <= '9') return 'ot-' + ch;
|
|
if (ch === ':') return 'ot-colon';
|
|
if (ch === '+') return 'ot-plus';
|
|
if (ch === '-') return 'ot-minus';
|
|
if (ch === ' ') return 'ot-space';
|
|
if (ch >= 'A' && ch <= 'Z') return 'ot-' + ch;
|
|
return null;
|
|
}
|
|
|
|
function loadOvertimeAlphabet(done) {
|
|
var host = document.getElementById('overtime-alphabet-host');
|
|
if (!host) { done(false); return; }
|
|
fetch('assets/overtime-01-alphabet.svg?v=' + logoBuild)
|
|
.then(function (res) { return res.text(); })
|
|
.then(function (svgText) {
|
|
host.innerHTML = svgText;
|
|
host.querySelectorAll('symbol').forEach(function (sym) {
|
|
if (sym.id) overtimeSymbolIds[sym.id] = sym;
|
|
});
|
|
overtimeReady = true;
|
|
done(true);
|
|
})
|
|
.catch(function () { done(false); });
|
|
}
|
|
|
|
function buildGlyphGrid(svg, vb) {
|
|
var seg = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
|
seg.setAttribute('class', 'ot-grid');
|
|
var w = vb.width || 20;
|
|
var h = vb.height || 32;
|
|
var hPad = Math.max(1, w * 0.12);
|
|
var topY = Math.max(1, h * 0.04);
|
|
var midY = h * 0.47;
|
|
var botY = h * 0.86;
|
|
var segW = Math.max(6, w - hPad * 2);
|
|
var segH = Math.max(2, h * 0.09);
|
|
var vW = Math.max(2, w * 0.14);
|
|
var vH = Math.max(6, h * 0.33);
|
|
var leftX = Math.max(1, hPad * 0.45);
|
|
var rightX = Math.max(leftX + vW + 1, w - leftX - vW);
|
|
var upperY = topY + segH;
|
|
var lowerY = midY + segH * 0.6;
|
|
var defs = [
|
|
[hPad, topY, segW, segH],
|
|
[leftX, upperY, vW, vH],
|
|
[rightX, upperY, vW, vH],
|
|
[hPad, midY, segW, segH],
|
|
[leftX, lowerY, vW, vH],
|
|
[rightX, lowerY, vW, vH],
|
|
[hPad, botY, segW, segH]
|
|
];
|
|
defs.forEach(function (d) {
|
|
var r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
r.setAttribute('x', d[0].toFixed(2));
|
|
r.setAttribute('y', d[1].toFixed(2));
|
|
r.setAttribute('width', d[2].toFixed(2));
|
|
r.setAttribute('height', d[3].toFixed(2));
|
|
r.setAttribute('rx', '1');
|
|
seg.appendChild(r);
|
|
});
|
|
if (w >= 22) {
|
|
var d1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
d1.setAttribute('x', (w * 0.34).toFixed(2));
|
|
d1.setAttribute('y', (h * 0.15).toFixed(2));
|
|
d1.setAttribute('width', Math.max(2, w * 0.10).toFixed(2));
|
|
d1.setAttribute('height', Math.max(6, h * 0.34).toFixed(2));
|
|
d1.setAttribute('rx', '1');
|
|
d1.setAttribute('transform', 'rotate(22 ' + (w * 0.39).toFixed(2) + ' ' + (h * 0.32).toFixed(2) + ')');
|
|
seg.appendChild(d1);
|
|
var d2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
d2.setAttribute('x', (w * 0.56).toFixed(2));
|
|
d2.setAttribute('y', (h * 0.15).toFixed(2));
|
|
d2.setAttribute('width', Math.max(2, w * 0.10).toFixed(2));
|
|
d2.setAttribute('height', Math.max(6, h * 0.34).toFixed(2));
|
|
d2.setAttribute('rx', '1');
|
|
d2.setAttribute('transform', 'rotate(-22 ' + (w * 0.61).toFixed(2) + ' ' + (h * 0.32).toFixed(2) + ')');
|
|
seg.appendChild(d2);
|
|
}
|
|
svg.appendChild(seg);
|
|
}
|
|
|
|
function renderOvertimeText(el, text, opts) {
|
|
opts = opts || {};
|
|
if (!el) return;
|
|
el.innerHTML = '';
|
|
if (!overtimeReady) {
|
|
el.textContent = text;
|
|
return;
|
|
}
|
|
String(text).toUpperCase().split('').forEach(function (ch) {
|
|
var sid = overtimeSymbolId(ch);
|
|
if (!sid || !overtimeSymbolIds[sid]) return;
|
|
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 sym = overtimeSymbolIds[sid];
|
|
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
var viewBox = sym.getAttribute('viewBox') || '0 0 20 32';
|
|
svg.setAttribute('viewBox', viewBox);
|
|
svg.setAttribute('class', 'ot-glyph');
|
|
var vb = viewBox.split(/\s+/).map(function (v) { return Number(v) || 0; });
|
|
buildGlyphGrid(svg, { width: vb[2] || 20, height: vb[3] || 32 });
|
|
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
|
use.setAttribute('href', '#' + sid);
|
|
use.setAttribute('class', 'ot-active');
|
|
svg.appendChild(use);
|
|
wrap.appendChild(svg);
|
|
el.appendChild(wrap);
|
|
});
|
|
}
|
|
|
|
function renderOvertimeDigits(el, text, blinkColon, bold) {
|
|
renderOvertimeText(el, text, { blinkColon: blinkColon, bold: bold });
|
|
}
|
|
|
|
function regionLabel(tz) {
|
|
var parts = tz.split('/');
|
|
if (parts.length >= 2) {
|
|
return parts[0].replace(/_/g, ' ').toUpperCase() + '/' + parts[parts.length - 1].replace(/_/g, ' ').toUpperCase();
|
|
}
|
|
return tz.toUpperCase();
|
|
}
|
|
|
|
function gmtOffsetLabel(date, tz) {
|
|
try {
|
|
var parts = new Intl.DateTimeFormat('en-US', { timeZone: tz, timeZoneName: 'shortOffset' }).formatToParts(date);
|
|
var name = parts.find(function (p) { return p.type === 'timeZoneName'; });
|
|
if (name && name.value) {
|
|
return name.value.replace('GMT', 'GMT').replace('UTC', 'GMT').toUpperCase();
|
|
}
|
|
} catch (e) {}
|
|
return 'GMT+0';
|
|
}
|
|
|
|
function formatDateLine(date, zone) {
|
|
var parts = new Intl.DateTimeFormat('en-US', {
|
|
timeZone: zone, weekday: 'short', day: '2-digit', month: 'short', year: 'numeric'
|
|
}).formatToParts(date);
|
|
var map = {};
|
|
parts.forEach(function (p) { if (p.type !== 'literal') map[p.type] = p.value; });
|
|
return (map.weekday || '---').slice(0, 3).toUpperCase() + ' '
|
|
+ String(Number(map.day || '0')).padStart(2, '0') + ' '
|
|
+ (map.month || '---').slice(0, 3).toUpperCase() + ' '
|
|
+ (map.year || '0000');
|
|
}
|
|
|
|
var primaryTz = systemZone();
|
|
var worldRow = document.getElementById('cw-world-row');
|
|
var secondary = secondaryZones(primaryTz).map(function (tz) {
|
|
var model = buildWorldClock(tz);
|
|
worldRow.appendChild(model.root);
|
|
return model;
|
|
});
|
|
|
|
function updateClockWidget() {
|
|
var now = new Date();
|
|
var p = timeParts(now, primaryTz);
|
|
renderOvertimeDigits(document.getElementById('cw-hm-lcd'), p.hh + ':' + p.mm, false, true);
|
|
renderOvertimeDigits(document.getElementById('cw-ss-lcd'), ':' + p.ss, true, true);
|
|
renderOvertimeText(document.getElementById('cw-tz-text'), gmtOffsetLabel(now, primaryTz), { bold: true });
|
|
document.getElementById('cw-region').textContent = regionLabel(primaryTz);
|
|
document.getElementById('cw-date-line').textContent = formatDateLine(now, primaryTz);
|
|
|
|
secondary.forEach(function (clock) {
|
|
var t = timeParts(now, clock.tz);
|
|
var h = Number(t.hh), m = Number(t.mm), s = Number(t.ss);
|
|
var hDeg = ((h % 12) + (m / 60) + (s / 3600)) * 30;
|
|
var mDeg = (m + (s / 60)) * 6;
|
|
var sDeg = s * 6;
|
|
clock.hour.style.transform = 'translate(-50%, -100%) rotate(' + hDeg + 'deg)';
|
|
clock.minute.style.transform = 'translate(-50%, -100%) rotate(' + mDeg + 'deg)';
|
|
clock.second.style.transform = 'translate(-50%, -100%) rotate(' + sDeg + 'deg)';
|
|
});
|
|
}
|
|
|
|
(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 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);
|
|
h.appendChild(svg);
|
|
widget.appendChild(h);
|
|
});
|
|
|
|
var drag = null;
|
|
widget.addEventListener('pointerdown', function (ev) {
|
|
var target = ev.target;
|
|
if (!(target instanceof Element)) return;
|
|
var box = widget.getBoundingClientRect();
|
|
var handle = target.closest('[data-resize]');
|
|
var resizeDir = handle ? handle.getAttribute('data-resize') : null;
|
|
if (resizeDir) {
|
|
drag = {
|
|
mode: 'resize',
|
|
dir: resizeDir,
|
|
x: ev.clientX, y: ev.clientY,
|
|
left: box.left, top: box.top, width: box.width, height: box.height
|
|
};
|
|
} else {
|
|
drag = { mode: 'move', dx: ev.clientX - box.left, dy: ev.clientY - box.top };
|
|
}
|
|
widget.setPointerCapture(ev.pointerId);
|
|
ev.preventDefault();
|
|
});
|
|
|
|
widget.addEventListener('pointermove', function (ev) {
|
|
if (!drag) return;
|
|
if (drag.mode === 'move') {
|
|
widget.style.left = Math.max(0, ev.clientX - drag.dx) + 'px';
|
|
widget.style.top = Math.max(0, ev.clientY - drag.dy) + 'px';
|
|
} else {
|
|
var minW = 1, minH = 1;
|
|
var dx = ev.clientX - drag.x;
|
|
var dy = ev.clientY - drag.y;
|
|
var left = drag.left, top = drag.top, width = drag.width, height = drag.height;
|
|
if (drag.dir.indexOf('e') !== -1) width = Math.max(minW, drag.width + dx);
|
|
if (drag.dir.indexOf('s') !== -1) height = Math.max(minH, drag.height + dy);
|
|
if (drag.dir.indexOf('w') !== -1) {
|
|
width = Math.max(minW, drag.width - dx);
|
|
left = drag.left + (drag.width - width);
|
|
}
|
|
if (drag.dir.indexOf('n') !== -1) {
|
|
height = Math.max(minH, drag.height - dy);
|
|
top = drag.top + (drag.height - height);
|
|
}
|
|
widget.style.left = Math.max(0, left) + 'px';
|
|
widget.style.top = Math.max(0, top) + 'px';
|
|
widget.style.width = width + 'px';
|
|
widget.style.minWidth = '';
|
|
widget.style.transform = 'none';
|
|
}
|
|
});
|
|
|
|
widget.addEventListener('pointerup', function (ev) {
|
|
if (!drag) return;
|
|
drag = null;
|
|
widget.releasePointerCapture(ev.pointerId);
|
|
});
|
|
})();
|
|
loadOvertimeAlphabet(function () {
|
|
updateClockWidget();
|
|
setInterval(updateClockWidget, 1000);
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|