Skip to main content

max / makenotwork

7.1 KB · 127 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(--background-color,#ede8e1); border:1px solid var(--border-color); 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-color);">' +
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(--text-color);">&times;</button>' +
19 '</div>' +
20 '<div style="padding:0.75rem 1.25rem; border-bottom:1px solid var(--border-color); 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-color); 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 if (!files || files.length === 0) {
70 grid.innerHTML = '<p class="form-hint">No media files yet. Upload images in your Media Library tab first.</p>';
71 return;
72 }
73 var html = '';
74 for (var i = 0; i < files.length; i++) {
75 var f = files[i];
76 var ref = f.markdown_ref || f.file_name;
77 var isImage = (f.content_type || '').indexOf('image') === 0;
78 html += '<div class="mp-card" data-name="' + (f.file_name || '') + '" data-folder="' + (f.folder || '') + '" ' +
79 'style="cursor:pointer; border:1px solid var(--border-color); padding:0.5rem; background:var(--light-background); transition:outline 0.1s;" ' +
80 'onclick="window._mediaPickerSelect(\'' + ref.replace(/'/g, "\\'") + '\')" ' +
81 'onmouseenter="this.style.outline=\'2px solid var(--accent-color)\'" onmouseleave="this.style.outline=\'none\'">';
82 if (isImage) {
83 html += '<div style="width:100%; height:80px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--surface-muted); margin-bottom:0.4rem;">' +
84 '<img src="' + f.cdn_url + '" alt="' + (f.file_name || '') + '" style="max-width:100%; max-height:80px; object-fit:contain;" loading="lazy"></div>';
85 } else {
86 html += '<div style="width:100%; height:80px; display:flex; align-items:center; justify-content:center; background:var(--surface-muted); margin-bottom:0.4rem; font-size:1.5rem; opacity:0.4;">&#128196;</div>';
87 }
88 html += '<div style="font-size:0.75rem; word-break:break-all; line-height:1.2;" title="' + (f.file_name || '') + '">' + (f.file_name || '') + '</div>';
89 html += '</div>';
90 }
91 grid.innerHTML = html;
92 }
93
94 window._mediaPickerSelect = function(ref) {
95 if (targetTextareaId) {
96 insertAtCursor(targetTextareaId, '![](' + ref + ')');
97 }
98 mediaPickerClose();
99 };
100
101 window.mediaPickerOpen = function(textareaId) {
102 targetTextareaId = textareaId;
103 createModal();
104 modal.style.display = 'flex';
105 document.getElementById('media-picker-search').value = '';
106 document.getElementById('media-picker-grid').innerHTML = '<p class="form-hint">Loading...</p>';
107
108 fetch('/api/media', { credentials: 'same-origin', headers: csrfHeaders() })
109 .then(function(res) { return res.json(); })
110 .then(function(data) {
111 // Populate folder dropdown
112 var sel = document.getElementById('media-picker-folder');
113 sel.innerHTML = '<option value="">All folders</option>';
114 (data.folders || []).forEach(function(f) {
115 var opt = document.createElement('option');
116 opt.value = f;
117 opt.textContent = f || '(root)';
118 sel.appendChild(opt);
119 });
120 renderGrid(data.files || []);
121 })
122 .catch(function() {
123 document.getElementById('media-picker-grid').innerHTML = '<p class="form-hint">Failed to load media library.</p>';
124 });
125 };
126 })();
127