From d92570fa3bd56fcb278c3e32ed26abda539aa653 Mon Sep 17 00:00:00 2001
From: Cutls <web-pro@cutls.com>
Date: Fri, 12 Jul 2019 00:53:55 +0900
Subject: [PATCH] Add: keyboard-control

---
 app/css/themes.css           | 12 ++++++
 app/css/tl.css               |  7 ++++
 app/js/common/keyshortcut.js | 73 +++++++++++++++++++++++++++++++++++-
 app/js/tl/misskeyparse.js    |  4 +-
 app/js/tl/parse.js           |  6 +--
 app/js/ui/post-box.js        | 10 ++++-
 app/main/css.js              |  6 ++-
 7 files changed, 110 insertions(+), 8 deletions(-)

diff --git a/app/css/themes.css b/app/css/themes.css
index 7c613f88..48abc210 100644
--- a/app/css/themes.css
+++ b/app/css/themes.css
@@ -15,6 +15,8 @@
   --postbox: white;
   --modalfooter: #fafafa;
   --accentbtn: #009688;
+  --selected: #c0c0c0;
+  --selectedWithShare: #b2babd;
 }
 #imagemodal {
   background: url("../img/pixel.white.svg");
@@ -36,6 +38,8 @@
   --postbox: #424242;
   --modalfooter: #212121;
   --accentbtn: #3f51b5;
+  --selected: #3f3f3f;
+  --selectedWithShare: #003a30;
 }
 .blacktheme #imagemodal {
   background: url("../img/pixel.svg");
@@ -57,6 +61,8 @@
   --postbox: #1a237e;
   --modalfooter: #031833;
   --accentbtn: #00acc1;
+  --selected: #214f8a;
+  --selectedWithShare: #003a30;
 }
 .indigotheme #imagemodal {
   background: url("../img/pixel.svg");
@@ -78,6 +84,8 @@
   --postbox: #4e342e;
   --modalfooter: #261411;
   --accentbtn: #827717;
+  --selected: #6d352b;
+  --selectedWithShare: #003a30;
 }
 .browntheme #imagemodal {
   background: url("../img/pixel.svg");
@@ -99,6 +107,8 @@
   --postbox: #a5d6a7;
   --modalfooter: #81c784;
   --accentbtn: #33691e;
+  --selected: #78c17a;
+  --selectedWithShare: #caa266;
 }
 .greentheme #imagemodal {
   background: url("../img/pixel.white.svg");
@@ -120,6 +130,8 @@
   --postbox: #dff1ff;
   --modalfooter: #2196f3;
   --accentbtn: #2f7bb7;
+  --selected: #9dcade;
+  --selectedWithShare: #c1dac4;
 }
 .bluetheme #imagemodal {
   background: url("../img/pixel.white.svg");
diff --git a/app/css/tl.css b/app/css/tl.css
index 83f0f2bc..c732a808 100644
--- a/app/css/tl.css
+++ b/app/css/tl.css
@@ -96,6 +96,7 @@
 }
 iframe {
   max-width: 100%;
+  max-height: 300px;
 }
 @media screen and (max-width: 600px) {
   .mobile #timeline-container {
@@ -597,6 +598,12 @@ p:not(:last-child) {
   width: 100%;
   height: 100%;
 }
+.shared.selectedToot{
+  background-color: var(--selectedWithShare);
+}
+.selectedToot{
+  background-color: var(--selected);
+}
 audio{
   height: 2rem;
 }
diff --git a/app/js/common/keyshortcut.js b/app/js/common/keyshortcut.js
index 1066f453..80a720d4 100644
--- a/app/js/common/keyshortcut.js
+++ b/app/js/common/keyshortcut.js
@@ -1,3 +1,5 @@
+selectedColumn = 0
+selectedToot = 0
 $(function ($) {
 	//キーボードショートカット
 	$(window).keydown(function (e) {
@@ -132,6 +134,55 @@ $(function ($) {
 					return false;
 				}
 			}
+			//矢印:選択
+			if (e.code == "ArrowLeft") {
+				//left
+				if (selectedColumn > 0) {
+					selectedColumn--
+				}
+				tootSelector(selectedColumn, selectedToot)
+				return false;
+			} else if (e.code == "ArrowUp") {
+				//up
+				if (selectedToot > 0) {
+					selectedToot--
+				}
+				tootSelector(selectedColumn, selectedToot)
+				return false;
+			} else if (e.code == "ArrowRight") {
+				//right
+				if (selectedColumn < $(".tl-box").length - 1) {
+					selectedColumn++
+				}
+				tootSelector(selectedColumn, selectedToot)
+				return false;
+			} else if (e.code == "ArrowDown") {
+				//down
+				selectedToot++
+				tootSelector(selectedColumn, selectedToot)
+				return false;
+			}
+			//選択時
+			if (e.keyCode == 70) {
+				var id = $(".selectedToot").attr('unique-id')
+				var acct_id = $('#timeline_' + selectedColumn).attr("data-acct")
+				fav(id, acct_id, false)
+				return false;
+			}
+			if (e.keyCode == 66) {
+				var id = $(".selectedToot").attr('unique-id')
+				var acct_id = $('#timeline_' + selectedColumn).attr("data-acct")
+				rt(id, acct_id, false)
+				return false;
+			}
+			if (e.keyCode == 82) {
+				var id = $(".selectedToot").attr('unique-id')
+				var acct_id = $('#timeline_' + selectedColumn).attr("data-acct")
+				var ats_cm = $('.selectedToot .rep-btn').attr("data-men")
+				var mode = $('.selectedToot .rep-btn').attr("data-visen")
+				re(id, ats_cm, acct_id, mode)
+				return false;
+			}
 		}
 		//textareaフォーカス時
 		if (hasFocus2 && wv) {
@@ -184,4 +235,24 @@ $(function ($) {
 	$("#clear").click(function () {
 		clear();
 	});
-});
\ No newline at end of file
+});
+//選択する
+function tootSelector(column, toot) {
+	$('.cvo').removeClass("selectedToot")
+	$('#timeline_' + column + ' .cvo').eq(toot).addClass("selectedToot")
+	var scr = $('.tl-box[tlid=' + column + ']').scrollTop()
+	var elem = $('.selectedToot').offset().top
+	var top = elem - $('.tl-box').height() + scr
+	console.log(elem, top, scr)
+	if (top > 0) {
+		top = top + $('.selectedToot').height()
+		if(top > scr){
+			$('.tl-box[tlid=' + column + ']').animate({ scrollTop: top})
+		}
+	} else if (elem < 0) {
+		var to = scr + elem - $('.selectedToot').height()
+		if (to < scr) {
+			$('.tl-box[tlid=' + column + ']').animate({ scrollTop: to })
+		}
+	}
+}
\ No newline at end of file
diff --git a/app/js/tl/misskeyparse.js b/app/js/tl/misskeyparse.js
index e79c7364..dd250953 100644
--- a/app/js/tl/misskeyparse.js
+++ b/app/js/tl/misskeyparse.js
@@ -832,10 +832,10 @@ function misskeyParse(obj, mix, acct_id, tlid, popup, mutefilter) {
 			'<div class="action ' + disp["re"] + ' ' + noauth + '"><a onclick="misskeyreply(\'' + toot.id +
 			'\',\'' + acct_id + '\',' +
 			acct_id + ',\'' + visen +
-			'\')" class="waves-effect waves-dark btn-flat" style="padding:0" title="' + lang.lang_parse_replyto + '"><i class="fas fa-share"></i></a></div>' +
+			'\')" class="waves-effect waves-dark btn-flat rep-btn" style="padding:0" title="' + lang.lang_parse_replyto + '"><i class="fas fa-share"></i></a></div>' +
 			'<div class="action ' + can_rt + ' ' + disp["rt"] + ' ' + noauth + '"><a onclick="renote(\'' + toot.id + '\',' + acct_id +
 			',\'' + tlid +
-			'\')" class="waves-effect waves-dark btn-flat" style="padding:0" title="' + lang.lang_misskeyparse_renote + '"><i class="text-darken-3 fas fa-retweet ' +
+			'\')" class="waves-effect waves-dark btn-flat bt-btn" style="padding:0" title="' + lang.lang_misskeyparse_renote + '"><i class="text-darken-3 fas fa-retweet ' +
 			if_rt + ' rt_' + toot.id + '"></i><span class="rt_ct"></span></a></div>' +
 			'<div class="action ' + can_rt + ' ' + disp["qt"] + ' ' + noauth + '"><a onclick="renoteqt(\'' + toot.id + '\',' + acct_id +
 			',\'misskey.xyz\',\'misskey.xyz\')" class="waves-effect waves-dark btn-flat" style="padding:0" title="' + lang.lang_misskeyparse_renoteqt + '"><i class="text-darken-3 fas fa-quote-right"></i></a></div>' +
diff --git a/app/js/tl/parse.js b/app/js/tl/parse.js
index b53a2c1e..6bc1dbc4 100644
--- a/app/js/tl/parse.js
+++ b/app/js/tl/parse.js
@@ -847,11 +847,11 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			'<div class="action ' + disp["re"] + ' ' + noauth + '"><a onclick="re(\'' + toot.id +
 			'\',\'' + to_mention + '\',' +
 			acct_id + ',\'' + visen +
-			'\')" class="waves-effect waves-dark btn-flat actct" style="padding:0" title="' + lang.lang_parse_replyto + '"><i class="fas fa-share"></i><span class="rep_ct">' + replyct +
+			'\')" class="waves-effect waves-dark btn-flat actct rep-btn" data-men="' + to_mention +'" data-visen="' + visen +'" style="padding:0" title="' + lang.lang_parse_replyto + '"><i class="fas fa-share"></i><span class="rep_ct">' + replyct +
 			'</a></span></a></div>' +
 			'<div class="action ' + can_rt + ' ' + disp["rt"] + ' ' + noauth + '"><a onclick="rt(\'' + toot.id + '\',' + acct_id +
 			',\'' + tlid +
-			'\')" class="waves-effect waves-dark btn-flat actct" style="padding:0" title="' + lang.lang_parse_bt + '"><i class="fas fa-retweet ' +
+			'\')" class="waves-effect waves-dark btn-flat actct bt-btn" style="padding:0" title="' + lang.lang_parse_bt + '"><i class="fas fa-retweet ' +
 			if_rt + ' rt_' + toot.id + '"></i><span class="rt_ct">' + toot.reblogs_count +
 			'</span></a></div>' +
 			'<div class="action ' + can_rt + ' ' + disp["qt"] + ' ' + noauth + ' ' + qtClass + '"><a onclick="qt(\'' + toot.id + '\',' + acct_id +
@@ -859,7 +859,7 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			'\')" class="waves-effect waves-dark btn-flat actct" style="padding:0" title="' + lang.lang_parse_quote + '"><i class="text-darken-3 fas fa-quote-right"></i></a></div>' +
 			'<div class="action ' + disp["fav"] + ' ' + noauth + '"><a onclick="fav(\'' + toot.id + '\',' + acct_id +
 			',\'' + tlid +
-			'\')" class="waves-effect waves-dark btn-flat actct" style="padding:0" title="' + lang.lang_parse_fav + '"><i class="fas text-darken-3 fa-star' +
+			'\')" class="waves-effect waves-dark btn-flat actct fav-btn" style="padding:0" title="' + lang.lang_parse_fav + '"><i class="fas text-darken-3 fa-star' +
 			if_fav + ' fav_' + toot.id + '"></i><span class="fav_ct">' + toot.favourites_count +
 			'</a></span></div>' +
 			'<div class="' + if_mine + ' action ' + disp["del"] + ' ' + noauth + '"><a onclick="del(\'' + toot.id + '\',' +
diff --git a/app/js/ui/post-box.js b/app/js/ui/post-box.js
index dab8eeb6..230aab75 100644
--- a/app/js/ui/post-box.js
+++ b/app/js/ui/post-box.js
@@ -84,15 +84,20 @@ $('#posttgl').click(function (e) {
 	} else {
 		hide();
 	}
+	$('.cvo').removeClass("selectedToot")
+	selectedColumn = 0
+	selectedToot = 0
 });
 
 $("#timeline-container,#group").click(function (e) {
-
 	if (localStorage.getItem("box") != "absolute") {
 		if ($('#post-box').hasClass("appear") && !localStorage.getItem("nohide")) {
 			hide();
 		}
 	}
+	$('.cvo').removeClass("selectedToot")
+	selectedColumn = 0
+	selectedToot = 0
 	localStorage.removeItem("nohide")
 });
 $('#textarea,#cw-text').focusout(function (e) {
@@ -101,4 +106,7 @@ $('#textarea,#cw-text').focusout(function (e) {
 		localStorage.removeItem("nohide")
 	}
 	//setTimeout(remove, 100);
+	$('.cvo').removeClass("selectedToot")
+	selectedColumn = 0
+	selectedToot = 0
 });
\ No newline at end of file
diff --git a/app/main/css.js b/app/main/css.js
index 84a678ce..45da89f2 100644
--- a/app/main/css.js
+++ b/app/main/css.js
@@ -53,9 +53,13 @@ function css(mainWindow) {
 			if (json.base == "light") {
 				var drag = "rgba(255, 255, 255, 0.8)";
 				var beforehover = "#757575";
+				var selected = "#3f3f3f"
+				var selectedWithShare = "#b2babd"
 			} else {
 				var drag = "rgba(0, 0, 0, 0.8)";
 				var beforehover = "#9e9e9e";
+				var selected = "#c0c0c0"
+				var selectedWithShare = "#003a30"
 			}
 			if (json.props) {
 				if (json.props.TheDeskAccent) {
@@ -75,7 +79,7 @@ function css(mainWindow) {
 				secondary +
 				";--active:" + primary + ";--postbox:" + primary + ";--modalfooter:" +
 				primary +
-				";--accentbtn:" + primary + "}.customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
+				";--accentbtn:" + primary + ";--selected:" + selected + ";--selectedWithShare:" + selectedWithShare + "}.customtheme #imagemodal{background: url(\"../img/pixel.svg\");}";
 			e.sender.webContents.send('theme-css-response', css);
 		} catch (e) {
 			var css = "";