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