Better rendering and javascript initialization (@andybak / #2)

MANIFEST.in

@@ -1,3 +1,4 @@
 include README.rst LICENSE
 recursive-include jsignature/static *.js
 recursive-include jsignature/locale *.mo
+recursive-include jsignature/templates *.html

jsignature/static/js/django_jsignature.js

@@ -1,15 +1,21 @@
 $(document).ready(function() {
+  $(".jsign-container").each(function(){
+    var config = $(this).data('config');
+    var value = $(this).data('initial-value');
+    $(this).jSignature(config);
+    $(this).jSignature("setData", value, "native");
+  });
 
   /* Each time user is done drawing a stroke, update value of hidden input */
-  $(document).delegate(".jsign-container", "change", function(e) {
+  $(".jsign-container").on("change", function(e) {
     var jSignature_data = $(this).jSignature('getData', 'native');
     var django_field_name = $(this).attr('id').split(/_(.+)/)[1];
     $('#id_' + django_field_name).val(JSON.stringify(jSignature_data));
   });
 
   /* Bind clear button */
-  $(document).delegate(".jsign-wrapper input", "click", function(e) {
+  $(".jsign-wrapper input").on("click", function(e) {
     $(this).siblings('.jsign-container').jSignature('reset');
   });
 
-})
+});

jsignature/templates/jsignature/widget.html

@@ -0,0 +1,8 @@
+<div class='jsign-wrapper'>
+  {{ hidden }}
+  <div id='{{ jsign_id }}'
+       data-config='{{ config }}'
+       data-initial-value='{{ value }}'
+       class='jsign-container'></div>
+  <input type='button' value='{{ reset_btn_text }}' class="btn">
+</div>

jsignature/tests/widgets.py

@@ -1,4 +1,6 @@
 import json
+from pyquery import PyQuery as pq
+
 from django.test import SimpleTestCase
 from django.core.exceptions import ValidationError
 
@@ -59,6 +61,5 @@ class JSignatureWidgetTest(SimpleTestCase):
         w = JSignatureWidget()
         output = w.render(name='foo', value=None)
         # Almost useless :/
-        self.assertIn('class="jsign-wrapper"', output)
+        self.assertEqual(1, len(pq('.jsign-wrapper', output)))
-        self.assertIn('type="hidden"', output)
+        self.assertEqual(1, len(pq('[type=hidden]', output)))
-        self.assertIn('type="text/javascript"', output)

jsignature/widgets.py

@@ -3,6 +3,8 @@
     with jSignature jQuery plugin
 """
 import json
+
+from django.template.loader import render_to_string
 from django.forms.widgets import HiddenInput
 from django.core import validators
 from django.core.exceptions import ValidationError
@@ -65,15 +67,13 @@ class JSignatureWidget(HiddenInput):
         value = self.prep_value(value)
 
         # Build output
-        hidden_input = super(JSignatureWidget, self).render(name, value, attrs)
+        context = {
-        div = u'<div id="%s" class="jsign-container"></div>' % jsign_id
+            'hidden': super(JSignatureWidget, self).render(name, value, attrs),
-        clr = u'<input type="button" value="%s" class="btn">' % _('Reset')
+            'jsign_id': jsign_id,
-        js = u'$("#%s").jSignature(%s);' % (
+            'reset_btn_text': _('Reset'),
-            jsign_id, json.dumps(jsignature_config))
+            'config': mark_safe(json.dumps(jsignature_config)),
-        js += u'$("#%s").jSignature("setData", %s,"native");' % (
+            'value': mark_safe(value),
-            jsign_id, value)
+        }
-        js = u'<script type="text/javascript">%s</script>' % js
+        out = render_to_string('jsignature/widget.html', context)
-        out = u'<div class="jsign-wrapper">%s%s%s%s</div>' % (
-            hidden_input, div, clr, js)
 
         return mark_safe(out)

requirements.txt

@@ -1,2 +1,3 @@
 south
 pillow
+pyquery

setup.py

@@ -5,7 +5,7 @@ here = os.path.abspath(os.path.dirname(__file__))
 
 setup(
     name='django-jsignature',
-    version='0.7.5.dev0',
+    version='0.7.6',
     author='Florent Lebreton',
     author_email='florent.lebreton@makina-corpus.com',
     url='https://github.com/makinacorpus/django-jsignature',
@@ -17,7 +17,8 @@ setup(
     packages=find_packages(),
     include_package_data=True,
     zip_safe=False,
-    classifiers  = ['Topic :: Utilities',
+    classifiers=[
+        'Topic :: Utilities',
         'Natural Language :: English',
         'Operating System :: OS Independent',
         'Intended Audience :: Developers',