@internetstiftelsen/styleguide 2.25.9-beta.0.2 → 2.26.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.
Files changed (4) hide show
  1. package/dist/molecules/overview-navigation/overview-navigation.js +26 -10
  2. package/package.json +1 -1
  3. package/src/molecules/overview-navigation/_overview-navigation.scss +17 -6
  4. package/src/molecules/overview-navigation/overview-navigation.js +26 -10
package/dist/molecules/overview-navigation/overview-navigation.js CHANGED
@@ -14,7 +14,7 @@ var OverviewNavigation = function () {
14
14
  this.button = this.element.querySelector('.js-overview-navigation-button');
15
15
  this.isSmallScreen = false;
16
16
  this.isOutOfView = false;
17
- this.minimized = false;
17
+ this.minimized = null;
18
18
 
19
19
  // a11y-toggle doesn't have a callback for when it's done initializing
20
20
  // so we have to wait for the next tick
@@ -44,16 +44,12 @@ var OverviewNavigation = function () {
44
44
  }, {
45
45
  key: 'onResize',
46
46
  value: function onResize() {
47
- this.updateButtonPosition();
48
-
49
- this.isSmallScreen = window.innerWidth < 960;
47
+ this.isSmallScreen = window.innerWidth <= 961;
50
48
  this.update();
51
49
  }
52
50
  }, {
53
51
  key: 'onScroll',
54
52
  value: function onScroll() {
55
- this.updateButtonPosition();
56
-
57
53
  var viewportOffset = this.element.getBoundingClientRect();
58
54
 
59
55
  if (viewportOffset.top < 0) {
@@ -67,32 +63,52 @@ var OverviewNavigation = function () {
67
63
  }, {
68
64
  key: 'updateButtonPosition',
69
65
  value: function updateButtonPosition() {
70
- var viewportOffset = this.element.getBoundingClientRect();
66
+ var elementOffset = this.element.getBoundingClientRect();
67
+ var buttonRect = this.button.getBoundingClientRect();
71
68
 
72
- this.button.style.left = viewportOffset.left + 'px';
73
- this.button.style.top = viewportOffset.top + 'px';
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';
74
72
  }
75
73
  }, {
76
74
  key: 'minimize',
77
75
  value: function minimize() {
78
- if (this.minimized) {
76
+ if (this.minimized === true) {
79
77
  return;
80
78
  }
81
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
+
82
86
  this.element.setAttribute('aria-hidden', 'true');
83
87
  this.element.classList.add('is-minimized');
88
+
84
89
  this.button.setAttribute('aria-expanded', 'false');
85
90
  this.button.classList.add('is-fixed');
91
+ this.button.style.opacity = 1;
86
92
 
87
93
  this.minimized = true;
88
94
  }
89
95
  }, {
90
96
  key: 'maximize',
91
97
  value: function maximize() {
98
+ if (this.minimized === false) {
99
+ return;
100
+ }
101
+
92
102
  this.element.setAttribute('aria-hidden', 'false');
93
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();
94
109
  this.button.setAttribute('aria-expanded', 'true');
95
110
  this.button.classList.remove('is-fixed');
111
+ this.button.style.opacity = 0;
96
112
 
97
113
  this.minimized = false;
98
114
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "2.25.9-beta.0.2",
3
+ "version": "2.26.0",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/molecules/overview-navigation/_overview-navigation.scss CHANGED
@@ -64,13 +64,13 @@
64
64
 
65
65
  @include e(button) {
66
66
  position: fixed;
67
+ bottom: auto;
68
+ right: auto;
67
69
  display: flex;
68
70
  opacity: 0;
69
71
  pointer-events: none;
70
72
  padding: 0;
71
73
  border: 0;
72
- transition: left 0.25s ease-out, top 0.25s ease-out, opacity 0.01s ease 0.26s;
73
- background-color: transparent;
74
74
  width: rem(60px);
75
75
  height: rem(60px);
76
76
  flex-shrink: 0;
@@ -112,11 +112,17 @@
112
112
  }
113
113
 
114
114
  &.is-fixed {
115
- top: calc(100vh - rhythm(11)) !important;
116
- left: calc(100% - rhythm(8)) !important;
117
- opacity: 1;
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;
118
120
  pointer-events: auto;
119
- transition: left 0.25s ease-out, top 0.25s ease-out;
121
+
122
+ @include bp-up(xxl) {
123
+ //left: auto !important;
124
+ right: calc(50vw - 680px) !important;
125
+ }
120
126
  }
121
127
  }
122
128
 
@@ -141,5 +147,10 @@
141
147
  z-index: z_index(middlegroundImportant);
142
148
  margin-top: 0;
143
149
  margin-bottom: 0;
150
+
151
+ @include bp-up(xxl) {
152
+ right: calc(50vw - 680px) !important;
153
+ }
144
154
  }
145
155
  }
156
+
package/src/molecules/overview-navigation/overview-navigation.js CHANGED
@@ -4,7 +4,7 @@ class OverviewNavigation {
4
4
  this.button = this.element.querySelector('.js-overview-navigation-button');
5
5
  this.isSmallScreen = false;
6
6
  this.isOutOfView = false;
7
- this.minimized = false;
7
+ this.minimized = null;
8
8
 
9
9
  // a11y-toggle doesn't have a callback for when it's done initializing
10
10
  // so we have to wait for the next tick
@@ -30,15 +30,11 @@ class OverviewNavigation {
30
30
  }
31
31
 
32
32
  onResize() {
33
- this.updateButtonPosition();
34
-
35
- this.isSmallScreen = window.innerWidth < 960;
33
+ this.isSmallScreen = window.innerWidth <= 961;
36
34
  this.update();
37
35
  }
38
36
 
39
37
  onScroll() {
40
- this.updateButtonPosition();
41
-
42
38
  const viewportOffset = this.element.getBoundingClientRect();
43
39
 
44
40
  if (viewportOffset.top < 0) {
@@ -51,30 +47,50 @@ class OverviewNavigation {
51
47
  }
52
48
 
53
49
  updateButtonPosition() {
54
- const viewportOffset = this.element.getBoundingClientRect();
50
+ const elementOffset = this.element.getBoundingClientRect();
51
+ const buttonRect = this.button.getBoundingClientRect();
55
52
 
56
- this.button.style.left = `${viewportOffset.left}px`;
57
- this.button.style.top = `${viewportOffset.top}px`;
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`;
58
56
  }
59
57
 
60
58
  minimize() {
61
- if (this.minimized) {
59
+ if (this.minimized === true) {
62
60
  return;
63
61
  }
64
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
+
65
69
  this.element.setAttribute('aria-hidden', 'true');
66
70
  this.element.classList.add('is-minimized');
71
+
67
72
  this.button.setAttribute('aria-expanded', 'false');
68
73
  this.button.classList.add('is-fixed');
74
+ this.button.style.opacity = 1;
69
75
 
70
76
  this.minimized = true;
71
77
  }
72
78
 
73
79
  maximize() {
80
+ if (this.minimized === false) {
81
+ return;
82
+ }
83
+
74
84
  this.element.setAttribute('aria-hidden', 'false');
75
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();
76
91
  this.button.setAttribute('aria-expanded', 'true');
77
92
  this.button.classList.remove('is-fixed');
93
+ this.button.style.opacity = 0;
78
94
 
79
95
  this.minimized = false;
80
96
  }