cm-commenting.html

<style>
  .coral-talk-comments-plugin-wrap {
    background-color: rgb(255, 255, 255);
    padding: 2px 20px 7px;
    z-index: 11;
  }

  .coral-talk-embed-wrap {
    margin-bottom: 20px;
  }

  .coral-talk-header {
    color: rgba(0, 0, 0, 0.73);
    font: 14px "Unify Sans", sans-serif;
    margin-bottom: 24px;
  }

  .coral-talk-title {
    color: rgb(0, 0, 0);
    font: 24px "Unify Sans Bold", Helvetica, Arial, sans-serif;
    margin: 16px 0;
  }

  .coral-talk-message {
    margin-bottom: 16px;
  }

  .coral-talk-header-link,
  .coral-talk-header-link:visited {
    border-bottom: 2px solid rgb(0, 155, 255);
    color: rgba(0, 0, 0, 0.73);
    font-family: "Unify Sans Bold", sans-serif;
    text-decoration: none;
    cursor: pointer;
  }

  .coral-admin-container {
    margin: 20px 0;
    text-align: center;
  }

  .gup-embed {
    border: none;
    height: 700px;
    width: 100%;
  }

  .story-title {
    display: flex;
    align-items: end;
    font: 16px "Unify Sans Bold", Helvetica, Arial, sans-serif;
    color: #303030;
    padding: 10px 0 7px;
    border-bottom: 1px solid #626262;
    text-decoration: none;
  }

  .story-title-arrow {
    padding-right: 10px;
  }

  #story-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media screen and (max-width: 850px) {
    .coral-talk-header {
      text-align: left;
    }
  }
</style>

<div id="coralEmbedScript"></div>
<section class="cm-flatpage-card">
  <div class="util-bar-comments-wrap">
    <div class="util-bar-scroll-wrap util-bar-scroll-wrap-comments">
      <div class="coral-talk-comments-plugin-wrap scrollable-content">
        <div class="coral-talk-header"> <a class="story-title hidden" onclick="trackClickEvent('backtostory')">
            <div><svg class="story-title-arrow" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                viewBox="0 0 24 24">
                <path fill="#0098FE" fill-rule="evenodd"
                  d="M9.556 18.707L3 11.957l6.556-6.75L10.94 6.63l-4.197 4.321H21v2.013H6.743l4.196 4.32-1.383 1.423z" />
              </svg></div>
            <div id="story-title-text">Back to article</div>
          </a>
          <h2 class="coral-talk-title">Comments</h2>
          <p id="coral-talk-signin" class="coral-talk-message"> To leave a comment, you will need to <a class="coral-talk-header-link"
              onclick="fireRegisterEvent()">register</a> or <a class="coral-talk-header-link"
              onclick="fireLoginEvent()">sign in</a> if you already have an account. Typed comments will be lost if
            you are not signed in.</p>
          <p class="coral-talk-message"> Please be polite. It's OK to disagree with someone's ideas, but personal
            attacks, insults, threats, hate speech, advocating violence and other violations can result in a ban. If
            you see comments in violation of our <a class="coral-talk-header-link"
              href="//static.{{$.site.publicationDomain}}/conversation-guidelines/"
              onclick="trackClickEvent('exit|commentscommunityrules')">community guidelines</a>, please report them.
          </p>
        </div>
        <div class="coral-talk-embed-wrap"></div> <iframe class="gup-embed hidden" scrolling="no"></iframe>
      </div>
    </div>
  </div>
</section>

<script>
  (function () { })();
  fireLoginEvent = function (e) {
    window.coralInstance._redirectToLogin("login");
  };
  fireRegisterEvent = function (e) {
    window.coralInstance._redirectToLogin("register");
  };
  var CoralCommenting = function () {
    var params = new URLSearchParams(location.search);
    this._gupLogin =
      window.location.host.indexOf("-stage") > -1
        ? "https://login-stage.{{$.site.publicationDomain}}"
        : "https://login.{{$.site.publicationDomain}}";
    this._storyUrl =
      params.get("storyUrl") || "https://www.{{$.site.publicationDomain}}";
    this._requireMatketAccess =
      params.get("requiresmarketaccess") === "true" || false;
    this._cmPage =
      window.location.host.indexOf("-stage") > -1
        ? "https://cm-stage.{{$.site.publicationDomain}}"
        : "https://cm.{{$.site.publicationDomain}}";
    this._safeFrameOrigins = [this._gupLogin, this._cmPage];
    this._trackingPrefix = "coralEmbed|";
    this._loggedInViaEmbed = false;
    this._serviceUrl = "{{$.apis.coralCommenting.serviceUrl}}";
    this._registerCommentingLoginEvent = function (events) {
      events.on("loginPrompt", this._redirectToLogin.bind(this));
      events.on("signOut.success", this._logout.bind(this));
    };
    this.userResponseHadler = function () {
      this.user = null;
      if (this._loggedInViaEmbed) {
        this._toggleCoralTalkAndGupEmbed();
        this._loggedInViaEmbed = false;
      }
      var authToken = "";
      var userObj = window.user ? window.user : {};
      if (
        userObj &&
        userObj.meta &&
        userObj.meta.isAuthenticatedInCurrentContext &&
        userObj.response &&
        userObj.response.user
      ) {
        this.user = userObj.response.user;
        authToken =
          !this._requireMatketAccess || this.user.hasMarketAccess
            ? userObj.response.user.coralJWT
            : null;
      }
      if (authToken) {
        this._coralTalkSignin.addClass("hidden");
      } else { 
        this._coralTalkSignin.removeClass("hidden");
      }
      this._coralTalkEmbed = $('<div id="coral_thread"/>');
      this._coralTalkEmbedWrap.empty();
      this._coralTalkEmbedWrap.append(this._coralTalkEmbed);
      document.getElementById("story-title-text").innerHTML = "Back to article";
      this._storyTitleContainer.attr("href", this._storyUrl);
      this._storyTitleContainer.toggleClass("hidden");
      window.Coral.createStreamEmbed({
        id: "coral_thread",
        autoRender: true,
        rootURL: this._serviceUrl,
        accessToken: authToken,
        storyURL: this._storyUrl,
        events: this._registerCommentingLoginEvent.bind(this),
      });
      this._coralEmbeded = true;
    };
    this._toggleCoralTalkAndGupEmbed = function () {
      this._coralTalkHeader.toggleClass("hidden");
      this._coralTalkEmbedWrap.toggleClass("hidden");
      this._gupEmbed.toggleClass("hidden");
      this._scrollWrapComments.scrollTop(0);
      this._commentsEmbedHidden = this._coralTalkEmbedWrap.hasClass("hidden");
    };
    this._redirectToLogin = function (e) {
      var event = e || "login";
      var url;
      if (this.user || this._loggedInViaEmbed) {
        trackClickEvent(this._trackingPrefix + "|lacksauthorization");
        url =
          this._cmPage +
          "/subscriber-only-access/" +
          "?preauth=true&style=chromeless";
      } else {
        trackClickEvent(this._trackingPrefix + "|login");
        if (this._requireMatketAccess) {
          var onSuccessUrl = encodeURIComponent(
            this._cmPage + "/subscriber-only-access/?style=chromeless"
          );
          url =
            this._gupLogin +
            "/{{$.site.siteCode}}-GUP-CORAL/authenticate/?bypass-returning-user=true&window-mode=embedded&success-url=" +
            onSuccessUrl;
        } else {
          url =
            this._gupLogin +
            "/{{$.site.siteCode}}-GUP-CORAL/authenticate/?bypass-returning-user=true&window-mode=embedded";
        }
        if (event === "register") {
          url = url + "&requested-state=create-account";
        }
      }
      if (url) {
        this._gupEmbed.attr("src", url);
        this._toggleCoralTalkAndGupEmbed();
      }
    };
    this._logout = function () {
      trackClickEvent(this._trackingPrefix + "|loggedOut");
      new Promise(function (resolve, reject) {
        var logoutUrl = "{{$.apis.gup.gupas.basePath}}user/logout/";
        fetch(logoutUrl, { credentials: "include" })
          .then(function (response) {
            return response.json().then(function (user) {
              if (user && user.meta && user.meta.status === 200) {
                this.user = null;
                resolve(user);
              } else {
                reject(null);
              }
            });
          })
          .catch(function () {
            reject(null);
          });
      }).then(function () {
        window.dispatchEvent(new CustomEvent("updateUserStatus"));
        this.user = null;
      });
    };
    this._onSafeFrameMsg = function (e) {
      if (e && e.origin === this._serviceUrl && e.data.indexOf("{") > -1) {
        var eventData = JSON.parse(e.data.substr(e.data.indexOf("{")));
        if (eventData) {
          if (
            eventData.method === "getItem" &&
            eventData.parameters !== undefined
          ) {
            var getItemKey = eventData.parameters.key || "";
            if (getItemKey.indexOf("replyCommentFormBody") > -1) {
              trackClickEvent(this._trackingPrefix + "reaction|commentreply");
              trackClickEvent(this._trackingPrefix + "accessreply|success");
            }
          } else if (
            eventData.eventName &&
            eventData.eventName.indexOf("mutation") > -1
          ) {
            switch (eventData.eventName) {
              case "mutation.createComment":
                trackClickEvent(this._trackingPrefix + "commentpost|success");
                break;
              case "mutation.createCommentReply":
                trackClickEvent(
                  this._trackingPrefix + "commentreplypost|success"
                );
                break;
              case "mutation.createCommentReaction":
                trackClickEvent(this._trackingPrefix + "reaction|commentrespect");
                break;
              case "mutation.createCommentFlag":
                if (eventData.value.reason === "COMMENT_REPORTED_OFFENSIVE") {
                  trackClickEvent(
                    this._trackingPrefix + "commentreport|COMMENT_OFFENSIVE"
                  );
                } else if (eventData.value.reason === "COMMENT_REPORTED_SPAM") {
                  trackClickEvent(
                    this._trackingPrefix + "commentreport|COMMENT_SPAM"
                  );
                } else if (eventData.value.reason === "COMMENT_REPORTED_OTHER") {
                  trackClickEvent(
                    this._trackingPrefix + "commentreport|COMMENT_OTHER"
                  );
                }
                break;
              case "mutation.createCommentDontAgree":
                trackClickEvent(this._trackingPrefix + "commentreport|dontagree");
                break;
              case "mutation.rejectComment":
                trackClickEvent(this._trackingPrefix + "commentmod|denied");
                break;
              case "mutation.approveComment":
                trackClickEvent(this._trackingPrefix + "commentmod|approved");
                break;
            }
          } else if (eventData.eventName === "openSortMenu") {
            trackClickEvent(this._trackingPrefix + "commentsortby|menuopen");
          } else if (eventData.eventName === "setCommentsOrderBy") {
            switch (eventData.value.orderBy) {
              case "CREATED_AT_DESC":
                trackClickEvent(this._trackingPrefix + "commentsortby|newest");
                break;
              case "CREATED_AT_ASC":
                trackClickEvent(this._trackingPrefix + "commentsortby|oldest");
                break;
              case "REPLIES_DESC":
                trackClickEvent(
                  this._trackingPrefix + "commentsortby|mostreplied"
                );
                break;
              case "REACTION_DESC":
                trackClickEvent(
                  this._trackingPrefix + "commentsortby|mostrespected"
                );
                break;
            }
          }
        }
      } else if (e && this._safeFrameOrigins.indexOf(e.origin) > -1) {
        var updateUserStatusEvent = new CustomEvent("updateUserStatus");
        if (e.data.flow === "authenticate") {
          switch (e.data.result) {
            case "success":
              this._loggedInViaEmbed = true;
              window.dispatchEvent(updateUserStatusEvent);
              break;
            case "cancel":
              this._gupEmbed.attr("src", "about:blank");
              this._toggleCoralTalkAndGupEmbed();
              break;
          }
        } else if (
          e.data.flow === "embeddedLogin" &&
          e.data.result === "authenticated"
        ) {
          this._loggedInViaEmbed = true;
        }
      }
    };
    this._initializeCoralTalk = function () {
      this._scrollWrapComments = $(".util-bar-scroll-wrap-comments");
      this._coralTalkHeader = $(".coral-talk-header");
      this._coralTalkEmbedWrap = $(".coral-talk-embed-wrap");
      this._gupEmbed = $(".gup-embed");
      this._storyTitleContainer = $(".story-title");
      this._coralTalkSignin = $("#coral-talk-signin");
    };
    this.init();
  };
  CoralCommenting.prototype.init = function () {
    $.ajax(this._serviceUrl + "/assets/js/embed.js", {
      cache: true,
      data: {},
      dataType: "script",
      context: this,
    }).always(function () {
      if (window.Coral) {
        this._initializeCoralTalk();
        if (window.user) {
          this.userResponseHadler();
        }
        window.addEventListener(
          "userStatusChanged",
          this.userResponseHadler.bind(this)
        );
      } else {
      }
    });
    if (
      this._loggedInViaEmbed ||
      (this._coralEmbeded && this._coralTalkEmbed.html() === "")
    ) {
      this._initializeCoralTalk();
    } else if (this._commentsEmbedHidden) {
      this._toggleCoralTalkAndGupEmbed();
    }
    window.addEventListener("message", this._onSafeFrameMsg.bind(this), false);
  };
  window.coralInstance = new CoralCommenting();
</script>

<script>
  var $objHead = $("head");
  $objHead.find("meta[name=viewport]").remove();
  $objHead.prepend(
    '<meta name="viewport"content="width=device-width, initial-scale=1.0, user-scalable=0" />'
  );
</script>