@customerjourney/cj-linkin-bio 1.5.3 → 1.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/.github/FUNDING.yml +5 -0
  2. package/README.md +6 -3
  3. package/dist/index.js +2 -3
  4. package/dist/index.min.js +2 -2
  5. package/package.json +4 -3
  6. package/src/components/LinkinBio.js +99 -97
package/.github/FUNDING.yml ADDED
@@ -0,0 +1,5 @@
1
+ # These are supported funding model platforms
2
+
3
+ github: antoniofregoso
4
+ patreon: antoniofregoso
5
+ buy_me_a_coffee: antoniofregoso
package/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  # cj-linkin-bio
2
- Link in bio component of the BuyerJourneyJS project
3
-
2
+ Link in bio component of the BuyerJourneyJS project
3
+ ## CustumerJourney.js
4
+ This library is part of the [CustumerJourney.js](https://customerjourney.ninja/) project. Vanilla JavaScript libraries optimized for creating sales funnels with hyper-personalized customer experience powered by artificial intelligence.
4
5
  ## Functions
5
6
  1. Tree links can act as links or buttons and can contain a thumbnail.
6
7
  2. Accepts bulma styles and animations from BuyerJourneyJS.
@@ -37,4 +38,6 @@ Link in bio component of the BuyerJourneyJS project
37
38
  - [Font Awesome](https://fontawesome.com/).
38
39
 
39
40
  ## License
40
- bj-linkin-bio is [GPL-3.0-or-later](./LICENSE).
41
+ bj-linkin-bio is [GPL-3.0-or-later](./LICENSE).
42
+ ## Sponsor
43
+ [Become a CustumerJourney.js Sponsor](https://customerjourney.ninja/sponsor/).
package/dist/index.js CHANGED
@@ -3543,7 +3543,6 @@
3543
3543
  return links2;
3544
3544
  }
3545
3545
  render() {
3546
- console.log("state", this.state);
3547
3546
  this.innerHTML = /* html */
3548
3547
  `
3549
3548
  <div class="columns is-centered">
@@ -3555,7 +3554,7 @@
3555
3554
  <div class="card-content p-1">
3556
3555
  <div class="media">
3557
3556
  <div class="media-content pt-3" style="min-height:44px">
3558
- <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>
3557
+ <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.title?.verified === true ? `<span class="ml-1">${this.#ok}</span>` : ``}</p>
3559
3558
  <p ${this.getClasses([], this.state.subtitle?.classList)} ${this.setAnimation(this.state.subtitle?.animation)} >${this.state.subtitle?.text[this.state.context.lang]}</p>
3560
3559
  </div>
3561
3560
  </div>
@@ -3587,7 +3586,7 @@
3587
3586
  };
3588
3587
  customElements.define("linkin-bio", LinkinBio);
3589
3588
 
3590
- // ../../../../node_modules/remarkable/dist/esm/index.browser.js
3589
+ // node_modules/remarkable/dist/esm/index.browser.js
3591
3590
  var textarea;
3592
3591
  function decodeEntity(name) {
3593
3592
  textarea = textarea || document.createElement("textarea");
package/dist/index.min.js CHANGED
@@ -887,7 +887,7 @@ svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
887
887
  </div>
888
888
  </div>
889
889
  </div>
890
- `;a+=r,typeof e.id<"u"&&this.state.buttons.push(e.id)}):console.error("No links to render"),a}render(){console.log("state",this.state),this.innerHTML=`
890
+ `;a+=r,typeof e.id<"u"&&this.state.buttons.push(e.id)}):console.error("No links to render"),a}render(){this.innerHTML=`
891
891
  <div class="columns is-centered">
892
892
  <div class="column is-5 has-text-centered px-5" >
893
893
  <figure class="image is-96x96 is-inline-block mt-6 " ${this.setAnimation(this.state.avatar?.animation)}>
@@ -897,7 +897,7 @@ svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
897
897
  <div class="card-content p-1">
898
898
  <div class="media">
899
899
  <div class="media-content pt-3" style="min-height:44px">
900
- <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===!0?`${this.#a}`:""}</p>
900
+ <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.title?.verified===!0?`<span class="ml-1">${this.#a}</span>`:""}</p>
901
901
  <p ${this.getClasses([],this.state.subtitle?.classList)} ${this.setAnimation(this.state.subtitle?.animation)} >${this.state.subtitle?.text[this.state.context.lang]}</p>
902
902
  </div>
903
903
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@customerjourney/cj-linkin-bio",
3
- "version": "1.5.3",
3
+ "version": "1.5.5",
4
4
  "description": "link in bio component of the CustomerJourneyJS project",
5
5
  "main": "dist/index.js",
6
6
  "module": "src/index.js",
@@ -22,7 +22,8 @@
22
22
  "@customerjourney/cj-core": "^1.4.0",
23
23
  "@fortawesome/fontawesome-svg-core": "^6.5.2",
24
24
  "@fortawesome/free-brands-svg-icons": "^6.5.2",
25
- "@fortawesome/free-solid-svg-icons": "^6.5.2"
25
+ "@fortawesome/free-solid-svg-icons": "^6.5.2",
26
+ "remarkable": "^2.0.1"
26
27
  },
27
28
  "bugs": {
28
29
  "url": "https://github.com/antoniofregoso/cj-linkin-bio.git/issues"
@@ -34,4 +35,4 @@
34
35
  "funnels",
35
36
  "touchpoints"
36
37
  ]
37
- }
38
+ }
package/src/components/LinkinBio.js CHANGED
@@ -1,116 +1,118 @@
1
1
  import { AppElement } from "@customerjourney/cj-core";
2
2
  import { icon } from "@fortawesome/fontawesome-svg-core";
3
- import { faEnvelope, faCircleCheck, faEllipsisVertical} from '@fortawesome/free-solid-svg-icons';
4
- import { faSquareXTwitter, faSquareFacebook, faSquareThreads, faSquareInstagram, faYoutube, faLinkedin, faVk,
5
- faDiscord, faTwitch, faTiktok, faSquareWhatsapp, faSquareGithub, faSquareGitlab} from '@fortawesome/free-brands-svg-icons';
3
+ import { faEnvelope, faCircleCheck, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
4
+ import {
5
+ faSquareXTwitter, faSquareFacebook, faSquareThreads, faSquareInstagram, faYoutube, faLinkedin, faVk,
6
+ faDiscord, faTwitch, faTiktok, faSquareWhatsapp, faSquareGithub, faSquareGitlab
7
+ } from '@fortawesome/free-brands-svg-icons';
6
8
 
7
9
  export class LinkinBio extends AppElement {
8
10
  #default = {
9
- cardsWidth:4,
10
- buttons:[]
11
+ cardsWidth: 4,
12
+ buttons: []
11
13
  };
12
14
 
13
15
  /**
14
16
  *
15
17
  * @param {Object} state - {props:{...}, context:{...}}
16
18
  */
17
- constructor(state={}){
19
+ constructor(state = {}) {
18
20
  super();
19
21
  this.eventName = "user:click-linkin-bio";
20
- this.state =this.initState(this.#default,state);
21
- this.getAttribute("id")||this.setAttribute("id",this.state.id||`component-${Math.floor(Math.random() * 100)}`);
22
+ this.state = this.initState(this.#default, state);
23
+ this.getAttribute("id") || this.setAttribute("id", this.state.id || `component-${Math.floor(Math.random() * 100)}`);
22
24
  }
23
25
 
24
- #ok = icon(faCircleCheck, {classes: ['fa-1x', 'has-text-link']}).html[0];
25
-
26
+ #ok = icon(faCircleCheck, { classes: ['fa-1x', 'has-text-link'] }).html[0];
27
+
26
28
  handleEvent(event) {
27
- if(this.state?.eventName!=undefined){
28
- this.eventName = this.state.eventName
29
- }
30
- if (event.type === "click") {
31
- if (event.target.tagName==='path'||event.target.tagName==='svg'||event.target.tagName==='P'&&event.target.classList.contains( 'option' )){
32
- const bjClick = new CustomEvent(this.eventName,{
33
- detail:{link:event.target.closest('p').dataset.share, type:'share', source:event.target.closest('p').dataset.source},
34
- bubbles: true,
35
- composed: true
29
+ if (this.state?.eventName != undefined) {
30
+ this.eventName = this.state.eventName
31
+ }
32
+ if (event.type === "click") {
33
+ if (event.target.tagName === 'path' || event.target.tagName === 'svg' || event.target.tagName === 'P' && event.target.classList.contains('option')) {
34
+ const bjClick = new CustomEvent(this.eventName, {
35
+ detail: { link: event.target.closest('p').dataset.share, type: 'share', source: event.target.closest('p').dataset.source },
36
+ bubbles: true,
37
+ composed: true
36
38
  });
37
39
  this.dispatchEvent(bjClick);
38
- }else if (event.target.tagName==='IMG'||event.target.tagName==='P'&&event.target.classList.contains( 'action' )){
39
- const bjClick = new CustomEvent(this.eventName,{
40
- detail:{source:event.target.closest('BUTTON').dataset.source, type:'action'},
41
- bubbles: true,
42
- composed: true
40
+ } else if (event.target.tagName === 'IMG' || event.target.tagName === 'P' && event.target.classList.contains('action')) {
41
+ const bjClick = new CustomEvent(this.eventName, {
42
+ detail: { source: event.target.closest('BUTTON').dataset.source, type: 'action' },
43
+ bubbles: true,
44
+ composed: true
43
45
  });
44
46
  this.dispatchEvent(bjClick);
45
- }else if(event.target.classList.contains( 'lang' )){
46
- const bjClick = new CustomEvent(this.eventName,{
47
- detail:{source:event.target.id.slice(4), type:'lang'},
47
+ } else if (event.target.classList.contains('lang')) {
48
+ const bjClick = new CustomEvent(this.eventName, {
49
+ detail: { source: event.target.id.slice(4), type: 'lang' },
48
50
  bubbles: true,
49
51
  composed: true
50
- });
51
- this.dispatchEvent(bjClick);
52
+ });
53
+ this.dispatchEvent(bjClick);
52
54
  }
53
55
  }
54
56
  }
55
57
 
56
- addEvents(){
58
+ addEvents() {
57
59
  let buttons = this.querySelectorAll("button");
58
- if (buttons.length>0){
59
- buttons.forEach((item)=>{
60
- item.addEventListener("click",this)
61
- });
60
+ if (buttons.length > 0) {
61
+ buttons.forEach((item) => {
62
+ item.addEventListener("click", this)
63
+ });
62
64
  };
63
- let actions = this.querySelectorAll(".option");
64
- if (actions.length>0){
65
- actions.forEach((item)=>{
66
- item.addEventListener("click",this)
67
- });
65
+ let actions = this.querySelectorAll(".option");
66
+ if (actions.length > 0) {
67
+ actions.forEach((item) => {
68
+ item.addEventListener("click", this)
69
+ });
68
70
  };
69
- if (this.state.i18n?.lang!=undefined){
70
- Object.entries(this.state.i18n.lang).forEach(([key, value])=>{
71
- this.querySelector(`#btn-${key}`).addEventListener("click",this)
72
- });
71
+ if (this.state.i18n?.lang != undefined) {
72
+ Object.entries(this.state.i18n.lang).forEach(([key, value]) => {
73
+ this.querySelector(`#btn-${key}`).addEventListener("click", this)
74
+ });
73
75
  }
74
- }
75
-
76
- #getSocialBar(){
77
- let iconClasses = {classes: ['fa-2x', this.state.socialBar?.iconsColor!=undefined?this.state.socialBar.iconsColor:'has-text-white']};
76
+ }
77
+
78
+ #getSocialBar() {
79
+ let iconClasses = { classes: ['fa-2x', this.state.socialBar?.iconsColor != undefined ? this.state.socialBar.iconsColor : 'has-text-white'] };
78
80
  let icons = ''
79
- if(this.state.socialBar?.networks.length>0){
80
- this.state.socialBar?.networks.forEach(el=>{
81
- if (el.includes('x.com')){
81
+ if (this.state.socialBar?.networks.length > 0) {
82
+ this.state.socialBar?.networks.forEach(el => {
83
+ if (el.includes('x.com')) {
82
84
  icons += `<a class="p-1" href="${el}">${icon(faSquareXTwitter, iconClasses).html[0]}</a>`
83
- }else if (el.includes('threads')){
85
+ } else if (el.includes('threads')) {
84
86
  icons += `<a class="p-1" href="${el}">${icon(faSquareThreads, iconClasses).html[0]}</a>`
85
- }else if (el.includes('instagram')){
87
+ } else if (el.includes('instagram')) {
86
88
  icons += `<a class="p-1" href="${el}">${icon(faSquareInstagram, iconClasses).html[0]}</a>`
87
- }else if (el.includes('facebook')){
89
+ } else if (el.includes('facebook')) {
88
90
  icons += `<a class="p-1" href="${el}">${icon(faSquareFacebook, iconClasses).html[0]}</a>`
89
- }else if (el.includes('youtube')){
91
+ } else if (el.includes('youtube')) {
90
92
  icons += `<a class="p-1" href="${el}">${icon(faYoutube, iconClasses).html[0]}</a>`
91
- }else if (el.includes('linkedin')){
93
+ } else if (el.includes('linkedin')) {
92
94
  icons += `<a class="p-1" href="${el}">${icon(faLinkedin, iconClasses).html[0]}</a>`
93
- }else if (el.includes('vk')){
95
+ } else if (el.includes('vk')) {
94
96
  icons += `<a class="p-1" href="${el}">${icon(faVk, iconClasses).html[0]}</a>`
95
- }else if (el.includes('discord')){
97
+ } else if (el.includes('discord')) {
96
98
  icons += `<a class="p-1" href="${el}">${icon(faDiscord, iconClasses).html[0]}</a>`
97
- }else if (el.includes('twitch')){
99
+ } else if (el.includes('twitch')) {
98
100
  icons += `<a class="p-1" href="${el}">${icon(faTwitch, iconClasses).html[0]}</a>`
99
- }else if (el.includes('tiktok')){
101
+ } else if (el.includes('tiktok')) {
100
102
  icons += `<a class="p-1" href="${el}">${icon(faTiktok, iconClasses).html[0]}</a>`
101
- }else if (el.includes('whatsapp')){
103
+ } else if (el.includes('whatsapp')) {
102
104
  icons += `<a class="p-1" href="${el}">${icon(faSquareWhatsapp, iconClasses).html[0]}</a>`
103
- }else if (el.includes('github')){
105
+ } else if (el.includes('github')) {
104
106
  icons += `<a class="p-1" href="${el}">${icon(faSquareGithub, iconClasses).html[0]}</a>`
105
- }else if (el.includes('gitlab')){
107
+ } else if (el.includes('gitlab')) {
106
108
  icons += `<a class="p-1" href="${el}">${icon(faSquareGitlab, iconClasses).html[0]}</a>`
107
- }else if (el.includes('mailto:')){
109
+ } else if (el.includes('mailto:')) {
108
110
  icons += `<a class="p-1" href="${el}">${icon(faEnvelope, iconClasses).html[0]}</a>`
109
111
  }
110
112
  });
111
113
  }
112
-
113
- return /* html */`
114
+
115
+ return /* html */`
114
116
  <div class="card" style="box-shadow: none; background-color:transparent;">
115
117
  <div class="card-content p-1">
116
118
  <div class="media">
@@ -123,59 +125,59 @@ export class LinkinBio extends AppElement {
123
125
  `
124
126
  }
125
127
 
126
- #getLang(){
128
+ #getLang() {
127
129
  let lngButtons = ``;
128
- if(this.state.i18n?.lang!=undefined){
129
- Object.entries(this.state.i18n.lang).forEach(([key, value])=>{
130
+ if (this.state.i18n?.lang != undefined) {
131
+ Object.entries(this.state.i18n.lang).forEach(([key, value]) => {
130
132
  let focus = ['button', 'lang'];
131
- if (key === this.state.context.lang ){
132
- if (this.state.i18n?.selectedClassList!=undefined){
133
+ if (key === this.state.context.lang) {
134
+ if (this.state.i18n?.selectedClassList != undefined) {
133
135
  lngButtons += `<button id="btn-${key}" ${this.getClasses(focus, this.state.i18n?.selectedClassList)}>${value}</button>`
134
- }else {
136
+ } else {
135
137
  focus.push('is-focused')
136
138
  lngButtons += `<button id="btn-${key}" ${this.getClasses(focus, this.state.i18n?.classList)}>${value}</button>`
137
139
  }
138
140
  focus.push('is-focused')
139
- }else {
141
+ } else {
140
142
  lngButtons += `<button id="btn-${key}" ${this.getClasses(focus, this.state.i18n?.classList)}>${value}</button>`
141
143
  }
142
-
144
+
143
145
  });
144
146
  };
145
147
  return lngButtons;
146
148
  }
147
149
 
148
- #geti18n(){
149
- return /* html */`
150
+ #geti18n() {
151
+ return /* html */`
150
152
  <div class="buttons buttons are-small is-centered">
151
153
  ${this.#getLang()}
152
154
  </div>
153
155
  `
154
156
  }
155
157
 
156
- #getLinks(){
158
+ #getLinks() {
157
159
  let links = ``;
158
- if(this.state.links?.cards.length>0){
159
- this.state.links.cards.forEach(el=>{
160
+ if (this.state.links?.cards.length > 0) {
161
+ this.state.links.cards.forEach(el => {
160
162
  let link = /* html */ `
161
- <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)}>
163
+ <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)}>
162
164
  <div class="card-content p-2">
163
165
  <div class="media">
164
- ${el.imgSrc!=undefined?`
166
+ ${el.imgSrc != undefined ? `
165
167
  <figure class="media-left">
166
- ${el.href===undefined?`<button style="width:100%" data-source="${el.id}">`:`<a href="${el.href}">`}
168
+ ${el.href === undefined ? `<button style="width:100%" data-source="${el.id}">` : `<a href="${el.href}">`}
167
169
  <p class="image is-48x48 action">
168
170
  <img class="action" src="${el.imgSrc}" />
169
- </p>${el.href===undefined?`</button>`:`</a>`}
170
- `:''}
171
+ </p>${el.href === undefined ? `</button>` : `</a>`}
172
+ `: ''}
171
173
  </figure>
172
174
  <div class="media-content pt-3" style="min-height:48px">
173
- ${el.href===undefined?`<button style="width:100%" data-source="${el.id}">`:`<a href="${el.href}" style="color: inherit; text-decoration: none;">`}
175
+ ${el.href === undefined ? `<button style="width:100%" data-source="${el.id}">` : `<a href="${el.href}" style="color: inherit; text-decoration: none;">`}
174
176
  <p id="content-${el.id}" class="is-6 action">${el.text[this.state.context.lang]}</p>
175
- ${el.href===undefined?`</button>`:`</a>`}
177
+ ${el.href === undefined ? `</button>` : `</a>`}
176
178
  </div>
177
179
  <figure class="media-right pt-1">
178
- <p class="icon is-48x48 pt-3 option" data-source="content-${el.id}" data-share="${el.href===undefined?'/':el.href}">
180
+ <p class="icon is-48x48 pt-3 option" data-source="content-${el.id}" data-share="${el.href === undefined ? '/' : el.href}">
179
181
  ${icon(faEllipsisVertical).html[0]}
180
182
  </p>
181
183
  </figure>
@@ -184,18 +186,18 @@ export class LinkinBio extends AppElement {
184
186
  </div>
185
187
  `
186
188
  links += link;
187
- if (typeof el.id != 'undefined'){
189
+ if (typeof el.id != 'undefined') {
188
190
  this.state.buttons.push(el.id)
189
191
  }
190
192
  })
191
193
 
192
- }else{
194
+ } else {
193
195
  console.error('No links to render');
194
196
  }
195
197
  return links;
196
198
  }
197
199
 
198
- render(){
200
+ render() {
199
201
  this.innerHTML = /* html */`
200
202
  <div class="columns is-centered">
201
203
  <div class="column is-5 has-text-centered px-5" >
@@ -206,25 +208,25 @@ export class LinkinBio extends AppElement {
206
208
  <div class="card-content p-1">
207
209
  <div class="media">
208
210
  <div class="media-content pt-3" style="min-height:44px">
209
- <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>
211
+ <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.title?.verified === true ? `<span class="ml-1">${this.#ok}</span>` : ``}</p>
210
212
  <p ${this.getClasses([], this.state.subtitle?.classList)} ${this.setAnimation(this.state.subtitle?.animation)} >${this.state.subtitle?.text[this.state.context.lang]}</p>
211
213
  </div>
212
214
  </div>
213
215
  </div>
214
216
  </div>
215
- ${this.state.i18n?.up===true?this.#geti18n():``}
216
- ${this.state.socialBar?.up===true?this.#getSocialBar():``}
217
+ ${this.state.i18n?.up === true ? this.#geti18n() : ``}
218
+ ${this.state.socialBar?.up === true ? this.#getSocialBar() : ``}
217
219
  ${this.#getLinks()}
218
- ${this.state.socialBar?.up!=true?this.#getSocialBar():``}
219
- ${this.state.i18n?.up!=true?this.#geti18n():``}
220
- ${this.state.footer?.src===undefined?``:`
220
+ ${this.state.socialBar?.up != true ? this.#getSocialBar() : ``}
221
+ ${this.state.i18n?.up != true ? this.#geti18n() : ``}
222
+ ${this.state.footer?.src === undefined ? `` : `
221
223
  <div class="card mt-1" style="box-shadow: none; background-color:transparent;">
222
224
  <div class="card-content">
223
225
  <div class="media">
224
226
  <div class="media-content has-text-centered " >
225
227
  <figure class="image is-inline-block" style="width:100px">
226
228
  <span ${this.getClasses([], this.state.footer?.message?.classList)}>${this.state.footer?.message?.text[this.state.context.lang]}</span>
227
- ${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>`}
229
+ ${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>`}
228
230
  </figure>
229
231
  </div>
230
232
  </div>
@@ -233,7 +235,7 @@ export class LinkinBio extends AppElement {
233
235
  </div>
234
236
  </div>
235
237
  `;
236
- this.addEvents();
238
+ this.addEvents();
237
239
  }
238
240
  }
239
241