Merge branch 'develop' of https://github.com/tainacan/tainacan into develop
This commit is contained in:
commit
333bca2fe2
|
@ -19,6 +19,7 @@
|
||||||
"vue-router": "^3.0.1",
|
"vue-router": "^3.0.1",
|
||||||
"vue-the-mask": "^0.11.1",
|
"vue-the-mask": "^0.11.1",
|
||||||
"vue2-hammer": "^1.0.7",
|
"vue2-hammer": "^1.0.7",
|
||||||
|
"vue-masonry-css": "^1.0.2",
|
||||||
"vuedraggable": "^2.16.0",
|
"vuedraggable": "^2.16.0",
|
||||||
"vuex": "^3.0.1"
|
"vuex": "^3.0.1"
|
||||||
},
|
},
|
||||||
|
|
|
@ -101,6 +101,71 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- MASONRY VIEW MODE -->
|
||||||
|
<masonry
|
||||||
|
v-if="viewMode == 'masonry'"
|
||||||
|
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
|
||||||
|
:gutter="30"
|
||||||
|
class="tainacan-masonry-container">
|
||||||
|
<div
|
||||||
|
:key="index"
|
||||||
|
v-for="(item, index) of items"
|
||||||
|
:class="{ 'selected-masonry-item': selectedItems[index] }"
|
||||||
|
class="tainacan-masonry-item">
|
||||||
|
|
||||||
|
<!-- Checkbox -->
|
||||||
|
<div
|
||||||
|
:class="{ 'is-selecting': isSelectingItems }"
|
||||||
|
class="masonry-item-checkbox">
|
||||||
|
<label
|
||||||
|
tabindex="0"
|
||||||
|
class="b-checkbox checkbox is-small">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
v-model="selectedItems[index]">
|
||||||
|
<span class="check" />
|
||||||
|
<span class="control-label" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<div
|
||||||
|
@click="goToItemPage(item)"
|
||||||
|
class="metadata-title">
|
||||||
|
<p>{{ item.title != undefined ? item.title : '' }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Thumbnail -->
|
||||||
|
<img
|
||||||
|
@click="goToItemPage(item)"
|
||||||
|
v-if="item.thumbnail != undefined"
|
||||||
|
:src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
|
<div
|
||||||
|
v-if="item.current_user_can_edit"
|
||||||
|
class="actions-area"
|
||||||
|
:label="$i18n.get('label_actions')">
|
||||||
|
<a
|
||||||
|
id="button-edit"
|
||||||
|
:aria-label="$i18n.getFrom('items','edit_item')"
|
||||||
|
@click.prevent.stop="goToItemEditPage(item)">
|
||||||
|
<b-icon
|
||||||
|
type="is-secondary"
|
||||||
|
icon="pencil"/>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
id="button-delete"
|
||||||
|
:aria-label="$i18n.get('label_button_delete')"
|
||||||
|
@click.prevent.stop="deleteOneItem(item.id)">
|
||||||
|
<b-icon
|
||||||
|
type="is-secondary"
|
||||||
|
:icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</masonry>
|
||||||
|
|
||||||
<!-- CARDS VIEW MODE -->
|
<!-- CARDS VIEW MODE -->
|
||||||
<div
|
<div
|
||||||
class="tainacan-cards-container"
|
class="tainacan-cards-container"
|
||||||
|
@ -596,6 +661,7 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
@import "../../scss/_variables.scss";
|
@import "../../scss/_variables.scss";
|
||||||
|
@import "../../scss/_view-mode-masonry.scss";
|
||||||
@import "../../scss/_view-mode-grid.scss";
|
@import "../../scss/_view-mode-grid.scss";
|
||||||
@import "../../scss/_view-mode-cards.scss";
|
@import "../../scss/_view-mode-cards.scss";
|
||||||
@import "../../scss/_view-mode-records.scss";
|
@import "../../scss/_view-mode-records.scss";
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
tag="a"
|
tag="a"
|
||||||
:to="$routerHelper.getProcessesPage()"
|
:to="$routerHelper.getProcessesPage()"
|
||||||
class="is-secondary">
|
class="is-secondary">
|
||||||
{{ $i18n.get('label_see_more') }}
|
{{ $i18n.get('label_view_more') }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li
|
||||||
|
@ -44,6 +44,7 @@
|
||||||
:class="{ 'mdi-menu-down': processesColapses[index], 'mdi-menu-right': !processesColapses[index] }" />
|
:class="{ 'mdi-menu-down': processesColapses[index], 'mdi-menu-right': !processesColapses[index] }" />
|
||||||
</span>
|
</span>
|
||||||
<p>{{ bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process') }}</p>
|
<p>{{ bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process') }}</p>
|
||||||
|
<span class="process-title-value">{{ (bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? '(' + bgProcesses[0].progress_value + '%)' : '' }}</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- <span
|
<!-- <span
|
||||||
v-if="bgProcess.done <= 0"
|
v-if="bgProcess.done <= 0"
|
||||||
|
@ -89,7 +90,7 @@
|
||||||
class="icon has-text-blue5"><i class="mdi mdi-18px mdi-autorenew"/></span>
|
class="icon has-text-blue5"><i class="mdi mdi-18px mdi-autorenew"/></span>
|
||||||
<p class="footer-title">
|
<p class="footer-title">
|
||||||
{{ hasAnyProcessExecuting ?
|
{{ hasAnyProcessExecuting ?
|
||||||
(bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value : '') : $i18n.get('label_no_details_of_process')):
|
(bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value + '%' : '') : $i18n.get('label_no_details_of_process')):
|
||||||
$i18n.get('info_no_process')
|
$i18n.get('info_no_process')
|
||||||
}}
|
}}
|
||||||
</p>
|
</p>
|
||||||
|
@ -279,6 +280,10 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
}
|
}
|
||||||
|
span.process-title-value {
|
||||||
|
font-style: italic;
|
||||||
|
color: $gray3;
|
||||||
|
}
|
||||||
|
|
||||||
.mdi-menu-left, .mdi-menu-right {
|
.mdi-menu-left, .mdi-menu-right {
|
||||||
color: $turquoise2;
|
color: $turquoise2;
|
||||||
|
|
|
@ -7,6 +7,7 @@ import Vue from 'vue';
|
||||||
import Buefy from 'buefy';
|
import Buefy from 'buefy';
|
||||||
import VTooltip from 'v-tooltip';
|
import VTooltip from 'v-tooltip';
|
||||||
import { VueHammer } from 'vue2-hammer';
|
import { VueHammer } from 'vue2-hammer';
|
||||||
|
import VueMasonry from 'vue-masonry-css';
|
||||||
|
|
||||||
// Custom elements
|
// Custom elements
|
||||||
import Text from '../../classes/metadata-types/text/Text.vue';
|
import Text from '../../classes/metadata-types/text/Text.vue';
|
||||||
|
@ -49,6 +50,7 @@ import VueTheMask from 'vue-the-mask';
|
||||||
Vue.use(Buefy);
|
Vue.use(Buefy);
|
||||||
Vue.use(VTooltip);
|
Vue.use(VTooltip);
|
||||||
Vue.use(VueHammer);
|
Vue.use(VueHammer);
|
||||||
|
Vue.use(VueMasonry);
|
||||||
Vue.use(I18NPlugin);
|
Vue.use(I18NPlugin);
|
||||||
Vue.use(UserPrefsPlugin);
|
Vue.use(UserPrefsPlugin);
|
||||||
Vue.use(RouterHelperPlugin);
|
Vue.use(RouterHelperPlugin);
|
||||||
|
|
|
@ -3,6 +3,7 @@ import Vue from 'vue';
|
||||||
import Buefy from 'buefy';
|
import Buefy from 'buefy';
|
||||||
import VTooltip from 'v-tooltip';
|
import VTooltip from 'v-tooltip';
|
||||||
import { VueHammer } from 'vue2-hammer';
|
import { VueHammer } from 'vue2-hammer';
|
||||||
|
import VueMasonry from 'vue-masonry-css';
|
||||||
|
|
||||||
// Custom elements
|
// Custom elements
|
||||||
import Text from '../../classes/metadata-types/text/Text.vue';
|
import Text from '../../classes/metadata-types/text/Text.vue';
|
||||||
|
@ -33,6 +34,7 @@ import ItemsPage from '../pages/lists/items-page.vue';
|
||||||
import ViewModeTable from '../../theme-helper/view-mode-table.vue';
|
import ViewModeTable from '../../theme-helper/view-mode-table.vue';
|
||||||
import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
|
import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
|
||||||
import ViewModeRecords from '../../theme-helper/view-mode-records.vue';
|
import ViewModeRecords from '../../theme-helper/view-mode-records.vue';
|
||||||
|
import ViewModeMasonry from '../../theme-helper/view-mode-masonry.vue';
|
||||||
|
|
||||||
// Remaining imports
|
// Remaining imports
|
||||||
import HelpButton from '../components/other/help-button.vue';
|
import HelpButton from '../components/other/help-button.vue';
|
||||||
|
@ -46,6 +48,7 @@ import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from '
|
||||||
Vue.use(Buefy);
|
Vue.use(Buefy);
|
||||||
Vue.use(VTooltip);
|
Vue.use(VTooltip);
|
||||||
Vue.use(VueHammer);
|
Vue.use(VueHammer);
|
||||||
|
Vue.use(VueMasonry);
|
||||||
Vue.use(I18NPlugin);
|
Vue.use(I18NPlugin);
|
||||||
Vue.use(UserPrefsPlugin);
|
Vue.use(UserPrefsPlugin);
|
||||||
Vue.use(RouterHelperPlugin);
|
Vue.use(RouterHelperPlugin);
|
||||||
|
@ -85,6 +88,7 @@ Vue.component('items-page', ItemsPage);
|
||||||
Vue.component('view-mode-table', ViewModeTable);
|
Vue.component('view-mode-table', ViewModeTable);
|
||||||
Vue.component('view-mode-cards', ViewModeCards);
|
Vue.component('view-mode-cards', ViewModeCards);
|
||||||
Vue.component('view-mode-records', ViewModeRecords);
|
Vue.component('view-mode-records', ViewModeRecords);
|
||||||
|
Vue.component('view-mode-masonry', ViewModeMasonry);
|
||||||
|
|
||||||
Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
||||||
|
|
||||||
|
|
|
@ -307,7 +307,8 @@
|
||||||
:class="{'mdi-view-list' : ( adminViewMode == 'table' || adminViewMode == undefined),
|
:class="{'mdi-view-list' : ( adminViewMode == 'table' || adminViewMode == undefined),
|
||||||
'mdi-view-module' : adminViewMode == 'cards',
|
'mdi-view-module' : adminViewMode == 'cards',
|
||||||
'mdi-apps' : adminViewMode == 'grid',
|
'mdi-apps' : adminViewMode == 'grid',
|
||||||
'mdi-view-column' : adminViewMode == 'records'}"
|
'mdi-view-column' : adminViewMode == 'records',
|
||||||
|
'mdi-view-dashboard' : adminViewMode == 'masonry'}"
|
||||||
class="mdi"/>
|
class="mdi"/>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -346,6 +347,14 @@
|
||||||
icon="view-column"/>
|
icon="view-column"/>
|
||||||
{{ $i18n.get('label_records') }}
|
{{ $i18n.get('label_records') }}
|
||||||
</b-dropdown-item>
|
</b-dropdown-item>
|
||||||
|
<b-dropdown-item
|
||||||
|
:class="{ 'is-active': adminViewMode == 'masonry' }"
|
||||||
|
:value="'masonry'">
|
||||||
|
<b-icon
|
||||||
|
class="gray-icon"
|
||||||
|
icon="view-dashboard"/>
|
||||||
|
{{ $i18n.get('label_masonry') }}
|
||||||
|
</b-dropdown-item>
|
||||||
</b-dropdown>
|
</b-dropdown>
|
||||||
</b-field>
|
</b-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -25,4 +25,4 @@
|
||||||
background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
|
background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
|
||||||
border-color: $gray4 !important;
|
border-color: $gray4 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -107,6 +107,7 @@
|
||||||
font-size: 0.6875rem !important;
|
font-size: 0.6875rem !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
max-height: 152px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.metadata-author-creation {
|
.metadata-author-creation {
|
||||||
|
|
|
@ -0,0 +1,90 @@
|
||||||
|
.tainacan-masonry-container {
|
||||||
|
min-height: 50vh;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
|
||||||
|
.selected-masonry-item {
|
||||||
|
background-color: $turquoise1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tainacan-masonry-item {
|
||||||
|
animation-name: item-appear;
|
||||||
|
display: block;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
width: 100%;
|
||||||
|
flex-basis: 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $gray1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masonry-item-checkbox {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
.actions-area {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
padding: 8px;
|
||||||
|
transition: visibility 0.2s, opacity 0.2s;
|
||||||
|
margin-top: -43px;
|
||||||
|
background-color: $gray2;
|
||||||
|
border-bottom-left-radius: 2px;
|
||||||
|
border-bottom-right-radius: 2px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover .actions-area {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
&.selected-grid-item {
|
||||||
|
.actions-area {
|
||||||
|
background-color: $turquoise1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-bottom: -5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-title {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0px 6px 0px 24px;
|
||||||
|
padding: 10px 1rem;
|
||||||
|
min-height: 41px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 0.875rem !important;
|
||||||
|
color: black !important;
|
||||||
|
text-align: left !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -239,6 +239,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
||||||
'label_table' => __( 'Table', 'tainacan' ),
|
'label_table' => __( 'Table', 'tainacan' ),
|
||||||
'label_cards' => __( 'Cards', 'tainacan' ),
|
'label_cards' => __( 'Cards', 'tainacan' ),
|
||||||
'label_records' => __( 'Records', 'tainacan' ),
|
'label_records' => __( 'Records', 'tainacan' ),
|
||||||
|
'label_masonry' => __( 'Masonry', 'tainacan' ),
|
||||||
'label_visualization' => __( 'Visualization', 'tainacan' ),
|
'label_visualization' => __( 'Visualization', 'tainacan' ),
|
||||||
'label_available_importers' => __( 'Available Importers', 'tainacan' ),
|
'label_available_importers' => __( 'Available Importers', 'tainacan' ),
|
||||||
'label_target_collection' => __( 'Target Collection', 'tainacan' ),
|
'label_target_collection' => __( 'Target Collection', 'tainacan' ),
|
||||||
|
@ -275,6 +276,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
||||||
'label_import_collection' => __( 'Import collection', 'tainacan' ),
|
'label_import_collection' => __( 'Import collection', 'tainacan' ),
|
||||||
'label_semantic_uri' => __( 'Semantic Uri', 'tainacan' ),
|
'label_semantic_uri' => __( 'Semantic Uri', 'tainacan' ),
|
||||||
'label_view_collection' => __( 'View collection', 'tainacan' ),
|
'label_view_collection' => __( 'View collection', 'tainacan' ),
|
||||||
|
'label_view_more' => __( 'View more', 'tainacan' ),
|
||||||
|
|
||||||
// Instructions. More complex sentences to guide user and placeholders
|
// Instructions. More complex sentences to guide user and placeholders
|
||||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||||
|
|
|
@ -56,19 +56,26 @@ class Theme_Helper {
|
||||||
'type' => 'component',
|
'type' => 'component',
|
||||||
]);
|
]);
|
||||||
$this->register_view_mode('cards', [
|
$this->register_view_mode('cards', [
|
||||||
'label' => __('Cards view', 'tainacan'),
|
'label' => __('Cards', 'tainacan'),
|
||||||
'dynamic_metadata' => false,
|
'dynamic_metadata' => false,
|
||||||
'description' => 'A cards view, displaying title, description, author name and creation date.',
|
'description' => 'A cards view, displaying title, description, author name and creation date.',
|
||||||
'icon' => '<span class="icon"><i class="mdi mdi-view-module mdi-24px"></i></span>',
|
'icon' => '<span class="icon"><i class="mdi mdi-view-module mdi-24px"></i></span>',
|
||||||
'type' => 'component'
|
'type' => 'component'
|
||||||
]);
|
]);
|
||||||
$this->register_view_mode('records', [
|
$this->register_view_mode('records', [
|
||||||
'label' => __('Records view', 'tainacan'),
|
'label' => __('Records', 'tainacan'),
|
||||||
'dynamic_metadata' => true,
|
'dynamic_metadata' => true,
|
||||||
'description' => 'A records view, similiar to cards, but flexible for metadata',
|
'description' => 'A records view, similiar to cards, but flexible for metadata',
|
||||||
'icon' => '<span class="icon"><i class="mdi mdi-view-column mdi-24px"></i></span>',
|
'icon' => '<span class="icon"><i class="mdi mdi-view-column mdi-24px"></i></span>',
|
||||||
'type' => 'component'
|
'type' => 'component'
|
||||||
]);
|
]);
|
||||||
|
$this->register_view_mode('masonry', [
|
||||||
|
'label' => __('Masonry', 'tainacan'),
|
||||||
|
'dynamic_metadata' => false,
|
||||||
|
'description' => 'A masonry view, similar to pinterest, which will display images without cropping.',
|
||||||
|
'icon' => '<span class="icon"><i class="mdi mdi-view-dashboard mdi-24px"></i></span>',
|
||||||
|
'type' => 'component'
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
public function enqueue_scripts($force = false) {
|
public function enqueue_scripts($force = false) {
|
||||||
|
|
|
@ -62,19 +62,14 @@ function tainacan_the_metadata($args = array()) {
|
||||||
*
|
*
|
||||||
* Return the item document as a HTML string to be used as output.
|
* Return the item document as a HTML string to be used as output.
|
||||||
*
|
*
|
||||||
* @param int|string|Tainacan\Entities\Metadatum $metadatum Metadatum object, ID or slug to retrieve only one metadatum. empty returns all metadata
|
|
||||||
* @param bool $hide_empty Wether to hide or not metadata the item has no value to
|
|
||||||
* @return string The HTML output
|
* @return string The HTML output
|
||||||
*/
|
*/
|
||||||
function tainacan_get_the_document() {
|
function tainacan_get_the_document() {
|
||||||
$post = get_post();
|
$item = tainacan_get_item();
|
||||||
$theme_helper = \Tainacan\Theme_Helper::get_instance();
|
|
||||||
|
|
||||||
if (!$theme_helper->is_post_an_item($post))
|
if (!$item)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
$item = new Entities\Item($post);
|
|
||||||
|
|
||||||
return $item->get_document_html();
|
return $item->get_document_html();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -83,6 +78,25 @@ function tainacan_the_document() {
|
||||||
echo tainacan_get_the_document();
|
echo tainacan_get_the_document();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* To be used inside The Loop
|
||||||
|
*
|
||||||
|
* Check whether the current item has a document or not
|
||||||
|
*
|
||||||
|
* @return bool True if item has document, false if it does not
|
||||||
|
*/
|
||||||
|
function tainacan_has_document() {
|
||||||
|
$item = tainacan_get_item();
|
||||||
|
|
||||||
|
if (!$item)
|
||||||
|
return;
|
||||||
|
|
||||||
|
$document = $item->get_document();
|
||||||
|
|
||||||
|
return ! empty($document);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* When visiting a collection archive or single, returns the current collection id
|
* When visiting a collection archive or single, returns the current collection id
|
||||||
*
|
*
|
||||||
|
|
|
@ -0,0 +1,81 @@
|
||||||
|
<template>
|
||||||
|
<div class="table-container">
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<!-- RECORDS VIEW MODE -->
|
||||||
|
<masonry
|
||||||
|
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
|
||||||
|
:gutter="30"
|
||||||
|
class="tainacan-masonry-container">
|
||||||
|
<a
|
||||||
|
:key="index"
|
||||||
|
v-for="(item, index) of items"
|
||||||
|
class="tainacan-masonry-item"
|
||||||
|
@click="goToItemPage(item)">
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<div class="metadata-title">
|
||||||
|
<p>{{ item.title != undefined ? item.title : '' }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Thumbnail -->
|
||||||
|
<img
|
||||||
|
v-if="item.thumbnail != undefined"
|
||||||
|
:src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
|
||||||
|
</a>
|
||||||
|
</masonry>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ViewModeMasonry',
|
||||||
|
props: {
|
||||||
|
collectionId: Number,
|
||||||
|
displayedMetadata: Array,
|
||||||
|
items: Array,
|
||||||
|
isLoading: false,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goToItemPage(item) {
|
||||||
|
window.location.href = item.url;
|
||||||
|
},
|
||||||
|
renderMetadata(itemMetadata, column) {
|
||||||
|
|
||||||
|
let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
|
||||||
|
|
||||||
|
if (!metadata) {
|
||||||
|
return '';
|
||||||
|
} else if (metadata.date_i18n) {
|
||||||
|
return metadata.date_i18n;
|
||||||
|
} else {
|
||||||
|
return metadata.value_as_html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$turquoise1: #e6f6f8;
|
||||||
|
$turquoise2: #d1e6e6;
|
||||||
|
$tainacan-input-color: #1d1d1d;
|
||||||
|
$gray1: #f2f2f2;
|
||||||
|
$gray2: #e5e5e5;
|
||||||
|
$gray4: #898d8f;
|
||||||
|
$gray3: #dcdcdc;
|
||||||
|
|
||||||
|
@import "../../src/admin/scss/_view-mode-masonry.scss";
|
||||||
|
|
||||||
|
.tainacan-masonry-container .tainacan-masonry-item .metadata-title {
|
||||||
|
margin: 0px 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue