Skip to content

Commit 24abd6d

Browse files
fadi-georgefadi-george
committed
address feedback
1 parent 1977249 commit 24abd6d

File tree

8 files changed

+55
-67
lines changed

8 files changed

+55
-67
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
},
8585
{
8686
"path": "./build/releases/OneSignalSDK.page.es6.js",
87-
"limit": "49.43 kB",
87+
"limit": "49.421 kB",
8888
"gzip": true
8989
},
9090
{

‎src/page/bell/AnimatedElement.ts‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,44 +25,42 @@ export default class AnimatedElement {
2525
/**
2626
* Show element using CSS classes and wait for animations to complete
2727
*/
28-
async show(): Promise<AnimatedElement> {
28+
async show(): Promise<void> {
2929
const element = this.element;
3030
if (!element || this.shown) {
31-
return this;
31+
return;
3232
}
3333

3434
if (this.showClass) {
3535
element.classList.add(this.showClass);
3636
}
3737

3838
await this.waitForAnimations();
39-
return this;
4039
}
4140

4241
/**
4342
* Hide element using CSS classes and wait for animations to complete
4443
*/
45-
async hide(): Promise<AnimatedElement> {
44+
async hide(): Promise<void> {
4645
const element = this.element;
4746
if (!element || !this.shown) {
48-
return this;
47+
return;
4948
}
5049

5150
if (this.showClass) {
5251
element.classList.remove(this.showClass);
5352
}
5453

5554
await this.waitForAnimations();
56-
return this;
5755
}
5856

5957
/**
6058
* Activate element using CSS classes
6159
*/
62-
async activate(): Promise<AnimatedElement> {
60+
async activate(): Promise<void> {
6361
const element = this.element;
6462
if (!element || this.active) {
65-
return this;
63+
return;
6664
}
6765

6866
if (this.inactiveClass) {
@@ -73,16 +71,15 @@ export default class AnimatedElement {
7371
}
7472

7573
await this.waitForAnimations();
76-
return this;
7774
}
7875

7976
/**
8077
* Inactivate element using CSS classes
8178
*/
82-
async inactivate(): Promise<AnimatedElement> {
79+
async inactivate(): Promise<void> {
8380
const element = this.element;
8481
if (!element || !this.active) {
85-
return this;
82+
return;
8683
}
8784

8885
if (this.activeClass) {
@@ -93,7 +90,6 @@ export default class AnimatedElement {
9390
}
9491

9592
await this.waitForAnimations();
96-
return this;
9793
}
9894

9995
/**

‎src/page/bell/Badge.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default class Badge extends AnimatedElement {
2525
this._updateCount(-1);
2626
}
2727

28-
show(): Promise<AnimatedElement> {
28+
show(): Promise<void> {
2929
const promise = super.show();
3030
OneSignal._notifyButton?.setCustomColorsIfSpecified();
3131
return promise;

‎src/page/bell/Bell.ts‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,20 @@ import Message from './Message';
2828
import {
2929
BellEvent,
3030
BellState,
31-
type BellStateType,
31+
type BellStateValue,
3232
MESSAGE_TIMEOUT,
33-
MesageType,
33+
MessageType,
3434
} from './constants';
3535

3636
const logoSvg = `<svg class="onesignal-bell-svg" xmlns="http://www.w3.org/2000/svg" width="99.7" height="99.7" viewBox="0 0 99.7 99.7"><circle class="background" cx="49.9" cy="49.9" r="49.9"/><path class="foreground" d="M50.1 66.2H27.7s-2-.2-2-2.1c0-1.9 1.7-2 1.7-2s6.7-3.2 6.7-5.5S33 52.7 33 43.3s6-16.6 13.2-16.6c0 0 1-2.4 3.9-2.4 2.8 0 3.8 2.4 3.8 2.4 7.2 0 13.2 7.2 13.2 16.6s-1 11-1 13.3c0 2.3 6.7 5.5 6.7 5.5s1.7.1 1.7 2c0 1.8-2.1 2.1-2.1 2.1H50.1zm-7.2 2.3h14.5s-1 6.3-7.2 6.3-7.3-6.3-7.3-6.3z"/><ellipse class="stroke" cx="49.9" cy="49.9" rx="37.4" ry="36.9"/></svg>`;
3737

38-
type BellState = 'uninitialized' | 'subscribed' | 'unsubscribed' | 'blocked';
39-
4038
const DEFAULT_SIZE: BellSize = 'medium';
4139
const DEFAULT_POSITION: BellPosition = 'bottom-right';
4240
const DEFAULT_THEME = 'default';
4341

4442
export default class Bell {
4543
public options: AppUserConfigNotifyButton;
46-
public state: BellStateType = BellState._Uninitialized;
44+
public state: BellStateValue = BellState._Uninitialized;
4745
public _ignoreSubscriptionState = false;
4846
public hovering = false;
4947
public initialized = false;
@@ -190,7 +188,7 @@ export default class Bell {
190188
})
191189
.then(() => {
192190
return this.message.display(
193-
MesageType._Message,
191+
MessageType._Message,
194192
this.options.text['message.action.resubscribed'],
195193
MESSAGE_TIMEOUT,
196194
);
@@ -226,7 +224,7 @@ export default class Bell {
226224
})
227225
.then(() => {
228226
return this.message.display(
229-
MesageType._Message,
227+
MessageType._Message,
230228
this.options.text['message.action.unsubscribed'],
231229
MESSAGE_TIMEOUT,
232230
);
@@ -248,7 +246,7 @@ export default class Bell {
248246

249247
// If the message is a message and not a tip, don't show it (only show tips)
250248
// Messages will go away on their own
251-
if (this.message.contentType === MesageType._Message) {
249+
if (this.message.contentType === MessageType._Message) {
252250
this.hovering = false;
253251
return;
254252
}
@@ -258,14 +256,14 @@ export default class Bell {
258256
if (this.message.queued.length > 0) {
259257
return this.message.dequeue().then((msg: any) => {
260258
this.message.content = msg;
261-
this.message.contentType = MesageType._Queued;
259+
this.message.contentType = MessageType._Queued;
262260
resolve();
263261
});
264262
} else {
265263
this.message.content = decodeHtmlEntities(
266264
this.message.getTipForState(),
267265
);
268-
this.message.contentType = MesageType._Tip;
266+
this.message.contentType = MessageType._Tip;
269267
resolve();
270268
}
271269
})
@@ -282,7 +280,7 @@ export default class Bell {
282280

283281
OneSignal._emitter.on(BellEvent._Hovered, () => {
284282
// If a message is displayed (and not a tip), don't control it. Visitors have no control over messages
285-
if (this.message.contentType === MesageType._Message) {
283+
if (this.message.contentType === MessageType._Message) {
286284
return;
287285
}
288286

@@ -334,7 +332,7 @@ export default class Bell {
334332

335333
const permission =
336334
await OneSignal._context._permissionManager.getPermissionStatus();
337-
let bellState: BellStateType;
335+
let bellState: BellStateValue;
338336
if (isSubscribed.current.optedIn) {
339337
bellState = BellState._Subscribed;
340338
} else if (permission === 'denied') {
@@ -353,7 +351,10 @@ export default class Bell {
353351
}
354352
if (state.to === BellState._Subscribed) {
355353
this.launcher.inactivate();
356-
} else if (state.to === BellState._Unsubscribed || BellState._Blocked) {
354+
} else if (
355+
state.to === BellState._Unsubscribed ||
356+
state.to === BellState._Blocked
357+
) {
357358
this.launcher.activate();
358359
}
359360
});
@@ -579,27 +580,24 @@ export default class Bell {
579580
dialogElement?.querySelector<HTMLButtonElement>('button.action');
580581
const buttonElement = this.button.element;
581582
const pulseRing = buttonElement?.querySelector<HTMLElement>('.pulse-ring');
582-
const graphic = this.graphic;
583583

584584
// Reset added styles first
585-
if (graphic) {
586-
const background = graphic.querySelector<HTMLElement>('.background');
587-
if (background) {
588-
background.style.cssText = '';
589-
}
590-
const foregroundElements =
591-
graphic.querySelectorAll<HTMLElement>('.foreground');
592-
for (let i = 0; i < foregroundElements.length; i++) {
593-
const element = foregroundElements[i];
594-
if (element) {
595-
element.style.cssText = '';
596-
}
597-
}
598-
const stroke = graphic.querySelector<HTMLElement>('.stroke');
599-
if (stroke) {
600-
stroke.style.cssText = '';
585+
const background = this.graphic?.querySelector<HTMLElement>('.background');
586+
if (background) {
587+
background.style.cssText = '';
588+
}
589+
const foregroundElements =
590+
this.graphic?.querySelectorAll<HTMLElement>('.foreground') ?? [];
591+
for (let i = 0; i < foregroundElements.length; i++) {
592+
const element = foregroundElements[i];
593+
if (element) {
594+
element.style.cssText = '';
601595
}
602596
}
597+
const stroke = this.graphic?.querySelector<HTMLElement>('.stroke');
598+
if (stroke) {
599+
stroke.style.cssText = '';
600+
}
603601

604602
const badgeElement = this.badge.element;
605603
if (badgeElement) {
@@ -617,21 +615,22 @@ export default class Bell {
617615
if (this.options.colors) {
618616
const colors = this.options.colors;
619617
if (colors['circle.background']) {
620-
const background = graphic?.querySelector<HTMLElement>('.background');
618+
const background =
619+
this.graphic?.querySelector<HTMLElement>('.background');
621620
if (background) {
622621
background.style.cssText += `fill: ${colors['circle.background']}`;
623622
}
624623
}
625624
if (colors['circle.foreground']) {
626625
const foregroundElements =
627-
graphic?.querySelectorAll<HTMLElement>('.foreground') ?? [];
626+
this.graphic?.querySelectorAll<HTMLElement>('.foreground') ?? [];
628627
for (let i = 0; i < foregroundElements.length; i++) {
629628
const element = foregroundElements[i];
630629
if (element) {
631630
element.style.cssText += `fill: ${colors['circle.foreground']}`;
632631
}
633632
}
634-
const stroke = graphic?.querySelector<HTMLElement>('.stroke');
633+
const stroke = this.graphic?.querySelector<HTMLElement>('.stroke');
635634
if (stroke) {
636635
stroke.style.cssText += `stroke: ${colors['circle.foreground']}`;
637636
}
@@ -718,7 +717,7 @@ export default class Bell {
718717
* Updates the current state to the specified new state.
719718
* @param newState One of ['subscribed', 'unsubscribed'].
720719
*/
721-
setState(newState: BellStateType, silent = false) {
720+
setState(newState: BellStateValue, silent = false) {
722721
const lastState = this.state;
723722
this.state = newState;
724723
if (lastState !== newState && !silent) {

‎src/page/bell/Button.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import LimitStore from 'src/shared/services/LimitStore';
44
import OneSignalEvent from 'src/shared/services/OneSignalEvent';
55
import AnimatedElement from './AnimatedElement';
66
import type Bell from './Bell';
7-
import { BellEvent, MESSAGE_TIMEOUT, MesageType } from './constants';
7+
import { BellEvent, MESSAGE_TIMEOUT, MessageType } from './constants';
88

99
export default class Button extends AnimatedElement {
1010
public _isHandlingClick: boolean = false;
@@ -101,7 +101,7 @@ export default class Button extends AnimatedElement {
101101
try {
102102
if (
103103
this.bell.message.shown &&
104-
this.bell.message.contentType == MesageType._Message
104+
this.bell.message.contentType == MessageType._Message
105105
) {
106106
// A message is being shown, it'll disappear soon
107107
return;
@@ -115,7 +115,7 @@ export default class Button extends AnimatedElement {
115115
OneSignal._emitter.once(OneSignal.EVENTS.SUBSCRIPTION_CHANGED, () => {
116116
this.bell.message
117117
.display(
118-
MesageType._Message,
118+
MessageType._Message,
119119
this.bell.options.text['message.action.subscribed'],
120120
MESSAGE_TIMEOUT,
121121
)

‎src/page/bell/Launcher.ts‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default class Launcher extends AnimatedElement {
3838
(size === 'large' &&
3939
hasCssClass(this.element, 'onesignal-bell-launcher-lg'))
4040
) {
41-
return Promise.resolve(this);
41+
return;
4242
}
4343
removeCssClass(this.element, 'onesignal-bell-launcher-sm');
4444
removeCssClass(this.element, 'onesignal-bell-launcher-md');
@@ -53,7 +53,7 @@ export default class Launcher extends AnimatedElement {
5353
throw new Error('Invalid OneSignal bell size ' + size);
5454
}
5555
if (!this.shown) {
56-
return this;
56+
return;
5757
} else {
5858
await this.waitForAnimations();
5959
}
@@ -64,15 +64,13 @@ export default class Launcher extends AnimatedElement {
6464
this.wasInactive = true;
6565
await this.activate();
6666
}
67-
return this;
6867
}
6968

7069
async inactivateIfWasInactive() {
7170
if (this.wasInactive) {
7271
this.wasInactive = false;
7372
await this.inactivate();
7473
}
75-
return this;
7674
}
7775

7876
clearIfWasInactive() {
@@ -81,21 +79,16 @@ export default class Launcher extends AnimatedElement {
8179

8280
async inactivate() {
8381
await this.bell.message.hide();
84-
if (this.bell.badge.content.length > 0) {
85-
await this.bell.badge.hide();
86-
await Promise.all([super.inactivate(), this.resize('small')]);
87-
return this.bell.badge.show();
88-
} else {
89-
await Promise.all([super.inactivate(), this.resize('small')]);
90-
return this;
91-
}
82+
const hasContent = this.bell.badge.content.length > 0;
83+
if (hasContent) await this.bell.badge.hide();
84+
await Promise.all([super.inactivate(), this.resize('small')]);
85+
if (hasContent) await this.bell.badge.show();
9286
}
9387

9488
async activate() {
9589
if (this.bell.badge.content.length > 0) {
9690
await this.bell.badge.hide();
9791
}
9892
await Promise.all([super.activate(), this.resize(this.bell.options.size!)]);
99-
return this;
10093
}
10194
}

‎src/page/bell/Message.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export default class Message extends AnimatedElement {
8383
if (this.bell.badge.content.length > 0) {
8484
return this.bell.badge.show();
8585
}
86-
return Promise.resolve(this);
86+
return Promise.resolve();
8787
})
8888
.then(() => resolve(dequeuedMessage));
8989
} else {

‎src/page/bell/constants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ export const BellEvent = {
1515
_Hovered: 'notifyButtonHover',
1616
} as const;
1717

18-
export const MesageType = {
18+
export const MessageType = {
1919
_Tip: 'tip', // Appears on button hover, disappears on button endhover
2020
_Message: 'message', // Appears manually for a specified duration, site visitor cannot control its display. Messages override tips
2121
_Queued: 'queued', // This message was a user-queued message
2222
} as const;
2323

2424
export const MESSAGE_TIMEOUT = 2500;
2525

26-
export type BellStateType = (typeof BellState)[keyof typeof BellState];
26+
export type BellStateValue = (typeof BellState)[keyof typeof BellState];

0 commit comments

Comments
 (0)