Click to expand images. Long overdue.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3805 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2022-01-29 21:14:16 +00:00
parent 40216377f9
commit ec5d7c1a01
2 changed files with 27 additions and 4 deletions

View File

@ -1 +1 @@
{"type":"tildefriends-app","files":{"app.js":"&OOcUHSIAA6CR2dYSv2BwOMBZ1hjFg+PJZPABhZMe1Gc=.sha256","index.html":"&ko7qv1Ihzmw8ibXr0RinyzNBc2xNzcGDQDPO9X3JAAQ=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&DdJwZYEo7AqFyutYMvEjykoVXxdHVog0UXye6Sbo0TU=.sha256","tf-message.js":"&3dPiSNYjoJE3zn1oTT1SBhbvkW9MHr7ZUDxUJiBI1Ss=.sha256","tf.js":"&/yKh5E/PLaK/M3tivdldiEDnpeYQYyuLHWjjdM/QpxE=.sha256","commonmark.min.js":"&EP0OeR9zyLwZannz+0ga4s9AGES2RLvvIIQYHqqV6+k=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256","tf-shared.js":"&+qPP3g4CAUlkt8K4iBCZ+F5Fy6N7fu6MggvSVss2juE=.sha256"}}
{"type":"tildefriends-app","files":{"app.js":"&OOcUHSIAA6CR2dYSv2BwOMBZ1hjFg+PJZPABhZMe1Gc=.sha256","index.html":"&ko7qv1Ihzmw8ibXr0RinyzNBc2xNzcGDQDPO9X3JAAQ=.sha256","vue-material.js":"&K5cdLqXYCENPak/TCINHQhyJhpS4G9DlZHGwoh/LF2g=.sha256","tf-user.js":"&DdJwZYEo7AqFyutYMvEjykoVXxdHVog0UXye6Sbo0TU=.sha256","tf-message.js":"&wp4y+HfumjPpbG19989uy4CoGh4telO0xv3zHaNp3sQ=.sha256","tf.js":"&/yKh5E/PLaK/M3tivdldiEDnpeYQYyuLHWjjdM/QpxE=.sha256","commonmark.min.js":"&EP0OeR9zyLwZannz+0ga4s9AGES2RLvvIIQYHqqV6+k=.sha256","vue.js":"&g1wvA+yHl1sVC+eufTsg9If7ZeVyMTBU+h0tks7ZNzE=.sha256","vue-material-theme-default-dark.css":"&RP2nr+2CR18BpHHw5ST9a5GJUCOG9n0G2kuGkcQioWE=.sha256","vue-material.min.css":"&kGbUM2QgFSyHZRzqQb0b+0S3EVIlZ0AXpdiAVjIhou8=.sha256","roboto.css":"&jJv43Om673mQO5JK0jj7714s5E+5Yrf82H6LcDx7wUs=.sha256","material-icons.css":"&a28PdcVvgq/DxyIvJAx/e+ZOEtOuHnr3kjLWKyzH11M=.sha256","tf-shared.js":"&+qPP3g4CAUlkt8K4iBCZ+F5Fy6N7fu6MggvSVss2juE=.sha256"}}

View File

@ -45,6 +45,29 @@ Vue.component('tf-message', {
show_message: function() {
window.parent.postMessage({action: 'setHash', hash: this.message.id}, '*');
},
expand_image: function(event) {
var div = document.createElement('div');
div.style.left = 0;
div.style.top = 0;
div.style.width = '100%';
div.style.height = '100%';
div.style.position = 'fixed';
div.style.background = '#000';
div.style.zIndex = 100;
div.style.display = 'grid';
var img = document.createElement('img');
img.src = event.srcElement.src;
img.style.maxWidth = '100%';
img.style.maxHeight = '100%';
img.style.display = 'block';
img.style.margin = 'auto';
img.style.objectFit = 'contain';
img.style.width = '100%';
div.appendChild(img);
div.onclick = function() { document.body.removeChild(div); };
document.body.appendChild(div);
console.log(document.body.children);
},
},
template: `<md-app class="md-elevation-8" style="margin: 1em" v-if="!content_json || ['pub', 'vote'].indexOf(content_json.type) == -1">
<md-app-toolbar>
@ -79,10 +102,10 @@ Vue.component('tf-message', {
<div v-else>
<div v-if="content_json && content_json.type == 'post'">
<div v-html="this.markdown(content_json.text)"></div>
<div v-for="mention in content_json.mentions" v-if="mention.link && typeof(mention.link) == 'string' && mention.link.startsWith('&')">
<span v-for="mention in content_json.mentions" v-if="mention.link && typeof(mention.link) == 'string' && mention.link.startsWith('&')">
<a v-if="mention.type == 'application/tildefriends'" :href="'/' + mention.link + '/'" target="_top">{{mention.name}}</a>
<img v-else :src="'/' + mention.link + '/view'"></img>
</div>
<img v-else class="md-elevation-4" style="margin: 4px; max-width: 320px; max-height: 240px" :src="'/' + mention.link + '/view'" v-on:click="expand_image"></img>
</span>
</div>
<div v-else-if="content_json && content_json.type == 'tildefriends-app'">
<div v-html="this.markdown(content_json.text)"></div>