From c2f5ea82c26d8e6c45d335419c79030d7edc04bc 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: Fri, 28 Sep 2018 14:07:59 -0500 Subject: [PATCH] Refactoring and fixes --- app/components/client/ecosystem-scripts.js | 4 +- app/components/client/tour-scripts.js | 89 +++++++++++++--------- app/dist/scripts/sockets.js | 53 ++++++++----- app/helpers/fetch-metadata.js | 39 +++++++--- app/helpers/github.js | 4 +- app/sass/pages/_tour.scss | 4 + app/sockets.js | 19 +---- 7 files changed, 129 insertions(+), 83 deletions(-) diff --git a/app/components/client/ecosystem-scripts.js b/app/components/client/ecosystem-scripts.js index 664a3aa..a5f91b3 100644 --- a/app/components/client/ecosystem-scripts.js +++ b/app/components/client/ecosystem-scripts.js @@ -27,7 +27,7 @@ $("[data-action]").on("click", event => { function open(ecosystemComponentClassName) { - switch (true) { + switch(true) { case (ecosystemComponentClassName === "lbrycrd"): resetClassesAndStorage(); document.getElementsByClassName("lbrycrd")[0].classList.add("active"); @@ -82,7 +82,7 @@ function openSubmodule(ecosystemComponentClassName) { document.querySelectorAll(".ecosystem__module").forEach(n => n.classList.remove("active")); - switch (true) { + switch(true) { case (ecosystemComponentClassName === "chainquery"): setSubmoduleConnectionTitle(ecosystemComponentClassName); diff --git a/app/components/client/tour-scripts.js b/app/components/client/tour-scripts.js index 5cecfdc..9b48ba7 100644 --- a/app/components/client/tour-scripts.js +++ b/app/components/client/tour-scripts.js @@ -24,9 +24,8 @@ document.querySelector("body").addEventListener("click", event => { event.explicitOriginalTarget.classList && event.explicitOriginalTarget.classList[0] === "tour__content__meme__canvas__thumbnail" ) { - for (const thumbnail of document.querySelectorAll(".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); @@ -50,6 +49,9 @@ document.getElementById("fetch-claim-uri").addEventListener("keyup", event => { document.getElementById("fetch-claim-uri").value.length > 0 ) fetchMetadata(3, document.getElementById("fetch-claim-uri").value); break; + + default: + break; } }); @@ -85,7 +87,8 @@ function detectLanguageAndUpdate() { // eslint-disable-line 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 (memeLocaleObject[key] && memeLocaleObject[key].value) + memeLocales.push(memeLocaleObject[key].value); } if ( @@ -169,8 +172,8 @@ curl --header "Content-Type: application/json" 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": "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    
+# 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
@@ -189,12 +192,11 @@ curl --header "Content-Type: application/json" })); document.getElementById("fetch-claim-uri").value = data; - // $("#fetch-claim-uri").val(data); 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
@@ -270,18 +272,24 @@ const handleExamples = debounce(event => { break; case "tour, example 2": - if ($("#tour-loader").hasClass("tour__content__trends")) { - $("#tour-loader").removeClass("tour__content__trends").addClass("tour__content__meme"); + if (document.getElementById("tour-loader").classList.contains("tour__content__trends")) { + document.getElementById("tour-loader").classList.remove("tour__content__trends"); + document.getElementById("tour-loader").classList.add("tour__content__meme"); } - $("#fetch-claim-uri").val(""); // reset URL bar - $("#tour-url").hide(); + document.getElementById("fetch-claim-uri").value = ""; // reset URL bar + document.getElementById("tour-url").style.display = "none"; - $(".tour__navigation__example").removeClass("active"); - $(".tour__navigation__example:nth-child(2)").addClass("active"); + for (const example of document.querySelectorAll(".tour__navigation__example")) + example.classList.remove("active"); - $("#tour-loader").empty().show(); - $("#tour-results").empty().show(); + document.querySelector(".tour__navigation__example:nth-child(2)").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}` @@ -290,19 +298,27 @@ const handleExamples = debounce(event => { break; case "tour, example 3": - 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("Tip"); - 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 = "Tip"; - $(".tour__navigation__example").removeClass("active"); - $(".tour__navigation__example:nth-child(3)").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(3)").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}` @@ -321,8 +337,8 @@ const handleExamples = debounce(event => { function initCanvas() { // eslint-disable-line const canvas = document.getElementById("meme-canvas"); - const canvasWidth = 400; const canvasHeight = 300; + const canvasWidth = 400; const ctx = canvas.getContext("2d"); const img = document.getElementById("base-image"); @@ -336,16 +352,18 @@ function initCanvas() { // eslint-disable-line 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)); + + ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20); + ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20); + + ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); + ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); } function updateCanvas(imageSource) { const canvas = document.getElementById("meme-canvas"); - const canvasWidth = 400; const canvasHeight = 300; + const canvasWidth = 400; const ctx = canvas.getContext("2d"); const img = document.getElementById("base-image"); @@ -356,8 +374,9 @@ function updateCanvas(imageSource) { 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)); + ctx.strokeText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20); + ctx.fillText(document.getElementById("meme-top-line").value.toUpperCase(), canvasWidth / 2, 20); + + ctx.strokeText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); + ctx.fillText(document.getElementById("meme-bottom-line").value.toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); } diff --git a/app/dist/scripts/sockets.js b/app/dist/scripts/sockets.js index 0ff09cf..799a4ca 100644 --- a/app/dist/scripts/sockets.js +++ b/app/dist/scripts/sockets.js @@ -25,34 +25,48 @@ function initializeWebSocketConnection() { ws.onmessage = socket => { const data = JSON.parse(socket.data); - switch (true) { + switch(true) { + case data.message === "show result": + if (!data.example) return; + + document.querySelector(data.selector).innerHTML = data.html; + + if (!document.querySelector(`[data-example="${data.example}"`).classList.contains("completed")) + document.getElementById("tour-example-description").classList.remove("success"); + + document.querySelector(`[data-example="${data.example}"`).classList.add("completed"); + document.getElementById("tour-example-description").classList.add("success"); + + document.getElementById("tour-example-description").innerHTML = + document.querySelector(`[data-example="${data.example}"`).dataset.success; + + if (document.getElementById("temp-loader")) + document.getElementById("temp-loader").style.display = "none"; + + if (document.querySelector(".tour")) + document.querySelector(".tour").classList.remove("waiting"); + + break; + case data.message === "updated html": document.querySelector(data.selector).innerHTML = data.html; document.getElementById("emailAddress").value = ""; document.getElementById("emailMessage").innerHTML = ""; - // `data.example` is added when updating HTML. - // This is when the results of an example are sent to the client. - if (data.example) { - if (!document.querySelector(`[data-example="${data.example}"`).classList.contains("completed")) { - document.getElementById("tour-example-description").classList.remove("success"); - } + if (data.example === 2) { + detectLanguageAndUpdate(); // eslint-disable-line + initCanvas(); // eslint-disable-line - document.querySelector(`[data-example="${data.example}"`).classList.add("completed"); - document.getElementById("tour-example-description").classList.add("success"); - - document.getElementById("tour-example-description").innerHTML = - document.querySelector(`[data-example="${data.example}"`).dataset.success; + setTimeout(() => { + document.querySelector(".tour__content__meme__canvas__thumbnail").click(); + }, 100); } - // If `data.example` isn't found, reset the description area. - else { - if (document.getElementById("tour-example-description")) { - document.getElementById("tour-example-description").classList.remove("success"); + if (document.getElementById("tour-example-description")) { + document.getElementById("tour-example-description").classList.remove("success"); - document.getElementById("tour-example-description").innerHTML = - document.querySelector(".tour__navigation__example.active").dataset.description; - } + document.getElementById("tour-example-description").innerHTML = + document.querySelector(".tour__navigation__example.active").dataset.description; } if (document.getElementById("temp-loader")) @@ -60,6 +74,7 @@ function initializeWebSocketConnection() { if (document.querySelector(".tour")) document.querySelector(".tour").classList.remove("waiting"); + break; case data.message === "notification": // TODO: Make work with appending so multiple notifications can be sent diff --git a/app/helpers/fetch-metadata.js b/app/helpers/fetch-metadata.js index 707b56b..df646fb 100644 --- a/app/helpers/fetch-metadata.js +++ b/app/helpers/fetch-metadata.js @@ -63,7 +63,7 @@ module.exports = exports = (data, socket) => { body.description = dataDetails.description; body.language = dataDetails.language; body.license = dataDetails.license; - body.name = dataDetails.name.replace(/\s/g, "-") + randomString(10); // underscores are not allowed? + body.name = dataDetails.name + randomString(10); // underscores are not allowed? body.nsfw = dataDetails.nsfw; body.title = dataDetails.title; @@ -110,15 +110,29 @@ module.exports = exports = (data, socket) => { return; } - const renderedCode = prism.highlight(stringifyObject(publishResponse, { indent: " ", singleQuotes: false }), prism.languages.json, "json"); + const renderedCode = prism.highlight( + stringifyObject(publishResponse, { indent: " ", singleQuotes: false }), + prism.languages.json, + "json" + ); + + let explorerNotice = ""; + + if ( + publishResponse.result && + publishResponse.result.claim_address + ) explorerNotice = ` +

To see Proof of Work (lol) that your meme is on the LBRY blockchain, check it out on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.


+ `; return socket.send(JSON.stringify({ "example": data.example, "html": raw(`

Response

+ ${explorerNotice} 
${renderedCode}
`), - "message": "updated html", + "message": "show result", "selector": `#example${data.example}-result` })); }); @@ -151,7 +165,7 @@ module.exports = exports = (data, socket) => {

Response

Tipping creators not in the whitelist for this example is not allowed.
`), - "message": "updated html", + "message": "show result", "selector": `#example${data.example}-result` })); } @@ -162,6 +176,8 @@ module.exports = exports = (data, socket) => { body.claim_id = claimAddress; } + + return new Promise((resolve, reject) => { // eslint-disable-line request({ body: body, @@ -193,26 +209,31 @@ module.exports = exports = (data, socket) => { return resolve(body.error); } - /* + let explorerNotice = ""; + if ( data.example === 3 && body.result && body.result.txid ) explorerNotice = ` -

If you want proof of the tip you just gave on behalf of LBRY, check it out on our blockchain explorer!

+

If you want proof of the tip you just gave on behalf of LBRY, check it out on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.


`; - */ if (socket) { - const renderedCode = prism.highlight(stringifyObject(body, { indent: " ", singleQuotes: false }), prism.languages.json, "json"); + const renderedCode = prism.highlight( + stringifyObject(body, { indent: " ", singleQuotes: false }), + prism.languages.json, + "json" + ); return socket.send(JSON.stringify({ "example": data.example, "html": raw(`

Response

+ ${explorerNotice} 
${renderedCode}
`), - "message": "updated html", + "message": "show result", "selector": `#example${data.example}-result` })); } diff --git a/app/helpers/github.js b/app/helpers/github.js index c978423..9f0cf8d 100644 --- a/app/helpers/github.js +++ b/app/helpers/github.js @@ -45,7 +45,7 @@ if (typeof process.env.REDISCLOUD_URL !== "undefined") { // P R O G R A M function generateEvent(event) { - switch (event.type) { + switch(event.type) { case "CommitCommentEvent": return ` { for (const part of collection) { @@ -215,9 +214,8 @@ function generateMemeCreator(socket) { const renderedImages = []; - for (const image of images) { + for (const image of images) renderedImages.push(`${image.alt}`); - } const memeCreator = html`
@@ -290,21 +288,10 @@ function generateMemeCreator(socket) { - - `; return socket.send(JSON.stringify({ + "example": 2, "html": memeCreator, "message": "updated html", "selector": "#tour-loader"