10h30/wp-strava
1
0
Fork 0
mirror of https://github.com/10h30/wp-strava.git synced 2026-07-11 18:56:18 +09:00
Code Issues Packages Projects Releases Wiki Activity

Added segment block with test

Browse Source
This commit is contained in:
Justin Foell
2021-04-30 14:59:10 -05:00
parent d3572c9942
commit 30f0377b45
10 changed files with 314 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/WPStrava.php
+11
View File
@@ -41,6 +41,12 @@ class WPStrava {
*/
private $routes = null;
/**
* Segment object to get segments.
* @var WPStrava_Segments
*/
private $segments = null;
/**
* Private constructor (singleton).
*/
@@ -115,6 +121,10 @@ class WPStrava {
return $this->get_routes();
}
if ( 'segments' === $name ) {
return $this->get_segments();
}
if ( isset( $this->{$name} ) ) {
return $this->{$name};
}
@@ -216,6 +226,7 @@ class WPStrava {
'WPStrava_Blocks_Activity',
'WPStrava_Blocks_Route',
'WPStrava_Blocks_ActivitiesList',
'WPStrava_Blocks_Segment',
);
// automatically load dependencies and version
src/WPStrava/Blocks/Segment.php
+98
View File
@@ -0,0 +1,98 @@
<?php
/*
* Segment block.
*/
class WPStrava_Blocks_Segment implements WPStrava_Blocks_Interface {
/**
* Whether or not to enqueue styles (if shortcode is present).
*
* @var boolean
* @author Justin Foell <justin@foell.org>
* @since 2.9.0
*/
private $add_script = false;
/**
* Register the wp-strava/segment block.
*
* @author Justin Foell <justin@foell.org>
* @since 2.9.0
*/
public function register_block() {
register_block_type(
'wp-strava/segment',
array(
'style' => 'wp-strava-block',
'editor_style' => 'wp-strava-block-editor',
'editor_script' => 'wp-strava-block',
'render_callback' => array( $this, 'render_block' ),
'attributes' => array(
'url' => array(
'type' => 'string',
'default' => '',
),
'imageOnly' => array(
'type' => 'boolean',
'default' => false,
),
'displayMarkers' => array(
'type' => 'boolean',
'default' => true,
),
'som' => array(
'type' => 'string',
'default' => null,
),
),
)
);
add_action( 'wp_footer', array( $this, 'print_scripts' ) );
}
/**
* Render for this block.
*
* @param array $attributes JSON attributes saved in the HTML comment for this block.
* @param string $content The content from JS save() for this block.
* @return string HTML for this block.
* @author Justin Foell <justin@foell.org>
* @since 2.9.0
*/
public function render_block( $attributes, $content ) {
if ( empty( $attributes['url'] ) ) {
return $content;
}
$this->add_script = true;
$matches = array();
preg_match( '/\/segments\/([0-9].*)$/', $attributes['url'], $matches );
if ( $matches[1] ) {
// Transform from block attributes to shortcode standard.
$atts = array(
'id' => $matches[1],
'image_only' => isset( $attributes['imageOnly'] ) ? $attributes['imageOnly'] : false,
'markers' => isset( $attributes['displayMarkers'] ) ? $attributes['displayMarkers'] : true,
'som' => ! empty( $attributes['som'] ) ? $attributes['som'] : null,
);
$renderer = new WPStrava_SegmentsRenderer();
return $renderer->get_html( $atts );
}
return $content;
}
/**
* Enqueue style if block is being used.
*
* @author Justin Foell <justin@foell.org>
* @since 2.9.0
*/
public function print_scripts() {
if ( $this->add_script ) {
wp_enqueue_style( 'wp-strava-style' );
}
}
}
src/WPStrava/SOM.php
+11
View File
@@ -99,4 +99,15 @@ abstract class WPStrava_SOM {
public function get_calories_label() {
return __( 'kcal', 'wp-strava' );
}
/**
* Get percent with % symbol.
*
* @param mixed $pct
* @author Justin Foell <justin.foell@webdevstudios.com>
* @since 2.9.0
*/
public function percent( $pct ) {
return number_format_i18n( $pct, 1 ) . '%';
}
}
src/WPStrava/SegmentsRenderer.php
+17 -10
View File
@@ -18,7 +18,7 @@ class WPStrava_SegmentsRenderer {
* @param array $atts
* @return string HTML for an segment.
* @author Justin Foell <justin@foell.org>
* @since 2.2.0
* @since 2.9.0
*/
public function get_html( $atts ) {
$defaults = array(
@@ -27,7 +27,7 @@ class WPStrava_SegmentsRenderer {
'map_width' => '480',
'map_height' => '320',
'client_id' => WPStrava::get_instance()->settings->get_default_id(),
'markers' => false,
'markers' => true,
'image_only' => false,
);
@@ -43,7 +43,7 @@ class WPStrava_SegmentsRenderer {
$segment_details = null;
try {
$segment_details = $segments->get_segments( $atts['client_id'], $atts['id'] );
$segment_details = $segments->get_segment( $atts['client_id'], $atts['id'] );
} catch ( WPStrava_Exception $e ) {
return $e->to_html();
}
@@ -91,31 +91,38 @@ class WPStrava_SegmentsRenderer {
$strava_som = WPStrava_SOM::get_som( $som );
$elevation_title = '<th>' . __( 'Elevation Gain', 'wp-strava' ) . '</th>';
$elevation = '<td data-label="' . __( 'Elevation Gain', 'wp-strava' ) . '">
<div class="segment-details-table-info">' . $strava_som->elevation( $segment_details->total_elevation_gain ) . '</div>
<div class="segment-details-table-units">' . $strava_som->get_elevation_label() . '</div>
<div class="activity-details-table-info">' . $strava_som->elevation( $segment_details->total_elevation_gain ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_elevation_label() . '</div>
</td>';
$grade_title = '<th>' . __( 'Avg. Grade', 'wp-strava' ) . '</th>';
$grade = '<td data-label="' . __( 'Avg. Grade', 'wp-strava' ) . '">
<div class="activity-details-table-info">' . $strava_som->percent( $segment_details->average_grade ) . '</div>
<div class="activity-details-table-units">&nbsp;</div>
</td>';
if ( WPStrava::get_instance()->settings->hide_elevation ) {
$elevation_title = '';
$elevation = '';
$grade_title = '';
$grade_title = '';
}
return '
<table class="segment-details-table">
<table class="activity-details-table">
<thead>
<tr>
<th>' . __( 'Elapsed Time', 'wp-strava' ) . '</th>
<th>' . __( 'Moving Time', 'wp-strava' ) . '</th>
<th>' . __( 'Distance', 'wp-strava' ) . '</th>
' . $grade_title . '
' . $elevation_title . '
</tr>
</thead>
<tbody>
<tr>
<td data-label="' . __( 'Distance', 'wp-strava' ) . '">
<div class="segment-details-table-info">' . $strava_som->distance( $segment_details->distance ) . '</div>
<div class="segment-details-table-units">' . $strava_som->get_distance_label() . '</div>
<div class="activity-details-table-info">' . $strava_som->distance( $segment_details->distance ) . '</div>
<div class="activity-details-table-units">' . $strava_som->get_distance_label() . '</div>
</td>
' . $grade . '
' . $elevation . '
</tr>
</tbody>
src/blocks/segment/block.json
+30
View File
@@ -0,0 +1,30 @@
{
"name": "wp-strava/segment",
"title": "Strava Segment",
"category": "embed",
"icon": "location-alt",
"description": "Embed a Strava Segment",
"keywords": [ "segment", "map" ],
"textdomain": "wp-strava",
"attributes": {
"url": {
"type": "string",
"default": ""
},
"imageOnly": {
"type": "boolean",
"default": false
},
"displayMarkers": {
"type": "boolean",
"default": true
},
"som": {
"type": "string",
"default": null
}
},
"editorScript": "file:../../../build/index.js",
"editorStyle": "file:../../../build/editor.css",
"style": "file:../../../build/style.css"
}
src/blocks/segment/edit.js
+125
View File
@@ -0,0 +1,125 @@
/* global wp, wpStrava */
import EmbedPlaceholder from '../components/embed-placeholder';
import EmbedControls from '../components/embed-controls';
import SOMOverride from '../components/som-override';
const { __ } = wp.i18n;
const { Component } = wp.element;
const { InspectorControls } = wp.editor;
const { PanelBody, ToggleControl, ServerSideRender } = wp.components;
const { isEmpty } = lodash;
class Edit extends Component {
constructor() {
super( ...arguments );
this.setUrl = this.setUrl.bind( this );
this.switchBackToURLInput = this.switchBackToURLInput.bind( this );
this.toggleImageOnly = this.toggleImageOnly.bind( this );
this.toggleDisplayMarkers = this.toggleDisplayMarkers.bind( this );
this.overrideSOM = this.overrideSOM.bind( this );
this.state = {
url: this.props.attributes.url,
imageOnly: this.props.attributes.imageOnly,
displayMarkers: this.props.attributes.displayMarkers,
som: this.props.attributes.som,
editingURL: isEmpty( this.props.attributes.url ) ? true : false,
};
}
setUrl( event ) {
if ( event ) {
event.preventDefault();
}
this.setState( { editingURL: false } );
this.props.setAttributes( { url: this.state.url } );
}
switchBackToURLInput() {
this.setState( { editingURL: true } );
}
toggleImageOnly( checked ) {
this.setState( { imageOnly: checked } );
this.props.setAttributes( { imageOnly: checked } );
}
toggleDisplayMarkers( checked ) {
this.setState( { displayMarkers: checked } );
this.props.setAttributes( { displayMarkers: checked } );
}
overrideSOM( newSOM ) {
this.setState( { som: newSOM } );
this.props.setAttributes( { som: newSOM } );
}
render() {
const {
url,
editingURL,
imageOnly,
displayMarkers,
som
} = this.state;
// Newly inserted block or we've clicked the edit button.
if ( editingURL ) {
return (
<EmbedPlaceholder
icon="location-alt"
label={ __( 'Strava Segment', 'wp-strava' ) }
instructions={ __(
'Paste a link to the Strava Segment you want to display on your site.',
'wp-strava'
) }
placeholder={ __( 'Enter Segment URL to embed here…', 'wp-strava' ) }
onSubmit={ this.setUrl }
value={ url }
onChange={ ( event ) =>
this.setState( { url: event.target.value } )
}
/>
);
}
return (
<>
<EmbedControls
switchBackToURLInput={ this.switchBackToURLInput }
/>
<ServerSideRender
block="wp-strava/segment"
attributes={ {
url: url,
imageOnly: imageOnly,
displayMarkers: displayMarkers,
som: som,
} }
/>
<InspectorControls>
<PanelBody
title={ __( 'Display Options', 'wp-strava' ) }
>
<ToggleControl
label={ __( 'Image Only', 'wp-strava' ) }
checked={ imageOnly }
onChange={ ( checked ) => this.toggleImageOnly( checked ) }
/>
<ToggleControl
label={ __( 'Display Markers', 'wp-strava' ) }
checked={ displayMarkers }
onChange={ (checked ) => this.toggleDisplayMarkers( checked ) }
/>
<SOMOverride
onChange={ this.overrideSOM }
/>
</PanelBody>
</InspectorControls>
</>
);
}
}
export default Edit;
src/blocks/segment/index.js
+9
View File
@@ -0,0 +1,9 @@
/* global wp, wpStrava */
import { registerBlockType } from '@wordpress/blocks';
import edit from './edit';
import metadata from './block.json';
metadata.edit = edit;
metadata.save = () => null;
registerBlockType( metadata.name, metadata );
src/index.js
+1
View File
@@ -1,3 +1,4 @@
import './blocks/activity';
import './blocks/route';
import './blocks/activitieslist';
import './blocks/segment';