From 376425cc983bbfcc05afbe8935f45817e22cd145 Mon Sep 17 00:00:00 2001 From: Cutls Date: Sat, 7 Sep 2019 01:33:30 +0900 Subject: [PATCH] Add: demo: unread reader --- app/css/tl.css | 9 +- app/js/lang/lang.bg.js | 1 + app/js/lang/lang.cs.js | 1 + app/js/lang/lang.de.js | 1 + app/js/lang/lang.en.js | 1 + app/js/lang/lang.ja.js | 1 + app/js/tl/notification.js | 25 ++-- app/js/tl/tl.js | 234 +++++++++++++++++++++++++++++++++----- app/js/ui/layout.js | 6 +- app/js/ui/scroll.js | 20 +++- 10 files changed, 248 insertions(+), 51 deletions(-) diff --git a/app/css/tl.css b/app/css/tl.css index 2384d74b..6cdd0c6e 100644 --- a/app/css/tl.css +++ b/app/css/tl.css @@ -436,7 +436,7 @@ p:not(:last-child) { z-index: 500; padding: 5px; display: grid; - grid-template-columns: 40px 48px 1fr 24px; + grid-template-columns: 40px 1fr 1fr 24px; grid-template-rows: 30px 30px; grid-template-areas: "notice notice_name notice_name a2" "notice a1 sta a3" "notf-box notf-box notf-box notf-box"; } @@ -461,7 +461,6 @@ p:not(:last-child) { } .area-a1 { - text-align: center; grid-area: a1; } .area-sta { @@ -697,3 +696,9 @@ audio { animation-duration: 0.1s; animation-name: fadeInDown; } +.urbadge{ + line-height: normal; + height: 2rem; + font-size: 1rem; + background-color: #009688; +} diff --git a/app/js/lang/lang.bg.js b/app/js/lang/lang.bg.js index 34c4357e..85ba630a 100644 --- a/app/js/lang/lang.bg.js +++ b/app/js/lang/lang.bg.js @@ -121,6 +121,7 @@ var lang={ "lang_layout_nodata": "[No data]
F5/⌘+R to reload", "lang_layout_dm": "Direct Message", "lang_layout_webviewmode": "Prefer WebView", + "lang_layout_unread": "Unread", "lang_excluded": "Excluded type of notification", "lang_layout_excludingbt": "Показване в BT режим (ИЗКЛ./Изключване BT/ Само в BT)", "lang_layout_leftFold": "Стъпка наляво", diff --git a/app/js/lang/lang.cs.js b/app/js/lang/lang.cs.js index b2932067..689395bc 100644 --- a/app/js/lang/lang.cs.js +++ b/app/js/lang/lang.cs.js @@ -127,6 +127,7 @@ var lang={ "lang_layout_leftUnfold": "Dock on the right", "lang_layout_deleteColumn": "Delete this column", "lang_layout_deleteColumnDesc": "Delete this column", + "lang_layout_unread": "Unread", "lang_sort_gothis": "Go to this column", "lang_sort_remthis": "Delete this column", "lang_spotify_img": "Attach an album artwork", diff --git a/app/js/lang/lang.de.js b/app/js/lang/lang.de.js index a7e22455..1e85ba60 100644 --- a/app/js/lang/lang.de.js +++ b/app/js/lang/lang.de.js @@ -127,6 +127,7 @@ var lang={ "lang_layout_leftUnfold": "Rechts Anheften", "lang_layout_deleteColumn": "Diese Spalte löschen", "lang_layout_deleteColumnDesc": "Diese Spalte löschen", + "lang_layout_unread": "Unread", "lang_sort_gothis": "Gehe zu dieser Spalte", "lang_sort_remthis": "Diese Spalte löschen", "lang_spotify_img": "Albumcover anhängen", diff --git a/app/js/lang/lang.en.js b/app/js/lang/lang.en.js index ef4ceec7..997fa78e 100644 --- a/app/js/lang/lang.en.js +++ b/app/js/lang/lang.en.js @@ -153,6 +153,7 @@ var lang = { "lang_layout_leftUnfold": "Dock on the right", "lang_layout_deleteColumn": "Delete this column", "lang_layout_deleteColumnDesc": "Delete this column", + "lang_layout_unread": "Unread", //ui/sort.js "lang_sort_gothis": "Go to this column", "lang_sort_remthis": "Delete this column", diff --git a/app/js/lang/lang.ja.js b/app/js/lang/lang.ja.js index c799f0d7..60dfc79a 100644 --- a/app/js/lang/lang.ja.js +++ b/app/js/lang/lang.ja.js @@ -153,6 +153,7 @@ var lang = { "lang_layout_leftUnfold": "右へ出す", "lang_layout_deleteColumn": "カラム削除", "lang_layout_deleteColumnDesc": "カラムを削除しますか？", + "lang_layout_unread": "未読", //ui/sort.js "lang_sort_gothis": "このカラムへ", "lang_sort_remthis": "このカラムを削除", diff --git a/app/js/tl/notification.js b/app/js/tl/notification.js index d0b2f42f..16bcad59 100644 --- a/app/js/tl/notification.js +++ b/app/js/tl/notification.js @@ -66,7 +66,7 @@ function notfColumn(acct_id, tlid, sys) { if (os == "darwin") { var n = new Notification('TheDesk:' + domain, options); } else { - var nativeNotfOpt=['TheDesk:' + domain, ct + lang.lang_notf_new, localStorage.getItem("prof_" + acct_id)] + var nativeNotfOpt = ['TheDesk:' + domain, ct + lang.lang_notf_new, localStorage.getItem("prof_" + acct_id)] postMessage(["nativeNotf", nativeNotfOpt], "*") } @@ -171,7 +171,7 @@ function notfCommon(acct_id, tlid, sys) { if (os == "darwin") { var n = new Notification('TheDesk:' + domain, options); } else { - var nativeNotfOpt=['TheDesk:' + domain, ct + lang.lang_notf_new, localStorage.getItem("prof_" + acct_id)] + var nativeNotfOpt = ['TheDesk:' + domain, ct + lang.lang_notf_new, localStorage.getItem("prof_" + acct_id)] postMessage(["nativeNotf", nativeNotfOpt], "*") } @@ -234,16 +234,19 @@ function notfWS(misskey, acct_id, tlid, domain, at) { if (type == "notification") { var templete = ""; localStorage.setItem("lastnotf_" + acct_id, obj.id); - if (obj.type != "follow") { - templete = parse([obj], 'notf', acct_id, 'notf', popup); - } else { - templete = userparse([obj], 'notf', acct_id, 'notf', popup); + if (!$("#unread_" + tlid + " .material-icons").hasClass("teal-text")) { + //markers show中はダメ + if (obj.type != "follow") { + templete = parse([obj], 'notf', acct_id, 'notf', popup); + } else { + templete = userparse([obj], 'notf', acct_id, 'notf', popup); + } + if (!$("div[data-notfIndv=" + acct_id + "_" + obj.id + "]").length) { + $("div[data-notf=" + acct_id + "]").prepend(templete); + $("div[data-const=notf_" + acct_id + "]").prepend(templete); + } + jQuery("time.timeago").timeago(); } - if (!$("div[data-notfIndv=" + acct_id + "_" + obj.id + "]").length) { - $("div[data-notf=" + acct_id + "]").prepend(templete); - $("div[data-const=notf_" + acct_id + "]").prepend(templete); - } - jQuery("time.timeago").timeago(); } else if (type == "delete") { $("[toot-id=" + obj + "]").hide(); $("[toot-id=" + obj + "]").remove(); diff --git a/app/js/tl/tl.js b/app/js/tl/tl.js index ae9605e4..9919578e 100644 --- a/app/js/tl/tl.js +++ b/app/js/tl/tl.js @@ -2,6 +2,7 @@ moreloading = false; function tl(type, data, acct_id, tlid, delc, voice, mode) { scrollevent(); + $("#unread_" + tlid + " .material-icons").removeClass("teal-text") localStorage.removeItem("morelock"); localStorage.removeItem("pool"); var domain = localStorage.getItem("domain_" + acct_id); @@ -149,6 +150,18 @@ function tl(type, data, acct_id, tlid, delc, voice, mode) { jQuery("time.timeago").timeago(); todc(); reload(type, '', acct_id, tlid, data, mute, delc, voice); + if (type == "home" || type == "notf") { + //Markers + var markers = localStorage.getItem("markers"); + if (markers == "no") { + markers = false; + } else { + markers = true + } + if (markers) { + getMarker(tlid, type, acct_id) + } + } $(window).scrollTop(0); }); } @@ -217,7 +230,7 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice, mode) { websocket[wsid] = new WebSocket(start); websocket[wsid].onopen = function (mess) { console.table({ "tlid": tlid, "type": "Connect Streaming API" + type, "domain": domain, "message": [mess] }) - $("#notice_icon_" + tlid).removeClass("red-text"); + $("#notice_icon_" + tlid).removeClass("red-text") } websocket[wsid].onmessage = function (mess) { console.log([tlid + ":Receive Streaming API:", JSON.parse(mess.data)]); @@ -256,37 +269,40 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice, mode) { $("#timeline_" + tlid + " [toot-id=" + JSON.parse(mess.data).payload + "]").addClass("emphasized"); $("#timeline_" + tlid + " [toot-id=" + JSON.parse(mess.data).payload + "]").addClass("by_delcatch"); } else { - $("[toot-id=" + JSON.parse(mess.data).payload + "]").hide(); - $("[toot-id=" + JSON.parse(mess.data).payload + "]").remove(); + $("[toot-id=" + JSON.parse(mess.data).payload + "]").hide() + $("[toot-id=" + JSON.parse(mess.data).payload + "]").remove() } } else if (typeA == "update" || typeA == "conversation") { - localStorage.removeItem("delete"); - var obj = JSON.parse(JSON.parse(mess.data).payload); - if ($("#timeline_" + tlid + " [toot-id=" + obj.id + "]").length < 1) { - if (voice) { - say(obj.content) - } - var templete = parse([obj], type, acct_id, tlid, "", mute, type); - if ($("timeline_box_" + tlid + "_box .tl-box").scrollTop() === 0) { - $("#timeline_" + tlid).prepend(templete); - } else { - var pool = localStorage.getItem("pool_" + tlid); - if (pool) { - pool = templete + pool; - } else { - pool = templete + localStorage.removeItem("delete") + if (!$("#unread_" + tlid + " .material-icons").hasClass("teal-text")) { + //markers show中はダメ + var obj = JSON.parse(JSON.parse(mess.data).payload); + if ($("#timeline_" + tlid + " [toot-id=" + obj.id + "]").length < 1) { + if (voice) { + say(obj.content) } - localStorage.setItem("pool_" + tlid, pool); + var templete = parse([obj], type, acct_id, tlid, "", mute, type); + if ($("timeline_box_" + tlid + "_box .tl-box").scrollTop() === 0) { + $("#timeline_" + tlid).prepend(templete); + } else { + var pool = localStorage.getItem("pool_" + tlid); + if (pool) { + pool = templete + pool; + } else { + pool = templete + } + localStorage.setItem("pool_" + tlid, pool); + } + scrollck(); + additional(acct_id, tlid); + jQuery("time.timeago").timeago(); + } else { + todo("二重取得発生中"); } - scrollck(); - additional(acct_id, tlid); - jQuery("time.timeago").timeago(); - } else { - todo("二重取得発生中"); - } - todc(); + todc(); + } } else if (typeA == "filters_changed") { filterUpdate(acct_id); } @@ -298,7 +314,7 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice, mode) { console.error("Error closing"); console.error(error); if (mode == "error") { - $("#notice_icon_" + tlid).addClass("red-text"); + $("#notice_icon_" + tlid).addClass("red-text") todo('WebSocket Error ' + error); } else { var errorct = localStorage.getItem("wserror_" + tlid) * 1 + 1; @@ -312,7 +328,7 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice, mode) { websocket[wsid].onclose = function () { console.warn("Closing " + tlid); if (mode == "error") { - $("#notice_icon_" + tlid).addClass("red-text"); + $("#notice_icon_" + tlid).addClass("red-text") todo('WebSocket Closed'); } else { var errorct = localStorage.getItem("wserror_" + tlid) * 1 + 1; @@ -822,10 +838,11 @@ function reconnector(tlid, type, acct_id, data, mode) { reload(type, '', acct_id, tlid, data, mute, "", voice, mode); } M.toast({ html: lang.lang_tl_reconnect, displayLength: 2000 }) - + } -function columnReload(tlid, type){ +function columnReload(tlid, type) { $("#notice_icon_" + tlid).addClass("red-text"); + $("#unread_" + tlid + " .material-icons").removeClass("teal-text") if (type == "mix" || type == "integrated" || type == "plus") { if (localStorage.getItem("voice_" + tlid)) { var voice = true; @@ -860,4 +877,159 @@ function columnReload(tlid, type){ parseColumn(tlid) } } -strAliveInt() \ No newline at end of file +strAliveInt() +//Markers +function getMarker(tlid, type, acct_id) { + var domain = localStorage.getItem("domain_" + acct_id); + var at = localStorage.getItem("acct_" + acct_id + "_at"); + if (type == "home") { + var add = "home" + } else if (type == "notf") { + var add = "notifications" + } + var start = "https://" + domain + "/api/v1/markers?timeline=" + add + fetch(start, { + method: 'GET', + headers: { + 'content-type': 'application/json', + 'Authorization': 'Bearer ' + at + }, + }).then(function (response) { + return response.json(); + }).catch(function (error) { + $("#unread_" + tlid).attr("title", lang.lang_layout_unread + ":" + lang.lang_nothing) + $("#unread_" + tlid).attr("data-id", "") + return false; + }).then(function (json) { + if (json) { + if (json[add]) { + json = json[add] + $("#unread_" + tlid).attr("title", lang.lang_layout_unread + ":" + json.updated_at + ' v' + json.version) + $("#unread_" + tlid).attr("data-id", json.last_read_id) + } else { + $("#unread_" + tlid).attr("title", lang.lang_layout_unread + ":" + lang.lang_nothing) + $("#unread_" + tlid).attr("data-id", "") + } + } else { + $("#unread_" + tlid).attr("title", lang.lang_layout_unread + ":" + lang.lang_nothing) + $("#unread_" + tlid).attr("data-id", "") + } + }); +} +function showUnread(tlid, type, acct_id) { + if($("#unread_" + tlid + " .material-icons").hasClass("teal-text")){ + $("#unread_" + tlid + " .material-icons").removeClass("teal-text") + goTop(tlid) + return + } + $("#unread_" + tlid + " .material-icons").addClass("teal-text") + var domain = localStorage.getItem("domain_" + acct_id); + var at = localStorage.getItem("acct_" + acct_id + "_at"); + var id = $("#unread_" + tlid).attr("data-id") + if (type == "home") { + var add = "timelines/home?min_id=" + id + } else if (type == "notf") { + var add = "notifications?min_id=" + id + } + var start = "https://" + domain + "/api/v1/" + add + fetch(start, { + method: 'GET', + headers: { + 'content-type': 'application/json', + 'Authorization': 'Bearer ' + at + }, + }).then(function (response) { + return response.json(); + }).catch(function (error) { + todo(error); + console.error(error); + }).then(function (json) { + if(!json){ + columnReload(tlid) + } + if (localStorage.getItem("filter_" + acct_id) != "undefined") { + var mute = getFilterType(JSON.parse(localStorage.getItem("filter_" + acct_id)), type); + } else { + var mute = []; + } + var templete = parse(json, '', acct_id, tlid, "", mute, type); + var len = json.length - 1 + $("#timeline_" + tlid).html(templete); + var to = $("#timeline_" + tlid + " .cvo:eq(" + len + ")").offset().top + $("#timeline_box_" + tlid + "_box .tl-box").scrollTop(to) + additional(acct_id, tlid); + jQuery("time.timeago").timeago(); + todc(); + }); +} +var ueloadlock = false +function ueload(tlid){ + if(ueloadlock){ + return false + } + ueloadlock = true + var multi = localStorage.getItem("column") + var obj = JSON.parse(multi) + var acct_id = obj[tlid*1].domain + var type = obj[tlid*1].type + var domain = localStorage.getItem("domain_" + acct_id) + var at = localStorage.getItem("acct_" + acct_id + "_at") + var id = $("#timeline_" + tlid + " .cvo:eq(0)").attr("unique-id") + if (type == "home") { + var add = "timelines/home?min_id=" + id + } else if (type == "notf") { + var add = "notifications?min_id=" + id + } + var start = "https://" + domain + "/api/v1/" + add + fetch(start, { + method: 'GET', + headers: { + 'content-type': 'application/json', + 'Authorization': 'Bearer ' + at + }, + }).then(function (response) { + return response.json(); + }).catch(function (error) { + todo(error); + console.error(error); + }).then(function (json) { + if(!json){ + columnReload(tlid) + } + if (localStorage.getItem("filter_" + acct_id) != "undefined") { + var mute = getFilterType(JSON.parse(localStorage.getItem("filter_" + acct_id)), type); + } else { + var mute = []; + } + var templete = parse(json, '', acct_id, tlid, "", mute, type); + var len = json.length - 1 + $("#timeline_" + tlid).prepend(templete); + var to = $("#timeline_" + tlid + " .cvo:eq(" + len + ")").offset().top + $("#timeline_box_" + tlid + "_box .tl-box").scrollTop(to) + additional(acct_id, tlid); + jQuery("time.timeago").timeago(); + todc(); + ueloadlock = false + }); +} +function testAsRead(acct_id) { + var domain = localStorage.getItem("domain_" + acct_id); + var at = localStorage.getItem("acct_" + acct_id + "_at"); + var httpreq = new XMLHttpRequest(); + var start = "https://" + domain + "/api/v1/markers" + httpreq.open('POST', start, true); + httpreq.setRequestHeader('Content-Type', 'application/json'); + httpreq.setRequestHeader('Authorization', 'Bearer ' + at); + httpreq.responseType = "json"; + httpreq.send(JSON.stringify({ + home: { + last_read_id: 1 + } + })); + httpreq.onreadystatechange = function () { + if (httpreq.readyState === 4) { + var json = httpreq.response; + console.log(json) + } + } +} \ No newline at end of file diff --git a/app/js/ui/layout.js b/app/js/ui/layout.js index 20b7d446..369559ca 100644 --- a/app/js/ui/layout.js +++ b/app/js/ui/layout.js @@ -190,6 +190,7 @@ function parseColumn(target, dontclose) { } else { var animecss = ""; } + var unread = 'more' if (acct.type == "notf") { var exclude = lang.lang_excluded + ':
' + ' ' + @@ -201,12 +202,15 @@ function parseColumn(target, dontclose) { exclude = exclude + '' } exclude = exclude + "
"; + } else if (acct.type == "home") { var exclude = 'Off' + lang.lang_layout_excludingbt + '
'; + } else { var exclude = ""; + unread = "" } if (!acct.left_fold) { basekey = key; @@ -235,7 +239,7 @@ function parseColumn(target, dontclose) { '
' + '
notifications
0000
' + + acct.domain + '">notifications' + unread + '
0000
' + '
cancel
' + '
30) { @@ -35,6 +39,10 @@ function scrollck() { } function goTop(id) { + if ($("#unread_" + id + " .material-icons").hasClass("teal-text")) { + $("#unread_" + id + " .material-icons").removeClass("teal-text") + columnReload(id) + } if ($("#timeline_box_" + id + "_box .tl-box").scrollTop() > 500) { $("#timeline_box_" + id + "_box .tl-box").scrollTop(500) }