304 lines
8.6 KiB
JavaScript
304 lines
8.6 KiB
JavaScript
/*イメージビューワー*/
|
|
//postのimg.jsとは異なります。
|
|
function imgv(id, key, acct_id) {
|
|
$('#imgprog').text(0)
|
|
$('#imgmodal').hide()
|
|
$('#imgmodal').attr('src', '../../img/loading.svg')
|
|
var murl = $('#' + id + '-image-' + key).attr('data-url')
|
|
var type = $('#' + id + '-image-' + key).attr('data-type')
|
|
$('#imagemodal').attr('data-id', id)
|
|
$('#imagemodal').attr('data-acct', acct_id)
|
|
$(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)
|
|
$('#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()
|
|
}
|
|
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)
|
|
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.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) {
|
|
var wdth = $('#imagewrap img').width()
|
|
var wdth = wdth * z
|
|
$('#imagewrap img').css('width', wdth + 'px')
|
|
var hgt = $('#imagewrap img').height()
|
|
var hgt = hgt * z
|
|
$('#imagewrap img').css('height', hgt + 'px')
|
|
}
|
|
//スマホ対応ドラッグ移動システム
|
|
;(function() {
|
|
$.fn.dragScroll = function() {
|
|
var target = this
|
|
$(this)
|
|
.mousedown(function(event) {
|
|
$(this)
|
|
.data('down', true)
|
|
.data('x', event.clientX)
|
|
.data('y', event.clientY)
|
|
.data('scrollLeft', this.scrollLeft)
|
|
.data('scrollTop', this.scrollTop)
|
|
return false
|
|
})
|
|
.css({
|
|
overflow: 'hidden', // スクロールバー非表示
|
|
cursor: 'move'
|
|
})
|
|
// ウィンドウから外れてもイベント実行
|
|
$(document)
|
|
.mousemove(function(event) {
|
|
if ($(target).data('down') == true) {
|
|
// スクロール
|
|
target.scrollLeft($(target).data('scrollLeft') + $(target).data('x') - event.clientX)
|
|
target.scrollTop($(target).data('scrollTop') + $(target).data('y') - event.clientY)
|
|
return false // 文字列選択を抑止
|
|
}
|
|
})
|
|
.mouseup(function(event) {
|
|
$(target).data('down', false)
|
|
})
|
|
$(this)
|
|
.on('touchstart', function(event) {
|
|
$(this)
|
|
.data('down', true)
|
|
.data('x', getX(event))
|
|
.data('y', getY(event))
|
|
.data('scrollLeft', this.scrollLeft)
|
|
.data('scrollTop', this.scrollTop)
|
|
return false
|
|
})
|
|
.css({
|
|
overflow: 'hidden', // スクロールバー非表示
|
|
cursor: 'move'
|
|
}) //指が触れたか検知
|
|
$(this).on('touchmove', function(event) {
|
|
if ($(target).data('down') === true) {
|
|
// スクロール
|
|
target.scrollLeft($(target).data('scrollLeft') + $(target).data('x') - getX(event))
|
|
target.scrollTop($(target).data('scrollTop') + $(target).data('y') - getY(event))
|
|
return false // 文字列選択を抑止
|
|
} else {
|
|
}
|
|
}) //指が動いたか検知
|
|
$(this).on('touchend', function(event) {
|
|
$(target).data('down', false)
|
|
})
|
|
|
|
return this
|
|
}
|
|
})(jQuery)
|
|
|
|
function getX(event) {
|
|
return event.originalEvent.touches[0].pageX
|
|
}
|
|
|
|
function getY(event) {
|
|
return event.originalEvent.touches[0].pageY
|
|
}
|
|
//マウスホイールで拡大
|
|
var element = document.getElementById('imagemodal')
|
|
element.onmousewheel = function(e) {
|
|
var delta = e.wheelDelta
|
|
if (delta > 0) {
|
|
zoom(1.1)
|
|
} else {
|
|
zoom(0.9)
|
|
}
|
|
}
|
|
|
|
//当該トゥート
|
|
function detFromImg() {
|
|
var id = $('#imagemodal').attr('data-id')
|
|
var acct_id = $('#imagemodal').attr('data-acct')
|
|
$('#imagemodal').modal('close')
|
|
details(id, acct_id)
|
|
}
|
|
//画像保存
|
|
function dlImg() {
|
|
var url = $('#imgmodal').attr('src')
|
|
if (localStorage.getItem('savefolder')) {
|
|
var save = localStorage.getItem('savefolder')
|
|
} else {
|
|
var save = ''
|
|
}
|
|
postMessage(['generalDL', [url, save, false]], '*')
|
|
}
|
|
function openFinder(dir) {
|
|
postMessage(['openFinder', dir], '*')
|
|
}
|
|
function stopVideo() {
|
|
document.getElementById('video').pause()
|
|
}
|