JAVASCRIPT   21

namecoach js

Guest on 18th August 2022 12:41:58 PM

  1. (function () {
  2.  
  3.     // namecoach.js
  4.     // This is a needy, self-invoking function. The page should contain a name with the class "m-title__main-title."
  5.     // The page should have the javascript variable 'recordingLink' defined in global scope.
  6.     // 'recordingLink' is written in the directory page using a php function that cURLs the NameCoach API.
  7.     window.onload = function(){
  8.             var audioIcon = "";
  9.        
  10.             function playAudio(audioSrc){  
  11.                 audioObject.src = audioSrc;
  12.                 audioObject.load(); // required by iOS
  13.                 audioObject.onended = function(){
  14.                     audioIcon.classList.remove("playing");
  15.                     audioIcon.querySelector('.namecoach-icon__progressbar').style.transitionDuration = "0s";
  16.                 };
  17.                 audioObject.addEventListener("canplaythrough", function() {
  18.                     audioIcon.querySelector('.namecoach-icon__progressbar').style.transitionDuration = audioObject.duration+"s";
  19.                     audioIcon.classList.add("playing");
  20.                     audioObject.play();
  21.                 });
  22.                 return false;
  23.             }
  24.            
  25.             // the element we want to put an audio icon next to.
  26.             var mainTitle = document.querySelector('.m-title__main-title');
  27.        
  28.             if(mainTitle) {
  29.        
  30.                 mainTitle.style.display = "inline";
  31.        
  32.                 // create a wrapper to contain the name and audio icon. Insert in DOM
  33.                 var namecoachLayoutElement = document.createElement('div');
  34.                 namecoachLayoutElement.classList.add("l-row--namecoach");
  35.                 // Get the reference node
  36.                 var referenceNode = mainTitle;
  37.                 // Insert the wrapper before the reference node
  38.                 referenceNode.parentNode.insertBefore(namecoachLayoutElement, referenceNode.nextSibling);
  39.        
  40.                 // move name inside the wrapper
  41.                 namecoachLayoutElement.appendChild(mainTitle);
  42.        
  43.                 // create an audio icon, put inside the wrapper
  44.                 // (Have to do initial exists check because of shortcode DOM rewrite problem)
  45.                 if(!document.querySelector('.namecoach-icon')) {
  46.                     audioIcon = document.createElement('a');
  47.                     audioIcon.classList.add("namecoach-icon");
  48.                     audioIcon.onclick = function(e) {
  49.                         e.preventDefault();
  50.                         if((window.location.hostname).match("^cascade")) {
  51.                             alert("NameCoach audio cannot be previewed in Cascade. Publish to test and listen.");
  52.                         }
  53.                         else {
  54.                             playAudio(recordingLink);
  55.                         }
  56.                     };
  57.                     audioIcon.href= "";
  58.                     audioIcon.role = "button";
  59.                     audioIcon.innerHTML = '<i class="fa fas fa-volume-up" aria-hidden="true"></i><span class="sr-only">Play NameCoach audio</span><div aria-hidden="true" class="namecoach-icon__progressbar"></div>';
  60.                     namecoachLayoutElement.appendChild(audioIcon);
  61.                 }
  62.        
  63.                 if(recordingLink !== "") {
  64.                     // instantiate a javascript audio object
  65.                     var audioObject = new Audio();
  66.                 } else {
  67.                     audioIcon.style.color = "#b5b6b6";
  68.                     audioIcon.title = "Couldn't load audio file";
  69.                 }
  70.                
  71.             }
  72.    
  73.         }
  74.  
  75.     })();

Raw Paste


Login or Register to edit or fork this paste. It's free.