Merge branch 'develop' into filip/ravis-remarkable-award

Emilia-Capital · Nov 14, 2024 · 64856d3 · 64856d3
2 parents fdf292f + 26efd29
commit 64856d3
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 138 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -451,77 +451,3 @@ button.prpl-info-icon {
 		border-color: transparent var(--prpl-background-green) transparent transparent;
 	}
 }
-
-/*------------------------------------*\
-	Gauges.
-\*------------------------------------*/
-
-.prpl-gauge-container {
-	padding: var(--prpl-padding);
-	background: var(--prpl-background-orange);
-	border-radius: var(--prpl-border-radius);
-	aspect-ratio: 2 / 1;
-	overflow: hidden;
-	position: relative;
-	margin-bottom: var(--prpl-padding);
-
-	.prpl-gauge-0,
-	.prpl-gauge-100 {
-		font-size: var(--prpl-font-size-small);
-		position: absolute;
-		top: 50%;
-		color: var(--prpl-color-gray-5);
-		width: 10%;
-		text-align: center;
-	}
-
-	.prpl-gauge-0 {
-		left: 0;
-	}
-
-	.prpl-gauge-100 {
-		right: 0;
-	}
-
-	.prpl-gauge-number {
-		font-size: var(--prpl-font-size-6xl);
-		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;
-	}
-}
-
-.prpl-gauge {
-	--cutout: 57%;
-	--max: 270deg;
-	--start: -135deg;
-	--color: var(--prpl-color-accent-orange);
-	width: 100%;
-	aspect-ratio: 1 / 1;
-	border-radius: 100%;
-	position: relative;
-	background:
-		radial-gradient(var(--background) 0 var(--cutout), transparent var(--cutout) 100%),
-		conic-gradient(from var(--start), var(--color) calc(var(--max) * var(--value)), var(--prpl-color-gray-1) calc(var(--max) * var(--value)) var(--max), transparent var(--max));
-	text-align: center;
-}
-
-.prpl-gauge-badge {
-	top: -1em;
-	display: block;
-	padding-top: 25%;
-	text-align: center;
-	position: absolute;
-	width: 100%;
-
-	img,
-	svg {
-		width: 50%;
-	}
-}
diff --git a/assets/css/dashboard-widgets/score.css b/assets/css/dashboard-widgets/score.css
@@ -6,10 +6,6 @@
 		grid-gap: calc(var(--prpl-gap) / 2);
 	}
 
-	.prpl-gauge-number {
-		font-size: var(--prpl-font-size-4xl);
-	}
-
 	h3 {
 		font-weight: 500;
 	}

diff --git a/assets/js/web-components/prpl-gauge.js b/assets/js/web-components/prpl-gauge.js
@@ -0,0 +1,40 @@
+/* global customElements, HTMLElement */
+
+/**
+ * Big counter.
+ */
+customElements.define(
+	'prpl-gauge',
+	class extends HTMLElement {
+		constructor() {
+			// Get parent class properties
+			super();
+
+			const max = parseFloat( this.querySelector( 'progress' ).getAttribute( 'max' ) );
+			const value = parseFloat( this.querySelector( 'progress' ).getAttribute( 'value' ) ) / 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)';
+			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;">
+					<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.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>
+				</div>
+			</div>
+			`;
+		}
+	}
+);
diff --git a/classes/admin/class-dashboard-widget-score.php b/classes/admin/class-dashboard-widget-score.php
@@ -36,6 +36,8 @@ protected function get_title() {
 	public function render_widget() {
 		// Enqueue stylesheets.
 		\progress_planner()->get_admin__page()->enqueue_styles();
+		\wp_enqueue_script( 'progress-planner-web-components-gauge' );
+
 		foreach ( [ 'badge-streak', 'activity-scores' ] as $handle ) {
 			$stylesheet = "/assets/css/page-widgets/{$handle}.css";
 			\wp_enqueue_style(

diff --git a/classes/admin/class-page.php b/classes/admin/class-page.php
@@ -136,6 +136,14 @@ public function register_scripts() {
 			true
 		);
 
+		\wp_register_script(
+			'progress-planner-web-components-gauge',
+			PROGRESS_PLANNER_URL . '/assets/js/web-components/prpl-gauge.js',
+			[],
+			filemtime( PROGRESS_PLANNER_DIR . '/assets/js/web-components/prpl-gauge.js' ),
+			true
+		);
+
 		// Register the ajax-request helper.
 		\wp_register_script(
 			'progress-planner-ajax',
@@ -298,6 +306,7 @@ public function enqueue_scripts() {
 		$this->register_scripts();
 
 		if ( 'toplevel_page_progress-planner' === $current_screen->id ) {
+			\wp_enqueue_script( 'progress-planner-web-components-gauge' );
 			\wp_enqueue_script( 'chart-js' );
 			\wp_enqueue_script( 'progress-planner-onboard' );
 			\wp_enqueue_script( 'progress-planner-admin' );

diff --git a/views/dashboard-widgets/score.php b/views/dashboard-widgets/score.php
@@ -15,21 +15,12 @@
 	<div class="prpl-score-gauge" style="--background: #fff">
 		<?php \progress_planner()->get_widgets__activity_scores()->print_score_gauge(); ?>
 	</div>
-	<?php
-	\progress_planner()->the_view(
-		'page-widgets/parts/gauge.php',
-		[
-			'prpl_gauge_details' => [
-				'value'           => \progress_planner()->get_admin__page()->get_widget( 'suggested-tasks' )->get_score() / \Progress_Planner\Badges\Monthly::TARGET_POINTS,
-				'max'             => \Progress_Planner\Badges\Monthly::TARGET_POINTS,
-				'background'      => 'var(--prpl-background-orange)',
-				'color'           => 'var(--prpl-color-accent-orange)',
-				'badge'           => \progress_planner()->get_badges()->get_badge( 'monthly-' . gmdate( 'Y' ) . '-m' . (int) gmdate( 'm' ) ),
-				'badge_completed' => 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>
 
 <div class="prpl-dashboard-widget-latest-activities">

diff --git a/views/page-widgets/badge-streak.php b/views/page-widgets/badge-streak.php
@@ -64,21 +64,11 @@
 	?>
 	<?php foreach ( $prpl_widget_context_details as $prpl_context => $prpl_details ) : ?>
 		<?php ++$prpl_current_context; ?>
-		<?php
-		\progress_planner()->the_view(
-			'page-widgets/parts/gauge.php',
-			[
-				'prpl_gauge_details' => [
-					'value'           => $prpl_widget->get_details( $prpl_context )->get_progress()['progress'] / 100,
-					'max'             => 100,
-					'background'      => $prpl_widget->get_details( $prpl_context )->get_background(),
-					'color'           => 'var(--prpl-color-accent-orange)',
-					'badge'           => $prpl_widget->get_details( $prpl_context ),
-					'badge_completed' => true,
-				],
-			]
-		);
-		?>
+		<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>
 			<p><?php echo \esc_html( $prpl_details['text'] ); ?></p>

diff --git a/views/page-widgets/parts/activity-scores-gauge.php b/views/page-widgets/parts/activity-scores-gauge.php
@@ -10,16 +10,10 @@
 }
 
 $prpl_widget = \progress_planner()->get_admin__page()->get_widget( 'activity-scores' );
+?>
 
-\progress_planner()->the_view(
-	'page-widgets/parts/gauge.php',
-	[
-		'prpl_gauge_details' => [
-			'value'      => $prpl_widget->get_score() / 100,
-			'max'        => 100,
-			'number'     => $prpl_widget->get_score(),
-			'background' => 'var(--prpl-background-orange)',
-			'color'      => $prpl_widget->get_gauge_color( $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,29 +9,18 @@
 	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>
 
-<?php
-\progress_planner()->the_view(
-	'page-widgets/parts/gauge.php',
-	[
-		'prpl_gauge_details' => [
-			'value'           => $prpl_percentage,
-			'max'             => \Progress_Planner\Badges\Monthly::TARGET_POINTS,
-			'background'      => 'var(--prpl-background-orange)',
-			'color'           => 'var(--prpl-color-accent-orange)',
-			'badge'           => $prpl_badge,
-			'badge_completed' => \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">
 	<span><?php \esc_html_e( 'Progress monthly badge', 'progress-planner' ); ?></span>