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
  21     if (btn === null) {
  22       return;
  23     }
  24
  25     var url = btn.getAttribute('data-url');
  26     var newIframe;
  27
  28     /**
  29      * Play the media.
  30      *
  31      * @param {jQuery.Event} event
  32      *   The event triggered by a `click` event.
  33      *
  34      * @return {bool}|{mixed}
  35      *   Return false if url is not available.
  36      */
  37     function play(event) {
  38       event.preventDefault();
  39
  40       // oEmbed/ Soundcloud needs internet, fails on disconnected local.
  41       if (url === '') {
  42         return false;
  43       }
  44
  45       var target = this;
  46       var player = target.parentNode;
  47       var playing = document.querySelector('.is-playing');
  48       var iframe = player.querySelector('iframe');
  49
  50       url = target.getAttribute('data-url');
  51
  52       // First, reset any video to avoid multiple videos from playing.
  53       if (playing !== null) {
  54         playing.className = playing.className.replace(/(\S+)playing/, '');
  55       }
  56
  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);
  63
  64       if (iframe !== null) {
  65         player.removeChild(iframe);
  66       }
  67
  68       player.appendChild(newIframe);
  69     }
  70
  71     /**
  72      * Close the media.
  73      *
  74      * @param {jQuery.Event} event
  75      *   The event triggered by a `click` event.
  76      */
  77     function stop(event) {
  78       event.preventDefault();
  79
  80       var target = this;
  81       var player = target.parentNode;
  82       var iframe = player.querySelector('iframe.media__element');
  83
  84       if (player.className.match('is-playing')) {
  85         player.className = player.className.replace(/(\S+)playing/, '');
  86       }
  87
  88       if (iframe !== null) {
  89         player.removeChild(iframe);
  90       }
  91     }
  92
  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);
  97     }
  98
  99     // Plays the media player.
 100     _db.on(t, 'click', '.media__icon--play', play);
 101
 102     // Closes the video.
 103     _db.on(t, 'click', '.media__icon--close', stop);
 104
 105     t.className += ' media--player--on';
 106   }
 107
 108   /**
 109    * Attaches Blazy media behavior to HTML element.
 110    *
 111    * @type {Drupal~behavior}
 112    */
 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));
 117     }
 118   };
 119
 120 })(Drupal, dBlazy);