edshot99/eBooru
1
0
Fork 0
forked from e621ng/e621ng
Code Issues 11 Releases 1 Activity

[Uploader] Move preview properties into own object

Browse Source
This commit is contained in:
Earlopain 2021-10-05 19:22:53 +02:00
parent 3e390cbed7
commit 747fefa4d0
No known key found for this signature in database
GPG Key ID: 6CFB948E15246897
2 changed files with 66 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
app/javascript/src/javascripts/uploader.vue
View File

@ -2,7 +2,7 @@
<div class="flex-grid-outer">
<div class="col box-section" style="flex: 2 0 0;">
<div class="the_secret_switch" @click="toggleNormalMode"></div>
<div class="box-section sect_red" v-show="overDims">
<div class="box-section sect_red" v-show="filePreview.overDims">
One of the image dimensions is above the maximum allowed of 15,000px and will fail to upload.
</div>
<div class="flex-grid border-bottom">
@ -13,7 +13,7 @@
<div class="col2">
<div v-if="!disableFileUpload">
<label>File:
<input type="file" ref="post_file" @change="updatePreview" @keyup="updatePreview"
<input type="file" ref="post_file" @change="updateFilePreview" @keyup="updateFilePreview"
accept="image/png,image/apng,image/jpeg,image/gif,video/webm,.png,.apng,.jpg,.jpeg,.gif,.webm"
:disabled="disableFileUpload"/>
</label>
@ -25,7 +25,7 @@
You should review <a href="/wiki_pages/howto:sites_and_sources">the sourcing guide</a>.
</div>
<label>{{!disableFileUpload ? '(or) ' : '' }}URL:
<input type="text" size="50" v-model="uploadURL" @keyup="updatePreview" @paste="updatePreviewOnPaste($event)"
<input type="text" size="50" v-model="uploadURL" @keyup="updateFilePreview" @paste="updateFilePreviewOnPaste($event)"
:disabled="disableURLUpload"/>
</label>
<div id="whitelist-warning" v-show="whitelist.visible"
@ -191,12 +191,12 @@
You must provide at least <b>{{4 - tagCount}}</b> more tags. Tags in other sections count
towards this total.
</div>
<div v-show="!preview.show">
<div v-show="!tagPreview.show">
<textarea class="tag-textarea" id="post_tags" v-model="tagEntries.other" rows="5"
ref="otherTags" data-autocomplete="tag-edit"></textarea>
</div>
<div v-show="preview.show">
<tag-preview :tags="preview.tags" :loading="preview.loading"
<div v-show="tagPreview.show">
<tag-preview :tags="tagPreview.tags" :loading="tagPreview.loading"
@close="previewFinalTags"></tag-preview>
</div>
@ -329,20 +329,20 @@
{name: 'Human'},
{name: 'Taur'}];
function updatePreviewDims(e) {
function updateFilePreviewDims(e) {
const target = e.target;
if (thumbURLs.filter(function (x) {
return target.src.indexOf(x) !== -1;
}).length !== 0)
return;
this.previewHeight = target.naturalHeight || target.videoHeight;
this.previewWidth = target.naturalWidth || target.videoHeight;
this.overDims = (this.previewHeight > 15000 || this.previewWidth > 15000);
this.filePreview.height = target.naturalHeight || target.videoHeight;
this.filePreview.width = target.naturalWidth || target.videoHeight;
this.filePreview.overDims = (this.filePreview.height > 15000 || this.filePreview.width > 15000);
}
function previewError() {
this.previewWidth = this.previewHeight = 0;
this.overDims = false;
function filePreviewError() {
this.filePreview.width = this.filePreview.height = 0;
this.filePreview.overDims = false;
if (this.uploadURL === '' && !this.$refs['post_file']) {
this.setPreviewImage(thumbs.none);
} else {
@ -354,9 +354,9 @@
const self = this;
const reader = new FileReader();
const file = this.$refs['post_file'].files[0];
this.previewHeight = 0;
this.previewWidth = 0;
this.resetPreview();
this.filePreview.height = 0;
this.filePreview.width = 0;
this.resetFilePreview();
reader.onload = function (e) {
let src = e.target.result;
@ -377,9 +377,9 @@
if (this.uploadURL.length === 0 || (this.$refs['post_file'] && this.$refs['post_file'].files.length > 0)) {
this.disableFileUpload = false;
this.oldDomain = '';
this.previewWidth = 0;
this.previewHeight = 0;
this.resetPreview();
this.filePreview.width = 0;
this.filePreview.height = 0;
this.resetFilePreview();
self.clearWhitelistWarning();
return;
}
@ -409,7 +409,7 @@
this.setPreviewImage(thumbs.none);
}
function updatePreview() {
function updateFilePreview() {
if (this.$refs['post_file'] && this.$refs['post_file'].files[0])
updatePreviewFile.call(this);
else
@ -417,19 +417,19 @@
}
function setPreviewImage(url) {
this.previewIsVideo = false;
this.previewURL = url;
this.filePreview.isVideo = false;
this.filePreview.url = url;
}
function setPreviewVideo(url) {
this.previewIsVideo = true;
this.previewURL = url;
this.filePreview.isVideo = true;
this.filePreview.url = url;
}
function resetPreview() {
this.previewIsVideo = false;
this.previewURL = thumbs.none;
this.overDims = false;
function resetFilePreview() {
this.filePreview.isVideo = false;
this.filePreview.url = thumbs.none;
this.filePreview.overDims = false;
}
function directURLCheck(url) {
@ -455,8 +455,8 @@
return;
this.$refs['post_file'].value = null;
this.disableURLUpload = this.disableFileUpload = false;
this.resetPreview();
this.updatePreview();
this.resetFilePreview();
this.updateFilePreview();
}
function tagSorter(a, b) {
@ -509,13 +509,15 @@
disableFileUpload: false,
disableURLUpload: false,
previewHeight: 0,
previewWidth: 0,
overDims: false,
uploadURL: '',
previewURL: thumbs.none,
previewIsVideo: false,
filePreview: {
heigth: 0,
width: 0,
overDims: false,
url: thumbs.none,
isVideo: false,
},
uploadURL: '',
oldDomain: '',
noSource: false,
@ -539,7 +541,7 @@
other: '',
},
preview: {
tagPreview: {
loading: false,
show: false,
tags: []
@ -587,7 +589,7 @@
};
fillField('uploadURL', 'upload_url');
if(params.has('upload_url'))
this.updatePreview();
this.updateFilePreview();
fillField('parentID', 'parent');
fillField('description', 'description');
fillTags();
@ -600,17 +602,17 @@
fillField('lockedTags', 'locked_tags');
},
methods: {
updatePreview,
updatePreviewOnPaste(evt) {
updateFilePreview,
updateFilePreviewOnPaste(evt) {
this.uploadURL = (event.clipboardData || window.clipboardData).getData('text');
this.updatePreview();
this.updateFilePreview();
evt.preventDefault();
},
updatePreviewDims,
updateFilePreviewDims,
setPreviewImage,
setPreviewVideo,
resetPreview,
previewError,
resetFilePreview,
filePreviewError,
clearFile: clearFileUpload,
whitelistWarning(allowed, domain, reason) {
this.whitelist.allowed = allowed;
@ -717,7 +719,7 @@
});
},
pushTag(tag, add) {
this.preview.show = false;
this.tagPreview.show = false;
const isCheck = typeof this.checkboxes.all[tag] !== "undefined";
// In advanced mode we need to push these into the tags area because there are no checkboxes or other
// tag fields so we can't see them otherwise.
@ -738,15 +740,15 @@
this.tagEntries.other = tags.join(' ') + ' ';
},
previewFinalTags() {
if (this.preview.loading)
if (this.tagPreview.loading)
return;
if (this.preview.show) {
this.preview.show = false;
if (this.tagPreview.show) {
this.tagPreview.show = false;
return;
}
this.preview.loading = true;
this.preview.show = true;
this.preview.tags = [];
this.tagPreview.loading = true;
this.tagPreview.show = true;
this.tagPreview.tags = [];
const self = this;
const data = {tags: this.tags};
jQuery.ajax("/tags/preview.json", {
@ -754,13 +756,13 @@
type: 'POST',
data: data,
success: function (result) {
self.preview.loading = false;
self.preview.tags = result;
self.tagPreview.loading = false;
self.tagPreview.tags = result;
},
error: function (result) {
self.preview.loading = false;
self.preview.tags = [];
self.preview.show = false;
self.tagPreview.loading = false;
self.tagPreview.tags = [];
self.tagPreview.show = false;
Danbooru.error('Error loading tag preview ' + result);
}
})
@ -823,8 +825,8 @@
return this.tags.toLowerCase().split(' ');
},
previewDimensions() {
if (this.previewWidth && this.previewHeight)
return this.previewWidth + '×' + this.previewHeight;
if (this.filePreview.width && this.filePreview.height)
return this.filePreview.width + '×' + this.filePreview.height;
return '';
},
directURLProblem: function () {

12
app/javascript/src/javascripts/uploader_file_preview.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="upload_preview_container" :class="classes">
<div class="upload_preview_dims">{{ $parent.previewDimensions }}</div>
<img class="upload_preview_img" :src="$parent.previewURL" style="max-width: 100%;"
<img class="upload_preview_img" :src="$parent.filePreview.url" style="max-width: 100%;"
referrerpolicy="no-referrer"
v-if="!$parent.previewIsVideo"
v-on="addListeners ? { load: $parent.updatePreviewDims, error: $parent.previewError } : {}"/>
<video class="upload_preview_img" controls :src="$parent.previewURL" style="max-width: 100%;"
v-on="addListeners ? { loadeddata: $parent.updatePreviewDims, error: $parent.previewError } : {}"
v-if="$parent.previewIsVideo"></video>
v-if="!$parent.filePreview.isVideo"
v-on="addListeners ? { load: $parent.updateFilePreviewDims, error: $parent.filePreviewError } : {}"/>
<video class="upload_preview_img" controls :src="$parent.filePreview.url" style="max-width: 100%;"
v-on="addListeners ? { loadeddata: $parent.updateFilePreviewDims, error: $parent.filePreviewError } : {}"
v-if="$parent.filePreview.isVideo"></video>
</div>
</template>