3 * Provides Media module integration.
6 (function (Drupal, _db) {
11 * Blazy media utility functions.
13 * @param {HTMLElement} media
14 * The media player HTML element.
16 function blazyMedia(media) {
18 var iframe = t.querySelector('iframe');
19 var btn = t.querySelector('.media__icon--play');
25 var url = btn.getAttribute('data-url');
31 * @param {jQuery.Event} event
32 * The event triggered by a `click` event.
34 * @return {bool}|{mixed}
35 * Return false if url is not available.
37 function play(event) {
38 event.preventDefault();
40 // oEmbed/ Soundcloud needs internet, fails on disconnected local.
46 var player = target.parentNode;
47 var playing = document.querySelector('.is-playing');
48 var iframe = player.querySelector('iframe');
50 url = target.getAttribute('data-url');
52 // First, reset any video to avoid multiple videos from playing.
53 if (playing !== null) {
54 playing.className = playing.className.replace(/(\S+)playing/, '');
57 // Appends the iframe.
58 player.className += ' is-playing';
59 newIframe = document.createElement('iframe');
60 newIframe.className = 'media__iframe media__element';
61 newIframe.setAttribute('src', url);
62 newIframe.setAttribute('allowfullscreen', true);
64 if (iframe !== null) {
65 player.removeChild(iframe);
68 player.appendChild(newIframe);
74 * @param {jQuery.Event} event
75 * The event triggered by a `click` event.
77 function stop(event) {
78 event.preventDefault();
81 var player = target.parentNode;
82 var iframe = player.querySelector('iframe.media__element');
84 if (player.className.match('is-playing')) {
85 player.className = player.className.replace(/(\S+)playing/, '');
88 if (iframe !== null) {
89 player.removeChild(iframe);
93 // Remove iframe to avoid browser requesting them till clicked.
94 // The iframe is there as Blazy supports non-lazyloaded/ non-JS iframes.
95 if (iframe !== null) {
96 iframe.parentNode.removeChild(iframe);
99 // Plays the media player.
100 _db.on(t, 'click', '.media__icon--play', play);
103 _db.on(t, 'click', '.media__icon--close', stop);
105 t.className += ' media--player--on';
109 * Attaches Blazy media behavior to HTML element.
111 * @type {Drupal~behavior}
113 Drupal.behaviors.blazyMedia = {
114 attach: function (context) {
115 var players = context.querySelectorAll('.media--switch.media--player:not(.media--player--on)');
116 _db.once(_db.forEach(players, blazyMedia));