mavo-chat/index.html at main · DmitrySharabin/mavo-chat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="author" content="Dmitry Sharabin" />
	<meta name="keywords" content="HTML,CSS,Mavo" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- Mavo -->
	<link rel="stylesheet prefetch" href="https://get.mavo.io/mavo.min.css" />
	<script src="https://get.mavo.io/mavo.min.js"></script>

	<link rel="stylesheet prefetch" href="style.css" />
	<link rel="icon"
		href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">💬</text></svg>' />

	<title>Mavo Chat</title>
</head>

<body>
	<main mv-app="chat" mv-bar="no-status no-save no-login" mv-mode="read" mv-plugins="firebase-firestore@0.3 markdown"
		mv-storage="firebase://mavo-demos/chat-rooms/[current_room]" mv-storage-key="AIzaSyDvZ3EBuhlvFm529vMPeU7dbqvdkjv9WQU"
		mv-storage-providers="twitter facebook google github" mv-storage-options="realtime">

		<div class="mv-bar" hidden>
			<h1>
				<span>Mavo Chat</span>
				<label><input type="checkbox" property="menu" mv-storage="none" /><span>[current_room]</span></label>
				<div id="backdrop" mv-action="set(menu, false)" class="[if(menu, visible)]"></div>
			</h1>
			<p>Log in using your account</p>
			<button class="mv-firebase-auth-google">Log in with Google</button>
			<button class="mv-firebase-auth-facebook">Log in with Facebook</button>
			<button class="mv-firebase-auth-twitter">Log in with Twitter</button>
			<button class="mv-firebase-auth-github">Log in with GitHub</button>
			<button class="mv-logout" aria-label="Log out" title="Log out"><img src="images/exit.svg" width="32" height="32" aria-hidden="true" /></button>
		</div>

		<!-- Logged-in user -->
		<meta property="user_id" content="[$user.info.uid]" mv-if="false" />
		<meta property="username" content="[$user.name or $user.info.email]" mv-if="false" />
		<meta property="avatar" content="[$user.avatar]" mv-if="false" />

		<meta property="current_room" mv-default="[first(room).name or 'General']" mv-storage="none" mv-if="false" />
		<meta property="adding" content="[false]" mv-storage="none" mv-if="false" />

		<section id="no-messages" mv-if="user_id and count(messages) = 0" hidden>
			<p>No messages yet.<br />Be the first to send one. 😉</p>
		</section>

		<aside id="rooms" mv-if="user_id" class="[if(menu, visible)]" hidden>
			<h2>Rooms <button aria-label="Add room" title="Add room" mv-action="set(adding, true)" disabled="[adding]">✚</button></h2>

			<ul mv-list mv-value="all_rooms.rooms">
				<li mv-list-item="room" class="[if(current_room = $item.name, active)]" mv-group>
					<button title="[name] room"
						mv-action="if(current_room != $item.name, clear(messages) & set(current_room, $item.name)) setif(menu, menu, false)">
						[name]
					</button>
				</li>
			</ul>

			<meta property="new_room" content="[group(name: name, creator: user_id, created: $now)]" mv-if="false" />
			<form mv-action="if(name.trim() != '', add(new_room, all_rooms.rooms) & clear(messages) & set(current_room, name) & save('all_rooms') & set(adding, false) & set(name, ''))" mv-if="adding">
				<input type="text" property="name" mv-storage="none" placeholder="Type a room name" />
				<input type="submit" value="Add" disabled="[(name or '').trim() = '']" />
				<input type="reset" value="Cancel" mv-action="set(name, '') & set(adding, false)" />
			</form>
		</aside>

		<section mv-list="messages" mv-initial-items="0" mv-if="user_id and count($this) > 0" hidden>
			<article mv-list-item mv-mode="[mode or read]"
				class="mv-logged-in [if(sender.uid = user_id, 'mine')] [if(deleted, 'deleted')] [if(sender.uid = $next.sender.uid and $next.timestamp - timestamp <= hour(), 'thread')]">

				<meta property="mode" mv-storage="none" mv-if="false" />
				<meta property="deleted" datatype="boolean" mv-if="false" />
				<meta property="deleted_message" mv-if="false" />

				<figure property="sender">
					<img property="avatar" alt="Avatar" width="28" loading="lazy" mv-if="sender.uid != $next.sender.uid or $next.timestamp - timestamp > hour()" />
					<figcaption property="name" mv-if="sender.uid != $previous.sender.uid or timestamp - $previous.timestamp > hour()">Anonymous</figcaption>
				</figure>

				<p property="message" class="markdown"></p>

				<p class="timestamp" mv-if="$index = 0 or timestamp - $previous.timestamp > hour()">
					[month(timestamp, "shortname")]&nbsp;[day(timestamp)],
					<span mv-if="year(timestamp) != year($today)">[year(timestamp)],</span>
					[time(timestamp, "minutes")]
				</p>

				<div class="action-buttons" mv-if="sender.uid = user_id">
					<button class="action-button" mv-if="!deleted and (!mode or mode = read)" mv-action="set(mode, edit)"
						title="Edit message" aria-label="Edit message">✏️</button>
					<button class="action-button" mv-if="mode = edit" mv-action="set(mode, read) save('chat', true)"
						title="Save changes" aria-label="Save changes">💾</button>
					<button class="action-button" mv-if="mode = edit" mv-action="set(mode, read)"
						title="Don't save changes" aria-label="Don't save changes">🔙</button>

					<button class="action-button" mv-if="deleted and deleted_message" mv-action="set(message, deleted_message) set(deleted_message, '') set(deleted, false) save('chat')"
						title="Restore message" aria-label="Restore message">↩︎</button>
					<button class="mv-delete" mv-if="!deleted" mv-action="set(deleted_message, message) set(message, '') set(deleted, true) save('chat')"
						title="Delete message" aria-label="Delete message">❌</button>
				</div>
			</article>
		</section>

		<form hidden mv-if="user_id" mv-action="if(message.trim() != '',
				add(group(message: message, sender: group(uid: user_id, name: username, avatar: avatar), timestamp: $now), messages) &
				set(message, '') &
				save('chat')
			)
		">
			<input property="message" mv-storage="none" placeholder="Type a message" autofocus />
			<button type="submit" aria-label="Send message" title="Send message" disabled="[(message or '').trim() = '']"><img src="images/send.svg" width="48" height="48" aria-hidden="true" /></button>
		</form>
	</main>

	<div hidden mv-app="all_rooms" mv-bar="none"
		mv-plugins="firebase-firestore@0.3" mv-storage="firebase://mavo-demos/chat-rooms/all-rooms"
		mv-storage-key="AIzaSyDvZ3EBuhlvFm529vMPeU7dbqvdkjv9WQU" mv-storage-options="auth realtime">
		<ul mv-list="rooms" mv-initial-items="0" mv-if="false">
			<li mv-list-item></li>
		</ul>
	</div>

	<script>
		(async () => {
			await Mavo.ready;

			Mavo.DOMExpression.special.event("$user", {
				type: "mv-login mv-logout",
				update: (evt) => evt.backend?.user ?? {}
			});
		})();

		$.bind(document, "mv-load mv-save", () => {
			requestAnimationFrame(() => { // Give the browser a chance to render
				$("[mv-app=chat][mv-permissions~=logout] article[property=messages]:last-of-type")?.scrollIntoView(false);
			});
		});

		function save (name, editing = false) {
			const app = Mavo.all[name];

			if (editing && !app.unsavedChanges) {
				return;
			}

			app.save();
		}
	</script>
</body>

</html>