Skip to main content

max / makenotwork

8.1 KB · 156 lines History Blame Raw
1 // Media picker modal, insert image references into Markdown textareas.
2 // Usage: mediaPickerOpen(textareaId) opens the picker, inserts at cursor on selection.
3 (function() {
4 'use strict';
5
6 var modal = null;
7 var targetTextareaId = null;
8
9 function createModal() {
10 if (modal) return modal;
11 modal = document.createElement('div');
12 modal.id = 'media-picker-modal';
13 modal.style.cssText = 'display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.5); align-items:center; justify-content:center;';
14 modal.innerHTML =
15 '<div style="background:var(--surface-page); border:1px solid var(--border); border-radius:6px; width:90%; max-width:700px; max-height:80vh; display:flex; flex-direction:column; overflow:hidden;">' +
16 '<div style="display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--border);">' +
17 '<h3 style="margin:0;">Insert from Media Library</h3>' +
18 '<button id="media-picker-close" style="background:none; border:none; font-size:1.5rem; cursor:pointer; padding:0 0.25rem; color:var(--content);">&times;</button>' +
19 '</div>' +
20 '<div style="padding:0.75rem 1.25rem; border-bottom:1px solid var(--border); display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap;">' +
21 '<input type="text" id="media-picker-search" placeholder="Filter by name..." style="flex:1; min-width:140px; padding:0.35rem 0.5rem; font-size:0.85rem;">' +
22 '<select id="media-picker-folder" style="padding:0.35rem; font-size:0.85rem;"><option value="">All folders</option></select>' +
23 '</div>' +
24 '<div id="media-picker-grid" style="flex:1; overflow-y:auto; padding:1rem 1.25rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.75rem;">' +
25 '<p class="form-hint">Loading...</p>' +
26 '</div>' +
27 '<div style="padding:0.75rem 1.25rem; border-top:1px solid var(--border); font-size:0.85rem; opacity:0.7;">Click an image to insert its Markdown reference at the cursor.</div>' +
28 '</div>';
29 document.body.appendChild(modal);
30
31 document.getElementById('media-picker-close').addEventListener('click', mediaPickerClose);
32 modal.addEventListener('click', function(e) { if (e.target === modal) mediaPickerClose(); });
33 document.getElementById('media-picker-search').addEventListener('input', filterPickerGrid);
34 document.getElementById('media-picker-folder').addEventListener('change', filterPickerGrid);
35
36 return modal;
37 }
38
39 function mediaPickerClose() {
40 if (modal) modal.style.display = 'none';
41 }
42
43 function filterPickerGrid() {
44 var query = (document.getElementById('media-picker-search').value || '').toLowerCase();
45 var folder = document.getElementById('media-picker-folder').value;
46 var cards = document.querySelectorAll('#media-picker-grid .mp-card');
47 for (var i = 0; i < cards.length; i++) {
48 var name = cards[i].dataset.name || '';
49 var f = cards[i].dataset.folder || '';
50 var show = (!query || name.toLowerCase().indexOf(query) !== -1) && (!folder || f === folder);
51 cards[i].style.display = show ? '' : 'none';
52 }
53 }
54
55 function insertAtCursor(textareaId, text) {
56 var ta = document.getElementById(textareaId);
57 if (!ta) return;
58 ta.focus();
59 var start = ta.selectionStart;
60 var end = ta.selectionEnd;
61 ta.value = ta.value.substring(0, start) + text + ta.value.substring(end);
62 ta.selectionStart = ta.selectionEnd = start + text.length;
63 // Trigger input event for auto-save / word count
64 ta.dispatchEvent(new Event('input', { bubbles: true }));
65 }
66
67 function renderGrid(files) {
68 var grid = document.getElementById('media-picker-grid');
69 grid.textContent = '';
70 if (!files || files.length === 0) {
71 var empty = document.createElement('p');
72 empty.className = 'form-hint';
73 empty.textContent = 'No media files yet. Upload images in your Media Library tab first.';
74 grid.appendChild(empty);
75 return;
76 }
77 // Build the grid with DOM APIs (textContent / dataset / addEventListener),
78 // never string-interpolated innerHTML: file_name / folder / cdn_url are
79 // user-controlled and a crafted filename would otherwise be a stored XSS
80 // (ultra-fuzz Run 13 Frontend). This also drops the inline on* handlers.
81 for (var i = 0; i < files.length; i++) {
82 var f = files[i];
83 var ref = f.markdown_ref || f.file_name || '';
84 var name = f.file_name || '';
85 var isImage = (f.content_type || '').indexOf('image') === 0;
86
87 var card = document.createElement('div');
88 card.className = 'mp-card';
89 card.dataset.name = name;
90 card.dataset.folder = f.folder || '';
91 card.style.cssText = 'cursor:pointer; border:1px solid var(--border); padding:0.5rem; background:var(--surface-raised); transition:outline 0.1s;';
92 (function(r) {
93 card.addEventListener('click', function() { window._mediaPickerSelect(r); });
94 })(ref);
95 card.addEventListener('mouseenter', function() { this.style.outline = '2px solid var(--accent-color)'; });
96 card.addEventListener('mouseleave', function() { this.style.outline = 'none'; });
97
98 var thumb = document.createElement('div');
99 if (isImage) {
100 thumb.style.cssText = 'width:100%; height:80px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--surface-sunken); margin-bottom:0.4rem;';
101 var img = document.createElement('img');
102 img.src = f.cdn_url || '';
103 img.alt = name;
104 img.style.cssText = 'max-width:100%; max-height:80px; object-fit:contain;';
105 img.loading = 'lazy';
106 thumb.appendChild(img);
107 } else {
108 thumb.style.cssText = 'width:100%; height:80px; display:flex; align-items:center; justify-content:center; background:var(--surface-sunken); margin-bottom:0.4rem; font-size:1.5rem; opacity:0.4;';
109 thumb.textContent = '\u{1F4C4}';
110 }
111 card.appendChild(thumb);
112
113 var label = document.createElement('div');
114 label.style.cssText = 'font-size:0.75rem; word-break:break-all; line-height:1.2;';
115 label.title = name;
116 label.textContent = name;
117 card.appendChild(label);
118
119 grid.appendChild(card);
120 }
121 }
122
123 window._mediaPickerSelect = function(ref) {
124 if (targetTextareaId) {
125 insertAtCursor(targetTextareaId, '![](' + ref + ')');
126 }
127 mediaPickerClose();
128 };
129
130 window.mediaPickerOpen = function(textareaId) {
131 targetTextareaId = textareaId;
132 createModal();
133 modal.style.display = 'flex';
134 document.getElementById('media-picker-search').value = '';
135 document.getElementById('media-picker-grid').innerHTML = '<p class="form-hint">Loading...</p>';
136
137 fetch('/api/media', { credentials: 'same-origin', headers: csrfHeaders() })
138 .then(function(res) { return res.json(); })
139 .then(function(data) {
140 // Populate folder dropdown
141 var sel = document.getElementById('media-picker-folder');
142 sel.innerHTML = '<option value="">All folders</option>';
143 (data.folders || []).forEach(function(f) {
144 var opt = document.createElement('option');
145 opt.value = f;
146 opt.textContent = f || '(root)';
147 sel.appendChild(opt);
148 });
149 renderGrid(data.files || []);
150 })
151 .catch(function() {
152 document.getElementById('media-picker-grid').innerHTML = '<p class="form-hint">Failed to load media library.</p>';
153 });
154 };
155 })();
156