add counter on answer pages

diff --git a/teleforma/static/teleforma/css/teleforma.css b/teleforma/static/teleforma/css/teleforma.css
index a7c9a656b28ad9047fe2ccf1310cb2c9572dc1b5..5213cc2c9af6c437f3eb0ef8e60e32bd00081891 100644 (file)
--- 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 (file)
index 0000000..0afae0e
--- /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 d3328d5baecbacd3c3dbaa7afe019ac08b1ce9b1..74129759644cac1689182e341361ba97210dbacf 100644 (file)
--- 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 %}