glideshow 0.1.2__py3-none-any.whl

glideshow/editor/js/objects.js

@@ -0,0 +1,202 @@
+/* Insert → Word art, as Slides: one line of text drawn as filled (and optionally outlined) letters stretched to the
+   box; it starts in editing with "Word art" selected, and Enter finishes. */
+function addWordArt() {
+  stopEdit();
+  const b = makeBox({ x: 560, y: 440, w: 800, h: 200, shape: 'wordart', html: 'Word art' });
+  b.style.setProperty('--fill', '#000000');
+  insert(b); renderShape(b); startEdit(b);
+}
+function addShape(shape, g, extra = {}) {
+  const line = /line$|^elbow$|^curve$|^path$/.test(shape), bent = /^(elbow|curve|path)$/.test(shape);
+  const b = makeBox(g || { x: 660, y: line && !bent ? 540 : 340, w: 600, h: line && !bent ? 0 : 400, shape });
+  b.dataset.shape = shape; Object.assign(b.dataset, extra.data || {}); if (extra.rot) setRot(b, extra.rot);
+  if (line) { b.style.setProperty('--stroke', '#333333'); b.style.setProperty('--sw', '4px'); }
+  else {   // Slides' current default shape: light grey, 1pt grey outline, 14pt text
+    b.style.setProperty('--fill', '#eeeeee'); b.style.setProperty('--stroke', '#595959'); b.style.setProperty('--sw', `${Math.round(PT * 1000) / 1000}px`);   // 1pt dark grey, as Slides
+    content(b).style.fontSize = Math.round(14 * PT * 100) / 100 + 'px';
+  }
+  renderShape(b);
+  insert(b);
+  return b;
+}
+
+/* Pictures larger than a slide can show are stored smaller, as Slides does: at most 2560 px on the long side (a 1920-wide
+   slide, zoomed in a little), same format. A 12-megapixel phone photo goes from about 4 MB to well under 1 MB, and the
+   editor decodes a sixth of the pixels. GIFs (animation), SVGs and anything that wouldn't get smaller stay as they are;
+   the photo's own rotation is kept (createImageBitmap applies it). */
+const MAX_PICTURE = 2560;
+/** @param {Blob} file */
+async function shrinkPicture(file) {
+  if (!/^image\/(jpeg|png|webp)$/.test(file.type)) return file;
+  let bmp; try { bmp = await createImageBitmap(file); } catch { return file; }
+  const k = MAX_PICTURE / Math.max(bmp.width, bmp.height);
+  if (k >= 1) { bmp.close(); return file; }
+  const c = document.createElement('canvas'); c.width = Math.round(bmp.width * k); c.height = Math.round(bmp.height * k);
+  const x = c.getContext('2d'); x.imageSmoothingQuality = 'high'; x.drawImage(bmp, 0, 0, c.width, c.height); bmp.close();
+  const out = await new Promise(r => c.toBlob(r, file.type, 0.9));
+  return out && out.size < file.size ? out : file;
+}
+
+/* Replace image (keeps the box's place and size, as Slides) and Reset size (back to the picture's own proportions,
+   fitted as on insertion and kept centred). */
+async function uploadImage(file) {
+  file = await shrinkPicture(file);
+  const ext = (file.type.split('/')[1] || 'png').replace('jpeg', 'jpg').replace('svg+xml', 'svg');
+  return (await (await fetch('/api/upload?ext=' + ext, { method: 'POST', body: file })).json()).src;
+}
+async function replaceImage(b, file) {
+  const img = b.querySelector('.content > img'); if (!img) return;
+  setStatus('Uploading image…'); img.src = await uploadImage(file); setStatus(''); renderThumbs(); commit();
+}
+async function resetImageSize(b) {
+  const img = b.querySelector('.content > img'); if (!img) return;
+  await img.decode().catch(() => {});
+  let w = img.naturalWidth || 800, h = img.naturalHeight || 600; const k = Math.min(1, 1200 / w, 800 / h); w *= k; h *= k;
+  const g = geo(b); setGeo(b, { x: g.x + g.w / 2 - w / 2, y: g.y + g.h / 2 - h / 2, w, h }); drawOverlay(); commit();
+}
+$('#ed-replace-image').onclick = () => $('#ed-replace-file').click();
+$('#ed-crop').onclick = () => cropping ? endCrop() : enterCrop([...sel][0]);
+$('#ed-replace-file').onchange = async e => { const f = e.target.files[0], b = [...sel][0]; e.target.value = ''; if (f && b) await replaceImage(b, f); };
+
+/* Videos, as Slides: MP4 / WebM / MOV copied to assets/, shown as a <video> in a .box.video. The editor shows the
+   poster (its first frame, captured on insert) with a play badge; decks play it with native controls, and reveal.js
+   starts it when the slide appears if it has data-autoplay. Format options → Video playback sets autoplay, mute, loop. */
+async function videoPoster(src) {
+  const v = document.createElement('video'); v.muted = true; v.preload = 'auto'; v.src = src;
+  await new Promise(r => { v.onloadeddata = r; v.onerror = r; setTimeout(r, 4000); });
+  if (!v.videoWidth) return null;
+  v.currentTime = Math.min(0.1, v.duration || 0); await new Promise(r => { v.onseeked = r; setTimeout(r, 1500); });
+  const cv = document.createElement('canvas'); cv.width = v.videoWidth; cv.height = v.videoHeight; cv.getContext('2d').drawImage(v, 0, 0);
+  const blob = await new Promise(r => cv.toBlob(r, 'image/jpeg', 0.85)).then(b => b && shrinkPicture(b));   // a 4K video's frame is a big picture too
+  return blob ? { poster: (await (await fetch('/api/upload?ext=jpg', { method: 'POST', body: blob })).json()).src, w: v.videoWidth, h: v.videoHeight } : null;
+}
+async function addVideo(file, at) {
+  const mb = file.size / 1e6;
+  setStatus(mb > 50 ? `Uploading a large video (${Math.round(mb)} MB): the deck folder grows by that much…` : 'Uploading video…');
+  const ext = /quicktime/.test(file.type) ? 'mov' : (file.type.split('/')[1] || 'mp4');
+  const { src } = await (await fetch('/api/upload?ext=' + ext, { method: 'POST', body: file })).json();
+  const p = await videoPoster(src);
+  let w = p?.w || 1280, h = p?.h || 720; const k = Math.min(1, 1200 / w, 800 / h); w *= k; h *= k;
+  const b = makeBox({ x: (at?.x ?? W / 2) - w / 2, y: (at?.y ?? H / 2) - h / 2, w, h, cls: 'video', html: `<video src="${src}"${p ? ` poster="${p.poster}"` : ''} controls playsinline preload="metadata"></video>` });
+  insert(b);
+  setStatus(mb > 50 ? `Large video (${Math.round(mb)} MB) added` : '');
+}
+/* Web embeds (Insert → Embed, Video → By URL): a `.box.embed` holding an <iframe>. YouTube / Vimeo page addresses
+   become their player addresses, as Slides does for YouTube. */
+function embedURL(u) {
+  const yt = u.match(/(?:youtube\.com\/(?:watch\?(?:.*&)?v=|shorts\/|embed\/)|youtu\.be\/)([\w-]{11})/), vm = u.match(/vimeo\.com\/(\d+)/);
+  return yt ? `https://www.youtube.com/embed/${yt[1]}` : vm ? `https://player.vimeo.com/video/${vm[1]}` : u;
+}
+function addEmbed(url) {
+  if (!/^https?:\/\//.test(url)) return setStatus('An embed needs a web address (https://…)', 'error');
+  const src = embedURL(url), video = src !== url, w = 1280, h = video ? 720 : 800;
+  const b = makeBox({ x: (W - w) / 2, y: (H - h) / 2, w, h, cls: 'embed', html: `<iframe src="${src.replace(/"/g, '&quot;')}" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>` });
+  insert(b);
+}
+/* Live boxes (Insert → Live box): a `.box.live` running a page of its own (an .html file in assets/) in a sandboxed
+   iframe: its script runs, but it can't reach the deck, the editor, files or accounts (no allow-same-origin, and the
+   servers send assets' HTML with a sandbox policy too). Double-click one to edit its page. */
+const LIVE_START = `<!doctype html>
+<html><body style="margin:0;overflow:hidden;background:#fff">
+<canvas id="c"></canvas>
+<script>
+// A live box: this page runs on the slide, in its own sandbox. Replace it with your demo.
+const c = document.getElementById('c'), x = c.getContext('2d');
+const fit = () => { c.width = innerWidth; c.height = innerHeight; }; addEventListener('resize', fit); fit();
+let t = 0;
+(function draw() {
+  t += 0.02; x.clearRect(0, 0, c.width, c.height);
+  for (let i = 0; i < 12; i++) {
+    const a = t + i * Math.PI / 6, r = Math.min(c.width, c.height) * 0.35;
+    x.beginPath(); x.arc(c.width / 2 + Math.cos(a) * r, c.height / 2 + Math.sin(2 * a) * r * 0.5, 14, 0, 7);
+    x.fillStyle = 'hsl(' + i * 30 + ' 70% 55%)'; x.fill();
+  }
+  requestAnimationFrame(draw);
+})();
+</script>
+</body></html>
+`;
+const liveFrame = src => `<iframe src="${src.replace(/"/g, '&quot;')}" sandbox="allow-scripts allow-pointer-lock" loading="lazy" title="Live box"></iframe>`;
+const saveLivePage = async text => (await (await fetch('/api/upload?ext=html', { method: 'POST', body: new Blob([text], { type: 'text/html' }) })).json()).src;
+async function addLive() {
+  const src = await saveLivePage(LIVE_START), w = 1280, h = 720;
+  if (!src) return setStatus("Couldn't save the live box's page", 'error');
+  insert(makeBox({ x: (W - w) / 2, y: (H - h) / 2, w, h, cls: 'live', html: liveFrame(src) }));
+}
+/* A dialog for a block of code: a live box's page, a slide's style. */
+const liveDlg = $('#ed-livedlg');
+function askCode(title, help, value, done) {
+  closeMenu(); $('#ed-code-title').textContent = title; $('#ed-code-help').textContent = help; $('#ed-live-code').value = value;
+  liveDlg.hidden = false; $('#ed-live-code').focus();
+  $('#ed-live-ok').onclick = () => { liveDlg.hidden = true; done($('#ed-live-code').value); };
+}
+async function editLive(b) {
+  const f = b.querySelector('iframe'), src = f?.getAttribute('src') || '';
+  const text = src ? await fetch(src).then(r => r.ok ? r.text() : '').catch(() => '') : f?.getAttribute('srcdoc') || '';
+  askCode('Live box', "A page of its own, with its script, running on the slide in a sandbox: it can draw, animate and respond to the mouse, but can't reach the deck, your files or your accounts.", text, async page => {
+    const next = await saveLivePage(page); if (!next) return setStatus("Couldn't save the live box's page", 'error');
+    content(b).innerHTML = liveFrame(next); commit(); render();
+  });
+}
+/* Slide → Slide style: CSS for this slide only, kept in the slide as <style class="slide-css" media="not all"> (inert as
+   written; the editor and the slideshow apply it scoped to the slide). */
+const slideCSS = s => s?.querySelector(':scope > style')?.textContent.trim() || '';
+function editSlideCSS() {
+  const s = slides[cur];
+  askCode('Slide style', 'CSS for this slide only, e.g. .box > .content { font-family: Georgia, serif; } or .box[data-role="title"] > .content { color: #2f6bff; }', slideCSS(s), css => {
+    let st = s.querySelector(':scope > style');
+    if (!css.trim()) st?.remove();
+    else { if (!st) { st = document.createElement('style'); s.append(st); } st.className = 'slide-css'; st.media = 'not all'; st.textContent = '\n' + css.trim() + '\n'; }
+    commit(); render();
+  });
+}
+$('#ed-live-cancel').onclick = liveDlg.querySelector('.sc-close').onclick = () => { liveDlg.hidden = true; };
+$('#ed-live-code').addEventListener('keydown', e => { if (e.key === 'Tab') { e.preventDefault(); document.execCommand('insertText', false, '  '); } e.stopPropagation(); });   // a code box: Tab indents, keys stay here
+const urlDlg = $('#ed-urldlg');
+function askURL(title, done, value = '') {
+  closeMenu(); $('#ed-url-title').textContent = title; $('#ed-url-in').value = value; urlDlg.hidden = false; $('#ed-url-in').focus(); $('#ed-url-in').select();
+  urlDlg.onsubmit = () => { const v = $('#ed-url-in').value.trim(); urlDlg.hidden = true; if (v) done(v); };
+}
+$('#ed-url-ok').onclick = () => urlDlg.onsubmit?.();
+$('#ed-url-cancel').onclick = urlDlg.querySelector('.sc-close').onclick = () => { urlDlg.hidden = true; };
+$('#ed-url-in').onkeydown = e => { if (e.key === 'Enter') { e.preventDefault(); urlDlg.onsubmit?.(); } if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); urlDlg.hidden = true; } };
+const isVideoFile = f => /^video\/(mp4|webm|quicktime)$/.test(f.type) || /\.(mp4|webm|mov)$/i.test(f.name || '');
+
+/* Crop, as Slides: double-click a picture (or the toolbar Crop button) and drag its black marks; the box shrinks and
+   the picture stays where it is. ↵, Esc or a click elsewhere ends. Stored as data-crop (see cropBox in shapes.js). */
+let cropping = null;
+const cropOf = b => { const v = (b.dataset.crop || '0 0 0 0').split(/\s+/).map(Number); return { t: v[0] || 0, r: v[1] || 0, b: v[2] || 0, l: v[3] || 0 }; };
+function enterCrop(b) { if (!b?.querySelector('.content > img')) return; stopEdit(); cropping = b; sel = new Set([b]); drawOverlay(); updateToolbar(); $('#ed-crop')?.classList.add('on'); }
+function endCrop() { if (!cropping) return; cropping = null; $('#ed-crop')?.classList.remove('on'); drawOverlay(); }
+function startCrop(e, dir) {
+  const b = cropping, g0 = geo(b), c0 = cropOf(b), p0 = toCanvas(e);
+  const fw = g0.w / (1 - c0.l - c0.r), fh = g0.h / (1 - c0.t - c0.b), X0 = g0.x - c0.l * fw, Y0 = g0.y - c0.t * fh;   // the whole picture
+  busy = true;
+  drag(e, ev => {
+    const p = toCanvas(ev), dx = (p.x - p0.x) / fw, dy = (p.y - p0.y) / fh, c = { ...c0 }, min = 0.05;
+    if (dir.includes('w')) c.l = Math.max(0, Math.min(1 - c.r - min, c0.l + dx));
+    if (dir.includes('e')) c.r = Math.max(0, Math.min(1 - c.l - min, c0.r - dx));
+    if (dir.includes('n')) c.t = Math.max(0, Math.min(1 - c.b - min, c0.t + dy));
+    if (dir.includes('s')) c.b = Math.max(0, Math.min(1 - c.t - min, c0.b - dy));
+    const r3 = v => Math.round(v * 1000) / 1000;
+    if (c.t || c.r || c.b || c.l) b.dataset.crop = [c.t, c.r, c.b, c.l].map(r3).join(' '); else delete b.dataset.crop;
+    setGeo(b, { x: X0 + c.l * fw, y: Y0 + c.t * fh, w: (1 - c.l - c.r) * fw, h: (1 - c.t - c.b) * fh }); cropBox(b); drawOverlay();
+  }, () => { busy = false; commit(); });
+}
+
+async function addImage(file, at) {
+  setStatus('Uploading image…');
+  file = await shrinkPicture(file);
+  const ext = (file.type.split('/')[1] || 'png').replace('jpeg', 'jpg').replace('svg+xml', 'svg');
+  const r = await fetch('/api/upload?ext=' + ext, { method: 'POST', body: file });
+  const { src } = await r.json();
+  await addImageSrc(src, at);
+}
+async function addImageSrc(src, at) {   // a picture already in assets/, sized as Slides inserts one
+  const img = new Image(); img.src = src;
+  await img.decode().catch(() => {});
+  let w = img.naturalWidth || 800, h = img.naturalHeight || 600;
+  const k = Math.min(1, 1200 / w, 800 / h); w *= k; h *= k;
+  const b = makeBox({ x: (at?.x ?? W / 2) - w / 2, y: (at?.y ?? H / 2) - h / 2, w, h, cls: 'image', html: `<img src="${src}" alt="">` });
+  insert(b);
+}

glideshow/editor/js/people.js

@@ -0,0 +1,73 @@
+/* ---------- who else is here (glideshow.org) ---------- */
+/* Everyone else with this deck open: their initials by Share (a click goes to their slide), a dot with their initials
+   on the slide each is on in the filmstrip, and a ring in their colour round the boxes each has selected, with their
+   name on the one they are typing in. That box is theirs while they type: others can still select and move it, but
+   not type in it (startEdit asks typingIn). It all comes over the live WebSocket (boot.js live; cloud/library.js
+   tellPeople); without one (the Mac, a library in the browser) there is nobody else to show. */
+/** @type {{id: string, k: string, n: string, sid: string, box: string, sel: string[]}[]} */
+let people = [];
+let meId = '', hereKey = '';
+const PERSON_COLORS = ['#e8710a', '#1e8e3e', '#a142f4', '#d01884', '#129eaf', '#c5221f', '#7b5800', '#b06000'];   // (no blue: that's your own selection)
+const personColor = k => PERSON_COLORS[parseInt(hashStr(k), 36) % PERSON_COLORS.length];
+const initials = n => (String(n).trim().split(/[\s@._-]+/).filter(Boolean).slice(0, 2).map(w => w[0]).join('') || '?').toUpperCase();
+/* Others: not this window, nor another window of the same person (one person, one face). */
+const others = () => { const mine = people.find(p => p.id === meId)?.k, seen = new Set(); return people.filter(p => p.id !== meId && p.k !== mine && !seen.has(p.k) && seen.add(p.k)); };
+/** The person typing in box `b` on the slide on show, if someone else is. */
+const typingIn = b => others().find(p => p.box && p.box === b?.id && p.sid === slides[cur]?.dataset.sid);
+
+function setPeople(list) { people = Array.isArray(list) ? list : []; drawPeople(); }
+
+/* Where this editor is (the slide on show, the boxes selected, the one being typed in), sent when it changes. */
+function sendHere() {
+  if (!liveSocket || liveSocket.readyState !== 1 || !meId || !slides.length) return;
+  const here = { sid: slides[cur]?.dataset.sid || '', box: editing?.id || '', sel: [...sel].filter(b => b.isConnected && b.id).map(b => b.id).slice(0, 20) };
+  const key = JSON.stringify(here);
+  if (key === hereKey) return;
+  hereKey = key;
+  try { liveSocket.send(JSON.stringify({ here })); } catch {}
+}
+
+function drawPeople() {
+  const list = others(), bar = $('#ed-people');
+  bar.hidden = !list.length;
+  bar.replaceChildren(...list.map(p => {
+    const b = document.createElement('button'), at = slides.findIndex(s => s.dataset.sid === p.sid);
+    b.className = 'person'; b.textContent = initials(p.n); b.style.setProperty('--c', personColor(p.k));
+    b.dataset.tip = p.n + (at >= 0 ? ` · slide ${at + 1}` : '');
+    b.setAttribute('aria-label', b.dataset.tip);
+    b.onclick = () => { const i = slides.findIndex(s => s.dataset.sid === p.sid); if (i >= 0) go(i); };
+    return b;
+  }));
+  drawPeopleThumbs(); drawPeopleOn();
+}
+/* The filmstrip: a dot for each person on the slide they're on. */
+function drawPeopleThumbs() {
+  thumbs.querySelectorAll('.thumb-people').forEach(e => e.remove());
+  const by = new Map();
+  for (const p of others()) { const i = slides.findIndex(s => s.dataset.sid === p.sid); if (i >= 0) by.set(i, [...(by.get(i) || []), p]); }
+  for (const [i, ps] of by) {
+    const t = thumbs.children[i]; if (!t) continue;
+    const row = div('thumb-people');
+    row.append(...ps.map(p => { const d = div('person'); d.textContent = initials(p.n); d.title = p.n; d.style.setProperty('--c', personColor(p.k)); return d; }));
+    t.append(row);
+  }
+}
+/* The slide on show: a ring round each box someone else has selected; the box they type in also carries their name. */
+function drawPeopleOn() {
+  const layer = $('#ed-people-on'), s = slides[cur];
+  if (!layer || !people.length && !layer.childElementCount) return;
+  layer.replaceChildren();
+  if (!s) return;
+  const rc = canvas.getBoundingClientRect(), k = 1 / scale;
+  for (const p of others()) {
+    if (p.sid !== s.dataset.sid) continue;
+    for (const id of new Set([...(p.sel || []), ...(p.box ? [p.box] : [])])) {
+      const b = [...s.querySelectorAll('.box')].find(x => x.id === id); if (!b) continue;
+      const r = b.getBoundingClientRect(), o = div('person-ring' + (id === p.box ? ' typing' : ''));
+      place(o, { x: (r.left - rc.left) * k, y: (r.top - rc.top) * k, w: r.width * k, h: r.height * k });
+      o.style.setProperty('--c', personColor(p.k)); o.style.setProperty('--k', k + 'px');
+      if (id === p.box) { const tag = div('person-tag'); tag.textContent = p.n; o.append(tag); }
+      layer.append(o);
+    }
+  }
+}

glideshow/editor/js/phone-comments.js

@@ -0,0 +1,43 @@
+/* ---------- phone: comments and share ---------- */
+/* Adding a comment, as 15-comments.png: the top bar gives way to a "⊗ Cancel" pill, the object the comment is on stays
+   outlined, a card says "Tap any object to re-anchor your comment" (a tap on another object or on nothing moves it),
+   and a bar at the bottom holds @ and an "Add a new comment" field with send. The comments themselves (comments.js)
+   open full screen, and so does Share (file.js), in the app's dark look. */
+if (PHONE) (() => {
+  const el = (tag, cls, html = '') => Object.assign(document.createElement(tag), { className: cls, innerHTML: html });
+  const root = document.documentElement;
+  const cancel = el('button', 'ph-cm-cancel', '<span class="icon">cancel</span><span>Cancel</span>');
+  const hint = el('div', 'ph-cm-hint'), bar = el('div', 'ph-cm-bar'), at = el('button', 'ph-icon-btn ph-cm-at', '<span class="icon">alternate_email</span>');
+  const field = el('div', 'ph-cm-field'), input = /** @type {HTMLTextAreaElement} */ (el('textarea', 'ph-cm-input')), send = el('button', 'ph-icon-btn ph-cm-send', '<span class="icon">send</span>');
+  hint.textContent = 'Tap any object to re-anchor your comment';
+  input.rows = 1; input.placeholder = 'Add a new comment'; at.title = 'Mention someone'; send.title = 'Send';
+  field.append(input, send); bar.append(at, field);
+  document.body.append(cancel, hint, bar);
+
+  const anchor = b => {   // the comment goes on b (its top-right corner) or, with no b, the slide's top-left
+    const g = b && geo(b);
+    Object.assign(cmDraft, { box: b?.id || '', x: g ? g.x + g.w : 80, y: g ? g.y + 8 : 80, quote: (b ? content(b)?.innerText || '' : '').replace(/\s+/g, ' ').trim().slice(0, 120) });
+    sel = b ? new Set([b]) : new Set(); drawOverlay();
+  };
+  function stop() { cmDraft = null; root.classList.remove('ph-commenting'); input.value = ''; input.blur(); send.disabled = true; drawOverlay(); }
+  window['addComment'] = () => {
+    if (!root.classList.contains('ph-edit')) phoneState('edit');
+    stopEdit(); phoneSheet.close();
+    cmDraft = { slide: cur + 1 }; anchor([...sel][0]);
+    root.classList.add('ph-commenting'); send.disabled = true;
+    setTimeout(() => input.focus(), 50);
+  };
+  input.oninput = () => { send.disabled = !input.value.trim(); };
+  input.onkeydown = e => e.stopPropagation();   // typing isn't a shortcut
+  send.onclick = () => { if (!input.value.trim() || !cmDraft) return; const d = cmDraft, text = input.value; stop(); cmFetch({ op: 'add', ...d, text }); };
+  cancel.onclick = stop;
+  at.onclick = () => { input.focus(); input.setRangeText('@', input.selectionStart, input.selectionEnd, 'end'); input.oninput(null); };
+  stage.addEventListener('pointerdown', e => {   // while commenting, a tap re-anchors it
+    if (!root.classList.contains('ph-commenting')) return;
+    e.stopImmediatePropagation(); e.preventDefault();
+    anchor(topBox(/** @type {Element} */ (e.target)));
+  }, true);
+
+  /* the comments panel and Share: full screen, with ✕ to close (the logic stays the desktop's) */
+  const panelClose = $('#ed-cm-close'); if (panelClose) panelClose.title = 'Close';
+})();

glideshow/editor/js/phone-edit.js

@@ -0,0 +1,253 @@
+/* ---------- phone: the editing screen ---------- */
+/* The Slides app's editor: a top bar (back; undo, redo, present, share, +, comments, ⋯) over the slide fitted 15 from
+   the sides, and the filmstrip at the bottom (the current slide's cell blue, a new-slide button at its right). With
+   something selected, back becomes ✓ (done: deselect) and share leaves the bar. */
+if (PHONE) (() => {
+  const el = (tag, cls, html = '') => Object.assign(document.createElement(tag), { className: cls, innerHTML: html });
+  const iconBtn = (icon, title, run) => { const b = el('button', 'ph-icon-btn', `<span class="icon">${icon}</span>`); b.title = title; b.onclick = run; return b; };
+  const bar = $('#ph-top .ph-bar-edit');
+
+  /* ---- the top bar ---- */
+  const back = iconBtn('arrow_back_ios_new', 'Back to the slides', () => phoneState('view'));
+  const done = iconBtn('check', 'Done', () => { stopEdit(); sel.clear(); drawOverlay(); updateToolbar(); });
+  done.classList.add('ph-done');
+  const share = iconBtn('person_add', 'Share', () => showShare());
+  const rails = () => document.documentElement.classList.contains('ph-rails');
+  /* a menu from a button: under it, or in the side rails (landscape) beside it, to its left */
+  const menuAt = (btn, items) => {
+    openMenu(btn, items);
+    const r = btn.getBoundingClientRect();
+    if (rails() && openMenuEl) placeMenu(openMenuEl, r.left - openMenuEl.offsetWidth - 8, r.top + r.height / 2 - openMenuEl.offsetHeight / 2);
+  };
+  const more = e => menuAt(e.currentTarget, [
+    { label: 'Find', run: () => openFind() }, { label: 'Share', run: () => showShare() },
+    ...(document.documentElement.dataset.look === 'thermal' ? [{ label: document.body.classList.contains('dark') ? 'Light mode' : 'Dark mode', run: () => window['setDark']?.(!document.body.classList.contains('dark')) }] : []),
+    { label: 'Desktop version', run: () => { location.href = '/edit?phone=0'; } }]);
+  bar.append(back, done, el('span', 'ph-gap'), iconBtn('undo', 'Undo', () => stepBack(undo)), iconBtn('redo', 'Redo', () => stepBack(redo)),
+    iconBtn('play_arrow', 'Present', () => phonePresent()), share,
+    iconBtn('add', 'Insert', () => phoneInsert()),
+    iconBtn('comment', 'Comments', () => setCommentsPanel(true)),
+    iconBtn('more_horiz', 'More', more));
+  /* undo and redo select what they changed on the slide, as the app does (r08) */
+  const saved = i => {   // the current slide's boxes in history step i, by id (as saved: no rendering in them)
+    const t = document.createElement('template'); t.innerHTML = hist[i]?.html[cur] || '';
+    const sig = b => { const c = b.querySelector(':scope > .content'); return [...b.attributes, ...(c?.attributes || [])].map(x => x.name + '=' + x.value).join('\n') + '\n' + (c?.textContent || ''); };   // what an edit changes, not what rendering adds (highlighting, maths)
+    return new Map([...t.content.querySelectorAll('.box[id]')].map(b => [b.id, sig(b)]));
+  };
+  function stepBack(fn) {
+    const at = cur, was = hptr, before = saved(hptr);
+    fn();
+    if (cur !== at || hptr === was) return;
+    const now = saved(hptr), changed = boxes().filter(b => b.id && now.has(b.id) && before.get(b.id) !== now.get(b.id));
+    if (changed.length) { sel = new Set(changed); drawOverlay(); updateToolbar(); }
+  }
+  const picking = () => sel.size > 0 || !!editing;
+  const drawOverlay0 = drawOverlay;   // the bars follow the selection, which redraws the overlay whenever it changes
+  window['drawOverlay'] = () => { drawOverlay0(); bar.classList.toggle('picking', picking()); document.documentElement.classList.toggle('ph-picking', picking()); showTools(); };
+
+  /* ---- the filmstrip: cells of 98 with an 80 wide thumbnail and the number under it ---- */
+  const film = el('div', 'ph-film'), strip = el('div', 'ph-film-strip'), row = el('div', 'ph-film-cells'), add = iconBtn('library_add', 'New slide', () => $('#ed-new-slide').click());
+  add.classList.add('ph-film-new'); film.id = 'ph-film';
+  // New slide: the app keeps it at the strip's right end; Thermal makes it a tile right after the last slide, scrolling with them
+  strip.append(row); film.append(strip); (document.documentElement.dataset.look === 'thermal' ? strip : film).append(add); document.body.append(film);
+  const pics = new WeakMap();   // slide → { key, node }: a copy of its filmstrip picture, remade when the slide changes
+  function pic(s) {
+    const key = s.outerHTML, hit = pics.get(s);
+    if (hit?.key === key) return hit.node;
+    const node = /** @type {HTMLElement} */ (thumbView(s).cloneNode(true));
+    pics.set(s, { key, node }); return node;
+  }
+  function fillFilm() {
+    if (!slides.length) return;
+    while (row.children.length > slides.length) row.lastChild.remove();
+    while (row.children.length < slides.length) {
+      const c = el('button', 'ph-cell', '<div class="ph-thumb"></div><span class="ph-num"></span>'), i = row.children.length;
+      c.onclick = () => { if (!lifted) cellTap([...row.children].indexOf(c)); };
+      c.onpointerdown = e => press(e, c);
+      row.append(c); void i;
+    }
+    [...row.children].forEach((c, i) => {
+      const t = c.firstElementChild, p = pic(slides[i]);
+      if (t.firstChild !== p) t.replaceChildren(p);
+      /** @type {HTMLElement} */ (t).style.height = 80 * H / W + 'px';
+      c.lastElementChild.textContent = String(i + 1); c.classList.toggle('cur', i === cur); c.classList.toggle('picked', slideMode && picked.has(slides[i]));
+    });
+    const c = /** @type {HTMLElement} */ (row.children[cur]);
+    if (!c) return;
+    if (rails()) { if (c.offsetTop < strip.scrollTop || c.offsetTop + c.offsetHeight > strip.scrollTop + strip.clientHeight) strip.scrollTo({ top: c.offsetTop - 8 }); }   // the strip runs down the left
+    else if (c.offsetLeft < strip.scrollLeft || c.offsetLeft + c.offsetWidth > strip.scrollLeft + strip.clientWidth) strip.scrollTo({ left: c.offsetLeft - 8 });
+  }
+  const renderThumbs0 = renderThumbs;
+  window['renderThumbs'] = () => { renderThumbs0(); fillFilm(); count.textContent = String(picked.size); };
+
+  /* ---- reorder: a long press lifts a slide's picture (×1.2), it follows the finger along the strip, the others make
+     room, and letting go puts the slide there (r05) ---- */
+  let lifted = null;
+  function press(e, c) {
+    const x0 = e.clientX, y0 = e.clientY, from = [...row.children].indexOf(c), down = rails(), pitch = down ? c.offsetHeight : 98;   // along the strip: across, or down the side rail
+    let timer = window.setTimeout(lift, 400), at = from, ghost = null;
+    const cells = () => /** @type {HTMLElement[]} */ ([...row.children]);
+    function lift() {
+      timer = 0; lifted = c; c.classList.add('lifting'); film.classList.add('dragging');
+      ghost = /** @type {HTMLElement} */ (c.querySelector('.ph-thumb').cloneNode(true)); ghost.className = 'ph-thumb ph-lifted';
+      document.body.append(ghost); place_(x0, y0);
+    }
+    const place_ = (x, y) => { ghost.style.left = x - 49 + 'px'; ghost.style.top = y - 28 + 'px'; };
+    function move(ev) {
+      if (timer) { if (Math.hypot(ev.clientX - x0, ev.clientY - y0) > 8) end(); return; }   // moved first: a scroll, not a lift
+      ev.preventDefault(); place_(ev.clientX, ev.clientY);
+      const r = strip.getBoundingClientRect();
+      const along = down ? ev.clientY - r.top + strip.scrollTop - cells()[0].offsetTop : ev.clientX - r.left + strip.scrollLeft, t = down ? 'translateY' : 'translateX';
+      at = Math.max(0, Math.min(slides.length - 1, Math.floor(along / pitch)));
+      cells().forEach((x, i) => { x.style.transform = i === from ? '' : i > from && i <= at ? `${t}(-${pitch}px)` : i < from && i >= at ? `${t}(${pitch}px)` : ''; });
+    }
+    function end() {
+      clearTimeout(timer);
+      removeEventListener('pointermove', move); removeEventListener('pointerup', up); removeEventListener('pointercancel', up); strip.removeEventListener('touchmove', hold);
+    }
+    function up() {
+      end(); if (!lifted) return;
+      ghost.remove(); c.classList.remove('lifting'); film.classList.remove('dragging'); cells().forEach(x => { x.style.transform = ''; });
+      if (at !== from) slideOp(() => { const s = slides.splice(from, 1)[0]; slides.splice(at, 0, s); cur = at; picked = new Set([s]); });
+      setTimeout(() => { lifted = null; });   // after the click that follows the lift
+    }
+    const hold = ev => { if (lifted) ev.preventDefault(); };   // while a slide is lifted the strip doesn't scroll
+    addEventListener('pointermove', move); addEventListener('pointerup', up); addEventListener('pointercancel', up);
+    strip.addEventListener('touchmove', hold, { passive: false });
+  }
+
+  /* ---- slide mode (11-slide-selected.png, r05): a tap on the current slide's cell picks it; the top bar turns into
+     ✕, the number picked, and the slide actions; taps on other cells add or drop them. (How the app enters it isn't
+     captured yet.) ---- */
+  let slideMode = false, clip = [];
+  const slideBar = el('div', 'ph-bar ph-bar-slide'), count = el('span', 'ph-count');
+  const act = (icon, title, run) => { const b = iconBtn(icon, title, run); b.classList.add('ph-act'); return b; };
+  const copySlides = () => { clip = pickedIdx().map(i => slides[i].cloneNode(true)); };
+  slideBar.append(iconBtn('close', 'Done', () => setSlideMode(false)), count, el('span', 'ph-gap'),
+    act('content_cut', 'Cut', () => { copySlides(); deleteSlides(); }),
+    act('content_copy', 'Copy', copySlides),
+    act('content_paste', 'Paste', () => { if (!clip.length) return; slideOp(() => { const copies = clip.map(s => { const c = /** @type {HTMLElement} */ (s.cloneNode(true)); boxes(c).forEach(b => { b.id = uid(); }); return c; }); const at = pickedIdx().at(-1) + 1; slides.splice(at, 0, ...copies); cur = at + copies.length - 1; picked = new Set(copies); }); }),
+    act('delete', 'Delete', () => deleteSlides()),
+    act('select_all', 'Select all', () => { picked = new Set(slides); renderThumbs(); }),
+    act('visibility_off', 'Skip slide', () => skipSlides()),
+    act('format_color_fill', 'Change background', () => showBgDialog(true)),
+    act('view_quilt', 'Layout', () => phoneSheet.open({ title: 'Layout', build(b) { b.append(layoutGrid(name => { phoneSheet.close(); slideOp(() => pickedIdx().forEach(i => applyLayout(slides[i], name))); })); } })));
+  bar.after(slideBar);
+  function setSlideMode(on) {
+    slideMode = on; document.documentElement.classList.toggle('ph-slide', on);
+    if (on) { stopEdit(); sel.clear(); drawOverlay(); } else picked = new Set([slides[cur]]);
+    renderThumbs();
+  }
+  function cellTap(j) {
+    if (slideMode) {   // add or drop it; the last one can't go
+      const s = slides[j];
+      if (picked.has(s) && picked.size > 1) { picked.delete(s); if (j === cur) go(pickedIdx()[0], true); else renderThumbs(); }
+      else if (!picked.has(s)) { picked.add(s); go(j, true); }
+      return;
+    }
+    if (j === cur) setSlideMode(true); else go(j);
+  }
+  const phoneState0 = phoneState;
+  phoneState = st => { if (slideMode) setSlideMode(false); phoneState0(st); };
+  stage.addEventListener('pointerdown', () => { if (slideMode) setSlideMode(false); }, true);   // touching the slide leaves slide mode
+
+  /* ---- Add slide (12-new-slide-layouts.png): the layouts in two columns, full screen ---- */
+  const PHT = { title: 'Double tap to add title', sub: 'Double tap to add subtitle', body: 'Double tap to add text' };
+  function layoutPic(lay) {   // the layout's placeholders as the app draws them: outlined boxes with their prompt
+    const list = theme().layouts?.[lay[0]] || lay[2];
+    return `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none"><rect width="${W}" height="${H}" fill="#fff"/>` +
+      (lay[0] === 'section-description' ? `<rect x="${W / 2}" width="${W / 2}" height="${H}" fill="#eee"/>` : '') +
+      list.map(([role, x, y, w, h, pt, , ta]) => {
+        const text = lay[0] === 'big-number' && role === 'title' ? 'xx%' : PHT[role], fs = Math.min(pt * 2.67, (w - 40) / (text.length * .5)), tx = ta === 'center' ? x + w / 2 : x + 20, anchor = ta === 'center' ? 'middle' : 'start';
+        return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="none" stroke="#9aa0a6" stroke-width="4"/>` +
+          `<text x="${tx}" y="${y + Math.min(h - 10, fs * 1.2)}" font-size="${fs}" text-anchor="${anchor}" fill="${role === 'title' ? '#000' : '#5f6368'}" font-family="Arial">${text}</text>`;
+      }).join('') + '</svg>';
+  }
+  function layoutGrid(pick) {
+    const g = el('div', 'ph-layouts');
+    for (const lay of LAYOUTS) {
+      const t = el('button', 'ph-layout', layoutPic(lay) + '<span></span>'); t.dataset.layout = lay[0];
+      t.querySelector('span').textContent = lay[1]; t.onclick = () => pick(lay[0]); g.append(t);
+    }
+    return g;
+  }
+  const addSlide = el('div', 'ph-addslide'); addSlide.id = 'ph-addslide'; addSlide.hidden = true;
+  const head = el('div', 'ph-addslide-head', '<span>Add slide</span>'), shut = iconBtn('close', 'Close', () => { addSlide.hidden = true; });
+  head.append(shut);
+  addSlide.append(head, layoutGrid(name => { addSlide.hidden = true; newSlideWith(name); }));
+  document.body.append(addSlide);
+  add.onclick = () => { addSlide.hidden = false; addSlide.lastElementChild.scrollTop = 0; };
+
+  /* ---- the toolbar under the filmstrip (above the keyboard while typing): text, or a shape's fill and border ---- */
+  const tools = el('div', 'ph-tools'), textTools = el('div', 'ph-tools-text'), shapeTools = el('div', 'ph-tools-shape');
+  tools.id = 'ph-tools';
+  const toggle = (icon, title, id) => { const b = iconBtn(icon, title, () => { $(id).click(); syncTools(); }); b.dataset.mirror = id; return b; };
+  const swatch = (icon, title, what) => {   // a colour button with the colour under it; it opens the colour panel (phone-sheets.js)
+    const b = iconBtn(icon, title, () => phoneColors(what)); b.dataset.for = what; b.classList.add('ph-swatch'); b.append(el('i', 'ph-bar-color')); return b;
+  };
+  const align = (a, icon, title) => { const b = iconBtn(icon, title, () => { setAlign(a); syncTools(); }); b.dataset.align = a; return b; };
+  // in the side rails the three align buttons are one, which opens them as a menu (the column has room for fewer buttons)
+  const alignOne = iconBtn('format_align_left', 'Align', e => menuAt(e.currentTarget, [['left', 'Left'], ['center', 'Center'], ['right', 'Right']].map(([a, label]) => ({ label, on: () => curAlign() === a, run: () => { setAlign(a); syncTools(); } }))));
+  alignOne.classList.add('ph-rail-only', 'ph-align-one');
+  textTools.append(toggle('format_bold', 'Bold', '#ed-bold'), toggle('format_italic', 'Italic', '#ed-italic'), toggle('format_underlined', 'Underline', '#ed-underline'),
+    swatch('format_color_text', 'Text color', 'color'), swatch('ink_highlighter', 'Highlight color', 'hilite'), el('i', 'ph-sep'),
+    align('left', 'format_align_left', 'Left'), align('center', 'format_align_center', 'Center'), align('right', 'format_align_right', 'Right'), alignOne);
+  shapeTools.append(swatch('format_color_fill', 'Fill color', 'fill'), swatch('border_color', 'Border color', 'stroke'), iconBtn('line_weight', 'Border weight', e => menuAt(e.currentTarget, [1, 2, 3, 4, 8, 12, 16, 24].map(v => ({ label: v + 'px', on: () => curSw() === v, run: () => { setVar('--sw', v + 'px'); commit(); } })))));
+  // the side rails' format column: ✓ (done) on top, and Cut, Copy, Paste, Delete in its ⋯ (the edit menu's, phone-touch.js)
+  const railDone = iconBtn('check', 'Done', () => done.click()), railEdit = iconBtn('more_horiz', 'Cut, copy, paste, delete', e => menuAt(e.currentTarget, phoneClipActions().map(([label, run]) => ({ label, run }))));
+  railDone.classList.add('ph-rail-only', 'ph-done'); railEdit.classList.add('ph-rail-only');
+  tools.append(railDone, textTools, shapeTools, railEdit);
+  film.after(tools);
+  const kind = () => {
+    const b = sel.size === 1 ? [...sel][0] : null;
+    if (editing) return 'text';
+    if (!b || isMedia(b) || isGroup(b)) return '';
+    if (isLine(b)) return 'shape';
+    return b.dataset.shape ? 'shape' : 'text';
+  };
+  function syncTools() {
+    textTools.querySelectorAll('[data-mirror]').forEach(b => b.classList.toggle('on', $(/** @type {HTMLElement} */ (b).dataset.mirror).classList.contains('on')));
+    const a = sel.size ? curAlign() : '';
+    textTools.querySelectorAll('[data-align]').forEach(b => b.classList.toggle('on', /** @type {HTMLElement} */ (b).dataset.align === a));
+    alignOne.querySelector('.icon').textContent = `format_align_${['center', 'right'].includes(a) ? a : 'left'}`;
+    tools.querySelectorAll('.ph-swatch').forEach(b => { /** @type {HTMLElement} */ (b.querySelector('.ph-bar-color')).style.background = $('#ed-' + /** @type {HTMLElement} */ (b).dataset.for).value; });
+  }
+  function showTools() {
+    const k = kind(), root = document.documentElement;
+    root.classList.toggle('ph-tools-text', k === 'text'); root.classList.toggle('ph-tools-shape', k === 'shape');
+    root.classList.toggle('ph-typing', !!editing);
+    if (k) syncTools();
+    if (phoneLayout('float')) requestAnimationFrame(floatTools);
+  }
+  /* layout "float": the format bar sits just above the selection (below it when there's no room), not at the bottom */
+  function floatTools() {
+    const box = ui.querySelector('.sel-box') || (editing && editing), r = box?.getBoundingClientRect();
+    if (!r || editing || !kind() || rails()) { tools.style.top = tools.style.left = ''; return; }   // the side rails keep it in its column
+    const top = $('#ph-top').getBoundingClientRect().bottom, w = tools.offsetWidth, h = tools.offsetHeight, knob = 56;
+    let y = r.top - knob - h; if (y < top + 8) y = r.bottom + 16;
+    tools.style.top = Math.min(y, innerHeight - h - 8) + 'px';
+    tools.style.left = Math.max(8, Math.min(r.left + r.width / 2 - w / 2, innerWidth - w - 8)) + 'px';
+  }
+  /* layout "thumb": the deck's title on top, the actions in a pill above the filmstrip, where a thumb reaches */
+  if (phoneLayout('thumb')) {
+    const dock = el('div', 'ph-dock'), title = el('span', 'ph-doc-title');
+    const name = () => { title.textContent = $('#ed-title').value || 'Untitled presentation'; };
+    $('#ed-title').addEventListener('input', name);
+    const renderThumbs1 = renderThumbs; window['renderThumbs'] = () => { renderThumbs1(); name(); };   // the title arrives with the deck
+    ['Undo', 'Redo', 'Insert', 'Present', 'Comments'].forEach(t => dock.append(bar.querySelector(`[title="${t}"]`)));
+    bar.querySelector('.ph-gap').replaceWith(title);
+    film.before(dock);
+    /* in landscape, side rails: no top bar; the filmstrip runs down the left, and the pill stands
+       on the right with back (✓ with a selection) on top and ⋯ below; a text box or shape selected turns the column into
+       its format controls (#ph-tools). phone.css lays it out under html.ph-rails. */
+    const railBack = iconBtn('arrow_back', 'Back to the slides', () => back.click()), railDone2 = iconBtn('check', 'Done', () => done.click()), railMore = iconBtn('more_horiz', 'More', more);
+    railBack.classList.add('ph-rail-only', 'ph-rail-back'); railDone2.classList.add('ph-rail-only', 'ph-done'); railMore.classList.add('ph-rail-only');
+    dock.prepend(railBack, railDone2); dock.append(railMore);
+    const wide = matchMedia('(orientation: landscape)');
+    const setRails = () => { document.documentElement.classList.toggle('ph-rails', wide.matches); showTools(); fillFilm(); };
+    wide.addEventListener('change', setRails); setRails();
+  }
+  new ResizeObserver(() => fit()).observe(stage);   // the keyboard and typing change the canvas's size; a toolbar alone doesn't
+  const updateToolbar0 = updateToolbar;
+  window['updateToolbar'] = () => { updateToolbar0(); if (kind()) syncTools(); };
+})();