braid-blob 0.0.79 → 0.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -4
- package/img-live.js +34 -0
- package/index.js +5 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -347,21 +347,26 @@ Parameters:
|
|
|
347
347
|
|
|
348
348
|
## Live Image Polyfill
|
|
349
349
|
|
|
350
|
-
A polyfill
|
|
350
|
+
A polyfill for real-time collaborative images. Add `live` to any `<img>` element to keep it synced across all clients, and add `droppable` to let users drag-and-drop or paste new images directly onto it.
|
|
351
351
|
|
|
352
352
|
```html
|
|
353
353
|
<script src="https://unpkg.com/braid-http@~1.3/braid-http-client.js"></script>
|
|
354
354
|
<script src="https://unpkg.com/braid-blob/client.js"></script>
|
|
355
355
|
<script src="https://unpkg.com/braid-blob/img-live.js"></script>
|
|
356
356
|
|
|
357
|
+
<!-- Read-only: stays in sync with the server -->
|
|
357
358
|
<img live src="/blob.png">
|
|
359
|
+
|
|
360
|
+
<!-- Read-write: users can drag-and-drop or paste to update -->
|
|
361
|
+
<img live droppable src="/blob.png">
|
|
358
362
|
```
|
|
359
363
|
|
|
360
|
-
That's it!
|
|
364
|
+
That's it! When any client updates `/blob.png`, all `<img live src="/blob.png">` elements across all clients will update in real-time. With `droppable`, users can drag and drop an image file onto the element, or click it and paste from the clipboard — the new image is uploaded to the server and synced to everyone.
|
|
361
365
|
|
|
362
|
-
|
|
366
|
+
Under the hood, the polyfill:
|
|
363
367
|
- Observes the DOM for `<img live>` elements (added, removed, or attribute changes)
|
|
364
|
-
- Creates a `braid_blob_client` subscription for each
|
|
368
|
+
- Creates a `braid_blob_client` subscription for each unique image URL, shared across elements
|
|
369
|
+
- Appends a cache-busting query parameter (e.g. `?img-live=k7x2f9m`) to ensure the browser doesn't serve stale versions
|
|
365
370
|
- Cleans up subscriptions when images are removed from the DOM
|
|
366
371
|
|
|
367
372
|
## Improving this Package
|
package/img-live.js
CHANGED
|
@@ -69,6 +69,8 @@ function sync(img) {
|
|
|
69
69
|
if (sub.current_src) img.src = sub.current_src
|
|
70
70
|
|
|
71
71
|
if (img.hasAttribute('droppable')) {
|
|
72
|
+
if (!img.hasAttribute('tabindex')) img.setAttribute('tabindex', '0')
|
|
73
|
+
|
|
72
74
|
img.addEventListener('dragenter', function() {
|
|
73
75
|
img.style.outline = '3px dashed #007bff'
|
|
74
76
|
img.style.outlineOffset = '3px'
|
|
@@ -96,6 +98,38 @@ function sync(img) {
|
|
|
96
98
|
reader.onload = () => sub.update(reader.result, file.type)
|
|
97
99
|
reader.readAsArrayBuffer(file)
|
|
98
100
|
})
|
|
101
|
+
|
|
102
|
+
img.addEventListener('click', function() {
|
|
103
|
+
img.focus()
|
|
104
|
+
})
|
|
105
|
+
|
|
106
|
+
img.addEventListener('focus', function() {
|
|
107
|
+
img.style.outline = '3px dashed #007bff'
|
|
108
|
+
img.style.outlineOffset = '3px'
|
|
109
|
+
|
|
110
|
+
document.addEventListener('paste', on_paste)
|
|
111
|
+
})
|
|
112
|
+
|
|
113
|
+
img.addEventListener('blur', function() {
|
|
114
|
+
img.style.outline = ''
|
|
115
|
+
img.style.outlineOffset = ''
|
|
116
|
+
|
|
117
|
+
document.removeEventListener('paste', on_paste)
|
|
118
|
+
})
|
|
119
|
+
|
|
120
|
+
function on_paste(e) {
|
|
121
|
+
var items = e.clipboardData.items
|
|
122
|
+
for (var i = 0; i < items.length; i++) {
|
|
123
|
+
if (items[i].type.startsWith('image/')) {
|
|
124
|
+
e.preventDefault()
|
|
125
|
+
var file = items[i].getAsFile()
|
|
126
|
+
var reader = new FileReader()
|
|
127
|
+
reader.onload = () => sub.update(reader.result, file.type)
|
|
128
|
+
reader.readAsArrayBuffer(file)
|
|
129
|
+
break
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
99
133
|
}
|
|
100
134
|
}
|
|
101
135
|
|
package/index.js
CHANGED
|
@@ -443,6 +443,11 @@ function create_braid_blob() {
|
|
|
443
443
|
})
|
|
444
444
|
}
|
|
445
445
|
|
|
446
|
+
braid_blob.list = async () => {
|
|
447
|
+
await braid_blob.init()
|
|
448
|
+
return braid_blob.meta_db.prepare(`SELECT key FROM meta`).all().map(row => row.key)
|
|
449
|
+
}
|
|
450
|
+
|
|
446
451
|
braid_blob.init = async () => {
|
|
447
452
|
// We only want to initialize once
|
|
448
453
|
var init_p = real_init()
|