Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
26 kB
4
Indexable
Never
(function(){
    var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode('@media(min-width:768px) {    html body [class*="MatrixPage__matrix"] {        flex-direction: column;        align-items: center !important;        background-image: url(https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/horseImg.png);        background-size: 431px;        background-position: right;        background-repeat: no-repeat;        margin-right: 0 !important;        margin-left: 0 !important;    }    html body [class*="MatrixPage__matrix"]>div {        margin-right: 0 !important;        width: 100%;        max-width: 1028px;    }    html body [class*="MatrixPage__matrix"]>div+div {        margin-top: 42px !important;    }    html body [class*="MatrixPage__matrix"]>div {        display: flex;        flex-wrap: wrap;    }    html body [class*="MatrixPage__matrix"]>div>div:first-child {        margin-bottom: 0 !important;        padding-bottom: 26px !important;        width: 100%;        border-radius: 4px 4px 0 0;        padding-left: 40px !important;    }    html body [class*="MatrixPage__matrix"]>div:nth-of-type(2)>div:first-child h3 {        margin-bottom: 18px !important;    }    html body [class*="MatrixPage__matrix"]>div>div:nth-child(n+2):not(.cv-2-0-left-div):not(.cv-2-0-right-div),    html body [class*="MatrixPage__matrix"]>div>button,    html body [class*="MatrixPage__matrix"]>div>section {        display: none !important;    }    html body [class*="MatrixPage__matrix"]>div:nth-of-type(1) {        border: 2px solid #F8C13F;    }    html body [class*="MatrixPage__matrix"]>div {        border-radius: 6px;        padding-bottom: 0 !important;        background: transparent !important;    }    html body [class*="MatrixPage__matrix"]>div:nth-of-type(1)>div:first-child h3::after {        content: "Most popular";        background: white;        width: 116px;        height: 40px;        border-radius: 100vmax;        color: #171717;        font-size: 14px;        display: flex;        justify-content: center;        align-items: center;        margin-left: 25px;        margin-top: 3px;    }    html body [class*="MatrixPage__matrix"]>div>div:first-child h3 {        display: flex;        justify-content: flex-start;        align-items: center;        font-size: 32px;        margin-bottom: 14px !important;    }    html body [class*="MatrixPage__matrix"]>div>div:first-child h3 {        margin-bottom: 8px !important;    }    html body .cv-2-0-left-div {        width: 45% !important;        background-color: #F8C13F1A !important;        padding: 71px 40px !important;        border-radius: 0 0 0 7px;    }    html body .cv-2-0-right-div {        width: 55% !important;        background-color: white;        border-radius: 0 0 6px 0;        padding: 26px 32px 40px 46px;    }    html body .cv-2-0-pdp-button {        border-radius: 4px;        border: 1px solid #D11F25;        background: #D11F25;        color: white;        display: flex;        width: 100%;        padding: 10px 0px;        justify-content: center;        align-items: center;        color: #FFF;        text-align: center;        font-size: 19px;        font-style: normal;        font-weight: 700;        cursor: pointer;        margin-top: 34px !important;    }    html body .cv-2-0-radio {        display: flex;        cursor: pointer;    }    html body .cv-2-0-radio-button {        display: flex;        width: 22px;        background: white;        border-radius: 100vmax;        height: 22px;        border: 1px solid #000;        margin-right: 16px;        justify-content: center;        align-items: center;    }    html body .cv-2-0-money.sale {        color: #898989;        font-size: 19px;        font-style: normal;        font-weight: 500;        text-decoration: line-through;        margin-right: 8px;    }    html body .cv-2-0-money.nosale {        color: #171717;        font-size: 32px;        font-style: normal;        font-weight: 600;        display: inline-block;        margin-top: 0;        margin-bottom: 0;    }    html body .cv-2-0-month-year {        font-size: 17px !important;        margin-left: 5px;    }    .cv-2-0-right-div .cv-2-0-title {        font-size: 16.5px;        line-height: 22px;        font-weight: 600 !important;        color: #171717;        margin-bottom: 25px;    }    .cv-2-0-list-item {        list-style: none !important;        display: flex;        flex-direction: row;        margin-bottom: 16px !important;    }    .cv-2-0-content-title {        font-size: 14px;        line-height: 18px;        font-weight: 600;        color: #171717;    }    .cv-2-0-content {        margin-left: 10px;    }    .cv-2-0-content-list-item {        font-weight: 400;        font-size: 13px;        color: #171717;    }    .cv-2-0-content-list li:first-child {        margin-top: 12px;        margin-bottom: 6px !important;    }    .cv-2-0-list {        padding-left: 0 !important;    }    .cv-2-0-green-box {        display: flex;        flex-direction: column;        align-items: flex-start;        border: 1px solid #66DA19;        border-radius: 4px;        padding: 14px 16px;        background: #F7FDF4;        margin-bottom: 24px;    }    .cv-2-0-green-box h2 {        font-size: 14.5px;        line-height: 18px;        color: #171717;        font-weight: 600;        margin-top: 0 !important;        margin-bottom: 8px !important;    }    .cv-2-0-green-box span {        font-size: 12px;        line-height: 17px;        font-weight: 400;        color: #171717;    }    .cv-2-0-green-text {        color: #45A803 !important;        font-size: 14px !important;        font-weight: 700 !important;        line-height: 18px !important;        padding-right: 6px;    }    .cv-2-0-show-hide {        font-weight: 500;        font-size: 16px;        line-height: 18px;        color: #171717;        border: 1px solid #CDCCCB;        padding: 10px 17px;        background: #ffffff;        border-radius: 4px;        cursor: pointer;    }    .cv-2-0-arrow {        padding-left: 15px;    }    .cv-2-0-list-open .cv-2-0-arrow img {        transform: rotate(180deg);    }    html body .cv-2-0-right-div:not(.cv-2-0-list-open) .cv-2-0-list>.cv-2-0-list-item:nth-child(n+4),    html body .cv-2-0-right-div:not(.cv-2-0-list-open) .cv-2-0-content-list {        display: none !important;    }    html body .cv-2-0-show-hide::before {        content: "View the full list of benefits";    }    html body .cv-2-0-list-open .cv-2-0-show-hide::before {        content: "Hide the full list of benefits" !important;    }    html body .cv-2-0-offer {        margin-bottom: 0 !important;        font-size: 14.4px;        margin-top: 13px !important;    }    html body .cv-2-0-radio+.cv-2-0-radio {        margin-top: 36px !important;    }    html body .cv-2-0-radio-button::before {        content: "";        background: #d11f25;        width: 66%;        height: 66%;        border-radius: 100vmax;        display: block;        opacity: 0;    }    html body .cv-2-0-radio.cv-2-0-active-radio>.cv-2-0-radio-button::before {        opacity: 1 !important;    }    html body [class*="MatrixPage__matrix"]>div:nth-of-type(2) .cv-2-0-left-div {        background: #F3F3F3 !important;        padding: 57px 40px !important;    }    .cv-2-0-content-list {        padding-left: 22px !important;    }}'));document.head.appendChild(style);



(function (w) {
  "use strict";
  var tag = "cv-2-0", // TO DO: test name
    debug = document.cookie.indexOf("cfQA") > -1,
    window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w;
  const boxHTMLS = {
    "box0": {
      "lefthtml": `<div class="${tag}-left-div">
    <div class="${tag}-radio ${tag}-radio-1 ${tag}-active-radio">
        <div class="${tag}-radio-button"></div>
        <div class="${tag}-box">
            <div class="${tag}-money-box">
                <span class="${tag}-money sale">£479</span>
                <p class="${tag}-money nosale">£399<span class="${tag}-month-year">/year</span></p>
            </div>
            <p class="${tag}-offer">(12 months for the price of 10)</p>
        </div>
    </div>
    <div class="${tag}-radio ${tag}-radio-2">
        <div class="${tag}-radio-button"></div>
        <div class="${tag}-box">
            <div class="${tag}-money-box">
                <p class="${tag}-money nosale">£39.95<span class="${tag}-month-year">/month</span></p>
            </div>
        </div>
    </div>
    <button class="${tag}-pdp-button">Get Ultimate yearly</button>
</div>`,
      "righthtml": `
        <div class="${tag}-right-div">
    <h2 class="${tag}-title">Exclusive benefits included in the Ultimate Package:</h2>
    <ul class="${tag}-list">
        <li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_yellow.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">See whole races 30 minutes after they finish</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Watch unlimited video race replays from all 86 British and Irish
                        racecourses</li>
                    <li class="${tag}-content-list-item">Study form with full replays from this and past seasons</li>
                </ul>
            </div>
        </li>
        <li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_yellow.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">Expert tipping on the best selections for daily and ante-post
                    racing</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Read ante-post selections for key meetings from Tom Segal and our
                        Pricewise team</li>
                    <li class="${tag}-content-list-item">Enjoy exclusive 6pm nightly access to Pricewise and Paul Kealy’s
                        tips</li>
                </ul>
            </div>
        </li>
        <li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_yellow.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">Early access to tomorrow’s digital Racing Post at 9pm today</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Read tomorrow’s full Racing Post paper, delivered digitally at 9pm
                        today</li>
                    <li class="${tag}-content-list-item">Search our database for form information and read archive issues of
                        the Racing Post</li>
                    <li class="${tag}-content-list-item">Enjoy the acclaimed Racing Post Sunday, Racing &amp; Football
                        Outlook and Racing Post Weekender for free</li>
                </ul>
            </div>
        </li>
        <li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_yellow.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">Stable tours</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">See insider interviews with the top trainers each new Flat and
                        jumps season</li>
                    <li class="${tag}-content-list-item">Keep informed during the season with our stable tours, quotes and
                        interviews</li>
                </ul>
            </div>
        </li>
        <li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_yellow.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">The best writing on racing</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Sharpen your knowledge with the most respected racing journalists
                    </li>
                    <li class="${tag}-content-list-item">Read award-winning writers including Lee Mottershead and Alastair
                        Down</li>
                </ul>
            </div>
        </li>
    </ul>
    <div class="${tag}-green-box">
        <h2><span class="${tag}-green-text">PLUS</span>Everything included in the Essential Package, for FREE</h2>
        <span class="${tag}-small-text">See the Essential Package below for more details</span>
    </div>
    <button class="${tag}-show-hide"><span class="${tag}-arrow">
            <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/Down_arrow.svg"></span>
    </button>
</div>
        `
    },
    "box1": {
      "lefthtml": `<div class="${tag}-left-div">
    <div class="${tag}-radio ${tag}-radio-1 ${tag}-active-radio">
        <div class="${tag}-radio-button"></div>
        <div class="${tag}-box">
            <div class="${tag}-money-box">
                <span class="${tag}-money sale">£299</span>
                <p class="${tag}-money nosale">£249<span class="${tag}-month-year">/year</span></p>
            </div>
            <p class="${tag}-offer">(12 months for the price of 10)</p>
        </div>
    </div>
    <div class="${tag}-radio ${tag}-radio-2">
        <div class="${tag}-radio-button"></div>
        <div class="${tag}-box">
            <div class="${tag}-money-box">
                <p class="${tag}-money nosale">£24.95<span class="${tag}-month-year">/month</span></p>
            </div>
        </div>
    </div>
    <button class="${tag}-pdp-button">Get Essential yearly</button>
</div>`,
      "righthtml": `<div class="${tag}-right-div">
    <h2 class="${tag}-title">Exclusive benefits included in the Ultimate Package:</h2>
    <ul class="${tag}-list">
        <li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_black.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">Advanced form study with Pro Card</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Make smarter bets using past winner information, tipster verdicts and national newspaper selections</li>
                    <li class="${tag}-content-list-item">Enter your own notes and ratings on any horse and any racecard</li>
                <li class="${tag}-content-list-item">Use Postdata, which rates each horse’s chances based on course, ground, distance and more</li></ul>
            </div>
        </li>
        
        
        
        
    <li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_black.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">Use our expert ratings</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Find a horse’s true speed. Our exclusive Topspeed rating considers the course, elements, distance, age and weight carried</li>
                    <li class="${tag}-content-list-item">Read our expert handicappers’ master Racing Post Ratings (RPRs) for every horse, based on form and conditions</li>
                </ul>
            </div>
        </li><li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_black.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">Horse tracker</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Add up to 1,000 horses to your stable and receive alerts on their race entries and declarations</li>
                    <li class="${tag}-content-list-item">Make notes on all your tracked horses</li>
                </ul>
            </div>
        </li><li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_black.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">Results analysis</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Use our exclusive results analysis to predict future performance</li>
                    <li class="${tag}-content-list-item">Read commentary from our team of experienced handicappers and on-course race readers</li>
                </ul>
            </div>
        </li><li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_black.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">Statistics</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Delve into the fullest 30-year database of jockeys, trainers, owners, sires, first-crop performers</li>
                    <li class="${tag}-content-list-item">Analyse performance by course, distance, win, place and betting returns</li>
                </ul>
            </div>
        </li><li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_black.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">Pedigree information</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Dig into three generations of pedigree information, with insight on sales data and successful progeny</li>
                    
                </ul>
            </div>
        </li><li class="${tag}-list-item">
            <span class="${tag}-img">
                <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/check_icon_black.svg">
            </span>
            <div class="${tag}-content">
                <span class="${tag}-content-title">All Members’ Club privileges</span>
                <ul class="${tag}-content-list">
                    <li class="${tag}-content-list-item">Our club gives you discounts on big race tickets and more</li>
                    
                </ul>
            </div>
        </li></ul>
    <button class="${tag}-show-hide"><span class="${tag}-arrow">
            <img src="https://cfactory-img.s3.amazonaws.com/pitches/RacingPost/Down_arrow.svg"></span>
    </button>
</div>
    `
    }
  };
  window[tag] = {
    log: function (msg) {
      if (debug) console.log("[CONV]", tag, "-->", msg);
    },
    live: function (selector, event, callback, context) {
      /****Helper Functions****/
      // helper for enabling IE 8 event bindings
      function addEvent(el, type, handler) {
        if (el.attachEvent) el.attachEvent("on" + type, handler);
        else el.addEventListener(type, handler);
      }
      // matches polyfill
      this.Element &&
        (function (ElementPrototype) {
          ElementPrototype.matches =
            ElementPrototype.matches ||
            ElementPrototype.matchesSelector ||
            ElementPrototype.webkitMatchesSelector ||
            ElementPrototype.msMatchesSelector ||
            function (selector) {
              var node = this,
                nodes = (node.parentNode || node.document).querySelectorAll(selector),
                i = -1;
              while (nodes[++i] && nodes[i] != node);
              return !!nodes[i];
            };
        })(Element.prototype);
      // live binding helper using matchesSelector
      function live(selector, event, callback, context) {
        addEvent(context || document, event, function (e) {
          var found,
            el = e.target || e.srcElement;
          while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
          if (el && found) callback.call(el, e);
        });
      }
      live(selector, event, callback, context);
    },
    waitForElement: function (cssSelector, callback) {
      var stop,
        elementCached,
        timeout,
        check = function () {
          try {
            elementCached = document.querySelector(cssSelector);

            if (stop) return;

            if (elementCached) {
              callback(elementCached);
              clearTimeout(timeout);

              window[tag].log(cssSelector + " found");
            } else {
              window.requestAnimationFrame(check);
            }
          } catch (err) {
            window[tag].log(err.message);
          }
        };

      window.requestAnimationFrame(check);

      timeout = setTimeout(function () {
        stop = true;
        window[tag].log(cssSelector + " not found");
      }, 15000);
    },
    start: function () {
      try {
        this.waitForElement("body", function (docBody) {
          docBody.classList.add(tag);
        });

        if (debug && document.title.indexOf("CONV QA") < 0) {
          document.title = "[CONV QA] " + document.title;
        }

        initVariation();

        window[tag].log("test running");
      } catch (err) {
        window[tag].log(err.message);
      }
    },
    waitForTns: function (callback) {
      var interval = setInterval(function () {
        if (window.tns != undefined) {
          clearInterval(interval);
          callback();
        }
      }, 50);
      setTimeout(function () {
        clearInterval(interval);
      }, 15000)
    },
    listener: function () {
      window.addEventListener("locationchange", function () {
        window[tag].start();
      });
      history.pushState = ((f) =>
        function pushState() {
          var ret = f.apply(this, arguments);
          window.dispatchEvent(new Event("pushstate"));
          window.dispatchEvent(new Event("locationchange"));
          return ret;
        })(history.pushState);
      history.replaceState = ((f) =>
        function replaceState() {
          var ret = f.apply(this, arguments);
          window.dispatchEvent(new Event("replacestate"));
          window.dispatchEvent(new Event("locationchange"));
          return ret;
        })(history.replaceState);
      window.addEventListener("popstate", () => {
        window.dispatchEvent(new Event("locationchange"));
      });
    }
  };

  window[tag].start();
  window[tag].listener();

  function initVariation() {
    window[tag].waitForElement('html body [class*="MatrixPage__matrix"]>div', function () {
      if (window.innerWidth > 767) {
        document.querySelectorAll(`html body [class*="MatrixPage__matrix"]>div:not(.${tag}-wrapped)`).forEach((prnt, idx) => {
          if (prnt) {
            const html = boxHTMLS[`box${idx}`].lefthtml + boxHTMLS[`box${idx}`].righthtml;
            prnt.insertAdjacentHTML("beforeend", html);
            prnt.classList.add(`${tag}-wrapped`);
          }
        });
        window[tag].live(`.${tag}-radio`, 'click', function () {
          const acRd = this.closest(`.${tag}-left-div`).querySelector(`.${tag}-active-radio`);
          if (acRd && acRd !== this) {
            acRd.classList.remove(`${tag}-active-radio`);
          }
          this.classList.add(`${tag}-active-radio`);
          if (this.classList.contains(`${tag}-radio-1`)) {
            this.parentElement.querySelector(`.${tag}-pdp-button`).innerText = this.parentElement.querySelector(`.${tag}-pdp-button`).innerText.replace("monthly", "yearly");
          } else if (this.classList.contains(`${tag}-radio-2`)) {
            this.parentElement.querySelector(`.${tag}-pdp-button`).innerText = this.parentElement.querySelector(`.${tag}-pdp-button`).innerText.replace("yearly", "monthly");
          }
        });
        window[tag].live(`.${tag}-show-hide`, "click", function () {
          const opendList = document.querySelector(`.${tag}-list-open`);
          if (opendList && opendList !== this.closest(`.${tag}-right-div`)) {
            opendList.classList.remove(`${tag}-list-open`);
          }
          this.closest(`.${tag}-right-div`).classList.toggle(`${tag}-list-open`);
        });
        window[tag].live(`html body .${tag}-pdp-button`, "click", function () {
          const leftDivEl = this.closest(`.${tag}-left-div`);
          const radio1active = leftDivEl.querySelector(`.${tag}-radio-1.${tag}-active-radio`);
          const radio2active = leftDivEl.querySelector(`.${tag}-radio-2.${tag}-active-radio`);
          if (radio1active) {
            leftDivEl.parentElement.querySelector("section[class*='ServicePeriodInfo']:nth-of-type(2) button").click();
          } else if (radio2active) {
            leftDivEl.parentElement.querySelector("section[class*='ServicePeriodInfo']:nth-of-type(1) button").click();
          }
        });
      }
    }, 50, 15000);
  }
})(window);



})();