govuk_admin_template 3.0.0 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/app/assets/javascripts/govuk-admin-template/modules/checkbox_toggle.js +31 -0
- data/app/assets/javascripts/govuk-admin-template/modules/radio_toggle.js +46 -0
- data/app/views/govuk_admin_template/style_guide/index.html.erb +52 -2
- data/lib/govuk_admin_template/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 96a5e45ab438f9e6eee4c86884c84a7b449df090
|
|
4
|
+
data.tar.gz: ae33d5878f7ec702adc4170fdd04c0a47e1d240a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2b766cd043d3bd14c68b96e863945823ad335eac46b25a7953d1036833f7313bd7b6f4c6ef5cf85c3fd0e0fbf2f8eb8c9f4b6cc0ba30063c1eab1173a713e227
|
|
7
|
+
data.tar.gz: c7f053bac1055df5c03fa574db8018da0fb7fd2cba94364800b09221071633d85ed2951372505307f32d14c72042329f374217c2613d5eccc636f00330ce189f
|
data/CHANGELOG.md
CHANGED
|
@@ -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>
|
|
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"><div class="checkbox" data-module="toggle-checkbox">
|
|
32
|
+
<label>
|
|
33
|
+
<input type="checkbox" data-target="target-id"> Check me
|
|
34
|
+
</label>
|
|
35
|
+
<div id="target-id">Content</div>
|
|
36
|
+
</div></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
|
-
<
|
|
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" />
|
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.
|
|
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-
|
|
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
|