From e463b935b8e8d33293fb76c24df5ac81e7f5263d Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Wed, 14 Dec 2022 11:22:50 -0300 Subject: [PATCH] Creates geocoordinate-item-metadatum block to have client-side script for displaying maps. #692. --- .../geocoordinate/GeoCoordinate.vue | 1 + .../class-tainacan-geocoordinate.php | 40 +++-- .../geocoordinate-item-metadatum/block.json | 55 ++++++ .../deprecated.js | 1 + .../geocoordinate-item-metadatum/edit.js | 165 ++++++++++++++++++ .../geocoordinate-item-metadatum/icon.js | 14 ++ .../geocoordinate-item-metadatum/index.js | 15 ++ .../geocoordinate-item-metadatum/save.js | 3 + .../geocoordinate-item-metadatum/save.php | 51 ++++++ .../geocoordinate-item-metadatum/style.scss | 5 + .../geocoordinate-item-metadatum/theme.js | 53 ++++++ .../class-tainacan-gutenberg-block.php | 1 + webpack.common.js | 1 + 13 files changed, 392 insertions(+), 13 deletions(-) create mode 100644 src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/block.json create mode 100644 src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/deprecated.js create mode 100644 src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/edit.js create mode 100644 src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/icon.js create mode 100644 src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/index.js create mode 100644 src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/save.js create mode 100644 src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/save.php create mode 100644 src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/style.scss create mode 100644 src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/theme.js diff --git a/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue b/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue index 1446d12d7..44af1d7a5 100644 --- a/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue +++ b/src/views/admin/components/metadata-types/geocoordinate/GeoCoordinate.vue @@ -11,6 +11,7 @@ :zoom-animation="true" @click="onMapClick" :options="{ + name: 'map--' + itemMetadatumIdentifier, trackResize: false // We handle this manually in the component }"> get_parent() ? ( $metadatum->get_parent() . '_parent_meta_id-') : ''; $return = ''; - $return .= ''; - $return .= ''; - $return .= ''; - $return .= '
'; - return $return; + + } else { + $coordinate_as_array = explode(",", $value); + $latitude = isset($coordinate_as_array[0]) ? $coordinate_as_array[0] : ''; + $longitude = isset($coordinate_as_array[1]) ? $coordinate_as_array[1] : ''; + + $return .= "{$latitude},{$longitude}"; + } + + return ' + ' . $return . ' + '; } } \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/block.json b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/block.json new file mode 100644 index 000000000..ad5eae171 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/block.json @@ -0,0 +1,55 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "name": "tainacan/geocoorinate-item-metadatum", + "title": "Tainacan Geo Coordinate Item Metadatum", + "apiVersion": 2, + "category": "tainacan-blocks", + "keywords": [ "item", "location", "geographic", "coordinates", "metadatum", "field", "value" ], + "description": "A single item geographic metadatum, containing location information.", + "textdomain": "tainacan", + "parent": [], + "example": { + "attributes": { + "content": "preview" + } + }, + "attributes": { + "content": { + "type": "array", + "source": "query", + "selector": "div" + }, + "dataSource": { + "type": "string", + "default": "selection" + }, + "templateMode": { + "type": "boolean", + "default": false + }, + "collectionId": { + "type": "integer" + }, + "itemId": { + "type": "integer" + }, + "metadatumId": { + "type": "integer" + }, + "isModalOpen": { + "type": "boolean", + "default": false + } + }, + "usesContext": [ + "tainacan/itemId" + ], + "supports": { + "align": ["full", "wide"], + "multiple": true, + "html": true, + "anchor": true + }, + "editorScript": "geocoordinate-item-metadatum", + "editorStyle": "geocoordinate-item-metadatum" +} \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/deprecated.js b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/deprecated.js new file mode 100644 index 000000000..109fa8b38 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/deprecated.js @@ -0,0 +1 @@ +export default []; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/edit.js b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/edit.js new file mode 100644 index 000000000..e8e2d71fb --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/edit.js @@ -0,0 +1,165 @@ +const { __ } = wp.i18n; +const { Button, Placeholder, ToolbarDropdownMenu, SVG, Path } = wp.components; + +const ServerSideRender = wp.serverSideRender; +const { useBlockProps, BlockControls, AlignmentControl } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); + +import SingleItemMetadatumModal from '../../js/selection/single-item-metadatum-modal.js'; +import TainacanBlocksCompatToolbar from '../../js/compatibility/tainacan-blocks-compat-toolbar.js'; +import getCollectionIdFromPossibleTemplateEdition from '../../js/template/tainacan-blocks-single-item-template-mode.js'; + +export default function ({ attributes, setAttributes, className, isSelected }) { + + let { + content, + collectionId, + itemId, + metadatumId, + metadatumType, + isModalOpen, + dataSource, + templateMode, + } = attributes; + + // Gets blocks props from hook + const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps( { + className: { + [ `has-text-align-${ textAlign }` ]: textAlign, + } + } ); + const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; + + // Checks if we are in template mode, if so, gets the collection Id from URL. + if ( !templateMode ) { + const possibleCollectionId = getCollectionIdFromPossibleTemplateEdition(); + if (possibleCollectionId) { + collectionId = possibleCollectionId; + templateMode = true + setAttributes({ + collectionId: collectionId, + templateMode: templateMode + }); + } + } + + return content == 'preview' ? +
+ +
+ : ( +
+ { dataSource == 'selection' ? ( + + { + TainacanBlocksCompatToolbar({ + label: templateMode ? __('Select metadatum', 'tainacan') : __('Select item metadatum', 'tainacan'), + icon: + + , + onClick: () => { + isModalOpen = true; + setAttributes( { + isModalOpen: isModalOpen + }); + } + }) + } + + ): null + } + + { isSelected ? + ( +
+ { isModalOpen ? + { + collectionId = selectedCollectionId; + setAttributes({ + collectionId: collectionId + }); + }} + onSelectItem={ (selectedItemId) => { + itemId = selectedItemId; + setAttributes({ + itemId: itemId + }); + }} + onApplySelectedMetadatum={ (selectedMetadatum) => { + metadatumId = selectedMetadatum.metadatumId; + metadatumType = selectedMetadatum.metadatumType; + + setAttributes({ + metadatumId: metadatumId, + metadatumType: metadatumType, + isModalOpen: false + }); + }} + onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> + : null + } + +
+ ) : null + } + + { dataSource == 'selection' && !(collectionId && (templateMode || itemId) && metadatumId) ? ( + + )}> +

+ + + + {__('Select an item metadata to display its label and value.', 'tainacan')} +

+ + + ) : null + } + + { (collectionId && (itemId || templateMode) && metadatumId) ? ( +
+ = '5.5' ? 'POST' : 'GET' } + /> +
+ ) : null + } + +
+ ); +}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/icon.js b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/icon.js new file mode 100644 index 000000000..9067dba1d --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/icon.js @@ -0,0 +1,14 @@ + const { SVG, Path } = wp.components; + + export default ( + + + + ); + \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/index.js b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/index.js new file mode 100644 index 000000000..f8cd05987 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/index.js @@ -0,0 +1,15 @@ +import tainacanRegisterBlockType from '../../js/compatibility/tainacan-blocks-compat-register.js'; + +import metadata from './block.json'; +import icon from './icon.js'; +import edit from './edit.js'; +import save from './save.js'; +import deprecated from './deprecated.js'; + +tainacanRegisterBlockType({ + metadata, + icon, + edit, + save, + deprecated +}); diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/save.js b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/save.js new file mode 100644 index 000000000..d67f959fb --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/save.js @@ -0,0 +1,3 @@ +export default function() { + return null +}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/save.php b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/save.php new file mode 100644 index 000000000..0186ca21b --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/save.php @@ -0,0 +1,51 @@ +context['tainacan/itemId']) ? $block->context['tainacan/itemId'] : (isset($block_attributes['itemId']) ? $block_attributes['itemId'] : false); + $metadatum_id = isset($block_attributes['metadatumId']) ? $block_attributes['metadatumId'] : false; + $collection_id = isset($block_attributes['collectionId']) ? $block_attributes['collectionId'] : false; + $data_source = isset($block_attributes['dataSource']) ? $block_attributes['dataSource'] : 'parent'; + $template_mode = isset($block_attributes['templateMode']) ? $block_attributes['templateMode'] : false; + + if ( !$metadatum_id ) + return ''; + + // Builds args from backend query + $args = array( + 'metadata' => $metadatum_id, + 'before_title' => '

', + 'after_title' => '

', + 'before_value' => '

', + 'after_value' => '

' + ); + + // Classes from block and Text alignment + $wrapper_attributes = get_block_wrapper_attributes( + array( + 'class' => 'metadata-type-$type', + ) + ); + $args['before'] = '
'; + $args['after'] = '
'; + + if ( $template_mode && $collection_id ) { + // Checks if we are in the edit page or in the published + $current_post = get_post(); + $collection_pt_pattern = '/' . \Tainacan\Entities\Collection::$db_identifier_prefix . '\d+' . \Tainacan\Entities\Collection::$db_identifier_sufix . '/'; + + if ( $current_post === NULL ) + return '
Map Demo
'; + else if ( $current_post->post_type !== false && preg_match($collection_pt_pattern, $current_post->post_type) ) { + return tainacan_get_the_metadata( $args, $current_post->ID ); + } + + } else if ( $item_id ) { + return tainacan_get_the_metadata( $args, $item_id ); + } +} \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/style.scss b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/style.scss new file mode 100644 index 000000000..987849f10 --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/style.scss @@ -0,0 +1,5 @@ +.tainacan-leaflet-map-container { + display: block; + height: 320px; + width:100%; +} \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/theme.js b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/theme.js new file mode 100644 index 000000000..5f21b129f --- /dev/null +++ b/src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/theme.js @@ -0,0 +1,53 @@ +// TAINACAN LEAFLET MAP COMPONENT -------------------------------------------------------- +// +// Counts on some HMTL markup to instantiate some leaflet maps +import * as TainacanLeaflet from "leaflet"; +import 'leaflet/dist/leaflet.css'; +import iconUrl from 'leaflet/dist/images/marker-icon.png'; +import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'; +import shadowUrl from 'leaflet/dist/images/marker-shadow.png'; + +delete TainacanLeaflet.Icon.Default.prototype._getIconUrl; +TainacanLeaflet.Icon.Default.mergeOptions({ + iconRetinaUrl: iconRetinaUrl, + iconUrl: iconUrl, + shadowUrl: shadowUrl +}); + +/* Loads and instantiates map components passed to data-module="geocoordinate-item-metadatum"*/ +export default (element) => { + if (element && element.id) { + + const children = element.children ? element.children : []; + if ( !children.length ) + return; + + const coordinates = []; + for (let i = 0; i < children.length; i++) { + if ( children[i].hasAttribute('data-latitude') && children[i].hasAttribute('data-longitude') ) + coordinates.push([children[i].getAttribute('data-latitude'), children[i].getAttribute('data-longitude')]); + } + + if ( !coordinates.length ) + return; + + // Sets basic css that should be here only if this javascript is loaded. + element.classList.add('tainacan-leaflet-map-container'); + element.style.setProperty('height', '320px'); + element.style.setProperty('width', '100%'); + element.style.setProperty('display', 'block'); + + var tainacanMap = TainacanLeaflet.map(element.id).setView([-14.4086569, -51.31668], 5); + + TainacanLeaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap' + }) + .addTo(tainacanMap); + + coordinates.forEach(coordinate => { + TainacanLeaflet.marker(coordinate).addTo(tainacanMap); + }); + + tainacanMap.panInsideBounds(coordinates); + } +}; \ No newline at end of file diff --git a/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php b/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php index 1fd3364e9..f9fc0ee31 100644 --- a/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php +++ b/src/views/gutenberg-blocks/class-tainacan-gutenberg-block.php @@ -21,6 +21,7 @@ const TAINACAN_BLOCKS = [ 'item-metadata-section' => ['render_callback' => 'tainacan_blocks_render_metadata_section'], 'item-metadata' => ['render_callback' => 'tainacan_blocks_render_item_metadata'], 'item-metadatum' => ['render_callback' => 'tainacan_blocks_render_item_metadatum'], + 'geocoordinate-item-metadatum' => ['render_callback' => 'tainacan_blocks_render_geocoordinate_item_metadatum'], 'metadata-section-name' => [], 'metadata-section-description' => [] ]; diff --git a/webpack.common.js b/webpack.common.js index ced8e3306..ba081ab75 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -27,6 +27,7 @@ module.exports = { block_item_metadata_section: './src/views/gutenberg-blocks/blocks/item-metadata-section/index.js', block_item_metadata: './src/views/gutenberg-blocks/blocks/item-metadata/index.js', block_item_metadatum: './src/views/gutenberg-blocks/blocks/item-metadatum/index.js', + block_geocoordinate_item_metadatum: './src/views/gutenberg-blocks/blocks/geocoordinate-item-metadatum/index.js', block_metadata_section_name: './src/views/gutenberg-blocks/blocks/metadata-section-name/index.js', block_metadata_section_description: './src/views/gutenberg-blocks/blocks/metadata-section-description/index.js' },