From: yomguy <yomguy@parisson.com>
Date: Fri, 14 Dec 2012 17:05:38 +0000 (+0100)
Subject: add counter on answer pages
X-Git-Tag: 0.9-probarreau~252
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=41c9dd9b5e8af7d92a14e577ec9bccfb4d4476ac;p=teleforma.git

add counter on answer pages
---

diff --git a/teleforma/static/teleforma/css/teleforma.css b/teleforma/static/teleforma/css/teleforma.css
index a7c9a656..5213cc2c 100644
--- a/teleforma/static/teleforma/css/teleforma.css
+++ b/teleforma/static/teleforma/css/teleforma.css
@@ -1731,4 +1731,24 @@ input,textarea{
 
 .errorlist li {
     font-size: 1.2em;
-}
\ No newline at end of file
+}
+
+form .deceed{
+        background-color: white; 
+        font-weight:bold;
+        padding: 0.3em;
+        margin-top: 0.8em;
+        float: right;
+        border: 1px solid #adadad;
+        color: #b00;
+    }
+
+form .exceed{
+        background-color: white; 
+        font-weight:bold;
+        padding: 0.3em;
+        margin-top: 0.8em;
+        float: right;
+        border: 1px solid #adadad;
+        color:#080;
+    }
diff --git a/teleforma/static/teleforma/js/charCount.js b/teleforma/static/teleforma/js/charCount.js
new file mode 100644
index 00000000..0afae0ec
--- /dev/null
+++ b/teleforma/static/teleforma/js/charCount.js
@@ -0,0 +1,56 @@
+/*
+ * 	Character Count Plugin - jQuery plugin
+ * 	Dynamic character count for text areas and input fields
+ *	written by Alen Grakalic	
+ *	http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas
+ *
+ *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
+ *	Dual licensed under the MIT (MIT-LICENSE.txt)
+ *	and GPL (GPL-LICENSE.txt) licenses.
+ *
+ *	Built for jQuery library
+ *	http://jquery.com
+ *
+ */
+ 
+(function($) {
+
+	$.fn.charCount = function(options){
+	  
+		// default configuration properties
+		var defaults = {	
+			necessary: 500,		
+			css: 'counter',
+			counterElement: 'span',
+			cssDeceed: 'deceed',
+			cssExceed: 'exceed',
+			counterText: ''
+		}; 
+			
+		var options = $.extend(defaults, options); 
+		
+		function calculate(obj){
+			var count = $(obj).val().length;
+			if(count >= options.necessary){
+				$(obj).next().removeClass(options.css);
+				$(obj).next().removeClass(options.cssDeceed);
+				$(obj).next().addClass(options.cssExceed);
+			} else {
+				$(obj).next().removeClass(options.css);
+				$(obj).next().removeClass(options.cssExceed);
+				$(obj).next().addClass(options.cssDeceed);
+			}
+			
+			$(obj).next().html(options.counterText + count + ' / ' + options.necessary);
+		};
+				
+		this.each(function() {  			
+			$(this).after('</span><'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
+			calculate(this);
+			$(this).keyup(function(){calculate(this)});
+			$(this).change(function(){calculate(this)});
+		});
+	  
+	};
+
+})(jQuery);
diff --git a/teleforma/templates/teleforma/answer_form.html b/teleforma/templates/teleforma/answer_form.html
index d3328d5b..74129759 100644
--- a/teleforma/templates/teleforma/answer_form.html
+++ b/teleforma/templates/teleforma/answer_form.html
@@ -3,6 +3,7 @@
 {% load i18n %}
 
 {% block extra_javascript %}
+<script src="{{ STATIC_URL }}teleforma/js/charCount.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){
   $('#id_answer').live("paste",function(e) {
@@ -10,6 +11,16 @@ $(document).ready(function(){
       new Messi(gettext('Sorry, it is not allowed to paste text here.'), {buttons: [{id: 0, label: gettext('Close'), val: 'X'}], modal: true});
   });
 });
+
+$(document).ready(function(){   
+        //default usage
+        $("#id_answer").charCount({
+                        necessary: {{question.min_nchar}},            
+                        counterText: gettext('Characters ')+' : ',
+                });
+});
+
+
 </script>
 {% endblock extra_javascript %}