Add: description of images

This commit is contained in:
cutls 2019-10-12 00:18:43 +09:00
parent 1917531c54
commit 48028a8e09
4 changed files with 264 additions and 354 deletions

View File

@ -2,36 +2,35 @@
var obj = $("body"); var obj = $("body");
var system; var system;
//ドラッグスタート //ドラッグスタート
obj.on('dragstart', function (e) { obj.on("dragstart", function(e) {
system = "locked" system = "locked";
}); });
//何もなくファイルが通過 //何もなくファイルが通過
obj.on('dragend', function (e) { obj.on("dragend", function(e) {
system = ""; system = "";
}); });
//ドラッグファイルが画面上に //ドラッグファイルが画面上に
obj.on('dragenter', function (e) { obj.on("dragenter", function(e) {
if (system != "locked") { if (system != "locked") {
$("#drag").css('display', 'flex'); $("#drag").css("display", "flex");
} }
}); });
$("body").on('dragover', function (e) { $("body").on("dragover", function(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
}); });
//ドロップした //ドロップした
$("body").on('drop', function (e) { $("body").on("drop", function(e) {
if (system != "locked") { if (system != "locked") {
$("#drag").css('display', 'none'); $("#drag").css("display", "none");
e.preventDefault(); e.preventDefault();
var files = e.originalEvent.dataTransfer.files; var files = e.originalEvent.dataTransfer.files;
pimg(files); pimg(files);
} }
}); });
//何もなくファイルが通過 //何もなくファイルが通過
$("#drag").on('dragleave', function (e) { $("#drag").on("dragleave", function(e) {
$("#drag").css('display', 'none'); $("#drag").css("display", "none");
}); });
//複数アップ //複数アップ
@ -40,9 +39,8 @@ function pimg(files) {
for (i = 0; i < files.length; i++) { for (i = 0; i < files.length; i++) {
var dot = files[i].path.match(/\.(.+)$/)[1]; var dot = files[i].path.match(/\.(.+)$/)[1];
if (dot == "bmp" || dot == "BMP") { if (dot == "bmp" || dot == "BMP") {
postMessage(["bmpImage", [files[i].path, i]], "*") postMessage(["bmpImage", [files[i].path, i]], "*");
todo(lang.lang_progress); todo(lang.lang_progress);
} else { } else {
handleFileUpload(files[i], obj, i); handleFileUpload(files[i], obj, i);
} }
@ -50,21 +48,21 @@ function pimg(files) {
} }
//ドラッグ・アンド・ドロップを終了 //ドラッグ・アンド・ドロップを終了
function closedrop() { function closedrop() {
$("#drag").css('display', 'none'); $("#drag").css("display", "none");
} }
//ファイル選択 //ファイル選択
function fileselect() { function fileselect() {
postMessage(["sendSinmpleIpc", "file-select"], "*") postMessage(["sendSinmpleIpc", "file-select"], "*");
} }
//ファイル読み込み //ファイル読み込み
function handleFileUpload(files, obj, no) { function handleFileUpload(files, obj, no) {
var fr = new FileReader(); var fr = new FileReader();
fr.onload = function (evt) { fr.onload = function(evt) {
var b64 = evt.target.result; var b64 = evt.target.result;
$('#b64-box').val(b64); $("#b64-box").val(b64);
var ret = media(b64, files["type"], no) var ret = media(b64, files["type"], no);
} };
fr.readAsDataURL(files); fr.readAsDataURL(files);
$("#mec").append(files["name"] + "/"); $("#mec").append(files["name"] + "/");
} }
@ -79,7 +77,7 @@ function media(b64, type, no) {
r += c[Math.floor(Math.random() * cl)]; r += c[Math.floor(Math.random() * cl)];
} }
if ($("#media").val()) { if ($("#media").val()) {
$("#media").val($("#media").val() + ',' + "tmp_" + r); $("#media").val($("#media").val() + "," + "tmp_" + r);
} else { } else {
$("#media").val("tmp_" + r); $("#media").val("tmp_" + r);
} }
@ -89,14 +87,14 @@ function media(b64, type, no) {
todo("Image Upload..."); todo("Image Upload...");
var media = toBlob(b64, type); var media = toBlob(b64, type);
var fd = new FormData(); var fd = new FormData();
fd.append('file', media); fd.append("file", media);
var acct_id = $("#post-acct-sel").val(); var acct_id = $("#post-acct-sel").val();
var domain = localStorage.getItem("domain_" + acct_id); var domain = localStorage.getItem("domain_" + acct_id);
var at = localStorage.getItem("acct_" + acct_id + "_at"); var at = localStorage.getItem("acct_" + acct_id + "_at");
var httpreq = new XMLHttpRequest(); var httpreq = new XMLHttpRequest();
if (localStorage.getItem("mode_" + domain) == "misskey") { if (localStorage.getItem("mode_" + domain) == "misskey") {
var start = "https://" + domain + "/api/drive/files/create"; var start = "https://" + domain + "/api/drive/files/create";
httpreq.open('POST', start, true); httpreq.open("POST", start, true);
httpreq.upload.addEventListener("progress", progshow, false); httpreq.upload.addEventListener("progress", progshow, false);
httpreq.responseType = "json"; httpreq.responseType = "json";
if ($("#nsfw").hasClass("nsfw-avail")) { if ($("#nsfw").hasClass("nsfw-avail")) {
@ -104,20 +102,20 @@ function media(b64, type, no) {
} else { } else {
var nsfw = false; var nsfw = false;
} }
var previewer = "url" var previewer = "url";
fd.append('i', at); fd.append("i", at);
//fd.append('isSensitive', nsfw); //fd.append('isSensitive', nsfw);
httpreq.send(fd); httpreq.send(fd);
} else { } else {
var previewer = "preview_url" var previewer = "preview_url";
var start = "https://" + domain + "/api/v1/media"; var start = "https://" + domain + "/api/v1/media";
httpreq.open('POST', start, true); httpreq.open("POST", start, true);
httpreq.upload.addEventListener("progress", progshow, false); httpreq.upload.addEventListener("progress", progshow, false);
httpreq.responseType = "json"; httpreq.responseType = "json";
httpreq.setRequestHeader('Authorization', 'Bearer ' + at); httpreq.setRequestHeader("Authorization", "Bearer " + at);
httpreq.send(fd); httpreq.send(fd);
} }
httpreq.onreadystatechange = function () { httpreq.onreadystatechange = function() {
if (httpreq.readyState === 4) { if (httpreq.readyState === 4) {
var json = httpreq.response; var json = httpreq.response;
if (!json.id) { if (!json.id) {
@ -125,17 +123,17 @@ function media(b64, type, no) {
$("#imgup").text(""); $("#imgup").text("");
$(".toot-btn-group").prop("disabled", false); $(".toot-btn-group").prop("disabled", false);
$("#post-acct-sel").prop("disabled", false); $("#post-acct-sel").prop("disabled", false);
$('select').formSelect(); $("select").formSelect();
$("#imgsel").show(); $("#imgsel").show();
M.toast({ html: lang.lang_postimg_failupload, displayLength: 5000 }) M.toast({ html: lang.lang_postimg_failupload, displayLength: 5000 });
return false return false;
} }
var img = localStorage.getItem("img"); var img = localStorage.getItem("img");
if (json.type.indexOf("image") != -1) { if (json.type.indexOf("image") != -1) {
var html = '<img src="' + json[previewer] + '" class="preview-img pointer" data-media="' + json["id"] + '" onclick="deleteImage(\'' + json["id"] + '\')" title="' + lang.lang_postimg_delete + '">'; 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); $("#preview").append(html);
} else { } else {
$('#preview').append(lang.lang_postimg_previewdis); $("#preview").append(lang.lang_postimg_previewdis);
} }
if (!img) { if (!img) {
var img = "no-act"; var img = "no-act";
@ -145,31 +143,30 @@ function media(b64, type, no) {
var regExp = new RegExp("tmp_" + r, "g"); var regExp = new RegExp("tmp_" + r, "g");
mediav = mediav.replace(regExp, json["id"]); mediav = mediav.replace(regExp, json["id"]);
$("#media").val(mediav); $("#media").val(mediav);
} }
if (img == "url") { if (img == "url") {
$("#textarea").val($("#textarea").val() + " " + json["text_url"]) $("#textarea").val($("#textarea").val() + " " + json["text_url"]);
} }
todc(); todc();
if(localStorage.getItem("nsfw_" + acct_id)){ if (localStorage.getItem("nsfw_" + acct_id)) {
$("#nsfw").addClass("yellow-text"); $("#nsfw").addClass("yellow-text");
$("#nsfw").html("visibility"); $("#nsfw").html("visibility");
$("#nsfw").addClass("nsfw-avail"); $("#nsfw").addClass("nsfw-avail");
} }
$(".toot-btn-group").prop("disabled", false); $(".toot-btn-group").prop("disabled", false);
$('select').formSelect(); $("select").formSelect();
$("#mec").text(lang.lang_there); $("#mec").text(lang.lang_there);
M.toast({ html: lang.lang_postimg_aftupload, displayLength: 1000 }) M.toast({ html: lang.lang_postimg_aftupload, displayLength: 1000 });
$("#imgup").text(""); $("#imgup").text("");
$("#imgsel").show(); $("#imgsel").show();
localStorage.removeItem("image"); localStorage.removeItem("image");
} }
} };
} }
//Base64からBlobへ //Base64からBlobへ
function toBlob(base64, type) { function toBlob(base64, type) {
var bin = atob(base64.replace(/^.*,/, '')); var bin = atob(base64.replace(/^.*,/, ""));
var buffer = new Uint8Array(bin.length); var buffer = new Uint8Array(bin.length);
for (var i = 0; i < bin.length; i++) { for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i); buffer[i] = bin.charCodeAt(i);
@ -187,14 +184,14 @@ function toBlob(base64, type) {
} }
//画像を貼り付けたら… //画像を貼り付けたら…
var element = document.querySelector("#textarea"); var element = document.querySelector("#textarea");
element.addEventListener("paste", function (e) { element.addEventListener("paste", function(e) {
if (!e.clipboardData || !e.clipboardData.items) { if (!e.clipboardData || !e.clipboardData.items) {
return true; return true;
} }
// DataTransferItemList に画像が含まれいない場合は終了する // DataTransferItemList に画像が含まれいない場合は終了する
var imageItems = [...e.clipboardData.items].filter(i => i.type.startsWith('image')); var imageItems = [...e.clipboardData.items].filter(i => i.type.startsWith("image"));
if (imageItems.length == 0) { if (imageItems.length == 0) {
console.warn("it is not image") console.warn("it is not image");
return true; return true;
} }
@ -205,7 +202,7 @@ element.addEventListener("paste", function (e) {
// FileReaderで読み込む // FileReaderで読み込む
var fr = new FileReader(); var fr = new FileReader();
fr.onload = function (e) { fr.onload = function(e) {
// onload内ではe.target.resultにbase64が入っているのであとは煮るなり焼くなり // onload内ではe.target.resultにbase64が入っているのであとは煮るなり焼くなり
var base64 = e.target.result; var base64 = e.target.result;
var mediav = $("#media").val(); var mediav = $("#media").val();
@ -213,7 +210,7 @@ element.addEventListener("paste", function (e) {
var i = mediav.split(",").length; var i = mediav.split(",").length;
} }
// DataTransferItem の type に mime tipes があるのでそれを使う // DataTransferItem の type に mime tipes があるのでそれを使う
media(base64, imageType, i) media(base64, imageType, i);
}; };
fr.readAsDataURL(imageFile); fr.readAsDataURL(imageFile);
@ -222,13 +219,13 @@ element.addEventListener("paste", function (e) {
function deleteImage(key) { function deleteImage(key) {
Swal.fire({ Swal.fire({
title: lang.lang_postimg_delete, title: lang.lang_postimg_delete,
type: 'warning', type: "warning",
showCancelButton: true, showCancelButton: true,
confirmButtonColor: '#3085d6', confirmButtonColor: "#3085d6",
cancelButtonColor: '#d33', cancelButtonColor: "#d33",
confirmButtonText: lang.lang_yesno, confirmButtonText: lang.lang_yesno,
cancelButtonText: lang.lang_no cancelButtonText: lang.lang_no
}).then((result) => { }).then(result => {
if (result.value) { if (result.value) {
var media = $("#media").val(); var media = $("#media").val();
var arr = media.split(","); var arr = media.split(",");
@ -239,8 +236,54 @@ function deleteImage(key) {
} }
} }
$("#media").val(arr.join(",")); $("#media").val(arr.join(","));
$('#preview [data-media=' + key + ']').remove(); $("#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;
} 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) {
return response.json();
})
.catch(function(error) {
todo(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",
});
}
});
}

File diff suppressed because one or more lines are too long

View File

@ -56,7 +56,9 @@
"lang_postimg_previewdis": "cannot preview", "lang_postimg_previewdis": "cannot preview",
"lang_postimg_aftupload": "You cannot change accounts after uploading.", "lang_postimg_aftupload": "You cannot change accounts after uploading.",
"lang_postimg_failupload": "Failed", "lang_postimg_failupload": "Failed",
"lang_postimg_delete": "Delete this image.", "lang_postimg_delete": "Click to add description, right-click to delete this",
"lang_postimg_desc": "Description",
"lang_postimg_leadContext": "right-click the thumbnail to delete this",
"lang_post_tagTL": "This toot does not contain a default tag. This toot will not be shown on Local TL. Continue?", "lang_post_tagTL": "This toot does not contain a default tag. This toot will not be shown on Local TL. Continue?",
"lang_post_tagVis": "This toot(not 'public' toot) is not shown on this tag's TL.", "lang_post_tagVis": "This toot(not 'public' toot) is not shown on this tag's TL.",
"lang_post_cwtitle": "Auto CW Alert", "lang_post_cwtitle": "Auto CW Alert",

View File

@ -56,7 +56,9 @@
"lang_postimg_previewdis": "プレビューできません。", "lang_postimg_previewdis": "プレビューできません。",
"lang_postimg_aftupload": "アップロード後はアカウントを切り替えられません。", "lang_postimg_aftupload": "アップロード後はアカウントを切り替えられません。",
"lang_postimg_failupload": "アップロードに失敗しました。", "lang_postimg_failupload": "アップロードに失敗しました。",
"lang_postimg_delete": "この画像を削除します", "lang_postimg_delete": "クリック: 画像に説明を追加/右クリック: 削除",
"lang_postimg_desc": "説明",
"lang_postimg_leadContext": "画像を削除するためには右クリック",
"lang_post_tagTL": "デフォルトタグが挿入されていません。このまま投稿するとローカルには表示されません。", "lang_post_tagTL": "デフォルトタグが挿入されていません。このまま投稿するとローカルには表示されません。",
"lang_post_tagVis": "公開範囲が「公開」以外だと、タグTLに表示されません。(一部インスタンスを除く)", "lang_post_tagVis": "公開範囲が「公開」以外だと、タグTLに表示されません。(一部インスタンスを除く)",
"lang_post_cwtitle": "長文投稿の警告", "lang_post_cwtitle": "長文投稿の警告",