braid-blob 0.0.64 → 0.0.65
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/img-live-demo.html +1 -1
- package/img-live.js +50 -11
- package/package.json +1 -1
package/img-live-demo.html
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<h1>Braid-Blob Live Image Demo</h1>
|
|
27
27
|
<p>This image updates in real-time across all connected clients.</p>
|
|
28
28
|
|
|
29
|
-
<img live src="/blob.png" alt="Live updating image">
|
|
29
|
+
<img live droppable src="/blob.png" alt="Live updating image">
|
|
30
30
|
|
|
31
31
|
<script src="https://unpkg.com/braid-http@~1.3/braid-http-client.js"></script>
|
|
32
32
|
<script src="client.js"></script>
|
package/img-live.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
// Braid-Blob Live Images
|
|
2
2
|
// requires client.js
|
|
3
3
|
|
|
4
|
-
var live_images = new Map() // img -> ac
|
|
4
|
+
var live_images = new Map() // img -> { ac, client }
|
|
5
5
|
|
|
6
6
|
function sync(img) {
|
|
7
7
|
var url = img.src
|
|
8
8
|
if (!url) return
|
|
9
|
-
if (live_images.has(img)) return
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
// Unsync first to handle attribute changes (e.g. droppable added/removed)
|
|
11
|
+
unsync(img)
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
var ac = new AbortController()
|
|
14
|
+
var client = braid_blob_client(url, {
|
|
15
15
|
signal: ac.signal,
|
|
16
16
|
on_update: (body, content_type) => {
|
|
17
17
|
var blob = new Blob([body], { type: content_type || 'image/png' })
|
|
@@ -21,16 +21,55 @@ function sync(img) {
|
|
|
21
21
|
console.error('Live image error for', url, error)
|
|
22
22
|
}
|
|
23
23
|
})
|
|
24
|
+
live_images.set(img, { ac, client })
|
|
25
|
+
|
|
26
|
+
if (img.hasAttribute('droppable'))
|
|
27
|
+
make_droppable(img)
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
function unsync(img) {
|
|
27
|
-
var
|
|
28
|
-
if (
|
|
29
|
-
ac.abort()
|
|
31
|
+
var entry = live_images.get(img)
|
|
32
|
+
if (entry) {
|
|
33
|
+
entry.ac.abort()
|
|
30
34
|
live_images.delete(img)
|
|
31
35
|
}
|
|
32
36
|
}
|
|
33
37
|
|
|
38
|
+
function make_droppable(img) {
|
|
39
|
+
img.addEventListener('dragenter', function(e) {
|
|
40
|
+
img.style.outline = '3px dashed #007bff'
|
|
41
|
+
img.style.outlineOffset = '3px'
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
img.addEventListener('dragleave', function(e) {
|
|
45
|
+
img.style.outline = ''
|
|
46
|
+
img.style.outlineOffset = ''
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
img.addEventListener('dragover', function(e) {
|
|
50
|
+
e.preventDefault()
|
|
51
|
+
e.dataTransfer.dropEffect = 'copy'
|
|
52
|
+
})
|
|
53
|
+
|
|
54
|
+
img.addEventListener('drop', function(e) {
|
|
55
|
+
e.preventDefault()
|
|
56
|
+
img.style.outline = ''
|
|
57
|
+
img.style.outlineOffset = ''
|
|
58
|
+
|
|
59
|
+
var file = e.dataTransfer.files[0]
|
|
60
|
+
if (!file || !file.type.startsWith('image/')) return
|
|
61
|
+
|
|
62
|
+
var entry = live_images.get(img)
|
|
63
|
+
if (!entry) return
|
|
64
|
+
|
|
65
|
+
var reader = new FileReader()
|
|
66
|
+
reader.onload = function() {
|
|
67
|
+
entry.client.update(reader.result, file.type)
|
|
68
|
+
}
|
|
69
|
+
reader.readAsArrayBuffer(file)
|
|
70
|
+
})
|
|
71
|
+
}
|
|
72
|
+
|
|
34
73
|
var observer = new MutationObserver(function(mutations) {
|
|
35
74
|
mutations.forEach(function(mutation) {
|
|
36
75
|
mutation.addedNodes.forEach(function(node) {
|
|
@@ -47,10 +86,10 @@ var observer = new MutationObserver(function(mutations) {
|
|
|
47
86
|
node.querySelectorAll('img[live]').forEach(unsync)
|
|
48
87
|
}
|
|
49
88
|
})
|
|
50
|
-
if (mutation.type === 'attributes' && mutation.
|
|
89
|
+
if (mutation.type === 'attributes' && mutation.target.tagName === 'IMG') {
|
|
51
90
|
if (mutation.target.hasAttribute('live'))
|
|
52
91
|
sync(mutation.target)
|
|
53
|
-
else
|
|
92
|
+
else if (mutation.attributeName === 'live')
|
|
54
93
|
unsync(mutation.target)
|
|
55
94
|
}
|
|
56
95
|
})
|
|
@@ -66,7 +105,7 @@ function init() {
|
|
|
66
105
|
childList: true,
|
|
67
106
|
subtree: true,
|
|
68
107
|
attributes: true,
|
|
69
|
-
attributeFilter: ['live']
|
|
108
|
+
attributeFilter: ['live', 'droppable']
|
|
70
109
|
})
|
|
71
110
|
|
|
72
111
|
document.querySelectorAll('img[live]').forEach(sync)
|