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

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.assertIn('type="hidden"', output)
-        self.assertIn('type="text/javascript"', output)
+        self.assertEqual(1, len(pq('.jsign-wrapper', output)))
+        self.assertEqual(1, len(pq('[type=hidden]', 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)
-        div = u'<div id="%s" class="jsign-container"></div>' % jsign_id
-        clr = u'<input type="button" value="%s" class="btn">' % _('Reset')
-        js = u'$("#%s").jSignature(%s);' % (
-            jsign_id, json.dumps(jsignature_config))
-        js += u'$("#%s").jSignature("setData", %s,"native");' % (
-            jsign_id, value)
-        js = u'<script type="text/javascript">%s</script>' % js
-        out = u'<div class="jsign-wrapper">%s%s%s%s</div>' % (
-            hidden_input, div, clr, js)
+        context = {
+            'hidden': super(JSignatureWidget, self).render(name, value, attrs),
+            'jsign_id': jsign_id,
+            'reset_btn_text': _('Reset'),
+            'config': mark_safe(json.dumps(jsignature_config)),
+            'value': mark_safe(value),
+        }
+        out = render_to_string('jsignature/widget.html', context)
 
         return mark_safe(out)