@internetstiftelsen/styleguide 2.23.2-beta.0.2 → 2.23.4

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 (8) hide show
  1. package/dist/assets/js/youtube.js +38 -9
  2. package/package.json +1 -1
  3. package/src/.DS_Store +0 -0
  4. package/src/assets/js/youtube.js +34 -9
  5. package/src/brandbook/.DS_Store +0 -0
  6. package/src/brandbook/internetstiftelsen/bildman/303/251r/bildman/303/251r.config.js +5 -0
  7. package/src/brandbook/internetstiftelsen/tonalitet och spr/303/245kbruk/tonalitet och spr/303/245kbruk.config.js" +5 -0
  8. package/src/configurations/_wordpress.scss +9 -0
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,10 +13,8 @@ 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) {
@@ -32,16 +34,28 @@ function createCover(el, id) {
32
34
  }
33
35
 
34
36
  function setupYoutubePlayer(el) {
35
- var playerEl = document.createElement('div');
37
+ var playerEl = void 0;
36
38
  var id = el.getAttribute('data-youtube');
37
39
 
40
+ if (el.youtube) {
41
+ playerEl = el.querySelector('[data-youtube-container]');
42
+
43
+ playerEl.parentNode.removeChild(playerEl);
44
+ el.youtube.destroy();
45
+ el.youtube = null;
46
+ el.removeAttribute('data-youtube-ready');
47
+ }
48
+
49
+ playerEl = document.createElement('div');
50
+
38
51
  if (!el.getElementsByTagName('img').length) {
39
52
  createCover(el, id);
40
53
  }
41
54
 
55
+ playerEl.setAttribute('data-youtube-container', true);
42
56
  el.appendChild(playerEl);
43
57
 
44
- var player = new YT.Player(playerEl, {
58
+ el.youtube = new YT.Player(playerEl, {
45
59
  height: '100%',
46
60
  width: '100%',
47
61
  videoId: id,
@@ -59,18 +73,33 @@ function setupYoutubePlayer(el) {
59
73
  }
60
74
  }
61
75
  });
76
+ }
62
77
 
63
- el.youtube = player;
78
+ function delegateClick(e) {
79
+ var el = e.target.closest('[data-youtube]');
80
+
81
+ if (!el || !el.youtube) {
82
+ return;
83
+ }
84
+
85
+ el.youtube.playVideo();
64
86
  }
65
87
 
66
- window.onYouTubeIframeAPIReady = function () {
67
- var players = document.querySelectorAll('[data-youtube]');
88
+ // eslint-disable-next-line import/prefer-default-export
89
+ function setupPlayers(container) {
90
+ var players = container.querySelectorAll('[data-youtube]');
68
91
 
69
92
  if (!players.length) {
70
93
  return;
71
94
  }
72
95
 
73
96
  [].forEach.call(players, setupYoutubePlayer);
97
+ }
98
+
99
+ window.onYouTubeIframeAPIReady = function () {
100
+ setupPlayers(document);
101
+
102
+ document.body.addEventListener('click', delegateClick);
74
103
  };
75
104
 
76
105
  loadYoutubeAPI();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "2.23.2-beta.0.2",
3
+ "version": "2.23.4",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/.DS_Store ADDED
Binary file
package/src/assets/js/youtube.js CHANGED
@@ -7,10 +7,8 @@ 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) {
@@ -30,16 +28,28 @@ function createCover(el, id) {
30
28
  }
31
29
 
32
30
  function setupYoutubePlayer(el) {
33
- const playerEl = document.createElement('div');
31
+ let playerEl;
34
32
  const id = el.getAttribute('data-youtube');
35
33
 
34
+ if (el.youtube) {
35
+ playerEl = el.querySelector('[data-youtube-container]');
36
+
37
+ playerEl.parentNode.removeChild(playerEl);
38
+ el.youtube.destroy();
39
+ el.youtube = null;
40
+ el.removeAttribute('data-youtube-ready');
41
+ }
42
+
43
+ playerEl = document.createElement('div');
44
+
36
45
  if (!el.getElementsByTagName('img').length) {
37
46
  createCover(el, id);
38
47
  }
39
48
 
49
+ playerEl.setAttribute('data-youtube-container', true);
40
50
  el.appendChild(playerEl);
41
51
 
42
- const player = new YT.Player(playerEl, {
52
+ el.youtube = new YT.Player(playerEl, {
43
53
  height: '100%',
44
54
  width: '100%',
45
55
  videoId: id,
@@ -53,18 +63,33 @@ function setupYoutubePlayer(el) {
53
63
  onStateChange: (e) => onPlayerStateChange(el, e),
54
64
  },
55
65
  });
66
+ }
56
67
 
57
- el.youtube = player;
68
+ function delegateClick(e) {
69
+ const el = e.target.closest('[data-youtube]');
70
+
71
+ if (!el || !el.youtube) {
72
+ return;
73
+ }
74
+
75
+ el.youtube.playVideo();
58
76
  }
59
77
 
60
- window.onYouTubeIframeAPIReady = () => {
61
- const players = document.querySelectorAll('[data-youtube]');
78
+ // eslint-disable-next-line import/prefer-default-export
79
+ export function setupPlayers(container) {
80
+ const players = container.querySelectorAll('[data-youtube]');
62
81
 
63
82
  if (!players.length) {
64
83
  return;
65
84
  }
66
85
 
67
86
  [].forEach.call(players, setupYoutubePlayer);
87
+ }
88
+
89
+ window.onYouTubeIframeAPIReady = () => {
90
+ setupPlayers(document);
91
+
92
+ document.body.addEventListener('click', delegateClick);
68
93
  };
69
94
 
70
95
  loadYoutubeAPI();
package/src/brandbook/.DS_Store ADDED
Binary file
package/src/brandbook/internetstiftelsen/bildman/303/251r/bildman/303/251r.config.js ADDED
@@ -0,0 +1,5 @@
1
+ module.exports = {
2
+ status: 'ready',
3
+ label: 'Bildmanér',
4
+ title: 'Bildmanér'
5
+ }
package/src/brandbook/internetstiftelsen/tonalitet och spr/303/245kbruk/tonalitet och spr/303/245kbruk.config.js" ADDED
@@ -0,0 +1,5 @@
1
+ module.exports = {
2
+ status: 'ready',
3
+ label: 'Tonalitet och språkbruk',
4
+ title: 'Tonalitet och språkbruk'
5
+ }
package/src/configurations/_wordpress.scss CHANGED
@@ -339,3 +339,12 @@ div.aligncenter {
339
339
  border-radius: $border-radius;
340
340
  overflow: hidden;
341
341
  }
342
+
343
+ .wp-block-graph {
344
+ padding-top: rhythm(4);
345
+ margin-top: rhythm(4);
346
+
347
+ & + & {
348
+ margin-top: -#{rhythm(3)};
349
+ }
350
+ }