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:
parent
40216377f9
commit
ec5d7c1a01
@ -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"}}
|
@ -45,6 +45,29 @@ Vue.component('tf-message', {
|
|||||||
show_message: function() {
|
show_message: function() {
|
||||||
window.parent.postMessage({action: 'setHash', hash: this.message.id}, '*');
|
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">
|
template: `<md-app class="md-elevation-8" style="margin: 1em" v-if="!content_json || ['pub', 'vote'].indexOf(content_json.type) == -1">
|
||||||
<md-app-toolbar>
|
<md-app-toolbar>
|
||||||
@ -79,10 +102,10 @@ Vue.component('tf-message', {
|
|||||||
<div v-else>
|
<div v-else>
|
||||||
<div v-if="content_json && content_json.type == 'post'">
|
<div v-if="content_json && content_json.type == 'post'">
|
||||||
<div v-html="this.markdown(content_json.text)"></div>
|
<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>
|
<a v-if="mention.type == 'application/tildefriends'" :href="'/' + mention.link + '/'" target="_top">{{mention.name}}</a>
|
||||||
<img v-else :src="'/' + mention.link + '/view'"></img>
|
<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>
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="content_json && content_json.type == 'tildefriends-app'">
|
<div v-else-if="content_json && content_json.type == 'tildefriends-app'">
|
||||||
<div v-html="this.markdown(content_json.text)"></div>
|
<div v-html="this.markdown(content_json.text)"></div>
|
||||||
|
Loading…
Reference in New Issue
Block a user