Skip to content

Commit e62d6c9

Browse files
author
Ryan A. Johnson
committed
refactor(HXTooltipElement): reorganize source code
* Refactor to use `$` API from HXElement * Reorganize methods and properties to be less cluttered * Rename methods to better describe their purpose
1 parent 6a78584 commit e62d6c9

File tree

1 file changed

+90
-70
lines changed

1 file changed

+90
-70
lines changed

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

Lines changed: 90 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ export class HXTooltipElement extends HXElement {
3939
}
4040

4141
$onCreate () {
42-
this._show = this._show.bind(this);
43-
this._hide = this._hide.bind(this);
44-
this._toggle = this._toggle.bind(this);
42+
this._onShow = this._onShow.bind(this);
43+
this._onHide = this._onHide.bind(this);
44+
this._onClick = this._onClick.bind(this);
4545
this._setPosition = this._setPosition.bind(this);
46-
this._closeOnBackgroundClick = this._closeOnBackgroundClick.bind(this);
46+
this._onDocumentClick = this._onDocumentClick.bind(this);
4747
}
4848

4949
$onConnect () {
@@ -66,7 +66,7 @@ export class HXTooltipElement extends HXElement {
6666
if (!this._target) {
6767
return;
6868
}
69-
this._destoryAllHandlers();
69+
this._destroyHandlers();
7070
}
7171

7272
static get $observedAttributes () {
@@ -81,105 +81,125 @@ export class HXTooltipElement extends HXElement {
8181
}
8282
}
8383

84-
_hide () {
85-
if (this._showTimer) {
86-
clearTimeout(this._showTimer);
84+
/**
85+
* Where to position the menu in relation to its reference element.
86+
*
87+
* @default "top"
88+
* @type {PositionString}
89+
*/
90+
get position () {
91+
return this.getAttribute('position');
92+
}
93+
set position (value) {
94+
if (value) {
95+
this.setAttribute('position', value);
96+
} else {
97+
this.removeAttribute('position');
8798
}
88-
this._hideTimer = setTimeout(() => {
89-
this.open = false;
90-
}, 1600);
9199
}
92100

93-
_show () {
94-
if (this._hideTimer) {
95-
clearTimeout(this._hideTimer);
101+
/**
102+
* Event that will trigger the appearance of the tooltip.
103+
*
104+
* @default "mouseenter"
105+
* @type {String}
106+
*/
107+
get triggerEvent () {
108+
return this.getAttribute('trigger-event');
109+
}
110+
set triggerEvent (value) {
111+
if (value) {
112+
this.setAttribute('trigger-event', value);
113+
} else {
114+
this.removeAttribute('trigger-event');
96115
}
97-
this._showTimer = setTimeout(() => {
98-
this.open = true;
99-
}, 500);
100116
}
101117

102-
_toggle () {
103-
this.open = !this.open;
118+
/**
119+
* Determines if the tooltip is revealed.
120+
*
121+
* @default false
122+
* @type {Boolean}
123+
*/
124+
get open () {
125+
return this.hasAttribute('open');
104126
}
105-
106-
_closeOnBackgroundClick (event) {
107-
if (this._isBackground(event)) {
108-
this.open = false;
127+
set open (value) {
128+
if (value) {
129+
this.setAttribute('open', '');
130+
this._setPosition();
131+
} else {
132+
this.removeAttribute('open');
133+
this.position = this.initialPosition;
109134
}
110135
}
111136

137+
/** @private */
112138
_connectHandlers () {
113139
window.addEventListener('resize', debounce(this._setPosition,100));
114140
if (this.triggerEvent === 'click') {
115-
document.addEventListener('click', this._closeOnBackgroundClick);
116-
this._target.addEventListener('click', this._toggle);
141+
document.addEventListener('click', this._onDocumentClick);
142+
this._target.addEventListener('click', this._onClick);
117143
} else {
118-
this._target.addEventListener('focus', this._show);
119-
this._target.addEventListener('blur', this._hide);
120-
this._target.addEventListener('mouseenter', this._show);
121-
this._target.addEventListener('mouseleave', this._hide);
144+
this._target.addEventListener('focus', this._onShow);
145+
this._target.addEventListener('blur', this._onHide);
146+
this._target.addEventListener('mouseenter', this._onShow);
147+
this._target.addEventListener('mouseleave', this._onHide);
122148
}
123149
}
124150

125-
_destoryAllHandlers () {
151+
/** @private */
152+
_destroyHandlers () {
126153
window.removeEventListener('resize', debounce(this._setPosition,100));
127-
document.removeEventListener('click', this._closeOnBackgroundClick);
128-
this._target.removeEventListener('focus', this._show);
129-
this._target.removeEventListener('blur', this._hide);
130-
this._target.removeEventListener('mouseenter', this._show);
131-
this._target.removeEventListener('mouseleave', this._hide);
132-
this._target.removeEventListener('click', this._toggle);
154+
document.removeEventListener('click', this._onDocumentClick);
155+
this._target.removeEventListener('focus', this._onShow);
156+
this._target.removeEventListener('blur', this._onHide);
157+
this._target.removeEventListener('mouseenter', this._onShow);
158+
this._target.removeEventListener('mouseleave', this._onHide);
159+
this._target.removeEventListener('click', this._onClick);
133160
}
134161

162+
/** @private */
135163
_setPosition () {
136-
var offset = getPositionWithArrow(this, this._target, { 'position':this.position });
164+
var offset = getPositionWithArrow(this, this._target, { 'position': this.position });
137165
this.style.top = `${offset.y}px`;
138166
this.style.left = `${offset.x}px`;
139167
this.position = offset.position;
140168
}
141169

142-
_isBackground (event) {
143-
let inComponent = this.contains(event.target);
144-
let inTarget = this._target.contains(event.target);
145-
return !inComponent && !inTarget ;
146-
}
147-
148-
set position (value) {
149-
if (value) {
150-
this.setAttribute('position', value);
151-
} else {
152-
this.removeAttribute('position');
170+
/** @private */
171+
_onHide () {
172+
if (this._showTimer) {
173+
clearTimeout(this._showTimer);
153174
}
175+
this._onHideTimer = setTimeout(() => {
176+
this.open = false;
177+
}, 1600);
154178
}
155179

156-
get position () {
157-
return this.getAttribute('position');
158-
}
159-
160-
set triggerEvent (value) {
161-
if (value) {
162-
this.setAttribute('trigger-event', value);
163-
} else {
164-
this.removeAttribute('trigger-event');
180+
/** @private */
181+
_onShow () {
182+
if (this._onHideTimer) {
183+
clearTimeout(this._onHideTimer);
165184
}
185+
this._showTimer = setTimeout(() => {
186+
this.open = true;
187+
}, 500);
166188
}
167189

168-
get triggerEvent () {
169-
return this.getAttribute('trigger-event');
190+
/** @private */
191+
_onClick () {
192+
this.open = !this.open;
170193
}
171194

172-
set open (value) {
173-
if (value) {
174-
this.setAttribute('open', '');
175-
this._setPosition();
176-
} else {
177-
this.removeAttribute('open');
178-
this.position = this.initialPosition;
179-
}
180-
}
195+
/** @private */
196+
_onDocumentClick (event) {
197+
let inComponent = this.contains(event.target);
198+
let inTarget = this._target.contains(event.target);
199+
let isBackground = !inComponent && !inTarget;
181200

182-
get open () {
183-
return this.hasAttribute('open');
201+
if (isBackground) {
202+
this.open = false;
203+
}
184204
}
185205
}

0 commit comments

Comments
 (0)