aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/blazy/js/blazy.media.js

   1 /**
   2  * @file
   3  * Provides Media module integration.
   4  */
   5
   6 (function (Drupal, _db) {
   7
   8   'use strict';
   9
  10   /**
  11    * Blazy media utility functions.
  12    *
  13    * @param {HTMLElement} media
  14    *   The media player HTML element.
  15    */
  16   function blazyMedia(media) {
  17     var t = media;
  18     var iframe = t.querySelector('iframe');
  19     var btn = t.querySelector('.media__icon--play');
  20     var url = btn.getAttribute('data-url');
  21     var newIframe;
  22
  23     /**
  24      * Play the media.
  25      *
  26      * @param {jQuery.Event} event
  27      *   The event triggered by a `click` event.
  28      *
  29      * @return {bool}|{mixed}
  30      *   Return false if url is not available.
  31      */
  32     function play(event) {
  33       event.preventDefault();
  34
  35       // oEmbed/ Soundcloud needs internet, fails on disconnected local.
  36       if (url === '') {
  37         return false;
  38       }
  39
  40       var target = this;
  41       var player = target.parentNode;
  42       var playing = document.querySelector('.is-playing');
  43
  44       url = target.getAttribute('data-url');
  45
  46       // First, reset any video to avoid multiple videos from playing.
  47       if (playing !== null) {
  48         playing.className = playing.className.replace(/(\S+)playing/, '');
  49       }
  50
  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);
  57
  58       player.appendChild(newIframe);
  59     }
  60
  61     /**
  62      * Close the media.
  63      *
  64      * @param {jQuery.Event} event
  65      *   The event triggered by a `click` event.
  66      */
  67     function stop(event) {
  68       event.preventDefault();
  69
  70       var target = this;
  71       var player = target.parentNode;
  72       var iframe = player.querySelector('iframe');
  73
  74       if (player.className.match('is-playing')) {
  75         player.className = player.className.replace(/(\S+)playing/, '');
  76       }
  77
  78       if (iframe !== null) {
  79         player.removeChild(iframe);
  80       }
  81     }
  82
  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);
  87     }
  88
  89     // Plays the media player.
  90     _db.on(t, 'click', '.media__icon--play', play);
  91
  92     // Closes the video.
  93     _db.on(t, 'click', '.media__icon--close', stop);
  94
  95     t.className += ' media--player--on';
  96   }
  97
  98   /**
  99    * Attaches Blazy media behavior to HTML element.
 100    *
 101    * @type {Drupal~behavior}
 102    */
 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));
 107     }
 108   };
 109
 110 })(Drupal, dBlazy);