braid-blob 0.0.79 → 0.0.80

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.
Files changed (3) hide show
  1. package/README.md +9 -4
  2. package/img-live.js +34 -0
  3. 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 that automatically syncs any `<img>` element with a `live` attribute. Images update in real-time whenever the blob changes on the server.
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! The image will automatically stay synchronized with the server. When any client updates `/blob.png`, all `<img live src="/blob.png">` elements will update in real-time.
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
- The polyfill:
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 live image
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "braid-blob",
3
- "version": "0.0.79",
3
+ "version": "0.0.80",
4
4
  "description": "Library for collaborative blobs over http using braid.",
5
5
  "author": "Braid Working Group",
6
6
  "repository": "braid-org/braid-blob",