Merge branch 'feature/692' of github.com:tainacan/tainacan into feature/692
This commit is contained in:
vnmedeiros
commit
de2fd3adcd
|
|
@ -1432,6 +1432,20 @@
|
|||
v-if="selectedMarkerIndexes.length"
|
||||
position="topleft"
|
||||
class="tainacan-records-container tainacan-records-container--map">
|
||||
<button
|
||||
:aria-label="$i18n.get('label_clean')"
|
||||
class="tainacan-records-close-button"
|
||||
@click="clearSelectedMarkers()"
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_clean'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
<span class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-close" />
|
||||
</span>
|
||||
</button>
|
||||
<transition-group
|
||||
tag="ul"
|
||||
name="item-appear">
|
||||
|
|
@ -1441,42 +1455,13 @@
|
|||
v-for="item of items.filter(anItem => selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex] && itemsLocations[aSelectedMarkerIndex].item.id == anItem.id))">
|
||||
<div
|
||||
:class="{
|
||||
'selected-record': getSelectedItemChecked(item.id) == true,
|
||||
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
|
||||
}"
|
||||
class="tainacan-record">
|
||||
<!-- Checkbox -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<div
|
||||
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="record-checkbox">
|
||||
<label
|
||||
tabindex="0"
|
||||
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
|
||||
<input
|
||||
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||
type="checkbox"
|
||||
:checked="getSelectedItemChecked(item.id)"
|
||||
@input="setSelectedItemChecked(item.id)">
|
||||
<input
|
||||
v-else
|
||||
type="radio"
|
||||
name="item-single-selection"
|
||||
:value="item.id"
|
||||
v-model="singleItemSelection">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div
|
||||
class="metadata-title"
|
||||
:style="{
|
||||
'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '1.5em !important' : '2.75em'
|
||||
}">
|
||||
class="metadata-title">
|
||||
<span
|
||||
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
|
||||
class="icon has-text-gray"
|
||||
|
|
@ -1528,6 +1513,7 @@
|
|||
@click.right="onRightClickItem($event, item)"
|
||||
v-html="item.title != undefined ? item.title : ''" />
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="!$adminOptions.hideItemsListActionAreas"
|
||||
|
|
@ -1831,7 +1817,6 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -47,22 +47,45 @@
|
|||
}
|
||||
|
||||
.tainacan-records-container--map {
|
||||
height: 60vh;
|
||||
height: calc(60vh - 72px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
width: 300px;
|
||||
max-width: 300px;
|
||||
float: none;
|
||||
position: initial;
|
||||
font-size: 1rem;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
.tainacan-records-close-button {
|
||||
background-color: var(--tainacan-background-color);
|
||||
border-radius: 100%;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: none;
|
||||
position: absolute;
|
||||
left: 320px;
|
||||
cursor: pointer;
|
||||
padding: 0.75em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
.icon {
|
||||
height: 0.125em;
|
||||
}
|
||||
}
|
||||
|
||||
&>li,
|
||||
&>ul>li {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
.tainacan-record {
|
||||
margin-bottom: 0.125rem;
|
||||
max-width: 100%;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 12px -10px #000;
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
opacity: 1.0;
|
||||
|
|
@ -72,6 +95,16 @@
|
|||
background-color: var(--tainacan-background-color);
|
||||
}
|
||||
|
||||
.metadata-title {
|
||||
padding: 0.5em 6.75em 0.5em 0.75em;
|
||||
|
||||
p {
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.non-located-item {
|
||||
opacity: 0.35;
|
||||
|
||||
|
|
@ -80,10 +113,12 @@
|
|||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-record-item-thumbnail {
|
||||
margin: 0 0 0.75rem 1rem;
|
||||
}
|
||||
.tainacan-record-item-thumbnail,
|
||||
img {
|
||||
max-width: 60px;
|
||||
max-width: 75px;
|
||||
}
|
||||
|
||||
.media .list-metadata {
|
||||
|
|
@ -145,7 +180,7 @@
|
|||
.actions-area {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: calc(-1 * var(--tainacan-container-padding));
|
||||
top: calc(-0.25em * var(--tainacan-container-padding));
|
||||
bottom: 0;
|
||||
padding-right: 12px;
|
||||
//width: 80px;
|
||||
|
|
@ -165,7 +200,7 @@
|
|||
&:hover .actions-area {
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
top: calc(-1 * 1.5em - var(--tainacan-container-padding));
|
||||
top: calc(-0.875em - var(--tainacan-container-padding));
|
||||
|
||||
a {
|
||||
opacity: 1;
|
||||
|
|
@ -173,7 +208,6 @@
|
|||
}
|
||||
.tainacan-map-card-thumbnail {
|
||||
max-width: 40px;
|
||||
margin-top: -0.5em;
|
||||
margin-left: auto;
|
||||
}
|
||||
.tainacan-map-card-item-thumbnail,
|
||||
|
|
@ -186,15 +220,14 @@
|
|||
}
|
||||
.metadata-title {
|
||||
flex-shrink: 0;
|
||||
padding: 0.75em 1.125em;
|
||||
padding: 0.25em 1.125em;
|
||||
font-size: 1.0em !important;
|
||||
min-height: 40px;
|
||||
position: relative;
|
||||
white-space: wrap;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
min-width: 100%;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
color: var(--tainacan-heading-color);
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
<div
|
||||
:key="item"
|
||||
v-for="item in 12"
|
||||
:style="{'min-height': randomHeightForRecordsItem() + 'px' }"
|
||||
class="skeleton" />
|
||||
</div>
|
||||
|
||||
|
|
@ -98,26 +97,153 @@
|
|||
</section>
|
||||
</div>
|
||||
</l-control>
|
||||
<l-control
|
||||
:disable-scroll-propagation="false"
|
||||
:disable-click-propagation="false"
|
||||
v-if="selectedMarkerIndexes.length"
|
||||
position="topleft"
|
||||
class="tainacan-records-container tainacan-records-container--map">
|
||||
<transition-group
|
||||
tag="ul"
|
||||
name="item-appear">
|
||||
<li
|
||||
:aria-setsize="totalItems"
|
||||
:aria-posinset="getPosInSet(index)"
|
||||
:data-tainacan-item-id="item.id"
|
||||
:key="item.id"
|
||||
v-for="(item, index) of items.filter(anItem => 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>
|
||||
</l-control>
|
||||
</l-map>
|
||||
<transition-group
|
||||
<ul
|
||||
v-if="!isLoading"
|
||||
tag="ul"
|
||||
class="tainacan-records-container tainacan-records-container--map"
|
||||
name="item-appear">
|
||||
class="tainacan-map-cards-container">
|
||||
<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)"
|
||||
v-for="(item, index) of items">
|
||||
<div
|
||||
@click.prevent.stop="showLocationsByItem(item)"
|
||||
:class="{
|
||||
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
|
||||
}"
|
||||
class="tainacan-record">
|
||||
class="tainacan-map-card">
|
||||
|
||||
<!-- JS-side hook for extra content -->
|
||||
<div
|
||||
|
|
@ -180,52 +306,14 @@
|
|||
</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>
|
||||
</div>
|
||||
</li>
|
||||
</transition-group>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -336,12 +424,7 @@ export default {
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
let selectedItemId = false;
|
||||
if ( this.selectedMarkerIndexes.length > 0 )
|
||||
selectedItemId = locations[this.selectedMarkerIndexes[0]].item.id;
|
||||
|
||||
return selectedItemId ? locations.filter((aLocation) => aLocation.item.id == selectedItemId) : locations;
|
||||
return locations;
|
||||
},
|
||||
geocoordinateMetadata() {
|
||||
let geocoordinateMetadata = [];
|
||||
|
|
@ -370,9 +453,9 @@ export default {
|
|||
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 });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
|
||||
else
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
|
||||
}
|
||||
}, 500)
|
||||
},
|
||||
|
|
@ -388,11 +471,6 @@ export default {
|
|||
}
|
||||
},
|
||||
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;
|
||||
|
|
@ -407,16 +485,16 @@ export default {
|
|||
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 });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
|
||||
else
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
|
||||
}
|
||||
},
|
||||
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 });
|
||||
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, paddingTopLeft: [0, 300] });
|
||||
},
|
||||
showLocationsByItem(item) {
|
||||
this.selectedMarkerIndexes = [];
|
||||
|
|
@ -425,12 +503,21 @@ export default {
|
|||
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 });
|
||||
// }
|
||||
|
||||
if ( selectedLocationsByItem.length) {
|
||||
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, paddingTopLeft: [0, 300] });
|
||||
else
|
||||
this.$refs['tainacan-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 300] });
|
||||
}
|
||||
} else {
|
||||
this.$buefy.snackbar.open({
|
||||
message: this.$i18n.get('info_non_located_item'),
|
||||
type: 'is-warning',
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue