lbry.tech/app/components/client/tour-scripts.js

/* global $, send */ "use strict";



initializeTour();



if (window.location.href.search && window.location.href.split("?url=")[1]) { // pre-fill example one if search parameter exists
  const searchParameter = window.location.href.split("?url=")[1];
  fetchMetadata(1, searchParameter);
}



document.querySelector("body").addEventListener("click", event => {
  if (event.target.dataset.action) {
    event.preventDefault();
    document.querySelector(".tour").classList.add("waiting");
    handleExamples(event.target);
  }

  if (
    event.explicitOriginalTarget.classList &&
    event.explicitOriginalTarget.classList[0] === "tour__content__meme__canvas__thumbnail"
  ) {
    for (const thumbnail of document.querySelectorAll(".tour__content__meme__canvas__thumbnail")) {
      thumbnail.classList.remove("selected");
    }

    event.explicitOriginalTarget.classList.add("selected");
    updateCanvas(event.explicitOriginalTarget);
  }
});

document.getElementById("fetch-claim-uri").addEventListener("keyup", event => {
  const key = event.keyCode ? event.keyCode : event.which;

  switch(true) {
    case (document.querySelector("[data-example='1']").classList.contains("active")):
      if (
        key === 13 &&
        document.getElementById("fetch-claim-uri").value.length > 0
      ) fetchMetadata(1, document.getElementById("fetch-claim-uri").value);
      break;

    case (document.querySelector("[data-example='3']").classList.contains("active")):
      if (
        key === 13 &&
        document.getElementById("fetch-claim-uri").value.length > 0
      ) fetchMetadata(3, document.getElementById("fetch-claim-uri").value);
      break;
  }
});

document.querySelector("body").addEventListener("keyup", event => {
  if (
    event.target.id === "meme-top-line" ||
    event.target.id === "meme-bottom-line"
  ) updateCanvas();
});



//  H E L P E R S

function clearCanvas(canvas) {
  const ctx = canvas.getContext("2d");

  ctx.save();
  ctx.globalCompositeOperation = "copy";
  ctx.strokeStyle = "transparent";
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

function detectLanguageAndUpdate() { // eslint-disable-line
  const compare = (array1, array2) => array2.filter(value => array2.indexOf(value)); // compare two arrays and get match(es)
  const memeLocaleObject = $("#meme-language").children();
  const memeLocales = [];
  const userLocales = [];

  for (const language of navigator.languages) userLocales.push(language);

  for (const key in memeLocaleObject) {
    if (memeLocaleObject[key] && memeLocaleObject[key].value) memeLocales.push(memeLocaleObject[key].value);
  }

  if (
    memeLocales.length &&
    userLocales.length &&
    compare(memeLocales, userLocales).length
  ) $("#meme-language").children(`option[value="${compare(memeLocales, userLocales)[0]}"]`).attr("selected", true);
}

function debounce(func, wait, immediate) {
  let timeout;

  return function () {
    const context = this;
    const args = arguments;

    const later = () => {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    const callNow = immediate && !timeout;
    clearTimeout(timeout);

    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

function initializeTour() {
  document.querySelector(".tour").classList.add("waiting");
  document.querySelector("#fetch-claim-uri").value = "";
  document.querySelector("#fetch-claim-uri").focus();
  document.querySelector(".tour__navigation__example:nth-child(1)").classList.add("active");

  send(JSON.stringify({
    "message": "landed on tour"
  }));

  setTimeout(() => {
    document.querySelector(".tour__navigation__example:nth-child(1)").click();
  }, 300);
}



function fetchMetadata(exampleNumber, data) {
  if (!exampleNumber) return;

  switch(exampleNumber) {
    case 1:
      send(JSON.stringify({
        "claim": data,
        "message": "fetch metadata",
        "method": "resolve",
        "example": exampleNumber
      }));

      $("#fetch-claim-uri").val(data);

      $("#tour-results").html(`
        <pre><code class="language-bash">
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "resolve", "params": { "uri": "${data}" }}'</span> <span class="token url">http://localhost:5279    </span>
        </code></pre>

        <div class="loader" id="temp-loader"></div>
        <div id="example1-result"></div>
      `);

      $("#tour-loader").hide();
      break;

    case 2:
      send(JSON.stringify({
        "data": data,
        "message": "fetch metadata",
        "method": "publish",
        "example": exampleNumber
      }));

      $("#tour-results").html(`
        <pre><code class="language-bash">
<span class="token comment"># This will be updated soon</span>
        </code></pre>

        <div class="loader" id="temp-loader"></div>
        <div id="example2-result"></div>
      `);

      $("#tour-loader").hide();
      break;

    case 3:
      send(JSON.stringify({
        "claim": data,
        "message": "fetch metadata",
        "method": "wallet_send",
        "example": exampleNumber
      }));

      $("#fetch-claim-uri").val(data);

      $("#tour-results").html(`
        <pre><code class="language-bash">
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "wallet_send", "params": { "amount": "0.01", "claim_id": "${data}" }}'</span> <span class="token url">http://localhost:5279    </span>
        </code></pre>

        <div class="loader" id="temp-loader"></div>
        <div id="example3-result"></div>
      `);

      $("#tour-loader").hide();
      break;

    default:
      break;
  }
}

function getMemeInfo() { // TODO: Error handling
  const info = {
    description: $("#meme-description").val(),
    file_path: $("#meme-canvas")[0].toDataURL("image/jpeg", 0.6),
    language: $("#meme-language").val(),
    license: $("#meme-license").val(),
    name: $("#meme-title").val(),
    nsfw: $("#meme-nsfw-flag")[0].checked,
    title: $("#meme-title").val()
  };

  return info;
}

const handleExamples = debounce(event => {
  let exampleNumber;
  const data = event.dataset;

  if (!parseInt($(".tour__navigation__example.active")[0].dataset.example)) return;
  exampleNumber = parseInt($(".tour__navigation__example.active")[0].dataset.example);

  switch(data.action) {
    case "choose claim":
      fetchMetadata(exampleNumber, data.claimId);
      break;

    case "execute claim":
      if (!$("#fetch-claim-uri").val()) return;
      fetchMetadata(exampleNumber, $("#fetch-claim-uri").val());
      break;

    case "tour, example 1":
      if ($("#tour-loader").hasClass("tour__content__meme")) {
        $("#tour-loader").removeClass("tour__content__meme").addClass("tour__content__trends");
      }

      $("#fetch-claim-uri").val(""); // reset URL bar
      $("#tour-url button").text("Resolve");
      if ($("#tour-url")[0].style.display === "none") $("#tour-url").show();

      $(".tour__navigation__example").removeClass("active");
      $(".tour__navigation__example:nth-child(1)").addClass("active");

      $("#tour-loader").empty().show();
      $("#tour-results").empty().show();

      send(JSON.stringify({
        "message": `request for ${data.action}`
      }));

      break;

    case "tour, example 2":
      if ($("#tour-loader").hasClass("tour__content__trends")) {
        $("#tour-loader").removeClass("tour__content__trends").addClass("tour__content__meme");
      }

      $("#fetch-claim-uri").val(""); // reset URL bar
      $("#tour-url").hide();

      $(".tour__navigation__example").removeClass("active");
      $(".tour__navigation__example:nth-child(2)").addClass("active");

      $("#tour-loader").empty().show();
      $("#tour-results").empty().show();

      send(JSON.stringify({
        "message": `request for ${data.action}`
      }));

      break;

    case "tour, example 3":
      if ($("#tour-loader").hasClass("tour__content__meme")) {
        $("#tour-loader").removeClass("tour__content__meme").addClass("tour__content__trends");
      }

      $("#fetch-claim-uri").val(""); // reset URL bar
      $("#tour-url button").text("Tip");
      // $("#tour-url").after("<p>In the LBRY app, you can financially support your favorite creators by donating LBRY Coin (LBC). In this example, we are donating LBC in your stead.</p>");
      if ($("#tour-url")[0].style.display === "none") $("#tour-url").show();

      $(".tour__navigation__example").removeClass("active");
      $(".tour__navigation__example:nth-child(3)").addClass("active");

      $("#tour-loader").empty().show();
      $("#tour-results").empty().show();

      send(JSON.stringify({
        "message": `request for ${data.action}`
      }));

      break;

    case "upload image":
      fetchMetadata(exampleNumber, getMemeInfo());
      break;

    default:
      break;
  }
}, 10);

function initCanvas() { // eslint-disable-line
  const canvas = document.getElementById("meme-canvas");
  const canvasWidth = 400;
  const canvasHeight = 300;
  const ctx = canvas.getContext("2d");
  const img = document.getElementById("base-image");

  clearCanvas(canvas);

  ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
  ctx.fillStyle = "white";
  ctx.font = "bold 28px Karla";
  ctx.lineJoin = "round";
  ctx.lineWidth = 4;
  ctx.strokeStyle = "black";
  ctx.textAlign = "center";
  ctx.textBaseline = "top";
  ctx.strokeText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
  ctx.strokeText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
  ctx.fillText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
  ctx.fillText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
}

function updateCanvas(imageSource) {
  const canvas = document.getElementById("meme-canvas");
  const canvasWidth = 400;
  const canvasHeight = 300;
  const ctx = canvas.getContext("2d");
  const img = document.getElementById("base-image");

  clearCanvas(canvas);

  if (imageSource) {
    ctx.drawImage(imageSource, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);
    img.src = imageSource.src;
  } ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight);

  ctx.strokeText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
  ctx.strokeText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
  ctx.fillText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20);
  ctx.fillText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40));
}