@customerjourney/cj-linkin-bio 1.5.1

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@customerjourney/cj-linkin-bio",
+  "version": "1.5.1",
+  "description": "link in bio component of the CustomerJourneyJS project",
+  "main": "dist/index.js",
+  "module": "src/index.js",
+  "scripts": {
+    "prod": "esbuild src/index.js --bundle --minify  --outfile=dist/index.min.js",
+    "build": "esbuild src/index.js --bundle  --outfile=dist/index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antoniofregoso/cj-linkin-bio.git"
+  },
+  "author": "Antonio Fregoso <antoniofregoso@protonmail.com>",
+  "license": "GPL-3.0-or-later",
+  "devDependencies": {
+    "esbuild": "^0.20.1"
+  },
+  "dependencies": {
+    "@customerjourney/bj-core": "^1.0.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2"
+  },
+  "bugs": {
+    "url": "https://github.com/antoniofregoso/cj-linkin-bio.git/issues"
+  },
+  "homepage": "https://customerjourney.ninja/documentation/linkin-bio/",
+  "keywords": [
+    "vanilla-javascripts",
+    "link in bio",
+    "funnels",
+    "touchpoints"
+  ]
+}

package/src/components/AboutMe.js

@@ -0,0 +1,68 @@
+import { AppElement } from "@customerjourney/cj-core";
+import { Remarkable } from "remarkable";
+
+
+export class AboutMe extends AppElement {
+
+    #default = {
+        context:{
+          lang:"en"
+      }
+        };
+
+
+    constructor(props={}){
+        super();
+        this.eventName = "user:click-modal-box";
+        this.state =this.initState(this.#default,props);
+        this.getAttribute("id")||this.setAttribute("id",this.state.id||`component-${Math.floor(Math.random() * 100)}`);
+        this.md = new Remarkable();
+    }
+
+    static get observedAttributes() {
+        return ["active"];
+      }
+      
+    attributeChangedCallback(name, old, now) {
+        console.log(name, old, now)
+        if (name=='active'&&now==='1'){
+            this.querySelector('.modal').classList.add('is-active')
+        }
+      }
+
+    handleEvent(event){
+        if (event.type === "click") {
+            if (event.target.ariaLabel==='close'){
+                this.querySelector(".modal").classList.remove("is-active");
+                this.removeAttribute('active');
+            }
+        }
+    }
+
+    #getContent(){
+        return /*HTML*/`
+            <div class="modal-card">
+                <header class="modal-card-head">
+                <p class="modal-card-title">${this.state.title?.text[this.state.context.lang]}</p>
+                <button class="delete" aria-label="close"></button>
+                </header>
+                <section class="modal-card-body content">
+                ${this.md.render(this.state.content?.text[this.state.context.lang])}
+                </section>
+            </div>
+        `;
+    }
+
+
+    render(){this.innerHTML =  /* html */`
+        <div class="modal">
+            <div class="modal-background"></div>
+                ${this.#getContent()}
+        </div>
+        `;
+    	this.addEvents();
+    }
+
+}
+
+customElements.define("about-me", AboutMe)

package/src/components/LinkinBio.js

@@ -0,0 +1,242 @@
+import { AppElement } from "@customerjourney/cj-core";
+import { icon } from "@fortawesome/fontawesome-svg-core";
+import { faEnvelope, faCircleCheck, faEllipsisVertical} from '@fortawesome/free-solid-svg-icons';
+import { faSquareXTwitter, faSquareFacebook, faSquareThreads, faSquareInstagram, faYoutube,  faLinkedin, faVk,
+        faDiscord, faTwitch, faTiktok, faSquareWhatsapp, faSquareGithub, faSquareGitlab} from '@fortawesome/free-brands-svg-icons';
+
+export class LinkinBio extends AppElement {
+    #default = {
+        cardsWidth:4,
+        buttons:[]
+    };
+
+    /**
+     * 
+     * @param {Object} state - {props:{...}, context:{...}}
+     */
+    constructor(state={}){
+        super();
+        this.eventName = "user:click-linkin-bio";
+        this.state =this.initState(this.#default,state);
+        this.getAttribute("id")||this.setAttribute("id",this.state.id||`component-${Math.floor(Math.random() * 100)}`);
+    }
+
+    #ok =  icon(faCircleCheck, {classes: ['fa-1x', 'has-text-link']}).html[0];
+    
+    handleEvent(event) {
+        if(this.state?.eventName!=undefined){
+            this.eventName = this.state.eventName             
+          }
+        if (event.type === "click") { 
+            if (event.target.tagName==='path'||event.target.tagName==='svg'||event.target.tagName==='P'&&event.target.classList.contains( 'option' )){
+                const bjClick = new CustomEvent(this.eventName,{
+                detail:{link:event.target.closest('p').dataset.share, type:'share', source:event.target.closest('p').dataset.source},
+                bubbles: true,
+                composed: true
+                });
+                this.dispatchEvent(bjClick);
+            }else if (event.target.tagName==='IMG'||event.target.tagName==='P'&&event.target.classList.contains( 'action' )){
+               const bjClick = new CustomEvent(this.eventName,{
+                detail:{source:event.target.closest('BUTTON').dataset.source, type:'action'},
+                bubbles: true,
+                composed: true
+                });
+                this.dispatchEvent(bjClick);
+            }else if(event.target.classList.contains( 'lang' )){
+                const bjClick = new CustomEvent(this.eventName,{
+                    detail:{source:event.target.id.slice(4), type:'lang'},
+                    bubbles: true,
+                    composed: true
+                    });
+                    this.dispatchEvent(bjClick);
+            }
+        }
+    }
+
+    addEvents(){
+        let buttons = this.querySelectorAll("button");
+        if (buttons.length>0){
+          buttons.forEach((item)=>{
+            item.addEventListener("click",this)
+          });    
+        };
+        let actions =  this.querySelectorAll(".option");
+        if (actions.length>0){
+            actions.forEach((item)=>{
+                item.addEventListener("click",this)
+              });    
+        };
+        if (this.state.i18n?.lang!=undefined){
+            Object.entries(this.state.i18n.lang).forEach(([key, value])=>{  
+                this.querySelector(`#btn-${key}`).addEventListener("click",this)
+            });            
+        }
+      }
+    
+    #getSocialBar(){
+        let iconClasses = {classes: ['fa-2x', this.state.socialBar?.iconsColor!=undefined?this.state.socialBar.iconsColor:'has-text-white']};
+        let icons = ''
+        if(this.state.socialBar?.networks.length>0){
+            this.state.socialBar?.networks.forEach(el=>{
+                if (el.includes('x.com')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faSquareXTwitter, iconClasses).html[0]}</a>`
+                }else if (el.includes('threads')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faSquareThreads, iconClasses).html[0]}</a>`
+                }else if (el.includes('instagram')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faSquareInstagram, iconClasses).html[0]}</a>`
+                }else if (el.includes('facebook')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faSquareFacebook, iconClasses).html[0]}</a>`
+                }else if (el.includes('youtube')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faYoutube, iconClasses).html[0]}</a>`
+                }else if (el.includes('linkedin')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faLinkedin, iconClasses).html[0]}</a>`
+                }else if (el.includes('vk')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faVk, iconClasses).html[0]}</a>`
+                }else if (el.includes('discord')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faDiscord, iconClasses).html[0]}</a>`
+                }else if (el.includes('twitch')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faTwitch, iconClasses).html[0]}</a>`
+                }else if (el.includes('tiktok')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faTiktok, iconClasses).html[0]}</a>`
+                }else if (el.includes('whatsapp')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faSquareWhatsapp, iconClasses).html[0]}</a>`
+                }else if (el.includes('github')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faSquareGithub, iconClasses).html[0]}</a>`
+                }else if (el.includes('gitlab')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faSquareGitlab, iconClasses).html[0]}</a>`
+                }else if (el.includes('mailto:')){
+                    icons += `<a class="p-1"  href="${el}">${icon(faEnvelope, iconClasses).html[0]}</a>`
+                }
+            });
+        }
+    
+    return  /* html */`  
+    <div class="card" style="box-shadow: none; background-color:transparent;">
+        <div class="card-content p-1">
+            <div class="media">
+                <div class="media-content pt-3" style="height:48px">
+                   ${icons}
+                </div>
+            </div>
+        </div>
+    </div>
+    `
+    }
+
+    #getLang(){
+        let lngButtons = ``;
+        if(this.state.i18n?.lang!=undefined){
+            Object.entries(this.state.i18n.lang).forEach(([key, value])=>{
+                let focus = ['button', 'lang'];
+                if (key === this.state.context.lang ){
+                    if (this.state.i18n?.selectedClassList!=undefined){
+                        lngButtons += `<button id="btn-${key}" ${this.getClasses(focus, this.state.i18n?.selectedClassList)}>${value}</button>`
+                    }else {
+                        focus.push('is-focused')
+                        lngButtons += `<button id="btn-${key}" ${this.getClasses(focus, this.state.i18n?.classList)}>${value}</button>`
+                    }
+                    focus.push('is-focused')
+                }else {
+                    lngButtons += `<button id="btn-${key}" ${this.getClasses(focus, this.state.i18n?.classList)}>${value}</button>`
+                }
+                
+            });
+        };
+        return lngButtons;
+    }
+
+    #geti18n(){
+       return /* html */`
+        <div class="buttons buttons are-small is-centered">
+            ${this.#getLang()}
+        </div>
+       `
+    }
+
+    #getLinks(){
+        let links = ``;
+        if(this.state.links?.cards.length>0){
+            this.state.links.cards.forEach(el=>{
+                let link = /* html */ `
+                    <div ${typeof el.id === 'undefined'?``:`id="${el.id}" style="cursor: pointer;" `}  ${this.getClasses(["card","mt-5"], this.state.links.classList)} ${this.setAnimation(this.state.links.animation)}>
+                        <div class="card-content p-2">
+                            <div class="media">
+                                ${el.imgSrc!=undefined?`                                     
+                                    <figure class="media-left">
+                                        ${el.href===undefined?`<button style="width:100%" data-source="${el.id}">`:`<a href="${el.href}">`}
+                                        <p class="image is-48x48 action">
+                                        <img class="action" src="${el.imgSrc}" />
+                                        </p>${el.href===undefined?`</button>`:`</a>`}
+                                    `:''}     
+                                    </figure>                           
+                                <div class="media-content pt-3" style="min-height:48px">
+                                     ${el.href===undefined?`<button style="width:100%" data-source="${el.id}">`:`<a href="${el.href}" style="color: inherit; text-decoration: none;">`}
+                                    <p id="content-${el.id}" class="is-6 action">${el.text[this.state.context.lang]}</p>
+                                    ${el.href===undefined?`</button>`:`</a>`}
+                                </div>
+                                <figure class="media-right pt-1">
+                                    <p class="icon is-48x48 pt-3 option" data-source="content-${el.id}" data-share="${el.href===undefined?'/':el.href}">
+                                    ${icon(faEllipsisVertical).html[0]}
+                                    </p>
+                                </figure>
+                            </div>
+                        </div>
+                    </div>
+                `
+                links += link;
+                if (typeof el.id != 'undefined'){
+                    this.state.buttons.push(el.id)
+                }
+            })
+
+        }else{
+            console.error('No links to render');
+        }
+        return links;
+    }
+
+    render(){
+
+        console.log('state', this.state);
+        this.innerHTML =  /* html */`
+        <div class="columns is-centered">
+            <div class="column is-5 has-text-centered px-5" >
+                <figure class="image is-96x96 is-inline-block mt-6 " ${this.setAnimation(this.state.avatar?.animation)}>
+                    <img ${this.getClasses([], this.state.avatar?.classList)} src="${this.state.avatar?.src}">
+                </figure>
+                <div class="card" style="box-shadow: none; background-color:transparent;">
+                    <div class="card-content p-1">
+                        <div class="media">
+                            <div class="media-content pt-3" style="min-height:44px">
+                                <p ${this.getClasses(["title","is-5","mb-0"], this.state.title?.classList)} ${this.setAnimation(this.state.title?.animation)}>${this.state.title?.text[this.state.context.lang]}${this.state.verified===true?`${this.#ok}`:``}</p>
+                                <p ${this.getClasses([], this.state.subtitle?.classList)} ${this.setAnimation(this.state.subtitle?.animation)} >${this.state.subtitle?.text[this.state.context.lang]}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                ${this.state.i18n?.up===true?this.#geti18n():``}
+                ${this.state.socialBar?.up===true?this.#getSocialBar():``}
+                ${this.#getLinks()}
+                ${this.state.socialBar?.up!=true?this.#getSocialBar():``}
+                ${this.state.i18n?.up!=true?this.#geti18n():``}
+                ${this.state.footer?.src===undefined?``:`
+               <div class="card mt-1" style="box-shadow: none; background-color:transparent;">
+                    <div class="card-content">
+                        <div class="media">
+                            <div class="media-content has-text-centered " >
+                                <figure class="image is-inline-block" style="width:100px">
+                                <span ${this.getClasses([], this.state.footer?.message?.classList)}>${this.state.footer?.message?.text[this.state.context.lang]}</span>
+                                ${this.state.footer?.url===undefined?``:`<a href="${this.state.footer.url}">`}<img src="${this.state.footer.src}" alt="${this.state.footer?.alt[this.state.context.lang]}">${this.state.footer?.url===undefined?``:`</a>`}
+                                </figure>
+                            </div>
+                        </div>
+                    </div>
+                </div>`}
+            </div>
+        </div>  
+        `;
+        this.addEvents();       
+    }
+}
+
+customElements.define("linkin-bio", LinkinBio)

package/src/components/ShareLink.js

@@ -0,0 +1,87 @@
+import { AppElement, slugify } from "@customerjourney/cj-core";
+import { icon } from "@fortawesome/fontawesome-svg-core";
+import { faEnvelope, faShare } from '@fortawesome/free-solid-svg-icons';
+import {faSquareXTwitter, faSquareFacebook, faSquareThreads, faLinkedin, faSquareWhatsapp, faTelegram} from '@fortawesome/free-brands-svg-icons';
+
+export class ShareLink extends AppElement {
+
+    #default = {
+        context:{
+          lang:"en"
+      },
+      share:{
+        en:"Share on",
+        es:"Compartir en",
+        fr:"Partager sur"
+      }
+        };
+
+
+    constructor(props={}){
+        super();
+        this.eventName = "user:click-modal-box";
+        this.state =this.initState(this.#default,props);
+        this.getAttribute("id")||this.setAttribute("id",this.state.id||`component-${Math.floor(Math.random() * 100)}`);
+    }
+
+    static get observedAttributes() {
+        return ["active"];
+      }
+      
+    attributeChangedCallback(name, old, now) {
+        if (name=='active'&&now==='1'){
+            this.target = this.getAttribute("target");
+            this.title = slugify(document.querySelector(`#${this.getAttribute("source")}`).textContent);
+            this.render();
+            this.querySelector('.modal').classList.add('is-active');
+        }
+      }
+
+    handleEvent(event){
+        if (event.type === "click") {
+            if (event.target.ariaLabel==='close'){
+                this.querySelector(".modal").classList.remove("is-active");
+                this.removeAttribute('active');
+            }
+        }
+
+    }
+
+    #getContent(){
+        return /*HTML*/`
+            <div class="modal-card">
+                <header class="modal-card-head">
+                <p class="modal-card-title">${this.state.title?.text[this.state.context.lang]}</p>
+                <button class="delete" aria-label="close"></button>
+                </header>
+                <section class="modal-card-body">
+                <aside class="menu">
+                 <ul  class="menu-list is-size-5">
+                    <li ><a href="https://www.linkedin.com/shareArticle?mini=true&url=${this.target}&title=${this.title}">${icon(faLinkedin).html[0]}  ${this.state.share[this.state.context.lang]} Linkedin <span class="is-pulled-right">${icon(faShare).html[0]}</span></a></li>
+                    <li><a href="https://x.com/intent/tweet?text=${this.title}&url=${this.target}">${icon(faSquareXTwitter).html[0]}  ${this.state.share[this.state.context.lang]} X <span class="is-pulled-right">${icon(faShare).html[0]}</span></a></li>
+                    <li><a href="https://www.facebook.com/sharer/sharer.php?u=${this.target}">${icon(faSquareFacebook).html[0]}  ${this.state.share[this.state.context.lang]} Facebook <span class="is-pulled-right">${icon(faShare).html[0]}</span></a></li>
+                    <li><a href="https://api.whatsapp.com/send?text=${this.title}%20${this.target}">${icon(faSquareWhatsapp).html[0]}  ${this.state.share[this.state.context.lang]} Whatsapp <span class="is-pulled-right">${icon(faShare).html[0]}</span></a></li>
+                    <li><a href="https://t.me/share/url?url=${this.target}&text=${this.title}">${icon(faTelegram).html[0]}  ${this.state.share[this.state.context.lang]} Telegram <span class="is-pulled-right">${icon(faShare).html[0]}</span></a></li>
+                    <li><a href="mailto:?subject=${this.title}&body=${this.target}">${icon(faEnvelope).html[0]}  ${this.state.share[this.state.context.lang]} eMail <span class="is-pulled-right">${icon(faShare).html[0]}</span></a></li>
+                </ul>
+                </aside>
+                </section>
+            </div>
+        `;
+    }
+
+
+    render(){
+    	this.innerHTML =  /* html */`
+        <div class="modal">
+            <div class="modal-background"></div>
+                ${this.#getContent()}
+        </div>
+        `;
+    	this.addEvents();
+
+    }
+
+}
+
+customElements.define("share-link", ShareLink)

package/src/index.js

@@ -0,0 +1,3 @@
+export * from './components/ShareLink';
+export * from './components/LinkinBio';
+export * from './components/AboutMe';