@internetstiftelsen/styleguide 2.24.35 → 2.24.36

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 (3) hide show
  1. package/dist/organisms/timeline/timeline.js +24 -24
  2. package/package.json +1 -1
  3. package/src/organisms/timeline/timeline.js +25 -26
package/dist/organisms/timeline/timeline.js CHANGED
@@ -87,34 +87,39 @@ function animateProgressBar() {
87
87
 
88
88
  function isInViewport(element) {
89
89
  var top = element.offsetTop;
90
- var height = element.offsetHeight;
90
+ // const height = element.offsetHeight;
91
91
 
92
92
  while (element.offsetParent) {
93
93
  element = element.offsetParent; // eslint-disable-line
94
94
  top += element.offsetTop;
95
95
  }
96
96
 
97
- return top < window.pageYOffset + window.innerHeight && top + height > window.pageYOffset;
97
+ return top < window.scrollY + window.innerHeight && top > window.scrollY;
98
98
  }
99
99
 
100
100
  function decadeIsVisible() {
101
101
  [].forEach.call(decadeSections, function (decadeSection) {
102
- if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
103
- decadeSection.classList.add('is-in-view');
104
-
105
- var decade = decadeSection.id;
106
-
107
- dataLayer.push({
108
- event: 'timeline',
109
- eventInfo: {
110
- category: 'timeline',
111
- action: 'active_year',
112
- label: decade
113
- }
114
- });
115
- } else if (!isInViewport(decadeSection)) {
116
- decadeSection.classList.remove('is-in-view');
117
- }
102
+ // Don't trigger Decade Visible too fast to prevent dataLayer.push
103
+ // to trigger while user is scrolled past a decade.
104
+ var timeOut = 1000;
105
+ var viewTimeout = setTimeout(function () {
106
+ if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
107
+ decadeSection.classList.add('is-in-view');
108
+ var decadeId = decadeSection.id;
109
+
110
+ dataLayer.push({
111
+ event: 'timeline',
112
+ eventInfo: {
113
+ category: 'timeline',
114
+ action: 'active_year',
115
+ label: decadeId
116
+ }
117
+ });
118
+ } else if (!isInViewport(decadeSection)) {
119
+ decadeSection.classList.remove('is-in-view');
120
+ clearTimeout(viewTimeout);
121
+ }
122
+ }, timeOut);
118
123
  });
119
124
  }
120
125
 
@@ -131,12 +136,7 @@ if (progressBar) {
131
136
  });
132
137
  window.addEventListener('scroll', function () {
133
138
  animateProgressBar();
134
-
135
- // Don't trigger Decade Visible too fast to prevent dataLayer.push
136
- // to trigger while user is scrolled past a decade.
137
- setTimeout(function () {
138
- decadeIsVisible();
139
- }, 1500);
139
+ decadeIsVisible();
140
140
  });
141
141
  }
142
142
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "2.24.35",
3
+ "version": "2.24.36",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/organisms/timeline/timeline.js CHANGED
@@ -81,7 +81,7 @@ function animateProgressBar() {
81
81
 
82
82
  function isInViewport(element) {
83
83
  let top = element.offsetTop;
84
- const height = element.offsetHeight;
84
+ // const height = element.offsetHeight;
85
85
 
86
86
  while (element.offsetParent) {
87
87
  element = element.offsetParent; // eslint-disable-line
@@ -89,30 +89,34 @@ function isInViewport(element) {
89
89
  }
90
90
 
91
91
  return (
92
- top < (window.pageYOffset + window.innerHeight)
93
- && (top + height) > window.pageYOffset
92
+ top < (window.scrollY + window.innerHeight)
93
+ && top > window.scrollY
94
94
  );
95
95
  }
96
96
 
97
97
  function decadeIsVisible() {
98
98
  [].forEach.call(decadeSections, (decadeSection) => {
99
- if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
100
- decadeSection.classList.add('is-in-view');
101
-
102
- const decade = decadeSection.id;
103
-
104
- dataLayer.push({
105
- event: 'timeline',
106
- eventInfo: {
107
- category: 'timeline',
108
- action: 'active_year',
109
- label: decade,
110
- },
111
- });
112
-
113
- } else if (!isInViewport(decadeSection)) {
114
- decadeSection.classList.remove('is-in-view');
115
- }
99
+ // Don't trigger Decade Visible too fast to prevent dataLayer.push
100
+ // to trigger while user is scrolled past a decade.
101
+ const timeOut = 1000;
102
+ const viewTimeout = setTimeout(() => {
103
+ if (isInViewport(decadeSection) && !decadeSection.classList.contains('is-in-view')) {
104
+ decadeSection.classList.add('is-in-view');
105
+ const decadeId = decadeSection.id;
106
+
107
+ dataLayer.push({
108
+ event: 'timeline',
109
+ eventInfo: {
110
+ category: 'timeline',
111
+ action: 'active_year',
112
+ label: decadeId,
113
+ },
114
+ });
115
+ } else if (!isInViewport(decadeSection)) {
116
+ decadeSection.classList.remove('is-in-view');
117
+ clearTimeout(viewTimeout);
118
+ }
119
+ }, timeOut);
116
120
  });
117
121
  }
118
122
 
@@ -129,12 +133,7 @@ if (progressBar) {
129
133
  });
130
134
  window.addEventListener('scroll', () => {
131
135
  animateProgressBar();
132
-
133
- // Don't trigger Decade Visible too fast to prevent dataLayer.push
134
- // to trigger while user is scrolled past a decade.
135
- setTimeout(() => {
136
- decadeIsVisible();
137
- }, 1500);
136
+ decadeIsVisible();
138
137
  });
139
138
  }
140
139