diff options
| -rw-r--r-- | css/style.css | 6 | ||||
| -rw-r--r-- | identify.js | 80 | ||||
| -rw-r--r-- | render.js | 12 |
3 files changed, 68 insertions, 30 deletions
diff --git a/css/style.css b/css/style.css index bdd1c6b..1683032 100644 --- a/css/style.css +++ b/css/style.css @@ -228,8 +228,10 @@ form.search { text-decoration: none; } -.profileAvatar { width: 75px; vertical-align: top; border-radius: 5px; margin-right: .25em; margin-bottom: .25em;} -.avatar { width: 25px; height: 25px; vertical-align: middle; border-radius: 5px; margin-right: .2em; } +.profileAvatar { width: 75px; vertical-align: top; border-radius: 5px; object-fit: cover; margin-right: .25em; margin-bottom: .25em;} +.avatar { width: 25px; height: 25px; vertical-align: middle; object-fit: cover; border-radius: 5px; margin-right: .2em; } + +.image { width: 75px; height: 75px; object-fit: cover; margin-right: .2em; border-radius: 5px;} button { display: inline-block; diff --git a/identify.js b/identify.js index 2ba5eea..1381c6f 100644 --- a/identify.js +++ b/identify.js @@ -2,7 +2,7 @@ function identify (src, profile, keys) { var identifyDiv = h('div') - if (src != keys.publicKey) { + if ((src[0] == '@') && (src != keys.publicKey)) { identifyDiv.appendChild(h('p', ['Please note: ' + src + ' is not you.'])) } @@ -14,8 +14,8 @@ function identify (src, profile, keys) { var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d") - var maxW = 250 - var maxH = 250 + var maxW + var maxH var input = document.getElementById('input') input.addEventListener('change', handleFiles) @@ -24,7 +24,23 @@ function identify (src, profile, keys) { var img = new Image img.onload = function() { var iw = img.width + console.log(iw) var ih = img.height + console.log(ih) + + if (iw > ih) { + maxW = 680 + maxH = 500 + } + if (iw < ih) { + maxW = 500 + maxH = 680 + } + if (iw == ih) { + maxW = 500 + maxH = 500 + } + var scale = Math.min((maxW/iw), (maxH/ih)) var iwScaled = iw*scale var ihScaled = ih*scale @@ -33,13 +49,11 @@ function identify (src, profile, keys) { ctx.drawImage(img, 0, 0, iwScaled, ihScaled) console.log(canvas.toDataURL('image/jpeg', 0.9)) photoURL.value = canvas.toDataURL('image/jpeg', 0.9) - //identifyDiv.appendChild(h('img', {src: photoURL.value})) } img.src = URL.createObjectURL(e.target.files[0]) } } }), - h('p', ['We recommend uploading a square photo. It will automatically be cropped to 250 x 250 px.']), h('canvas', {id: 'canvas', width: '0', height: '0'}), h('button', { onclick: function () { @@ -102,35 +116,49 @@ function identify (src, profile, keys) { }, ['Cancel']) ]) - var identifyButtons = h('span', [ - h('button', { + var identifyButtons = h('span') + + if (src[0] == '@') { + identifyButtons.appendChild(h('button', { onclick: function () { identifyDiv.appendChild(newName) identifyButtons.parentNode.removeChild(identifyButtons) } - }, ['Identify ' + src.substring(0, 10) + '... with a new name']), - h('button', { - onclick: function () { - identifyDiv.appendChild(newPhoto) - identifyButtons.parentNode.removeChild(identifyButtons) - } - }, ['Identify ' + src.substring(0, 10) + '... with a new photo']), - h('button', { - onclick: function () { - identifyDiv.appendChild(identifyButton) - identifyButtons.parentNode.removeChild(identifyButtons) - } - }, ['Cancel']) - ]) + }, ['New name'])) - var identifyButton = h('button', { + } + //}, ['Identify ' + src.substring(0, 10) + '... with a new name']), + identifyButtons.appendChild(h('button', { + onclick: function () { + identifyDiv.appendChild(newPhoto) + identifyButtons.parentNode.removeChild(identifyButtons) + } + }, ['New image'])) + //}, ['Identify ' + src.substring(0, 10) + '... with a new photo']), + identifyButtons.appendChild(h('button', { onclick: function () { - profile.appendChild(identifyDiv) - profile.appendChild(identifyButtons) - identifyButton.parentNode.removeChild(identifyButton) + identifyDiv.appendChild(identifyButton) + identifyButtons.parentNode.removeChild(identifyButtons) } - },['Identify ' + src.substring(0, 10) + '...']) + }, ['Cancel'])) + if (src[0] == '@') { + var identifyButton = h('button', { + onclick: function () { + profile.appendChild(identifyDiv) + profile.appendChild(identifyButtons) + identifyButton.parentNode.removeChild(identifyButton) + } + }, ['Identify ' + src.substring(0, 10) + '...']) + } else { + var identifyButton = h('button', { + onclick: function () { + profile.appendChild(identifyDiv) + profile.appendChild(identifyButtons) + identifyButton.parentNode.removeChild(identifyButton) + } + }, ['Add to ' + src.substring(0, 10) + '...']) + } return identifyButton } @@ -102,6 +102,10 @@ function render (msg, keys, preview) { if (!messageExists) { messageDiv.appendChild(h('div', {classList: 'submessage'}, [render(nextPost, keys)])) } + } + + if (nextPost.imaged == msg.key) { + message.insertBefore(h('img', {src: nextPost.image, classList: 'image'}), message.childNodes[message.childNodes.length - 1]) } }) } @@ -163,8 +167,9 @@ function render (msg, keys, preview) { ])) } message.appendChild(h('div',{id: 'content:' + msg.key, innerHTML: marked(msg.text)})) + var buttons = h('div') if (!preview) { - message.appendChild(h('button', { + buttons.appendChild(h('button', { onclick: function () { quickName(msg.author).then(name => { var compose = h('div', {classList: 'submessage'}, [composer(keys, msg, name)]) @@ -177,13 +182,16 @@ function render (msg, keys, preview) { } }, ['Reply'])) if (msg.author === keys.publicKey) { - message.appendChild(h('button', { + buttons.appendChild(h('button', { onclick: function () { var editor = h('div', {classList: 'submessage'}, [composer(keys, msg, {name: false}, {edit: true})]) messageDiv.appendChild(editor) } }, ['Edit'])) + buttons.appendChild(identify(msg.key, message, keys)) } + + message.appendChild(buttons) } } else if (msg.type == 'name') { var mini = h('span', [' identified ', h('a', {href: '#' + msg.named }, [msg.named.substring(0, 10) + '...']), ' as ' + msg.name]) |