Exposing setting the index page in the admin app and added a crude emoji picker, finally.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@3966 ed5197a5-7fde-0310-b194-c3ffbd925b24

apps/cory/ssb/emojis.js

@@ -0,0 +1,70 @@
+let g_emojis;
+
+function get_emojis() {
+	if (g_emojis) {
+		return Promise.resolve(g_emojis);
+	}
+	return fetch('emojis.json').then(function(result) {
+		g_emojis = result.json();
+		return g_emojis;
+	});
+}
+
+export function picker(callback, anchor) {
+	get_emojis().then(function(json) {
+		let existing = document.getElementById('emoji_picker');
+		if (existing) {
+			existing.parentElement.removeChild(existing);
+			return;
+		}
+		let div = document.createElement('div');
+		div.id = 'emoji_picker';
+		div.style.color = '#000';
+		div.style.background = '#fff';
+		div.style.border = '1px solid #000';
+		div.style.display = 'block';
+		div.style.position = 'absolute';
+		div.style.maxWidth = '16em';
+		div.style.maxHeight = '16em';
+		div.style.overflow = 'scroll';
+		div.style.fontWeight = 'bold';
+		div.style.cursor = 'pointer';
+		Object.entries(json).forEach(function(row) {
+			let header = document.createElement('div');
+			header.appendChild(document.createTextNode(row[0]));
+			div.appendChild(header);
+			for (let entry of row[1]) {
+				let emoji = document.createElement('span');
+				const k_size = '1.25em';
+				emoji.style.width = k_size;
+				emoji.style.maxWidth = k_size;
+				emoji.style.minWidth = k_size;
+				emoji.style.height = k_size;
+				emoji.style.maxHeight = k_size;
+				emoji.style.minHeight = k_size;
+				emoji.style.display = 'inline-block';
+				emoji.style.overflow = 'hidden';
+				emoji.onclick = function() {
+					callback(entry);
+					div.parentElement.removeChild(div);
+				}
+				emoji.appendChild(document.createTextNode(entry.emoji));
+				div.appendChild(emoji);
+			}
+		});
+		document.body.appendChild(div);
+		if (anchor) {
+			let rect = anchor.getBoundingClientRect();
+			if (rect.top < window.clientHeight / 2) {
+				div.style.top = rect.bottom + 'px';
+			} else {
+				div.style.top = (rect.top - div.clientHeight) + 'px';
+			}
+			if (rect.left < window.clientWidth / 2) {
+				div.style.left = rect.left + 'px';
+			} else {
+				div.style.left = (rect.left - div.clientWidth) + 'px';
+			}
+		}
+	});
+}

apps/cory/ssb/tf-message.js

@@ -1,5 +1,7 @@
+import * as tfrpc from '/static/tfrpc.js';
 import * as tfshared from './tf-shared.js';
 import * as tf from './tf.js';
+import * as emojis from './emojis.js';
 
 Vue.component('tf-message', {
 	props: ['message', 'messages', 'votes'],
@@ -46,24 +48,26 @@ Vue.component('tf-message', {
 			tf.g_data.reply_root = this.content_json.root || this.message.id;
 			tf.g_data.reply_branch = this.message.id;
 		},
-		vote: function(event) {
-			var reaction = event.srcElement.innerText;
+		vote: function(emoji) {
+			let reaction = emoji.emoji;
 			var message = this.message.id;
 			if (confirm('Are you sure you want to react with ' + reaction + ' to ' + message + '?')) {
-				window.parent.postMessage(
-					{
-						appendMessage: {
-							type: 'vote',
-							vote: {
-								link: message,
-								value: 1,
-								expression: reaction,
-							},
-						},
+				tfrpc.rpc.appendMessage({
+					type: 'vote',
+					vote: {
+						link: message,
+						value: 1,
+						expression: reaction,
 					},
-					'*');
+				}).catch(function(error) {
+					alert(error?.message);
+				});
 			}
 		},
+		show_emoji_picker: function(event) {
+			let self = this;
+			emojis.picker(x => self.vote(x), event.srcElement);
+		},
 		show_message: function() {
 			window.parent.postMessage({
 				action: 'setHash',
@@ -167,10 +171,7 @@ Vue.component('tf-message', {
 			<md-icon>reply</md-icon>
 		</md-button>
 		<md-menu>
-			<md-menu-content>
-				<md-menu-item @click="vote">Like</md-menu-item>
-			</md-menu-content>
-			<md-button class="md-icon-button" md-menu-trigger>
+			<md-button class="md-icon-button" @click="show_emoji_picker">
 				<md-icon>thumb_up</md-icon>
 			</md-button>
 		</md-menu>