319 lines
12 KiB
JavaScript
319 lines
12 KiB
JavaScript
|
/**
|
|||
|
|
* OxiCloud – Notification Bell Module
|
|||
|
|
*
|
|||
|
|
* Centralised notification system that renders items inside the bell dropdown
|
|||
|
|
* in the top-bar. Upload progress, quota errors, and general messages all
|
|||
|
|
* go through this module.
|
|||
|
|
*
|
|||
|
|
* Public API (on window.notifications):
|
|||
|
|
* addUploadBatch(totalFiles) → batchId
|
|||
|
|
* updateFile(batchId, fileName, pct, status)
|
|||
|
|
* finishBatch(batchId, successCount, totalFiles)
|
|||
|
|
* addNotification({ icon, iconClass, title, text })
|
|||
|
|
* clear()
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const notifications = (() => {
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
/* ── state ──────────────────────────────────────────────── */
|
|||
|
|
let _badgeCount = 0;
|
|||
|
|
let _batchSeq = 0;
|
|||
|
|
const _batches = {}; // batchId → { el, files:{}, totalFiles }
|
|||
|
|
|
|||
|
|
/* ── DOM refs (resolved lazily) ─────────────────────────── */
|
|||
|
|
const $ = (id) => document.getElementById(id);
|
|||
|
|
|
|||
|
|
/* ── bell toggle ────────────────────────────────────────── */
|
|||
|
|
function _initBell() {
|
|||
|
|
const bellBtn = $('notif-bell-btn');
|
|||
|
|
const wrapper = $('notif-wrapper');
|
|||
|
|
const clearBtn = $('notif-clear-btn');
|
|||
|
|
|
|||
|
|
if (!bellBtn) return;
|
|||
|
|
|
|||
|
|
bellBtn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const open = wrapper.classList.toggle('open');
|
|||
|
|
bellBtn.classList.toggle('active', open);
|
|||
|
|
|
|||
|
|
// Close user-menu if it's open
|
|||
|
|
const um = $('user-menu-wrapper');
|
|||
|
|
if (um) um.classList.remove('open');
|
|||
|
|
|
|||
|
|
if (open) _clearBadge();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Close on outside click
|
|||
|
|
document.addEventListener('click', (e) => {
|
|||
|
|
if (!wrapper.contains(e.target)) {
|
|||
|
|
wrapper.classList.remove('open');
|
|||
|
|
bellBtn.classList.remove('active');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Clear all
|
|||
|
|
if (clearBtn) {
|
|||
|
|
clearBtn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
clear();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── badge helpers ──────────────────────────────────────── */
|
|||
|
|
function _incrementBadge() {
|
|||
|
|
_badgeCount++;
|
|||
|
|
_renderBadge();
|
|||
|
|
_ringBell();
|
|||
|
|
}
|
|||
|
|
function _clearBadge() {
|
|||
|
|
_badgeCount = 0;
|
|||
|
|
_renderBadge();
|
|||
|
|
}
|
|||
|
|
function _renderBadge() {
|
|||
|
|
const badge = $('notif-badge');
|
|||
|
|
if (!badge) return;
|
|||
|
|
if (_badgeCount > 0) {
|
|||
|
|
badge.style.display = '';
|
|||
|
|
badge.textContent = _badgeCount > 99 ? '99+' : _badgeCount;
|
|||
|
|
} else {
|
|||
|
|
badge.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function _ringBell() {
|
|||
|
|
const btn = $('notif-bell-btn');
|
|||
|
|
if (!btn) return;
|
|||
|
|
btn.classList.remove('ring');
|
|||
|
|
// Force reflow so the animation restarts
|
|||
|
|
void btn.offsetWidth;
|
|||
|
|
btn.classList.add('ring');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── empty state ────────────────────────────────────────── */
|
|||
|
|
function _showEmptyIfNeeded() {
|
|||
|
|
const body = $('notif-panel-body');
|
|||
|
|
const empty = $('notif-empty');
|
|||
|
|
if (!body || !empty) return;
|
|||
|
|
// Any real items?
|
|||
|
|
const hasItems = body.querySelector('.notif-item') !== null;
|
|||
|
|
empty.style.display = hasItems ? 'none' : '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── generic notification ───────────────────────────────── */
|
|||
|
|
function addNotification({ icon = 'fa-info-circle', iconClass = 'upload', title = '', text = '' }) {
|
|||
|
|
const body = $('notif-panel-body');
|
|||
|
|
if (!body) return;
|
|||
|
|
|
|||
|
|
const item = document.createElement('div');
|
|||
|
|
item.className = 'notif-item';
|
|||
|
|
item.innerHTML = `
|
|||
|
|
<div class="notif-item-icon ${iconClass}"><i class="fas ${icon}"></i></div>
|
|||
|
|
<div class="notif-item-body">
|
|||
|
|
<div class="notif-item-title">${_esc(title)}</div>
|
|||
|
|
<div class="notif-item-text" title="${_esc(text)}">${_esc(text)}</div>
|
|||
|
|
<div class="notif-item-time">${_timeAgo()}</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
// Insert at top
|
|||
|
|
body.insertBefore(item, body.firstChild);
|
|||
|
|
|
|||
|
|
// If panel is closed, bump badge
|
|||
|
|
const wrapper = $('notif-wrapper');
|
|||
|
|
if (!wrapper || !wrapper.classList.contains('open')) {
|
|||
|
|
_incrementBadge();
|
|||
|
|
}
|
|||
|
|
_showEmptyIfNeeded();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── upload batch API ───────────────────────────────────── */
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Start tracking a new upload batch. Returns a batchId string.
|
|||
|
|
* This also auto-opens the panel so users see progress.
|
|||
|
|
*/
|
|||
|
|
function addUploadBatch(totalFiles) {
|
|||
|
|
const batchId = 'batch-' + (++_batchSeq);
|
|||
|
|
const body = $('notif-panel-body');
|
|||
|
|
if (!body) return batchId;
|
|||
|
|
|
|||
|
|
const item = document.createElement('div');
|
|||
|
|
item.className = 'notif-item';
|
|||
|
|
item.id = batchId;
|
|||
|
|
|
|||
|
|
const uploadingText = (window.i18n && window.i18n.t) ? window.i18n.t('upload.uploading') : 'Uploading…';
|
|||
|
|
item.innerHTML = `
|
|||
|
|
<div class="notif-item-icon upload"><i class="fas fa-cloud-upload-alt"></i></div>
|
|||
|
|
<div class="notif-item-body">
|
|||
|
|
<div class="notif-item-title">${_esc(uploadingText)}</div>
|
|||
|
|
<div class="notif-upload-files" id="${batchId}-files"></div>
|
|||
|
|
<div class="notif-upload-progress">
|
|||
|
|
<div class="notif-upload-bar"><div class="notif-upload-fill" id="${batchId}-fill"></div></div>
|
|||
|
|
<div class="notif-upload-detail">
|
|||
|
|
<span class="notif-upload-pct" id="${batchId}-pct">0%</span>
|
|||
|
|
<span class="notif-upload-stats" id="${batchId}-stats">0 / ${totalFiles}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="notif-item-time">${_timeAgo()}</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
// Insert at top
|
|||
|
|
body.insertBefore(item, body.firstChild);
|
|||
|
|
|
|||
|
|
_batches[batchId] = { el: item, files: {}, totalFiles, completed: 0, successCount: 0 };
|
|||
|
|
_showEmptyIfNeeded();
|
|||
|
|
|
|||
|
|
// Auto open
|
|||
|
|
const wrapper = $('notif-wrapper');
|
|||
|
|
const bellBtn = $('notif-bell-btn');
|
|||
|
|
if (wrapper && !wrapper.classList.contains('open')) {
|
|||
|
|
wrapper.classList.add('open');
|
|||
|
|
if (bellBtn) bellBtn.classList.add('active');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return batchId;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Add / update a single file row inside a batch.
|
|||
|
|
* @param {string} batchId
|
|||
|
|
* @param {string} fileName
|
|||
|
|
* @param {number} pct 0-100
|
|||
|
|
* @param {'uploading'|'done'|'error'} status
|
|||
|
|
*/
|
|||
|
|
function updateFile(batchId, fileName, pct, status) {
|
|||
|
|
const batch = _batches[batchId];
|
|||
|
|
if (!batch) return;
|
|||
|
|
|
|||
|
|
const filesEl = $(batchId + '-files');
|
|||
|
|
if (!filesEl) return;
|
|||
|
|
|
|||
|
|
let row = batch.files[fileName];
|
|||
|
|
if (!row) {
|
|||
|
|
row = document.createElement('div');
|
|||
|
|
row.className = 'notif-upload-file-row';
|
|||
|
|
row.style.cssText = 'display:flex;align-items:center;gap:6px;padding:2px 0;font-size:12px;';
|
|||
|
|
row.innerHTML = `
|
|||
|
|
<span class="notif-file-icon" style="width:16px;text-align:center;color:#999;flex-shrink:0;"><i class="fas fa-spinner fa-spin"></i></span>
|
|||
|
|
<span class="notif-file-name" style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#64748b;" title="${_esc(fileName)}">${_esc(fileName)}</span>
|
|||
|
|
<span class="notif-file-pct" style="width:34px;text-align:right;color:#94a3b8;flex-shrink:0;">0%</span>
|
|||
|
|
`;
|
|||
|
|
filesEl.appendChild(row);
|
|||
|
|
batch.files[fileName] = row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const iconEl = row.querySelector('.notif-file-icon');
|
|||
|
|
const pctEl = row.querySelector('.notif-file-pct');
|
|||
|
|
|
|||
|
|
pctEl.textContent = pct + '%';
|
|||
|
|
|
|||
|
|
if (status === 'done') {
|
|||
|
|
iconEl.innerHTML = '<i class="fas fa-check-circle" style="color:#34c759"></i>';
|
|||
|
|
pctEl.textContent = '100%';
|
|||
|
|
} else if (status === 'error') {
|
|||
|
|
iconEl.innerHTML = '<i class="fas fa-exclamation-circle" style="color:#ff3b30"></i>';
|
|||
|
|
pctEl.textContent = 'ERR';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Mark a file as completed within a batch (updates overall bar).
|
|||
|
|
*/
|
|||
|
|
function fileCompleted(batchId, success) {
|
|||
|
|
const batch = _batches[batchId];
|
|||
|
|
if (!batch) return;
|
|||
|
|
batch.completed++;
|
|||
|
|
if (success) batch.successCount++;
|
|||
|
|
|
|||
|
|
const pctVal = Math.round((batch.completed / batch.totalFiles) * 100);
|
|||
|
|
const fillEl = $(batchId + '-fill');
|
|||
|
|
const pctEl = $(batchId + '-pct');
|
|||
|
|
const statsEl = $(batchId + '-stats');
|
|||
|
|
|
|||
|
|
if (fillEl) fillEl.style.width = pctVal + '%';
|
|||
|
|
if (pctEl) pctEl.textContent = pctVal + '%';
|
|||
|
|
if (statsEl) statsEl.textContent = `${batch.completed} / ${batch.totalFiles}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Finalise a batch – update icon and title.
|
|||
|
|
*/
|
|||
|
|
function finishBatch(batchId, successCount, totalFiles) {
|
|||
|
|
const batch = _batches[batchId];
|
|||
|
|
if (!batch) return;
|
|||
|
|
|
|||
|
|
const fillEl = $(batchId + '-fill');
|
|||
|
|
if (fillEl) {
|
|||
|
|
fillEl.style.width = '100%';
|
|||
|
|
fillEl.classList.add(successCount === totalFiles ? 'done' : 'error');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const titleEl = batch.el.querySelector('.notif-item-title');
|
|||
|
|
const iconEl = batch.el.querySelector('.notif-item-icon');
|
|||
|
|
|
|||
|
|
const completeText = (window.i18n && window.i18n.t)
|
|||
|
|
? window.i18n.t('upload.complete', { count: successCount, total: totalFiles })
|
|||
|
|
: `${successCount} / ${totalFiles} uploaded`;
|
|||
|
|
if (titleEl) titleEl.textContent = completeText;
|
|||
|
|
|
|||
|
|
if (iconEl) {
|
|||
|
|
if (successCount === totalFiles) {
|
|||
|
|
iconEl.className = 'notif-item-icon success';
|
|||
|
|
iconEl.innerHTML = '<i class="fas fa-check-circle"></i>';
|
|||
|
|
} else {
|
|||
|
|
iconEl.className = 'notif-item-icon error';
|
|||
|
|
iconEl.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// If the panel is closed, bump badge
|
|||
|
|
const wrapper = $('notif-wrapper');
|
|||
|
|
if (!wrapper || !wrapper.classList.contains('open')) {
|
|||
|
|
_incrementBadge();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── clear all ──────────────────────────────────────────── */
|
|||
|
|
function clear() {
|
|||
|
|
const body = $('notif-panel-body');
|
|||
|
|
if (!body) return;
|
|||
|
|
// Remove all notif-items
|
|||
|
|
body.querySelectorAll('.notif-item').forEach(el => el.remove());
|
|||
|
|
_clearBadge();
|
|||
|
|
_showEmptyIfNeeded();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── util ───────────────────────────────────────────────── */
|
|||
|
|
function _esc(s) {
|
|||
|
|
const d = document.createElement('div');
|
|||
|
|
d.textContent = s;
|
|||
|
|
return d.innerHTML;
|
|||
|
|
}
|
|||
|
|
function _timeAgo() {
|
|||
|
|
const now = new Date();
|
|||
|
|
const h = String(now.getHours()).padStart(2, '0');
|
|||
|
|
const m = String(now.getMinutes()).padStart(2, '0');
|
|||
|
|
return `${h}:${m}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── init on DOM ready ──────────────────────────────────── */
|
|||
|
|
if (document.readyState === 'loading') {
|
|||
|
|
document.addEventListener('DOMContentLoaded', _initBell);
|
|||
|
|
} else {
|
|||
|
|
_initBell();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ── public API ─────────────────────────────────────────── */
|
|||
|
|
return {
|
|||
|
|
addUploadBatch,
|
|||
|
|
updateFile,
|
|||
|
|
fileCompleted,
|
|||
|
|
finishBatch,
|
|||
|
|
addNotification,
|
|||
|
|
clear,
|
|||
|
|
};
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
window.notifications = notifications;
|