Add: demo: unread reader

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;
+}

app/js/lang/lang.bg.js

@@ -121,6 +121,7 @@ var lang={
     "lang_layout_nodata": "[No data]<br>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": "Стъпка наляво",

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",

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",

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",

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": "このカラムを削除",

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,6 +234,8 @@ function notfWS(misskey, acct_id, tlid, domain, at) {
 			if (type == "notification") {
 				var templete = "";
 				localStorage.setItem("lastnotf_" + acct_id, obj.id);
+				if (!$("#unread_" + tlid + " .material-icons").hasClass("teal-text")) {
+					//markers show中はダメ
 					if (obj.type != "follow") {
 						templete = parse([obj], 'notf', acct_id, 'notf', popup);
 					} else {
@@ -244,6 +246,7 @@ function notfWS(misskey, acct_id, tlid, domain, at) {
 						$("div[data-const=notf_" + acct_id + "]").prepend(templete);
 					}
 					jQuery("time.timeago").timeago();
+				}
 			} else if (type == "delete") {
 				$("[toot-id=" + obj + "]").hide();
 				$("[toot-id=" + obj + "]").remove();

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,12 +269,14 @@ 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 + "]").hide()
-						$("[toot-id=" + JSON.parse(mess.data).payload + "]").remove();
+						$("[toot-id=" + JSON.parse(mess.data).payload + "]").remove()
 					}
 
 				} else if (typeA == "update" || typeA == "conversation") {
-					localStorage.removeItem("delete");
+					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) {
@@ -287,6 +302,7 @@ function reload(type, cc, acct_id, tlid, data, mute, delc, voice, mode) {
 						}
 
 						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;
@@ -824,8 +840,9 @@ function reconnector(tlid, type, acct_id, data, 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;
@@ -861,3 +878,158 @@ function columnReload(tlid, type){
 	}
 }
 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)
+		}
+	}
+}

app/js/ui/layout.js

@@ -190,6 +190,7 @@ function parseColumn(target, dontclose) {
 			} else {
 				var animecss = "";
 			}
+			var unread = '<a id="unread_' + tlid + '" onclick="showUnread(' + key + ',\'' + acct.type + '\',\'' + acct.domain + '\')" class="setting nex" title="' + lang.lang_layout_unread + '"><i class="material-icons waves-effect nex">more</i></a>'
 			if (acct.type == "notf") {
 				var exclude = lang.lang_excluded + ':<br><label><input type="checkbox" class="filled-in" id="exc-reply-' + key + '" ' + excludeCk(key, "mention") + ' /><span><i class="fas fa-share exc-icons"></i></span></label> ' +
 					'<label><input type="checkbox" class="filled-in" id="exc-fav-' + key + '"  ' + excludeCk(key, "favourite") + ' /><span><i class="fas fa-star exc-icons"></i></span></label> ' +
@@ -201,12 +202,15 @@ function parseColumn(target, dontclose) {
 					exclude = exclude + '<button class="btn red waves-effect" style="width:60px; padding:0;" onclick="resetNotfFilter(' + key + ')">Clear all</button>'
 				}
 				exclude = exclude + "<br>";
+
 			} else if (acct.type == "home") {
 				var exclude = '<a onclick="ebtToggle(' + key +
 					')" class="setting nex"><i class="fas fa-retweet waves-effect nex" title="' + lang.lang_layout_excludingbt + '" style="font-size:24px"></i><span id="sta-bt-' +
 					key + '">Off</span></a>' + lang.lang_layout_excludingbt + '<br>';
+
 			} else {
 				var exclude = "";
+				unread = ""
 			}
 			if (!acct.left_fold) {
 				basekey = key;
@@ -235,7 +239,7 @@ function parseColumn(target, dontclose) {
 				'<div class="area-notice_name"><span id="notice_' + key + '" class="tl-title"></span></div>' +
 				'<div class="area-a1"><a onclick="notfToggle(' + acct.domain + ',' + key +
 				')" class="setting nex ' + if_notf + '" title="' + unique_notf + '"' + icnsert + '><i class="material-icons waves-effect nex notf-icon_' +
-				acct.domain + '">notifications</i></div><div class="area-sta"><span class="new badge teal notf-reply_' + acct.domain + ' hide" data-badge-caption="Reply">0</span><span class="new badge yellow black-text notf-fav_' + acct.domain + ' hide" data-badge-caption="Fav">0</span><span class="new badge blue notf-bt_' + acct.domain + ' hide" data-badge-caption="BT">0</span><span class="new badge orange notf-follow_' + acct.domain + ' hide" data-badge-caption="Follow">0</span></a></div>' +
+				acct.domain + '">notifications</i></a>' + unread + '</div><div class="area-sta"><span class="new badge teal notf-reply_' + acct.domain + ' hide" data-badge-caption="Reply">0</span><span class="new badge yellow black-text notf-fav_' + acct.domain + ' hide" data-badge-caption="Fav">0</span><span class="new badge blue notf-bt_' + acct.domain + ' hide" data-badge-caption="BT">0</span><span class="new badge orange notf-follow_' + acct.domain + ' hide" data-badge-caption="Follow">0</span></div>' +
 				'<div class="area-a2"><a onclick="removeColumn(' + key +
 				')" class="setting nex"><i class="material-icons waves-effect nex" title="' + lang.lang_layout_delthis + '"' + icnsert + '>cancel</i></a></div>' +
 				'<div class="area-a3"><a onclick="setToggle(' + key +

app/js/ui/scroll.js

@@ -9,14 +9,18 @@ scrollevent();
 function scrollck() {
 	$(".tl-box").each(function (i, elem) {
 		var tlid = $(this).attr('tlid');
-		//一番上ならためていた新しいトゥートを表示
+		//一番上ならためていた新しいトゥートを表示ないしtealなら未読管理モード
 		if ($(this).scrollTop() === 0) {
+			if (!$("#unread_" + tlid + " .material-icons").hasClass("teal-text")) {
 				var pool = localStorage.getItem("pool_" + tlid);
 				if (pool) {
 					$("#timeline_" + tlid).prepend(pool);
 					jQuery("time.timeago").timeago();
 					localStorage.removeItem("pool_" + tlid);
 				}
+			} else {
+				ueload(tlid)
+			}
 			//自動リフレッシュ
 			if ($("#timeline_" + tlid + " .cvo").length > 30) {
 				for (var i = 30; i < $("#timeline_" + tlid + " .cvo").length; i++) {
@@ -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)
 	}