@ons/design-system 48.0.0 → 48.0.3
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.
- package/components/header/_macro.njk +6 -5
- package/components/lists/_macro.njk +1 -1
- package/components/modal/_macro.njk +15 -13
- package/components/modal/_modal.scss +17 -0
- package/components/modal/modal.js +15 -2
- package/css/census.css +1 -1
- package/css/main.css +1 -1
- package/js/timeout.js +2 -2
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
|
@@ -82,12 +82,13 @@
|
|
|
82
82
|
{% endif %}
|
|
83
83
|
<div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
|
|
84
84
|
{{ onsButton({
|
|
85
|
-
"text": params.serviceLinks.toggleServicesButton.text | default("Menu")
|
|
85
|
+
"text": params.serviceLinks.toggleServicesButton.text | default("Menu"),
|
|
86
86
|
"classes": "ons-u-d-no ons-js-toggle-services",
|
|
87
|
+
"type": "button",
|
|
87
88
|
"buttonStyle": "mobile",
|
|
88
89
|
"variants": buttonVariant,
|
|
89
90
|
"attributes": {
|
|
90
|
-
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu")
|
|
91
|
+
"aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
|
|
91
92
|
"aria-controls": params.serviceLinks.id,
|
|
92
93
|
"aria-haspopup": "true",
|
|
93
94
|
"aria-expanded": "false"
|
|
@@ -157,7 +158,7 @@
|
|
|
157
158
|
}) }}
|
|
158
159
|
</div>
|
|
159
160
|
{% endif %}
|
|
160
|
-
{% if params.navigation.toggleButton is defined and params.navigation.toggleButton or params.autosuggest is defined and params.autosuggest %}
|
|
161
|
+
{% if params.navigation is defined and params.navigation and params.navigation.toggleButton is defined and params.navigation.toggleButton or params.autosuggest is defined and params.autosuggest %}
|
|
161
162
|
<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
|
|
162
163
|
{% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
|
|
163
164
|
<span class="ons-grid ons-u-d-no@xxs@xs">
|
|
@@ -168,7 +169,7 @@
|
|
|
168
169
|
"iconType": "search",
|
|
169
170
|
"iconPosition": "only",
|
|
170
171
|
"attributes": {
|
|
171
|
-
"aria-label": params.searchToggle.ariaLabel | default("Toggle search")
|
|
172
|
+
"aria-label": params.searchToggle.ariaLabel | default("Toggle search"),
|
|
172
173
|
"aria-controls": params.navigation.id,
|
|
173
174
|
"aria-haspopup": "true",
|
|
174
175
|
"aria-expanded": "false"
|
|
@@ -183,7 +184,7 @@
|
|
|
183
184
|
"buttonStyle": "mobile",
|
|
184
185
|
"variants": ["mobile", "ghost"],
|
|
185
186
|
"attributes": {
|
|
186
|
-
"aria-label": params.navigation.toggleButton.ariaLabel | default("Toggle menu")
|
|
187
|
+
"aria-label": params.navigation.toggleButton.ariaLabel | default("Toggle menu"),
|
|
187
188
|
"aria-controls": params.navigation.id,
|
|
188
189
|
"aria-haspopup": "true",
|
|
189
190
|
"aria-expanded": "false"
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
{% else %}
|
|
21
21
|
{% set listEl = 'ul' %}
|
|
22
22
|
{% endif %}
|
|
23
|
-
<{{listEl}} {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}class="{% if listLength > 1 or listEl == 'ul' %}ons-list{% else %}ons-list--p{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes -}}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}">
|
|
23
|
+
<{{listEl}} {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}class="{% if listLength > 1 or listEl == 'ul' %}ons-list{% else %}ons-list--p{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes -}}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}"{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
|
|
24
24
|
{%- for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
|
|
25
25
|
{% if listLength > 1 or listEl == 'ul' %}
|
|
26
26
|
<li class="ons-list__item{% if item.listClasses is defined and item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current is defined and item.current %} aria-current="true"{% endif %}>
|
|
@@ -5,19 +5,21 @@
|
|
|
5
5
|
role="dialog"
|
|
6
6
|
aria-labelledby="ons-modal-title"
|
|
7
7
|
{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
|
|
8
|
-
>
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
>
|
|
9
|
+
<div class="ons-modal__content">
|
|
10
|
+
<h1 id="ons-modal-title" class="ons-modal__title">
|
|
11
|
+
{{ params.title }}
|
|
12
|
+
</h1>
|
|
13
|
+
<div class="ons-modal__body">
|
|
14
|
+
{{ (params.body if params else "") | safe }}{{ caller() if caller }}
|
|
15
|
+
</div>
|
|
16
|
+
{% if params.btnText %}
|
|
17
|
+
{% from "components/button/_macro.njk" import onsButton %}
|
|
18
|
+
{{ onsButton({
|
|
19
|
+
"text": params.btnText,
|
|
20
|
+
"classes": "ons-js-modal-btn ons-u-mt-s"
|
|
21
|
+
}) }}
|
|
22
|
+
{% endif %}
|
|
14
23
|
</div>
|
|
15
|
-
{% if params.btnText %}
|
|
16
|
-
{% from "components/button/_macro.njk" import onsButton %}
|
|
17
|
-
{{ onsButton({
|
|
18
|
-
"text": params.btnText,
|
|
19
|
-
"classes": "ons-js-modal-btn ons-u-mt-s"
|
|
20
|
-
}) }}
|
|
21
|
-
{% endif %}
|
|
22
24
|
</dialog>
|
|
23
25
|
{% endmacro %}
|
|
@@ -9,8 +9,20 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
|
|
|
9
9
|
margin-right: 2rem;
|
|
10
10
|
max-width: 500px;
|
|
11
11
|
padding: 2rem;
|
|
12
|
+
position: relative;
|
|
12
13
|
width: auto;
|
|
13
14
|
|
|
15
|
+
&-ie11 & {
|
|
16
|
+
background: $color-white;
|
|
17
|
+
bottom: 0;
|
|
18
|
+
height: 350px;
|
|
19
|
+
left: 0;
|
|
20
|
+
position: fixed;
|
|
21
|
+
right: 0;
|
|
22
|
+
top: 50%;
|
|
23
|
+
transform: translate(0, -50%);
|
|
24
|
+
}
|
|
25
|
+
|
|
14
26
|
@media screen and (min-width: 600px) {
|
|
15
27
|
margin-left: auto;
|
|
16
28
|
margin-right: auto;
|
|
@@ -24,6 +36,11 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
|
|
|
24
36
|
|
|
25
37
|
& + .backdrop {
|
|
26
38
|
background: $backdrop-colour;
|
|
39
|
+
height: 100%;
|
|
40
|
+
left: 0;
|
|
41
|
+
position: absolute;
|
|
42
|
+
top: 0;
|
|
43
|
+
width: 100%;
|
|
27
44
|
}
|
|
28
45
|
}
|
|
29
46
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import dialogPolyfill from 'dialog-polyfill';
|
|
2
2
|
|
|
3
3
|
const overLayClass = 'ons-modal-overlay';
|
|
4
|
+
const ie11Class = 'ons-modal-ie11';
|
|
4
5
|
|
|
5
6
|
export default class Modal {
|
|
6
7
|
constructor(component) {
|
|
@@ -8,7 +9,7 @@ export default class Modal {
|
|
|
8
9
|
this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
|
|
9
10
|
this.closeButton = component.querySelector('.ons-js-modal-btn');
|
|
10
11
|
this.lastFocusedEl = null;
|
|
11
|
-
|
|
12
|
+
this.dialogCSSSupported = true;
|
|
12
13
|
this.initialise();
|
|
13
14
|
}
|
|
14
15
|
|
|
@@ -33,6 +34,7 @@ export default class Modal {
|
|
|
33
34
|
} else {
|
|
34
35
|
try {
|
|
35
36
|
dialogPolyfill.registerDialog(this.component);
|
|
37
|
+
this.dialogCSSSupported = false;
|
|
36
38
|
return true;
|
|
37
39
|
} catch (error) {
|
|
38
40
|
/* istanbul ignore next */
|
|
@@ -44,9 +46,15 @@ export default class Modal {
|
|
|
44
46
|
openDialog(event) {
|
|
45
47
|
if (!this.isDialogOpen()) {
|
|
46
48
|
this.component.classList.add('ons-u-db');
|
|
47
|
-
document.querySelector('body').
|
|
49
|
+
document.querySelector('body').classList.add(overLayClass);
|
|
50
|
+
|
|
51
|
+
if (!this.dialogCSSSupported) {
|
|
52
|
+
document.querySelector('body').classList.add(ie11Class);
|
|
53
|
+
}
|
|
54
|
+
|
|
48
55
|
this.makePageContentInert();
|
|
49
56
|
this.saveLastFocusedEl();
|
|
57
|
+
|
|
50
58
|
if (event) {
|
|
51
59
|
const modal = document.getElementById(event.target.getAttribute('data-modal-id'));
|
|
52
60
|
modal.showModal();
|
|
@@ -96,6 +104,11 @@ export default class Modal {
|
|
|
96
104
|
}
|
|
97
105
|
this.component.classList.remove('ons-u-db');
|
|
98
106
|
document.querySelector('body').classList.remove(overLayClass);
|
|
107
|
+
|
|
108
|
+
if (!this.dialogCSSSupported) {
|
|
109
|
+
document.querySelector('body').classList.remove(ie11Class);
|
|
110
|
+
}
|
|
111
|
+
|
|
99
112
|
this.component.close();
|
|
100
113
|
this.setFocusOnLastFocusedEl(this.lastFocusedEl);
|
|
101
114
|
this.removeInertFromPageContent();
|