Add a <progress> element as a fallback

Emilia-Capital · Nov 14, 2024 · d441091 · d441091
1 parent f87bc13
commit d441091
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 37 deletions.
diff --git a/assets/js/web-components/prpl-gauge.js b/assets/js/web-components/prpl-gauge.js
@@ -10,25 +10,26 @@ customElements.define(
 			// Get parent class properties
 			super();
 
-			const value = this.getAttribute( 'value' );
-			const max = this.getAttribute( 'max' );
+			const value = parseFloat( this.querySelector( 'progress' ).getAttribute( 'value' ) );
+			const max = parseFloat( this.querySelector( 'progress' ).getAttribute( 'max' ) );
 			const maxDeg = this.getAttribute( 'maxDeg' ) || '180deg';
 			const background = this.getAttribute( 'background' );
 			const color = this.getAttribute( 'color' ) || 'var(--prpl-color-accent-orange)';
 			const start = this.getAttribute( 'start' ) || '270deg';
 			const cutout = this.getAttribute( 'cutout' ) || '57%';
 			const contentFontSize = this.getAttribute( 'contentFontSize' ) || 'var(--prpl-font-size-6xl)';
+			const valuePercentage = value / max;
 			if ( this.querySelector( 'img' ) ) {
 				this.querySelector( 'img' ).style.marginTop = '-1em';
 			}
 
 			this.innerHTML = `
 			<div style="padding: var(--prpl-padding); background: ${ background }; border-radius:var(--prpl-border-radius); aspect-ratio: 2 / 1; overflow: hidden; position: relative;margin-bottom: var(--prpl-padding);">
-				<div style="width: 100%; aspect-ratio: 1 / 1; border-radius: 100%; position: relative; background: radial-gradient(${ background } 0 ${ cutout }, transparent ${ cutout } 100%), conic-gradient(from ${ start }, ${ color } calc(${ maxDeg } * ${ value }), var(--prpl-color-gray-1) calc(${ maxDeg } * ${ value }) ${ maxDeg }, transparent ${ maxDeg }); text-align: center;">
+				<div style="width: 100%; aspect-ratio: 1 / 1; border-radius: 100%; position: relative; background: radial-gradient(${ background } 0 ${ cutout }, transparent ${ cutout } 100%), conic-gradient(from ${ start }, ${ color } calc(${ maxDeg } * ${ valuePercentage }), var(--prpl-color-gray-1) calc(${ maxDeg } * ${ valuePercentage }) ${ maxDeg }, transparent ${ maxDeg }); text-align: center;">
 					<span style="font-size: var(--prpl-font-size-small); position: absolute; top: 50%; color: var(--prpl-color-gray-5); width: 10%; text-align: center; left:0;">0</span>
 						<span style="font-size: ${ contentFontSize }; top: -1em; display: block; padding-top: 50%; font-weight: 600; text-align: center; position: absolute; color: var(--prpl-color-gray-5); width: 100%; line-height: 1.2;">
 							<span style="display:inline-block;width: 50%;">
-								${ this.innerHTML }
+								${ this.querySelector( 'progress' ).innerHTML }
 							</span>
 						</span>
 					<span style="font-size: var(--prpl-font-size-small); position: absolute; top: 50%; color: var(--prpl-color-gray-5); width: 10%; text-align: center; right:0;">${ max }</span>

diff --git a/views/dashboard-widgets/score.php b/views/dashboard-widgets/score.php
@@ -16,14 +16,10 @@
 		<?php \progress_planner()->get_widgets__activity_scores()->print_score_gauge(); ?>
 	</div>
 
-	<prpl-gauge
-		value="<?php echo (float) \progress_planner()->get_admin__page()->get_widget( 'suggested-tasks' )->get_score() / \Progress_Planner\Badges\Monthly::TARGET_POINTS; ?>"
-		max="<?php echo (int) \Progress_Planner\Badges\Monthly::TARGET_POINTS; ?>"
-		background="var(--prpl-background-orange)"
-		color="var(--prpl-color-accent-orange)"
-		contentFontSize="var(--prpl-font-size-4xl)"
-	>
-		<?php \progress_planner()->get_badges()->get_badge( 'monthly-' . gmdate( 'Y' ) . '-m' . (int) gmdate( 'm' ) )->the_icon( true ); ?>
+	<prpl-gauge background="var(--prpl-background-orange)" color="var(--prpl-color-accent-orange)" contentFontSize="var(--prpl-font-size-4xl)">
+		<progress max="<?php echo (int) \Progress_Planner\Badges\Monthly::TARGET_POINTS; ?>" value="<?php echo (float) \progress_planner()->get_admin__page()->get_widget( 'suggested-tasks' )->get_score(); ?>">
+			<?php \progress_planner()->get_badges()->get_badge( 'monthly-' . gmdate( 'Y' ) . '-m' . (int) gmdate( 'm' ) )->the_icon( true ); ?>
+		</progress>
 	</prpl-gauge>
 </div>
 

diff --git a/views/page-widgets/badge-streak.php b/views/page-widgets/badge-streak.php
@@ -64,13 +64,10 @@
 	?>
 	<?php foreach ( $prpl_widget_context_details as $prpl_context => $prpl_details ) : ?>
 		<?php ++$prpl_current_context; ?>
-		<prpl-gauge
-			value="<?php echo (float) $prpl_widget->get_details( $prpl_context )->get_progress()['progress'] / 100; ?>"
-			max="100"
-			background="<?php echo \esc_attr( $prpl_widget->get_details( $prpl_context )->get_background() ); ?>"
-			color="var(--prpl-color-accent-orange)"
-		>
-			<?php $prpl_widget->get_details( $prpl_context )->the_icon( $prpl_gauge_details['badge_completed'] ); ?>
+		<prpl-gauge background="<?php echo \esc_attr( $prpl_widget->get_details( $prpl_context )->get_background() ); ?>" color="var(--prpl-color-accent-orange)">
+			<progress max="100" value="<?php echo (float) $prpl_widget->get_details( $prpl_context )->get_progress()['progress']; ?>">
+				<?php $prpl_widget->get_details( $prpl_context )->the_icon( $prpl_gauge_details['badge_completed'] ); ?>
+			</progress>
 		</prpl-gauge>
 		<div class="prpl-badge-content-wrapper">
 			<h3><?php echo \esc_html( $prpl_widget->get_details( $prpl_context )->get_name() ); ?></h3>

diff --git a/views/page-widgets/parts/activity-scores-gauge.php b/views/page-widgets/parts/activity-scores-gauge.php
@@ -12,12 +12,8 @@
 $prpl_widget = \progress_planner()->get_admin__page()->get_widget( 'activity-scores' );
 ?>
 
-<prpl-gauge
-	value="<?php echo (float) $prpl_widget->get_score() / 100; ?>"
-	max="100"
-	background="var(--prpl-background-orange)"
-	color="<?php echo esc_attr( $prpl_widget->get_gauge_color( $prpl_widget->get_score() ) ); ?>"
-	contentFontSize="var(--prpl-font-size-6xl)"
->
-	<?php echo \esc_html( $prpl_widget->get_score() ); ?>
+<prpl-gauge background="var(--prpl-background-orange)" color="<?php echo esc_attr( $prpl_widget->get_gauge_color( $prpl_widget->get_score() ) ); ?>" contentFontSize="var(--prpl-font-size-6xl)">
+	<progress max="100" value="<?php echo (float) $prpl_widget->get_score(); ?>">
+		<?php echo \esc_html( $prpl_widget->get_score() ); ?>
+	</progress>
 </prpl-gauge>
diff --git a/views/page-widgets/suggested-tasks.php b/views/page-widgets/suggested-tasks.php
@@ -9,21 +9,17 @@
 	exit;
 }
 
-$prpl_widget     = \progress_planner()->get_admin__page()->get_widget( 'suggested-tasks' );
-$prpl_percentage = $prpl_widget->get_score() / \Progress_Planner\Badges\Monthly::TARGET_POINTS;
-$prpl_badge      = \progress_planner()->get_badges()->get_badge( 'monthly-' . gmdate( 'Y' ) . '-m' . (int) gmdate( 'm' ) );
+$prpl_widget = \progress_planner()->get_admin__page()->get_widget( 'suggested-tasks' );
+$prpl_badge  = \progress_planner()->get_badges()->get_badge( 'monthly-' . gmdate( 'Y' ) . '-m' . (int) gmdate( 'm' ) );
 ?>
 <h2 class="prpl-widget-title">
 	<?php \esc_html_e( 'Your monthly badge', 'progress-planner' ); ?>
 </h2>
 
-<prpl-gauge
-	value="<?php echo (float) $prpl_percentage; ?>"
-	max="<?php echo (int) \Progress_Planner\Badges\Monthly::TARGET_POINTS; ?>"
-	background="var(--prpl-background-orange)"
-	color="var(--prpl-color-accent-orange)"
->
-	<?php $prpl_badge->the_icon( \Progress_Planner\Badges\Monthly::TARGET_POINTS === (int) $prpl_widget->get_score() ); ?>
+<prpl-gauge background="var(--prpl-background-orange)" color="var(--prpl-color-accent-orange)">
+	<progress max="<?php echo (int) \Progress_Planner\Badges\Monthly::TARGET_POINTS; ?>" value="<?php echo (float) $prpl_widget->get_score(); ?>">
+		<?php $prpl_badge->the_icon( \Progress_Planner\Badges\Monthly::TARGET_POINTS === (int) $prpl_widget->get_score() ); ?>
+	</progress>
 </prpl-gauge>
 
 <div class="prpl-widget-content-points">