add dialog dropdown for hashtag and suggestion, add custom emojis suggestion

app/js/post/emoji.js

@@ -126,8 +126,10 @@ function emojiGet(parse, started) {
 
 					md['if_categorized'] = if_categorized
 					localStorage.setItem('emojis_' + acct_id, JSON.stringify(md))
+					localStorage.setItem(`emojis_raw_${acct_id}`, JSON.stringify(json))
 				} else {
 					localStorage.setItem('emojis_' + acct_id, JSON.stringify(md))
+					localStorage.setItem(`emojis_raw_${acct_id}`, JSON.stringify(json))
 				}
 				localStorage.setItem('emojiseek', 0)
 				if (!started) {

app/js/post/suggest.js

@@ -9,183 +9,162 @@ var suggest
 
 input.addEventListener(
 	'focus',
-	function() {
+	function () {
 		localStorage.removeItem('cursor')
 		var acct_id = $('#post-acct-sel').val()
 		$('#suggest').html('')
+		$('#suggest').hide()
 		window.clearInterval(timer)
-		timer = window.setInterval(function() {
+		timer = window.setInterval(function () {
 			var new_val = input.value
 			if (new_val == '') {
 				$('#suggest').html('')
-				if ($('#poll').hasClass('hide') && $('#emoji').hasClass('hide') && $('#draft').hasClass('hide')) {
-					$('#right-side').hide()
-					$('#right-side').css('width', '300px')
-					$('#left-side').css('width', '100%')
-					var width = localStorage.getItem('postbox-width')
-					if (width) {
-						width = width.replace('px', '') * 1
-					} else {
-						width = 300
-					}
-					$('#post-box').css('width', width + 'px')
-				}
+				$('#suggest').hide()
 				return
 			}
 			if (prev_val != new_val) {
-				var tag = new_val.match(/#(\S{3,})/)
-				var acct = new_val.match(/@(\S{3,})/)
-				if (tag && tag[1]) {
-					var q = tag[1]
-				} else if (acct && acct[1]) {
-					var q = acct[1]
+				const pos = input.selectionStart
+				let startI = pos - 1
+				let hasDomain = false
+				let hasDomainOnce = false
+				for (startI = pos - 1; startI >= 0; startI--) {
+					if (new_val[startI].match(/\./)) hasDomain = true
+					if (new_val[startI].match(/#|@|:/) && !hasDomain) break
+					if (new_val[startI].match(/@/) && hasDomainOnce) break
+					if (new_val[startI].match(/@/) && !hasDomainOnce) hasDomainOnce = true
+				}
+				const target = new_val.substr(startI, pos - startI)
+				var tag = target.match(/#(\S{3,})/g)
+				var acct = target.match(/@(\S{3,})(@(\S{3,}))?/g)
+				var emoji = target.match(/:(\S{1,})/g)
+				if (emoji && emoji[0]) {
+					const l = emoji[0]
+					const emojis = localStorage.getItem('emojis_raw_' + acct_id)
+					const json = emojis ? JSON.parse(emojis) : []
+					const reg = new RegExp(`${emoji[0]}`)
+					let listHtml = ''
+					for (const emoji of json) {
+						const { shortcode, url } = emoji
+						if (`:${shortcode}`.match(reg)) {
+							listHtml = listHtml + `${listHtml ? `<br>` : ``}<a onclick="tagInsert(':${shortcode}:','${l}')" class="pointer"><img src="${url}" width="15">:${shortcode}:</a>`
+						}
+					}
+					$('#suggest').html(listHtml)
+					$('#suggest').show()
+				} else if (tag && tag[0]) {
+					var q = tag[0]
+				} else if (acct && acct[0]) {
+					var q = acct[0]
 				} else {
 					$('#suggest').html('')
-					if ($('#poll').hasClass('hide') && $('#emoji').hasClass('hide') && $('#draft').hasClass('hide')) {
-						$('#right-side').hide()
-						$('#right-side').css('width', '300px')
-						$('#left-side').css('width', '100%')
-						var width = localStorage.getItem('postbox-width')
-						if (width) {
-							width = width.replace('px', '') * 1
-						} else {
-							width = 300
-						}
-						$('#post-box').css('width', width + 'px')
-					}
+					$('#suggest').hide()
 					return
 				}
-				var domain = localStorage.getItem('domain_' + acct_id)
-				var at = localStorage.getItem('acct_' + acct_id + '_at')
-				suggest = 'https://' + domain + '/api/v2/search?q=' + q
-				if (suggest != oldSuggest) {
-					console.log('Try to get suggest at ' + suggest)
-					fetch(suggest, {
-						method: 'GET',
-						headers: {
-							'content-type': 'application/json',
-							Authorization: 'Bearer ' + at
-						}
-					})
-						.then(function(response) {
-							if (!response.ok) {
-								response.text().then(function(text) {
-									setLog(response.url, response.status, text)
-								})
+				if (q) {
+					var domain = localStorage.getItem('domain_' + acct_id)
+					var at = localStorage.getItem('acct_' + acct_id + '_at')
+					suggest = 'https://' + domain + '/api/v2/search?q=' + encodeURIComponent(q)
+					if (suggest != oldSuggest) {
+						console.log('Try to get suggest at ' + suggest)
+						fetch(suggest, {
+							method: 'GET',
+							headers: {
+								'content-type': 'application/json',
+								Authorization: 'Bearer ' + at
 							}
-							return response.json()
 						})
-						.catch(function(error) {
-							todo(error)
-							setLog(start, 'JSON', error)
-							console.error(error)
-						})
-						.then(function(json) {
-							console.log(['Search', json])
-							//ハッシュタグ
-							if (json.hashtags[0] && tag) {
-								if (tag[1]) {
-									var tags = []
-									Object.keys(json.hashtags).forEach(function(key4) {
-										var tag = json.hashtags[key4]
-										var his = tag.history
-										var uses =
-											his[0].uses * 1 +
-											his[1].uses * 1 +
-											his[2].uses * 1 +
-											his[3].uses * 1 +
-											his[4].uses * 1 +
-											his[5].uses * 1 +
-											his[6].uses * 1
-										tagHTML = `<br><a onclick="tagInsert('#${escapeHTML(
-											tag.name
-										)}','#${q}')" class="pointer">#${escapeHTML(tag.name)}</a>&nbsp;${uses}toot(s)`
+							.then(function (response) {
+								if (!response.ok) {
+									response.text().then(function (text) {
+										setLog(response.url, response.status, text)
+									})
+								}
+								return response.json()
+							})
+							.catch(function (error) {
+								todo(error)
+								setLog(start, 'JSON', error)
+								console.error(error)
+							})
+							.then(function (json) {
+								console.log(['Search', json])
+								//ハッシュタグ
+								if (json.hashtags[0] && tag) {
+									if (tag[0]) {
+										var tags = []
+										Object.keys(json.hashtags).forEach(function (key4) {
+											var tag = json.hashtags[key4]
+											var his = tag.history
+											var uses =
+												his[0].uses * 1 +
+												his[1].uses * 1 +
+												his[2].uses * 1 +
+												his[3].uses * 1 +
+												his[4].uses * 1 +
+												his[5].uses * 1 +
+												his[6].uses * 1
+											tagHTML = `<br><a onclick="tagInsert('#${escapeHTML(
+												tag.name
+											)}','${q}')" class="pointer">#${escapeHTML(tag.name)}</a>&nbsp;${uses}toot(s)`
 
-										var item = {
-											uses: uses,
-											html: tagHTML
-										}
-										tags.push(item)
-									})
-									var num_a = -1
-									var num_b = 1
-									tags = tags.sort(function(a, b) {
-										var x = a['uses']
-										var y = b['uses']
-										if (x > y) return num_a
-										if (x < y) return num_b
-										return 0
-									})
-									var ins = ''
-									var nev = false
-									Object.keys(tags).forEach(function(key7) {
-										ins = ins + tags[key7].html
-										if (key7 <= 0 && !nev) {
-											ins = ins + '<br>'
-											nev = true
-										}
-									})
-									$('#suggest').html(ins)
-									$('#right-side').show()
-									$('#right-side').css('width', '200px')
-									$('#left-side').css('width', 'calc(100% - 200px)')
-									var width = localStorage.getItem('postbox-width')
-									if (width) {
-										width = width.replace('px', '') * 1 + 200
-									} else {
-										width = 500
+											var item = {
+												uses: uses,
+												html: tagHTML
+											}
+											tags.push(item)
+										})
+										var num_a = -1
+										var num_b = 1
+										tags = tags.sort(function (a, b) {
+											var x = a['uses']
+											var y = b['uses']
+											if (x > y) return num_a
+											if (x < y) return num_b
+											return 0
+										})
+										var ins = ''
+										var nev = false
+										Object.keys(tags).forEach(function (key7) {
+											ins = ins + tags[key7].html
+											if (key7 <= 0 && !nev) {
+												//ins = ins + '<br>'
+												nev = true
+											}
+										})
+										$('#suggest').html(ins)
+										$('#suggest').show()
 									}
-									$('#post-box').css('width', width + 'px')
-									$('#poll').addClass('hide')
-									$('#emoji').addClass('hide')
-									$('#draft').addClass('hide')
-								}
-							} else if (json.accounts[0] && acct[1]) {
-								var accts = ''
-								Object.keys(json.accounts).forEach(function(key3) {
-									var acct = json.accounts[key3]
-									if (acct.acct != q) {
-										//Instance Actorって…
-										if (acct.username.indexOf('.') < 0) {
-											accts =
-												accts +
-												`<a onclick="tagInsert('@${acct.acct}','@${q}')" class="pointer">@${acct.acct}</a><br>`
+								} else if (json.accounts[0] && acct[0]) {
+									var accts = ''
+									Object.keys(json.accounts).forEach(function (key3) {
+										var acct = json.accounts[key3]
+										if (acct.acct != q) {
+											//Instance Actorって…
+											if (acct.username.indexOf('.') < 0) {
+												accts =
+													accts +
+													`<a onclick="tagInsert('@${acct.acct}','${q}')" class="pointer">@${acct.acct}</a><br>`
+											}
 										}
-									}
-								})
-								$('#right-side').show()
-								$('#right-side').css('width', '200px')
-								$('#left-side').css('width', 'calc(100% - 200px)')
-								var width = localStorage.getItem('postbox-width')
-								if (width) {
-									width = width.replace('px', '') * 1 + 200
+									})
+									$('#suggest').html(accts)
+									$('#suggest').show()
 								} else {
-									width = 500
+
 								}
-								$('#post-box').css('width', width + 'px')
-								$('#suggest').html(accts)
-								$('#poll').addClass('hide')
-								$('#emoji').addClass('hide')
-								$('#draft').addClass('hide')
-							} else {
-								if ($('#poll').hasClass('hide') && $('#emoji').hasClass('hide') && $('#draft').hasClass('hide')) {
-									$('#right-side').hide()
-									$('#right-side').css('width', '300px')
-									$('#left-side').css('width', '100%')
-									var width = localStorage.getItem('postbox-width')
-									if (width) {
-										width = width.replace('px', '') * 1
-									} else {
-										width = 300
-									}
-									$('#post-box').css('width', width + 'px')
-								}
-							}
-						})
+							})
+					}
 				}
 			}
 			oldSuggest = suggest
-			prev_value = new_val
+			prev_val = new_val
+
+			const rectTextarea = document.querySelector('#textarea')
+			const rect = rectTextarea.getBoundingClientRect()
+			const caret = getCaretCoordinates(rectTextarea, rectTextarea.selectionEnd)
+			$('#suggest').css('top', `calc(${caret.top}px + 1rem)`)
+			const left = rect.width / 2 < caret.left ? rect.width / 2 : caret.left
+			$('#suggest').css('left', left)
 		}, 1000)
 	},
 	false
@@ -193,15 +172,20 @@ input.addEventListener(
 
 input.addEventListener(
 	'blur',
-	function() {
+	function () {
 		window.clearInterval(timer)
 		favTag()
 	},
 	false
 )
-function tagInsert(code, del) {
-	var blankBefore = ' '
-	var blankAfter = ' '
+function tagInsert(code, del, emoji) {
+	if (localStorage.getItem('emoji-zero-width') == 'yes' && emoji) {
+		var blankBefore = '​'
+		var blankAfter = '​'
+	} else {
+		var blankBefore = ' '
+		var blankAfter = ' '
+	}
 	var textarea = document.querySelector('#textarea')
 	var sentence = textarea.value
 	var len = sentence.length
@@ -217,10 +201,10 @@ function tagInsert(code, del) {
 	var after = sentence.substr(pos, len)
 	var start = after.substr(0, 1)
 	if (start == ' ') blankAfter = ''
-	if (len == 0) {
-		var word = code
+	if (len === delLen) {
+		var word = code + blankAfter
 	} else if (len == pos) {
-		var word = blankBefore + code
+		var word = blankBefore + code + blankAfter
 	} else if (pos == 0) {
 		var word = code + blankAfter
 	} else {
@@ -228,17 +212,9 @@ function tagInsert(code, del) {
 	}
 	sentence = before + word + after
 	textarea.value = sentence
-	if ($('#poll').hasClass('hide') && $('#emoji').hasClass('hide') && $('#draft').hasClass('hide')) {
-		$('#right-side').hide()
-		$('#right-side').css('width', '300px')
-		$('#left-side').css('width', '50%')
-		var width = localStorage.getItem('postbox-width').replace('px', '') * 1
-		if (!width) {
-			width = 300
-		}
-		$('#post-box').css('width', width + 'px')
-	}
 	$('#suggest').html('')
+	$('#suggest').hide()
+	$('#textarea').focus()
 }
 function cgNPs(q) {
 	suggest = 'https://cg.toot.app/api/v1/search/light?q=' + q
@@ -250,23 +226,23 @@ function cgNPs(q) {
 				'content-type': 'application/json'
 			}
 		})
-			.then(function(response) {
+			.then(function (response) {
 				if (!response.ok) {
-					response.text().then(function(text) {
+					response.text().then(function (text) {
 						setLog(response.url, response.status, text)
 					})
 				}
 				return response.json()
 			})
-			.catch(function(error) {
+			.catch(function (error) {
 				todo(error)
 				setLog(start, 'JSON', error)
 				console.error(error)
 			})
-			.then(function(json) {
+			.then(function (json) {
 				if (json[0]) {
 					var tags = ''
-					Object.keys(json).forEach(function(key4) {
+					Object.keys(json).forEach(function (key4) {
 						var tag = json[key4]
 						tags =
 							tags +