@internetstiftelsen/styleguide 2.25.9-beta.0.1 → 2.25.9-beta.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.
Files changed (4) hide show
  1. package/dist/molecules/overview-navigation/overview-navigation.js +116 -62
  2. package/package.json +1 -1
  3. package/src/molecules/overview-navigation/_overview-navigation.scss +22 -6
  4. package/src/molecules/overview-navigation/overview-navigation.js +100 -62
package/dist/molecules/overview-navigation/overview-navigation.js CHANGED
@@ -1,72 +1,126 @@
1
1
  'use strict';
2
2
 
3
- var overviewNavigations = document.querySelectorAll('.js-overview-navigation');
4
- var overviewNavigationButton = document.querySelector('.js-overview-navigation-button');
5
-
6
- function overViewNav(overviewNavigation) {
7
- overviewNavigationButton.classList.remove('is-fixed');
8
- overviewNavigation.classList.remove('is-minimized');
9
- overviewNavigationButton.setAttribute('aria-expanded', 'true');
10
-
11
- // Timeout until a11y-toggle is initiated
12
- setTimeout(function () {
13
- overviewNavigation.setAttribute('aria-hidden', 'false');
14
- }, '50');
15
-
16
- var viewportOffset = overviewNavigation.getBoundingClientRect();
17
- var topBtnPos = overviewNavigationButton.offsetTop;
18
- var leftPos = viewportOffset.left;
19
- var topNavPos = viewportOffset.top;
20
-
21
- window.addEventListener('scroll', function () {
22
- if (window.innerWidth > 960) {
23
- if (overviewNavigation.getBoundingClientRect().top < 0) {
24
- // Element is at top of screen
25
- overviewNavigation.setAttribute('aria-hidden', 'true');
26
- overviewNavigation.classList.add('is-minimized');
27
-
28
- overviewNavigationButton.style.left = leftPos + 'px';
29
- overviewNavigationButton.style.top = topBtnPos + 'px';
30
- overviewNavigationButton.style.display = 'flex';
31
- overviewNavigationButton.style.position = 'fixed';
32
-
33
- // Timeout to let styles above apply first
34
- setTimeout(function () {
35
- overviewNavigationButton.classList.add('is-fixed');
36
- }, '10');
3
+ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
4
+
5
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
6
+
7
+ var OverviewNavigation = function () {
8
+ function OverviewNavigation(element) {
9
+ var _this = this;
10
+
11
+ _classCallCheck(this, OverviewNavigation);
12
+
13
+ this.element = element;
14
+ this.button = this.element.querySelector('.js-overview-navigation-button');
15
+ this.isSmallScreen = false;
16
+ this.isOutOfView = false;
17
+ this.minimized = null;
18
+
19
+ // a11y-toggle doesn't have a callback for when it's done initializing
20
+ // so we have to wait for the next tick
21
+ document.addEventListener('DOMContentLoaded', function () {
22
+ setTimeout(function () {
23
+ _this.attach();
24
+ _this.onResize();
25
+ }, 0);
26
+ });
27
+ }
28
+
29
+ _createClass(OverviewNavigation, [{
30
+ key: 'attach',
31
+ value: function attach() {
32
+ window.addEventListener('resize', this.onResize.bind(this));
33
+ window.addEventListener('scroll', this.onScroll.bind(this));
34
+ }
35
+ }, {
36
+ key: 'update',
37
+ value: function update() {
38
+ if (this.isSmallScreen || this.isOutOfView) {
39
+ this.minimize();
40
+ } else {
41
+ this.maximize();
42
+ }
43
+ }
44
+ }, {
45
+ key: 'onResize',
46
+ value: function onResize() {
47
+ this.isSmallScreen = window.innerWidth <= 961;
48
+ this.update();
49
+ }
50
+ }, {
51
+ key: 'onScroll',
52
+ value: function onScroll() {
53
+ var viewportOffset = this.element.getBoundingClientRect();
54
+
55
+ if (viewportOffset.top < 0) {
56
+ this.isOutOfView = true;
37
57
  } else if (window.scrollY === 0) {
38
- // User has scrolled back to top
39
- overviewNavigationButton.classList.remove('is-fixed');
40
- overviewNavigationButton.style.left = leftPos + 'px';
41
- overviewNavigationButton.style.top = topNavPos + 'px';
42
-
43
- // Timeout same length as CSS-transition
44
- setTimeout(function () {
45
- overviewNavigationButton.style.display = 'none';
46
- overviewNavigation.setAttribute('aria-hidden', 'false');
47
- overviewNavigation.classList.remove('is-minimized');
48
- }, '250');
58
+ this.isOutOfView = false;
49
59
  }
60
+
61
+ this.update();
50
62
  }
51
- });
63
+ }, {
64
+ key: 'updateButtonPosition',
65
+ value: function updateButtonPosition() {
66
+ var elementOffset = this.element.getBoundingClientRect();
67
+ var buttonRect = this.button.getBoundingClientRect();
52
68
 
53
- window.addEventListener('resize', function () {
54
- if (window.innerWidth < 960) {
55
- overviewNavigationButton.classList.add('is-fixed');
56
- overviewNavigation.classList.add('is-minimized');
57
- overviewNavigationButton.setAttribute('aria-expanded', 'false');
58
- overviewNavigation.setAttribute('aria-hidden', 'true');
59
- } else {
60
- overviewNavigationButton.classList.remove('is-fixed');
61
- overviewNavigation.classList.remove('is-minimized');
62
- overviewNavigationButton.setAttribute('aria-expanded', 'true');
63
- overviewNavigation.setAttribute('aria-hidden', 'false');
69
+ // Use right and bottom to place this.button at the top left corner of the element
70
+ this.button.style.right = window.innerWidth - elementOffset.right + elementOffset.width - buttonRect.width + 'px';
71
+ this.button.style.bottom = window.innerHeight - elementOffset.top - buttonRect.height + 'px';
64
72
  }
65
- });
66
- }
73
+ }, {
74
+ key: 'minimize',
75
+ value: function minimize() {
76
+ if (this.minimized === true) {
77
+ return;
78
+ }
79
+
80
+ this.button.style.transition = 'none';
81
+ this.updateButtonPosition();
82
+ // eslint-disable-next-line no-unused-expressions
83
+ this.element.offsetHeight; // force reflow
84
+ this.button.style.transition = 'right 0.25s ease-out, bottom 0.25s ease-out, opacity 0.25s ease-out';
85
+
86
+ this.element.setAttribute('aria-hidden', 'true');
87
+ this.element.classList.add('is-minimized');
88
+
89
+ this.button.setAttribute('aria-expanded', 'false');
90
+ this.button.classList.add('is-fixed');
91
+ this.button.style.opacity = 1;
92
+
93
+ this.minimized = true;
94
+ }
95
+ }, {
96
+ key: 'maximize',
97
+ value: function maximize() {
98
+ if (this.minimized === false) {
99
+ return;
100
+ }
101
+
102
+ this.element.setAttribute('aria-hidden', 'false');
103
+ this.element.classList.remove('is-minimized');
104
+
105
+ // eslint-disable-next-line no-unused-expressions
106
+ this.element.offsetHeight; // force reflow
107
+
108
+ this.updateButtonPosition();
109
+ this.button.setAttribute('aria-expanded', 'true');
110
+ this.button.classList.remove('is-fixed');
111
+ this.button.style.opacity = 0;
112
+
113
+ this.minimized = false;
114
+ }
115
+ }]);
116
+
117
+ return OverviewNavigation;
118
+ }();
119
+
120
+ var overviewNavigations = document.querySelectorAll('.js-overview-navigation');
67
121
 
68
122
  if (overviewNavigations) {
69
- if (window.innerWidth > 960) {
70
- [].forEach.call(overviewNavigations, overViewNav);
71
- }
123
+ [].forEach.call(overviewNavigations, function (overviewNavigation) {
124
+ return new OverviewNavigation(overviewNavigation);
125
+ });
72
126
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "2.25.9-beta.0.1",
3
+ "version": "2.25.9-beta.0.3",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/molecules/overview-navigation/_overview-navigation.scss CHANGED
@@ -63,11 +63,14 @@
63
63
  }
64
64
 
65
65
  @include e(button) {
66
- display: none;
66
+ position: fixed;
67
+ bottom: auto;
68
+ right: auto;
69
+ display: flex;
70
+ opacity: 0;
71
+ pointer-events: none;
67
72
  padding: 0;
68
73
  border: 0;
69
- transition: left 0.25s ease-out, top 0.25s ease-out;
70
- background-color: transparent;
71
74
  width: rem(60px);
72
75
  height: rem(60px);
73
76
  flex-shrink: 0;
@@ -109,9 +112,17 @@
109
112
  }
110
113
 
111
114
  &.is-fixed {
112
- display: flex;
113
- top: calc(100vh - rhythm(11)) !important;
114
- left: calc(100% - rhythm(8)) !important;
115
+ //top: calc(100vh - rhythm(11)) !important;
116
+ //top: auto !important;
117
+ bottom: calc(env(safe-area-inset-bottom) + rhythm(5)) !important;
118
+ //left: auto !important;
119
+ right: rhythm(2) !important;
120
+ pointer-events: auto;
121
+
122
+ @include bp-up(xxl) {
123
+ //left: auto !important;
124
+ right: calc(50vw - 680px) !important;
125
+ }
115
126
  }
116
127
  }
117
128
 
@@ -136,5 +147,10 @@
136
147
  z-index: z_index(middlegroundImportant);
137
148
  margin-top: 0;
138
149
  margin-bottom: 0;
150
+
151
+ @include bp-up(xxl) {
152
+ right: calc(50vw - 680px) !important;
153
+ }
139
154
  }
140
155
  }
156
+
package/src/molecules/overview-navigation/overview-navigation.js CHANGED
@@ -1,68 +1,106 @@
1
- const overviewNavigations = document.querySelectorAll('.js-overview-navigation');
2
- const overviewNavigationButton = document.querySelector('.js-overview-navigation-button');
3
-
4
- function overViewNav(overviewNavigation) {
5
- overviewNavigationButton.classList.remove('is-fixed');
6
- overviewNavigation.classList.remove('is-minimized');
7
- overviewNavigationButton.setAttribute('aria-expanded', 'true');
8
-
9
- // Timeout until a11y-toggle is initiated
10
- setTimeout(() => {
11
- overviewNavigation.setAttribute('aria-hidden', 'false');
12
- }, '50');
13
-
14
- const viewportOffset = overviewNavigation.getBoundingClientRect();
15
- const topBtnPos = overviewNavigationButton.offsetTop;
16
- const leftPos = viewportOffset.left;
17
- const topNavPos = viewportOffset.top;
18
-
19
- window.addEventListener('scroll', () => {
20
- if (window.innerWidth > 960) {
21
- if (overviewNavigation.getBoundingClientRect().top < 0) { // Element is at top of screen
22
- overviewNavigation.setAttribute('aria-hidden', 'true');
23
- overviewNavigation.classList.add('is-minimized');
24
-
25
- overviewNavigationButton.style.left = `${leftPos}px`;
26
- overviewNavigationButton.style.top = `${topBtnPos}px`;
27
- overviewNavigationButton.style.display = 'flex';
28
- overviewNavigationButton.style.position = 'fixed';
29
-
30
- // Timeout to let styles above apply first
31
- setTimeout(() => {
32
- overviewNavigationButton.classList.add('is-fixed');
33
- }, '10');
34
- } else if (window.scrollY === 0) { // User has scrolled back to top
35
- overviewNavigationButton.classList.remove('is-fixed');
36
- overviewNavigationButton.style.left = `${leftPos}px`;
37
- overviewNavigationButton.style.top = `${topNavPos}px`;
38
-
39
- // Timeout same length as CSS-transition
40
- setTimeout(() => {
41
- overviewNavigationButton.style.display = 'none';
42
- overviewNavigation.setAttribute('aria-hidden', 'false');
43
- overviewNavigation.classList.remove('is-minimized');
44
- }, '250');
45
- }
46
- }
47
- });
48
-
49
- window.addEventListener('resize', () => {
50
- if (window.innerWidth < 960) {
51
- overviewNavigationButton.classList.add('is-fixed');
52
- overviewNavigation.classList.add('is-minimized');
53
- overviewNavigationButton.setAttribute('aria-expanded', 'false');
54
- overviewNavigation.setAttribute('aria-hidden', 'true');
1
+ class OverviewNavigation {
2
+ constructor(element) {
3
+ this.element = element;
4
+ this.button = this.element.querySelector('.js-overview-navigation-button');
5
+ this.isSmallScreen = false;
6
+ this.isOutOfView = false;
7
+ this.minimized = null;
8
+
9
+ // a11y-toggle doesn't have a callback for when it's done initializing
10
+ // so we have to wait for the next tick
11
+ document.addEventListener('DOMContentLoaded', () => {
12
+ setTimeout(() => {
13
+ this.attach();
14
+ this.onResize();
15
+ }, 0);
16
+ });
17
+ }
18
+
19
+ attach() {
20
+ window.addEventListener('resize', this.onResize.bind(this));
21
+ window.addEventListener('scroll', this.onScroll.bind(this));
22
+ }
23
+
24
+ update() {
25
+ if (this.isSmallScreen || this.isOutOfView) {
26
+ this.minimize();
55
27
  } else {
56
- overviewNavigationButton.classList.remove('is-fixed');
57
- overviewNavigation.classList.remove('is-minimized');
58
- overviewNavigationButton.setAttribute('aria-expanded', 'true');
59
- overviewNavigation.setAttribute('aria-hidden', 'false');
28
+ this.maximize();
29
+ }
30
+ }
31
+
32
+ onResize() {
33
+ this.isSmallScreen = window.innerWidth <= 961;
34
+ this.update();
35
+ }
36
+
37
+ onScroll() {
38
+ const viewportOffset = this.element.getBoundingClientRect();
39
+
40
+ if (viewportOffset.top < 0) {
41
+ this.isOutOfView = true;
42
+ } else if (window.scrollY === 0) {
43
+ this.isOutOfView = false;
60
44
  }
61
- });
45
+
46
+ this.update();
47
+ }
48
+
49
+ updateButtonPosition() {
50
+ const elementOffset = this.element.getBoundingClientRect();
51
+ const buttonRect = this.button.getBoundingClientRect();
52
+
53
+ // Use right and bottom to place this.button at the top left corner of the element
54
+ this.button.style.right = `${window.innerWidth - elementOffset.right + elementOffset.width - buttonRect.width}px`;
55
+ this.button.style.bottom = `${window.innerHeight - elementOffset.top - buttonRect.height}px`;
56
+ }
57
+
58
+ minimize() {
59
+ if (this.minimized === true) {
60
+ return;
61
+ }
62
+
63
+ this.button.style.transition = 'none';
64
+ this.updateButtonPosition();
65
+ // eslint-disable-next-line no-unused-expressions
66
+ this.element.offsetHeight; // force reflow
67
+ this.button.style.transition = 'right 0.25s ease-out, bottom 0.25s ease-out, opacity 0.25s ease-out';
68
+
69
+ this.element.setAttribute('aria-hidden', 'true');
70
+ this.element.classList.add('is-minimized');
71
+
72
+ this.button.setAttribute('aria-expanded', 'false');
73
+ this.button.classList.add('is-fixed');
74
+ this.button.style.opacity = 1;
75
+
76
+ this.minimized = true;
77
+ }
78
+
79
+ maximize() {
80
+ if (this.minimized === false) {
81
+ return;
82
+ }
83
+
84
+ this.element.setAttribute('aria-hidden', 'false');
85
+ this.element.classList.remove('is-minimized');
86
+
87
+ // eslint-disable-next-line no-unused-expressions
88
+ this.element.offsetHeight; // force reflow
89
+
90
+ this.updateButtonPosition();
91
+ this.button.setAttribute('aria-expanded', 'true');
92
+ this.button.classList.remove('is-fixed');
93
+ this.button.style.opacity = 0;
94
+
95
+ this.minimized = false;
96
+ }
62
97
  }
63
98
 
99
+ const overviewNavigations = document.querySelectorAll('.js-overview-navigation');
100
+
64
101
  if (overviewNavigations) {
65
- if (window.innerWidth > 960) {
66
- [].forEach.call(overviewNavigations, overViewNav);
67
- }
102
+ [].forEach.call(
103
+ overviewNavigations,
104
+ (overviewNavigation) => new OverviewNavigation(overviewNavigation),
105
+ );
68
106
  }