North Face product tabs test

product-tabs-test.js

require(['jquery', 'domReady'], function ($, domReady) {

"use strict";
    domReady(function () {
      //variables for layout
      var $pdpBenefitRatings = $('body.pdp .benefit-rating__container');
      var $productDetailsRow = $('body.pdp .swatches-product-details.row');
      var $pdpDetailsTabInner = $('body.pdp .pdp-details .product-details-section-inner-content');
      var $pdpDetailsHeader = $('body.pdp .pdp-details h3.pdp-details-header');
      var $pdpDetailsTabContent = $('body.pdp .pdp-details');
      var $pdpFeaturesTabContent = $('body.pdp .pdp-features');
      var $pdpBenefitsContent = $('body.pdp .pdp-benefits');
      var $pdpSpecsTabContent = $('body.pdp .pdp-specifications');
      var $pdpTechModule = $('body.pdp iframe.cms-content-js');

      //set up the tab layout and move tab content into their respective divs 
      var initTabLayout = function () {

        if ($pdpBenefitRatings || $pdpDetailsTabContent || $pdpFeaturesTabContent != undefined) {

          //move benefit ratings and features into 1 tab and product specs and tech modules into other tab
          $pdpBenefitRatings.appendTo($pdpDetailsTabInner);
          $pdpFeaturesTabContent.appendTo($pdpDetailsTabContent);

          //move the details header into the details tab and rename it to "summary"
          $pdpDetailsHeader.prependTo($pdpDetailsTabInner);
        };

        if ($pdpBenefitsContent) {
          $pdpBenefitsContent.appendTo($pdpDetailsTabInner);
        };

        if ($pdpFeaturesTabContent.height() > 400) {
          $pdpFeaturesTabContent.addClass('pdp-features-truncate');

          $('<div class="mt_read_more button tertiary">Read More</div>').appendTo($pdpFeaturesTabContent);

          var $pdpFeaturesReadMoreBtn = $('body.pdp .pdp-features .button');

          $pdpFeaturesReadMoreBtn.on("click", function () {
            $pdpFeaturesTabContent.removeClass("pdp-features-truncate");
            $pdpFeaturesReadMoreBtn.hide();
          });

        };


      };

      //add the tab markup 
      var addTabs = function () {
        //add the tab buttons
        $productDetailsRow.prepend('<div class="pdp-tabs-ctas"><button role="tab" class="pdp-tab pdp-active-tab" data-tab="tab-panel-1" aria-selected="true"\
      aria-controls="tab-panel-1" id="pdp-tab-1" tabindex="0">Details</button> <button role="tab" data-tab="tab-panel-2" aria-selected="false"\
      aria-controls="tab-panel-2" id="pdp-tab-2" class="pdp-tab" tabindex="1">Specs</button></div>');

        var $pdpTabsButtons = $('body.pdp div.pdp-tabs-ctas');

        //insert the horizontal rule separator to separate content
        $('<hr>').insertAfter($pdpTabsButtons);

        //add accessability to tabs 
        $pdpDetailsTabContent.attr({ "id": "tab-panel-1", "role": "tabpanel", "tabindex": "0", "aria-labelled": "pdp-tab-1" });
        $pdpSpecsTabContent.attr({ "id": "tab-panel-2", "role": "tabpanel", "tabindex": "0", "aria-labelled": "pdp-tab-2" });

        //add the target classes to the tabbed content 
        $pdpDetailsTabContent.addClass("pdp-active-tab");
        $pdpDetailsTabContent.addClass("pdp-tab-content");
        $pdpSpecsTabContent.addClass("pdp-tab-content");

        //rename Details to Summary
        $('body.pdp .pdp-details .inner-content h3.pdp-details-header').html("Summary");
      };

      //tab functionality 
      var initTabs = function () {
        $('button.pdp-tab').on("click", function () {
          var tab_id = $(this).attr('data-tab');

          $('button.pdp-tab').removeClass('pdp-active-tab');
          $('div.pdp-tab-content').removeClass('pdp-active-tab');

          $(this).addClass('pdp-active-tab');
          $("#" + tab_id).addClass('pdp-active-tab');
        });

        $('#pdp-tab-2').one("click", function () {
          $pdpTechModule.appendTo($pdpSpecsTabContent);
          $pdpTechModule.css({"display": "block", "height": "320px"});
        });

      };

      //mutation observer for PDP tech module to watch when the iframe is loaded 
      //and to copy the fit slider then move it into details AFTER it is loaded on to the webpage 
      function observeSelector(elem, fx) {
        if (
          elem &&
          elem instanceof HTMLElement &&
          (window.MutationObserver || window.WebKitMutationObserver)
        ) {
          var observer = new MutationObserver(function (mutations, observer) {
            // fired when a mutation occurs
            fx();

          });
          observer.observe(elem, {
            childList: arguments[2] || true,
            attributes: arguments[3] || true
          });
        };
      };

      //begin mutation observer Callback function with fit slider and iFrame content for tech mods
      function initMutationObserver() {

        var reviewsSlider = document.querySelector('#power-reviews-snippet-rating');
        //var iframeContent = document.querySelector('#cms-contents-0');

        if (reviewsSlider) {
          observeSelector(reviewsSlider, function () {

            setTimeout(function () {
              var dubreviewsSliderObj = $('#power-reviews-snippet-rating').clone();
              //debugger
              dubreviewsSliderObj.appendTo(".pdp-details .desc-container");
              //debugger
            }, 3000);
          });
        };
      };


      initTabLayout();
      addTabs();
      initTabs();
      initMutationObserver();


    });
});