From 96af07d8be5ee32a546de4c4ffd64e5180768cae Mon Sep 17 00:00:00 2001 From: Ev Bogue Date: Sun, 15 Dec 2019 16:08:35 -0600 Subject: click to expand images --- css/style.css | 6 +++++- 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; diff --git a/render.js b/render.js index 5070a5f..d85d04b 100644 --- a/render.js +++ b/render.js @@ -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]) } }) } -- cgit v1.2.3-70-g09d2