Gainsight/Custom_Templates/customer_templates/Recast Software/homepage.html.liquid

{% include "header" %}
{% if current_person.signed_in? %}
{% include "course_version_outdated_alert", courses: courses.featured %}
{% endif %}
<main class="np-main np-homepage">
  <div class="np-homepage-hero">
    <img class="np-homepage-hero-image"
      src="{{ homepage.artwork_url }}"
      alt="{{ homepage.headline }}"
    />
    <div class="np-homepage-hero-content">
      <div class="np-homepage-headline np-header-font-color">
        {{ homepage.headline }}
      </div>
      <div class="np-homepage-subheadline np-header-font-color">
        {{ homepage.subheadline }}
      </div>
      <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
        {% t .discover %}
      </a>
    </div>
  </div>
  {% comment %}{% include "sub_navigation" %}{% endcomment %}
  <div class="np-homepage-featured np-max-width">
    <div class="np-homepage-featured-text">
      <div class="np-homepage-headline">
        {{ homepage.featured_courses_headline }}
      </div>
      <div class="np-homepage-subheadline">
        {{ homepage.featured_courses_subheadline }}
      </div>
    </div>

    {% if courses.featured.any? %}
      <div class="np-homepage-featured-courses row">
        {% for course in courses.featured %}
          <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
            {% include "cards_featured_course" with course %}
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="np-homepage-featured-empty">
        <div class="np-zero-state-text">
          {% t .empty, key: current_school.course_vocabulary %}
        </div>
        <img
          class="np-zero-state-courses"
          alt="{% t .empty, key: current_school.course_vocabulary %}"
        />
      </div>
    {% endif %}

    <div class="col-xs-12" style="display: flex; flex-wrap: wrap; margin-top: 3rem;">
      <div class="col-xs-12 col-lg-6" style="text-align: center;">
        <div class="np-homepage-headline">
          Recast Blog Feed
        </div>
        <script src="https://apps.elfsight.com/p/platform.js" defer></script>
        <!-- <div id='recast-resource-embed-container'>
          <iframe id='recast-resource-embed' src="https://www.recastsoftware.com/resources/" scrolling="auto"></iframe>
        </div> -->
<div class="elfsight-app-e9e07ce5-cf47-4b0b-a053-689ee3d0d54a" style="padding-top: 2.5%;"></div>
      </div>
      {% if current_person.signed_in? %}
        <div class="col-xs-12 col-lg-6" style="text-align: center;">
          <div class="np-homepage-headline">
            Upcoming Events
          </div>
          {% comment %}{% if training_events.available.any? %}
            {% assign limiter = 0 %}
            <div class="row row-with-thumbnails">
              {% for training_event in training_events.available %}
                {% if limiter < 2 %}
                  <div class="col-xs-12 np-stretch-content homepage-event-cards">
                    {% include "cards_training_event" with training_event %}
                  </div>
                  
                  {% assign limiter = limiter | plus: 1 %}
                {% endif %}
              {% endfor %}
            </div>
          {% else %}
            {% include "training_events_zero_state" %}
          {% endif %}{% endcomment %}
          
            {% if training_events.available.any? %}
              {% 
                include "carousel_featured_events", 
                items: training_events.available,
              %}
            {% else %}
              <div style="margin-bottom:3rem;">
                {% include "training_events_zero_state" %}
              </div>
              
            {% endif %}
          
        </div>
      {% endif %}
    </div>

    {% include "section_glossary" %}
  </div>
</main>
{% include "footer" %}
<script>
  let checkIfNodeAvailable = () => {
    let config = { 
      attributes: true, 
      childList: true, 
      subtree: true 
    };

    function callback(mutationList, observer){
      let url = window.location.href;
      let rssWidgetMarker = document.querySelector('#eapps-rss-feed-e9e07ce5-cf47-4b0b-a053-689ee3d0d54a > div > a');

      if(url == 'https://recastsoftware.northpass.com/app' && rssWidgetMarker != null){
        manipulateElement(rssWidgetMarker);
      }
    }

    function manipulateElement(someNode){
      console.log('MUTATION OBSERVER ACTIVE; ELEMENT FOUND')
      someNode.style.display = 'none';
    }

    let observer = new MutationObserver(callback)

    observer.observe(document, config);
  }
  checkIfNodeAvailable();


  let iframeMutationObserver = () => {
    // console.log('EMBED MUTATION OBSERVER CALLED')
    let config = { 
        attributes: true, 
        childList: true, 
        subtree: true 
    };

    let embedManipulation = (iFrame) => {
      console.log('embedManipulation Invoked')

      iFrame.contentWindow.postMessage({}, '*');
      let iFrameDoc = iFrame.contentWindow.document;
      
      if(iFrameDoc != null){
        console.log('iFRAME CONTENT DETECTED');
        console.log(iFrameDoc);
        
        let embedHeader = iFrameDoc.querySelector('.headerwrap');
        let embedHero = iFrameDoc.querySelector('.simplehero');
        let embedContent1 = iFrameDoc.querySelector('.fullcontent');
        let embedContent2 = iFrameDoc.querySelector('.collectionsslider');
        let embedFooter = iFrameDoc.querySelector('#colophon');

        let embedResources = iFrameDoc.querySelector('.resourcesposts');

        let allEmbedElements = [embedResources,embedHeader, embedHero, embedContent1, embedContent2, embedFooter]

        console.log(allEmbedElements);

        for(let i = 0; i < allEmbedElements; i++){
          if(allEmbedElements[i] === null){
            embedHeader = iFrameDoc.querySelector('.headerwrap');
            embedHero = iFrameDoc.querySelector('.simplehero');
            embedContent1 = iFrameDoc.querySelector('.fullcontent');
            embedContent2 = iFrameDoc.querySelector('.collectionsslider');
            embedFooter = iFrameDoc.querySelector('#colophon');

            embedResources = iFrameDoc.querySelector('.resourcesposts');
            i = 0;
            console.log(allEmbedElements);
          } else {
            i === 0 ? allEmebedElements[i].style.marginTop = '0' : allEmbedElements[i].style.display = 'none';
          }
        }
      }
    };

    new MutationObserver(() => {
        // console.log('SEARCHING FOR IFRAME')
        let iFrame = document.querySelector('#recast-resource-embed');
        iFrame.contentWindow.postMessage({}, '*')

        if(iFrame !== null){
          console.log('EMBED DETECTED')
          embedManipulation(iFrame);
        } 
    }).observe(document, config);
  }
  iframeMutationObserver();

</script>
<style>
  #recast-resource-embed-container{
    width: 100%;
    height: 22.25rem;
    margin-top: 1rem;
  }

  #recast-resource-embed{
    width: 100%;
    height: 100%;
    position: asbolute;
  }
</style>