Implement the poll feature

Closes #164

4 files changed, 107 insertions, 36 deletions

diff --git a/src/web/app/mobile/tags/notification-preview.tag b/src/web/app/mobile/tags/notification-preview.tag
index aaae1d483b..131866d1d7 100644
--- a/src/web/app/mobile/tags/notification-preview.tag
+++ b/src/web/app/mobile/tags/notification-preview.tag
@@ -1,48 +1,52 @@
 <mk-notification-preview class={ notification.type }>
-	<div class="main" if={ notification.type == 'like' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	<virtual if={ notification.type == 'like' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-thumbs-o-up"></i>{ notification.user.name }</p>
 			<p class="post-ref">{ getPostSummary(notification.post) }</p>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'repost' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<virtual if={ notification.type == 'repost' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-retweet"></i>{ notification.post.user.name }</p>
 			<p class="post-ref">{ getPostSummary(notification.post.repost) }</p>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'quote' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<virtual if={ notification.type == 'quote' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-quote-left"></i>{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'follow' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<virtual if={ notification.type == 'follow' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-user-plus"></i>{ notification.user.name }</p>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'reply' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<virtual if={ notification.type == 'reply' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-reply"></i>{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'mention' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+	</virtual>
+	<virtual if={ notification.type == 'mention' }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
 		<div class="text">
 			<p><i class="fa fa-at"></i>{ notification.post.user.name }</p>
 			<p class="post-preview">{ getPostSummary(notification.post) }</p>
 		</div>
-	</div>
+	</virtual>
+	<virtual if={ notification.type == 'poll_vote' }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		<div class="text">
+			<p><i class="fa fa-pie-chart"></i>{ notification.user.name }</p>
+			<p class="post-ref">{ getPostSummary(notification.post) }</p>
+		</div>
+	</virtual>
 	<style type="stylus">
 		:scope
 			display block
 			margin 0
 			padding 8px
 			color #fff
-
-			> .main
-				overflow-wrap break-word
+			overflow-wrap break-word
 
 			&:after
 				content ""
diff --git a/src/web/app/mobile/tags/notification.tag b/src/web/app/mobile/tags/notification.tag
index 583e74b727..ccd4d1dc9d 100644
--- a/src/web/app/mobile/tags/notification.tag
+++ b/src/web/app/mobile/tags/notification.tag
@@ -1,40 +1,94 @@
 <mk-notification class={ notification.type }>
 	<mk-time time={ notification.created_at }></mk-time>
-	<div class="main" if={ notification.type == 'like' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	<virtual if={ notification.type == 'like' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username }>
+			<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-thumbs-o-up"></i><a href={ CONFIG.url + '/' + notification.user.username }>{ notification.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+			<p>
+				<i class="fa fa-thumbs-o-up"></i>
+				<a href={ CONFIG.url + '/' + notification.user.username }>{ notification.user.name }</a>
+			</p>
+			<a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'repost' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'repost' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }>
+			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-retweet"></i><a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
+			<p>
+				<i class="fa fa-retweet"></i>
+				<a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a>
+			</p>
+			<a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'quote' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'quote' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }>
+			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-quote-left"></i><a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+			<p>
+				<i class="fa fa-quote-left"></i>
+				<a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a>
+			</p>
+			<a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'follow' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'follow' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username }>
+			<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-user-plus"></i><a href={ CONFIG.url + '/' + notification.user.username }>{ notification.user.name }</a></p>
+			<p>
+				<i class="fa fa-user-plus"></i>
+				<a href={ CONFIG.url + '/' + notification.user.username }>{ notification.user.name }</a>
+			</p>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'reply' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'reply' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }>
+			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-reply"></i><a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+			<p>
+				<i class="fa fa-reply"></i>
+				<a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a>
+			</p>
+			<a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 		</div>
-	</div>
-	<div class="main" if={ notification.type == 'mention' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/></a>
+	</virtual>
+	<virtual if={ notification.type == 'mention' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username }>
+			<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
 		<div class="text">
-			<p><i class="fa fa-at"></i><a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+			<p>
+				<i class="fa fa-at"></i>
+				<a href={ CONFIG.url + '/' + notification.post.user.username }>{ notification.post.user.name }</a>
+			</p>
+			<a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
 		</div>
-	</div>
+	</virtual>
+	<virtual if={ notification.type == 'poll_vote' }>
+		<a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username }>
+			<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
+		</a>
+		<div class="text">
+			<p>
+				<i class="fa fa-pie-shart"></i>
+				<a href={ CONFIG.url + '/' + notification.user.username }>{ notification.user.name }</a>
+			</p>
+			<a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
+		</div>
+	</virtual>
 	<style type="stylus">
 		:scope
 			display block
 			margin 0
 			padding 16px
+			overflow-wrap break-word
 
 			> mk-time
 				display inline
@@ -45,9 +99,6 @@
 				color rgba(0, 0, 0, 0.6)
 				font-size 12px
 
-			> .main
-				overflow-wrap break-word
-
 			&:after
 				content ""
 				display block
diff --git a/src/web/app/mobile/tags/post-form.tag b/src/web/app/mobile/tags/post-form.tag
index 900f742e85..cfed7c1a8d 100644
--- a/src/web/app/mobile/tags/post-form.tag
+++ b/src/web/app/mobile/tags/post-form.tag
@@ -19,9 +19,11 @@
 			</ul>
 		</div>
 		<mk-uploader ref="uploader"></mk-uploader>
+		<div ref="pollZone"></div>
 		<button ref="upload" onclick={ selectFile }><i class="fa fa-upload"></i></button>
 		<button ref="drive" onclick={ selectFileFromDrive }><i class="fa fa-cloud"></i></button>
 		<button class="cat" onclick={ cat }><i class="fa fa-smile-o"></i></button>
+		<button class="poll" onclick={ addPoll }><i class="fa fa-pie-chart"></i></button>
 		<input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/>
 	</div>
 	<style type="stylus">
@@ -163,6 +165,7 @@
 				> [ref='upload']
 				> [ref='drive']
 				.cat
+				.poll
 					display inline-block
 					padding 0
 					margin 0
@@ -185,6 +188,7 @@
 		@wait = false
 		@uploadings = []
 		@files = []
+		@poll = null
 
 		@on \mount ~>
 			@refs.uploader.on \uploaded (file) ~>
@@ -241,6 +245,13 @@
 			@trigger \change-files @files
 			@update!
 
+		@add-poll = ~>
+			if @poll?
+				@poll.unmount!
+				@poll = null
+				return
+			@poll = riot.mount(@refs.pollZone.append-child document.create-element \mk-poll-editor).0
+
 		@post = ~>
 			@wait = true
 
@@ -252,6 +263,7 @@
 				text: @refs.text.value
 				media_ids: files
 				reply_to_id: if @opts.reply? then @opts.reply.id else undefined
+				poll: if @poll? then @poll.get! else undefined
 			.then (data) ~>
 				@trigger \post
 				@unmount!
diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag
index d4696e6037..ff4007f0c9 100644
--- a/src/web/app/mobile/tags/timeline-post.tag
+++ b/src/web/app/mobile/tags/timeline-post.tag
@@ -27,6 +27,7 @@
 				<div class="media" if={ p.media }>
 					<mk-images-viewer images={ p.media }></mk-images-viewer>
 				</div>
+				<mk-poll if={ p.poll } post={ p }></mk-poll>
 				<span class="app" if={ p.app }>via <b>{ p.app.name }</b></span>
 				<div class="repost" if={ p.repost }><i class="fa fa-quote-right fa-flip-horizontal"></i>
 					<mk-post-preview class="repost" post={ p.repost }></mk-post-preview>
@@ -242,6 +243,9 @@
 							font-size 12px
 							color #ccc
 
+						> mk-poll
+							font-size 80%
+
 						> .repost
 							margin 8px 0