Initial commit — Meridian OS browser desktop demo
This commit is contained in:
71
js/core/auth.js
Normal file
71
js/core/auth.js
Normal file
@@ -0,0 +1,71 @@
|
||||
import State from './state.js';
|
||||
import Bus from './bus.js';
|
||||
|
||||
const Auth = (() => {
|
||||
function login(name) {
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed) return;
|
||||
const initials = trimmed.slice(0, 2).toUpperCase();
|
||||
State.set('user', { name: trimmed, initials });
|
||||
document.getElementById('login').classList.add('hidden');
|
||||
const desktop = document.getElementById('desktop');
|
||||
desktop.classList.remove('hidden');
|
||||
desktop.hidden = false;
|
||||
Bus.emit('user:login', { name: trimmed });
|
||||
// Persist login session
|
||||
localStorage.setItem('meridian:session', trimmed);
|
||||
}
|
||||
|
||||
function logout() {
|
||||
State.set('user', null);
|
||||
localStorage.removeItem('meridian:session');
|
||||
location.reload();
|
||||
}
|
||||
|
||||
function init() {
|
||||
const session = localStorage.getItem('meridian:session');
|
||||
if (session) {
|
||||
const trimmed = session.trim();
|
||||
if (trimmed) {
|
||||
const initials = trimmed.slice(0, 2).toUpperCase();
|
||||
State.set('user', { name: trimmed, initials });
|
||||
const loginEl = document.getElementById('login');
|
||||
if (loginEl) loginEl.classList.add('hidden');
|
||||
const desktop = document.getElementById('desktop');
|
||||
if (desktop) {
|
||||
desktop.classList.remove('hidden');
|
||||
desktop.hidden = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Wire login form
|
||||
const btn = document.getElementById('login-btn');
|
||||
const input = document.getElementById('login-input');
|
||||
const submit = () => { if (input && input.value.trim()) login(input.value); };
|
||||
if (btn) btn.addEventListener('click', submit);
|
||||
if (input) {
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') { e.preventDefault(); submit(); }
|
||||
});
|
||||
setTimeout(() => input.focus(), 50);
|
||||
}
|
||||
// Live clock on login screen
|
||||
const loginTime = document.getElementById('login-time');
|
||||
if (loginTime) {
|
||||
const tick = () => {
|
||||
const d = new Date();
|
||||
const hh = String(d.getHours()).padStart(2, '0');
|
||||
const mm = String(d.getMinutes()).padStart(2, '0');
|
||||
loginTime.textContent = `${hh}:${mm}`;
|
||||
};
|
||||
tick();
|
||||
setInterval(tick, 1000 * 30);
|
||||
}
|
||||
}
|
||||
|
||||
return { login, logout, init };
|
||||
})();
|
||||
|
||||
export default Auth;
|
||||
export { Auth };
|
||||
36
js/core/bus.js
Normal file
36
js/core/bus.js
Normal file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Simple pub/sub event bus.
|
||||
* on(evt, cb) - subscribe
|
||||
* emit(evt, data) - publish
|
||||
*/
|
||||
const Bus = (() => {
|
||||
const listeners = new Map();
|
||||
|
||||
return {
|
||||
on(evt, cb) {
|
||||
if (!listeners.has(evt)) listeners.set(evt, new Set());
|
||||
listeners.get(evt).add(cb);
|
||||
return () => this.off(evt, cb);
|
||||
},
|
||||
|
||||
off(evt, cb) {
|
||||
const set = listeners.get(evt);
|
||||
if (set) {
|
||||
set.delete(cb);
|
||||
if (set.size === 0) listeners.delete(evt);
|
||||
}
|
||||
},
|
||||
|
||||
emit(evt, data) {
|
||||
const set = listeners.get(evt);
|
||||
if (set) {
|
||||
for (const cb of set) {
|
||||
try { cb(data); } catch (e) { console.error(`Bus emit error (${evt}):`, e); }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
export default Bus;
|
||||
export { Bus };
|
||||
148
js/core/registry.js
Normal file
148
js/core/registry.js
Normal file
@@ -0,0 +1,148 @@
|
||||
import MeridianWM from './wm.js';
|
||||
import State from './state.js';
|
||||
import Bus from './bus.js';
|
||||
|
||||
const Registry = (() => {
|
||||
const APPS = {};
|
||||
let _launcherOpen = false;
|
||||
|
||||
function registerApp(def) {
|
||||
if (def.id) {
|
||||
APPS[def.id] = def;
|
||||
}
|
||||
}
|
||||
|
||||
function unregisterApp(id) {
|
||||
delete APPS[id];
|
||||
}
|
||||
|
||||
function getApp(id) {
|
||||
return APPS[id] || null;
|
||||
}
|
||||
|
||||
function launchApp(id) {
|
||||
const def = APPS[id];
|
||||
if (!def) {
|
||||
console.warn(`App ${id} not registered`);
|
||||
return;
|
||||
}
|
||||
|
||||
const title = def.title || id;
|
||||
const w = def.width || 640;
|
||||
const h = def.height || 480;
|
||||
|
||||
// Create window with a render-callback; wm will mount container then call it.
|
||||
const win = MeridianWM.openWindow({
|
||||
app: id,
|
||||
title,
|
||||
w, h,
|
||||
content: (container) => {
|
||||
// Tag container for per-app CSS scoping
|
||||
container.setAttribute('data-app', id);
|
||||
const api = {
|
||||
state: State,
|
||||
bus: Bus,
|
||||
close: () => MeridianWM.closeWindow(win && win.id),
|
||||
setTitle: (t) => {
|
||||
const el = document.getElementById(win && win.id);
|
||||
if (el) {
|
||||
const titleEl = el.querySelector('.m-window-title');
|
||||
if (titleEl) titleEl.textContent = t;
|
||||
}
|
||||
},
|
||||
};
|
||||
try {
|
||||
def.render(container, api);
|
||||
} catch (e) {
|
||||
container.textContent = `Error loading ${id}: ${e.message}`;
|
||||
console.error(`[${id}] render error`, e);
|
||||
}
|
||||
},
|
||||
});
|
||||
closeLauncher();
|
||||
}
|
||||
|
||||
function getRegisteredApps() {
|
||||
return Object.values(APPS);
|
||||
}
|
||||
|
||||
function toggleLauncher() {
|
||||
_launcherOpen = !_launcherOpen;
|
||||
const popover = document.getElementById('launcher-popover');
|
||||
const btn = document.getElementById('launcher');
|
||||
if (popover) {
|
||||
if (_launcherOpen) {
|
||||
renderLauncherApps(popover);
|
||||
popover.classList.remove('hidden');
|
||||
} else {
|
||||
popover.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
if (btn) {
|
||||
btn.classList.toggle('active', _launcherOpen);
|
||||
}
|
||||
return _launcherOpen;
|
||||
}
|
||||
|
||||
function closeLauncher() {
|
||||
_launcherOpen = false;
|
||||
const popover = document.getElementById('launcher-popover');
|
||||
const btn = document.getElementById('launcher');
|
||||
if (popover) popover.classList.add('hidden');
|
||||
if (btn) btn.classList.remove('active');
|
||||
}
|
||||
|
||||
function renderLauncherApps(popover) {
|
||||
const apps = getRegisteredApps();
|
||||
popover.innerHTML = '';
|
||||
if (apps.length === 0) {
|
||||
popover.innerHTML = '<div style="padding:12px;text-align:center;color:var(--text-faint);font-size:13px;">No apps registered</div>';
|
||||
return;
|
||||
}
|
||||
for (const app of apps) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'launcher-app-btn';
|
||||
btn.setAttribute('aria-label', `Launch ${app.title || app.id}`);
|
||||
btn.innerHTML = `
|
||||
<div class="launcher-app-icon">${app.icon || '◆'}</div>
|
||||
<div class="launcher-app-label">${escapeHtml(app.title || app.id)}</div>
|
||||
`;
|
||||
btn.addEventListener('click', () => launchApp(app.id));
|
||||
popover.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function init() {
|
||||
const btn = document.getElementById('launcher');
|
||||
if (btn) {
|
||||
btn.addEventListener('click', toggleLauncher);
|
||||
}
|
||||
|
||||
// Close launcher when clicking elsewhere
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (_launcherOpen && !e.target.closest('#launcher') && !e.target.closest('#launcher-popover')) {
|
||||
closeLauncher();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
APPS,
|
||||
registerApp,
|
||||
unregisterApp,
|
||||
getApp,
|
||||
launchApp,
|
||||
getRegisteredApps,
|
||||
toggleLauncher,
|
||||
init
|
||||
};
|
||||
})();
|
||||
|
||||
export default Registry;
|
||||
export { Registry };
|
||||
107
js/core/state.js
Normal file
107
js/core/state.js
Normal file
@@ -0,0 +1,107 @@
|
||||
/**
|
||||
* Central state store with persistence.
|
||||
* Keys: user, windows, wallpaper, achievements, connection
|
||||
*/
|
||||
const STORAGE_KEY = 'meridian:state';
|
||||
|
||||
const State = (() => {
|
||||
const listeners = new Map();
|
||||
let _state = loadState();
|
||||
|
||||
function loadState() {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (raw) {
|
||||
const parsed = JSON.parse(raw);
|
||||
// achievements is stored as array, reconstruct as Set
|
||||
if (parsed.achievements) {
|
||||
parsed._achievementSet = new Set(parsed.achievements);
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('State load failed:', e);
|
||||
}
|
||||
return {
|
||||
user: null,
|
||||
windows: [],
|
||||
wallpaper: 'graphite',
|
||||
achievements: [],
|
||||
_achievementSet: new Set(),
|
||||
connection: navigator.onLine
|
||||
};
|
||||
}
|
||||
|
||||
function saveState() {
|
||||
try {
|
||||
const toSave = {
|
||||
user: _state.user,
|
||||
windows: _state.windows,
|
||||
wallpaper: _state.wallpaper,
|
||||
achievements: Array.from(_state._achievementSet || _state.achievements)
|
||||
};
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
|
||||
} catch (e) {
|
||||
console.warn('State save failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function set(key, val) {
|
||||
_state[key] = val;
|
||||
saveState();
|
||||
notify(key);
|
||||
}
|
||||
|
||||
function get(key) {
|
||||
return _state[key];
|
||||
}
|
||||
|
||||
function subscribe(key, cb) {
|
||||
if (!listeners.has(key)) listeners.set(key, new Set());
|
||||
listeners.get(key).add(cb);
|
||||
// immediate call with current value
|
||||
try { cb(_state[key]); } catch (e) { console.error('State subscribe error:', e); }
|
||||
return () => off(key, cb);
|
||||
}
|
||||
|
||||
function off(key, cb) {
|
||||
const set = listeners.get(key);
|
||||
if (set) {
|
||||
set.delete(cb);
|
||||
if (set.size === 0) listeners.delete(key);
|
||||
}
|
||||
}
|
||||
|
||||
function notify(key) {
|
||||
const set = listeners.get(key);
|
||||
if (set) {
|
||||
for (const cb of set) {
|
||||
try { cb(_state[key]); } catch (e) { console.error('State notify error:', e); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addAchievement(id) {
|
||||
if (!_state._achievementSet) {
|
||||
_state._achievementSet = new Set(_state.achievements || []);
|
||||
_state.achievements = Array.from(_state._achievementSet);
|
||||
}
|
||||
_state._achievementSet.add(id);
|
||||
_state.achievements = Array.from(_state._achievementSet);
|
||||
saveState();
|
||||
notify('achievements');
|
||||
}
|
||||
|
||||
function initConnection() {
|
||||
_state.connection = navigator.onLine;
|
||||
window.addEventListener('online', () => { _state.connection = true; notify('connection'); saveState(); });
|
||||
window.addEventListener('offline', () => { _state.connection = false; notify('connection'); saveState(); });
|
||||
}
|
||||
|
||||
return {
|
||||
set, get, subscribe, off, addAchievement, initConnection
|
||||
};
|
||||
})();
|
||||
|
||||
export default State;
|
||||
export { State };
|
||||
284
js/core/wm.js
Normal file
284
js/core/wm.js
Normal file
@@ -0,0 +1,284 @@
|
||||
import State from './state.js';
|
||||
import Bus from './bus.js';
|
||||
|
||||
let windowIdCounter = 0;
|
||||
|
||||
function createWindow(options) {
|
||||
const { app, title, content, w = 640, h = 480 } = options;
|
||||
const id = 'win-' + (++windowIdCounter);
|
||||
|
||||
// Cascade position
|
||||
const count = State.get('windows').length;
|
||||
const offsetX = 40 + (count * 30) % 200;
|
||||
const offsetY = 30 + (count * 30) % 150;
|
||||
|
||||
const layer = document.getElementById('windows-layer');
|
||||
if (!layer) return null;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'm-window focused';
|
||||
el.id = id;
|
||||
el.style.left = offsetX + 'px';
|
||||
el.style.top = offsetY + 'px';
|
||||
el.style.width = w + 'px';
|
||||
el.style.height = h + 'px';
|
||||
el.style.zIndex = 10 + count;
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="m-window-header" data-wm-drag="${id}">
|
||||
<span class="m-window-title">${escapeHtml(title)}</span>
|
||||
<div class="m-window-controls">
|
||||
<button class="m-window-btn minimize-btn" aria-label="Minimize" data-wm-action="minimize" data-wm-target="${id}">∓</button>
|
||||
<button class="m-window-btn close-btn" aria-label="Close" data-wm-action="close" data-wm-target="${id}">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-window-body" data-wm-content="${id}"></div>
|
||||
<div class="m-window-resize" data-wm-resize="${id}"></div>
|
||||
`;
|
||||
|
||||
layer.appendChild(el);
|
||||
|
||||
// Render content
|
||||
const body = el.querySelector('.m-window-body');
|
||||
if (typeof content === 'string') {
|
||||
body.innerHTML = content;
|
||||
} else if (content instanceof HTMLElement) {
|
||||
body.innerHTML = '';
|
||||
body.appendChild(content);
|
||||
} else if (typeof content === 'function') {
|
||||
body.innerHTML = '';
|
||||
content(body);
|
||||
}
|
||||
|
||||
// Setup drag
|
||||
setupDrag(el, id);
|
||||
// Setup resize
|
||||
setupResize(el, id);
|
||||
// Setup focus
|
||||
el.addEventListener('mousedown', () => focusWindow(id));
|
||||
// Setup header button clicks
|
||||
el.querySelector('.minimize-btn').addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
minimizeWindow(id);
|
||||
});
|
||||
el.querySelector('.close-btn').addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
closeWindow(id);
|
||||
});
|
||||
|
||||
// Track in state
|
||||
const windows = State.get('windows');
|
||||
windows.push({ id, app, title, minimized: false });
|
||||
State.set('windows', windows);
|
||||
|
||||
Bus.emit('app:open', { app, id });
|
||||
|
||||
return id;
|
||||
}
|
||||
|
||||
function closeWindow(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
|
||||
// Find window data
|
||||
const windows = State.get('windows');
|
||||
const idx = windows.findIndex(w => w.id === id);
|
||||
if (idx !== -1) {
|
||||
const win = windows[idx];
|
||||
windows.splice(idx, 1);
|
||||
State.set('windows', windows);
|
||||
Bus.emit('app:close', { app: win.app, id });
|
||||
}
|
||||
|
||||
el.remove();
|
||||
}
|
||||
|
||||
function minimizeWindow(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
|
||||
el.classList.add('minimized');
|
||||
const windows = State.get('windows');
|
||||
const win = windows.find(w => w.id === id);
|
||||
if (win) win.minimized = true;
|
||||
State.set('windows', windows);
|
||||
|
||||
// If this was the focused window, focus the next available
|
||||
const focusable = windows.filter(w => !w.minimized);
|
||||
if (focusable.length > 0) {
|
||||
focusWindow(focusable[focusable.length - 1].id);
|
||||
}
|
||||
}
|
||||
|
||||
function focusWindow(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
|
||||
// Remove focus from all
|
||||
document.querySelectorAll('.m-window.focused').forEach(w => w.classList.remove('focused'));
|
||||
el.classList.add('focused');
|
||||
|
||||
// Bring to front
|
||||
const maxZ = Math.max(0, ...Array.from(document.querySelectorAll('.m-window')).map(w =>
|
||||
parseInt(w.style.zIndex || 0)
|
||||
));
|
||||
el.style.zIndex = maxZ + 1;
|
||||
|
||||
const windows = State.get('windows');
|
||||
const win = windows.find(w => w.id === id);
|
||||
if (win) {
|
||||
win.minimized = false;
|
||||
State.set('windows', windows);
|
||||
}
|
||||
|
||||
Bus.emit('window:focused', { id });
|
||||
}
|
||||
|
||||
function setupDrag(el, id) {
|
||||
const header = el.querySelector('.m-window-header');
|
||||
if (!header) return;
|
||||
|
||||
let isDragging = false;
|
||||
let startX, startY, startLeft, startTop;
|
||||
|
||||
header.addEventListener('mousedown', (e) => {
|
||||
if (e.target.closest('.m-window-controls')) return;
|
||||
isDragging = true;
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
startLeft = el.offsetLeft;
|
||||
startTop = el.offsetTop;
|
||||
document.body.style.cursor = 'move';
|
||||
|
||||
const onMove = (e2) => {
|
||||
if (!isDragging) return;
|
||||
const dx = e2.clientX - startX;
|
||||
const dy = e2.clientY - startY;
|
||||
el.style.left = Math.max(0, startLeft + dx) + 'px';
|
||||
el.style.top = Math.max(0, startTop + dy) + 'px';
|
||||
};
|
||||
|
||||
const onUp = () => {
|
||||
isDragging = false;
|
||||
document.body.style.cursor = '';
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
});
|
||||
|
||||
// Touch support
|
||||
header.addEventListener('touchstart', (e) => {
|
||||
if (e.target.closest('.m-window-controls')) return;
|
||||
const touch = e.touches[0];
|
||||
isDragging = true;
|
||||
startX = touch.clientX;
|
||||
startY = touch.clientY;
|
||||
startLeft = el.offsetLeft;
|
||||
startTop = el.offsetTop;
|
||||
|
||||
const onMove = (e2) => {
|
||||
if (!isDragging) return;
|
||||
const touch2 = e2.touches[0];
|
||||
const dx = touch2.clientX - startX;
|
||||
const dy = touch2.clientY - startY;
|
||||
el.style.left = Math.max(0, startLeft + dx) + 'px';
|
||||
el.style.top = Math.max(0, startTop + dy) + 'px';
|
||||
};
|
||||
|
||||
const onEnd = () => {
|
||||
isDragging = false;
|
||||
document.removeEventListener('touchmove', onMove);
|
||||
document.removeEventListener('touchend', onEnd);
|
||||
};
|
||||
|
||||
document.addEventListener('touchmove', onMove);
|
||||
document.addEventListener('touchend', onEnd);
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
function setupResize(el, id) {
|
||||
const handle = el.querySelector('.m-window-resize');
|
||||
if (!handle) return;
|
||||
|
||||
let isResizing = false;
|
||||
let startX, startY, startW, startH;
|
||||
|
||||
handle.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
isResizing = true;
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
startW = el.offsetWidth;
|
||||
startH = el.offsetHeight;
|
||||
|
||||
const onMove = (e2) => {
|
||||
if (!isResizing) return;
|
||||
const dx = e2.clientX - startX;
|
||||
const dy = e2.clientY - startY;
|
||||
const newW = Math.max(320, startW + dx);
|
||||
const newH = Math.max(240, startH + dy);
|
||||
el.style.width = newW + 'px';
|
||||
el.style.height = newH + 'px';
|
||||
};
|
||||
|
||||
const onUp = () => {
|
||||
isResizing = false;
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
});
|
||||
|
||||
// Touch support for resize
|
||||
handle.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault();
|
||||
const touch = e.touches[0];
|
||||
isResizing = true;
|
||||
startX = touch.clientX;
|
||||
startY = touch.clientY;
|
||||
startW = el.offsetWidth;
|
||||
startH = el.offsetHeight;
|
||||
|
||||
const onMove = (e2) => {
|
||||
if (!isResizing) return;
|
||||
const touch2 = e2.touches[0];
|
||||
const dx = touch2.clientX - startX;
|
||||
const dy = touch2.clientY - startY;
|
||||
const newW = Math.max(320, startW + dx);
|
||||
const newH = Math.max(240, startH + dy);
|
||||
el.style.width = newW + 'px';
|
||||
el.style.height = newH + 'px';
|
||||
};
|
||||
|
||||
const onEnd = () => {
|
||||
isResizing = false;
|
||||
document.removeEventListener('touchmove', onMove);
|
||||
document.removeEventListener('touchend', onEnd);
|
||||
};
|
||||
|
||||
document.addEventListener('touchmove', onMove);
|
||||
document.addEventListener('touchend', onEnd);
|
||||
}, { passive: false });
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
const MeridianWM = {
|
||||
openWindow: createWindow,
|
||||
closeWindow,
|
||||
minimizeWindow,
|
||||
focusWindow
|
||||
};
|
||||
|
||||
export default MeridianWM;
|
||||
export { MeridianWM };
|
||||
Reference in New Issue
Block a user