From 47bc12b905100d7d51144c999cee4f92a1945e09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Mon, 4 Jan 2016 14:46:50 +0100
Subject: [PATCH 1/3] js: make it possible to dynamically show/hide widgets
 with radio buttons

Give the parent radio buttons data-dynamic-display-parent="true" and the
widgets that have to be shown/hidden a data-dynamic-display-child-of attribute
with the @name of the parent and a data-dynamic-display-value attribute with
the value that will show this element.

form.add(RadiobuttonsWidget, 'foo', ...,
         options=[('1', 'Foo1), ('2', 'Foo2')],
         attrs={'data-dynamic-display-parent': 'true'})
form.add(StringWidget, 'bar', ...,
         attrs={'data-dynamic-display-child-of': 'foo',
                'data-dynamic-display-value': 'Foo2'})
---
 wcs/qommon/form.py             | 3 +++
 wcs/qommon/static/js/qommon.js | 8 ++++++++
 2 files changed, 11 insertions(+)

diff --git a/wcs/qommon/form.py b/wcs/qommon/form.py
index 0af0776..acf53fc 100644
--- a/wcs/qommon/form.py
+++ b/wcs/qommon/form.py
@@ -124,6 +124,9 @@ def render(self):
             attributes['data-' + k] = v
     if hasattr(self, 'div_id') and self.div_id:
         attributes['id'] = self.div_id
+    for attr in ('data-dynamic-display-child-of', 'data-dynamic-display-value'):
+        if attr in self.attrs:
+            attributes[attr] = self.attrs.pop(attr)
     attributes['class'] = classnames
     r += htmltext('<div %s>' % ' '.join(['%s="%s"' % x for x in attributes.items()]))
     r += self.render_title(self.get_title())
diff --git a/wcs/qommon/static/js/qommon.js b/wcs/qommon/static/js/qommon.js
index 9403c7d..a8e2a4c 100644
--- a/wcs/qommon/static/js/qommon.js
+++ b/wcs/qommon/static/js/qommon.js
@@ -9,4 +9,12 @@ $(function() {
             error: function(error) { windows.console && console.log('bouh', error); }
            });
   });
+  $('[data-dynamic-display-parent]').change(function() {
+    var sel1 = '[data-dynamic-display-child-of="' + $(this).attr('name') + '"]';
+    var sel2 = '[data-dynamic-display-value="' + $(this).val() + '"]';
+    $(sel1).hide();
+    $(sel1 + sel2).show();
+  });
+  $('[data-dynamic-display-child-of]').hide();
+  $('[data-dynamic-display-parent]:checked').trigger('change');
 });
-- 
2.6.4