@followgate/js 0.8.1 → 0.8.2

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 (5) hide show
  1. package/dist/index.d.mts +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +41 -8
  4. package/dist/index.mjs +41 -8
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -26,6 +26,7 @@ interface FollowGateConfig {
26
26
  onComplete?: () => void;
27
27
  theme?: 'dark' | 'light';
28
28
  accentColor?: string;
29
+ allowSkip?: boolean;
29
30
  }
30
31
  /**
31
32
  * SDK Error class with helpful messages
@@ -107,6 +108,7 @@ declare class FollowGateClient {
107
108
  private renderUsernameStep;
108
109
  private handleUsernameSubmit;
109
110
  private renderFollowStep;
111
+ private handleSkipFollow;
110
112
  private handleFollowClick;
111
113
  private showFollowConfirmation;
112
114
  private handleFollowConfirm;
package/dist/index.d.ts CHANGED
@@ -26,6 +26,7 @@ interface FollowGateConfig {
26
26
  onComplete?: () => void;
27
27
  theme?: 'dark' | 'light';
28
28
  accentColor?: string;
29
+ allowSkip?: boolean;
29
30
  }
30
31
  /**
31
32
  * SDK Error class with helpful messages
@@ -107,6 +108,7 @@ declare class FollowGateClient {
107
108
  private renderUsernameStep;
108
109
  private handleUsernameSubmit;
109
110
  private renderFollowStep;
111
+ private handleSkipFollow;
110
112
  private handleFollowClick;
111
113
  private showFollowConfirmation;
112
114
  private handleFollowConfirm;
package/dist/index.js CHANGED
@@ -313,32 +313,35 @@ var MODAL_STYLES = `
313
313
  background: rgba(59, 130, 246, 0.05);
314
314
  border: 1px solid rgba(96, 165, 250, 0.5);
315
315
  border-radius: 12px;
316
- padding: 12px 16px;
316
+ padding: 10px 14px;
317
317
  margin-bottom: 8px;
318
318
  display: flex;
319
319
  align-items: center;
320
320
  justify-content: space-between;
321
- gap: 12px;
321
+ gap: 10px;
322
322
  }
323
323
 
324
324
  .fg-verify-box-left {
325
325
  display: flex;
326
326
  align-items: center;
327
327
  gap: 8px;
328
+ flex-shrink: 0;
328
329
  }
329
330
 
330
331
  .fg-verify-spinner {
331
- width: 20px;
332
- height: 20px;
332
+ width: 18px;
333
+ height: 18px;
333
334
  border: 2px solid rgba(96, 165, 250, 0.3);
334
335
  border-top-color: #60a5fa;
335
336
  border-radius: 50%;
336
337
  animation: fg-spin 1s linear infinite;
338
+ flex-shrink: 0;
337
339
  }
338
340
 
339
341
  .fg-verify-text {
340
- font-size: 14px;
342
+ font-size: 13px;
341
343
  color: #93c5fd;
344
+ white-space: nowrap;
342
345
  }
343
346
 
344
347
  .fg-verify-hint {
@@ -349,6 +352,20 @@ var MODAL_STYLES = `
349
352
  margin-top: 2px;
350
353
  }
351
354
 
355
+ .fg-skip-link {
356
+ display: block;
357
+ text-align: center;
358
+ font-size: 12px;
359
+ color: #64748b;
360
+ margin-top: 16px;
361
+ cursor: pointer;
362
+ transition: color 0.2s;
363
+ }
364
+
365
+ .fg-skip-link:hover {
366
+ color: #94a3b8;
367
+ }
368
+
352
369
  .fg-warning-box p {
353
370
  font-size: 14px;
354
371
  color: #fde68a;
@@ -652,10 +669,22 @@ var FollowGateClient = class {
652
669
  </button>
653
670
  </div>
654
671
  <p class="fg-hint">A new window will open. Return here after following.</p>
672
+ ${this.config.allowSkip ? '<span class="fg-skip-link" id="fg-skip-follow">skip this step</span>' : ""}
655
673
  `;
656
674
  document.getElementById("fg-follow-btn")?.addEventListener("click", () => {
657
675
  this.handleFollowClick();
658
676
  });
677
+ document.getElementById("fg-skip-follow")?.addEventListener("click", () => {
678
+ this.handleSkipFollow();
679
+ });
680
+ }
681
+ handleSkipFollow() {
682
+ if (!this.config?.twitter) return;
683
+ if (this.config.twitter.tweetId) {
684
+ this.renderRepostStep();
685
+ } else {
686
+ this.renderConfirmStep();
687
+ }
659
688
  }
660
689
  handleFollowClick() {
661
690
  if (!this.config?.twitter) return;
@@ -751,10 +780,14 @@ var FollowGateClient = class {
751
780
  </button>
752
781
  </div>
753
782
  <p class="fg-hint">A new window will open. Return here after reposting.</p>
783
+ ${this.config.allowSkip ? '<span class="fg-skip-link" id="fg-skip-repost">skip this step</span>' : ""}
754
784
  `;
755
785
  document.getElementById("fg-repost-btn")?.addEventListener("click", () => {
756
786
  this.handleRepostClick();
757
787
  });
788
+ document.getElementById("fg-skip-repost")?.addEventListener("click", () => {
789
+ this.renderConfirmStep();
790
+ });
758
791
  }
759
792
  handleRepostClick() {
760
793
  if (!this.config?.twitter?.tweetId) return;
@@ -832,9 +865,9 @@ var FollowGateClient = class {
832
865
  <span class="fg-verify-text">Verifying follow & repost</span>
833
866
  </div>
834
867
  ${username ? `
835
- <div class="fg-user-badge" style="margin: 0;">
836
- <div class="fg-user-badge-dot" style="background: #facc15;"></div>
837
- <span class="fg-user-badge-text">@${username}</span>
868
+ <div class="fg-user-badge" style="margin: 0; padding: 4px 10px; gap: 6px;">
869
+ <div class="fg-user-badge-dot" style="background: #facc15; width: 6px; height: 6px;"></div>
870
+ <span class="fg-user-badge-text" style="font-size: 12px;">@${username}</span>
838
871
  </div>
839
872
  ` : ""}
840
873
  </div>
package/dist/index.mjs CHANGED
@@ -287,32 +287,35 @@ var MODAL_STYLES = `
287
287
  background: rgba(59, 130, 246, 0.05);
288
288
  border: 1px solid rgba(96, 165, 250, 0.5);
289
289
  border-radius: 12px;
290
- padding: 12px 16px;
290
+ padding: 10px 14px;
291
291
  margin-bottom: 8px;
292
292
  display: flex;
293
293
  align-items: center;
294
294
  justify-content: space-between;
295
- gap: 12px;
295
+ gap: 10px;
296
296
  }
297
297
 
298
298
  .fg-verify-box-left {
299
299
  display: flex;
300
300
  align-items: center;
301
301
  gap: 8px;
302
+ flex-shrink: 0;
302
303
  }
303
304
 
304
305
  .fg-verify-spinner {
305
- width: 20px;
306
- height: 20px;
306
+ width: 18px;
307
+ height: 18px;
307
308
  border: 2px solid rgba(96, 165, 250, 0.3);
308
309
  border-top-color: #60a5fa;
309
310
  border-radius: 50%;
310
311
  animation: fg-spin 1s linear infinite;
312
+ flex-shrink: 0;
311
313
  }
312
314
 
313
315
  .fg-verify-text {
314
- font-size: 14px;
316
+ font-size: 13px;
315
317
  color: #93c5fd;
318
+ white-space: nowrap;
316
319
  }
317
320
 
318
321
  .fg-verify-hint {
@@ -323,6 +326,20 @@ var MODAL_STYLES = `
323
326
  margin-top: 2px;
324
327
  }
325
328
 
329
+ .fg-skip-link {
330
+ display: block;
331
+ text-align: center;
332
+ font-size: 12px;
333
+ color: #64748b;
334
+ margin-top: 16px;
335
+ cursor: pointer;
336
+ transition: color 0.2s;
337
+ }
338
+
339
+ .fg-skip-link:hover {
340
+ color: #94a3b8;
341
+ }
342
+
326
343
  .fg-warning-box p {
327
344
  font-size: 14px;
328
345
  color: #fde68a;
@@ -626,10 +643,22 @@ var FollowGateClient = class {
626
643
  </button>
627
644
  </div>
628
645
  <p class="fg-hint">A new window will open. Return here after following.</p>
646
+ ${this.config.allowSkip ? '<span class="fg-skip-link" id="fg-skip-follow">skip this step</span>' : ""}
629
647
  `;
630
648
  document.getElementById("fg-follow-btn")?.addEventListener("click", () => {
631
649
  this.handleFollowClick();
632
650
  });
651
+ document.getElementById("fg-skip-follow")?.addEventListener("click", () => {
652
+ this.handleSkipFollow();
653
+ });
654
+ }
655
+ handleSkipFollow() {
656
+ if (!this.config?.twitter) return;
657
+ if (this.config.twitter.tweetId) {
658
+ this.renderRepostStep();
659
+ } else {
660
+ this.renderConfirmStep();
661
+ }
633
662
  }
634
663
  handleFollowClick() {
635
664
  if (!this.config?.twitter) return;
@@ -725,10 +754,14 @@ var FollowGateClient = class {
725
754
  </button>
726
755
  </div>
727
756
  <p class="fg-hint">A new window will open. Return here after reposting.</p>
757
+ ${this.config.allowSkip ? '<span class="fg-skip-link" id="fg-skip-repost">skip this step</span>' : ""}
728
758
  `;
729
759
  document.getElementById("fg-repost-btn")?.addEventListener("click", () => {
730
760
  this.handleRepostClick();
731
761
  });
762
+ document.getElementById("fg-skip-repost")?.addEventListener("click", () => {
763
+ this.renderConfirmStep();
764
+ });
732
765
  }
733
766
  handleRepostClick() {
734
767
  if (!this.config?.twitter?.tweetId) return;
@@ -806,9 +839,9 @@ var FollowGateClient = class {
806
839
  <span class="fg-verify-text">Verifying follow & repost</span>
807
840
  </div>
808
841
  ${username ? `
809
- <div class="fg-user-badge" style="margin: 0;">
810
- <div class="fg-user-badge-dot" style="background: #facc15;"></div>
811
- <span class="fg-user-badge-text">@${username}</span>
842
+ <div class="fg-user-badge" style="margin: 0; padding: 4px 10px; gap: 6px;">
843
+ <div class="fg-user-badge-dot" style="background: #facc15; width: 6px; height: 6px;"></div>
844
+ <span class="fg-user-badge-text" style="font-size: 12px;">@${username}</span>
812
845
  </div>
813
846
  ` : ""}
814
847
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@followgate/js",
3
- "version": "0.8.1",
3
+ "version": "0.8.2",
4
4
  "description": "FollowGate SDK - Grow your audience with every download. Require social actions (follow, repost) before users can access your app.",
5
5
  "author": "FollowGate <hello@followgate.app>",
6
6
  "homepage": "https://followgate.app",