Work on Tour, step 2

modules/relative-date.js

@@ -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;

sass/init/_base.scss

@@ -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: "";

sass/pages/_home.scss

@@ -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");
         }
       }
     }

sass/pages/_page.scss

@@ -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");
 }

sass/pages/_tour.scss

@@ -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 {

sass/partials/_navigation.scss

@@ -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;

views/pages/_api.js

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

views/pages/tour.js

@@ -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,92 +202,80 @@ function step2() {
       </header>
 
       <div class="hook__page__content inner-wrap">
-        <template v-if="!isLoading">
+        <div class="hook__page__content__meme left">
-          <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"/>
-            <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">Unfortunately, it looks like canvas is <strong>not supported</strong> in your browser</canvas>
-            <canvas id="meme-canvas" width="400" height="300">Sorry, canvas is not supported</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"/> /-->
+          <!--/ <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}
+          ${renderedImages}
-          </div>
-
-          <form class="hook__page__content__meme right"> <!--/ v-on:submit.prevent="submit" /-->
-            <h2>Image Text</h2>
-
-            <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" /-->
-            </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" /-->
-            </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" /-->
-            </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" /-->
-            </fieldset>
-
-            <fieldset>
-              <label for="meme-language">Language</label>
-              <select name="meme-language" id="meme-language"> <!--/ v-model="language" /-->
-                <option value="ar">Arabic</option>
-                <option value="zh">Chinese (Mandarin)</option>
-                <option value="en">English</option>
-                <option value="fr">French</option>
-                <option value="de">German</option>
-                <option value="it">Italian</option>
-                <option value="jp">Japanese</option>
-                <option value="ru">Russian</option>
-                <option value="es">Spanish</option>
-                <option value="">Not specified</option>
-              </select>
-            </fieldset>
-
-            <fieldset>
-              <label for="meme-license">License</label>
-              <select name="meme-license" id="meme-license" required> <!--/ v-model="license" /-->
-                <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>
-                <option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
-                <option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
-                <option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
-                <option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
-                <option value="None">None</option>
-              </select>
-            </fieldset>
-
-            <fieldset>
-              <label><input type="checkbox" name="nsfw"/>NSFW</label> <!--/ v-model="nsfw" /-->
-            </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>
+
+        <form class="hook__page__content__meme right"> <!--/ v-on:submit.prevent="submit" /-->
+          <h2>Image Text</h2>
+
+          <fieldset>
+            <label for="meme-top-line">Top line</label>
+            <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="${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="${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="${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">
+              <option value="ar">Arabic</option>
+              <option value="zh">Chinese (Mandarin)</option>
+              <option value="en">English</option>
+              <option value="fr">French</option>
+              <option value="de">German</option>
+              <option value="it">Italian</option>
+              <option value="jp">Japanese</option>
+              <option value="ru">Russian</option>
+              <option value="es">Spanish</option>
+              <option value="">Not specified</option>
+            </select>
+          </fieldset>
+
+          <fieldset>
+            <label for="meme-license">License</label>
+            <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>
+              <option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
+              <option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
+              <option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
+              <option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
+              <option value="None">None</option>
+            </select>
+          </fieldset>
+
+          <fieldset>
+            <label><input type="checkbox" name="nsfw"/>NSFW</label>
+          </fieldset>
+
+          <fieldset>
+            <input type="submit" class="__button-black" value="Submit"/>
+          </fieldset>
+        </form>
       </div>
+
+      <div class="hook__page__content inner-wrap" id="step2-placeholder"></div>
     </section>
   `;
 }

views/partials/tour-scripts.js

@@ -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,