@internetstiftelsen/styleguide 2.24.5 → 2.24.6

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/assets/js/youtube.js +26 -8
  2. package/package.json +1 -1
  3. package/src/assets/js/youtube.js +26 -8
package/dist/assets/js/youtube.js CHANGED
@@ -5,9 +5,16 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.setupPlayers = setupPlayers;
7
7
  function loadYoutubeAPI() {
8
+ var id = 'iisYoutubeAPI';
9
+
10
+ if (document.getElementById(id)) {
11
+ return;
12
+ }
13
+
8
14
  var tag = document.createElement('script');
9
15
  var firstScript = document.getElementsByTagName('script')[0];
10
16
 
17
+ tag.id = id;
11
18
  tag.src = 'https://www.youtube.com/iframe_api';
12
19
 
13
20
  firstScript.parentNode.insertBefore(tag, firstScript);
@@ -27,12 +34,18 @@ function onPlayerStateChange(el, e) {
27
34
  }
28
35
  }
29
36
 
30
- function createCover(el, id) {
37
+ function createCover(el) {
38
+ if (el.getElementsByTagName('img').length) {
39
+ return;
40
+ }
41
+
42
+ var id = el.getAttribute('data-youtube');
31
43
  var url = 'https://i3.ytimg.com/vi/' + id + '/maxresdefault.jpg';
32
44
  var img = document.createElement('img');
33
45
 
34
46
  el.appendChild(img);
35
47
 
48
+ img.loading = 'lazy';
36
49
  img.src = url;
37
50
  }
38
51
 
@@ -53,10 +66,6 @@ function setupYoutubePlayer(el) {
53
66
 
54
67
  playerEl = document.createElement('div');
55
68
 
56
- if (!el.getElementsByTagName('img').length) {
57
- createCover(el, id);
58
- }
59
-
60
69
  playerEl.setAttribute('data-youtube-container', true);
61
70
  el.appendChild(playerEl);
62
71
 
@@ -67,6 +76,7 @@ function setupYoutubePlayer(el) {
67
76
  playerVars: {
68
77
  // https://developers.google.com/youtube/player_parameters#Parameters
69
78
  playsinline: 1,
79
+ autoplay: true,
70
80
  rel: 0
71
81
  },
72
82
  events: {
@@ -78,12 +88,21 @@ function setupYoutubePlayer(el) {
78
88
  }
79
89
  }
80
90
  });
91
+
92
+ el.getElementsByTagName('img')[0].style.zIndex = '-1';
93
+ el.getElementsByTagName('button')[0].style.display = 'none';
81
94
  }
82
95
 
83
96
  function delegateClick(e) {
84
97
  var el = e.target.closest('[data-youtube]');
85
98
 
86
- if (!el || !el.youtube) {
99
+ if (!el) {
100
+ return;
101
+ }
102
+
103
+ if (!el.youtube) {
104
+ setupYoutubePlayer(el);
105
+
87
106
  return;
88
107
  }
89
108
 
@@ -98,12 +117,11 @@ function setupPlayers(container) {
98
117
  return;
99
118
  }
100
119
 
101
- [].forEach.call(players, setupYoutubePlayer);
120
+ [].forEach.call(players, createCover);
102
121
  }
103
122
 
104
123
  window.onYouTubeIframeAPIReady = function () {
105
124
  setupPlayers(document);
106
-
107
125
  document.body.addEventListener('click', delegateClick);
108
126
  };
109
127
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "2.24.5",
3
+ "version": "2.24.6",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/assets/js/youtube.js CHANGED
@@ -1,7 +1,14 @@
1
1
  function loadYoutubeAPI() {
2
+ const id = 'iisYoutubeAPI';
3
+
4
+ if (document.getElementById(id)) {
5
+ return;
6
+ }
7
+
2
8
  const tag = document.createElement('script');
3
9
  const firstScript = document.getElementsByTagName('script')[0];
4
10
 
11
+ tag.id = id;
5
12
  tag.src = 'https://www.youtube.com/iframe_api';
6
13
 
7
14
  firstScript.parentNode.insertBefore(tag, firstScript);
@@ -21,12 +28,18 @@ function onPlayerStateChange(el, e) {
21
28
  }
22
29
  }
23
30
 
24
- function createCover(el, id) {
31
+ function createCover(el) {
32
+ if (el.getElementsByTagName('img').length) {
33
+ return;
34
+ }
35
+
36
+ const id = el.getAttribute('data-youtube');
25
37
  const url = `https://i3.ytimg.com/vi/${id}/maxresdefault.jpg`;
26
38
  const img = document.createElement('img');
27
39
 
28
40
  el.appendChild(img);
29
41
 
42
+ img.loading = 'lazy';
30
43
  img.src = url;
31
44
  }
32
45
 
@@ -47,10 +60,6 @@ function setupYoutubePlayer(el) {
47
60
 
48
61
  playerEl = document.createElement('div');
49
62
 
50
- if (!el.getElementsByTagName('img').length) {
51
- createCover(el, id);
52
- }
53
-
54
63
  playerEl.setAttribute('data-youtube-container', true);
55
64
  el.appendChild(playerEl);
56
65
 
@@ -61,6 +70,7 @@ function setupYoutubePlayer(el) {
61
70
  playerVars: {
62
71
  // https://developers.google.com/youtube/player_parameters#Parameters
63
72
  playsinline: 1,
73
+ autoplay: true,
64
74
  rel: 0,
65
75
  },
66
76
  events: {
@@ -68,12 +78,21 @@ function setupYoutubePlayer(el) {
68
78
  onStateChange: (e) => onPlayerStateChange(el, e),
69
79
  },
70
80
  });
81
+
82
+ el.getElementsByTagName('img')[0].style.zIndex = '-1';
83
+ el.getElementsByTagName('button')[0].style.display = 'none';
71
84
  }
72
85
 
73
86
  function delegateClick(e) {
74
87
  const el = e.target.closest('[data-youtube]');
75
88
 
76
- if (!el || !el.youtube) {
89
+ if (!el) {
90
+ return;
91
+ }
92
+
93
+ if (!el.youtube) {
94
+ setupYoutubePlayer(el);
95
+
77
96
  return;
78
97
  }
79
98
 
@@ -88,12 +107,11 @@ export function setupPlayers(container) {
88
107
  return;
89
108
  }
90
109
 
91
- [].forEach.call(players, setupYoutubePlayer);
110
+ [].forEach.call(players, createCover);
92
111
  }
93
112
 
94
113
  window.onYouTubeIframeAPIReady = () => {
95
114
  setupPlayers(document);
96
-
97
115
  document.body.addEventListener('click', delegateClick);
98
116
  };
99
117