From c54a15e6d6fa2d4d79ae4ddc2d6c07c7bcecf5e1 Mon Sep 17 00:00:00 2001
From: discomrade <nice@try.fbi>
Date: Mon, 31 May 2021 17:30:44 -0200
Subject: [PATCH] Create flag preview

---
 inc/instance-config.php  |  3 +++
 js/flag-preview.js       | 53 ++++++++++++++++++++++++++++++++++++++++
 templates/post_form.html |  5 +++-
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 js/flag-preview.js

diff --git a/inc/instance-config.php b/inc/instance-config.php
index 297b5100..cfb6df8f 100644
--- a/inc/instance-config.php
+++ b/inc/instance-config.php
@@ -353,6 +353,7 @@ $config['additional_javascript'][] = 'js/auto-scroll.js';
 $config['additional_javascript'][] = 'js/thread-stats.js';
 $config['additional_javascript'][] = 'js/post-hover.js';
 $config['additional_javascript'][] = 'js/style-select.js';
+$config['additional_javascript'][] = 'js/flag-preview.js';
 
 $config['additional_javascript'][] = 'js/hide-threads.js';
 $config['additional_javascript'][] = 'js/hide-images.js';
@@ -377,6 +378,8 @@ $config['additional_javascript'][] = 'js/webm-settings.js';
 $config['additional_javascript'][] = 'js/expand-video.js';
 $config['additional_javascript'][] = 'js/download-original.js';
 
+$config['flag_preview'] = true;
+
 $config['enable_embedding'] = true;
 
 $config['youtube_js_html']
diff --git a/js/flag-preview.js b/js/flag-preview.js
new file mode 100644
index 00000000..c7a6b986
--- /dev/null
+++ b/js/flag-preview.js
@@ -0,0 +1,53 @@
+/*
+ * flag-preview.js - Add preview of user flag.
+ *
+ * Usage:
+ *   $config['additional_javascript'][] = 'js/jquery.min.js';
+ *   $config['additional_javascript'][] = 'js/flag-preview.js';
+ *   
+ */
+
+function getFlagUrl(value){
+	// No flag or None flag
+	if(!value || value == "") {
+		return ""
+	} else {
+		return "/static/flags/"+value+".png"
+	}
+}
+
+// Attempt to load flag (see js/save-user_flag.js)
+function loadFlag () {
+	var flagStorage = "flag_" + document.getElementsByName('board')[0].value;
+	return window.localStorage.getItem(flagStorage);
+}
+
+function updatePreviewWithSelected(img, select) {
+	img.attr("src", getFlagUrl(select.find(":selected").val()));
+}
+
+onready(function(){
+	var flagImg = $('#flag_preview');
+	var flagSelect = $('#user_flag');
+	var loaded = loadFlag();
+	flagImg.attr("src", getFlagUrl(loaded));
+
+	flagSelect.change(function() {
+		flagImg.attr("src", getFlagUrl($(this).find(":selected").val()));
+	});
+});
+
+$(window).on('quick-reply', function() {
+	var flagImg = $('#flag_preview');
+	var quickReplyFlagImg = $('form#quick-reply img[name="flag_preview"]')
+	var loaded = loadFlag();
+	quickReplyFlagImg.attr("src", getFlagUrl(loaded));
+	$('form#quick-reply select[name="user_flag"]').change(function() {
+		updatePreviewWithSelected(quickReplyFlagImg,$(this));
+		updatePreviewWithSelected(flagImg,$(this));
+	});
+	$('#user_flag').change(function() {
+		updatePreviewWithSelected(quickReplyFlagImg,$(this));
+		updatePreviewWithSelected(flagImg,$(this));
+	});
+});
diff --git a/templates/post_form.html b/templates/post_form.html
index e8c14485..09e6238d 100644
--- a/templates/post_form.html
+++ b/templates/post_form.html
@@ -111,12 +111,15 @@
 			<tr>
 				<th>{% trans %}Flag{% endtrans %}</th>
 				<td>
-					<select name="user_flag" id="user_flag">
+					<select name="user_flag" id="user_flag" style="float:left">
 						<option value="">{% trans %}None{% endtrans %}</option>
 						{% for flag, text in config.user_flags %}
 							<option value="{{ flag }}">{{ text }}</option>
 						{% endfor %}
 					</select>
+					{% if config.flag_preview %}
+					<img name="flag_preview" id="flag_preview" style="vertical-align:middle;">
+					{% endif %}
 				</td>
 			</tr>
 		{% endif %}