Skip to content

Commit e13c00d

Browse files
aristatharistath
committed
Move prplUpdatePreviousMonthBadgeProgressBar to its web-component file
1 parent df067b8 commit e13c00d

2 files changed

Lines changed: 107 additions & 99 deletions

File tree

‎assets/js/web-components/prpl-badge-progress-bar.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,109 @@ customElements.define(
5656
}
5757
}
5858
);
59+
60+
/**
61+
* Update the previous month badge progress bar.
62+
*
63+
* @param {number} pointsDiff The points difference.
64+
*
65+
* @return {void}
66+
*/
67+
// eslint-disable-next-line no-unused-vars
68+
const prplUpdatePreviousMonthBadgeProgressBar = ( pointsDiff ) => {
69+
const progressBars = document.querySelectorAll(
70+
'.prpl-previous-month-badge-progress-bar-wrapper prpl-badge-progress-bar'
71+
);
72+
73+
// Bail early if no badge progress bars are found.
74+
if ( ! progressBars.length ) {
75+
return;
76+
}
77+
78+
// Get the 1st incomplete badge progress bar.
79+
const progressBar =
80+
parseInt( progressBars[ 0 ]?.getAttribute( 'data-points' ) ) >=
81+
parseInt( progressBars[ 0 ]?.getAttribute( 'data-max-points' ) )
82+
? progressBars[ 1 ]
83+
: progressBars[ 0 ];
84+
85+
// Bail early if no badge progress bar is found.
86+
if ( ! progressBar ) {
87+
return;
88+
}
89+
90+
// Get the badge progress bar properties.
91+
const badgeId = progressBar.getAttribute( 'data-badge-id' );
92+
const badgePoints = progressBar.getAttribute( 'data-points' );
93+
const badgeMaxPoints = progressBar.getAttribute( 'data-max-points' );
94+
const badgeProgress = customElements.get( 'prpl-badge-progress-bar' );
95+
const badgeNewPoints = parseInt( badgePoints ) + pointsDiff;
96+
97+
// Create a new badge progress bar.
98+
const newProgressBar = new badgeProgress(
99+
badgeId,
100+
badgeNewPoints,
101+
badgeMaxPoints
102+
);
103+
newProgressBar.setAttribute( 'data-badge-id', badgeId );
104+
newProgressBar.setAttribute( 'data-points', badgeNewPoints );
105+
newProgressBar.setAttribute( 'data-max-points', badgeMaxPoints );
106+
107+
// Replace the old badge progress bar with the new one.
108+
progressBar.replaceWith( newProgressBar );
109+
110+
// Update the remaining points.
111+
const remainingPointsEl = document.querySelector(
112+
`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"] .prpl-previous-month-badge-progress-bar-remaining`
113+
);
114+
115+
if ( remainingPointsEl ) {
116+
remainingPointsEl.textContent = remainingPointsEl.textContent.replace(
117+
remainingPointsEl.getAttribute( 'data-remaining' ),
118+
badgeMaxPoints - badgeNewPoints
119+
);
120+
remainingPointsEl.setAttribute(
121+
'data-remaining',
122+
badgeMaxPoints - badgeNewPoints
123+
);
124+
}
125+
126+
// Update the previous month badge points number.
127+
const badgePointsNumberEl = document.querySelector(
128+
`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"] .prpl-widget-previous-ravi-points-number`
129+
);
130+
if ( badgePointsNumberEl ) {
131+
badgePointsNumberEl.textContent = badgeNewPoints + 'pt';
132+
}
133+
134+
// If the previous month badge is completed, update badge elements.
135+
if ( badgeNewPoints >= parseInt( badgeMaxPoints ) ) {
136+
document
137+
.querySelectorAll(
138+
`.prpl-badge-row-wrapper-inner .prpl-badge prpl-badge[complete="false"][badge-id="${ badgeId }"]`
139+
)
140+
?.forEach( ( badge ) => {
141+
badge.setAttribute( 'complete', 'true' );
142+
} );
143+
144+
// Remove the previous month badge progress bar.
145+
document
146+
.querySelector(
147+
`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"]`
148+
)
149+
?.remove();
150+
151+
// If there are no more progress bars, remove the previous month badge progress bar wrapper.
152+
if (
153+
! document.querySelector(
154+
'.prpl-previous-month-badge-progress-bar-wrapper'
155+
)
156+
) {
157+
document
158+
.querySelector(
159+
'.prpl-previous-month-badge-progress-bars-wrapper'
160+
)
161+
?.remove();
162+
}
163+
}
164+
};

‎assets/js/web-components/prpl-gauge.js‎

Lines changed: 1 addition & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* global customElements, HTMLElement */
1+
/* global customElements, HTMLElement, prplUpdatePreviousMonthBadgeProgressBar */
22
/*
33
* Web Component: prpl-gauge
44
*
@@ -187,101 +187,3 @@ const prplUpdateRaviGauge = ( pointsDiff ) => {
187187
}
188188
}
189189
};
190-
191-
const prplUpdatePreviousMonthBadgeProgressBar = ( pointsDiff ) => {
192-
const progressBars = document.querySelectorAll(
193-
'.prpl-previous-month-badge-progress-bar-wrapper prpl-badge-progress-bar'
194-
);
195-
196-
// Bail early if no badge progress bars are found.
197-
if ( ! progressBars.length ) {
198-
return;
199-
}
200-
201-
// Get the 1st incomplete badge progress bar.
202-
const progressBar =
203-
parseInt( progressBars[ 0 ]?.getAttribute( 'data-points' ) ) >=
204-
parseInt( progressBars[ 0 ]?.getAttribute( 'data-max-points' ) )
205-
? progressBars[ 1 ]
206-
: progressBars[ 0 ];
207-
208-
// Bail early if no badge progress bar is found.
209-
if ( ! progressBar ) {
210-
return;
211-
}
212-
213-
// Get the badge progress bar properties.
214-
const badgeId = progressBar.getAttribute( 'data-badge-id' );
215-
const badgePoints = progressBar.getAttribute( 'data-points' );
216-
const badgeMaxPoints = progressBar.getAttribute( 'data-max-points' );
217-
const badgeProgress = customElements.get( 'prpl-badge-progress-bar' );
218-
const badgeNewPoints = parseInt( badgePoints ) + pointsDiff;
219-
220-
// Create a new badge progress bar.
221-
const newProgressBar = new badgeProgress(
222-
badgeId,
223-
badgeNewPoints,
224-
badgeMaxPoints
225-
);
226-
newProgressBar.setAttribute( 'data-badge-id', badgeId );
227-
newProgressBar.setAttribute( 'data-points', badgeNewPoints );
228-
newProgressBar.setAttribute( 'data-max-points', badgeMaxPoints );
229-
230-
// Replace the old badge progress bar with the new one.
231-
progressBar.replaceWith( newProgressBar );
232-
233-
// Update the remaining points.
234-
const remainingPointsEl = document.querySelector(
235-
`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"] .prpl-previous-month-badge-progress-bar-remaining`
236-
);
237-
238-
if ( remainingPointsEl ) {
239-
remainingPointsEl.textContent = remainingPointsEl.textContent.replace(
240-
remainingPointsEl.getAttribute( 'data-remaining' ),
241-
badgeMaxPoints - badgeNewPoints
242-
);
243-
remainingPointsEl.setAttribute(
244-
'data-remaining',
245-
badgeMaxPoints - badgeNewPoints
246-
);
247-
}
248-
249-
// Update the previous month badge points number.
250-
const badgePointsNumberEl = document.querySelector(
251-
`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"] .prpl-widget-previous-ravi-points-number`
252-
);
253-
if ( badgePointsNumberEl ) {
254-
badgePointsNumberEl.textContent = badgeNewPoints + 'pt';
255-
}
256-
257-
// If the previous month badge is completed, update badge elements.
258-
if ( badgeNewPoints >= parseInt( badgeMaxPoints ) ) {
259-
document
260-
.querySelectorAll(
261-
`.prpl-badge-row-wrapper-inner .prpl-badge prpl-badge[complete="false"][badge-id="${ badgeId }"]`
262-
)
263-
?.forEach( ( badge ) => {
264-
badge.setAttribute( 'complete', 'true' );
265-
} );
266-
267-
// Remove the previous month badge progress bar.
268-
document
269-
.querySelector(
270-
`.prpl-previous-month-badge-progress-bar-wrapper[data-badge-id="${ badgeId }"]`
271-
)
272-
?.remove();
273-
274-
// If there are no more progress bars, remove the previous month badge progress bar wrapper.
275-
if (
276-
! document.querySelector(
277-
'.prpl-previous-month-badge-progress-bar-wrapper'
278-
)
279-
) {
280-
document
281-
.querySelector(
282-
'.prpl-previous-month-badge-progress-bars-wrapper'
283-
)
284-
?.remove();
285-
}
286-
}
287-
};

0 commit comments

Comments
 (0)