#162 image viewer
This commit is contained in:
cutls
parent
b8fcd11a62
commit
e6ce764084
|
|
@ -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}">
|
||||
|
|
|
|||
195
app/js/ui/img.js
195
app/js/ui/img.js
|
|
@ -2,17 +2,80 @@
|
|||
//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')
|
||||
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.open('GET', murl, true)
|
||||
xhr.responseType = 'arraybuffer'
|
||||
xhr.addEventListener(
|
||||
'progress',
|
||||
function(event) {
|
||||
|
|
@ -35,17 +98,12 @@ function imgv(id, key, acct_id) {
|
|||
},
|
||||
false
|
||||
)
|
||||
xhr.send()
|
||||
$('#imgmodal').attr('src', 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()
|
||||
}
|
||||
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() {
|
||||
|
|
@ -89,105 +147,16 @@ function imgv(id, key, acct_id) {
|
|||
} else {
|
||||
$('#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))
|
||||
}
|
||||
},
|
||||
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.responseType = 'blob'
|
||||
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:倍率)
|
||||
function zoom(z) {
|
||||
|
|
@ -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 })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": "このカラムを削除",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user