dta_rapid 0.2.18 → 0.3.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/_includes/forms/multiple-choice.html +11 -5
- data/_includes/forms/text-field.html +7 -1
- data/_includes/navigation/breadcrumbs.html +7 -3
- data/_layouts/conversational.html +19 -0
- data/_sass/components/_multiple-choice.scss +8 -4
- data/_sass/components/_scroll-form.scss +41 -0
- data/_sass/mixins/_wrapper-padding.scss +1 -1
- data/assets/js/main.js +5 -0
- data/assets/js/questions.js +25 -0
- data/assets/js/scroll-form.js +58 -0
- data/assets/js/scrolling.js +20 -0
- data/assets/style.scss +1 -0
- metadata +9 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e92d67d7dc83d6af078d91df24f06443e0549a42
|
|
4
|
+
data.tar.gz: 9c3254517ca9d42065f8513724c99bd03e685f17
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e3c16811eea223db73c443bb0b0d277035b844c1179e6226790277d8f42cc09b8baf8879124f6fee5df4ef7a32447e0a87417bda6a17222196f159aa822d916c
|
|
7
|
+
data.tar.gz: 77ee895a880759d622c3075d84eb40569cc5a04bc9ac0a6abc30fd6b0470e1fd213451b15fe640c9faf0ed909e17b2039f7ed6c7bbb4b4ccaf7d74af4693088e
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{% assign options = include.options | split: "|" %}
|
|
2
2
|
{% assign question_slug = include.question | slugify %}
|
|
3
3
|
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
|
|
4
|
+
<div class="multiple-choice {{ include.className}}">
|
|
5
|
+
<label class="multiple-choice__label" id="q-{{ question_slug }}">{{ include.question }}</label>
|
|
6
|
+
{% if include.hint %}
|
|
7
|
+
<label class="multiple-choice__hint">{{ include.hint }}</label>
|
|
8
|
+
{% endif %}
|
|
9
|
+
<ul class="multiple-choice__list">
|
|
7
10
|
{% for option in options %}
|
|
8
11
|
{% assign option_slug = option | slugify %}
|
|
9
12
|
<li class="multiple-choice__option">
|
|
@@ -18,9 +21,12 @@
|
|
|
18
21
|
data-parsley-error-message="{{ include.validation_message }}"
|
|
19
22
|
value="{{ question_slug }}__{{ option_slug }}">
|
|
20
23
|
<label
|
|
21
|
-
class="multiple-
|
|
24
|
+
class="multiple-choice__option-label"
|
|
22
25
|
for="{{ question_slug }}__{{ option_slug }}">{{ option }}</label>
|
|
23
26
|
</li>
|
|
24
27
|
{% endfor %}
|
|
25
28
|
</ul>
|
|
26
|
-
|
|
29
|
+
{% if include.description %}
|
|
30
|
+
<p class="multiple-choice__description">{{ include.description }}</p>
|
|
31
|
+
{% endif %}
|
|
32
|
+
</div>
|
|
@@ -5,10 +5,13 @@
|
|
|
5
5
|
{% assign required="required" %}
|
|
6
6
|
{% endif %}
|
|
7
7
|
|
|
8
|
-
<div class="text-field">
|
|
8
|
+
<div class="text-field {{ include.className | default: null }}">
|
|
9
9
|
<label class="text-field__label" for="{{ include.id | default: id }}">
|
|
10
10
|
{{ include.label }}
|
|
11
11
|
</label>
|
|
12
|
+
{% if include.hint %}
|
|
13
|
+
<label class="text-field__hint" for="{{ include.id | default: id }}">{{ include.hint }}</label>
|
|
14
|
+
{% endif %}
|
|
12
15
|
<input
|
|
13
16
|
class="text-field__input"
|
|
14
17
|
placeholder="{{ include.placeholder }}"
|
|
@@ -20,4 +23,7 @@
|
|
|
20
23
|
{% if include.pattern %}data-parsley-pattern="{{ include.pattern }}"{% endif %}
|
|
21
24
|
{% if include.validation_message %}data-parsley-error-message="{{ include.validation_message }}"{% endif %}
|
|
22
25
|
/>
|
|
26
|
+
{% if include.description %}
|
|
27
|
+
<p class="text-field__description">{{ include.description }}</p>
|
|
28
|
+
{% endif %}
|
|
23
29
|
</div>
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
<nav class="breadcrumbs" aria-label="breadcrumb">
|
|
2
2
|
<div class="wrapper">
|
|
3
3
|
<ul class="breadcrumbs__list">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
{% for breadcrumb in include.breadcrumbs %}
|
|
5
|
+
{% if forloop.last == true %}
|
|
6
|
+
<li class="breadcrumbs__item">{{breadcrumb.title}}</li>
|
|
7
|
+
{% else %}
|
|
8
|
+
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{breadcrumb.href}}" title="Home">{{breadcrumb.title}}</a></li>
|
|
9
|
+
{% endif %}
|
|
10
|
+
{% endfor %}
|
|
7
11
|
</ul>
|
|
8
12
|
</div>
|
|
9
13
|
</nav>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
+
<title>Title</title>
|
|
8
|
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
|
|
9
|
+
<link rel="stylesheet" href="/assets/style.css">
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body>
|
|
13
|
+
<main id="container" class="scroll-form__container">
|
|
14
|
+
<div class="wrapper">{{ content }}</div>
|
|
15
|
+
</main>
|
|
16
|
+
<script src="/assets/js/bundle.js"></script>
|
|
17
|
+
</body>
|
|
18
|
+
|
|
19
|
+
</html>
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
.multiple-
|
|
1
|
+
.multiple-choice {
|
|
2
|
+
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.multiple-choice__list {
|
|
2
6
|
list-style: none;
|
|
3
7
|
padding-left: 0;
|
|
4
8
|
}
|
|
@@ -8,7 +12,7 @@
|
|
|
8
12
|
margin: $small-spacing 0;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
|
-
.multiple-
|
|
15
|
+
.multiple-choice__option-label {
|
|
12
16
|
padding: $small-spacing $base-spacing $small-spacing $large-spacing;
|
|
13
17
|
padding-left: $large-spacing;
|
|
14
18
|
display: block;
|
|
@@ -30,10 +34,10 @@
|
|
|
30
34
|
position: absolute;
|
|
31
35
|
top: 50%;
|
|
32
36
|
|
|
33
|
-
&:focus + .multiple-
|
|
37
|
+
&:focus + .multiple-choice__option-label {
|
|
34
38
|
border-color: $border-highlight-color;
|
|
35
39
|
}
|
|
36
|
-
&:checked + .multiple-
|
|
40
|
+
&:checked + .multiple-choice__option-label {
|
|
37
41
|
background-color: $button-bg-color;
|
|
38
42
|
border-color: $button-bg-color--hover;
|
|
39
43
|
color: $button-text-color;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
.scroll-form__container {
|
|
2
|
+
height: 100vh;
|
|
3
|
+
overflow: scroll;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.scroll-form__questionset {
|
|
7
|
+
transition: opacity 300ms 100ms $ease-in-out-quad;
|
|
8
|
+
height: 100vh;
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
opacity: 0.1;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.scroll-form__questionset--active {
|
|
15
|
+
transition: opacity 300ms 100ms $ease-in-out-quad;
|
|
16
|
+
opacity: 1;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.scroll-form__question {
|
|
20
|
+
width: 100%;
|
|
21
|
+
display: block;
|
|
22
|
+
padding-bottom: $large-spacing;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.scroll-form__footer {
|
|
26
|
+
position: fixed;
|
|
27
|
+
bottom: 0;
|
|
28
|
+
left: 0;
|
|
29
|
+
right: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.scroll-form__text-field,
|
|
33
|
+
.scroll-form__multiple-choice {
|
|
34
|
+
.text-field__label,
|
|
35
|
+
.multiple-choice__label {
|
|
36
|
+
font-size: $large-font-size;
|
|
37
|
+
}
|
|
38
|
+
.text-field__hint {
|
|
39
|
+
|
|
40
|
+
}
|
|
41
|
+
}
|
data/assets/js/main.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
var questions = function () {
|
|
2
|
+
|
|
3
|
+
var CONTAINER_ID = "container",
|
|
4
|
+
CLASS_NAME = "scroll-form__questionset",
|
|
5
|
+
ACTIVE_CLASS = "scroll-form__questionset--active";
|
|
6
|
+
|
|
7
|
+
return {
|
|
8
|
+
getContainer: function () { return document.getElementById(CONTAINER_ID); },
|
|
9
|
+
getQuestion: function (index) {
|
|
10
|
+
return document.getElementsByClassName(CLASS_NAME)[index];
|
|
11
|
+
},
|
|
12
|
+
setActiveQuestion: function(index) {
|
|
13
|
+
var questionList = [].slice.call(document.getElementsByClassName(CLASS_NAME));
|
|
14
|
+
|
|
15
|
+
questionList.forEach(function(elm) {
|
|
16
|
+
elm.classList.remove(ACTIVE_CLASS);
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
this.getQuestion(index).classList.add(ACTIVE_CLASS);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
module.exports = questions();
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
var scrolling = require('./scrolling');
|
|
2
|
+
var questions = require('./questions');
|
|
3
|
+
|
|
4
|
+
var scrollForm = function () {
|
|
5
|
+
|
|
6
|
+
// TODO index() = function () {}
|
|
7
|
+
// TODO: Can haz ES6?
|
|
8
|
+
|
|
9
|
+
var scroller,
|
|
10
|
+
currentPosition = 0,
|
|
11
|
+
speed = 400;
|
|
12
|
+
|
|
13
|
+
var init = function () {
|
|
14
|
+
var container = questions.getContainer();
|
|
15
|
+
var firstQuestion = questions.getQuestion(0);
|
|
16
|
+
|
|
17
|
+
scroller = scrolling.createScroller(container, 0, 0)
|
|
18
|
+
|
|
19
|
+
scrolling.scrollTo(scroller, firstQuestion, speed, function() {
|
|
20
|
+
questions.setActiveQuestion(0);
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
var next = function () {
|
|
25
|
+
var nextPosition = currentPosition + 1;
|
|
26
|
+
var newTarget = questions.getQuestion(nextPosition);
|
|
27
|
+
|
|
28
|
+
if (newTarget) {
|
|
29
|
+
scrolling.scrollTo(scroller, newTarget, speed, function() {
|
|
30
|
+
questions.setActiveQuestion(nextPosition);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
currentPosition += 1;
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
var prev = function () {
|
|
38
|
+
var prevPosition = currentPosition - 1;
|
|
39
|
+
var newTarget = questions.getQuestion(prevPosition);
|
|
40
|
+
|
|
41
|
+
if (newTarget) {
|
|
42
|
+
scrolling.scrollTo(scroller, newTarget, speed, function() {
|
|
43
|
+
questions.setActiveQuestion(prevPosition);
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
currentPosition -= 1;
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
return {
|
|
51
|
+
init: init,
|
|
52
|
+
next: next,
|
|
53
|
+
prev: prev
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
module.exports = scrollForm();
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
var zenscroll = require('zenscroll');
|
|
2
|
+
|
|
3
|
+
var scrolling = function () {
|
|
4
|
+
|
|
5
|
+
var createScroller = function (container, speed, offset) {
|
|
6
|
+
return zenscroll.createScroller(container, speed, offset);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
var scrollTo = function(scroller, element, speed, callback) {
|
|
10
|
+
scroller.center(element, speed, 0, callback)
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
return {
|
|
14
|
+
scrollTo: scrollTo,
|
|
15
|
+
createScroller: createScroller
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
module.exports = scrolling();
|
data/assets/style.scss
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: dta_rapid
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Gareth Rogers
|
|
@@ -10,7 +10,7 @@ authors:
|
|
|
10
10
|
autorequire:
|
|
11
11
|
bindir: bin
|
|
12
12
|
cert_chain: []
|
|
13
|
-
date: 2017-03-
|
|
13
|
+
date: 2017-03-20 00:00:00.000000000 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: jekyll
|
|
@@ -77,6 +77,7 @@ files:
|
|
|
77
77
|
- _includes/typography/accordian.html
|
|
78
78
|
- _includes/typography/badge.html
|
|
79
79
|
- _includes/typography/callout.html
|
|
80
|
+
- _layouts/conversational.html
|
|
80
81
|
- _layouts/default.html
|
|
81
82
|
- _sass/_colors.scss
|
|
82
83
|
- _sass/_easings.scss
|
|
@@ -94,6 +95,7 @@ files:
|
|
|
94
95
|
- _sass/components/_button.scss
|
|
95
96
|
- _sass/components/_callout.scss
|
|
96
97
|
- _sass/components/_multiple-choice.scss
|
|
98
|
+
- _sass/components/_scroll-form.scss
|
|
97
99
|
- _sass/components/_table.scss
|
|
98
100
|
- _sass/components/_text-field.scss
|
|
99
101
|
- _sass/mixins/_clearfix.scss
|
|
@@ -203,6 +205,10 @@ files:
|
|
|
203
205
|
- _sass/vendor/neat/settings/_disable-warnings.scss
|
|
204
206
|
- _sass/vendor/neat/settings/_grid.scss
|
|
205
207
|
- _sass/vendor/neat/settings/_visual-grid.scss
|
|
208
|
+
- assets/js/main.js
|
|
209
|
+
- assets/js/questions.js
|
|
210
|
+
- assets/js/scroll-form.js
|
|
211
|
+
- assets/js/scrolling.js
|
|
206
212
|
- assets/js/vendor/jquery-3.1.1.min.js
|
|
207
213
|
- assets/js/vendor/parsley.min.js
|
|
208
214
|
- assets/style.scss
|
|
@@ -226,7 +232,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
226
232
|
version: '0'
|
|
227
233
|
requirements: []
|
|
228
234
|
rubyforge_project:
|
|
229
|
-
rubygems_version: 2.6.
|
|
235
|
+
rubygems_version: 2.6.8
|
|
230
236
|
signing_key:
|
|
231
237
|
specification_version: 4
|
|
232
238
|
summary: Converting the DTA UI kit (see https://github.com/AusDTO/gov-au-ui-kit) into
|