diff options
-rw-r--r-- | css/style.css | 6 | ||||
-rw-r--r-- | render.js | 19 |
2 files changed, 23 insertions, 2 deletions
diff --git a/css/style.css b/css/style.css index 1683032..7593324 100644 --- a/css/style.css +++ b/css/style.css @@ -231,7 +231,11 @@ form.search { .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;} +.image { width: 75px; height: 75px; object-fit: cover; margin-right: .2em; border-radius: 5px; cursor: pointer;} + +#viewer {position: fixed; left: 2em; top: 3em; background: white; padding: .5em; border: 1px solid #ddd; border-radius: 5px;} + +#viewer img { border-radius: 5px; margin-left: auto; margin-right: auto; cursor: pointer;} button { display: inline-block; @@ -105,7 +105,24 @@ function render (msg, keys, preview) { } if (nextPost.imaged == msg.key) { - message.insertBefore(h('img', {src: nextPost.image, classList: 'image'}), message.childNodes[message.childNodes.length - 1]) + + var img = h('img', { + src: nextPost.image, + classList: 'image', + onclick: function () { + var viewimg = h('div', {id: 'viewer', onclick: function () { + var viewer = document.getElementById('viewer') + viewer.parentNode.removeChild(viewer) + }}, [ + h('img', { + src: nextPost.image + }) + ]) + document.body.appendChild(viewimg) + } + }) + + message.insertBefore(img, message.childNodes[message.childNodes.length - 1]) } }) } |