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

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

@ -2,17 +2,80 @@
//postのimg.jsとは異なります。 //postのimg.jsとは異なります。
function imgv(id, key, acct_id) { function imgv(id, key, acct_id) {
$('#imgprog').text(0) $('#imgprog').text(0)
$('#imgsec').text(0)
$('#imgmodal').hide() $('#imgmodal').hide()
$('#imgmodal').attr('src', '../../img/loading.svg') $('#imgmodal').attr('src', '../../img/loading.svg')
var murl = $('#' + id + '-image-' + key).attr('data-url') var murl = $('#' + id + '-image-' + key).attr('data-url')
var ourl = $('#' + id + '-image-' + key).attr('data-original')
var type = $('#' + id + '-image-' + key).attr('data-type') var type = $('#' + id + '-image-' + key).attr('data-type')
$('#imagemodal').attr('data-id', id) $('#imagemodal').attr('data-id', id)
$('#imagemodal').attr('data-acct', acct_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() { $(document).ready(function() {
if (type == 'image') { if (type == 'image') {
$('#imagemodal').modal('open') $('#imagemodal').modal('open')
imageXhr(id, key, murl)
$('#imagewrap').dragScroll() // ドラッグスクロール設定
$('#imgmodal').show()
$('#imagemodal').attr('data-key', key)
$('#imagemodal').attr('data-id', id)
} else if (type == 'video' || type == 'gifv') {
$('#video').attr('src', murl)
$('#videomodal').modal('open')
$('#imgmodal').show()
}
})
}
//イメージビューワーの送り
function imgCont(type) {
$('#imgprog').text(0)
$('#imgsec').text(0)
var key = $('#imagemodal').attr('data-key')
var id = $('#imagemodal').attr('data-id')
if (type == 'next') {
key++
} else if (type == 'prev') {
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') {
imageXhr(id, key, murl)
$('#imagewrap').dragScroll() // ドラッグスクロール設定
$('#imagemodal').attr('data-key', key)
$('#imagemodal').attr('data-id', id)
} else if (type == 'video' || type == 'gifv') {
$('#video').attr('src', murl)
$('#videomodal').modal('open')
}
})
}
}
function imageXhr(id, key, murl) {
var startTime = new Date();
xhr = new XMLHttpRequest() xhr = new XMLHttpRequest()
xhr.open('GET', murl, true) xhr.open('GET', murl, true)
xhr.responseType = 'arraybuffer'
xhr.addEventListener( xhr.addEventListener(
'progress', 'progress',
function(event) { function(event) {
@ -35,17 +98,12 @@ function imgv(id, key, acct_id) {
}, },
false false
) )
xhr.send() xhr.onreadystatechange = function() {
$('#imgmodal').attr('src', murl) if (this.readyState == 4 && this.status == 200) {
$('#imagewrap').dragScroll() // ドラッグスクロール設定 r = new FileReader()
$('#imgmodal').show() r.readAsDataURL(this.response)
$('#imagemodal').attr('data-key', key) r.onload = function() {
$('#imagemodal').attr('data-id', id) var b64 = r.result
} else if (type == 'video' || type == 'gifv') {
$('#video').attr('src', murl)
$('#videomodal').modal('open')
$('#imgmodal').show()
}
var element = new Image() var element = new Image()
var width var width
element.onload = function() { element.onload = function() {
@ -89,105 +147,16 @@ function imgv(id, key, acct_id) {
} else { } else {
$('#image-prev').prop('disabled', false) $('#image-prev').prop('disabled', false)
} }
element.src = murl element.src = b64
}) var endTime = new Date();
var proctime = endTime.getTime() - startTime.getTime()
$('#imgsec').text(proctime)
$('#imgmodal').attr('src', b64)
} }
//イメージビューワーの送り
function imgCont(type) {
$('#imgprog').text(0)
var key = $('#imagemodal').attr('data-key')
var id = $('#imagemodal').attr('data-id')
if (type == 'next') {
key++
} else if (type == 'prev') {
key = key * 1 - 1
} }
var murl = $('#' + id + '-image-' + key).attr('data-url')
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))
} }
}, xhr.responseType = 'blob'
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() xhr.send()
$('#imgmodal').attr('src', murl)
$('#imagewrap').dragScroll() // ドラッグスクロール設定
$('#imagemodal').attr('data-key', key)
$('#imagemodal').attr('data-id', id)
} else if (type == 'video' || type == 'gifv') {
$('#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
})
}
} }
//ズームボタン(z:倍率) //ズームボタン(z:倍率)
function zoom(z) { function zoom(z) {
@ -287,13 +256,18 @@ function detFromImg() {
} }
//画像保存 //画像保存
function dlImg() { 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')) { if (localStorage.getItem('savefolder')) {
var save = localStorage.getItem('savefolder') var save = localStorage.getItem('savefolder')
} else { } else {
var save = '' var save = ''
} }
postMessage(['generalDL', [url, save, false]], '*') postMessage(['generalDL', [murl, save, false]], '*')
} }
function openFinder(dir) { function openFinder(dir) {
postMessage(['openFinder', dir], '*') postMessage(['openFinder', dir], '*')
@ -301,3 +275,8 @@ function openFinder(dir) {
function stopVideo() { function stopVideo() {
document.getElementById('video').pause() 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>
<div class="modal-footer"> <div class="modal-footer">
DL:<span id="imgprog"></span>% DL:<span id="imgprog"></span>%
(<span id="imgsec"></span>ms)
<a class="waves-effect white-text" onclick="zoom(2)"> <a class="waves-effect white-text" onclick="zoom(2)">
<i class="material-icons">zoom_in</i> <i class="material-icons">zoom_in</i>
</a> </a>
<a class="waves-effect white-text" onclick="zoom(0.5)"> <a class="waves-effect white-text" onclick="zoom(0.5)">
<i class="material-icons">zoom_out</i> <i class="material-icons">zoom_out</i>
</a> </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()"> <button class="btn waves-effect purple" onclick="dlImg()">
<i class="material-icons">file_download</i> <i class="material-icons">file_download</i>
</button> </button>

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

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