ansxor.ca
this repo has no description
remove the observer thing
+25
-45
+25
-45
render.js
+25
-45
render.js
···
41
41
}
42
42
}
43
43
44
-
let intersection_observer, preview
45
-
46
-
const load_image = (e, src)=>{
47
-
const set_size = (state)=>{
48
-
e.width = e.naturalWidth
49
-
e.height = e.naturalHeight
50
-
e.dataset.state = state
51
-
e.style.setProperty('--width', e.naturalWidth)
52
-
e.style.setProperty('--height', e.naturalHeight)
53
-
}
54
-
e.src = src
55
-
// check whether the image is "available" (i.e. size is known) by looking at naturalHeight
56
-
// https://html.spec.whatwg.org/multipage/images.html#img-available
57
-
// this will happen here if the image is VERY cached, i guess
58
-
if (e.naturalHeight)
59
-
set_size('loaded')
60
-
else // otherwise wait for load
61
-
e.decode().then(ok=>{
62
-
set_size('loaded')
63
-
}, no=>{
64
-
e.dataset.state = 'error'
65
-
})
66
-
}
44
+
let preview
67
45
68
46
let CREATE = {
69
47
__proto__: null,
···
98
76
url = filter_url(url, 'link')
99
77
e.target = '_blank'
100
78
} else
101
-
e.target = '_self'
79
+
e.target = '_self' //hack
102
80
e.href = url
103
81
return e
104
82
}.bind(𐀶`<a href="" class='M-link'>`),
105
83
106
84
image: function({url, alt, width, height}) {
85
+
let src = filter_url(url, 'image')
107
86
let e = document.createElement('img')
108
-
e.tabIndex = 0
109
-
e.dataset.state = "loading"
87
+
e.classList.add('M-image')
110
88
e.dataset.shrink = ""
111
-
112
-
let src = filter_url(url, 'image')
113
-
114
-
if (alt!=null) e.alt = e.title = alt
115
-
if (width) {
89
+
if (alt!=null)
90
+
e.alt = e.title = alt
91
+
e.tabIndex = 0
92
+
const set_size = (state, width=e.naturalWidth, height=e.naturalHeight)=>{
116
93
e.width = width
117
-
e.style.setProperty('--width', width)
118
-
}
119
-
if (height) {
120
94
e.height = height
95
+
e.style.setProperty('--width', width)
121
96
e.style.setProperty('--height', height)
122
-
e.dataset.state = 'size'
123
-
}
124
-
125
-
// loading maybe
126
-
if (intersection_observer) {
127
-
e.dataset.src = src
128
-
intersection_observer.observe(e)
129
-
intersection_observer._x_load = load_image//HACK
130
-
} else {
131
-
load_image(e, src)
97
+
e.dataset.state = state
132
98
}
99
+
if (height)
100
+
set_size('size', width, height)
101
+
e.src = src
102
+
// check whether the image is "available" (i.e. size is known) by looking at naturalHeight
103
+
// https://html.spec.whatwg.org/multipage/images.html#img-available
104
+
// this will happen here if the image is VERY cached, i guess
105
+
if (e.naturalHeight)
106
+
set_size('loaded')
107
+
else // otherwise wait for load
108
+
e.decode().then(ok=>{
109
+
set_size('loaded')
110
+
}, no=>{
111
+
e.dataset.state = 'error'
112
+
})
133
113
return e
134
114
},
135
115
···
407
387
@return {ParentNode} - node with rendered contents. same as `node` if passed, otherwise is a new DocumentFragment.
408
388
**/
409
389
this.render = function({args, content}, node=document.createDocumentFragment(), options) {
410
-
intersection_observer = options && options.intersection_observer
411
390
preview = options && options.preview
412
391
node.textContent = "" //mmnn
413
392
fill_branch(node, content)
···
423
402
@member {Object<string,function>}
424
403
**/
425
404
this.url_scheme = URL_SCHEME
405
+
this.filter_url = filter_url
426
406
}}
427
407
428
408
if ('object'==typeof module && module) module.exports = Markup_Render_Dom