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 +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
|