diff options
| -rw-r--r-- | css/style.css | 7 | ||||
| -rw-r--r-- | gossip.js | 4 | ||||
| -rw-r--r-- | identify.js | 78 | ||||
| -rw-r--r-- | render.js | 16 | ||||
| -rw-r--r-- | views.js | 24 |
5 files changed, 119 insertions, 10 deletions
diff --git a/css/style.css b/css/style.css index 7ec1ee4..df53ffe 100644 --- a/css/style.css +++ b/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 > * { @@ -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) diff --git a/identify.js b/identify.js index 1381c6f..eb8827c 100644 --- a/identify.js +++ b/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', { @@ -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 } @@ -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) { }) } + |