govuk_admin_template 3.0.0 → 3.1.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 3290dcb3c4305589bc1c58cf66e2eba100d5a092
4
- data.tar.gz: 4102a8868686431ef9a53fc13fd6b8b5d2878530
3
+ metadata.gz: 96a5e45ab438f9e6eee4c86884c84a7b449df090
4
+ data.tar.gz: ae33d5878f7ec702adc4170fdd04c0a47e1d240a
5
5
  SHA512:
6
- metadata.gz: 11a0e0471fd61a058f13f468ec518b815ee0be393875df49162ed0dad0bf1b7212d5b9632fb9fe7339db270e7d70763482cbb54fd15964fef21749f7dc9c84f0
7
- data.tar.gz: 5bafe441f5afabe2ad8476b7d642ba3782af6025a4d1c63890a08ea4600c61f473d79092f49b350ee7d18937b2ef40e60df5f5bfc7ba7dbda70bd7e060f720b6
6
+ metadata.gz: 2b766cd043d3bd14c68b96e863945823ad335eac46b25a7953d1036833f7313bd7b6f4c6ef5cf85c3fd0e0fbf2f8eb8c9f4b6cc0ba30063c1eab1173a713e227
7
+ data.tar.gz: c7f053bac1055df5c03fa574db8018da0fb7fd2cba94364800b09221071633d85ed2951372505307f32d14c72042329f374217c2613d5eccc636f00330ce189f
data/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ # 3.1.0
2
+
3
+ * Add checkbox and radio form toggles: https://github.com/alphagov/govuk_admin_template/pull/90
4
+
1
5
  # 3.0.0
2
6
 
3
7
  * Use GOVUK_APP_DOMAIN environment variable to set Google Analytics domain
@@ -0,0 +1,31 @@
1
+ (function(Modules) {
2
+ "use strict";
3
+
4
+ Modules.CheckboxToggle = function() {
5
+ this.start = function(element) {
6
+ var $checkboxes = element.find('input[type="checkbox"][data-target]');
7
+
8
+ $checkboxes.each(function() {
9
+ var $checkbox = $(this),
10
+ target = $checkbox.data('target'),
11
+ $target = $('#' + target);
12
+
13
+ $checkbox.attr('aria-controls', target);
14
+ toggle();
15
+ $checkbox.on('click', toggle);
16
+
17
+ function toggle() {
18
+ var state = $checkbox.is(':checked');
19
+ $target.toggle(state);
20
+ setAriaAttr(state)
21
+ }
22
+
23
+ function setAriaAttr(state) {
24
+ $checkbox.attr('aria-expanded', state);
25
+ $target.attr('aria-hidden', !state);
26
+ }
27
+ });
28
+ };
29
+ };
30
+
31
+ })(window.GOVUKAdmin.Modules);
@@ -0,0 +1,46 @@
1
+ (function(Modules) {
2
+ "use strict";
3
+
4
+ Modules.RadioToggle = function() {
5
+ this.start = function(element) {
6
+ var $radios = element.find('input[type="radio"][data-target]'),
7
+ radioGroups = {};
8
+
9
+ $radios.each(function() {
10
+ var $radio = $(this),
11
+ target = $radio.data('target'),
12
+ $target = $('#' + target);
13
+
14
+ radioGroups[$radio.attr('name')] = true;
15
+
16
+ $radio.attr('aria-controls', target);
17
+ $radio.on('radioValueChanged', toggle);
18
+
19
+ function toggle() {
20
+ var state = $radio.is(':checked');
21
+ $target.toggle(state);
22
+ setAriaAttr(state);
23
+ }
24
+
25
+ function setAriaAttr(state) {
26
+ $radio.attr('aria-expanded', state);
27
+ $target.attr('aria-hidden', !state);
28
+ }
29
+ });
30
+
31
+ listenToChangesOnRadioGroups();
32
+ triggerToggles();
33
+
34
+ function listenToChangesOnRadioGroups() {
35
+ $.map(radioGroups, function(v, radioGroupName) {
36
+ element.on('change', 'input[type="radio"][name="'+radioGroupName+'"]', triggerToggles);
37
+ });
38
+ }
39
+
40
+ function triggerToggles() {
41
+ $radios.trigger('radioValueChanged');
42
+ }
43
+ };
44
+ };
45
+
46
+ })(window.GOVUKAdmin.Modules);
@@ -20,7 +20,57 @@
20
20
  </div>
21
21
  <hr>
22
22
 
23
- <h2>Input widths</h2>
23
+ <h2>Forms</h2>
24
+
25
+ <h3>Conditionally revealing content</h3>
26
+ <div class="row">
27
+ <div class="col-md-6 lead">
28
+ <p>
29
+ Based on the <a href="http://govuk-elements.herokuapp.com/form-elements/#form-toggle-content">GOV.UK elements pattern</a>, ticking a checkbox or selecting a radio element can toggle the display of further content or fields.
30
+ </p>
31
+ <pre class="add-top-margin">&lt;div class=&quot;checkbox&quot; data-module=&quot;toggle-checkbox&quot;&gt;
32
+ &lt;label&gt;
33
+ &lt;input type=&quot;checkbox&quot; data-target=&quot;target-id&quot;&gt; Check me
34
+ &lt;/label&gt;
35
+ &lt;div id=&quot;target-id&quot;&gt;Content&lt;/div&gt;
36
+ &lt;/div&gt;</pre>
37
+ </div>
38
+ <form class="col-md-6">
39
+ <div class="checkbox" data-module="checkbox-toggle">
40
+ <label>
41
+ <input type="checkbox" data-target="target-id"> Check me to show content
42
+ </label>
43
+ <div id="target-id" class="well add-top-margin">Content that appears</div>
44
+ <hr />
45
+ <label>
46
+ <input type="checkbox" checked="checked" data-target="second-target-id"> I'm already checked
47
+ </label>
48
+ <div id="second-target-id" class="well add-top-margin">When the checkbox is checked, the content will display.</div>
49
+ </div>
50
+ <hr />
51
+ <div data-module="radio-toggle">
52
+ <div class="radio">
53
+ <label>
54
+ <input type="radio" name="radio-toggle-example" data-target="radio-target-id"> Radio 1
55
+ </label>
56
+ <div id="radio-target-id" class="well add-top-margin">From Radio 1</div>
57
+ </div>
58
+ <div class="radio">
59
+ <label>
60
+ <input type="radio" name="radio-toggle-example" data-target="second-radio-target-id"> Radio 2
61
+ </label>
62
+ <div id="second-radio-target-id" class="well add-top-margin">From Radio 2</div>
63
+ </div>
64
+ <div class="radio">
65
+ <label>
66
+ <input type="radio" name="radio-toggle-example"> Radio 3
67
+ </label>
68
+ </div>
69
+ </div>
70
+ </form>
71
+ </div>
72
+
73
+ <h3>Input widths</h3>
24
74
  <div class="row">
25
75
  <div class="col-md-6 lead">
26
76
  <p>Bootstrap 3 inputs always <a href="http://getbootstrap.com/css/#forms">extend to the size of their container</a>. The recommendation from Bootstrap is to wrap form elements with grid classes. Sometimes this isn’t suitable, for instance if a page isn’t using a grid.</p>
@@ -57,7 +107,7 @@
57
107
  </div>
58
108
  </div>
59
109
 
60
- <h3 class="add-bottom-margin">Inputs in a grid</h3>
110
+ <h4 class="add-bottom-margin">Inputs in a grid</h4>
61
111
  <div class="row">
62
112
  <div class="col-md-1">
63
113
  <input class="input-md-1 form-control" value="input-md-1" />
@@ -1,3 +1,3 @@
1
1
  module GovukAdminTemplate
2
- VERSION = "3.0.0"
2
+ VERSION = "3.1.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_admin_template
3
3
  version: !ruby/object:Gem::Version
4
- version: 3.0.0
4
+ version: 3.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2015-09-29 00:00:00.000000000 Z
11
+ date: 2015-10-26 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -143,9 +143,11 @@ files:
143
143
  - app/assets/javascripts/govuk-admin-template/govuk-admin.js
144
144
  - app/assets/javascripts/govuk-admin-template/modules/auto_show_modal.js
145
145
  - app/assets/javascripts/govuk-admin-template/modules/auto_track_event.js
146
+ - app/assets/javascripts/govuk-admin-template/modules/checkbox_toggle.js
146
147
  - app/assets/javascripts/govuk-admin-template/modules/confirm.js
147
148
  - app/assets/javascripts/govuk-admin-template/modules/filterable_table.js
148
149
  - app/assets/javascripts/govuk-admin-template/modules/fixed_table_header.js
150
+ - app/assets/javascripts/govuk-admin-template/modules/radio_toggle.js
149
151
  - app/assets/javascripts/govuk-admin-template/modules/toggle.js
150
152
  - app/assets/javascripts/govuk-admin-template/vendor/html5.js
151
153
  - app/assets/javascripts/govuk-admin-template/vendor/respond.min.js