From a7e6be4a508209b6d039ecac4bb17914c1c0d687 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?= =?UTF-8?q?=E3=83=96?= Date: Thu, 27 Sep 2018 17:39:00 -0500 Subject: [PATCH] Meme example refactor in-progress --- app/components/client/tour-scripts.js | 79 +++++++++++++++------------ app/helpers/fetch-metadata.js | 1 + app/sockets.js | 7 +-- 3 files changed, 47 insertions(+), 40 deletions(-) diff --git a/app/components/client/tour-scripts.js b/app/components/client/tour-scripts.js index 7eb7fd3..5cecfdc 100644 --- a/app/components/client/tour-scripts.js +++ b/app/components/client/tour-scripts.js @@ -144,9 +144,9 @@ function fetchMetadata(exampleNumber, data) { "example": exampleNumber })); - $("#fetch-claim-uri").val(data); + document.getElementById("fetch-claim-uri").value = data; - $("#tour-results").html(` + document.getElementById("tour-results").innerHTML = ` 

 # With the LBRY app/daemon running locally, you can use this in your Terminal
 curl --header "Content-Type: application/json" --data '{ "method": "resolve", "params": { "uri": "${data}" }}' http://localhost:5279    
@@ -154,9 +154,9 @@ curl --header "Content-Type: application/json"
 
         

         

-      `);
+      `;
 
-      $("#tour-loader").hide();
+      document.getElementById("tour-loader").style.display = "none";
       break;
 
     case 2:
@@ -167,16 +167,17 @@ curl --header "Content-Type: application/json"
         "example": exampleNumber
       }));
 
-      $("#tour-results").html(`
+      document.getElementById("tour-results").innerHTML = `
         

-# This will be updated soon
+  # With the LBRY app/daemon running locally, you can use this in your Terminal
+  curl --header "Content-Type: application/json" --data '{ "method": "publish", "params": { "name": "TITLE_OF_YOUR_CONTENT", "file_path": "ABSOLUTE_PATH_TO_MEDIA_ON_YOUR_COMPUTER", "bid": "0.001", "metadata": { "description": "DESCRIPTION_OF_YOUR_CONTENT", "title": "TITLE_OF_YOUR_CONTENT", "language": "en", "license": "", "nsfw": false }}}' http://localhost:5279    
         

 
         

         

-      `);
+      `;
 
-      $("#tour-loader").hide();
+      document.getElementById("tour-loader").style.display = "none";
       break;
 
     case 3:
@@ -187,19 +188,20 @@ curl --header "Content-Type: application/json"
         "example": exampleNumber
       }));
 
-      $("#fetch-claim-uri").val(data);
+      document.getElementById("fetch-claim-uri").value = data;
+      // $("#fetch-claim-uri").val(data);
 
-      $("#tour-results").html(`
+      document.getElementById("tour-results").innerHTML = `
         

-# With the LBRY app/daemon running locally, you can use this in your Terminal
-curl --header "Content-Type: application/json" --data '{ "method": "wallet_send", "params": { "amount": "0.01", "claim_id": "${data}" }}' http://localhost:5279    
+  # With the LBRY app/daemon running locally, you can use this in your Terminal
+  curl --header "Content-Type: application/json" --data '{ "method": "wallet_send", "params": { "amount": "0.01", "claim_id": "${data}" }}' http://localhost:5279    
         

 
         

         

-      `);
+      `;
 
-      $("#tour-loader").hide();
+      document.getElementById("tour-loader").style.display = "none";
       break;
 
     default:
@@ -209,13 +211,13 @@ curl --header "Content-Type: application/json"
 
 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()
+    description: document.getElementById("meme-description").value,
+    file_path: document.getElementById("meme-canvas").toDataURL("image/jpeg", 0.6),
+    language: document.getElementById("meme-language").value,
+    license: document.getElementById("meme-license").value,
+    name: document.getElementById("meme-title").value,
+    nsfw: document.getElementById("meme-nsfw-flag").checked,
+    title: document.getElementById("meme-title").value
   };
 
   return info;
@@ -225,8 +227,8 @@ 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);
+  if (!parseInt(document.querySelector(".tour__navigation__example.active").dataset.example)) return;
+  exampleNumber = parseInt(document.querySelector(".tour__navigation__example.active").dataset.example);
 
   switch(data.action) {
     case "choose claim":
@@ -234,24 +236,32 @@ const handleExamples = debounce(event => {
       break;
 
     case "execute claim":
-      if (!$("#fetch-claim-uri").val()) return;
-      fetchMetadata(exampleNumber, $("#fetch-claim-uri").val());
+      if (!document.getElementById("fetch-claim-uri").value.length > 0) return;
+      fetchMetadata(exampleNumber, document.getElementById("fetch-claim-uri").value);
       break;
 
     case "tour, example 1":
-      if ($("#tour-loader").hasClass("tour__content__meme")) {
-        $("#tour-loader").removeClass("tour__content__meme").addClass("tour__content__trends");
+      if (document.getElementById("tour-loader").classList.contains("tour__content__meme")) {
+        document.getElementById("tour-loader").classList.remove("tour__content__meme");
+        document.getElementById("tour-loader").classList.add("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();
+      document.getElementById("fetch-claim-uri").value = ""; // reset URL bar
+      document.querySelector("#tour-url button").textContent = "Resolve";
 
-      $(".tour__navigation__example").removeClass("active");
-      $(".tour__navigation__example:nth-child(1)").addClass("active");
+      if (document.getElementById("tour-url").style.display === "none")
+        document.getElementById("tour-url").removeAttribute("style");
 
-      $("#tour-loader").empty().show();
-      $("#tour-results").empty().show();
+      for (const example of document.querySelectorAll(".tour__navigation__example"))
+        example.classList.remove("active");
+
+      document.querySelector(".tour__navigation__example:nth-child(1)").classList.add("active");
+
+      document.getElementById("tour-loader").innerHTML = "";
+      document.getElementById("tour-results").innerHTML = "";
+
+      document.getElementById("tour-loader").removeAttribute("style");
+      document.getElementById("tour-results").removeAttribute("style");
 
       send(JSON.stringify({
         "message": `request for ${data.action}`
@@ -286,7 +296,6 @@ const handleExamples = debounce(event => {
 
       $("#fetch-claim-uri").val(""); // reset URL bar
       $("#tour-url button").text("Tip");
-      // $("#tour-url").after("
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.
");
       if ($("#tour-url")[0].style.display === "none") $("#tour-url").show();
 
       $(".tour__navigation__example").removeClass("active");
diff --git a/app/helpers/fetch-metadata.js b/app/helpers/fetch-metadata.js
index d66899b..707b56b 100644
--- a/app/helpers/fetch-metadata.js
+++ b/app/helpers/fetch-metadata.js
@@ -195,6 +195,7 @@ module.exports = exports = (data, socket) => {
 
       /*
       if (
+        data.example === 3 &&
         body.result &&
         body.result.txid
       ) explorerNotice = `
diff --git a/app/sockets.js b/app/sockets.js
index 0de1585..d87d8c1 100644
--- a/app/sockets.js
+++ b/app/sockets.js
@@ -39,7 +39,6 @@ module.exports = exports = (socket, action) => {
     case (action.message === "landed on tour"):
       generateContent(1, result => {
         socket.send(JSON.stringify({
-          // "example": 1,
           "html": result,
           "message": "updated html",
           "selector": "#tour-loader"
@@ -50,7 +49,6 @@ module.exports = exports = (socket, action) => {
     case (action.message === "request for tour, example 1"):
       generateContent(1, result => {
         socket.send(JSON.stringify({
-          // "example": 1,
           "html": result,
           "message": "updated html",
           "selector": "#tour-loader"
@@ -65,7 +63,6 @@ module.exports = exports = (socket, action) => {
     case (action.message === "request for tour, example 3"):
       generateContent(3, result => {
         socket.send(JSON.stringify({
-          // "example": 3,
           "html": result,
           "message": "updated html",
           "selector": "#tour-loader"
@@ -298,7 +295,8 @@ function generateMemeCreator(socket) {
       detectLanguageAndUpdate();
       initCanvas();
 
-      document.getElementById("tour-example-description").innerHTML = document.querySelector("[data-action='tour, example 2']").dataset.description;
+      document.getElementById("tour-example-description").innerHTML =
+        document.querySelector("[data-action='tour, example 2']").dataset.description;
 
       setTimeout(() => {
         document.querySelector(".tour__content__meme__canvas__thumbnail").click();
@@ -307,7 +305,6 @@ function generateMemeCreator(socket) {
   `;
 
   return socket.send(JSON.stringify({
-    // "example": 2,
     "html": memeCreator,
     "message": "updated html",
     "selector": "#tour-loader"