Closes #151 #162
8 changed files with 325 additions and 142 deletions
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
@ -144,9 +147,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 = `
|
||||
<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>
|
||||
|
|
@ -154,9 +157,9 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
|
||||
<div class="loader" id="temp-loader"></div>
|
||||
<div id="example1-result"></div>
|
||||
`);
|
||||
`;
|
||||
|
||||
$("#tour-loader").hide();
|
||||
document.getElementById("tour-loader").style.display = "none";
|
||||
break;
|
||||
|
||||
case 2:
|
||||
|
|
@ -167,16 +170,17 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
"example": exampleNumber
|
||||
}));
|
||||
|
||||
$("#tour-results").html(`
|
||||
document.getElementById("tour-results").innerHTML = `
|
||||
<pre><code class="language-bash">
|
||||
<span class="token comment"># This will be updated soon</span>
|
||||
<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": "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 }}}'</span> <span class="token url">http://localhost:5279 </span>
|
||||
</code></pre>
|
||||
|
||||
<div class="loader" id="temp-loader"></div>
|
||||
<div id="example2-result"></div>
|
||||
`);
|
||||
`;
|
||||
|
||||
$("#tour-loader").hide();
|
||||
document.getElementById("tour-loader").style.display = "none";
|
||||
break;
|
||||
|
||||
case 3:
|
||||
|
|
@ -187,9 +191,9 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
"example": exampleNumber
|
||||
}));
|
||||
|
||||
$("#fetch-claim-uri").val(data);
|
||||
document.getElementById("fetch-claim-uri").value = data;
|
||||
|
||||
$("#tour-results").html(`
|
||||
document.getElementById("tour-results").innerHTML = `
|
||||
<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>
|
||||
|
|
@ -197,9 +201,9 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
|
||||
<div class="loader" id="temp-loader"></div>
|
||||
<div id="example3-result"></div>
|
||||
`);
|
||||
`;
|
||||
|
||||
$("#tour-loader").hide();
|
||||
document.getElementById("tour-loader").style.display = "none";
|
||||
break;
|
||||
|
||||
default:
|
||||
|
|
@ -209,13 +213,13 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
|
||||
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 +229,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 +238,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}`
|
||||
|
|
@ -260,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}`
|
||||
|
|
@ -280,20 +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");
|
||||
// $("#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();
|
||||
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}`
|
||||
|
|
@ -312,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");
|
||||
|
||||
|
|
@ -327,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");
|
||||
|
||||
|
|
@ -347,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));
|
||||
}
|
||||
|
|
|
|||
41
app/dist/scripts/sockets.js
vendored
41
app/dist/scripts/sockets.js
vendored
|
|
@ -25,41 +25,56 @@ function initializeWebSocketConnection() {
|
|||
ws.onmessage = socket => {
|
||||
const data = JSON.parse(socket.data);
|
||||
|
||||
switch (true) {
|
||||
case data.message === "updated html":
|
||||
document.querySelector(data.selector).innerHTML = data.html;
|
||||
document.getElementById("emailAddress").value = "";
|
||||
document.getElementById("emailMessage").innerHTML = "";
|
||||
switch(true) {
|
||||
case data.message === "show result":
|
||||
if (!data.example) return;
|
||||
|
||||
// `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.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 = "";
|
||||
|
||||
if (data.example === 2) {
|
||||
detectLanguageAndUpdate(); // eslint-disable-line
|
||||
initCanvas(); // eslint-disable-line
|
||||
|
||||
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");
|
||||
|
||||
document.getElementById("tour-example-description").innerHTML =
|
||||
document.querySelector(".tour__navigation__example.active").dataset.description;
|
||||
}
|
||||
}
|
||||
|
||||
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 === "notification": // TODO: Make work with appending so multiple notifications can be sent
|
||||
|
|
|
|||
|
|
@ -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 = `
|
||||
<p class="tour__description success">To see Proof of Work (lol) that your meme is on the LBRY blockchain, <a href="https://explorer.lbry.io/address/${publishResponse.result.claim_address}" rel="noopener noreferrer" target="_blank" title="Your meme, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.</p><br/>
|
||||
`;
|
||||
|
||||
return socket.send(JSON.stringify({
|
||||
"example": data.example,
|
||||
"html": raw(`
|
||||
<h3>Response</h3>
|
||||
${explorerNotice}
|
||||
<pre><code class="language-json">${renderedCode}</code></pre>
|
||||
`),
|
||||
"message": "updated html",
|
||||
"message": "show result",
|
||||
"selector": `#example${data.example}-result`
|
||||
}));
|
||||
});
|
||||
|
|
@ -151,7 +165,7 @@ module.exports = exports = (data, socket) => {
|
|||
<h3>Response</h3>
|
||||
<pre><code class="language-text">Tipping creators not in the whitelist for this example is not allowed.</code></pre>
|
||||
`),
|
||||
"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,25 +209,31 @@ module.exports = exports = (data, socket) => {
|
|||
return resolve(body.error);
|
||||
}
|
||||
|
||||
/*
|
||||
let explorerNotice = "";
|
||||
|
||||
if (
|
||||
data.example === 3 &&
|
||||
body.result &&
|
||||
body.result.txid
|
||||
) explorerNotice = `
|
||||
<p>If you want proof of the tip you just gave on behalf of LBRY, <a href="https://explorer.lbry.io/tx/${body.result.txid}" target="_blank" title="Your tip, on our blockchain explorer" rel="noopener noreferrer">check it out</a> on our blockchain explorer!</p>
|
||||
<p class="tour__description success">If you want proof of the tip you just gave on behalf of LBRY, <a href="https://explorer.lbry.io/tx/${body.result.txid}" rel="noopener noreferrer" target="_blank" title="Your tip, on our blockchain explorer">check it out</a> on our blockchain explorer! Please note that it may take a couple minutes for the transaction to be confirmed.</p><br/>
|
||||
`;
|
||||
*/
|
||||
|
||||
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(`
|
||||
<h3>Response</h3>
|
||||
${explorerNotice}
|
||||
<pre><code class="language-json">${renderedCode}</code></pre>
|
||||
`),
|
||||
"message": "updated html",
|
||||
"message": "show result",
|
||||
"selector": `#example${data.example}-result`
|
||||
}));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,78 +45,200 @@ 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 `
|
||||
<strong>${event.actor.display_login}</strong> commented on
|
||||
<a href="${generateUrl("comment", event)}" title="View this comment on GitHub">commit</a> in
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> commented on
|
||||
|
||||
<a
|
||||
href="${generateUrl("comment", event)}"
|
||||
target="_blank"
|
||||
title="View this comment on GitHub"
|
||||
rel="noopener noreferrer"
|
||||
>commit</a> in
|
||||
`;
|
||||
|
||||
case "CreateEvent":
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> created
|
||||
${event.payload.ref_type} <code>${event.payload.ref}</code> in
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> created ${event.payload.ref_type}
|
||||
|
||||
<code><a
|
||||
href="${generateUrl("create", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View this branch on GitHub"
|
||||
>${refToBranch(event.payload.ref)}</a></code> in
|
||||
`;
|
||||
|
||||
case "DeleteEvent":
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> deleted
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> deleted
|
||||
|
||||
${event.payload.ref_type} <code>${event.payload.ref}</code> in
|
||||
`;
|
||||
|
||||
case "ForkEvent":
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> forked
|
||||
<strong><a href="${generateUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer">${event.repo.name}</a></strong> to
|
||||
<strong><a href="${generateUrl("forkee", event)}" title="View this repo fork on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.forkee.name}</a></strong> in
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> forked
|
||||
|
||||
<strong><a
|
||||
href="${generateUrl("repo", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View this repo on GitHub"
|
||||
>${event.repo.name}</a></strong> to
|
||||
|
||||
<strong><a
|
||||
href="${generateUrl("forkee", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View this repo fork on GitHub"
|
||||
>${event.payload.forkee.full_name}</a></strong>
|
||||
`;
|
||||
|
||||
case "IssueCommentEvent":
|
||||
if (event.payload.issue.pull_request) {
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> commented on pull request
|
||||
<em><a href="${generateUrl("issue", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> commented on pull request
|
||||
|
||||
<em><a
|
||||
href="${generateUrl("issue", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View this comment on GitHub"
|
||||
>${event.payload.issue.title}</a></em> in
|
||||
`;
|
||||
} else {
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> commented on issue
|
||||
<em><a href="${generateUrl("issue", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
|
||||
|
||||
<em><a
|
||||
href="${generateUrl("issue", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View this comment on GitHub"
|
||||
>${event.payload.issue.title}</a></em> in
|
||||
`;
|
||||
}
|
||||
|
||||
case "IssuesEvent":
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> ${event.payload.action} issue
|
||||
<em><a href="${generateUrl("issue", event)}" title="View this issue on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.issue.title}</a></em> in
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> ${event.payload.action} issue
|
||||
|
||||
<em><a
|
||||
href="${generateUrl("issue", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View this issue on GitHub"
|
||||
>${event.payload.issue.title}</a></em> in
|
||||
`;
|
||||
|
||||
case "PullRequestEvent":
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> ${event.payload.action} pull request
|
||||
<em><a href="${generateUrl("pull_request", event)}" title="View this pull request on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.pull_request.title}</a></em> in
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> pull request
|
||||
|
||||
<em><a
|
||||
href="${generateUrl("pull_request", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View this pull request on GitHub"
|
||||
>${event.payload.pull_request.title}</a></em> in
|
||||
`;
|
||||
|
||||
case "PullRequestReviewCommentEvent":
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> commented on pull request
|
||||
<em><a href="${generateUrl("pull_request", event)}" title="View this comment on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.pull_request.title}</a></em> in
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> commented on pull request
|
||||
|
||||
<em><a
|
||||
href="${generateUrl("pull_request", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View this comment on GitHub"
|
||||
>${event.payload.pull_request.title}</a></em> in
|
||||
`;
|
||||
|
||||
case "PushEvent":
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> pushed to
|
||||
<code><a href="${generateUrl("push", event)}" title="View this branch on GitHub" target="_blank" rel="noopener noreferrer">${refToBranch(event.payload.ref)}</a></code> in
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> pushed to
|
||||
|
||||
<code><a
|
||||
href="${generateUrl("push", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View this branch on GitHub"
|
||||
>${refToBranch(event.payload.ref)}</a></code> in
|
||||
`;
|
||||
|
||||
case "ReleaseEvent":
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> released
|
||||
<em><a href="${generateUrl("release", event)}" title="View this release on GitHub" target="_blank" rel="noopener noreferrer">${event.payload.release.tag_name}</a></em> in
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> released
|
||||
|
||||
<em><a
|
||||
href="${generateUrl("release", event)}"
|
||||
title="View this release on GitHub"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>${event.payload.release.tag_name}</a></em> in
|
||||
`;
|
||||
|
||||
case "WatchEvent":
|
||||
return `
|
||||
<strong>${event.actor.display_login}</strong> starred the repo
|
||||
<strong><a
|
||||
href="${generateUrl("actor", event)}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Visit ${event.actor.login}'s profile on GitHub"
|
||||
>${event.actor.display_login}</a></strong> starred the repo
|
||||
`;
|
||||
|
||||
default:
|
||||
|
|
@ -135,15 +257,19 @@ function generateGitHubFeed(displayGitHubFeed) {
|
|||
reply.forEach(item => events.push(JSON.parse(item)));
|
||||
|
||||
for (const event of events) {
|
||||
const repoName = `
|
||||
<a href="${generateUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer"><strong>${event.repo.name}</strong></a>
|
||||
`;
|
||||
|
||||
renderedEvents.push(`
|
||||
<div class='github-feed__event'>
|
||||
<a href="${generateUrl("actor", event)}" target="_blank" rel="noopener noreferrer">
|
||||
<img src="${event.actor.avatar_url}" class="github-feed__event__avatar" alt=""/>
|
||||
<img src="${event.actor.avatar_url}" class="github-feed__event__avatar" alt="${event.actor.login}'s avatar"/>
|
||||
</a>
|
||||
|
||||
<p>
|
||||
${generateEvent(event)}
|
||||
<a href="${generateUrl("repo", event)}" title="View this repo on GitHub" target="_blank" rel="noopener noreferrer"><strong>${event.repo.name}</strong></a>
|
||||
${event.type !== "ForkEvent" ? repoName : ""}
|
||||
<em class="github-feed__event__time">${relativeDate(new Date(event.created_at))}</em>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -163,15 +289,15 @@ function generateGitHubFeed(displayGitHubFeed) {
|
|||
}
|
||||
|
||||
function generateUrl(type, event) {
|
||||
switch (type) {
|
||||
switch(type) {
|
||||
case "actor":
|
||||
return `https://github.com/${event.actor.display_login}`;
|
||||
|
||||
case "comment":
|
||||
return event.payload.comment.html_url;
|
||||
|
||||
case "repo":
|
||||
return `https://github.com/${event.repo.name}`;
|
||||
case "create":
|
||||
return `https://github.com/${event.repo.name}/tree/${event.payload.ref}`;
|
||||
|
||||
case "forkee":
|
||||
return `https://github.com/${event.payload.forkee.full_name}`;
|
||||
|
|
@ -182,11 +308,14 @@ function generateUrl(type, event) {
|
|||
case "pull_request":
|
||||
return event.payload.pull_request.html_url;
|
||||
|
||||
case "push":
|
||||
return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
|
||||
|
||||
case "release":
|
||||
return event.payload.release.html_url;
|
||||
|
||||
case "push":
|
||||
return `https://github.com/${event.repo.name}/tree/${event.payload.ref.replace("refs/heads/", "")}`;
|
||||
case "repo":
|
||||
return `https://github.com/${event.repo.name}`;
|
||||
|
||||
default:
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -479,4 +479,8 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -95,6 +95,7 @@
|
|||
}
|
||||
|
||||
.github-feed__event {
|
||||
cursor: default;
|
||||
line-height: 1.55;
|
||||
|
||||
@media (max-width: 700px) {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -146,9 +143,8 @@ function generateContent(exampleNumber, displayTrendingContent) {
|
|||
const rawContentCollection = [];
|
||||
const renderedContentCollection = [];
|
||||
|
||||
for (const url of approvedUrls) {
|
||||
for (const url of approvedUrls)
|
||||
rawContentCollection.push(fetchMetadata({ claim: url, method: "resolve", example: exampleNumber }));
|
||||
}
|
||||
|
||||
return Promise.all(rawContentCollection).then(collection => {
|
||||
for (const part of collection) {
|
||||
|
|
@ -218,9 +214,8 @@ function generateMemeCreator(socket) {
|
|||
|
||||
const renderedImages = [];
|
||||
|
||||
for (const image of images) {
|
||||
for (const image of images)
|
||||
renderedImages.push(`<img alt="${image.alt}" class="tour__content__meme__canvas__thumbnail" src="${image.src}"/>`);
|
||||
}
|
||||
|
||||
const memeCreator = html`
|
||||
<div class="tour__content__meme__canvas">
|
||||
|
|
@ -293,21 +288,10 @@ function generateMemeCreator(socket) {
|
|||
<button data-action="upload image" class="__button-black" type="button">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
detectLanguageAndUpdate();
|
||||
initCanvas();
|
||||
|
||||
document.getElementById("tour-example-description").innerHTML = document.querySelector("[data-action='tour, example 2']").dataset.description;
|
||||
|
||||
setTimeout(() => {
|
||||
document.querySelector(".tour__content__meme__canvas__thumbnail").click();
|
||||
}, 100);
|
||||
</script>
|
||||
`;
|
||||
|
||||
return socket.send(JSON.stringify({
|
||||
// "example": 2,
|
||||
"example": 2,
|
||||
"html": memeCreator,
|
||||
"message": "updated html",
|
||||
"selector": "#tour-loader"
|
||||
|
|
|
|||
Loading…
Reference in a new issue