Create flag preview

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']

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));
+	});
+});

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 %}