Vier: The emoji picker is now integrated

view/templates/head.tpl

@@ -1,4 +1,3 @@
-
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <base href="{{$baseurl}}/" />
 <meta name="generator" content="{{$generator}}" />
@@ -47,14 +46,26 @@
 <script type="text/javascript" src="view/asset/dompurify/dist/purify.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
 <script type="text/javascript" src="view/js/fancybox/jquery.fancybox.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
 <script type="text/javascript" src="view/js/fancybox/fancybox.config.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
+<script type="text/javascript" src="view/js/vanillaEmojiPicker/vanillaEmojiPicker.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
+<script>
+window.onload = function(){
+	new EmojiPicker({
+		trigger: [
+			{
+				selector: '.emojis',
+				insertInto: ['#comment-edit-text-0', '#profile-jot-text', '.comment-edit-text-full']
+			}
+		],
+		closeButton: true
+	});
+};
+</script>
 <script type="text/javascript">
 	const updateInterval = {{$update_interval}};
 	const localUser = {{if $local_user}}{{$local_user}}{{else}}false{{/if}};
 </script>
 <script type="text/javascript" src="view/js/main.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
-
 <script>
-
 	// Lifted from https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
     jQuery.fn.putCursorAtEnd = function() {
         return this.each(function() {
@@ -118,7 +129,6 @@
 		return false;
 	}
 
-
 	function commentInsert(obj,id) {
 		var tmpStr = $("#comment-edit-text-" + id).val();
 		if (tmpStr == "") {
@@ -141,8 +151,4 @@
 			$("#comment-edit-form-" + id).show();
 		}
 	}
-
-
 </script>
-
-

view/templates/jot.tpl

@@ -51,7 +51,9 @@
 	<div id="profile-nolocation-wrapper" style="display: none;">
 		<a id="profile-nolocation" class="icon noglobe" title="{{$noloc}}" onclick="jotClearLocation();return false;"></a>
 	</div>
-
+	<div id="profile-emojis-wrapper" style="display: {{$visitor}};">
+		<a id="profile-emojis" class="icon icon-smile emojis" title="{{$edemojis}}"></a>
+	</div>
 	<div id="post-length">
 		<span id="character-counter" class="grey"></span>
 	</div>
@@ -83,11 +85,8 @@
 			{{if $created_at}}{{$created_at nofilter}}{{/if}}
 		</div>
 	</div>
-
-
 </div>
-
 <div id="profile-jot-end"></div>
 </form>
 </div>
-		{{if $content}}<script>initEditor();</script>{{/if}}
+{{if $content}}<script>initEditor();</script>{{/if}}

view/theme/vier/style.css

@@ -2079,6 +2079,11 @@ profile-jot-form #jot-title, #profile-jot-form #jot-category {
 	margin-left: 15px;
 	cursor: pointer;
 }
+#profile-emojis-wrapper {
+	float: left;
+	margin-left: 15px;
+	cursor: pointer;
+}
 #jot-perms-icon {
 	float: right;
 	margin-left: 15px;

view/theme/vier/templates/comment_item.tpl

@@ -1,4 +1,3 @@
-
 		{{if $threaded}}
 		<div class="comment-wwedit-wrapper threaded" id="comment-edit-wrapper-{{$id}}" style="display: block;">
 		{{else}}
@@ -37,7 +36,7 @@
 	                                <a title="{{$editalic}}" data-role="insert-formatting" data-bbcode="i" data-id="{{$id}}"><i class="icon-italic"></i></a>
 	                                <a title="{{$edbold}}" data-role="insert-formatting" data-bbcode="b" data-id="{{$id}}"><i class="icon-bold"></i></a>
 	                                <a title="{{$edquote}}" data-role="insert-formatting" data-bbcode="quote" data-id="{{$id}}"><i class="icon-quote-left"></i></a>
-
+									<a title="{{$edemojis}}" class="emojis"><i class="icon-smile"></i></a>
                                 </div>
 					<input type="submit" onclick="post_comment({{$id}}); return false;" id="comment-edit-submit-{{$id}}" class="comment-edit-submit" name="submit" value="{{$submit}}" />
 					{{if $preview}}<input type="submit" onclick="preview_comment({{$id}}); return false;" id="comment-edit-preview-link-{{$id}}" class="comment-edit-submit" value="{{$preview}}" />{{/if}}
@@ -47,5 +46,4 @@
 
 				<div class="comment-edit-end"></div>
 			</form>
-
 		</div>