Creates theme-side map view mode. #693.
This commit is contained in:
mateuswetah
parent
06fbeddb8d
commit
9c63d9abd7
|
|
@ -113,6 +113,15 @@ class Theme_Helper {
|
|||
'implements_skeleton' => true,
|
||||
'requires_thumbnail' => false
|
||||
]);
|
||||
$this->register_view_mode('map', [
|
||||
'label' => __('Map', 'tainacan'),
|
||||
'dynamic_metadata' => true,
|
||||
'description' => 'A map view, for displaying items that have geocoordinate metadata.',
|
||||
'icon' => '<span class="icon"><i class="tainacan-icon tainacan-icon-public tainacan-icon-1-25em"></i></span>',
|
||||
'type' => 'component',
|
||||
'implements_skeleton' => true,
|
||||
'requires_thumbnail' => false
|
||||
]);
|
||||
}
|
||||
|
||||
public function is_post_an_item(\WP_Post $post) {
|
||||
|
|
|
|||
|
|
@ -1353,13 +1353,13 @@
|
|||
:zoom="5"
|
||||
:center="[-14.4086569, -51.31668]"
|
||||
:zoom-animation="true"
|
||||
@click="selectedMarkerIndexes = []"
|
||||
@click="clearSelectedMarkers()"
|
||||
:options="{
|
||||
name: 'tainacan-admin-view-mode-map'
|
||||
}">
|
||||
<l-tile-layer
|
||||
:url="url"
|
||||
:attribution="attribution" />
|
||||
:url="mapTileUrl"
|
||||
:attribution="mapTileAttribution" />
|
||||
<l-marker
|
||||
v-for="(itemLocation, index) of itemsLocations"
|
||||
:key="index"
|
||||
|
|
@ -1404,7 +1404,7 @@
|
|||
<div
|
||||
v-if="selectedMarkerIndexes.length"
|
||||
class="geocoordinate-panel--input">
|
||||
<p>{{ selectedMarkerIndexes.length == 1 ? $i18n.get('label_one_selected_location') : $i18n.getWithVariables('label_%s_selected_locations', [ selectedMarkerIndexes.length ]) }}. <a @click="selectedMarkerIndexes = []">{{ $i18n.get('label_clean') }}</a></p>
|
||||
<p>{{ selectedMarkerIndexes.length == 1 ? $i18n.get('label_one_selected_location') : $i18n.getWithVariables('label_%s_selected_locations', [ selectedMarkerIndexes.length ]) }}. <a @click="clearSelectedMarkers()">{{ $i18n.get('label_clean') }}</a></p>
|
||||
</div>
|
||||
</transition>
|
||||
<section
|
||||
|
|
@ -1523,11 +1523,11 @@
|
|||
</div>
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit && !$adminOptions.hideItemsListActionAreas"
|
||||
v-if="!$adminOptions.hideItemsListActionAreas"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
id="button-delete"
|
||||
id="button-show-location"
|
||||
v-if="itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)"
|
||||
:aria-label="$i18n.get('label_show_item_location_on_map')"
|
||||
@click.prevent.stop="showLocationsByItem(item)">
|
||||
|
|
@ -1550,7 +1550,7 @@
|
|||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="!isOnTrash"
|
||||
v-if="!isOnTrash && item.current_user_can_edit"
|
||||
id="button-edit"
|
||||
:aria-label="$i18n.getFrom('items','edit_item')"
|
||||
@click.prevent.stop="goToItemEditPage(item)">
|
||||
|
|
@ -1568,7 +1568,7 @@
|
|||
<a
|
||||
:aria-lavel="$i18n.get('label_button_untrash')"
|
||||
@click.prevent.stop="untrashOneItem(item.id)"
|
||||
v-if="isOnTrash">
|
||||
v-if="isOnTrash && item.current_user_can_edit">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_recover_from_trash'),
|
||||
|
|
@ -1581,7 +1581,7 @@
|
|||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.current_user_can_delete"
|
||||
v-if="item.current_user_can_delete && item.current_user_can_edit"
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete')"
|
||||
@click.prevent.stop="deleteOneItem(item.id)">
|
||||
|
|
@ -1715,8 +1715,8 @@ export default {
|
|||
selectedGeocoordinateMetadatum: false, // Must became an object containing the whole metadata to handle compound information.
|
||||
latitude: -14.4086569,
|
||||
longitude: -51.31668,
|
||||
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
attribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
mapTileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
mapTileAttribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
selectedMarkerIndexes: []
|
||||
}
|
||||
},
|
||||
|
|
@ -1899,7 +1899,7 @@ export default {
|
|||
}, 500)
|
||||
},
|
||||
selectedGeocoordinateMetadatum() {
|
||||
this.selectedMarkerIndexes = [];
|
||||
this.clearSelectedMarkers();
|
||||
},
|
||||
geocoordinateMetadata: {
|
||||
handler() {
|
||||
|
|
@ -2267,6 +2267,15 @@ export default {
|
|||
let maxCharacter = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 480 ? 100 : 210;
|
||||
return description.length > maxCharacter ? description.substring(0, maxCharacter - 3) + '...' : description;
|
||||
},
|
||||
clearSelectedMarkers() {
|
||||
this.selectedMarkerIndexes = [];
|
||||
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
|
||||
if (this.itemsLocations.length == 1)
|
||||
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
else
|
||||
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
}
|
||||
},
|
||||
showItemByLocation(index) {
|
||||
this.selectedMarkerIndexes = [];
|
||||
this.selectedMarkerIndexes.push(index);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,15 @@
|
|||
.tainacan-leaflet-map-container {
|
||||
|
||||
#tainacan-admin-view-mode-map {
|
||||
#tainacan-admin-view-mode-map,
|
||||
#tainacan-view-mode-map {
|
||||
float: right;
|
||||
|
||||
/deep/ span[data-module="geocoordinate-item-metadatum"],
|
||||
/deep/ span[data-module="geocoordinate-item-metadatum"]+br {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.geocoordinate-panel {
|
||||
background: var(--tainacan-background-color);
|
||||
box-shadow: 0px 0px 12px -10px #000;
|
||||
|
|
@ -25,6 +32,12 @@
|
|||
padding: 0;
|
||||
font-size: 1.25em;
|
||||
font-family: var(--tainacan-font-family);
|
||||
|
||||
label,
|
||||
p,
|
||||
a {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/deep/ select {
|
||||
background-color: var(--tainacan-input-background-color);
|
||||
|
|
@ -54,9 +67,6 @@
|
|||
|
||||
&.non-located-item {
|
||||
opacity: 0.35;
|
||||
}
|
||||
&.non-focused-item {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@
|
|||
import { viewModesMixin } from '../js/view-modes-mixin.js';
|
||||
|
||||
export default {
|
||||
name: 'ViewModeRecords',
|
||||
name: 'ViewModeList',
|
||||
mixins: [
|
||||
viewModesMixin
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,436 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
|
||||
<!-- Empty result placeholder, rendered in the parent component -->
|
||||
<slot />
|
||||
|
||||
<!-- SKELETON LOADING -->
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="tainacan-records-container--skeleton">
|
||||
<div
|
||||
:key="item"
|
||||
v-for="item in 12"
|
||||
:style="{'min-height': randomHeightForRecordsItem() + 'px' }"
|
||||
class="skeleton" />
|
||||
</div>
|
||||
|
||||
<!-- MAP VIEW MODE -->
|
||||
<div class="tainacan-leaflet-map-container">
|
||||
<l-map
|
||||
:id="'tainacan-view-mode-map'"
|
||||
:ref="'tainacan-view-mode-map'"
|
||||
style="height: 60vh; width: 75%;"
|
||||
:zoom="5"
|
||||
:center="[-14.4086569, -51.31668]"
|
||||
:zoom-animation="true"
|
||||
@click="clearSelectedMarkers()"
|
||||
:options="{
|
||||
name: 'tainacan-view-mode-map'
|
||||
}">
|
||||
<l-tile-layer
|
||||
:url="mapTileUrl"
|
||||
:attribution="mapTileAttribution" />
|
||||
<l-marker
|
||||
v-for="(itemLocation, index) of itemsLocations"
|
||||
:key="index"
|
||||
:lat-lng="itemLocation.location"
|
||||
:opacity="selectedMarkerIndexes.length > 0 && !selectedMarkerIndexes.includes(index) ? 0.35 : 1.0"
|
||||
@click="showItemByLocation(index)">
|
||||
<l-tooltip>
|
||||
<div
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex">
|
||||
<div
|
||||
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
style="font-weight: bold;"
|
||||
v-html="(itemLocation.item.metadata != undefined && collectionId ? renderMetadata(itemLocation.item, column) : (itemLocation.item.title ? itemLocation.item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)) + getMultivalueIndicator(itemLocation)" />
|
||||
<div
|
||||
v-if="column.display && column.metadata_type == 'Tainacan\\Metadata_Types\\Compound' && selectedGeocoordinateMetadatum.parent == column.id"
|
||||
v-html="itemLocation.item.metadata != undefined ? renderMetadata(itemLocation.item, column, itemLocation.multivalueIndex) : ''" />
|
||||
</div>
|
||||
</l-tooltip>
|
||||
</l-marker>
|
||||
<l-control position="topright">
|
||||
<div class="geocoordinate-panel">
|
||||
<div
|
||||
v-if="geocoordinateMetadata.length"
|
||||
class="geocoordinate-panel--input">
|
||||
<label>{{ $i18n.get('label_showing_locations_for') }} </label>
|
||||
<b-select
|
||||
:placeholder="$i18n.get('instruction_select_geocoordinate_metadatum')"
|
||||
id="tainacan-select-geocoordinate-metatum"
|
||||
v-model="selectedGeocoordinateMetadatum">
|
||||
<option
|
||||
v-for="geocoordinateMetadatum of geocoordinateMetadata"
|
||||
:key="geocoordinateMetadatum.id"
|
||||
role="button"
|
||||
:class="{ 'is-active': selectedGeocoordinateMetadatum.slug == geocoordinateMetadatum.slug }"
|
||||
:value="geocoordinateMetadatum">
|
||||
{{ geocoordinateMetadatum.name }}
|
||||
</option>
|
||||
</b-select>
|
||||
</div>
|
||||
<transition name="filter-item">
|
||||
<div
|
||||
v-if="selectedMarkerIndexes.length"
|
||||
class="geocoordinate-panel--input">
|
||||
<p>{{ selectedMarkerIndexes.length == 1 ? $i18n.get('label_one_selected_location') : $i18n.getWithVariables('label_%s_selected_locations', [ selectedMarkerIndexes.length ]) }}. <a @click="clearSelectedMarkers()">{{ $i18n.get('label_clean') }}</a></p>
|
||||
</div>
|
||||
</transition>
|
||||
<section
|
||||
v-if="!geocoordinateMetadata.length"
|
||||
class="section">
|
||||
<div class="content has-text-grey has-text-centered">
|
||||
<p>
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-30px tainacan-icon-public" />
|
||||
</span>
|
||||
</p>
|
||||
<p>{{ $i18n.get('info_empty_geocoordinate_metadata_list') }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</l-control>
|
||||
</l-map>
|
||||
<transition-group
|
||||
v-if="!isLoading"
|
||||
tag="ul"
|
||||
class="tainacan-records-container tainacan-records-container--map"
|
||||
name="item-appear">
|
||||
<li
|
||||
role="listitem"
|
||||
:aria-setsize="totalItems"
|
||||
:aria-posinset="getPosInSet(index)"
|
||||
:data-tainacan-item-id="item.id"
|
||||
:key="item.id"
|
||||
v-for="(item, index) of items"
|
||||
v-show="!selectedMarkerIndexes.length || selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex].item.id == item.id)">
|
||||
<a
|
||||
:href="getItemLink(item.url, index)"
|
||||
:class="{
|
||||
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
|
||||
}"
|
||||
class="tainacan-record">
|
||||
|
||||
<!-- JS-side hook for extra content -->
|
||||
<div
|
||||
v-if="hasBeforeHook()"
|
||||
class="faceted-search-hook faceted-search-hook-item-before"
|
||||
v-html="getBeforeHook(item)" />
|
||||
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<span
|
||||
v-if="itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id) && selectedGeocoordinateMetadatum.slug"
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_show_item_location_on_map'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon"
|
||||
style="margin:0px 2px 0px 0px;"
|
||||
:aria-label="$i18n.get('label_show_item_location_on_map')"
|
||||
@click.prevent.stop="showLocationsByItem(item)">
|
||||
<svg
|
||||
style="width: 1.5em;height: 1.5em;"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
shown: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.metadata != undefined ? renderMetadata(item, column) : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
v-if="column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
v-html="item.metadata != undefined && collectionId ? renderMetadata(item, column) : (item.title ? item.title :`<span class='has-text-gray3 is-italic'>` + $i18n.get('label_value_not_provided') + `</span>`)" />
|
||||
<span
|
||||
v-if="isSlideshowViewModeEnabled"
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
shown: 500,
|
||||
hide: 100,
|
||||
},
|
||||
content: $i18n.get('label_see_on_fullscreen'),
|
||||
placement: 'auto-start',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
@click.prevent="starSlideshowFromHere(index)"
|
||||
class="icon slideshow-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewgallery tainacan-icon-1-125em"/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Remaining metadata -->
|
||||
<div class="media">
|
||||
<div class="list-metadata media-body">
|
||||
<div
|
||||
class="tainacan-record-thumbnail"
|
||||
v-if="item.thumbnail != undefined">
|
||||
<blur-hash-image
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-record-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
<div
|
||||
:style="{
|
||||
minHeight: getItemImageHeight(item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px',
|
||||
marginTop: '-' + getItemImageHeight(item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][1] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[1] : 120), item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][2] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[2] : 120)) + 'px'
|
||||
}" />
|
||||
</div>
|
||||
<span
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="renderMetadata(item, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="renderMetadata(item, column)"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JS-side hook for extra content -->
|
||||
<div
|
||||
v-if="hasAfterHook()"
|
||||
class="faceted-search-hook faceted-search-hook-item-after"
|
||||
v-html="getAfterHook(item)" />
|
||||
</a>
|
||||
</li>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { viewModesMixin } from '../js/view-modes-mixin.js';
|
||||
import { LMap, LTooltip, LTileLayer, LMarker, LControl } from 'vue2-leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { Icon, latLng } from 'leaflet';
|
||||
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 Icon.Default.prototype._getIconUrl;
|
||||
Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: iconRetinaUrl,
|
||||
iconUrl: iconUrl,
|
||||
shadowUrl: shadowUrl
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'ViewModeMap',
|
||||
components: {
|
||||
LMap,
|
||||
LTooltip,
|
||||
LTileLayer,
|
||||
LMarker,
|
||||
LControl
|
||||
},
|
||||
mixins: [
|
||||
viewModesMixin
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
selectedGeocoordinateMetadatum: false, // Must became an object containing the whole metadata to handle compound information.
|
||||
latitude: -14.4086569,
|
||||
longitude: -51.31668,
|
||||
mapTileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
mapTileAttribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
selectedMarkerIndexes: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
amountOfDisplayedMetadata() {
|
||||
return this.displayedMetadata.filter((metadata) => metadata.display).length;
|
||||
},
|
||||
itemsLocations() {
|
||||
let locations = [];
|
||||
|
||||
if ( this.selectedGeocoordinateMetadatum.slug && this.items ) {
|
||||
for (let item of this.items) {
|
||||
|
||||
let selectedItemMetadatum = item.metadata[this.selectedGeocoordinateMetadatum.slug];
|
||||
|
||||
// Handle compound metadata child first, as they will not appear in this list by default (they are inside their parents value)
|
||||
if (!selectedItemMetadatum && this.selectedGeocoordinateMetadatum['parent']) {
|
||||
|
||||
const parentSlug = Object.keys(item.metadata).find(aMetadatumSlug => item.metadata[aMetadatumSlug].id == this.selectedGeocoordinateMetadatum['parent']);
|
||||
if (parentSlug) {
|
||||
item.metadata[parentSlug].value.forEach(aCompoundValue => {
|
||||
|
||||
const compoundValues = Array.isArray(aCompoundValue) ? aCompoundValue : [aCompoundValue];
|
||||
compoundValues.forEach(aValue => {
|
||||
if ( aValue['metadatum_id'] == this.selectedGeocoordinateMetadatum['id'] ) {
|
||||
selectedItemMetadatum = {
|
||||
'metadatum_id': aValue['metadatum_id'],
|
||||
'parent_meta_id': aValue['parent_meta_id'],
|
||||
'value': selectedItemMetadatum && selectedItemMetadatum['value'] ? selectedItemMetadatum['value'] : [],
|
||||
'value_as_string': selectedItemMetadatum && selectedItemMetadatum['value_as_string'] ? selectedItemMetadatum['value_as_string'] : [],
|
||||
'value_as_html': selectedItemMetadatum && selectedItemMetadatum['value_as_html'] ? selectedItemMetadatum['value_as_html'] : []
|
||||
}
|
||||
selectedItemMetadatum['value'].push(aValue['value']);
|
||||
selectedItemMetadatum['value_as_string'].push(aValue['value_as_string']);
|
||||
selectedItemMetadatum['value_as_html'].push(aValue['value_as_html']);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Then check if has a single or multi value
|
||||
if (
|
||||
selectedItemMetadatum &&
|
||||
Array.isArray(selectedItemMetadatum.value)
|
||||
) {
|
||||
for (let i = 0; i < selectedItemMetadatum.value.length; i++) {
|
||||
if (selectedItemMetadatum.value[i].split(',').length == 2) {
|
||||
locations.push({
|
||||
item: item,
|
||||
multivalueIndex: i,
|
||||
multivalueTotal: selectedItemMetadatum.value.length,
|
||||
location: latLng(selectedItemMetadatum.value[i].split(','))
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
selectedItemMetadatum &&
|
||||
typeof selectedItemMetadatum.value.split == 'function' &&
|
||||
selectedItemMetadatum.value.split(',').length == 2
|
||||
) {
|
||||
locations.push({
|
||||
item: item,
|
||||
location: latLng(selectedItemMetadatum.value.split(','))
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
return locations;
|
||||
},
|
||||
geocoordinateMetadata() {
|
||||
let geocoordinateMetadata = [];
|
||||
|
||||
this.displayedMetadata.forEach((aMetadatum) => {
|
||||
|
||||
if ( aMetadatum['display'] && aMetadatum['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' )
|
||||
geocoordinateMetadata.push(aMetadatum);
|
||||
|
||||
if ( aMetadatum['display'] && aMetadatum['metadata_type'] == 'Tainacan\\Metadata_Types\\Compound' &&
|
||||
aMetadatum['metadata_type_options']['children_objects'] && aMetadatum['metadata_type_options']['children_objects'].length
|
||||
) {
|
||||
for ( let i = 0; i < aMetadatum['metadata_type_options']['children_objects'].length; i++ )
|
||||
if ( aMetadatum['metadata_type_options']['children_objects'][i]['metadata_type'] == 'Tainacan\\Metadata_Types\\GeoCoordinate' )
|
||||
geocoordinateMetadata.push(aMetadatum['metadata_type_options']['children_objects'][i]);
|
||||
}
|
||||
});
|
||||
|
||||
return geocoordinateMetadata;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
itemsLocations() {
|
||||
setTimeout(() => {
|
||||
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
|
||||
if (this.itemsLocations.length == 1)
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
else
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
}
|
||||
}, 500)
|
||||
},
|
||||
selectedGeocoordinateMetadatum() {
|
||||
this.clearSelectedMarkers();
|
||||
},
|
||||
geocoordinateMetadata: {
|
||||
handler() {
|
||||
if ( this.geocoordinateMetadata.length )
|
||||
this.selectedGeocoordinateMetadatum = this.geocoordinateMetadata[0];
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
randomHeightForRecordsItem() {
|
||||
let min = (70*this.amountOfDisplayedMetadata)*0.8;
|
||||
let max = (70*this.amountOfDisplayedMetadata)*1.2;
|
||||
return Math.floor(Math.random()*(max-min+1)+min);
|
||||
},
|
||||
getItemImageHeight(imageWidth, imageHeight) {
|
||||
let itemWidth = 120;
|
||||
return (imageHeight*itemWidth)/imageWidth;
|
||||
},
|
||||
getMultivalueIndicator(itemLocation) {
|
||||
if ( itemLocation.multivalueTotal > 1 )
|
||||
return ' <em>(' + (itemLocation.multivalueIndex + 1) + ' of ' + itemLocation.multivalueTotal + ')</em>';
|
||||
else
|
||||
return '';
|
||||
},
|
||||
clearSelectedMarkers() {
|
||||
this.selectedMarkerIndexes = [];
|
||||
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
|
||||
if (this.itemsLocations.length == 1)
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
else
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
}
|
||||
},
|
||||
showItemByLocation(index) {
|
||||
this.selectedMarkerIndexes = [];
|
||||
this.selectedMarkerIndexes.push(index);
|
||||
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject )
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 12 });
|
||||
},
|
||||
showLocationsByItem(item) {
|
||||
this.selectedMarkerIndexes = [];
|
||||
const selectedLocationsByItem = this.itemsLocations.filter((anItemLocation, index) => {
|
||||
if (anItemLocation.item.id == item.id)
|
||||
this.selectedMarkerIndexes.push(index);
|
||||
return anItemLocation.item.id == item.id;
|
||||
})
|
||||
if ( this.itemsLocations.length && this.$refs['tainacan-view-mode-map'] && this.$refs['tainacan-view-mode-map'].mapObject ) {
|
||||
if (selectedLocationsByItem.length > 1)
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
else
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../../../../admin/scss/_view-mode-records.scss";
|
||||
@import "../../../../../admin/scss/_view-mode-map.scss";
|
||||
|
||||
.tainacan-records-container--map .tainacan-record .metadata-title {
|
||||
padding: 0.6em 0.875em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -68,7 +68,7 @@ export const viewModesMixin = {
|
|||
}
|
||||
return itemUrl;
|
||||
},
|
||||
renderMetadata(item, metadatum) {
|
||||
renderMetadata(item, metadatum, multivalueIndex) {
|
||||
let metadata = false;
|
||||
if (item && item.metadata && item.metadata[metadatum.slug] != undefined)
|
||||
metadata = item.metadata[metadatum.slug]
|
||||
|
|
@ -83,8 +83,25 @@ export const viewModesMixin = {
|
|||
|
||||
if (!metadata)
|
||||
return '';
|
||||
else
|
||||
return metadata.value_as_html;
|
||||
|
||||
if ( multivalueIndex != undefined && metadata.value[multivalueIndex]) {
|
||||
|
||||
if ( !Array.isArray(metadata.value[multivalueIndex]) && metadata.value[multivalueIndex].value_as_html)
|
||||
return metadata.value[multivalueIndex].value_as_html;
|
||||
|
||||
if ( Array.isArray(metadata.value[multivalueIndex]) ) {
|
||||
let sumOfValuesAsHtml = '';
|
||||
|
||||
metadata.value[multivalueIndex].forEach(aValue => {
|
||||
if (aValue.value_as_html)
|
||||
sumOfValuesAsHtml += aValue.value_as_html + '<br>';
|
||||
})
|
||||
|
||||
return sumOfValuesAsHtml;
|
||||
}
|
||||
}
|
||||
|
||||
return metadata.value_as_html;
|
||||
},
|
||||
starSlideshowFromHere(index) {
|
||||
this.$router.replace({ query: {...this.$route.query, ...{'slideshow-from': index } }}).catch((error) => this.$console.log(error));
|
||||
|
|
|
|||
|
|
@ -51,6 +51,7 @@ import ViewModeRecords from './theme-search/components/view-mode-records.vue';
|
|||
import ViewModeMasonry from './theme-search/components/view-mode-masonry.vue';
|
||||
import ViewModeSlideshow from './theme-search/components/view-mode-slideshow.vue';
|
||||
import ViewModeList from './theme-search/components/view-mode-list.vue';
|
||||
import ViewModeMap from './theme-search/components/view-mode-map.vue';
|
||||
|
||||
// Remaining imports
|
||||
import store from '../../../admin/js/store/store';
|
||||
|
|
@ -160,6 +161,7 @@ export default (element) => {
|
|||
Vue.component('view-mode-masonry', ViewModeMasonry);
|
||||
Vue.component('view-mode-slideshow', ViewModeSlideshow);
|
||||
Vue.component('view-mode-list', ViewModeList);
|
||||
Vue.component('view-mode-map', ViewModeMap);
|
||||
|
||||
Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue