thedesk/app/js/post/img.js
2020-04-07 17:41:57 +09:00

414 lines
11 KiB
JavaScript

//ドラッグ・アンド・ドロップからアップロードまで。uiのimg.jsとは異なります。
var obj = $('body')
var system
//ドラッグスタート
obj.on('dragstart', function(e) {
system = 'locked'
})
//何もなくファイルが通過
obj.on('dragend', function(e) {
system = ''
})
//ドラッグファイルが画面上に
obj.on('dragenter', function(e) {
if (system != 'locked') {
$('#drag').css('display', 'flex')
}
})
$('body').on('dragover', function(e) {
e.stopPropagation()
e.preventDefault()
})
//ドロップした
$('body').on('drop', function(e) {
if (system != 'locked') {
$('#drag').css('display', 'none')
e.preventDefault()
var files = e.originalEvent.dataTransfer.files
pimg(files)
}
})
//何もなくファイルが通過
$('#drag').on('dragleave', function(e) {
$('#drag').css('display', 'none')
})
//複数アップ
function pimg(files) {
console.table(files)
for (i = 0; i < files.length; i++) {
var dot = files[i].path.match(/\.(.+)$/)[1]
if (dot == 'bmp' || dot == 'BMP') {
postMessage(['bmpImage', [files[i].path, i]], '*')
todo(lang.lang_progress)
} else {
handleFileUpload(files[i], obj, i)
}
}
}
//ドラッグ・アンド・ドロップを終了
function closedrop() {
$('#drag').css('display', 'none')
}
//ファイル選択
function fileselect() {
postMessage(['sendSinmpleIpc', 'file-select'], '*')
}
//ファイル読み込み
function handleFileUpload(files, obj, no) {
var fr = new FileReader()
fr.onload = function(evt) {
var b64 = evt.target.result
var resize = localStorage.getItem('uploadCrop') * 1
if (resize > 0) {
var element = new Image()
var width
element.onload = function() {
var width = element.naturalWidth
var height = element.naturalHeight
if (width > resize || height > resize) {
postMessage(['resizeImage', [b64, resize]], '*')
return false
} else {
$('#b64-box').val(b64)
var ret = media(b64, files['type'], no)
}
}
element.src = b64
return false
}
$('#b64-box').val(b64)
var ret = media(b64, files['type'], no)
}
fr.readAsDataURL(files)
$('#mec').append(files['name'] + '/')
}
//ファイルアップロード
async function media(b64, type, no, stamped) {
var acct_id = $('#post-acct-sel').val()
var domain = localStorage.getItem('domain_' + acct_id)
var user = localStorage.getItem('user_' + acct_id)
if ($('#stamp').hasClass('stamp-avail') && !stamped) {
postMessage(['stampImage', [b64, user + '@' + domain]], '*')
return false
}
var l = 4
var c = 'abcdefghijklmnopqrstuvwxyz0123456789'
var cl = c.length
var r = ''
for (var i = 0; i < l; i++) {
r += c[Math.floor(Math.random() * cl)]
}
if ($('#media').val()) {
$('#media').val($('#media').val() + ',' + 'tmp_' + r)
} else {
$('#media').val('tmp_' + r)
}
$('.toot-btn-group').prop('disabled', true)
$('#post-acct-sel').prop('disabled', true)
localStorage.setItem('image', 'busy')
todo('Image Upload...')
var media = toBlob(b64, type)
var fd = new FormData()
fd.append('file', media)
var at = localStorage.getItem('acct_' + acct_id + '_at')
var httpreq = new XMLHttpRequest()
if (localStorage.getItem('mode_' + domain) == 'misskey') {
var start = 'https://' + domain + '/api/drive/files/create'
httpreq.open('POST', start, true)
httpreq.upload.addEventListener('progress', progshow, false)
httpreq.responseType = 'json'
if ($('#nsfw').hasClass('nsfw-avail')) {
var nsfw = true
} else {
var nsfw = false
}
var previewer = 'url'
fd.append('i', at)
httpreq.send(fd)
} else {
var previewer = 'preview_url'
//v2/media
try {
var id = await v2MediaUpload(domain, at, fd)
var mediav = $('#media').val()
var regExp = new RegExp('tmp_' + r, 'g')
mediav = mediav.replace(regExp, id)
$('#media').val(mediav)
var html = `<img src="../../img/picture.svg" class="preview-img pointer unknown" data-media="${id}" oncontextmenu="deleteImage('${id}')" onclick="altImage('${acct_id}','${id}')" title="${lang.lang_postimg_delete}">`
$('#preview').append(html)
todc()
if (localStorage.getItem('nsfw_' + acct_id)) {
$('#nsfw').addClass('yellow-text')
$('#nsfw').html('visibility')
$('#nsfw').addClass('nsfw-avail')
}
$('.toot-btn-group').prop('disabled', false)
$('select').formSelect()
$('#mec').text(lang.lang_there)
M.toast({ html: '<span>' + lang.lang_postimg_sync + '</span><button class="btn-flat toast-action" onclick="syncDetail()">Click</button>', displayLength: 3000 })
$('#imgup').text('')
$('#imgsel').show()
localStorage.removeItem('image')
} catch {
var start = 'https://' + domain + '/api/v1/media'
httpreq.open('POST', start, true)
httpreq.upload.addEventListener('progress', progshow, false)
httpreq.responseType = 'json'
httpreq.setRequestHeader('Authorization', 'Bearer ' + at)
httpreq.send(fd)
}
}
httpreq.onreadystatechange = function() {
if (httpreq.readyState === 4) {
var json = httpreq.response
if (this.status !== 200) {
setLog(start, this.status, json)
$('.toot-btn-group').prop('disabled', false)
$('select').formSelect()
$('#mec').text(lang.lang_there)
M.toast({ html: this.status + ':' +json, displayLength: 2000 })
$('#imgup').text('')
$('#imgsel').show()
}
if (!json.id) {
todc()
$('#imgup').text('')
$('.toot-btn-group').prop('disabled', false)
$('#post-acct-sel').prop('disabled', false)
$('select').formSelect()
$('#imgsel').show()
M.toast({ html: lang.lang_postimg_failupload, displayLength: 5000 })
return false
}
var img = localStorage.getItem('img')
if (json.type.indexOf('image') != -1) {
var html = `<img src="${json[previewer]}" class="preview-img pointer" data-media="${json['id']}" oncontextmenu="deleteImage('${json['id']}')" onclick="altImage('${acct_id}','${json['id']}')" title="${lang.lang_postimg_delete}">`
$('#preview').append(html)
} else {
$('#preview').append(lang.lang_postimg_previewdis)
}
if (!img) {
var img = 'no-act'
}
if (img != 'inline') {
var mediav = $('#media').val()
var regExp = new RegExp('tmp_' + r, 'g')
mediav = mediav.replace(regExp, json['id'])
$('#media').val(mediav)
}
if (img == 'url' && json['text_url']) {
$('#textarea').val($('#textarea').val() + ' ' + json['text_url'])
}
}
}
}
//Base64からBlobへ
function toBlob(base64, type) {
var bin = atob(base64.replace(/^.*,/, ''))
var buffer = new Uint8Array(bin.length)
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i)
}
// Blobを作成
try {
var blob = new Blob([new Uint8Array(buffer)], {
type: type
})
} catch (e) {
return false
}
return blob
}
//画像を貼り付けたら…
var element = document.querySelector('#textarea')
element.addEventListener('paste', function(e) {
if (!e.clipboardData || !e.clipboardData.items) {
return true
}
// DataTransferItemList に画像が含まれいない場合は終了する
var imageItems = [...e.clipboardData.items].filter(i => i.type.startsWith('image'))
if (imageItems.length == 0) {
console.warn('it is not image')
return true
}
// ファイルとして得る
// DataTransferItem の kind は file なので getAsString ではなく getAsFile を呼ぶ
var imageFile = imageItems[0].getAsFile()
var imageType = imageItems[0].type
// FileReaderで読み込む
var fr = new FileReader()
fr.onload = function(e) {
// onload内ではe.target.resultにbase64が入っているのであとは煮るなり焼くなり
var base64 = e.target.result
var mediav = $('#media').val()
if (mediav) {
var i = mediav.split(',').length
}
// DataTransferItem の type に mime tipes があるのでそれを使う
media(base64, imageType, i)
}
fr.readAsDataURL(imageFile)
// 画像以外がペーストされたときのために、元に戻しておく
})
function deleteImage(key) {
Swal.fire({
title: lang.lang_postimg_delete,
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: lang.lang_yesno,
cancelButtonText: lang.lang_no
}).then(result => {
if (result.value) {
var media = $('#media').val()
var arr = media.split(',')
for (var i = 0; i < media.length; i++) {
if (arr[i] == key) {
arr.splice(i, 1)
break
}
}
$('#media').val(arr.join(','))
$('#preview [data-media=' + key + ']').remove()
}
})
}
function altImage(acct_id, id) {
var domain = localStorage.getItem('domain_' + acct_id)
var at = localStorage.getItem('acct_' + acct_id + '_at')
var start = 'https://' + domain + '/api/v1/media/' + id
if($('[data-media=' + id + ']').hasClass('unknown')) {
fetch(start, {
method: 'GET',
headers: {
'content-type': 'application/json',
Authorization: 'Bearer ' + at
}
})
.then(function(response) {
if (!response.ok) {
response.text().then(function(text) {
setLog(response.url, response.status, text)
})
}
return response.json()
})
.catch(function(error) {
todo(error)
setLog(start, 'JSON', error)
console.error(error)
})
.then(function(json) {
console.log(json)
$('[data-media=' + id + ']').removeClass('unknown')
if(json.preview_url) {
$('[data-media=' + id + ']').attr('src', json.preview_url)
}
})
} else {
Swal.fire({
title: lang.lang_postimg_desc,
text: lang.lang_postimg_leadContext,
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Post',
showLoaderOnConfirm: true,
preConfirm: data => {
return fetch(start, {
method: 'PUT',
headers: {
'content-type': 'application/json',
Authorization: 'Bearer ' + at
},
body: JSON.stringify({
description: data
})
})
.then(function(response) {
if (!response.ok) {
response.text().then(function(text) {
setLog(response.url, response.status, text)
})
}
return response.json()
})
.catch(function(error) {
todo(error)
setLog(start, 'JSON', error)
console.error(error)
})
.then(function(json) {
console.log(json)
$('[data-media=' + id + ']').attr('title', data)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then(result => {
if (result.value) {
Swal.fire({
title: 'Complete'
})
}
})
}
}
function stamp() {
if ($('#stamp').hasClass('stamp-avail')) {
$('#stamp').html('Off')
$('#stamp').removeClass('stamp-avail')
} else {
$('#stamp').html('On')
$('#stamp').addClass('stamp-avail')
}
}
//v2/media対応
async function v2MediaUpload(domain, at, fd) {
var start = 'https://' + domain + '/api/v2/media'
let promise = await fetch(start, {
method: 'POST',
headers: {
Authorization:
'Bearer ' + at
},
body: fd
})
var json = await promise.json()
if(json.id) {
return json.id
} else {
return false
}
}
function alertProcessUnfinished() {
Swal.fire({
title: lang.lang_post_unfinishedMedia,
type: 'error',
showCancelButton: true,
confirmButtonText: lang.lang_post_retry,
cancelButtonText: lang.lang_no
}).then(result => {
if (result.value) {
post()
}
})
}
function syncDetail() {
Swal.fire({
title: lang.lang_post_syncDetail,
text: lang.lang_post_syncDetailText,
type: 'info'
})
}