function externalConfirm (href) {
var lb = lightbox()
document.body.appendChild(lb)
var okay = h('button.okay', {
'ev-click': () => {
lb.remove()
open(href)
}},
'open'
)
var cancel = h('button.cancel.-subtle', {
'ev-click': () => {
lb.remove()
}},
'cancel'
)
okay.addEventListener('keydown', function (ev) {
if (ev.keyCode === 27) cancel.click() // escape
})
lb.show(h('ExternalConfirm', [
h('header', 'External link'),
h('section.prompt', [
h('div.question', 'Open this link in your external browser?'),
h('pre.link', href)
]),
h('section.actions', [cancel, okay])
]))
okay.focus()
}
return function (id) {
var img = visualize(new Buffer(id.substring(1), 'base64'), 256)
img.classList.add('avatar--large')
var lb = hyperlightbox()
var name_input = h('input', {placeholder: 'rename'})
var name = api.avatar_name(id)
var selected = null, selected_data = null
getAvatar({links: api.sbot_links}, self_id, id, function (err, avatar) {
if (err) return console.error(err)
//don't show user has already selected an avatar.
if(selected) return
if(ref.isBlob(avatar.image))
img.src = api.blob_url(avatar.image)
})
var also_pictured = h('div.profile__alsopicturedas.wrap')
pull(
api.sbot_links({dest: id, rel: 'about', values: true}),
pull.map(function (e) {
return e.value.content.image
}),
pull.filter(function (e) {
return e && 'string' == typeof e.link
}),
pull.unique('link'),
pull.drain(function (image) {
also_pictured.appendChild(
h('a', {href:'#', onclick: function (ev) {
ev.stopPropagation()
ev.preventDefault()
selected = image
img.src = api.blob_url(image.link || image)
}},
h('img.avatar--thumbnail', {src: api.blob_url(image)})
)
)
})
)
return h('div.row.profile',
lb,
img,
h('div.column.profile__info',
h('strong', name),
name_input,
hyperfile.asDataURL(function (data) {
var el = crop(data, function (err, data) {
if(data) {
img.src = data
var _data = dataurl.parse(data)
pull(
pull.once(_data.data),
api.sbot_blobs_add(function (err, hash) {
//TODO. Alerts are EVIL.
//I use them only in a moment of weakness.
if(err) return alert(err.stack)
selected = {
link: hash,
size: _data.data.length,
type: _data.mimetype,
width: 512,
height: 512
}
})
)
}
lb.close()
})
lb.show(el)
}),
h('button', 'update', {onclick: function () {
if(name_input.value)
name.textContent = name_input.value
if(selected)
api.message_confirm({
type: 'about',
about: id,
name: name_input.value || undefined,
image: selected
})
else if(name_input.value) //name only
confirm({
type: 'about',
about: id,
name: name_input.value || undefined,
})
else
//another moment of weakness
alert('must select a name or image')
}}),
also_pictured
)
)
}