Work on Tour, step 2

This commit is contained in:
ポール ウェッブ 2018-07-23 16:46:58 -05:00
parent e228862a3b
commit 433bc4a27d
11 changed files with 189 additions and 112 deletions

View file

@ -4,7 +4,7 @@
// P R O G R A M
const relativeDate = (function (undefined) {
const relativeDate = (undefined => {
const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -104,7 +104,7 @@ img {
top: -100%; left: 0;
background-color: $white;
background-image: url("../media/images/missing.png");
background-image: url("/assets/media/images/missing.png");
background-size: cover;
box-shadow: 0 0 1px 0 rgba($black, 0.3);
content: "";

View file

@ -27,7 +27,7 @@
.hero {
align-items: center;
background-color: $black;
background-image: url("../media/svg/text-logo--white.svg");
background-image: url("/assets/media/svg/text-logo--white.svg");
background-position: center;
background-repeat: no-repeat;
display: flex;
@ -55,10 +55,6 @@
@media (max-width: 850px) {
font-size: 1.25rem;
}
// font-size: 3rem;
// margin-bottom: 1rem;
// text-transform: uppercase;
}
}
@ -300,23 +296,23 @@
}
&:nth-child(1) a::before {
background-image: url("../media/svg/flag.svg");
background-image: url("/assets/media/svg/flag.svg");
}
&:nth-child(2) a::before {
background-image: url("../media/svg/keyboard.svg");
background-image: url("/assets/media/svg/keyboard.svg");
}
&:nth-child(3) a::before {
background-image: url("../media/svg/anchor.svg");
background-image: url("/assets/media/svg/anchor.svg");
}
&:nth-child(4) a::before {
background-image: url("../media/svg/chat.svg");
background-image: url("/assets/media/svg/chat.svg");
}
&:nth-child(5) a::before {
background-image: url("../media/svg/monitor.svg");
background-image: url("/assets/media/svg/monitor.svg");
}
}
}
@ -353,15 +349,15 @@
}
&:nth-child(1) a::before {
background-image: url("../media/svg/discord.svg");
background-image: url("/assets/media/svg/discord.svg");
}
&:nth-child(2) a::before {
background-image: url("../media/svg/reddit.svg");
background-image: url("/assets/media/svg/reddit.svg");
}
&:nth-child(3) a::before {
background-image: url("../media/svg/slack.svg");
background-image: url("/assets/media/svg/slack.svg");
}
}
}

View file

@ -345,9 +345,9 @@
.page__header {
background-image: url("../media/images/background-a.jpg");
background-image: url("/assets/media/images/background-a.jpg");
}
.page__content {
background-image: url("../media/images/grid.png");
background-image: url("/assets/media/images/grid.png");
}

View file

@ -331,10 +331,11 @@
}
select {
background-image: url("../../media/svg/down.svg");
background-image: url("/assets/media/svg/down.svg");
background-position: 99% center;
background-repeat: no-repeat;
background-size: 1rem;
padding-right: 2rem;
}
textarea {

View file

@ -56,7 +56,7 @@
@include hide-text;
width: 10rem; height: 3rem;
background-image: url("../media/svg/logo.svg");
background-image: url("/assets/media/svg/logo.svg");
background-repeat: no-repeat;
background-size: contain;
flex: 1;

1
views/pages/_api.js Normal file
View file

@ -0,0 +1 @@
// https://www.npmjs.com/package/make-fetch-happen

View file

@ -16,17 +16,17 @@ module.exports = exports = () => async () => html`
<div class="hook" id="hook">
<nav class="hook__navigation" id="hook-navigation">
<div class="inner-wrap"> <!--/ TODO: Save tutorial position to localStorage /-->
<a href="#" class="hook__navigation__step" data-action="go to step 1">
<a href="#" class="hook__navigation__step" data-action="tour, step one">
<span class="number">1</span>
Resolve a claim
</a>
<a href="#" class="hook__navigation__step" data-action="go to step 2">
<a href="#" class="hook__navigation__step" data-action="tour, step two">
<span class="number">2</span>
Publish content
</a>
<a href="#" class="hook__navigation__step" data-action="go to step 3">
<a href="#" class="hook__navigation__step" data-action="tour, step three">
<span class="number">3</span>
Support with LBC
</a>
@ -126,24 +126,66 @@ function step1() {
function step2() {
/**
Step 2 loading steps:
...
- exampleCode !== ''
<pre style="clear: both;"><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
- isLoading
<div class="loader"></div>
- jsonData
<p style="text-align: center;">Success!<br/>
<a class="__button-black" v-bind:href="'http://explorer.lbry.io/tx/'+txid">See the transaction on explorer.lbry.io</a>
</p>
<p style="text-align: center;">Here is the raw response:</p>
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
Process after submitting meme:
- isLoading appears
- exampleCode and jsonData replace `#step2-placeholder` contents
- next button should exist
Issues:
- image isn't uploaded to spee.ch
- response is blank
- response should have link to upload on Blockchain Explorer
- NSFW flag should work
*/
const images = [
{
src: "../carlsagan2.jpg",
src: "/assets/media/images/carlsagan2.jpg",
alt: "Carl Sagan"
},
{
src: "../doge-meme.jpg",
src: "/assets/media/images/doge-meme.jpg",
alt: "Doge"
},
{
src: "../lbry-green.png",
src: "/assets/media/images/lbry-green.png",
alt: "LBRY Logo With Green Background"
}
];
const memePlaceholderData = {
bottomLine: {
placeholder: "Top line",
value: "that I made"
},
description: {
placeholder: "Description",
value: "Check out this image I published to LBRY via lbry.tech"
},
topLine: {
placeholder: "Top line",
value: "This is an example meme"
},
title: {
placeholder: "Title",
value: "Dank Meme Supreme da Cheese"
}
};
const renderedImages = [];
for (const image of images) {
@ -160,10 +202,9 @@ function step2() {
</header>
<div class="hook__page__content inner-wrap">
<template v-if="!isLoading">
<div class="hook__page__content__meme left">
<img v-bind:src="backgroundImage" id="base-image" style="height: 0; visibility: hidden;" alt="Base image for LBRY meme creator"/>
<canvas id="meme-canvas" width="400" height="300">Sorry, canvas is not supported</canvas>
<canvas id="meme-canvas" width="400" height="300">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
<!--/ <img v-for="image in images" v-bind:src="image.src" v-on:click="chooseImage(image.src)" class="hook__page__content__meme__thumbnail" v-bind:class="{'selected': backgroundImage === image.src}" v-bind:alt="image.alt"/> /-->
${renderedImages}
@ -174,29 +215,29 @@ function step2() {
<fieldset>
<label for="meme-top-line">Top line</label>
<input name="meme-top-line" id="meme-top-line" type="text" placeholder="Top line" required/> <!--/ v-model="topLine" /-->
<input name="meme-top-line" id="meme-top-line" type="text" placeholder="${memePlaceholderData.topLine.placeholder}" spellcheck="false" value="${memePlaceholderData.topLine.value}" required/>
</fieldset>
<fieldset>
<label for="meme-bottom-line">Bottom line</label>
<input name="meme-bottom-line" id="meme-bottom-line" type="text" placeholder="Bottom line" required/> <!--/ v-model="bottomLine" /-->
<input name="meme-bottom-line" id="meme-bottom-line" type="text" placeholder="${memePlaceholderData.bottomLine.placeholder}" spellcheck="false" value="${memePlaceholderData.bottomLine.value}" required/>
</fieldset>
<h2 class="__metadata">Metadata</h2>
<fieldset>
<label for="meme-title">Title</label>
<input name="meme-title" id="meme-title" type="text" placeholder="Title" required/> <!--/ v-model="title" /-->
<input name="meme-title" id="meme-title" type="text" placeholder="${memePlaceholderData.title.placeholder}" spellcheck="false" value="${memePlaceholderData.title.value}" required/>
</fieldset>
<fieldset>
<label for="meme-description">Description</label>
<textarea name="meme-description" id="meme-description" type="text" placeholder="Description" spellcheck="false" required>{{ description }}</textarea> <!--/ v-model="description" /-->
<textarea name="meme-description" id="meme-description" type="text" placeholder="${memePlaceholderData.description.placeholder}" spellcheck="false" required>${memePlaceholderData.description.value}</textarea>
</fieldset>
<fieldset>
<label for="meme-language">Language</label>
<select name="meme-language" id="meme-language"> <!--/ v-model="language" /-->
<select name="meme-language" id="meme-language">
<option value="ar">Arabic</option>
<option value="zh">Chinese (Mandarin)</option>
<option value="en">English</option>
@ -212,7 +253,7 @@ function step2() {
<fieldset>
<label for="meme-license">License</label>
<select name="meme-license" id="meme-license" required> <!--/ v-model="license" /-->
<select name="meme-license" id="meme-license" required>
<option value="Public Domain">Public Domain</option>
<option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
<option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
@ -225,27 +266,16 @@ function step2() {
</fieldset>
<fieldset>
<label><input type="checkbox" name="nsfw"/>NSFW</label> <!--/ v-model="nsfw" /-->
<label><input type="checkbox" name="nsfw"/>NSFW</label>
</fieldset>
<fieldset>
<input type="submit" class="__button-black" value="Submit"/>
</fieldset>
</form>
</template>
<pre v-if="exampleCode !== ''" style="clear: both;"><code class="bash"><span v-html="highlight('bash', exampleCode)"></span></code></pre>
<div class="loader" v-if="isLoading"></div>
<div v-if="jsonData">
<p style="text-align: center;">Success!<br/>
<a class="__button-black" v-bind:href="'http://explorer.lbry.io/tx/'+txid">See the transaction on explorer.lbry.io</a>
</p>
<p style="text-align: center;">Here is the raw response:</p>
<pre><code class="json"><span v-html="highlight('json', jsonData)"></span></code></pre>
</div>
</div>
<div class="hook__page__content inner-wrap" id="step2-placeholder"></div>
</section>
`;
}

View file

@ -3,10 +3,11 @@
$("#fetch-claim-uri").val(""); // reset
detectLanguageAndUpdate();
$("[data-action]").on("click", event => {
$("body").on("click", "[data-action]", event => {
event.preventDefault();
const data = event.currentTarget.dataset;
@ -20,6 +21,33 @@ $("[data-action]").on("click", event => {
fetchMetadata(data.claimId);
break;
case "tour, step one":
$(".hook__navigation__step").removeClass("active");
$(".hook__navigation__step:nth-child(1)").addClass("active");
$("#step1-page").show();
$("#step2-page").hide();
$("#step3-page").hide();
break;
case "tour, step two":
$(".hook__navigation__step").removeClass("active");
$(".hook__navigation__step:nth-child(2)").addClass("active");
$("#step1-page").hide();
$("#step2-page").show();
$("#step3-page").hide();
break;
case "tour, step three":
$(".hook__navigation__step").removeClass("active");
$(".hook__navigation__step:nth-child(3)").addClass("active");
$("#step1-page").hide();
$("#step2-page").hide();
$("#step3-page").show();
break;
default:
break;
}
@ -27,6 +55,27 @@ $("[data-action]").on("click", event => {
// H E L P E R S
function detectLanguageAndUpdate() {
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 fetchMetadata(metadataId) {
send(JSON.stringify({
"claim": metadataId,