juxscript 1.1.17 → 1.1.19

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/lib/components/hero.d.ts +2 -2
  2. package/lib/components/hero.d.ts.map +1 -1
  3. package/lib/components/hero.js +65 -17
  4. package/lib/components/hero.ts +67 -13
  5. package/package.json +1 -1
package/lib/components/hero.d.ts CHANGED
@@ -36,8 +36,8 @@ export declare class Hero extends BaseComponent<HeroState> {
36
36
  protected getTriggerEvents(): readonly string[];
37
37
  protected getCallbackEvents(): readonly string[];
38
38
  /**
39
- * Called automatically when state changes.
40
- * Extends BaseComponent's update() to handle Hero-specific properties.
39
+ * Called automatically by BaseComponent when state changes.
40
+ * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
41
41
  */
42
42
  update(prop: string, value: any): void;
43
43
  title(value: string): this;
package/lib/components/hero.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAkDtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAatF,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAsEhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
1
+ {"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoBjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAoGtC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKxB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAatF,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKvC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS9B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAsEhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
package/lib/components/hero.js CHANGED
@@ -27,37 +27,85 @@ export class Hero extends BaseComponent {
27
27
  getCallbackEvents() {
28
28
  return CALLBACK_EVENTS;
29
29
  }
30
+ /* ═════════════════════════════════════════════════════════════════
31
+ * REACTIVE DOM UPDATES
32
+ * ═════════════════════════════════════════════════════════════════ */
30
33
  /**
31
- * Called automatically when state changes.
32
- * Extends BaseComponent's update() to handle Hero-specific properties.
34
+ * Called automatically by BaseComponent when state changes.
35
+ * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
33
36
  */
34
37
  update(prop, value) {
35
- // First, call parent to handle base properties (visible, class, style, etc.)
36
- super.update(prop, value);
37
- // Then handle Hero-specific properties
38
+ super.update(prop, value); // Handle base properties
38
39
  const hero = document.getElementById(this._id);
39
40
  if (!hero)
40
41
  return;
42
+ const contentContainer = hero.querySelector('.jux-hero-content');
43
+ if (!contentContainer)
44
+ return;
41
45
  switch (prop) {
42
46
  case 'title':
43
- const titleEl = document.getElementById(`${this._id}-title`);
44
- if (titleEl)
45
- titleEl.textContent = value;
47
+ let titleEl = document.getElementById(`${this._id}-title`);
48
+ if (!titleEl) {
49
+ // ✅ Create title element if it doesn't exist
50
+ titleEl = document.createElement('h1');
51
+ titleEl.className = 'jux-hero-title';
52
+ titleEl.id = `${this._id}-title`;
53
+ contentContainer.insertBefore(titleEl, contentContainer.firstChild);
54
+ }
55
+ titleEl.textContent = value;
46
56
  break;
47
57
  case 'subtitle':
48
- const subtitleEl = document.getElementById(`${this._id}-subtitle`);
49
- if (subtitleEl)
50
- subtitleEl.textContent = value;
58
+ let subtitleEl = document.getElementById(`${this._id}-subtitle`);
59
+ if (!subtitleEl) {
60
+ // ✅ Create subtitle element if it doesn't exist
61
+ subtitleEl = document.createElement('p');
62
+ subtitleEl.className = 'jux-hero-subtitle';
63
+ subtitleEl.id = `${this._id}-subtitle`;
64
+ // Insert after title if exists, otherwise at start
65
+ const titleEl = document.getElementById(`${this._id}-title`);
66
+ if (titleEl) {
67
+ titleEl.after(subtitleEl);
68
+ }
69
+ else {
70
+ contentContainer.insertBefore(subtitleEl, contentContainer.firstChild);
71
+ }
72
+ }
73
+ subtitleEl.textContent = value;
51
74
  break;
52
75
  case 'content':
53
- const contentEl = hero.querySelector('.jux-hero-body');
54
- if (contentEl)
55
- contentEl.innerHTML = value;
76
+ let contentEl = hero.querySelector('.jux-hero-body');
77
+ if (!contentEl) {
78
+ // ✅ Create content element if it doesn't exist
79
+ contentEl = document.createElement('div');
80
+ contentEl.className = 'jux-hero-body';
81
+ // Insert after subtitle if exists, otherwise after title, otherwise at start
82
+ const subtitleEl = document.getElementById(`${this._id}-subtitle`);
83
+ const titleEl = document.getElementById(`${this._id}-title`);
84
+ if (subtitleEl) {
85
+ subtitleEl.after(contentEl);
86
+ }
87
+ else if (titleEl) {
88
+ titleEl.after(contentEl);
89
+ }
90
+ else {
91
+ contentContainer.insertBefore(contentEl, contentContainer.firstChild);
92
+ }
93
+ }
94
+ contentEl.innerHTML = value;
56
95
  break;
57
96
  case 'cta':
58
- const ctaEl = hero.querySelector('.jux-hero-cta');
59
- if (ctaEl)
60
- ctaEl.textContent = value;
97
+ let ctaEl = hero.querySelector('.jux-hero-cta');
98
+ if (!ctaEl) {
99
+ // ✅ Create CTA element if it doesn't exist
100
+ ctaEl = document.createElement('a');
101
+ ctaEl.className = 'jux-hero-cta';
102
+ ctaEl.href = this.state.ctaLink;
103
+ ctaEl.addEventListener('click', (e) => {
104
+ this._triggerCallback('ctaClick', e);
105
+ });
106
+ contentContainer.appendChild(ctaEl);
107
+ }
108
+ ctaEl.textContent = value;
61
109
  break;
62
110
  case 'ctaLink':
63
111
  const ctaLinkEl = hero.querySelector('.jux-hero-cta');
package/lib/components/hero.ts CHANGED
@@ -59,37 +59,91 @@ export class Hero extends BaseComponent<HeroState> {
59
59
  return CALLBACK_EVENTS;
60
60
  }
61
61
 
62
+ /* ═════════════════════════════════════════════════════════════════
63
+ * REACTIVE DOM UPDATES
64
+ * ═════════════════════════════════════════════════════════════════ */
65
+
62
66
  /**
63
- * Called automatically when state changes.
64
- * Extends BaseComponent's update() to handle Hero-specific properties.
67
+ * Called automatically by BaseComponent when state changes.
68
+ * Centralizes DOM manipulation so setters don't have to drill/repeat logic.
65
69
  */
66
70
  update(prop: string, value: any): void {
67
- // First, call parent to handle base properties (visible, class, style, etc.)
68
- super.update(prop, value);
71
+ super.update(prop, value); // Handle base properties
69
72
 
70
- // Then handle Hero-specific properties
71
73
  const hero = document.getElementById(this._id);
72
74
  if (!hero) return;
73
75
 
76
+ const contentContainer = hero.querySelector('.jux-hero-content');
77
+ if (!contentContainer) return;
78
+
74
79
  switch (prop) {
75
80
  case 'title':
76
- const titleEl = document.getElementById(`${this._id}-title`);
77
- if (titleEl) titleEl.textContent = value;
81
+ let titleEl = document.getElementById(`${this._id}-title`);
82
+ if (!titleEl) {
83
+ // ✅ Create title element if it doesn't exist
84
+ titleEl = document.createElement('h1');
85
+ titleEl.className = 'jux-hero-title';
86
+ titleEl.id = `${this._id}-title`;
87
+ contentContainer.insertBefore(titleEl, contentContainer.firstChild);
88
+ }
89
+ titleEl.textContent = value;
78
90
  break;
79
91
 
80
92
  case 'subtitle':
81
- const subtitleEl = document.getElementById(`${this._id}-subtitle`);
82
- if (subtitleEl) subtitleEl.textContent = value;
93
+ let subtitleEl = document.getElementById(`${this._id}-subtitle`);
94
+ if (!subtitleEl) {
95
+ // ✅ Create subtitle element if it doesn't exist
96
+ subtitleEl = document.createElement('p');
97
+ subtitleEl.className = 'jux-hero-subtitle';
98
+ subtitleEl.id = `${this._id}-subtitle`;
99
+
100
+ // Insert after title if exists, otherwise at start
101
+ const titleEl = document.getElementById(`${this._id}-title`);
102
+ if (titleEl) {
103
+ titleEl.after(subtitleEl);
104
+ } else {
105
+ contentContainer.insertBefore(subtitleEl, contentContainer.firstChild);
106
+ }
107
+ }
108
+ subtitleEl.textContent = value;
83
109
  break;
84
110
 
85
111
  case 'content':
86
- const contentEl = hero.querySelector('.jux-hero-body');
87
- if (contentEl) contentEl.innerHTML = value;
112
+ let contentEl = hero.querySelector('.jux-hero-body');
113
+ if (!contentEl) {
114
+ // ✅ Create content element if it doesn't exist
115
+ contentEl = document.createElement('div');
116
+ contentEl.className = 'jux-hero-body';
117
+
118
+ // Insert after subtitle if exists, otherwise after title, otherwise at start
119
+ const subtitleEl = document.getElementById(`${this._id}-subtitle`);
120
+ const titleEl = document.getElementById(`${this._id}-title`);
121
+ if (subtitleEl) {
122
+ subtitleEl.after(contentEl);
123
+ } else if (titleEl) {
124
+ titleEl.after(contentEl);
125
+ } else {
126
+ contentContainer.insertBefore(contentEl, contentContainer.firstChild);
127
+ }
128
+ }
129
+ contentEl.innerHTML = value;
88
130
  break;
89
131
 
90
132
  case 'cta':
91
- const ctaEl = hero.querySelector('.jux-hero-cta') as HTMLElement;
92
- if (ctaEl) ctaEl.textContent = value;
133
+ let ctaEl = hero.querySelector('.jux-hero-cta') as HTMLAnchorElement;
134
+ if (!ctaEl) {
135
+ // ✅ Create CTA element if it doesn't exist
136
+ ctaEl = document.createElement('a');
137
+ ctaEl.className = 'jux-hero-cta';
138
+ ctaEl.href = this.state.ctaLink;
139
+
140
+ ctaEl.addEventListener('click', (e) => {
141
+ this._triggerCallback('ctaClick', e);
142
+ });
143
+
144
+ contentContainer.appendChild(ctaEl);
145
+ }
146
+ ctaEl.textContent = value;
93
147
  break;
94
148
 
95
149
  case 'ctaLink':
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.17",
3
+ "version": "1.1.19",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "index.js",