stage 2: text field counter

diff --git a/edumed/settings/static.py b/edumed/settings/static.py
index 19a69ca..743d593 100644 (file)
--- a/edumed/settings/static.py
+++ b/edumed/settings/static.py
@@ -42,6 +42,7 @@ PIPELINE_JS = {
             'js/formset.js',
             'fnpdjango/annoy/annoy.js',
             'js/checkfile.js',
             'js/formset.js',
             'fnpdjango/annoy/annoy.js',
             'js/checkfile.js',

+            'js/checktext.js',

         ),
         'output_filename': 'compressed/base.js',
     },
         ),
         'output_filename': 'compressed/base.js',
     },

diff --git a/edumed/static/css/form.css b/edumed/static/css/form.css
index ac11db0..f08e003 100644 (file)
--- a/edumed/static/css/form.css
+++ b/edumed/static/css/form.css
@@ -16,3 +16,9 @@
   padding: 0 0 0 1em;
   margin: 0;
   color: red; }
   padding: 0 0 0 1em;
   margin: 0;
   color: red; }

+.submit-form .counter {
+  font-size: small; }
+.submit-form .negative {
+  color: red; }
+
+/*# sourceMappingURL=form.css.map */

diff --git a/edumed/static/css/form.scss b/edumed/static/css/form.scss
index 8ef87de..8860cf8 100755 (executable)
--- a/edumed/static/css/form.scss
+++ b/edumed/static/css/form.scss
@@ -22,4 +22,10 @@
         margin: 0;
         color: red;
     }
         margin: 0;
         color: red;
     }

+    .counter {
+        font-size: small;
+    }
+    .negative {
+        color: red;
+    }

 }
 }

diff --git a/stage2/forms.py b/stage2/forms.py
index 09beefe..8317504 100644 (file)
--- a/stage2/forms.py
+++ b/stage2/forms.py
@@ -56,11 +56,12 @@ class AssignmentFieldForm(forms.Form):
         self.type = options['type']
         self.fields['assignment_id'].initial = answer.assignment.id
         max_length = options.get('max_length')
         self.type = options['type']
         self.fields['assignment_id'].initial = answer.assignment.id
         max_length = options.get('max_length')

+        if options.get('widget') == 'area':
+            self.fields['value'].widget = forms.Textarea(attrs={'cols': 80, 'rows': 25})

         if max_length:
             self.fields['value'].validators.append(validators.MaxLengthValidator(int(max_length)))
             self.fields['value'].label += u' (maks. %s znaków)' % max_length
         if max_length:
             self.fields['value'].validators.append(validators.MaxLengthValidator(int(max_length)))
             self.fields['value'].label += u' (maks. %s znaków)' % max_length

-        if options.get('widget') == 'area':
-            self.fields['value'].widget = forms.Textarea(attrs={'cols': 80, 'rows': 25})
+            self.fields['value'].widget.attrs['data-max-length'] = max_length

         if self.type == 'options':
             option_set = FieldOptionSet.objects.get(name=options['option_set'])
             self.fields['value'].widget = forms.Select(choices=option_set.choices(answer))
         if self.type == 'options':
             option_set = FieldOptionSet.objects.get(name=options['option_set'])
             self.fields['value'].widget = forms.Select(choices=option_set.choices(answer))

diff --git a/stage2/static/js/checktext.js b/stage2/static/js/checktext.js
new file mode 100644 (file)
index 0000000..d589f15
--- /dev/null
+++ b/stage2/static/js/checktext.js
@@ -0,0 +1,14 @@
+$(function() {
+    "use strict";
+    var textarea = $("*[data-max-length]");
+    textarea.before('<p class="counter">Pozostało: <span id="count"></span></p>');
+    function updateCount(){
+        var max_chars = this.getAttribute('data-max-length');
+        var $this = $(this);
+        var remaining = max_chars - $this.val().length;
+        $("#count").text(remaining);
+        $this.prev().toggleClass('negative', remaining < 0);
+    }
+    textarea.on('input', updateCount);
+    textarea.trigger('input');
+});

diff --git a/stage2/templates/stage2/participant.html b/stage2/templates/stage2/participant.html
index a2a1bc2..49ac2af 100644 (file)
--- a/stage2/templates/stage2/participant.html
+++ b/stage2/templates/stage2/participant.html
@@ -14,7 +14,7 @@
       <h2>{{ assignment.title }} (do {{ assignment.deadline }})</h2>
     {% endif %}
     <a href="{{ assignment.content_url }}"><strong>Zobacz treść zadania</strong></a>
       <h2>{{ assignment.title }} (do {{ assignment.deadline }})</h2>
     {% endif %}
     <a href="{{ assignment.content_url }}"><strong>Zobacz treść zadania</strong></a>

-    <form method="POST" action="" enctype="multipart/form-data">
+    <form method="POST" action="" enctype="multipart/form-data" class="submit-form">

       {% csrf_token %}
       {% for form, attachment in assignment.attachment_forms %}
         {{ form.assignment_id }}
       {% csrf_token %}
       {% for form, attachment in assignment.attachment_forms %}
         {{ form.assignment_id }}