2018-07-16 17:06:37 -04:00
/* global $, send */ "use strict" ;
2018-07-25 14:44:02 -05:00
initializeTour ( ) ;
2018-07-16 17:06:37 -04:00
2018-08-10 17:29:06 -05:00
if ( window . location . href . search && window . location . href . split ( "?url=" ) [ 1 ] ) { // pre-fill example one if search parameter exists
2018-07-26 17:18:26 -05:00
const searchParameter = window . location . href . split ( "?url=" ) [ 1 ] ;
fetchMetadata ( 1 , searchParameter ) ;
}
2018-07-23 16:46:58 -05:00
$ ( "body" ) . on ( "click" , "[data-action]" , event => {
2018-07-16 17:06:37 -04:00
event . preventDefault ( ) ;
2018-08-09 17:17:47 -05:00
2018-08-21 16:22:31 -05:00
$ ( ".tour" ) . addClass ( "waiting" ) ;
2018-07-24 17:29:25 -05:00
2018-08-21 16:22:31 -05:00
setTimeout ( ( ) => {
handleExamples ( event ) ;
$ ( ".tour" ) . removeClass ( "waiting" ) ;
2018-08-30 16:53:52 -05:00
} , 2500 ) ; // "rate-limit" to allow example divs time to populate
2018-07-16 17:06:37 -04:00
} ) ;
2018-08-10 17:29:06 -05:00
$ ( "body" ) . on ( "click" , ".tour__content__meme__canvas__thumbnail" , event => {
$ ( ".tour__content__meme__canvas__thumbnail" ) . removeClass ( "selected" ) ;
2018-07-24 11:44:32 -05:00
event . currentTarget . className += " selected" ;
updateCanvas ( event . currentTarget ) ;
} ) ;
2018-08-17 17:22:19 -05:00
$ ( "#fetch-claim-uri" ) . on ( "keyup" , event => {
const key = event . keyCode ? event . keyCode : event . which ;
2018-08-09 09:38:42 -05:00
if ( key === 13 && $ ( "#fetch-claim-uri" ) . val ( ) ) fetchMetadata ( 1 , $ ( "#fetch-claim-uri" ) . val ( ) ) ;
} ) ;
2018-08-10 17:29:06 -05:00
$ ( "body" ) . on ( "keyup" , "#meme-top-line, #meme-bottom-line" , ( ) => updateCanvas ( ) ) ;
2018-07-24 11:44:32 -05:00
2018-07-18 16:31:05 -04:00
2018-07-23 16:46:58 -05:00
// H E L P E R S
2018-08-21 16:22:31 -05:00
function clearCanvas ( canvas ) {
const ctx = canvas . getContext ( "2d" ) ;
ctx . save ( ) ;
ctx . globalCompositeOperation = "copy" ;
ctx . strokeStyle = "transparent" ;
ctx . beginPath ( ) ;
ctx . lineTo ( 0 , 0 ) ;
ctx . stroke ( ) ;
ctx . restore ( ) ;
}
2018-08-10 17:29:06 -05:00
function detectLanguageAndUpdate ( ) { // eslint-disable-line
2018-07-23 16:46:58 -05:00
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 ) ;
}
2018-08-21 16:22:31 -05:00
function debounce ( func , wait , immediate ) {
let timeout ;
return function ( ) {
const context = this ;
const args = arguments ;
const later = ( ) => {
timeout = null ;
if ( ! immediate ) func . apply ( context , args ) ;
} ;
const callNow = immediate && ! timeout ;
clearTimeout ( timeout ) ;
timeout = setTimeout ( later , wait ) ;
if ( callNow ) func . apply ( context , args ) ;
} ;
}
2018-07-25 14:44:02 -05:00
function initializeTour ( ) {
2018-08-21 16:22:31 -05:00
$ ( ".tour" ) . addClass ( "waiting" ) ;
2018-08-09 09:38:42 -05:00
$ ( "#fetch-claim-uri" ) . val ( "" ) . focus ( ) ; // reset
2018-08-09 17:17:47 -05:00
$ ( ".tour__sidebar__example:nth-child(1)" ) . addClass ( "active" ) ;
2018-07-25 14:44:02 -05:00
2018-08-07 18:15:34 -05:00
send ( JSON . stringify ( {
"message" : "landed on tour"
} ) ) ;
2018-08-21 16:22:31 -05:00
setTimeout ( ( ) => {
$ ( ".tour" ) . removeClass ( "waiting" ) ;
2018-08-30 16:53:52 -05:00
} , 2500 ) ;
2018-07-25 14:44:02 -05:00
}
2018-07-18 16:31:05 -04:00
2018-08-09 17:17:47 -05:00
function fetchMetadata ( exampleNumber , data ) {
if ( ! exampleNumber ) return ;
2018-07-24 17:29:25 -05:00
2018-08-09 17:17:47 -05:00
switch ( exampleNumber ) {
2018-07-24 17:29:25 -05:00
case 1 :
send ( JSON . stringify ( {
"claim" : data ,
"message" : "fetch metadata" ,
"method" : "resolve" ,
2018-08-09 17:17:47 -05:00
"example" : exampleNumber
2018-07-24 17:29:25 -05:00
} ) ) ;
2018-08-10 17:29:06 -05:00
$ ( "#fetch-claim-uri" ) . val ( data ) ;
2018-07-24 17:29:25 -05:00
2018-08-08 15:20:53 -05:00
$ ( "#tour-results" ) . html ( `
< pre > < code class = "language-bash" >
2018-08-14 15:15:27 -05:00
< span class = "token comment" > # With the LBRY app / daemon running locally , you can use this in your Terminal < / s p a n >
curl -- header < span class = "token string" > "Content-Type: application/json" < / s p a n > - - d a t a < s p a n c l a s s = " t o k e n s t r i n g " > ' { " m e t h o d " : " r e s o l v e " , " p a r a m s " : { " u r i " : " $ { d a t a } " } } ' < / s p a n > < s p a n c l a s s = " t o k e n u r l " > h t t p : / / l o c a l h o s t : 5 2 7 9 < / s p a n >
2018-08-08 15:20:53 -05:00
< / c o d e > < / p r e >
2018-07-18 16:31:05 -04:00
2018-08-08 15:20:53 -05:00
< div class = "loader" id = "temp-loader" > < / d i v >
2018-08-09 17:17:47 -05:00
< div id = "example1-result" > < / d i v >
2018-07-24 17:29:25 -05:00
` );
2018-08-08 15:20:53 -05:00
$ ( "#tour-loader" ) . hide ( ) ;
2018-07-24 17:29:25 -05:00
break ;
case 2 :
2018-07-25 13:35:59 -05:00
send ( JSON . stringify ( {
"data" : data ,
"message" : "fetch metadata" ,
"method" : "publish" ,
2018-08-09 17:17:47 -05:00
"example" : exampleNumber
} ) ) ;
2018-08-17 17:22:19 -05:00
$ ( "#tour-results" ) . html ( `
< pre > < code class = "language-bash" >
< span class = "token comment" > # This will be updated soon < / s p a n >
< / c o d e > < / p r e >
< div class = "loader" id = "temp-loader" > < / d i v >
< div id = "example2-result" > < / d i v >
` );
$ ( "#tour-loader" ) . hide ( ) ;
2018-08-09 17:17:47 -05:00
break ;
case 3 :
send ( JSON . stringify ( {
"claim" : data ,
"message" : "fetch metadata" ,
"method" : "wallet_send" ,
"example" : exampleNumber
2018-07-25 13:35:59 -05:00
} ) ) ;
2018-08-09 17:17:47 -05:00
$ ( "#fetch-claim-uri" ) . val ( data ) ;
$ ( "#tour-results" ) . html ( `
< pre > < code class = "language-bash" >
2018-08-14 15:15:27 -05:00
< span class = "token comment" > # With the LBRY app / daemon running locally , you can use this in your Terminal < / s p a n >
curl -- header < span class = "token string" > "Content-Type: application/json" < / s p a n > - - d a t a < s p a n c l a s s = " t o k e n s t r i n g " > ' { " m e t h o d " : " w a l l e t _ s e n d " , " p a r a m s " : { " a m o u n t " : " 0 . 0 1 " , " c l a i m _ i d " : " $ { d a t a } " } } ' < / s p a n > < s p a n c l a s s = " t o k e n u r l " > h t t p : / / l o c a l h o s t : 5 2 7 9 < / s p a n >
2018-08-09 17:17:47 -05:00
< / c o d e > < / p r e >
< div class = "loader" id = "temp-loader" > < / d i v >
< div id = "example3-result" > < / d i v >
` );
$ ( "#tour-loader" ) . hide ( ) ;
2018-07-24 17:29:25 -05:00
break ;
default :
break ;
}
}
2018-07-18 16:31:05 -04:00
2018-07-25 13:35:59 -05:00
function getMemeInfo ( ) { // TODO: Error handling
2018-08-09 17:17:47 -05:00
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 ( )
} ;
2018-07-24 17:29:25 -05:00
return info ;
2018-07-18 16:31:05 -04:00
}
2018-08-21 16:22:31 -05:00
const handleExamples = debounce ( event => {
let exampleNumber ;
const data = event . currentTarget . dataset ;
2018-07-24 17:29:25 -05:00
2018-08-21 16:22:31 -05:00
if ( ! parseInt ( $ ( ".tour__sidebar__example.active" ) [ 0 ] . dataset . example ) ) return ;
exampleNumber = parseInt ( $ ( ".tour__sidebar__example.active" ) [ 0 ] . dataset . example ) ;
2018-07-24 17:29:25 -05:00
2018-08-21 16:22:31 -05:00
switch ( data . action ) {
case "choose claim" :
fetchMetadata ( exampleNumber , data . claimId ) ;
break ;
2018-07-24 11:44:32 -05:00
2018-08-21 16:22:31 -05:00
case "execute claim" :
if ( ! $ ( "#fetch-claim-uri" ) . val ( ) ) return ;
fetchMetadata ( exampleNumber , $ ( "#fetch-claim-uri" ) . val ( ) ) ;
break ;
case "tour, example 1" :
if ( $ ( "#tour-loader" ) . hasClass ( "tour__content__meme" ) ) {
$ ( "#tour-loader" ) . removeClass ( "tour__content__meme" ) . addClass ( "tour__content__trends" ) ;
}
$ ( "#fetch-claim-uri" ) . val ( "" ) ; // reset URL bar
2018-08-30 16:53:52 -05:00
$ ( "#tour-url button" ) . text ( "Resolve" ) ;
2018-08-21 16:22:31 -05:00
if ( $ ( "#tour-url" ) [ 0 ] . style . display === "none" ) $ ( "#tour-url" ) . show ( ) ;
$ ( ".tour__sidebar__example" ) . removeClass ( "active" ) ;
$ ( ".tour__sidebar__example:nth-child(1)" ) . addClass ( "active" ) ;
$ ( "#tour-loader" ) . empty ( ) . show ( ) ;
$ ( "#tour-results" ) . empty ( ) . show ( ) ;
send ( JSON . stringify ( {
"message" : ` request for ${ data . action } `
} ) ) ;
break ;
case "tour, example 2" :
if ( $ ( "#tour-loader" ) . hasClass ( "tour__content__trends" ) ) {
$ ( "#tour-loader" ) . removeClass ( "tour__content__trends" ) . addClass ( "tour__content__meme" ) ;
}
$ ( "#fetch-claim-uri" ) . val ( "" ) ; // reset URL bar
$ ( "#tour-url" ) . hide ( ) ;
$ ( ".tour__sidebar__example" ) . removeClass ( "active" ) ;
$ ( ".tour__sidebar__example:nth-child(2)" ) . addClass ( "active" ) ;
$ ( "#tour-loader" ) . empty ( ) . show ( ) ;
$ ( "#tour-results" ) . empty ( ) . show ( ) ;
send ( JSON . stringify ( {
"message" : ` request for ${ data . action } `
} ) ) ;
break ;
case "tour, example 3" :
if ( $ ( "#tour-loader" ) . hasClass ( "tour__content__meme" ) ) {
$ ( "#tour-loader" ) . removeClass ( "tour__content__meme" ) . addClass ( "tour__content__trends" ) ;
}
$ ( "#fetch-claim-uri" ) . val ( "" ) ; // reset URL bar
2018-08-30 16:53:52 -05:00
$ ( "#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>");
2018-08-21 16:22:31 -05:00
if ( $ ( "#tour-url" ) [ 0 ] . style . display === "none" ) $ ( "#tour-url" ) . show ( ) ;
$ ( ".tour__sidebar__example" ) . removeClass ( "active" ) ;
$ ( ".tour__sidebar__example:nth-child(3)" ) . addClass ( "active" ) ;
$ ( "#tour-loader" ) . empty ( ) . show ( ) ;
$ ( "#tour-results" ) . empty ( ) . show ( ) ;
send ( JSON . stringify ( {
"message" : ` request for ${ data . action } `
} ) ) ;
break ;
case "upload image" :
fetchMetadata ( exampleNumber , getMemeInfo ( ) ) ;
break ;
default :
break ;
}
} , 10 ) ;
2018-07-24 11:44:32 -05:00
2018-08-10 17:29:06 -05:00
function initCanvas ( ) { // eslint-disable-line
2018-07-24 11:44:32 -05:00
const canvas = document . getElementById ( "meme-canvas" ) ;
const canvasWidth = 400 ;
const canvasHeight = 300 ;
const ctx = canvas . getContext ( "2d" ) ;
const img = document . getElementById ( "base-image" ) ;
clearCanvas ( canvas ) ;
ctx . drawImage ( img , 0 , 0 , canvasWidth , canvasHeight , 0 , 0 , canvasWidth , canvasHeight ) ;
ctx . fillStyle = "white" ;
ctx . font = "bold 28px Karla" ;
ctx . lineJoin = "round" ;
ctx . lineWidth = 4 ;
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 ) ) ;
}
function updateCanvas ( imageSource ) {
const canvas = document . getElementById ( "meme-canvas" ) ;
const canvasWidth = 400 ;
const canvasHeight = 300 ;
const ctx = canvas . getContext ( "2d" ) ;
const img = document . getElementById ( "base-image" ) ;
clearCanvas ( canvas ) ;
if ( imageSource ) {
ctx . drawImage ( imageSource , 0 , 0 , canvasWidth , canvasHeight , 0 , 0 , canvasWidth , canvasHeight ) ;
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 ) ) ;
}