@internetstiftelsen/styleguide 2.22.3-beta.0.43 → 2.22.3-beta.0.46

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/assets/js/youtube.js +43 -9
  2. package/package.json +1 -1
  3. package/src/assets/js/youtube.js +39 -9
  4. package/src/structures/_article.scss +1 -1
package/dist/assets/js/youtube.js CHANGED
@@ -1,5 +1,9 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.setupPlayers = setupPlayers;
3
7
  function loadYoutubeAPI() {
4
8
  var tag = document.createElement('script');
5
9
  var firstScript = document.getElementsByTagName('script')[0];
@@ -9,16 +13,17 @@ function loadYoutubeAPI() {
9
13
  firstScript.parentNode.insertBefore(tag, firstScript);
10
14
  }
11
15
 
12
- function onPlayerReady(el, e) {
13
- el.addEventListener('click', function () {
14
- e.target.playVideo();
15
- });
16
+ function onPlayerReady(el) {
17
+ el.setAttribute('data-youtube-ready', 'true');
16
18
  }
17
19
 
18
20
  function onPlayerStateChange(el, e) {
19
21
  if (e.data === YT.PlayerState.PLAYING) {
20
22
  el.getElementsByTagName('img')[0].style.zIndex = '-1';
21
23
  el.getElementsByTagName('button')[0].style.display = 'none';
24
+ } else if (e.data === YT.PlayerState.UNSTARTED) {
25
+ el.getElementsByTagName('img')[0].style.zIndex = null;
26
+ el.getElementsByTagName('button')[0].style.display = null;
22
27
  }
23
28
  }
24
29
 
@@ -32,16 +37,30 @@ function createCover(el, id) {
32
37
  }
33
38
 
34
39
  function setupYoutubePlayer(el) {
35
- var playerEl = document.createElement('div');
40
+ var playerEl = void 0;
36
41
  var id = el.getAttribute('data-youtube');
37
42
 
43
+ if (el.youtube) {
44
+ playerEl = el.querySelector('[data-youtube-container]');
45
+
46
+ playerEl.parentNode.removeChild(playerEl);
47
+ el.youtube.destroy();
48
+ el.youtube = null;
49
+ el.removeAttribute('data-youtube-ready');
50
+ el.getElementsByTagName('img')[0].style.zIndex = null;
51
+ el.getElementsByTagName('button')[0].style.display = null;
52
+ }
53
+
54
+ playerEl = document.createElement('div');
55
+
38
56
  if (!el.getElementsByTagName('img').length) {
39
57
  createCover(el, id);
40
58
  }
41
59
 
60
+ playerEl.setAttribute('data-youtube-container', true);
42
61
  el.appendChild(playerEl);
43
62
 
44
- var player = new YT.Player(playerEl, {
63
+ el.youtube = new YT.Player(playerEl, {
45
64
  height: '100%',
46
65
  width: '100%',
47
66
  videoId: id,
@@ -59,18 +78,33 @@ function setupYoutubePlayer(el) {
59
78
  }
60
79
  }
61
80
  });
81
+ }
62
82
 
63
- el.youtube = player;
83
+ function delegateClick(e) {
84
+ var el = e.target.closest('[data-youtube]');
85
+
86
+ if (!el || !el.youtube) {
87
+ return;
88
+ }
89
+
90
+ el.youtube.playVideo();
64
91
  }
65
92
 
66
- window.onYouTubeIframeAPIReady = function () {
67
- var players = document.querySelectorAll('[data-youtube]');
93
+ // eslint-disable-next-line import/prefer-default-export
94
+ function setupPlayers(container) {
95
+ var players = container.querySelectorAll('[data-youtube]');
68
96
 
69
97
  if (!players.length) {
70
98
  return;
71
99
  }
72
100
 
73
101
  [].forEach.call(players, setupYoutubePlayer);
102
+ }
103
+
104
+ window.onYouTubeIframeAPIReady = function () {
105
+ setupPlayers(document);
106
+
107
+ document.body.addEventListener('click', delegateClick);
74
108
  };
75
109
 
76
110
  loadYoutubeAPI();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "2.22.3-beta.0.43",
3
+ "version": "2.22.3-beta.0.46",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/assets/js/youtube.js CHANGED
@@ -7,16 +7,17 @@ function loadYoutubeAPI() {
7
7
  firstScript.parentNode.insertBefore(tag, firstScript);
8
8
  }
9
9
 
10
- function onPlayerReady(el, e) {
11
- el.addEventListener('click', () => {
12
- e.target.playVideo();
13
- });
10
+ function onPlayerReady(el) {
11
+ el.setAttribute('data-youtube-ready', 'true');
14
12
  }
15
13
 
16
14
  function onPlayerStateChange(el, e) {
17
15
  if (e.data === YT.PlayerState.PLAYING) {
18
16
  el.getElementsByTagName('img')[0].style.zIndex = '-1';
19
17
  el.getElementsByTagName('button')[0].style.display = 'none';
18
+ } else if (e.data === YT.PlayerState.UNSTARTED) {
19
+ el.getElementsByTagName('img')[0].style.zIndex = null;
20
+ el.getElementsByTagName('button')[0].style.display = null;
20
21
  }
21
22
  }
22
23
 
@@ -30,16 +31,30 @@ function createCover(el, id) {
30
31
  }
31
32
 
32
33
  function setupYoutubePlayer(el) {
33
- const playerEl = document.createElement('div');
34
+ let playerEl;
34
35
  const id = el.getAttribute('data-youtube');
35
36
 
37
+ if (el.youtube) {
38
+ playerEl = el.querySelector('[data-youtube-container]');
39
+
40
+ playerEl.parentNode.removeChild(playerEl);
41
+ el.youtube.destroy();
42
+ el.youtube = null;
43
+ el.removeAttribute('data-youtube-ready');
44
+ el.getElementsByTagName('img')[0].style.zIndex = null;
45
+ el.getElementsByTagName('button')[0].style.display = null;
46
+ }
47
+
48
+ playerEl = document.createElement('div');
49
+
36
50
  if (!el.getElementsByTagName('img').length) {
37
51
  createCover(el, id);
38
52
  }
39
53
 
54
+ playerEl.setAttribute('data-youtube-container', true);
40
55
  el.appendChild(playerEl);
41
56
 
42
- const player = new YT.Player(playerEl, {
57
+ el.youtube = new YT.Player(playerEl, {
43
58
  height: '100%',
44
59
  width: '100%',
45
60
  videoId: id,
@@ -53,18 +68,33 @@ function setupYoutubePlayer(el) {
53
68
  onStateChange: (e) => onPlayerStateChange(el, e),
54
69
  },
55
70
  });
71
+ }
56
72
 
57
- el.youtube = player;
73
+ function delegateClick(e) {
74
+ const el = e.target.closest('[data-youtube]');
75
+
76
+ if (!el || !el.youtube) {
77
+ return;
78
+ }
79
+
80
+ el.youtube.playVideo();
58
81
  }
59
82
 
60
- window.onYouTubeIframeAPIReady = () => {
61
- const players = document.querySelectorAll('[data-youtube]');
83
+ // eslint-disable-next-line import/prefer-default-export
84
+ export function setupPlayers(container) {
85
+ const players = container.querySelectorAll('[data-youtube]');
62
86
 
63
87
  if (!players.length) {
64
88
  return;
65
89
  }
66
90
 
67
91
  [].forEach.call(players, setupYoutubePlayer);
92
+ }
93
+
94
+ window.onYouTubeIframeAPIReady = () => {
95
+ setupPlayers(document);
96
+
97
+ document.body.addEventListener('click', delegateClick);
68
98
  };
69
99
 
70
100
  loadYoutubeAPI();
package/src/structures/_article.scss CHANGED
@@ -38,7 +38,7 @@
38
38
  > ul,
39
39
  > ol,
40
40
  > div:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
41
- > figure:not(.wp-block-iis-info):not(.wp-block-image):not(.wp-block-iis-hero):not(.wp-block-iis-grid):not([class*='accordion']),
41
+ > figure,
42
42
  > .wp-block-iis-card,
43
43
  > .wp-block-image > figure,
44
44
  > blockquote {