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');
20 var url = btn.getAttribute('data-url');
26 * @param {jQuery.Event} event
27 * The event triggered by a `click` event.
29 * @return {bool}|{mixed}
30 * Return false if url is not available.
32 function play(event) {
33 event.preventDefault();
35 // oEmbed/ Soundcloud needs internet, fails on disconnected local.
41 var player = target.parentNode;
42 var playing = document.querySelector('.is-playing');
44 url = target.getAttribute('data-url');
46 // First, reset any video to avoid multiple videos from playing.
47 if (playing !== null) {
48 playing.className = playing.className.replace(/(\S+)playing/, '');
51 // Appends the iframe.
52 player.className += ' is-playing';
53 newIframe = document.createElement('iframe');
54 newIframe.className = 'media__iframe media__element';
55 newIframe.setAttribute('src', url);
56 newIframe.setAttribute('allowfullscreen', true);
58 player.appendChild(newIframe);
64 * @param {jQuery.Event} event
65 * The event triggered by a `click` event.
67 function stop(event) {
68 event.preventDefault();
71 var player = target.parentNode;
72 var iframe = player.querySelector('iframe');
74 if (player.className.match('is-playing')) {
75 player.className = player.className.replace(/(\S+)playing/, '');
78 if (iframe !== null) {
79 player.removeChild(iframe);
83 // Remove iframe to avoid browser requesting them till clicked.
84 // The iframe is there as Blazy supports non-lazyloaded/ non-JS iframes.
85 if (iframe !== null) {
86 iframe.parentNode.removeChild(iframe);
89 // Plays the media player.
90 _db.on(t, 'click', '.media__icon--play', play);
93 _db.on(t, 'click', '.media__icon--close', stop);
95 t.className += ' media--player--on';
99 * Attaches Blazy media behavior to HTML element.
101 * @type {Drupal~behavior}
103 Drupal.behaviors.blazyMedia = {
104 attach: function (context) {
105 var players = context.querySelectorAll('.media--player:not(.media--player--on)');
106 _db.once(_db.forEach(players, blazyMedia));