Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

#162 image viewer

Browse Source
This commit is contained in:
cutls
2019-11-08 23:46:12 +09:00
parent b8fcd11a62
commit e6ce764084
5 changed files with 130 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/js/tl/parse.js
View File

@@ -569,6 +569,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
var purl = media.preview_url
media_ids = media_ids + media.id + ','
var url = media.url
var remote_url = media.remote_url
var nsfwmes = ''
if (toot.sensitive && nsfw) {
var sense = 'sensitive'
@@ -615,7 +616,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
viewer =
viewer +
`<a onclick="imgv('${id}','${key2}','${acct_id}')"
id="${id}-image-${key2}" data-url="${url}" data-type="${media.type}"
id="${id}-image-${key2}" data-url="${url}" data-original="${remote_url}" data-type="${media.type}"
class="img-parsed img-link" style="width:calc(${cwdt}% - 1px); height:${imh};">
<img draggable="false" src="${purl}" class="${sense} toot-img pointer"
onerror="this.src=\'../../img/loading.svg\'" title="${desc}">

265
app/js/ui/img.js
View File

@@ -2,41 +2,25 @@
//postのimg.jsとは異なります。
function imgv(id, key, acct_id) {
$('#imgprog').text(0)
$('#imgsec').text(0)
$('#imgmodal').hide()
$('#imgmodal').attr('src', '../../img/loading.svg')
var murl = $('#' + id + '-image-' + key).attr('data-url')
var ourl = $('#' + id + '-image-' + key).attr('data-original')
var type = $('#' + id + '-image-' + key).attr('data-type')
$('#imagemodal').attr('data-id', id)
$('#imagemodal').attr('data-acct', acct_id)
$('#imagemodal').attr('data-original', ourl)
$('#imagemodal').attr('data-image', murl)
//表示はリモートを使うか(どちらにしろコピーはオリジナル)
var remote_img = localStorage.getItem('remote_img')
if (remote_img == 'yes') {
murl = ourl
}
$(document).ready(function() {
if (type == 'image') {
$('#imagemodal').modal('open')
xhr = new XMLHttpRequest()
xhr.open('GET', murl, true)
xhr.addEventListener(
'progress',
function(event) {
if (event.lengthComputable) {
var total = event.total
var now = event.loaded
var per = (now / total) * 100
$('#imgprog').text(Math.floor(per))
}
},
false
)
xhr.addEventListener(
'loadend',
function(event) {
var total = event.total
var now = event.loaded
var per = (now / total) * 100
$('#imgprog').text(Math.floor(per))
},
false
)
xhr.send()
$('#imgmodal').attr('src', murl)
imageXhr(id, key, murl)
$('#imagewrap').dragScroll() // ドラッグスクロール設定
$('#imgmodal').show()
$('#imagemodal').attr('data-key', key)
@@ -46,55 +30,12 @@ function imgv(id, key, acct_id) {
$('#videomodal').modal('open')
$('#imgmodal').show()
}
var element = new Image()
var width
element.onload = function() {
var width = element.naturalWidth
var height = element.naturalHeight
var windowH = $(window).height()
var windowW = $(window).width()
$('#imagemodal').css('bottom', '0')
$('#imagemodal img').css('width', 'auto')
if (height < windowH) {
$('#imagemodal').css('height', height + 60 + 'px')
$('#imagemodal img').css('height', '100%')
if (width > windowW * 0.8) {
$('#imagemodal').css('width', '80vw')
$('#imagemodal img').css('width', '100%')
var heightS = ((windowW * 0.8) / width) * height
$('#imagemodal').css('height', heightS + 60 + 'px')
} else {
$('#imagemodal').css('width', width + 'px')
}
} else {
$('#imagemodal img').css('width', 'auto')
var widthS = (windowH / height) * width
if (widthS < windowW) {
$('#imagemodal').css('width', widthS + 'px')
} else {
$('#imagemodal').css('width', '100vw')
}
$('#imagemodal').css('height', '100vh')
$('#imagemodal img').css('height', 'calc(100vh - 60px)')
}
}
if ($('#' + id + '-image-' + (key * 1 + 1)).length == 0) {
$('#image-next').prop('disabled', true)
} else {
$('#image-next').prop('disabled', false)
}
if ($('#' + id + '-image-' + (key * 1 - 1)).length == 0) {
$('#image-prev').prop('disabled', true)
} else {
$('#image-prev').prop('disabled', false)
}
element.src = murl
})
}
//イメージビューワーの送り
function imgCont(type) {
$('#imgprog').text(0)
$('#imgsec').text(0)
var key = $('#imagemodal').attr('data-key')
var id = $('#imagemodal').attr('data-id')
if (type == 'next') {
@@ -103,38 +44,23 @@ function imgCont(type) {
key = key * 1 - 1
}
var murl = $('#' + id + '-image-' + key).attr('data-url')
var ourl = $('#' + id + '-image-' + key).attr('data-original')
var type = $('#' + id + '-image-' + key).attr('data-type')
$('#imagemodal').attr('data-id', id)
$('#imagemodal').attr('data-acct', acct_id)
$('#imagemodal').attr('data-original', ourl)
$('#imagemodal').attr('data-image', murl)
//表示はリモートを使うか(どちらにしろコピーはオリジナル)
var remote_img = localStorage.getItem('remote_img')
if (remote_img == 'yes') {
murl = ourl
}
if (murl) {
$('#imgmodal').attr('src', '../../img/loading.svg')
var type = $('#' + id + '-image-' + key).attr('data-type')
$(document).ready(function() {
if (type == 'image') {
xhr = new XMLHttpRequest()
xhr.open('GET', murl, true)
xhr.responseType = 'arraybuffer'
xhr.addEventListener(
'progress',
function(event) {
if (event.lengthComputable) {
var total = event.total
var now = event.loaded
var per = (now / total) * 100
$('#imgprog').text(Math.floor(per))
}
},
false
)
xhr.addEventListener(
'loadend',
function(event) {
var total = event.total
var now = event.loaded
var per = (now / total) * 100
$('#imgprog').text(Math.floor(per))
},
false
)
xhr.send()
$('#imgmodal').attr('src', murl)
imageXhr(id, key, murl)
$('#imagewrap').dragScroll() // ドラッグスクロール設定
$('#imagemodal').attr('data-key', key)
$('#imagemodal').attr('data-id', id)
@@ -142,53 +68,96 @@ function imgCont(type) {
$('#video').attr('src', murl)
$('#videomodal').modal('open')
}
var element = new Image()
var width
element.onload = function() {
var width = element.naturalWidth
var height = element.naturalHeight
var windowH = $(window).height()
var windowW = $(window).width()
$('#imagemodal').css('bottom', '0')
$('#imagemodal img').css('width', 'auto')
if (height < windowH) {
$('#imagemodal').css('height', height + 60 + 'px')
$('#imagemodal img').css('height', '100%')
if (width > windowW * 0.8) {
$('#imagemodal').css('width', '80vw')
$('#imagemodal img').css('width', '100%')
var heightS = ((windowW * 0.8) / width) * height
$('#imagemodal').css('height', heightS + 60 + 'px')
} else {
$('#imagemodal').css('width', width + 'px')
}
} else {
$('#imagemodal img').css('width', 'auto')
var widthS = (windowH / height) * width
if (widthS < windowW) {
$('#imagemodal').css('width', widthS + 'px')
} else {
$('#imagemodal').css('width', '100vw')
}
$('#imagemodal').css('height', '100vh')
$('#imagemodal img').css('height', 'calc(100vh - 60px)')
}
}
if ($('#' + id + '-image-' + (key * 1 + 1)).length === 0) {
$('#image-next').prop('disabled', true)
} else {
$('#image-next').prop('disabled', false)
}
if ($('#' + id + '-image-' + (key * 1 - 1)).length === 0) {
$('#image-prev').prop('disabled', true)
} else {
$('#image-prev').prop('disabled', false)
}
element.src = murl
})
}
}
function imageXhr(id, key, murl) {
var startTime = new Date();
xhr = new XMLHttpRequest()
xhr.open('GET', murl, true)
xhr.responseType = 'arraybuffer'
xhr.addEventListener(
'progress',
function(event) {
if (event.lengthComputable) {
var total = event.total
var now = event.loaded
var per = (now / total) * 100
$('#imgprog').text(Math.floor(per))
}
},
false
)
xhr.addEventListener(
'loadend',
function(event) {
var total = event.total
var now = event.loaded
var per = (now / total) * 100
$('#imgprog').text(Math.floor(per))
},
false
)
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
r = new FileReader()
r.readAsDataURL(this.response)
r.onload = function() {
var b64 = r.result
var element = new Image()
var width
element.onload = function() {
var width = element.naturalWidth
var height = element.naturalHeight
var windowH = $(window).height()
var windowW = $(window).width()
$('#imagemodal').css('bottom', '0')
$('#imagemodal img').css('width', 'auto')
if (height < windowH) {
$('#imagemodal').css('height', height + 60 + 'px')
$('#imagemodal img').css('height', '100%')
if (width > windowW * 0.8) {
$('#imagemodal').css('width', '80vw')
$('#imagemodal img').css('width', '100%')
var heightS = ((windowW * 0.8) / width) * height
$('#imagemodal').css('height', heightS + 60 + 'px')
} else {
$('#imagemodal').css('width', width + 'px')
}
} else {
$('#imagemodal img').css('width', 'auto')
var widthS = (windowH / height) * width
if (widthS < windowW) {
$('#imagemodal').css('width', widthS + 'px')
} else {
$('#imagemodal').css('width', '100vw')
}
$('#imagemodal').css('height', '100vh')
$('#imagemodal img').css('height', 'calc(100vh - 60px)')
}
}
if ($('#' + id + '-image-' + (key * 1 + 1)).length == 0) {
$('#image-next').prop('disabled', true)
} else {
$('#image-next').prop('disabled', false)
}
if ($('#' + id + '-image-' + (key * 1 - 1)).length == 0) {
$('#image-prev').prop('disabled', true)
} else {
$('#image-prev').prop('disabled', false)
}
element.src = b64
var endTime = new Date();
var proctime = endTime.getTime() - startTime.getTime()
$('#imgsec').text(proctime)
$('#imgmodal').attr('src', b64)
}
}
}
xhr.responseType = 'blob'
xhr.send()
}
//ズームボタン(z:倍率)
function zoom(z) {
var wdth = $('#imagewrap img').width()
@@ -287,13 +256,18 @@ function detFromImg() {
}
//画像保存
function dlImg() {
var url = $('#imgmodal').attr('src')
var ourl = $('#imagemodal').attr('data-original')
var murl = $('#imagemodal').attr('data-image')
var remote_img = localStorage.getItem('remote_img')
if (remote_img == 'yes') {
murl = ourl
}
if (localStorage.getItem('savefolder')) {
var save = localStorage.getItem('savefolder')
} else {
var save = ''
}
postMessage(['generalDL', [url, save, false]], '*')
postMessage(['generalDL', [murl, save, false]], '*')
}
function openFinder(dir) {
postMessage(['openFinder', dir], '*')
@@ -301,3 +275,8 @@ function openFinder(dir) {
function stopVideo() {
document.getElementById('video').pause()
}
function copyImgUrl() {
var murl = $('#imagemodal').attr('data-original')
execCopy(murl)
M.toast({ html: lang.lang_img_copyDone, displayLength: 1500 })
}

4
app/view/make/index.sample.html
View File

@@ -694,12 +694,16 @@
</div>
<div class="modal-footer">
DL:<span id="imgprog"></span>%
(<span id="imgsec"></span>ms)
<a class="waves-effect white-text" onclick="zoom(2)">
<i class="material-icons">zoom_in</i>
</a>
<a class="waves-effect white-text" onclick="zoom(0.5)">
<i class="material-icons">zoom_out</i>
</a>
<button class="btn waves-effect blue" onclick="copyImgUrl()">
<i class="material-icons left">link</i>@@copy@@
</button>
<button class="btn waves-effect purple" onclick="dlImg()">
<i class="material-icons">file_download</i>
</button>

1
app/view/make/language/en/main.json
View File

@@ -114,6 +114,7 @@
"lang_tl_postmarkers_title": "Process...",
"lang_tl_postmarkers": "POST markers data. Please wait",
"lang_img_DLDone": "Downloaded:",
"lang_img_copyDone": "Copied: URL of this image",
"lang_layout_gotop": "Go top of this column. When icon is red, this column cannot connect straming API. Please reload.",
"lang_layout_thisacct": "{{notf}} of this account",
"lang_layout_delthis": "Remove this column",

1
app/view/make/language/ja/main.json
View File

@@ -114,6 +114,7 @@
"lang_tl_postmarkers_title": "処理中",
"lang_tl_postmarkers": "未読マーカーを送信しています。3秒以内に閉じられます。",
"lang_img_DLDone": "ダウンロード先:",
"lang_img_copyDone": "画像のURLをコピーしました。",
"lang_layout_gotop": "一番上へ。アイコンが赤のときはストリーミングに接続できていません。F5等で再読込をお試し下さい。",
"lang_layout_thisacct": "このアカウントの{{notf}}",
"lang_layout_delthis": "このカラムを削除",