Create flag preview

js/flag-preview.js

@@ -0,0 +1,45 @@
+/*
+ * flag-preview.js - Add preview of user flag.
+ *
+ * Usage:
+ *   $config['additional_javascript'][] = 'js/jquery.min.js';
+ *   $config['additional_javascript'][] = 'js/flag-preview.js';
+ *   $config['flag_preview'] = true;
+ */
+
+function getFlagUrl(value){
+	// No flag or None flag
+	if(!value || value == "") {
+		return "/static/blank.gif"
+	} else {
+		return "/static/flags/"+value+".png"
+	}
+}
+
+function updatePreviewWithSelected(img, select) {
+	img.attr("src", getFlagUrl(select.find(":selected").val()));
+}
+
+$(document).ready(function(){
+	var flagImg = $('#flag_preview');
+	var flagSelect = $('#user_flag');
+	updatePreviewWithSelected(flagImg,flagSelect);
+
+	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"]')
+	updatePreviewWithSelected(quickReplyFlagImg,$('form#quick-reply select[name="user_flag"]'));
+	$('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

@@ -118,12 +118,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;margin:0px 3px;{{ config.flag_style }}">
+					{% endif %}
 				</td>
 			</tr>
 		{% endif %}