Skip to content

Commit 5dc85ff

Browse files
moose56moose56
committed
clean up class names and got js working
1 parent e4a5cd3 commit 5dc85ff

File tree

3 files changed

+29
-45
lines changed

3 files changed

+29
-45
lines changed

‎css/inputs.css

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111

1212

1313

14-
.js .block-label.ui-checkbox input,
15-
.js .block-label.ui-radio input {
14+
.js .block-label.sb input,
15+
.js .block-label.sb input {
1616
margin: 0;
1717
zoom: 1;
1818
filter: alpha(opacity=0);
@@ -27,8 +27,7 @@
2727

2828

2929

30-
31-
.js .ui-checkbox::before {
30+
.js .sb-checkbox::before {
3231
content: "";
3332
border: 2px solid;
3433
background: transparent;
@@ -40,7 +39,7 @@
4039
transition: box-shadow 0.3s ease-in-out;
4140
}
4241

43-
.js .ui-checkbox::after {
42+
.js .sb-checkbox::after {
4443
content: "";
4544
border: solid;
4645
border-width: 0 0 5px 5px;
@@ -56,20 +55,9 @@
5655
opacity: 0;
5756
}
5857

59-
.js .ui-checkbox-selected::after {
60-
zoom: 1;
61-
filter: alpha(opacity=100);
62-
opacity: 1;
63-
}
6458

65-
.js .ui-checkbox-focused::before {
66-
box-shadow: 0 0 0 5px #ffbf47;
67-
}
6859

69-
70-
71-
72-
.js .ui-radio::before {
60+
.js .sb-radio::before {
7361
content: "";
7462
border: 2px solid;
7563
background: transparent;
@@ -79,9 +67,10 @@
7967
top: 0;
8068
left: 0;
8169
border-radius: 50%;
70+
transition: box-shadow 0.3s ease-in-out;
8271
}
8372

84-
.js .ui-radio::after {
73+
.js .sb-radio::after {
8574
content: "";
8675
border: 10px solid;
8776
width: 0;
@@ -95,12 +84,14 @@
9584
opacity: 0;
9685
}
9786

98-
.js .ui-radio-selected::after {
87+
88+
89+
.js .sb-selected::after {
9990
zoom: 1;
10091
filter: alpha(opacity=100);
10192
opacity: 1;
10293
}
10394

104-
.js .ui-radio-focused::before {
95+
.js .sb-focused::before {
10596
box-shadow: 0 0 0 5px #ffbf47;
10697
}

‎index.html

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,57 +8,52 @@
88
<link rel="stylesheet" href="css/inputs.css">
99

1010
<title>GOV.UK elements</title>
11+
<script src="js/SelectionButtons.js"></script>
1112
</head>
12-
<body class="js">
13+
<body>
1314
<h3>What do you like?</h3>
1415

1516
<form>
1617

1718
<fieldset>
1819
<legend>Which fruits do you like?</legend>
19-
<label class="block-label ui-checkbox ui-checkbox-selected ui-checkbox-focused" for="fruit-1">
20+
<label class="block-label sb sb-checkbox" for="fruit-1">
2021
<input id="fruit-1" name="fruit-1" type="checkbox" value="apple">
2122
Apples
2223
</label>
23-
<label class="block-label ui-checkbox" for="fruit-2">
24+
<label class="block-label sb sb-checkbox" for="fruit-2">
2425
<input id="fruit-2" name="fruit-2" type="checkbox" value="orange">
2526
Oranges
2627
</label>
27-
<label class="block-label ui-checkbox" for="fruit-3">
28+
<label class="block-label sb sb-checkbox" for="fruit-3">
2829
<input id="fruit-3" name="fruit-3" type="checkbox" value="banana">
2930
Bananas
3031
</label>
3132
</fieldset>
3233

3334
<fieldset>
3435
<legend>Which chocolate bar do you like?</legend>
35-
<label class="block-label ui-radio ui-radio-selected ui-radio-focused" for="chocolate-1">
36+
<label class="block-label sb sb-radio" for="chocolate-1">
3637
<input id="chocolate-1" name="chocolate-bar-group" type="radio" value="wisper">
3738
Wisper
3839
</label>
39-
<label class="block-label ui-radio" for="chocolate-2">
40+
<label class="block-label sb sb-radio" for="chocolate-2">
4041
<input id="chocolate-2" name="chocolate-bar-group" type="radio" value="mars-bar">
4142
Mars bar
4243
</label>
43-
<label class="block-label ui-radio" for="chocolate-3">
44+
<label class="block-label sb sb-radio" for="chocolate-3">
4445
<input id="chocolate-3" name="chocolate-bar-group" type="radio" value="milky-way">
4546
Milky way
4647
</label>
4748
</fieldset>
4849

4950
</form>
50-
<script
51-
src="https://code.jquery.com/jquery-3.1.1.min.js"
52-
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
53-
crossorigin="anonymous"></script>
51+
52+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
53+
<script src="js/SelectionButtons.js"></script>
5454
<script>
55-
$('ui-checkbox input').focus(function(){
56-
if ($(this).hasClass('ui-checkbox-selected')) {
57-
$(this).removeClass('ui-checkbox-selected')
58-
} else {
59-
$(this).addClass('ui-checkbox-selected')
60-
}
61-
});
55+
$('body').addClass('js')
56+
var sb = new SelectionButtons(".sb")
6257
</script>
6358
</body>
6459
</html>

‎js/SelectionButtons.js

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22
'use strict'
33

44
var $ = global.jQuery
5-
var GOVUK = global.GOVUK || {}
65

76
var SelectionButtons = function (elmsOrSelector, opts) {
8-
this.selectedClass = 'selected'
9-
this.focusedClass = 'focused'
10-
this.radioClass = 'selection-button-radio'
11-
this.checkboxClass = 'selection-button-checkbox'
7+
this.selectedClass = 'sb-selected'
8+
this.focusedClass = 'sb-focused'
9+
this.radioClass = 'sb-radio'
10+
this.checkboxClass = 'sb-checkbox'
1211
if (opts !== undefined) {
1312
$.each(opts, function (optionName, optionObj) {
1413
this[optionName] = optionObj
@@ -107,6 +106,5 @@
107106
}
108107
}
109108

110-
GOVUK.SelectionButtons = SelectionButtons
111-
global.GOVUK = GOVUK
109+
global.SelectionButtons = SelectionButtons
112110
})(window)

0 commit comments

Comments
 (0)