Skip to content

Commit ebdb8e3

Browse files
author
Cathy Siller
committed
refactor(src-javascript): refactor js to $
1 parent 9ce67fd commit ebdb8e3

26 files changed

+181
-207
lines changed

‎src/helix-ui/elements/HXAccordionElement.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,9 @@ export class HXAccordionElement extends HXElement {
4343
}
4444

4545
$onAttributeChange (attr, oldVal, newVal) {
46-
if (newVal !== null) {
47-
this._openPanel(Number(newVal));
48-
49-
if (newVal !== oldVal) {
46+
if (attr === 'current-panel') {
47+
if (newVal !== null) {
48+
this._openPanel(Number(newVal));
5049
this.$emit('panelchange');
5150
}
5251
}

‎src/helix-ui/elements/HXAccordionPanelElement.js‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,32 +36,28 @@ export class HXAccordionPanelElement extends HXElement {
3636
return `<style>${shadowStyles}</style>${shadowMarkup}`;
3737
}
3838

39-
constructor () {
40-
super();
41-
39+
$onCreate () {
4240
this._onClick = this._onClick.bind(this);
4341
}
4442

45-
connectedCallback () {
43+
$onConnect () {
4644
this.$upgradeProperty('open');
4745
this._btnToggle.addEventListener('click', this._onClick);
4846
}
4947

50-
disconnectedCallback () {
48+
$onDisconnect () {
5149
this._btnToggle.removeEventListener('click', this._onClick);
5250
}
5351

54-
static get observedAttributes () {
52+
static get $observedAttributes () {
5553
return [ 'open' ];
5654
}
5755

58-
attributeChangedCallback (attr, oldVal, newVal) {
59-
let isOpen = (newVal !== null);
60-
61-
if (newVal !== oldVal) {
56+
$onAttributeChange (attr, oldVal, newVal) {
57+
if (attr === 'open') {
58+
let isOpen = (newVal !== null);
6259
this._btnToggle.setAttribute('aria-expanded', isOpen);
6360
this._elBody.setAttribute('aria-expanded', isOpen);
64-
6561
this.$emit(isOpen ? 'open' : 'close');
6662
}
6763
}

‎src/helix-ui/elements/HXAlertElement.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export class HXAlertElement extends HXElement {
7070
'status',
7171
'type',
7272
];
73-
}//$observedAttributes
73+
}
7474

7575
$onAttributeChange (attr, oldVal, newVal) {
7676
let hasValue = (newVal !== null);
@@ -91,7 +91,7 @@ export class HXAlertElement extends HXElement {
9191
}
9292
break;
9393
}
94-
}//$onAttributeChange()
94+
}
9595

9696
/**
9797
* Text for the Call To Action button.

‎src/helix-ui/elements/HXBusyElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export class HXBusyElement extends HXElement {
1616
return '';
1717
}
1818

19-
connectedCallback () {
19+
$onConnect () {
2020
this.$upgradeProperty('paused');
2121
this.$defaultAttribute('aria-hidden', true);
2222
}

‎src/helix-ui/elements/HXCheckboxElement.js‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27,31 +27,30 @@ export class HXCheckboxElement extends HXElement {
2727
return `<style>${shadowStyles}</style>${shadowMarkup}`;
2828
}
2929

30-
static get observedAttributes () {
31-
return [
32-
'checked',
33-
'disabled',
34-
'indeterminate',
35-
];
36-
}
37-
38-
constructor () {
39-
super();
30+
$onCreate () {
4031
this._onChange = this._onChange.bind(this);
4132
}
4233

43-
connectedCallback () {
34+
$onConnect () {
4435
this.$upgradeProperty('checked');
4536
this.$upgradeProperty('disabled');
4637
this.$upgradeProperty('indeterminate');
4738
this._input.addEventListener('change', this._onChange);
4839
}
4940

50-
disconnectedCallback () {
41+
$onDisconnect () {
5142
this._input.removeEventListener('change', this._onChange);
5243
}
5344

54-
attributeChangedCallback (attr, oldVal, newVal) {
45+
static get $observedAttributes () {
46+
return [
47+
'checked',
48+
'disabled',
49+
'indeterminate',
50+
];
51+
}
52+
53+
$onAttributeChange (attr, oldVal, newVal) {
5554
const hasValue = (newVal !== null);
5655
switch (attr) {
5756
case 'indeterminate':
@@ -66,7 +65,7 @@ export class HXCheckboxElement extends HXElement {
6665
this._input.disabled = hasValue;
6766
break;
6867
}
69-
}//attributeChangedCallback()
68+
}
7069

7170
/**
7271
* @default false

‎src/helix-ui/elements/HXDisclosureElement.js‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,12 @@ export class HXDisclosureElement extends HXElement {
1313
return 'hx-disclosure';
1414
}
1515

16-
static get observedAttributes () {
17-
return super.observedAttributes.concat([ 'aria-expanded' ]);
18-
}
19-
20-
constructor () {
21-
super();
16+
$onCreate () {
2217
this._onTargetOpen = this._onTargetOpen.bind(this);
2318
this._onTargetClose = this._onTargetClose.bind(this);
2419
}
2520

26-
connectedCallback () {
27-
super.connectedCallback();
28-
21+
$onConnect () {
2922
this.$upgradeProperty('expanded');
3023
this.setAttribute('role', 'button');
3124
if (!this.hasAttribute('tabindex') && !this.disabled) {
@@ -45,7 +38,7 @@ export class HXDisclosureElement extends HXElement {
4538
this.addEventListener('keyup', this._keyUp);
4639
}
4740

48-
disconnectedCallback () {
41+
$onDisconnect () {
4942
this.removeEventListener('click', this._toggle);
5043
this.removeEventListener('keydown', this.$preventScroll);
5144
this.removeEventListener('keyup', this._keyUp);
@@ -56,18 +49,18 @@ export class HXDisclosureElement extends HXElement {
5649
}
5750
}
5851

59-
attributeChangedCallback (attr, oldVal, newVal) {
60-
super.attributeChangedCallback(attr, oldVal, newVal);
52+
static get $observedAttributes () {
53+
return [ 'aria-expanded' ];
54+
}
6155

62-
switch (attr) {
63-
case 'aria-expanded':
64-
if (this.target) {
65-
let setTo = (newVal === 'true');
66-
if (this.target.open !== setTo) {
67-
this.target.open = setTo;
68-
}
56+
$onAttributeChange (attr, oldVal, newVal) {
57+
if (attr === 'aria-expanded') {
58+
if (this.target) {
59+
let setTo = (newVal === 'true');
60+
if (this.target.open !== setTo) {
61+
this.target.open = setTo;
6962
}
70-
break;
63+
}
7164
}
7265
}
7366

‎src/helix-ui/elements/HXElement.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export class HXElement extends HTMLElement {
139139
*
140140
* @default ['disabled']
141141
* @ignore
142-
* @see HXElement.$observedAttributess
142+
* @see HXElement.$observedAttributes
143143
* @type {Array<String>}
144144
*/
145145
static get observedAttributes () {

‎src/helix-ui/elements/HXFileIconElement.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ export class HXFileIconElement extends HXElement {
2323

2424
static get $observedAttributes () {
2525
return [ 'type' ];
26-
}//$observedAttributes
27-
26+
}
27+
2828
$onAttributeChange (attr, oldVal, newVal) {
2929
if (attr === 'type') {
3030
this._elIcon.type = newVal;
3131
}
32-
}//$onAttributeChange
32+
}
3333

3434
// GETTERS
3535
get type () {

‎src/helix-ui/elements/HXIconElement.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,26 @@ export class HXIconElement extends HXElement {
1616
return Icons;
1717
}
1818

19-
static get observedAttributes () {
20-
return [ 'type' ];
21-
}
22-
23-
constructor (type) {
24-
super();
25-
19+
$onCreate (type) {
2620
if (type) {
2721
this.type = type;
2822
}
2923
}
3024

31-
connectedCallback () {
25+
$onConnect () {
3226
this.$upgradeProperty('type');
3327
this.$defaultAttribute('aria-hidden', true);
3428
this._render();
3529
}
3630

37-
attributeChangedCallback () {
38-
this._render();
31+
static get $observedAttributes () {
32+
return [ 'type' ];
33+
}
34+
35+
$onAttributeChange (attr) {
36+
if (attr === 'type') {
37+
this._render();
38+
}
3939
}
4040

4141
get type () {

‎src/helix-ui/elements/HXMenuElement.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,11 @@ export class HXMenuElement extends HXElement {
3131
return 'hx-menu';
3232
}
3333

34-
static get observedAttributes () {
35-
return [ 'open' ];
36-
}
37-
38-
constructor () {
39-
super();
34+
$onCreate () {
4035
this._onDocumentClick = this._onDocumentClick.bind(this);
4136
}
4237

43-
connectedCallback () {
38+
$onConnect () {
4439
this.$upgradeProperty('open');
4540
this.$upgradeProperty('position');
4641
this.$upgradeProperty('relativeTo');
@@ -50,15 +45,18 @@ export class HXMenuElement extends HXElement {
5045
document.addEventListener('click', this._onDocumentClick);
5146
}
5247

53-
disconnectedCallback () {
48+
$onDisconnect () {
5449
document.removeEventListener('click', this._onDocumentClick);
5550
}
5651

57-
attributeChangedCallback (attr, oldVal, newVal) {
58-
let isOpen = (newVal !== null);
59-
this.setAttribute('aria-expanded', isOpen);
52+
static get $observedAttributes () {
53+
return [ 'open' ];
54+
}
6055

61-
if (newVal !== oldVal) {
56+
$onAttributeChange (attr, oldVal, newVal) {
57+
if (attr === 'open') {
58+
let isOpen = (newVal !== null);
59+
this.setAttribute('aria-expanded', isOpen);
6260
this.$emit(isOpen ? 'open' : 'close');
6361
}
6462
}

0 commit comments

Comments
 (0)