Browse Source

add background photos -- not quite done yet

master
Ev Bogue 3 years ago
parent
commit
cb59e30215
  1. 7
      css/style.css
  2. 4
      gossip.js
  3. 78
      identify.js
  4. 16
      render.js
  5. 24
      views.js

7
css/style.css

@ -59,11 +59,16 @@ hr {
.message, .profile {
border: 1px solid #ddd;
background: white;
margin-top: .5em;
margin-bottom: .5em;
padding: .3em .5em;
}
.message {
border-radius: 5px;
}
.banner { height: 275px; }
#scroller:last-child { margin-bottom: 10em; }
.message, .message > *, .navbar, .navbar > *, #ad, #ad > *, #viewer > * {

4
gossip.js

@ -49,7 +49,7 @@ function processreq (req, pubkey, connection, keys) {
var src = window.location.hash.substring(1)
if ((src === msg.author) || (src === '')) {
var scroller = document.getElementById('scroller')
scroller.insertBefore(render(opened, keys), scroller.childNodes[1])
scroller.insertBefore(render(opened, keys), scroller.childNodes[2])
}
if (opened.seq === req.length) {
localforage.setItem('log', log)
@ -71,7 +71,7 @@ function processreq (req, pubkey, connection, keys) {
var src = window.location.hash.substring(1)
if ((src === msg.author) || (src === '')) {
var scroller = document.getElementById('scroller')
scroller.insertBefore(render(opened, keys), scroller.childNodes[1])
scroller.insertBefore(render(opened, keys), scroller.childNodes[2])
}
if (req.length + lastmsg.seq === opened.seq) {
localforage.setItem('log', log)

78
identify.js

@ -8,6 +8,72 @@ function identify (src, profile, keys) {
var photoURL = {}
// this could be a hell of a lot dry-er
// also we need to get rid of UI glitches when you hit the cancel button (it should return to the same state it started in)
var newBackground = h('span', [
h('input', {id: 'input', type: 'file',
onclick: function () {
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
var maxW
var maxH
var input = document.getElementById('input')
input.addEventListener('change', handleFiles)
function handleFiles(e) {
var img = new Image
img.onload = function() {
var iw = img.width
var ih = img.height
maxW = 800
maxH = 800
var scale = Math.min((maxW/iw), (maxH/ih))
var iwScaled = iw*scale
var ihScaled = ih*scale
canvas.width = iwScaled
canvas.height = ihScaled
ctx.drawImage(img, 0, 0, iwScaled, ihScaled)
photoURL.value = canvas.toDataURL('image/jpeg', 0.7)
}
img.src = URL.createObjectURL(e.target.files[0])
}
}
}),
h('canvas', {id: 'canvas', width: '0', height: '0'}),
h('button', {
onclick: function () {
identifyDiv.appendChild(identifyButtons)
newBackground.parentNode.removeChild(newBackground)
}
}, ['Cancel']),
h('button', {
onclick: function () {
if (photoURL.value) {
content = {
type: 'background',
backgrounded: src,
background: photoURL.value
}
localforage.removeItem('image:' + src)
publish(content, keys).then(post => {
open(post).then(msg => {
nameInput.value = ''
scroller.insertBefore(render(msg, keys), scroller.childNodes[1])
})
})
newBackground.parentNode.removeChild(newBackground)
identifyDiv.appendChild(identifyButton)
}
}
}, ['Publish'])
])
var newPhoto = h('span', [
h('input', {id: 'input', type: 'file',
onclick: function () {
@ -47,7 +113,6 @@ function identify (src, profile, keys) {
canvas.width = iwScaled
canvas.height = ihScaled
ctx.drawImage(img, 0, 0, iwScaled, ihScaled)
console.log(canvas.toDataURL('image/jpeg', 0.9))
photoURL.value = canvas.toDataURL('image/jpeg', 0.9)
}
img.src = URL.createObjectURL(e.target.files[0])
@ -69,7 +134,6 @@ function identify (src, profile, keys) {
imaged: src,
image: photoURL.value
}
console.log(content)
localforage.removeItem('image:' + src)
publish(content, keys).then(post => {
open(post).then(msg => {
@ -84,6 +148,9 @@ function identify (src, profile, keys) {
}, ['Publish'])
])
var nameInput = h('input', {placeholder: 'New name'})
var newName = h('div', [
@ -125,7 +192,12 @@ function identify (src, profile, keys) {
identifyButtons.parentNode.removeChild(identifyButtons)
}
}, ['New name']))
identifyButtons.appendChild(h('button', {
onclick: function () {
identifyDiv.appendChild(newBackground)
identifyButtons.parentNode.removeChild(identifyButtons)
}
}, ['New background']))
}
//}, ['Identify ' + src.substring(0, 10) + '... with a new name']),
identifyButtons.appendChild(h('button', {

16
render.js

@ -183,10 +183,11 @@ function render (msg, keys, preview) {
message.appendChild(buttons)
}
} else if (msg.type == 'name') {
} if (msg.type == 'name') {
var mini = h('span', [' identified ', h('a', {href: '#' + msg.named }, [msg.named.substring(0, 10) + '...']), ' as ' + msg.name])
message.appendChild(getHeader(msg, keys, mini))
} else if (msg.type == 'image') {
} if (msg.type == 'image') {
var mini = h('span', [
' added an image to ',
h('a', { href: '#' + msg.imaged }, [msg.imaged.substring(0, 10) + '...']),
@ -194,8 +195,19 @@ function render (msg, keys, preview) {
h('img', {src: msg.image, classList: 'avatar'})
])
message.appendChild(getHeader(msg, keys, mini))
} if (msg.type == 'background') {
var mini = h('span', [
' added a background to ',
h('a', { href: '#' + msg.backgrounded }, [msg.backgrounded.substring(0, 10) + '...']),
' ',
h('img', {src: msg.background, classList: 'avatar'})
])
message.appendChild(getHeader(msg, keys, mini))
}
messageDiv.appendChild(message)
return messageDiv
}

24
views.js

@ -9,7 +9,24 @@ function profilePage (src, keys) {
msg.author = src
var profile = h('div', {classList: 'profile'})
var banner = h('div', {classList: 'banner'})
function getBg (src, profile) {
bog().then(log => {
if (log) {
for (var i = 0; i < log.length; i++) {
if ((log[i].backgrounded === src) && (log[i].author === src)) {
// if you've identified someone as something else show that something else
return banner.style.background = 'fixed top/680px no-repeat url(' + log[i].background + ')'
}
}
}
})
}
getBg(src, profile)
scroller.appendChild(banner)
scroller.appendChild(profile)
//scroller.appendChild(h('div'))
@ -27,12 +44,15 @@ function profilePage (src, keys) {
profile.appendChild(h('a', {href: '#' + src}, [
getImage(src, keys, 'profileAvatar'),
getName(src, keys)
getName(src, keys),
h('br'),
h('br')
]))
profile.appendChild(h('br'))
quickName(src).then(name => {
profile.appendChild(identify(src, profile, keys, name))
var mentionsButton = h('button', {
onclick: function () {
location.href = '#?' + src
@ -76,7 +96,6 @@ function profilePage (src, keys) {
}, ['Delete ' + name + '\'s feed']))
})
profile.appendChild(identify(src, profile, keys))
async function addPosts (posts, keys) {
posts.forEach(function (msg) {
@ -197,3 +216,4 @@ function publicPage (keys) {
})
}

Loading…
Cancel
Save