diff --git a/app/js/tl/parse.js b/app/js/tl/parse.js index 5388c71c..ebfdf0cf 100644 --- a/app/js/tl/parse.js +++ b/app/js/tl/parse.js @@ -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 + ` diff --git a/app/js/ui/img.js b/app/js/ui/img.js index b84a73e6..07f7932d 100644 --- a/app/js/ui/img.js +++ b/app/js/ui/img.js @@ -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 }) +} diff --git a/app/view/make/index.sample.html b/app/view/make/index.sample.html index e9e843aa..d10c285e 100644 --- a/app/view/make/index.sample.html +++ b/app/view/make/index.sample.html @@ -694,12 +694,16 @@