From 9623b79197dbc0e382a6c6b3ac2e849690e1d4d5 Mon Sep 17 00:00:00 2001
From: cutls <web-pro@cutls.com>
Date: Mon, 7 Sep 2020 16:36:25 +0900
Subject: [PATCH] #317 dropdown menu with library

---
 app/css/tl.css                  | 46 +++----------------------
 app/js/post/status.js           |  6 +++-
 app/js/tl/parse.js              | 61 +++++++++++++--------------------
 app/js/ui/post-box.js           |  5 ---
 app/view/make/index.sample.html |  1 -
 5 files changed, 33 insertions(+), 86 deletions(-)

diff --git a/app/css/tl.css b/app/css/tl.css
index ff0b237d..dc1b07a4 100644
--- a/app/css/tl.css
+++ b/app/css/tl.css
@@ -451,48 +451,12 @@ iframe,
 .action .fa-quote-right {
 	margin-top: 0.15rem;
 }
-.actct {
-	color: var(--beforehover);
+.contextMenu.dropdown-content {
+	padding-top: 5px;
+	overflow-y: hidden;
+	left: calc(100% - 200px) !important;
+	width: 200px !important;
 }
-.actct:hover {
-	color: var(--color);
-	transition: 0.5s;
-}
-#contextWrap {
-	position: fixed;
-	width: 199vw;
-	height: 100vh;
-	z-index: 100;
-}
-.contextMenu {
-	position: fixed;
-	background-color: var(--box);
-	z-index: 9999;
-	border-radius: 0.4rem;
-	padding: 0.4rem;
-}
-.contextMenu.bottom:before {
-	content: '';
-	position: absolute;
-	top: 100%;
-	right: 2rem;
-	border: 1.2rem solid transparent;
-	border-top: 1.2rem solid var(--box);
-}
-.contextMenu.top:before {
-	content: '';
-	position: absolute;
-	top: -2.3rem;
-	right: 2rem;
-	border: 1.5rem solid transparent;
-	border-bottom: 1.5rem solid var(--box);
-}
-.contextMenu .btn-flat {
-	text-transform: none !important;
-	width: 100%;
-	text-align: left;
-}
-
 .gray {
 	color: var(--gray);
 }
diff --git a/app/js/post/status.js b/app/js/post/status.js
index 49e651f5..85a120b3 100644
--- a/app/js/post/status.js
+++ b/app/js/post/status.js
@@ -680,7 +680,11 @@ function staEx(mode) {
 		})
 	return
 }
-function toggleAction(elem, ct) {
+function toggleAction(id) {
+	console.log(document.getElementById(id))
+	var instance = M.Dropdown.init(document.getElementById(id));
+	instance.open()
+	return
 	var height = ct * 39 + 6
 	var cont = elem.parents('.cvo').find('.contextMenu')
 	if (cont.hasClass('hide')) {
diff --git a/app/js/tl/parse.js b/app/js/tl/parse.js
index 67d99375..15fc668b 100644
--- a/app/js/tl/parse.js
+++ b/app/js/tl/parse.js
@@ -901,12 +901,10 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 			}
 			//日本語じゃない
 			if (toot.language != lang.language && toot.language) {
-				var trans = `<div class="">
-						<a onclick="trans('${toot.language}','${lang.language}', $(this))" 
+				var trans = `<li onclick="trans('${toot.language}','${lang.language}', $(this))" 
 							class="waves-effect waves-dark btn-flat actct" style="padding:0">
 								<i class="material-icons" aria-hidden="true">g_translate</i>${lang.lang_parse_trans}
-						</a>
-					</div>`
+					</li>`
 			} else {
 				var trans = ''
 			}
@@ -1132,8 +1130,8 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 				</div>
 				<div class="area-side">
 					<div class="action ${noauth}">
-						<a onclick="toggleAction($(this), ${menuct})" 
-							class="ctxMenu waves-effect waves-dark btn-flat" style="padding:0">
+						<a onclick="toggleAction('trigger_${tlid}_${uniqueid}')" data-target="dropdown_${tlid}_${uniqueid}"
+							class="ctxMenu waves-effect waves-dark btn-flat" style="padding:0" id="trigger_${tlid}_${uniqueid}">
 							<i class="text-darken-3 material-icons act-icon" aria-hidden="true">expand_more</i>
 							<span class="voice">Other actions</span>
 						</a>
@@ -1146,45 +1144,33 @@ function parse(obj, mix, acct_id, tlid, popup, mutefilter, type) {
 						<span class="voice">${lang.lang_parse_detail}</span>
 					</div>
 				</div>
-				<div class="contextMenu hide z-depth-4">
-					<div class="${viashow}">
+				<ul class="dropdown-content contextMenu" id="dropdown_${tlid}_${uniqueid}">
+					<li class="${viashow}">
 						via ${escapeHTML(via)}<br>
 						<a onclick="client('${$.strip_tags(via)}')" class="pointer">${lang.lang_parse_clientop}</a>
-					</div>
+					</li>
 					<div>
-					<button onclick="bkm('${uniqueid}','${acct_id}','${tlid}')"
-						class="waves-effect waves-dark btn-flat actct bkm-btn" style="padding:0">
-						<i class="fas text-darken-3 fa-bookmark bkm_${toot.id} ${if_bkm}"></i>
-						<span class="bkmStr_${uniqueid}">${bkmStr}</span>
-					</button>
-					</div>
-					<div class="${if_mine}">
-						<button onclick="del('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct"
+					<li onclick="bkm('${uniqueid}','${acct_id}','${tlid}')"
+						class="bkm-btn bkmStr_${uniqueid}" style="padding:0">
+						<i class="fas text-darken-3 fa-bookmark bkm_${toot.id} ${if_bkm}"></i>${bkmStr}
+					</li>
+					<li class="${if_mine}" onclick="del('${uniqueid}','${acct_id}')"
 							style="padding:0">
 							<i class="fas fa-trash"></i>${lang.lang_parse_del}
-						</button>
-					</div>
-					<div class="${if_mine}">
-						<button onclick="pin('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct" style="padding:0">
-							<i class="fas fa-map-pin pin_${uniqueid} ${if_pin}"></i>
-							<span class="pinStr_${uniqueid}">${pinStr}</span>
-						</button>
-					</div>
-					<div class="${if_mine}">
-						<button onclick="redraft('${uniqueid}','${acct_id}')" class="waves-effect waves-dark btn-flat actct"
+					</li>
+					<li class="${if_mine}" onclick="pin('${uniqueid}','${acct_id}')" style="padding:0" class="pinStr_${uniqueid}">
+							<i class="fas fa-map-pin pin_${uniqueid} ${if_pin}"></i>${pinStr}
+					</li>
+					<li class="${if_mine}"  onclick="redraft('${uniqueid}','${acct_id}')"
 							style="padding:0">
 							<i class="material-icons" aria-hidden="true">redo</i>${lang.lang_parse_redraft}
-						</button>
-					</div>
+					</li>
 					${trans}
-					<div>
-					<button onclick="postMessage(['openUrl', '${toot.url}'], '*')"
-						class="waves-effect waves-dark btn-flat actct" style="padding:0">
-						<i class="fas text-darken-3 fa-globe"></i>
-						${lang.lang_parse_link}
-					</button>
-					</div>
-				</div>
+					<li onclick="postMessage(['openUrl', '${toot.url}'], '*')"
+						 style="padding:0">
+						<i class="fas text-darken-3 fa-globe"></i>${lang.lang_parse_link}
+					</li>
+				</ul>
 			</div>
 			`
 		}
@@ -1371,7 +1357,6 @@ function userparse(obj, auth, acct_id, tlid, popup) {
 }
 //クライアントダイアログ
 function client(name) {
-	$('#contextWrap').addClass('hide')
 	if (name != 'Unknown') {
 		//聞く
 		Swal.fire({
diff --git a/app/js/ui/post-box.js b/app/js/ui/post-box.js
index 3ca86b7c..cec48573 100644
--- a/app/js/ui/post-box.js
+++ b/app/js/ui/post-box.js
@@ -126,11 +126,6 @@ function initPostbox() {
 		localStorage.removeItem('nohide')
 		srcBox('close')
 	})
-	$('#contextWrap').click(function (e) {
-		$('#contextWrap').addClass('hide')
-		$('.contextMenu').addClass('hide')
-		$('.act-icon').text('expand_more')
-	})
 	$('#textarea,#cw-text').focusout(function (e) {
 		localStorage.setItem('nohide', true)
 		var countup = function () {
diff --git a/app/view/make/index.sample.html b/app/view/make/index.sample.html
index 82f23afe..5cd8f465 100644
--- a/app/view/make/index.sample.html
+++ b/app/view/make/index.sample.html
@@ -123,7 +123,6 @@
 				</div>
 			</div>
 		</div>
-		<div id="contextWrap" class="hide"></div>
 		<div id="post-box" class="z-depth-5">
 			<div id="post-bar" class="drag-bar">
 				<span id="unreact">@@post-new@@</span><span id="addreact" class="hide">Reaction</span>